@font-face{font-family:Hyperspace;src:url(../fonts/hyperspace.ttf) format("truetype");font-display:swap}*{box-sizing:border-box;margin:0;padding:0}:root{--page-spot: #80f7ff;--page-bg-top: #0a0612;--page-bg-bottom: #030407;--overlay-bg: rgba(10, 6, 18, .88);--panel-bg: rgba(0, 0, 0, .55);--panel-bg-strong: rgba(0, 0, 0, .78);--panel-stroke: rgba(0, 240, 255, .3);--text-main: #f5fbff;--text-dim: #8da0b4;--ui-accent: #00f5ff;--ui-accent-alt: #ff00a8;--ui-secondary: #e8ff1a;--ui-highlight: #ff6a00;--danger-color: #ff00a8;--phase-flash: #ffffff}html,body{width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at top,color-mix(in srgb,var(--page-spot) 14%,transparent),transparent 35%),linear-gradient(180deg,var(--page-bg-top) 0%,var(--page-bg-bottom) 100%);color:var(--text-main);font-family:Hyperspace,JetBrains Mono,Space Mono,ui-monospace,monospace;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#scene{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;font-family:Hyperspace,JetBrains Mono,Space Mono,ui-monospace,monospace}.hud-row{position:fixed;top:calc(44px + env(safe-area-inset-top,0px));left:40px;right:40px;display:flex;justify-content:space-between;gap:10px;align-items:stretch;pointer-events:none;z-index:12}.hud-top-left,.hud-top-center,.hud-top-right{position:relative;flex:0 1 auto;min-width:0;width:240px;height:96px;padding:8px 18px;display:flex;flex-direction:column;justify-content:space-between;overflow:visible;background:linear-gradient(180deg,color-mix(in srgb,var(--panel-color, var(--ui-accent)) 14%,rgba(0,0,0,.78)),color-mix(in srgb,var(--panel-color, var(--ui-accent)) 4%,rgba(0,0,0,.88)));border-top:2px solid var(--panel-color, var(--ui-accent));border-bottom:2px solid var(--panel-color, var(--ui-accent));box-shadow:inset 0 0 18px color-mix(in srgb,var(--panel-color, var(--ui-accent)) 22%,transparent),0 0 10px color-mix(in srgb,var(--panel-color, var(--ui-accent)) 55%,transparent),0 0 28px color-mix(in srgb,var(--panel-color, var(--ui-accent)) 30%,transparent)}.hud-top-left:before,.hud-top-left:after,.hud-top-center:before,.hud-top-center:after,.hud-top-right:before,.hud-top-right:after{content:"";position:absolute;width:14px;height:14px;border-color:var(--panel-color, var(--ui-accent));border-style:solid;box-shadow:0 0 8px color-mix(in srgb,var(--panel-color, var(--ui-accent)) 85%,transparent);pointer-events:none}.hud-top-left:before,.hud-top-center:before,.hud-top-right:before{top:-2px;left:-2px;border-width:3px 0 0 3px}.hud-top-left:after,.hud-top-center:after,.hud-top-right:after{bottom:-2px;right:-2px;border-width:0 3px 3px 0}.hud-top-left{--panel-color: var(--ui-accent-alt)}.hud-top-center{text-align:center;--panel-color: var(--ui-accent);width:360px}.hud-top-right{text-align:right;--panel-color: var(--ui-secondary)}.hud-kicker{font-size:10px;letter-spacing:.38em;font-weight:700;color:#fff;text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--panel-color, var(--ui-accent)) 75%,transparent);opacity:.9;text-transform:uppercase;line-height:1}.phase-value,.hex-value{font-size:38px;font-weight:900;line-height:1;letter-spacing:.06em}.phase-value{color:#fff;text-shadow:0 0 3px #ffffff,0 0 12px color-mix(in srgb,var(--ui-accent-alt) 85%,transparent),0 0 24px color-mix(in srgb,var(--ui-accent-alt) 55%,transparent)}.hex-value{color:var(--ui-secondary);text-shadow:0 0 2px #ffffff,0 0 10px color-mix(in srgb,var(--ui-secondary) 90%,transparent),0 0 22px color-mix(in srgb,var(--ui-secondary) 55%,transparent)}.hud-sub{font-size:11px;letter-spacing:.22em;color:var(--text-dim);text-transform:uppercase;line-height:1}.hud-sub-accent{color:var(--ui-secondary);text-shadow:0 0 6px color-mix(in srgb,var(--ui-secondary) 70%,transparent);font-weight:700}.palette-strip{display:flex;gap:6px;height:14px;align-items:center}.palette-strip .dot{width:14px;height:12px;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:color-mix(in srgb,var(--c) 20%,rgba(0,0,0,.4));transition:background .32s ease,filter .32s ease}.palette-strip .dot.active{background:var(--c);filter:drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 8px color-mix(in srgb,var(--c) 60%,transparent))}.score{font-size:42px;font-weight:900;line-height:1;color:var(--ui-accent);text-shadow:0 0 3px #ffffff,0 0 10px color-mix(in srgb,var(--ui-accent) 95%,transparent),0 0 24px color-mix(in srgb,var(--ui-accent) 65%,transparent),0 0 46px color-mix(in srgb,var(--ui-accent) 35%,transparent);letter-spacing:.12em;animation:score-flicker 4.2s ease-in-out infinite}@keyframes score-flicker{0%,to{opacity:1}48%{opacity:1}50%{opacity:.86}52%{opacity:1}64%{opacity:1}65%{opacity:.94}66%{opacity:1}}.cascade-mult{font-size:14px;font-weight:900;color:var(--ui-accent-alt);text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent-alt) 90%,transparent),0 0 14px color-mix(in srgb,var(--ui-accent-alt) 60%,transparent);letter-spacing:.2em;line-height:1;min-height:14px}.cascade-mult:not(:empty){animation:cascade-flicker .42s ease-in-out infinite alternate}@keyframes cascade-flicker{0%{filter:brightness(1)}to{filter:brightness(1.55)}}.float-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:0}.float-score{position:absolute;font-family:Hyperspace,JetBrains Mono,monospace;font-size:24px;font-weight:700;text-shadow:0 0 8px currentColor,0 0 16px currentColor;transform:translate(-50%,-50%);animation:float-up 1s ease-out forwards;pointer-events:none}.float-score.bonus{font-size:30px;letter-spacing:.04em;text-shadow:0 0 10px currentColor,0 0 22px currentColor,0 0 34px currentColor}@keyframes float-up{0%{opacity:0;transform:translate(-50%) scale(.8)}15%{opacity:1;transform:translate(-50%,-40%) scale(1.15)}to{opacity:0;transform:translate(-50%,-160%) scale(1)}}.elim-banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-family:Hyperspace,JetBrains Mono,monospace;text-align:center;letter-spacing:.18em;pointer-events:none;text-shadow:0 0 12px currentColor,0 0 28px currentColor,0 0 48px currentColor;animation:elim-pop 1.5s cubic-bezier(.18,.9,.3,1.1) forwards}.elim-banner-title{font-size:26px;font-weight:700;margin-bottom:6px}.elim-banner-points{font-size:44px;font-weight:800;letter-spacing:.04em}@keyframes elim-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}35%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-80%) scale(1)}to{opacity:0;transform:translate(-50%,-110%) scale(.95)}}@media(max-width:720px){.elim-banner-title{font-size:18px}.elim-banner-points{font-size:30px}}.multikill-banner{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);font-family:Hyperspace,JetBrains Mono,monospace;text-align:center;letter-spacing:.18em;pointer-events:none;text-shadow:0 0 10px currentColor,0 0 22px currentColor;animation:multikill-pop 1.2s cubic-bezier(.18,.9,.3,1.1) forwards}.multikill-banner-title{font-size:20px;font-weight:700;margin-bottom:4px}.multikill-banner-points{font-size:34px;font-weight:800;letter-spacing:.04em}@keyframes multikill-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}40%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-70%) scale(1)}to{opacity:0;transform:translate(-50%,-95%) scale(.95)}}@media(max-width:720px){.multikill-banner-title{font-size:14px}.multikill-banner-points{font-size:24px}}@media(max-width:720px){.hud-row{left:6px;right:6px;gap:6px;top:calc(40px + env(safe-area-inset-top,0px));justify-content:stretch}.hud-top-left,.hud-top-center,.hud-top-right{flex:1 1 0;width:auto;height:78px;padding:6px 10px}.hud-top-center{flex:1.3 1 0;width:auto}.hud-kicker{font-size:8px;letter-spacing:.22em}.phase-value,.hex-value{font-size:28px;letter-spacing:.04em}.score{font-size:30px;letter-spacing:.06em}.cascade-mult{font-size:11px;letter-spacing:.12em}.hud-sub{font-size:9px;letter-spacing:.14em}.palette-strip{gap:4px;height:10px}.palette-strip .dot{width:10px;height:9px}.hud-top-left:before,.hud-top-left:after,.hud-top-center:before,.hud-top-center:after,.hud-top-right:before,.hud-top-right:after{width:10px;height:10px}.hud-top-left:before,.hud-top-center:before,.hud-top-right:before{border-width:2px 0 0 2px}.hud-top-left:after,.hud-top-center:after,.hud-top-right:after{border-width:0 2px 2px 0}.heat-rail{height:26px;padding:0 10px;gap:8px}.heat-label{font-size:9px;letter-spacing:.22em}.heat-percent{font-size:11px;min-width:36px}.heat-track{height:10px}}.heat-rail{position:fixed;top:0;left:0;right:0;height:calc(32px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--ui-accent) 6%,rgba(0,0,0,.72));border-bottom:1px solid color-mix(in srgb,var(--ui-accent) 55%,transparent);box-shadow:inset 0 -8px 16px color-mix(in srgb,var(--ui-accent) 10%,transparent),0 0 14px color-mix(in srgb,var(--ui-accent) 28%,transparent);z-index:30;pointer-events:none;display:flex;align-items:center;gap:14px;padding-left:18px;padding-right:18px;font-family:Hyperspace,JetBrains Mono,monospace}.heat-label{font-size:11px;letter-spacing:.4em;color:#fff;text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--heat-color, var(--ui-accent)) 70%,transparent);font-weight:700;flex-shrink:0}.heat-track{flex:1;height:14px;background:#0009;border:1px solid var(--heat-color, var(--ui-accent));box-shadow:0 0 6px color-mix(in srgb,var(--heat-color, var(--ui-accent)) 75%,transparent),0 0 16px color-mix(in srgb,var(--heat-color, var(--ui-accent)) 45%,transparent),inset 0 0 8px color-mix(in srgb,var(--heat-color, var(--ui-accent)) 25%,transparent);overflow:hidden;position:relative;transition:border-color .32s ease,box-shadow .32s ease}.heat-fill{position:relative;height:100%;width:100%;background:currentColor;box-shadow:inset -2px 0 #ffffffe6,inset 0 1px #ffffff73,inset 0 -1px #00000059;transition:width .18s ease-out,color .32s ease}.heat-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(115deg,transparent 0,transparent 10px,rgba(255,255,255,.14) 10px,rgba(255,255,255,.14) 12px);background-size:28px 100%;animation:heat-stripes 1.4s linear infinite;mix-blend-mode:overlay;pointer-events:none}@keyframes heat-stripes{0%{background-position:0 0}to{background-position:28px 0}}.heat-percent{font-size:13px;font-weight:700;letter-spacing:.05em;min-width:48px;text-align:right;flex-shrink:0;color:var(--ui-accent);text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent) 80%,transparent)}.heat-rail.danger .heat-track{animation:heat-track-danger .5s ease-in-out infinite alternate}@keyframes heat-track-danger{0%{box-shadow:inset 0 0 8px color-mix(in srgb,var(--danger-color) 25%,transparent)}to{box-shadow:inset 0 0 18px color-mix(in srgb,var(--danger-color) 72%,transparent)}}.danger-vignette{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:15;box-shadow:inset 0 0 120px color-mix(in srgb,var(--danger-color) 72%,transparent);opacity:0;transition:opacity .3s ease}.danger-vignette.active{animation:vignette-pulse 1.2s ease-in-out infinite alternate}@keyframes vignette-pulse{0%{opacity:.35}to{opacity:.85}}.phase-sweep{position:fixed;left:0;right:0;height:6px;background:linear-gradient(to bottom,transparent,var(--ui-accent),transparent);box-shadow:0 0 24px color-mix(in srgb,var(--ui-accent) 88%,transparent),0 0 48px color-mix(in srgb,var(--ui-accent) 60%,transparent);pointer-events:none;z-index:100;top:-12px;animation:phase-sweep .6s cubic-bezier(.42,0,.58,1) forwards}@keyframes phase-sweep{to{top:100vh}}.phase-flash{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--phase-flash);opacity:0;pointer-events:none;z-index:99;animation:phase-flash .2s ease-out forwards}@keyframes phase-flash{0%,to{opacity:0}50%{opacity:.15}}.phase-announce{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);font-family:Hyperspace,JetBrains Mono,monospace;font-size:clamp(48px,10vw,110px);font-weight:900;letter-spacing:.12em;z-index:101;pointer-events:none;opacity:0;text-shadow:0 0 16px currentColor,0 0 36px currentColor,0 0 64px currentColor;animation:phase-announce 1.4s cubic-bezier(.22,1,.36,1) forwards}@keyframes phase-announce{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}72%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}.gameover{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d1;display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:auto;animation:gameover-fade .36s ease-out forwards}@keyframes gameover-fade{0%{opacity:0}to{opacity:1}}.gameover-card{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent) 14%,rgba(0,0,0,.92)),color-mix(in srgb,var(--ui-accent) 4%,rgba(0,0,0,.96)));border-top:2px solid var(--ui-accent);border-bottom:2px solid var(--ui-accent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--ui-accent) 20%,transparent),0 0 14px color-mix(in srgb,var(--ui-accent) 60%,transparent),0 0 40px color-mix(in srgb,var(--ui-accent) 28%,transparent);padding:38px 56px 34px;text-align:center;width:min(520px,92vw);animation:gameover-card-in .52s cubic-bezier(.22,1,.36,1) both}.gameover-card:before,.gameover-card:after{content:"";position:absolute;width:18px;height:18px;border-color:var(--ui-accent);border-style:solid;box-shadow:0 0 10px color-mix(in srgb,var(--ui-accent) 85%,transparent);pointer-events:none}.gameover-card:before{top:-2px;left:-2px;border-width:3px 0 0 3px}.gameover-card:after{bottom:-2px;right:-2px;border-width:0 3px 3px 0}@keyframes gameover-card-in{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.gameover-kicker{font-size:16px;letter-spacing:.34em;color:#fff;text-shadow:0 0 4px #ffffff,0 0 12px color-mix(in srgb,var(--ui-accent) 75%,transparent);font-weight:700}.gameover-score-label{margin-top:24px;font-size:15px;letter-spacing:.34em;color:#fff;opacity:.78;text-transform:uppercase;font-weight:700}.gameover-score{margin-top:6px;font-size:clamp(48px,9vw,78px);font-weight:900;line-height:1;color:var(--ui-accent);letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 4px #ffffff,0 0 14px color-mix(in srgb,var(--ui-accent) 95%,transparent),0 0 32px color-mix(in srgb,var(--ui-accent) 70%,transparent),0 0 64px color-mix(in srgb,var(--ui-accent) 40%,transparent)}.gameover-stats-grid{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-top:1px solid color-mix(in srgb,var(--ui-accent) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ui-accent) 35%,transparent);padding:16px 0}.gameover-stat{display:flex;flex-direction:column;gap:6px}.gameover-stat-label{font-size:clamp(10px,2.4vw,13px);letter-spacing:.18em;color:#fff;opacity:.7;text-transform:uppercase;font-weight:700}.gameover-stat-value{font-size:clamp(24px,6vw,32px);font-weight:900;color:#fff;letter-spacing:.02em;text-shadow:0 0 3px #ffffff,0 0 14px color-mix(in srgb,var(--ui-accent-alt) 80%,transparent),0 0 28px color-mix(in srgb,var(--ui-accent-alt) 45%,transparent)}.play-again{margin-top:32px;background:color-mix(in srgb,var(--ui-accent) 8%,transparent);border:2px solid var(--ui-accent);color:#fff;font-family:Hyperspace,JetBrains Mono,monospace;font-size:22px;font-weight:700;letter-spacing:.3em;padding:16px 48px;cursor:pointer;text-shadow:0 0 4px #ffffff,0 0 12px color-mix(in srgb,var(--ui-accent) 75%,transparent);box-shadow:inset 0 0 14px color-mix(in srgb,var(--ui-accent) 20%,transparent),0 0 10px color-mix(in srgb,var(--ui-accent) 45%,transparent);transition:background .2s ease,box-shadow .2s ease,transform .12s ease}.play-again:hover{background:color-mix(in srgb,var(--ui-accent) 22%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--ui-accent) 30%,transparent),0 0 22px color-mix(in srgb,var(--ui-accent) 70%,transparent),0 0 40px color-mix(in srgb,var(--ui-accent) 35%,transparent)}.play-again:active{transform:translateY(1px)}.title-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;pointer-events:auto;cursor:pointer;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:title-fade-in .5s ease-out;-webkit-user-select:none;user-select:none}.title-screen.dismissed{animation:title-fade-out .4s ease-in forwards}.title-inner{text-align:center;padding:24px;max-width:90vw;display:flex;flex-direction:column;align-items:center;gap:8px}.title-logo{width:75vw;max-height:70vh;height:auto;object-fit:contain}.title-start{font-family:Hyperspace,JetBrains Mono,Space Mono,ui-monospace,monospace;font-size:clamp(15px,2.6vw,22px);letter-spacing:.28em;color:var(--ui-accent);animation:title-pulse 1.6s ease-in-out infinite}.title-buttons{margin-top:18px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.title-btn{font-family:Hyperspace,JetBrains Mono,monospace;font-size:clamp(14px,2.2vw,20px);letter-spacing:.32em;padding:14px 32px;background:#0000008c;color:#fff;border:2px solid color-mix(in srgb,var(--ui-accent) 65%,transparent);cursor:pointer;position:relative;text-shadow:0 0 4px #ffffff,0 0 12px color-mix(in srgb,var(--ui-accent) 70%,transparent);box-shadow:inset 0 0 14px color-mix(in srgb,var(--ui-accent) 18%,transparent),0 0 10px color-mix(in srgb,var(--ui-accent) 35%,transparent);transition:background .2s ease,box-shadow .2s ease,transform .12s ease}.title-btn:hover{background:color-mix(in srgb,var(--ui-accent) 18%,rgba(0,0,0,.55));box-shadow:inset 0 0 18px color-mix(in srgb,var(--ui-accent) 28%,transparent),0 0 22px color-mix(in srgb,var(--ui-accent) 70%,transparent),0 0 40px color-mix(in srgb,var(--ui-accent) 35%,transparent)}.title-btn:active{transform:translateY(1px)}.title-btn-primary{border-color:var(--ui-secondary);text-shadow:0 0 4px #ffffff,0 0 12px color-mix(in srgb,var(--ui-secondary) 80%,transparent);box-shadow:inset 0 0 14px color-mix(in srgb,var(--ui-secondary) 22%,transparent),0 0 12px color-mix(in srgb,var(--ui-secondary) 50%,transparent),0 0 30px color-mix(in srgb,var(--ui-secondary) 25%,transparent);animation:title-btn-pulse 2.4s ease-in-out infinite}.title-btn-primary:hover{background:color-mix(in srgb,var(--ui-secondary) 16%,rgba(0,0,0,.55));box-shadow:inset 0 0 22px color-mix(in srgb,var(--ui-secondary) 30%,transparent),0 0 26px color-mix(in srgb,var(--ui-secondary) 80%,transparent),0 0 50px color-mix(in srgb,var(--ui-secondary) 40%,transparent)}@keyframes title-btn-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.25)}}.title-screen.behind-howto{display:none}.title-footer{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-family:Hyperspace,JetBrains Mono,Space Mono,ui-monospace,monospace;font-size:15px;letter-spacing:.18em;color:var(--text-dim)}@keyframes title-fade-in{0%{opacity:0}to{opacity:1}}@keyframes title-fade-out{0%{opacity:1}to{opacity:0}}@keyframes title-pulse{0%,to{opacity:.55}50%{opacity:1}}.mute-btn,.pause-btn{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid color-mix(in srgb,var(--ui-accent) 50%,transparent);color:var(--ui-accent);padding:0;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.mute-btn svg,.pause-btn svg{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--ui-accent) 60%,transparent))}.mute-btn{right:16px}.pause-btn{left:16px}.mute-btn:hover,.pause-btn:hover{background:color-mix(in srgb,var(--ui-accent) 12%,transparent);border-color:var(--ui-accent)}.mute-btn.muted{color:var(--text-dim);border-color:color-mix(in srgb,var(--text-dim) 65%,transparent)}.mute-btn.muted svg{filter:none}.pause-btn.paused{color:var(--ui-secondary);border-color:color-mix(in srgb,var(--ui-secondary) 70%,transparent)}.pause-btn.paused svg{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ui-secondary) 75%,transparent))}.reverse-btn{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:50;padding:10px 22px;min-width:130px;height:52px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid color-mix(in srgb,var(--ui-accent) 50%,transparent);color:var(--ui-accent);font-family:Hyperspace,JetBrains Mono,monospace;font-size:12px;letter-spacing:.25em;cursor:pointer;pointer-events:auto;text-shadow:0 0 4px color-mix(in srgb,var(--ui-accent) 60%,transparent);transition:background .1s ease,border-color .1s ease,color .1s ease,box-shadow .1s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.reverse-btn-label{pointer-events:none}.reverse-btn .reverse-icon{width:44px;height:44px;position:absolute;bottom:calc(100% + 6px);left:50%;pointer-events:none;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ui-accent) 70%,transparent));transition:opacity .12s ease,transform .16s ease,filter .12s ease;transform:translate(-50%) scale(1)}.reverse-btn .reverse-icon-ccw,.reverse-btn.held .reverse-icon-cw{opacity:0;transform:translate(-50%) scale(.7)}.reverse-btn.held .reverse-icon-ccw{opacity:1;transform:translate(-50%) scale(1)}.reverse-btn:hover{background:color-mix(in srgb,var(--ui-accent) 12%,transparent);border-color:var(--ui-accent)}.reverse-btn.held{color:#0b0c15;background:var(--ui-accent);border-color:var(--ui-accent);text-shadow:none;box-shadow:0 0 16px color-mix(in srgb,var(--ui-accent) 80%,transparent),0 0 34px color-mix(in srgb,var(--ui-accent) 45%,transparent)}.reverse-btn.held .reverse-icon{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--ui-accent) 90%,transparent)) drop-shadow(0 0 16px color-mix(in srgb,var(--ui-accent) 55%,transparent))}.reverse-btn.demo-pulse{animation:reverse-demo-pulse 1.1s ease-in-out infinite}@keyframes reverse-demo-pulse{0%,to{border-color:color-mix(in srgb,var(--ui-accent) 50%,transparent);box-shadow:0 0 color-mix(in srgb,var(--ui-accent) 0%,transparent)}50%{border-color:var(--ui-accent);box-shadow:0 0 18px color-mix(in srgb,var(--ui-accent) 85%,transparent),0 0 36px color-mix(in srgb,var(--ui-accent) 45%,transparent)}}.pause-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:180;background:#000000b8;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;animation:pause-fade .22s ease-out}@keyframes pause-fade{0%{opacity:0}to{opacity:1}}.pause-card{position:relative;text-align:center;padding:34px 58px;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent) 14%,rgba(0,0,0,.92)),color-mix(in srgb,var(--ui-accent) 4%,rgba(0,0,0,.96)));border-top:2px solid var(--ui-accent);border-bottom:2px solid var(--ui-accent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--ui-accent) 20%,transparent),0 0 14px color-mix(in srgb,var(--ui-accent) 60%,transparent),0 0 40px color-mix(in srgb,var(--ui-accent) 28%,transparent)}.pause-card:before,.pause-card:after{content:"";position:absolute;width:16px;height:16px;border-color:var(--ui-accent);border-style:solid;box-shadow:0 0 10px color-mix(in srgb,var(--ui-accent) 85%,transparent);pointer-events:none}.pause-card:before{top:-2px;left:-2px;border-width:3px 0 0 3px}.pause-card:after{bottom:-2px;right:-2px;border-width:0 3px 3px 0}.pause-title{font-family:Hyperspace,JetBrains Mono,monospace;font-size:clamp(48px,10vw,96px);font-weight:900;letter-spacing:.24em;color:#fff;text-shadow:0 0 4px #ffffff,0 0 14px color-mix(in srgb,var(--ui-accent) 90%,transparent),0 0 32px color-mix(in srgb,var(--ui-accent) 60%,transparent)}.pause-hint{margin-top:14px;font-size:13px;letter-spacing:.3em;color:var(--text-dim);text-transform:uppercase}.howto-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:320;background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--ui-accent-alt) 22%,transparent),transparent 55%),radial-gradient(circle at 80% 100%,color-mix(in srgb,var(--ui-accent) 18%,transparent),transparent 55%),linear-gradient(180deg,#05030a,#02020a);display:flex;flex-direction:column;pointer-events:auto;animation:howto-fade-in .38s ease-out;font-family:Hyperspace,JetBrains Mono,monospace;color:var(--text-main)}.howto-screen.dismissed{animation:howto-fade-out .32s ease-in forwards}@keyframes howto-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes howto-fade-out{0%{opacity:1}to{opacity:0}}.howto-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:36px clamp(20px,6vw,80px) 40px;scrollbar-color:color-mix(in srgb,var(--ui-accent) 60%,transparent) transparent;scrollbar-width:thin}.howto-scroll::-webkit-scrollbar{width:8px}.howto-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ui-accent) 50%,transparent);border-radius:4px}.howto-top-actions,.about-top-actions{max-width:980px;margin:0 auto 18px;display:flex;justify-content:flex-start}.howto-back-top,.about-back-top{font-family:Hyperspace,JetBrains Mono,monospace;font-size:12px;letter-spacing:.3em;padding:8px 16px;background:#0000008c;color:#fff;border:1px solid color-mix(in srgb,var(--ui-accent) 55%,transparent);cursor:pointer;text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--ui-accent) 65%,transparent);box-shadow:inset 0 0 8px color-mix(in srgb,var(--ui-accent) 14%,transparent),0 0 6px color-mix(in srgb,var(--ui-accent) 30%,transparent);transition:background .2s ease,box-shadow .2s ease,transform .12s ease}.howto-back-top:hover,.about-back-top:hover{background:color-mix(in srgb,var(--ui-accent) 16%,rgba(0,0,0,.55));box-shadow:inset 0 0 12px color-mix(in srgb,var(--ui-accent) 24%,transparent),0 0 16px color-mix(in srgb,var(--ui-accent) 55%,transparent)}.howto-back-top:active,.about-back-top:active{transform:translateY(1px)}.howto-header{text-align:center;margin:6px auto 32px;max-width:880px}.howto-kicker{font-size:11px;letter-spacing:.4em;color:#fff;text-shadow:0 0 4px #ffffff,0 0 14px color-mix(in srgb,var(--ui-accent) 80%,transparent);opacity:.85}.howto-title{margin-top:8px;font-size:clamp(38px,7vw,72px);font-weight:900;letter-spacing:.18em;color:#fff;text-shadow:0 0 4px #ffffff,0 0 16px color-mix(in srgb,var(--ui-accent) 92%,transparent),0 0 36px color-mix(in srgb,var(--ui-accent) 60%,transparent),0 0 60px color-mix(in srgb,var(--ui-accent-alt) 35%,transparent)}.howto-tag{margin-top:10px;font-size:clamp(12px,1.6vw,15px);letter-spacing:.22em;color:var(--text-dim);text-transform:uppercase}.howto-section{position:relative;max-width:980px;margin:0 auto 24px;padding:22px clamp(16px,3vw,32px) 26px;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent) 8%,rgba(0,0,0,.78)),color-mix(in srgb,var(--ui-accent-alt) 4%,rgba(0,0,0,.88)));border-top:2px solid color-mix(in srgb,var(--ui-accent) 75%,transparent);border-bottom:2px solid color-mix(in srgb,var(--ui-accent-alt) 70%,transparent);box-shadow:inset 0 0 20px color-mix(in srgb,var(--ui-accent) 14%,transparent),0 0 14px color-mix(in srgb,var(--ui-accent) 30%,transparent)}.howto-section:before,.howto-section:after{content:"";position:absolute;width:16px;height:16px;border-color:var(--ui-accent);border-style:solid;box-shadow:0 0 8px color-mix(in srgb,var(--ui-accent) 80%,transparent)}.howto-section:before{top:-2px;left:-2px;border-width:3px 0 0 3px}.howto-section:after{bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-color:var(--ui-accent-alt);box-shadow:0 0 8px color-mix(in srgb,var(--ui-accent-alt) 80%,transparent)}.howto-card-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}.howto-num{font-size:28px;font-weight:900;letter-spacing:.05em;color:var(--ui-secondary);text-shadow:0 0 4px #ffffff,0 0 12px color-mix(in srgb,var(--ui-secondary) 80%,transparent);line-height:1}.howto-card-head h2{margin:0;font-size:clamp(20px,3vw,28px);letter-spacing:.22em;font-weight:900;color:#fff;text-shadow:0 0 3px #ffffff,0 0 14px color-mix(in srgb,var(--ui-accent) 80%,transparent)}.howto-body{font-size:clamp(14px,1.6vw,16px);line-height:1.65;letter-spacing:.04em;color:var(--text-main);margin-bottom:14px;font-family:JetBrains Mono,Space Mono,ui-monospace,monospace}.howto-body strong{color:var(--ui-secondary);text-shadow:0 0 6px color-mix(in srgb,var(--ui-secondary) 65%,transparent)}.howto-body em{font-style:normal;color:var(--ui-accent);text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent) 60%,transparent)}.howto-note{margin-top:14px;padding:10px 14px;font-size:13px;line-height:1.55;color:var(--text-dim);border-left:2px solid color-mix(in srgb,var(--ui-accent-alt) 75%,transparent);background:#ffffff08;font-family:JetBrains Mono,monospace}.howto-note strong{color:var(--ui-accent-alt);text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent-alt) 60%,transparent)}.howto-note em{font-style:normal;color:var(--ui-secondary)}.howto-demo{margin-top:6px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.howto-step{display:flex;flex-direction:column;align-items:center;gap:6px}.howto-hex{width:clamp(80px,12vw,116px);height:clamp(80px,12vw,116px);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ui-accent) 40%,transparent))}.howto-step-label{font-size:10px;letter-spacing:.28em;color:var(--text-dim);text-transform:uppercase}.howto-arrow{font-size:26px;color:var(--ui-accent);text-shadow:0 0 10px color-mix(in srgb,var(--ui-accent) 80%,transparent);align-self:center;padding:0 4px}.howto-arrow-spin{font-size:34px;color:var(--ui-secondary);text-shadow:0 0 12px color-mix(in srgb,var(--ui-secondary) 85%,transparent);animation:howto-spin 2.4s linear infinite}@keyframes howto-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.howto-arrow-pop{color:var(--ui-secondary);text-shadow:0 0 8px var(--ui-secondary),0 0 22px color-mix(in srgb,var(--ui-secondary) 65%,transparent);animation:howto-pop 1.4s ease-in-out infinite}@keyframes howto-pop{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.25);opacity:1}}.howto-cascade-bars{display:grid;gap:8px;margin-top:12px;font-family:JetBrains Mono,monospace}.howto-bar{display:grid;grid-template-columns:48px 1fr 110px;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em}.howto-bar-label{color:var(--ui-accent);font-weight:900;text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent) 70%,transparent)}.howto-bar-fill{display:inline-block;height:14px;background:var(--ui-accent);box-shadow:0 0 8px currentColor,inset 0 1px #fff6,inset 0 -1px #0006}.howto-bar-val{text-align:right;color:var(--text-main);text-shadow:0 0 6px rgba(255,255,255,.4)}.howto-heatbar{margin-top:14px}.howto-heatbar-track{position:relative;height:18px;background:#0009;border:1px solid var(--ui-accent);box-shadow:inset 0 0 10px color-mix(in srgb,var(--ui-accent) 30%,transparent),0 0 12px color-mix(in srgb,var(--ui-accent) 50%,transparent);overflow:hidden}.howto-heatbar-fill{height:100%;width:72%;background:var(--ui-accent);box-shadow:inset 0 1px #ffffff80,inset 0 -1px #0006;animation:howto-heat-pulse 2.6s ease-in-out infinite}@keyframes howto-heat-pulse{0%{width:86%}50%{width:38%}to{width:86%}}.howto-heatbar-legend{margin-top:12px;display:grid;gap:6px;font-size:12px;font-family:JetBrains Mono,monospace;color:var(--text-dim);letter-spacing:.04em}.howto-heatbar-legend span span.howto-dot{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:middle;background:var(--ui-accent);box-shadow:0 0 6px currentColor;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}.howto-formula{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 6px;padding:14px 8px;margin-top:4px;background:#00000080;border-top:1px solid color-mix(in srgb,var(--ui-accent) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ui-accent) 35%,transparent)}.howto-formula-base{font-size:22px;font-weight:900;letter-spacing:.08em;color:var(--ui-secondary);text-shadow:0 0 8px color-mix(in srgb,var(--ui-secondary) 70%,transparent)}.howto-formula-x{font-size:16px;font-weight:700;color:var(--text-dim);margin:0 2px}.howto-mult-tag{font-size:11px;letter-spacing:.22em;font-weight:900;padding:5px 10px;color:#fff;background:color-mix(in srgb,var(--mc) 14%,rgba(0,0,0,.6));border:1px solid var(--mc);text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--mc) 70%,transparent);box-shadow:inset 0 0 8px color-mix(in srgb,var(--mc) 18%,transparent),0 0 8px color-mix(in srgb,var(--mc) 50%,transparent)}.howto-mult-grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.howto-mult{padding:12px 14px;background:#00000073;border-left:3px solid var(--mc);box-shadow:inset 0 0 12px color-mix(in srgb,var(--mc) 10%,transparent),0 0 6px color-mix(in srgb,var(--mc) 30%,transparent)}.howto-mult-name{font-size:13px;letter-spacing:.22em;font-weight:900;color:#fff;text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--mc) 70%,transparent);margin-bottom:6px}.howto-mult-desc{font-family:JetBrains Mono,monospace;font-size:12px;line-height:1.55;color:var(--text-main);letter-spacing:.02em}.howto-mult-desc em{font-style:normal;color:var(--mc);text-shadow:0 0 6px color-mix(in srgb,var(--mc) 50%,transparent)}.howto-phases{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.howto-phase{padding:14px;background:#00000080;border:1px solid color-mix(in srgb,var(--ui-accent) 30%,transparent);text-align:center;position:relative}.howto-phase-num{font-size:26px;font-weight:900;letter-spacing:.08em;text-shadow:0 0 10px currentColor;margin-bottom:4px}.howto-phase-name{font-size:11px;letter-spacing:.24em;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.5);margin-bottom:10px}.howto-phase-tris{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:8px}.howto-tri{width:22px;height:20px;filter:drop-shadow(0 0 3px currentColor)}.howto-phase-new{position:relative;display:inline-block;padding-left:4px}.howto-phase-new:before{content:"+";position:absolute;top:-8px;right:-6px;font-size:11px;color:var(--ui-secondary);text-shadow:0 0 5px var(--ui-secondary);font-weight:900}.howto-phase-thresh{font-size:11px;letter-spacing:.18em;color:var(--text-dim);text-transform:uppercase;font-family:JetBrains Mono,monospace}.howto-tips{list-style:none;margin:0;padding:0;display:grid;gap:10px}.howto-tips li{display:grid;grid-template-columns:32px 1fr;align-items:start;gap:12px;padding:10px 12px;background:#0000006b;border-left:2px solid color-mix(in srgb,var(--mc, var(--ui-accent)) 70%,transparent);font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.55;color:var(--text-main);letter-spacing:.02em}.howto-tips li strong{color:#fff;text-shadow:0 0 6px color-mix(in srgb,var(--mc, var(--ui-accent)) 60%,transparent)}.howto-tip-mark{font-size:18px;line-height:1;color:var(--mc, var(--ui-accent));text-shadow:0 0 8px currentColor;text-align:center;padding-top:2px}.install-banner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:310;pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#05060eeb;border:1px solid color-mix(in srgb,var(--ui-accent) 55%,transparent);border-radius:10px;box-shadow:0 0 18px color-mix(in srgb,var(--ui-accent) 35%,transparent),inset 0 0 20px color-mix(in srgb,var(--ui-accent) 12%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .26s ease;font-family:Hyperspace,JetBrains Mono,monospace}.install-banner.visible{opacity:1;transform:translateY(0)}.install-banner-text{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--text-main);font-size:12px;line-height:1.35}.install-banner-text strong{font-size:11px;letter-spacing:.3em;color:var(--ui-accent);text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent) 70%,transparent)}.install-banner-text em{font-style:normal;color:var(--ui-accent)}.install-share{display:inline-block;padding:0 4px;margin:0 1px;color:var(--ui-accent);text-shadow:0 0 6px currentColor}.install-banner-btn{flex:0 0 auto;font-family:Hyperspace,JetBrains Mono,monospace;font-size:12px;letter-spacing:.3em;padding:8px 14px;background:color-mix(in srgb,var(--ui-accent) 18%,rgba(0,0,0,.6));color:#fff;border:1px solid var(--ui-accent);border-radius:6px;cursor:pointer;text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent) 80%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--ui-accent) 45%,transparent)}.install-banner-btn:active{transform:translateY(1px)}.install-banner-dismiss{flex:0 0 auto;width:28px;height:28px;background:transparent;color:var(--text-dim);border:1px solid color-mix(in srgb,var(--text-dim) 50%,transparent);border-radius:6px;font-size:18px;line-height:1;cursor:pointer}.install-banner-dismiss:active{transform:translateY(1px)}.howto-install-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}.howto-install{background:#0000008c;border:1px solid color-mix(in srgb,var(--mc, var(--ui-accent)) 40%,transparent);border-radius:10px;padding:14px 16px;box-shadow:0 0 18px color-mix(in srgb,var(--mc, var(--ui-accent)) 22%,transparent) inset}.howto-install-head{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed color-mix(in srgb,var(--mc, var(--ui-accent)) 40%,transparent)}.howto-install-tag{font-size:14px;letter-spacing:.3em;color:var(--mc, var(--ui-accent));text-shadow:0 0 8px currentColor}.howto-install-sub{font-size:11px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase}.howto-install-steps{list-style:decimal;padding-left:18px;display:flex;flex-direction:column;gap:8px}.howto-install-steps li{font-size:13px;line-height:1.5;color:var(--text-main)}.howto-install-steps strong{color:var(--mc, var(--ui-accent));text-shadow:0 0 6px color-mix(in srgb,var(--mc, var(--ui-accent)) 60%,transparent)}.howto-kbd{display:inline-block;padding:1px 6px;margin:0 2px;font-size:11px;border:1px solid color-mix(in srgb,var(--mc, var(--ui-accent)) 50%,transparent);border-radius:4px;background:#00000080;color:var(--mc, var(--ui-accent))}.howto-footer-actions{margin:24px auto 8px;max-width:980px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}.howto-btn{font-family:Hyperspace,JetBrains Mono,monospace;font-size:16px;letter-spacing:.3em;padding:14px 32px;background:#0009;color:#fff;border:2px solid color-mix(in srgb,var(--ui-accent) 60%,transparent);cursor:pointer;text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--ui-accent) 70%,transparent);box-shadow:inset 0 0 12px color-mix(in srgb,var(--ui-accent) 16%,transparent),0 0 8px color-mix(in srgb,var(--ui-accent) 35%,transparent);transition:background .2s ease,box-shadow .2s ease,transform .12s ease;flex:1 1 auto;min-width:180px;max-width:320px}.howto-btn:hover{background:color-mix(in srgb,var(--ui-accent) 18%,rgba(0,0,0,.6));box-shadow:inset 0 0 18px color-mix(in srgb,var(--ui-accent) 28%,transparent),0 0 22px color-mix(in srgb,var(--ui-accent) 65%,transparent)}.howto-btn:active{transform:translateY(1px)}.howto-btn-primary{border-color:var(--ui-secondary);text-shadow:0 0 4px #ffffff,0 0 12px color-mix(in srgb,var(--ui-secondary) 80%,transparent);box-shadow:inset 0 0 14px color-mix(in srgb,var(--ui-secondary) 22%,transparent),0 0 14px color-mix(in srgb,var(--ui-secondary) 55%,transparent),0 0 30px color-mix(in srgb,var(--ui-secondary) 25%,transparent)}.howto-btn-primary:hover{background:color-mix(in srgb,var(--ui-secondary) 16%,rgba(0,0,0,.6));box-shadow:inset 0 0 22px color-mix(in srgb,var(--ui-secondary) 30%,transparent),0 0 26px color-mix(in srgb,var(--ui-secondary) 80%,transparent),0 0 50px color-mix(in srgb,var(--ui-secondary) 40%,transparent)}@media(max-width:720px){.howto-scroll{padding:24px 12px 28px}.howto-section{padding:18px 14px 20px}.howto-bar{grid-template-columns:36px 1fr 90px;font-size:11px}.howto-formula{gap:6px 4px;padding:12px 6px}.howto-formula-base{font-size:18px}.howto-mult-tag{font-size:10px;padding:4px 8px;letter-spacing:.16em}.howto-footer-actions{flex-direction:column-reverse}.howto-btn{max-width:none;padding:14px 18px;font-size:14px}}.about-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:320;background:radial-gradient(circle at 80% 0%,color-mix(in srgb,var(--ui-secondary) 18%,transparent),transparent 55%),radial-gradient(circle at 20% 100%,color-mix(in srgb,var(--ui-accent-alt) 22%,transparent),transparent 55%),linear-gradient(180deg,#05030a,#02020a);display:flex;flex-direction:column;pointer-events:auto;animation:howto-fade-in .38s ease-out;font-family:Hyperspace,JetBrains Mono,monospace;color:var(--text-main)}.about-screen.dismissed{animation:howto-fade-out .32s ease-in forwards}.about-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:36px clamp(20px,6vw,80px) 40px;scrollbar-color:color-mix(in srgb,var(--ui-accent) 60%,transparent) transparent;scrollbar-width:thin}.about-scroll::-webkit-scrollbar{width:8px}.about-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ui-accent) 50%,transparent);border-radius:4px}.about-header{text-align:center;margin:6px auto 32px;max-width:880px}.about-kicker{font-size:11px;letter-spacing:.4em;color:#fff;text-shadow:0 0 4px #ffffff,0 0 14px color-mix(in srgb,var(--ui-secondary) 80%,transparent);opacity:.85}.about-title{margin-top:8px;font-size:clamp(38px,7vw,72px);font-weight:900;letter-spacing:.22em;color:#fff;text-shadow:0 0 4px #ffffff,0 0 16px color-mix(in srgb,var(--ui-secondary) 92%,transparent),0 0 36px color-mix(in srgb,var(--ui-secondary) 55%,transparent),0 0 60px color-mix(in srgb,var(--ui-accent-alt) 35%,transparent)}.about-tag{margin-top:10px;font-size:clamp(12px,1.6vw,15px);letter-spacing:.22em;color:var(--text-dim);text-transform:uppercase}.about-section{position:relative;max-width:860px;margin:0 auto 24px;padding:22px clamp(16px,3vw,32px) 26px;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-secondary) 6%,rgba(0,0,0,.78)),color-mix(in srgb,var(--ui-accent-alt) 5%,rgba(0,0,0,.88)));border-top:2px solid color-mix(in srgb,var(--ui-secondary) 70%,transparent);border-bottom:2px solid color-mix(in srgb,var(--ui-accent-alt) 70%,transparent);box-shadow:inset 0 0 20px color-mix(in srgb,var(--ui-secondary) 12%,transparent),0 0 14px color-mix(in srgb,var(--ui-secondary) 26%,transparent)}.about-section:before,.about-section:after{content:"";position:absolute;width:16px;height:16px;border-style:solid}.about-section:before{top:-2px;left:-2px;border-width:3px 0 0 3px;border-color:var(--ui-secondary);box-shadow:0 0 8px color-mix(in srgb,var(--ui-secondary) 80%,transparent)}.about-section:after{bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-color:var(--ui-accent-alt);box-shadow:0 0 8px color-mix(in srgb,var(--ui-accent-alt) 80%,transparent)}.about-card-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}.about-num{font-size:28px;font-weight:900;letter-spacing:.05em;color:var(--ui-secondary);text-shadow:0 0 4px #ffffff,0 0 12px color-mix(in srgb,var(--ui-secondary) 80%,transparent);line-height:1}.about-card-head h2{margin:0;font-size:clamp(20px,3vw,26px);letter-spacing:.22em;font-weight:900;color:#fff;text-shadow:0 0 3px #ffffff,0 0 14px color-mix(in srgb,var(--ui-accent) 75%,transparent)}.about-body{font-size:clamp(14px,1.6vw,16px);line-height:1.7;letter-spacing:.02em;color:var(--text-main);margin-bottom:12px;font-family:JetBrains Mono,Space Mono,ui-monospace,monospace}.about-body:last-child{margin-bottom:0}.about-body strong{color:var(--ui-secondary);text-shadow:0 0 6px color-mix(in srgb,var(--ui-secondary) 60%,transparent)}.about-body em{font-style:normal;color:var(--ui-accent);text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent) 55%,transparent)}.about-signoff{margin-top:14px;font-size:15px;letter-spacing:.18em;color:#fff;text-align:right;font-family:Hyperspace,JetBrains Mono,monospace}.about-sign-mark{color:var(--ui-accent-alt);text-shadow:0 0 8px color-mix(in srgb,var(--ui-accent-alt) 75%,transparent)}.about-donate{margin-top:18px;display:flex;justify-content:center}.about-donate-btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:16px 36px;text-decoration:none;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent-alt) 22%,rgba(0,0,0,.78)),color-mix(in srgb,var(--ui-accent-alt) 10%,rgba(0,0,0,.9)));border-top:2px solid var(--ui-accent-alt);border-bottom:2px solid var(--ui-accent-alt);box-shadow:inset 0 0 18px color-mix(in srgb,var(--ui-accent-alt) 28%,transparent),0 0 14px color-mix(in srgb,var(--ui-accent-alt) 55%,transparent),0 0 36px color-mix(in srgb,var(--ui-accent-alt) 28%,transparent);transition:transform .14s ease,box-shadow .2s ease,background .2s ease;animation:about-donate-pulse 2.4s ease-in-out infinite}.about-donate-btn:hover{transform:translateY(-1px);box-shadow:inset 0 0 22px color-mix(in srgb,var(--ui-accent-alt) 38%,transparent),0 0 26px color-mix(in srgb,var(--ui-accent-alt) 85%,transparent),0 0 56px color-mix(in srgb,var(--ui-accent-alt) 45%,transparent)}.about-donate-btn:active{transform:translateY(0)}.about-donate-icon{font-size:22px;color:var(--ui-accent-alt);text-shadow:0 0 6px var(--ui-accent-alt),0 0 18px color-mix(in srgb,var(--ui-accent-alt) 65%,transparent);line-height:1}.about-donate-text{font-family:Hyperspace,JetBrains Mono,monospace;font-size:16px;font-weight:900;letter-spacing:.3em;text-shadow:0 0 4px #ffffff,0 0 14px color-mix(in srgb,var(--ui-accent-alt) 75%,transparent)}.about-donate-url{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;color:var(--text-dim)}@keyframes about-donate-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.25)}}.about-site-btn{background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent) 22%,rgba(0,0,0,.78)),color-mix(in srgb,var(--ui-accent) 10%,rgba(0,0,0,.9)));border-top-color:var(--ui-accent);border-bottom-color:var(--ui-accent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--ui-accent) 28%,transparent),0 0 14px color-mix(in srgb,var(--ui-accent) 55%,transparent),0 0 36px color-mix(in srgb,var(--ui-accent) 28%,transparent);animation:none}.about-site-btn:hover{box-shadow:inset 0 0 22px color-mix(in srgb,var(--ui-accent) 38%,transparent),0 0 26px color-mix(in srgb,var(--ui-accent) 85%,transparent),0 0 56px color-mix(in srgb,var(--ui-accent) 45%,transparent)}.about-site-btn .about-donate-icon{color:var(--ui-accent);text-shadow:0 0 6px var(--ui-accent),0 0 18px color-mix(in srgb,var(--ui-accent) 65%,transparent)}.about-site-btn .about-donate-text{text-shadow:0 0 4px #ffffff,0 0 14px color-mix(in srgb,var(--ui-accent) 75%,transparent)}.about-stack{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}.about-chip{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.2em;padding:6px 12px;color:#fff;background:#0000008c;border:1px solid color-mix(in srgb,var(--ui-accent) 55%,transparent);text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent) 55%,transparent);box-shadow:inset 0 0 8px color-mix(in srgb,var(--ui-accent) 14%,transparent),0 0 6px color-mix(in srgb,var(--ui-accent) 30%,transparent)}.about-footer-actions{margin:24px auto 8px;max-width:860px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.about-btn{font-family:Hyperspace,JetBrains Mono,monospace;font-size:16px;letter-spacing:.3em;padding:14px 32px;background:#0009;color:#fff;border:2px solid color-mix(in srgb,var(--ui-accent) 60%,transparent);cursor:pointer;text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--ui-accent) 70%,transparent);box-shadow:inset 0 0 12px color-mix(in srgb,var(--ui-accent) 16%,transparent),0 0 8px color-mix(in srgb,var(--ui-accent) 35%,transparent);transition:background .2s ease,box-shadow .2s ease,transform .12s ease;min-width:200px}.about-btn:hover{background:color-mix(in srgb,var(--ui-accent) 18%,rgba(0,0,0,.6));box-shadow:inset 0 0 18px color-mix(in srgb,var(--ui-accent) 28%,transparent),0 0 22px color-mix(in srgb,var(--ui-accent) 65%,transparent)}.about-btn:active{transform:translateY(1px)}@media(max-width:720px){.about-scroll{padding:24px 12px 28px}.about-section{padding:18px 14px 20px}.about-donate-btn{padding:14px 22px}.about-donate-text{font-size:13px;letter-spacing:.22em}.about-btn{padding:14px 18px;font-size:14px}}.title-screen.behind-demo{display:none}.demo-narration{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%);width:min(640px,calc(100vw - 32px));background:var(--panel-bg-strong);border:2px solid color-mix(in srgb,var(--ui-accent) 55%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--ui-accent) 22%,transparent),0 0 24px color-mix(in srgb,var(--ui-accent) 45%,transparent),0 0 60px color-mix(in srgb,var(--ui-accent) 18%,transparent);padding:16px 22px 18px;pointer-events:auto;z-index:40;font-family:Hyperspace,JetBrains Mono,monospace;color:var(--text-main);animation:demo-slide-in .36s ease-out both}.demo-narration.leaving{animation:demo-slide-out .26s ease-in both}.demo-narration.pulse .demo-title{animation:demo-title-pulse .42s ease-out}.demo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.demo-step-label{font-size:12px;letter-spacing:.32em;color:var(--ui-accent);text-shadow:0 0 6px color-mix(in srgb,var(--ui-accent) 70%,transparent)}.demo-skip{font-family:Hyperspace,JetBrains Mono,monospace;background:transparent;color:var(--text-dim);border:1px solid color-mix(in srgb,var(--text-dim) 50%,transparent);font-size:11px;letter-spacing:.22em;padding:5px 10px;cursor:pointer;transition:color .15s ease,border-color .15s ease}.demo-skip:hover{color:var(--ui-accent-alt);border-color:var(--ui-accent-alt)}.demo-title{font-size:clamp(20px,2.8vw,24px);letter-spacing:.26em;color:var(--ui-secondary);text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--ui-secondary) 80%,transparent),0 0 22px color-mix(in srgb,var(--ui-secondary) 55%,transparent);margin-bottom:10px;-webkit-text-stroke:.5px currentColor}.demo-body{font-size:clamp(16px,1.6vw,18px);line-height:1.55;letter-spacing:.06em;color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.85);-webkit-text-stroke:.35px #ffffff}.demo-body strong{color:var(--ui-accent);font-weight:700;text-shadow:0 0 4px #ffffff,0 0 10px color-mix(in srgb,var(--ui-accent) 75%,transparent),0 0 20px color-mix(in srgb,var(--ui-accent) 40%,transparent);-webkit-text-stroke:.5px currentColor}@keyframes demo-slide-in{0%{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%)}}@keyframes demo-slide-out{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,16px)}}@keyframes demo-title-pulse{0%{filter:brightness(1)}40%{filter:brightness(1.5)}to{filter:brightness(1)}}@media(max-width:720px){.demo-narration{top:calc(130px + env(safe-area-inset-top,0px));bottom:auto;padding:12px 16px 14px;animation-name:demo-slide-in-top}.demo-narration.leaving{animation-name:demo-slide-out-top}.demo-body{font-size:15px;letter-spacing:.04em}}@keyframes demo-slide-in-top{0%{opacity:0;transform:translate(-50%,-24px)}to{opacity:1;transform:translate(-50%)}}@keyframes demo-slide-out-top{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-16px)}}