:root{color-scheme:dark;--bg:#13111c;--line:#ffffff16;--muted:#aaa4bb;--mint:#a6f5e0;--purple:#c3a3fa}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f5f0ff;font:14px/1.6 system-ui,sans-serif}a{color:inherit;text-decoration:none}header,footer{display:flex;justify-content:space-between;align-items:center;padding:24px 4vw;border-bottom:1px solid var(--line)}.brand{font-weight:800;letter-spacing:3px}.brand span{color:var(--mint)}.tag,.eyebrow,footer{font:11px/1.5 ui-monospace,monospace;letter-spacing:2px;color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,1fr) 380px;max-width:1500px;margin:auto}.stage-wrap{position:relative;min-height:820px;background:radial-gradient(ellipse at 52% 42%,#372f51 0%,#1e1a2c 48%,#17141f 80%);overflow:hidden;border-right:1px solid var(--line)}.stage-wrap:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:40px 40px}.stage-label,.stage-bottom{position:absolute;z-index:2;left:32px;right:32px;display:flex;align-items:center;gap:9px;font:11px ui-monospace,monospace;color:var(--muted);letter-spacing:1px}.stage-label{top:28px}.stage-bottom{bottom:26px;justify-content:space-between}.dot{width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px var(--mint)}.backword{position:absolute;top:35%;width:100%;text-align:center;font-size:clamp(70px,12vw,170px);font-weight:900;letter-spacing:-10px;color:#b699e509;pointer-events:none}#stage{position:absolute;inset:54px 12px 54px;touch-action:pan-y}canvas{display:block;width:100%;height:100%}aside{padding:40px 30px}.eyebrow{color:var(--mint);margin:0 0 18px}h1{font-size:36px;line-height:1.3;letter-spacing:-1px;margin:0 0 18px}h1 em{font-style:normal;color:var(--purple)}.intro{color:var(--muted);margin-bottom:24px}.actions{display:flex;gap:10px;margin-bottom:28px}button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:7px;color:inherit;background:#ffffff08;padding:9px 14px}button:hover{background:#ffffff15}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}#auto{background:var(--mint);color:#192d29;border-color:transparent}.panel{border-top:1px solid var(--line);padding:20px 0}.panel-title{display:flex;align-items:center;justify-content:space-between}h2{font-size:14px;margin:0}.text-button{border:0;color:var(--purple);background:none;padding:0;font-size:12px}.hint,.note{font-size:12px;color:var(--muted)}.hint{margin:4px 0 16px}.control{display:block;margin-top:12px}.control span{display:flex;justify-content:space-between;font-size:12px}.control output{font:11px ui-monospace,monospace;color:var(--mint)}input[type=range]{width:100%;accent-color:var(--purple);height:18px;cursor:pointer}.settings{display:flex;flex-wrap:wrap;gap:12px;font-size:12px}.settings input{accent-color:var(--mint)}.note{line-height:1.8}.download{font-size:12px;color:var(--purple)}footer{border-top:1px solid var(--line);border-bottom:0;font-size:9px}@media(min-width:1300px){.stage-wrap{min-height:900px}}@media(max-width:760px){header{padding:18px 20px}.tag{display:none}main{grid-template-columns:1fr}.stage-wrap{min-height:650px;height:75vh;border-right:0;border-bottom:1px solid var(--line)}aside{padding:28px 24px}h1{font-size:30px}footer{gap:15px;font-size:8px}}