:root{color-scheme:dark;--black:#08090b;--surface:#15170f;--white:#f3efdf;--acid:#dbfa59;--m:28px;
--f:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--black);font-family:var(--f);color:var(--white)}
#stage{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}
canvas{display:block;width:100%;height:100%}
#overlay{position:absolute;inset:0;background:var(--black);transition:opacity .4s var(--ease)}
#overlay.hidden{opacity:0;pointer-events:none}
.swirl-bg{position:absolute;inset:0;pointer-events:none}.swirl-bg canvas{width:100%!important;height:100%!important}
.intro{position:absolute;inset:0;padding:var(--m)}
.lead{position:absolute;left:var(--m);top:var(--m);margin:0;max-width:24em;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);font-weight:600;line-height:1.4;animation:up .8s .3s var(--ease) both}
#play{position:absolute;right:var(--m);top:var(--m);display:flex;align-items:center;gap:12px;min-height:60px;padding:0 26px 0 20px;border:0;border-radius:0;background:var(--acid);color:var(--black);font:700 18px var(--f);cursor:pointer;transition:transform .2s var(--ease);animation:up .8s .4s var(--ease) both}
#play svg{width:22px;fill:currentColor}
#play:hover{transform:translateY(-2px)}#play:active{transform:scale(.97)}
.monument{position:absolute;left:0;right:0;bottom:84px;margin:0;text-align:center;font-size:clamp(120px,27vw,500px);font-weight:900;line-height:1;letter-spacing:-.06em;color:var(--white);white-space:nowrap;overflow:hidden}
.monument span{display:inline-block;animation:rise 1.1s var(--ease) both}.monument span:nth-child(2){animation-delay:.08s}.monument span:nth-child(3){animation-delay:.16s}
nav button{animation:up .7s .6s var(--ease) both}nav button:nth-child(2){animation-delay:.67s}nav button:nth-child(3){animation-delay:.74s}
nav{position:absolute;right:max(var(--m),env(safe-area-inset-right));bottom:max(var(--m),env(safe-area-inset-bottom));display:flex;gap:6px;z-index:2}
nav button{font:600 14px var(--f);min-height:44px;padding:0 16px;background:var(--surface);border:0;color:var(--white);border-radius:0;cursor:pointer;transition:background .2s,transform .2s}
nav button:hover{background:var(--acid);color:var(--black)}nav button:active{transform:scale(.96)}
button:focus-visible{outline:3px solid var(--acid);outline-offset:4px}
button:disabled{opacity:.4}
#status{position:absolute;left:var(--m);bottom:calc(var(--m) + 10px);font-size:14px;max-width:50%;color:var(--acid);z-index:2}
@keyframes rise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:600px){:root{--m:16px}
.lead{max-width:none;right:var(--m);font-size:18px}
#play{top:auto;left:var(--m);right:var(--m);bottom:calc(31vw + 112px);justify-content:center}
.monument{font-size:31vw;bottom:72px}
nav{left:var(--m);right:var(--m)}nav button{flex:1}
#status{bottom:76px;max-width:none;right:var(--m)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.swirl-bg{display:none}}