:root{color-scheme:dark;--ink:#ece9df;--muted:#8994a3;--gold:#e1bb7b;--line:#a1b7cf26}
*{box-sizing:border-box}
html,body,main{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#070d17;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif}
#scene{position:absolute;inset:0;outline:none;touch-action:none}
canvas{display:block}
header{position:absolute;left:4vw;top:5vh;pointer-events:none;animation:appear 1.4s both}
.overline{font-size:9px;letter-spacing:.24em;color:#9ca9b8;display:flex;align-items:center;gap:10px}
.mark{height:13px;width:13px;border:1px solid #b2c6d2;transform:rotate(45deg);display:inline-block}
h1{font-family:"STSong","Songti SC","SimSun",serif;font-size:clamp(29px,3.5vw,49px);font-weight:400;letter-spacing:.15em;margin:18px 0 13px}
h1 span{color:var(--gold)}
header p{font-size:11px;letter-spacing:.14em;color:var(--muted);margin:0}
.weather{position:absolute;right:4vw;top:5.5vh;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.12em;color:#91a3b8}
.weather-dot{width:5px;height:5px;border-radius:50%;background:#aacfd9;box-shadow:0 0 10px #7ac8ff80}
.weather-line{height:11px;width:1px;background:var(--line);margin:0 4px}
.views{position:absolute;right:4vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.views button{border:0;border-right:2px solid transparent;background:transparent;color:#708397;padding:8px 12px;font-size:10px;letter-spacing:.1em;text-align:right;transition:color .2s,border .2s}
.views button.selected{color:var(--gold);border-right-color:var(--gold)}
button:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
footer{position:absolute;bottom:4vh;left:4vw;right:4vw;display:flex;align-items:end;justify-content:space-between;pointer-events:none}
.caption{display:flex;flex-direction:column;gap:8px}
.caption span{font-size:11px;letter-spacing:.14em;color:#a8b5c4}
.caption small{font-size:10px;letter-spacing:.06em;color:#64768a}
.toolbar{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);background:#111d2bba;backdrop-filter:blur(16px);border-radius:14px;pointer-events:auto}
.toolbar button{background:transparent;color:#718498;border:0;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-width:48px;min-height:45px;padding:4px 7px;font-size:9px;transition:color .2s}
.toolbar button.active{color:#dbc698}
.toolbar button:hover,.views button:hover{color:#fff4d8}
svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.divider{width:1px;height:28px;background:var(--line);margin:0 4px}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#070d17;color:#b8c4ce;font-size:12px;letter-spacing:.15em;transition:opacity .65s;z-index:5}
#loading span{width:24px;height:24px;border:1px solid #576e87;border-top-color:#f2d49f;border-radius:50%;animation:spin 1.3s linear infinite}
#loading.done{opacity:0;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:720px){header{left:22px;top:28px}.overline{font-size:8px;letter-spacing:.18em}h1{margin:14px 0 10px;font-size:32px}header p{font-size:10px}.weather{right:22px;top:34px;font-size:8px;gap:6px}.weather-line{display:none}.weather>span:nth-child(2){display:none}.views{right:18px;top:auto;bottom:125px;transform:none;flex-direction:row;gap:8px}.views button{border-right:0;border-bottom:1px solid transparent;padding:8px}.views button.selected{border-bottom-color:var(--gold)}footer{left:20px;right:20px;bottom:25px}.caption span{font-size:9px}.caption small{max-width:85px;line-height:1.7;font-size:9px}.toolbar{gap:2px;padding:7px}.toolbar button{min-width:40px}}
@media(prefers-reduced-motion:reduce){header{animation:none}*{transition:none!important}}