:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#080a10;color:#f5f7fc}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#000}button{font:inherit}button:focus-visible{outline:3px solid #9abaff;outline-offset:4px}[hidden]{display:none!important}
#stage,.scene{position:absolute;inset:0}.scene{display:flex;flex-direction:column;visibility:hidden;background:#000}.scene.active{visibility:visible}.main-media{position:relative;flex:1;min-height:0;overflow:hidden}.main-media>img,.main-media>video{width:100%;height:100%;display:block;object-fit:contain}.main-media.cover>img,.main-media.cover>video{object-fit:cover}.bottom-media{height:var(--height,25%);flex-shrink:0;background:#101419;display:grid;place-items:center;overflow:hidden}.bottom-media img{width:100%;height:100%;object-fit:contain}.bottom-media p{white-space:pre-wrap;margin:2.5vh 4vw;font-size:clamp(20px,3vw,64px);line-height:1.4;text-align:center}
.welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px;background:radial-gradient(ellipse at 50% 15%,#182332,#0a0d13 65%)}.mark{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:#eaf1ff;color:#1e304c;font-weight:600;font-size:32px;margin-bottom:28px}.eyebrow{font-size:16px;letter-spacing:.18em;color:#aab6c9}h1{font-size:clamp(30px,4vw,64px);font-weight:550;letter-spacing:-.04em;margin:12px 0}#welcomeMessage{color:#b8c1d1;font-size:clamp(16px,1.6vw,22px);line-height:1.65;max-width:660px}code{color:#66788e;font-size:14px;margin-top:20px}
.tools{position:fixed;z-index:20;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #ffffff20;border-radius:18px;background:#121824df;backdrop-filter:blur(16px);transition:opacity .18s}#screenLabel{padding:0 12px;color:#ccd6e5;font-size:14px}.tools button{border:0;border-radius:11px;min-height:44px;padding:11px 18px;color:#eff5ff;background:#ffffff14;cursor:pointer}.tools button:hover{background:#ffffff24}.tools button:active{transform:scale(.97)}#soundButton,#playButton{background:#e8f0ff;color:#182c48}.tools.idle{opacity:0;pointer-events:none}.tools:focus-within{opacity:1;pointer-events:auto}#notice{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:19;padding:12px 18px;border:1px solid #ffffff20;border-radius:12px;background:#151a24ed;color:#dbe4f3;font-size:14px;max-width:min(580px,90vw);text-align:center;line-height:1.5}noscript{position:fixed;inset:40%;z-index:30}
@media(max-width:700px){.tools{left:16px;right:16px;bottom:16px;justify-content:center}#screenLabel{display:none}#notice{bottom:95px}.tools button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.tools{transition:none}.tools button:active{transform:none}}
.main-media>iframe{width:100%;height:100%;display:block;border:0;background:#fff}
#fullscreenButton{margin-top:28px;border:1px solid #ffffff26;border-radius:12px;padding:12px 22px;color:#eef4ff;background:#ffffff10;cursor:pointer}
.tools{left:50%;right:auto;bottom:24px;transform:translateX(-50%);max-width:calc(100% - 32px);justify-content:center}