:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#02050a;color:#f6fbff}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 40%,#101c2d 0,#050811 58%,#010207 100%)}
body{display:grid;place-items:center}button{font:inherit;color:inherit}
#app{position:relative;width:min(100vw,100vh,600px);height:min(100vw,100vh,600px);aspect-ratio:1;overflow:hidden;background:#070b12;box-shadow:0 0 0 1px #ffffff20,0 24px 80px #000b}
canvas{display:block;width:100%;height:100%;touch-action:none}
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:30px;background:linear-gradient(#040811e8,#07101af4);text-align:center}
.overlay:empty{display:none}.panel{width:min(100%,500px);padding:28px;border:1px solid #b8ecff52;background:#07111de8;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.eyebrow{margin:0 0 8px;color:#a8bed2;font-size:12px;font-weight:800;letter-spacing:.18em}.title{margin:0;font-size:clamp(38px,8vw,68px);line-height:.87;letter-spacing:-.055em}.tagline{margin:13px 0 22px;color:#bdefff;font-size:18px;font-weight:900;letter-spacing:.13em}.cycle{display:flex;justify-content:center;align-items:center;gap:9px;margin:16px 0;font-weight:900}.cycle i{font-style:normal;font-size:21px}.cycle .arrow{color:#70869a}
.leaf{color:#8dffad}.drop{color:#76dfff}.flame{color:#ffad63}.hint{margin:18px 0 0;color:#aab8c6;font-size:13px;line-height:1.55}.primary{width:100%;margin-top:20px;padding:14px 18px;border:1px solid #bff3ff;background:#d8f8ff;color:#051018;font-weight:950;letter-spacing:.12em;cursor:pointer}.primary:focus-visible,.choice.focused{outline:3px solid #fff;outline-offset:3px}
.safety{font-size:16px;line-height:1.55}.safety strong{display:block;margin-bottom:9px;font-size:24px}.tutorial-icon{font-size:72px;line-height:1}.tutorial-copy{min-height:74px;font-size:19px;line-height:1.4}.choices{display:grid;gap:10px;margin-top:17px}.choice{padding:13px;border:1px solid #557087;background:#0b1825;text-align:left}.choice strong{display:block;color:#dffaff}.choice small{display:block;margin-top:4px;color:#9db0c0}.choice.focused{border-color:#fff;background:#16314a}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}.stats div{padding:9px;background:#ffffff08}.stats b{float:right;color:#c9f4ff}
.toast{position:absolute;top:86px;left:50%;transform:translateX(-50%) translateY(-8px);padding:7px 13px;border:1px solid #ffffff50;background:#07111ddd;font-size:13px;font-weight:900;letter-spacing:.07em;opacity:0;transition:.15s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.debug-controls{position:absolute;inset:auto 8px 8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.debug-controls[hidden],.debug-panel[hidden]{display:none}.debug-controls button{padding:6px 3px;border:1px solid #ffffff55;background:#07111ddd;font-size:9px}.debug-panel{position:absolute;top:64px;right:6px;padding:7px;background:#000c;border:1px solid #fff4;font:10px/1.4 monospace;text-align:right;pointer-events:none}
@media(max-width:430px){.overlay{padding:18px}.panel{padding:21px}.title{font-size:43px}.hint{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}