@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--ice:#b1eeff;--muted:#94a3bd}*{box-sizing:border-box}body{margin:0;background:#050613;color:#eef6ff;min-height:100svh;overflow:hidden;font-family:'Space Grotesk','Microsoft YaHei',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--ice);outline-offset:6px}canvas,.nebula,.grain,.vignette{position:fixed;inset:0;pointer-events:none}canvas{width:100%;height:100%;z-index:1}.nebula{background:radial-gradient(ellipse at 67% 40%,#5841c52c,transparent 43%),radial-gradient(ellipse at 30% 64%,#157fab20,transparent 40%);filter:blur(25px);animation:nebula 18s ease-in-out infinite alternate}.grain{z-index:4;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' opacity='.7' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.vignette{z-index:2;background:radial-gradient(ellipse at center,transparent 20%,#03051088 100%)}header,footer{position:fixed;left:4.8%;right:4.8%;display:flex;align-items:center;justify-content:space-between;z-index:5}header{top:36px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#e8f1ff;font-size:16px;letter-spacing:4px}.brand-symbol{font-size:39px;font-weight:400;color:var(--ice);line-height:1}.brand small{display:block;font-size:8px;letter-spacing:3px;color:#a6b1c7;margin-top:6px}.header-right{display:flex;align-items:center;gap:30px}.live{font-size:11px;letter-spacing:2px;color:#aab8cf}.live i{display:inline-block;width:5px;height:5px;background:#9ce7db;border-radius:50%;margin-right:9px;box-shadow:0 0 10px #9ce7db}#motion{border:1px solid #a7c8ef26;border-radius:30px;padding:9px 15px;background:#101a2a55;font-size:11px;letter-spacing:1px}#motion span{margin-left:12px;color:#9fc0e0}main{position:relative;z-index:3;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:110px 20px 115px}.orbit-label{font-size:11px;color:#b7c7df;letter-spacing:5px;display:flex;align-items:center;gap:18px;margin-bottom:34px}.orbit-label span{width:32px;height:1px;background:linear-gradient(90deg,transparent,#b5d4ff77)}.orbit-label span:last-child{transform:rotate(180deg)}.stage{position:relative;min-height:300px;display:grid;place-items:center;width:100%}.intro,.reveal{grid-area:1/1;width:100%;transition:opacity .6s,filter .6s,transform .6s}.eyebrow{font-size:9px;letter-spacing:6px;color:#a7c4e7;margin:0 0 20px}h1{font-family:'Noto Serif SC','Songti SC',SimSun,serif;font-size:clamp(46px,6.5vw,91px);letter-spacing:.13em;font-weight:400;line-height:1.35;margin:0 0 22px;padding-left:.13em;text-shadow:0 0 65px #81b7ff3b}h1 em{font-style:normal;background:linear-gradient(110deg,#cef6ff 12%,#a5bdf8 54%,#d4bafa 85%);background-clip:text;-webkit-background-clip:text;color:transparent}.subtitle{font-size:12px;line-height:1.9;letter-spacing:3px;color:#a7b8d2;margin:0}.intro.leaving{opacity:0;filter:blur(15px);transform:scale(1.08);pointer-events:none}.reveal{animation:arrive 1.6s cubic-bezier(.16,1,.3,1) both}.reveal[hidden]{display:none}.reveal h1{font-weight:600;line-height:1.35}.replay{border:0;border-bottom:1px solid #b8d4ff55;background:transparent;margin-top:25px;padding:9px 3px;font-size:11px;letter-spacing:2px;color:#cbddf5}.replay span{margin-left:22px}.transmission{width:270px;margin-top:30px}.signal-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#b5c4da}.track{height:2px;background:#9dbad422;margin-top:12px;overflow:hidden}#progress{height:100%;width:0;background:linear-gradient(90deg,#7161ed,#aef5ff);box-shadow:0 0 14px #a4e9ff}#hint{font-size:9px;letter-spacing:1.8px;color:#75869f;margin-top:12px}.coordinates{position:fixed;z-index:3;left:4.8%;top:47%;display:flex;flex-direction:column;gap:14px;color:#8c9bb26a;font-size:8px;letter-spacing:2px;writing-mode:vertical-rl}footer{bottom:32px;color:#8c9cb6;font-size:10px;letter-spacing:2px}footer>span:first-child{font-size:9px}footer .tip{color:#8b9db67a;font-size:9px}#warp{border:1px solid #c2d8ff32;border-radius:3px;background:#0c132755;padding:12px 20px;letter-spacing:2px;font-size:10px}#warp span{margin-left:26px;color:var(--ice)}#warp:hover,#motion:hover{background:#4e63a029;border-color:#b3d8ff88}#flash{position:fixed;inset:0;z-index:6;pointer-events:none;background:radial-gradient(ellipse at center,#b1ddff6b,transparent 70%);opacity:0}#flash.fire{animation:flash 1.2s ease-out}body.paused .nebula{animation-play-state:paused}@keyframes flash{0%{opacity:0}15%{opacity:.6}100%{opacity:0}}@keyframes arrive{from{opacity:0;filter:blur(20px);transform:scale(.92) translateY(20px)}to{opacity:1;filter:blur(0);transform:none}}@keyframes nebula{to{transform:scale(1.2) rotate(8deg);opacity:.7}}@media(max-width:650px){header{top:24px;left:6%;right:6%}.brand{font-size:13px;letter-spacing:3px}.brand-symbol{font-size:30px}.brand small{font-size:7px;letter-spacing:2px}.live{display:none}.orbit-label{font-size:9px;letter-spacing:3px;margin-bottom:25px;gap:10px}.orbit-label span{width:20px}.eyebrow{font-size:8px;letter-spacing:4px}.subtitle{font-size:11px;letter-spacing:1px;padding:0 15px}.stage{min-height:285px}.transmission{margin-top:25px;width:240px}.coordinates{display:none}footer{left:6%;right:6%;bottom:24px}footer .tip{display:none}#warp{padding:10px 12px}#warp span{margin-left:12px}main{padding-top:105px}}@media(max-height:650px){main{padding-top:95px;padding-bottom:80px}.orbit-label{margin-bottom:15px}.stage{min-height:245px}h1{font-size:clamp(40px,6vw,70px);margin-bottom:12px}.transmission{margin-top:15px}.replay{margin-top:12px}header{top:20px}footer{bottom:18px}}@media(prefers-reduced-motion:reduce){.nebula,.reveal,#flash.fire{animation:none}.intro{transition:none}}
#sound{border:1px solid #a7c8ef26;border-radius:30px;padding:9px 15px;background:#101a2a55;font-size:11px;letter-spacing:1px}#sound span{margin-left:9px;color:#9fc0e0}#sound:hover{background:#4e63a029;border-color:#b3d8ff88}#sound[aria-pressed=true]{color:#b1eeff;border-color:#9ddeff70}.header-right{gap:14px}@media(max-width:650px){.header-right{gap:6px}#sound,#motion{padding:8px 9px;font-size:9px;letter-spacing:0}#sound span,#motion span{margin-left:4px}.brand{gap:6px;font-size:12px;letter-spacing:2px}.brand-symbol{font-size:25px}}