:root{--bg-deep:#040a14;--bg-mid:#0a1628;--cyan:#3dffc5;--ice:#7cf0ff;--amber:#ffd166;--rose:#ff6b9d;--fog:#b4d2ffb8;--panel:#081222b8;--line:#7cf0ff47;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{background:var(--bg-deep);color:#e8f4ff;width:100%;height:100%;font-family:Space Grotesk,sans-serif;overflow:hidden}.shell{background:radial-gradient(ellipse 80% 60% at 50% 0%, #3dffc51f, transparent 55%), radial-gradient(ellipse 70% 50% at 80% 100%, #ff6b9d1a, transparent 50%), linear-gradient(180deg, var(--bg-mid), var(--bg-deep));place-items:center;width:100%;height:100%;display:grid;position:relative}canvas{border:1px solid var(--line);touch-action:none;cursor:crosshair;background:#02060d;border-radius:18px;width:min(100vw,70vh);max-width:560px;height:min(100vh,142.857vw);max-height:800px;display:block;box-shadow:0 0 0 1px #0006,0 30px 80px #0000008c,0 0 60px #3dffc514}.hud{pointer-events:none;flex-direction:column;justify-content:space-between;width:min(100vw,70vh);max-width:560px;margin:0 auto;padding:clamp(1rem,3vw,1.75rem);display:flex;position:absolute;inset:0}.hud-top{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.brand{letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 24px #3dffc573;font-family:Orbitron,sans-serif;font-size:clamp(.95rem,2.4vw,1.15rem);font-weight:800;animation:3.2s ease-in-out infinite brandPulse}.stats{text-align:right;font-variant-numeric:tabular-nums}.stats .label{letter-spacing:.14em;text-transform:uppercase;color:var(--fog);opacity:.75;font-size:.7rem;display:block}.stats .value{color:var(--ice);font-family:Orbitron,sans-serif;font-size:1.35rem;font-weight:700}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:radial-gradient(circle at 50% 40%,#0a1c3059,#02060dd1);place-items:center;transition:opacity .35s,visibility .35s;display:grid;position:absolute;inset:0}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.panel{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;width:min(92%,360px);padding:2rem 1.5rem 1.6rem;animation:.45s cubic-bezier(.22,1,.36,1) panelIn;box-shadow:0 20px 50px #00000073}.panel h1{letter-spacing:.08em;color:var(--cyan);margin-bottom:.55rem;font-family:Orbitron,sans-serif;font-size:clamp(1.6rem,5vw,2.1rem);font-weight:800}.panel p{color:var(--fog);margin-bottom:1.35rem;font-size:.98rem;line-height:1.5}.panel .result{color:var(--amber);margin-bottom:.35rem;font-family:Orbitron,sans-serif;font-size:1.1rem}.controls{color:#c8dcf5b3;flex-direction:column;gap:.65rem;margin-bottom:1.25rem;font-size:.85rem;display:flex}.btn{pointer-events:auto;appearance:none;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;color:#031018;background:linear-gradient(135deg, var(--cyan), var(--ice));border:none;border-radius:999px;padding:.95rem 1.4rem;font-family:Orbitron,sans-serif;font-size:.85rem;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 0 28px #3dffc559}.btn:hover{transform:translateY(-1px)scale(1.02);box-shadow:0 0 36px #3dffc580}.btn:active{transform:scale(.98)}.hint{color:#b4d2ff8c;margin-top:.85rem;font-size:.78rem}@keyframes brandPulse{0%,to{opacity:.85;filter:drop-shadow(0 0 6px #3dffc540)}50%{opacity:1;filter:drop-shadow(0 0 14px #3dffc58c)}}@keyframes panelIn{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=520px){.hud{padding:.85rem}.stats .value{font-size:1.1rem}}