:root { color-scheme: dark; --ink: rgba(250,248,235,.96); --soft: rgba(237,242,250,.64); --safe: max(24px, env(safe-area-inset-top)); }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #071121; }
body { color: var(--ink); font-family: "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
.sky { position: relative; width: 100%; height: 100%; min-height: 420px; overflow: hidden; isolation: isolate; background: #071121; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.grain { position:absolute; inset:-50%; z-index:-2; pointer-events:none; opacity:.045; mix-blend-mode:soft-light; background-image:repeating-radial-gradient(circle at 17% 32%,transparent 0,rgba(255,255,255,.8) .45px,transparent .9px,transparent 4px); background-size:7px 7px; animation:grain .35s steps(2) infinite; }
.masthead { position:absolute; top:var(--safe); left:max(22px,env(safe-area-inset-left)); right:max(22px,env(safe-area-inset-right)); display:flex; align-items:center; justify-content:space-between; z-index:2; }
.wordmark { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.27em; }
.wordmark i { width:21px; height:21px; border:1px solid rgba(255,255,255,.65); border-radius:50%; position:relative; }
.wordmark i:after { content:""; position:absolute; width:7px; height:7px; left:6px; top:6px; border-radius:50%; background:#fff7d3; box-shadow:0 0 9px #fff2ad; }
.season-readout { display:flex; align-items:baseline; gap:12px; letter-spacing:.18em; }
.season-readout span { color:#ffd889; font-size:12px; }.season-readout time { font:14px Consolas,monospace; }
.opening { position:absolute; top:50%; left:clamp(24px,9vw,150px); max-width:570px; transform:translateY(-52%); pointer-events:none; animation:intro 9s 2s cubic-bezier(.16,1,.3,1) both; }
.opening p { margin:0 0 19px; font-size:11px; font-weight:600; letter-spacing:.3em; opacity:.65; }.opening h1 { margin:0; font-family:"Songti SC","STSong",serif; font-size:clamp(44px,7.1vw,106px); line-height:1.09; font-weight:400; letter-spacing:-.05em; text-shadow:0 3px 36px rgba(0,0,0,.25); }.opening span { display:block; margin:26px 0 0 3px; color:var(--soft); font:clamp(14px,1.4vw,18px) "Songti SC","STSong",serif; letter-spacing:.14em; }
.poetry { position:absolute; right:clamp(24px,5vw,84px); bottom:clamp(112px,16vh,170px); margin:0; color:var(--soft); font:13px "Songti SC","STSong",serif; letter-spacing:.16em; writing-mode:vertical-rl; }
.north-star { position:absolute; left:50%; top:20.8%; transform:translateX(17px); color:rgba(236,242,255,.55); font-size:10px; letter-spacing:.12em; white-space:nowrap; }.north-star b { display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:#f9f5d6; box-shadow:0 0 12px #fff6bd; vertical-align:middle; }
.controls { position:absolute; left:50%; bottom:max(22px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; gap:6px; padding:6px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(5,13,29,.28); box-shadow:0 16px 50px rgba(0,0,0,.22); backdrop-filter:blur(18px); }
button { display:flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 14px; border:0; border-radius:999px; color:rgba(255,255,255,.78); font:inherit; background:transparent; cursor:pointer; transition:.2s ease; } button:hover,button:focus-visible { background:rgba(255,255,255,.12); color:#fff; outline:none; } button:active { transform:scale(.95); } button.primary { color:#17202a; background:rgba(255,250,232,.94); } button.primary:hover { background:#fffdf4; } button b { width:17px; text-align:center; font:700 14px Arial,sans-serif; } #speed-value { font:600 10px Consolas,monospace; letter-spacing:-.08em; } button span { font-size:11px; letter-spacing:.08em; white-space:nowrap; }.full-icon { width:14px; height:14px; background:linear-gradient(currentColor,currentColor) 0 0/5px 1px no-repeat,linear-gradient(currentColor,currentColor) 0 0/1px 5px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/5px 1px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/1px 5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/5px 1px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/1px 5px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/5px 1px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/1px 5px no-repeat; }
.help { position:absolute; right:max(22px,env(safe-area-inset-right)); bottom:35px; margin:0; color:rgba(255,255,255,.45); font-size:10px; letter-spacing:.1em; }.ambient-ui { transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1); }.sky.idle .ambient-ui { opacity:0; pointer-events:none; }.sky.idle .controls { transform:translate(-50%,16px); }
@keyframes intro { 0%,52% {opacity:1;filter:blur(0);transform:translateY(-52%)} 100% {opacity:0;filter:blur(8px);transform:translateY(-59%)} } @keyframes grain { 50% {transform:translate(1.5%,-1%)} }
@media(max-width:760px) { .opening { top:45%; left:24px; }.opening h1 { font-size:clamp(42px,13.4vw,72px); }.poetry,.help { display:none; } button span { display:none; } button { width:42px;padding:0; } button.primary { width:52px; } .wordmark { letter-spacing:.17em; } }
@media(prefers-reduced-motion:reduce) { .grain,.opening { animation:none; } }

/* 北极星由 Canvas 唯一绘制；这里仅保留文字标签。 */
.north-star b { display: none; }

.season-readout { flex-direction: column; gap: 3px; align-items: flex-end; }
.season-readout time { color: rgba(255,255,255,.72); font-size: 11px; }