:root{--bg: #04060f;--cyan: #3fe8ff;--pink: #ff4f9d;--ink: #eaf1ff;--muted: #93a7d6;--panel: rgba(9, 15, 38, .82);--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0;display:grid;place-items:center}#app canvas{display:block;touch-action:none}#hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px 0;z-index:20;pointer-events:none}.chip{pointer-events:auto;border:1px solid rgba(120,160,255,.28);background:#080e22b3;color:var(--muted);font:600 14px/1 var(--font);padding:9px 13px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);transition:color .15s,border-color .15s,transform .1s}.chip:hover{color:var(--ink);border-color:#78a0ff8c}.chip:active{transform:scale(.94)}.chip-quiet{cursor:default;pointer-events:none;font-variant-numeric:tabular-nums;opacity:.75}#overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:30;pointer-events:none}#overlay:has(.screen:not(.hidden):not(.screen-bottom)){background:radial-gradient(circle at 50% 40%,#0c163cdb,#04060ff5);backdrop-filter:blur(3px)}.screen{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 24px;width:min(92vw,420px);text-align:center;animation:rise .32s cubic-bezier(.2,.9,.3,1.3) both}.screen-bottom{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);background:var(--panel);border:1px solid rgba(120,160,255,.24);border-radius:22px;backdrop-filter:blur(10px);padding:20px;width:min(92vw,340px)}@keyframes rise{0%{opacity:0;transform:translateY(18px) scale(.96)}}.screen-bottom{animation:riseCentered .32s cubic-bezier(.2,.9,.3,1.3) both}@keyframes riseCentered{0%{opacity:0;transform:translate(-50%,18px) scale(.96)}to{opacity:1;transform:translate(-50%) scale(1)}}.hidden{display:none!important}.title{margin:0;font-size:clamp(40px,12vw,62px);font-weight:800;letter-spacing:3px;line-height:.95;color:var(--cyan);text-shadow:0 0 26px rgba(63,232,255,.55)}.title span{display:block;color:var(--pink);text-shadow:0 0 26px rgba(255,79,157,.5)}.heading{margin:0;font-size:clamp(24px,7vw,32px);font-weight:800;letter-spacing:1px}.tagline{margin:0;color:var(--muted);font-size:16px;font-weight:600;min-height:1.2em}.hint{margin:4px 0 0;color:#6d80ad;font-size:13px;line-height:1.5;max-width:34ch}.stack{display:flex;flex-direction:column;gap:10px;width:100%}.btn{font:700 17px/1 var(--font);padding:16px 20px;border-radius:16px;border:1px solid transparent;cursor:pointer;color:#04060f;transition:transform .12s cubic-bezier(.2,.9,.3,1.4),filter .15s;display:flex;align-items:center;justify-content:center;gap:10px}.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.96)}.btn-icon{font-size:20px}.btn-primary{background:linear-gradient(180deg,#6df3ff,#12b6d8);box-shadow:0 8px 26px #3fe8ff4d}.btn-secondary{background:linear-gradient(180deg,#ff7ab8,#e02a7c);color:#22030f;box-shadow:0 8px 26px #ff4f9d47}.btn-ghost{background:transparent;border-color:#78a0ff4d;color:var(--muted);font-size:15px;padding:12px 18px;box-shadow:none}.btn-ghost:hover{color:var(--ink)}.difficulty{display:flex;gap:8px;width:100%}.diff{flex:1;font:600 14px/1 var(--font);padding:11px 8px;border-radius:12px;border:1px solid rgba(120,160,255,.25);background:#0c143099;color:var(--muted);cursor:pointer;transition:all .15s}.diff.is-active{border-color:var(--cyan);color:#04060f;background:var(--cyan);font-weight:800}.code{font:800 clamp(46px,15vw,72px) / 1 var(--font);letter-spacing:12px;text-indent:12px;color:var(--cyan);background:#08102acc;border:2px dashed rgba(63,232,255,.45);border-radius:18px;padding:16px 20px;text-shadow:0 0 24px rgba(63,232,255,.5)}.code-input{display:flex;gap:10px;justify-content:center}.code-box{width:58px;height:72px;text-align:center;font:800 34px/1 var(--font);color:var(--cyan);background:#08102ad9;border:2px solid rgba(120,160,255,.3);border-radius:14px;text-transform:uppercase;outline:none;transition:border-color .15s,box-shadow .15s}.code-box:focus{border-color:var(--cyan);box-shadow:0 0 0 4px #3fe8ff29}.spinner{width:38px;height:38px;border-radius:50%;border:4px solid rgba(120,160,255,.2);border-top-color:var(--cyan);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.screen,.screen-bottom{animation:none}.spinner{animation-duration:2.4s}}