:root{--cyan:#3ae7ff;--magenta:#ff4fd8;--gold:#ffd166;--lime:#9dff57;--orange:#ff9f43;--red:#ff4757;--ink:#050814;--panel:#0d142eb8;--panel-border:#70acff47;--text:#eaf6ff;--text-dim:#8fa8cc;--font-display:"Orbitron", "Avenir Next", system-ui, sans-serif;--font-ui:"Rajdhani", "Avenir Next", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background:var(--ink);height:100%;color:var(--text);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;overflow:hidden}#app{position:fixed;inset:0}#game{width:100%;height:100%;display:block;position:absolute;inset:0}.hidden{display:none!important}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}kbd{font-family:var(--font-display);background:#ffffff14;border:1px solid #ffffff40;border-bottom-width:3px;border-radius:6px;padding:1px 7px;font-size:.75em}#hud{pointer-events:none;z-index:20;justify-content:space-between;align-items:flex-start;padding:14px 18px;display:flex;position:absolute;top:0;left:0;right:0}.hud-label{letter-spacing:3px;color:var(--text-dim);font-size:12px;font-weight:600}.hud-score{font-family:var(--font-display);color:#fff;text-shadow:0 0 18px #3ae7ffa6;font-variant-numeric:tabular-nums;font-size:clamp(22px,4vw,34px);font-weight:800;line-height:1.05}.hud-score.bump{animation:.22s ease-out bump}@keyframes bump{40%{transform:scale(1.18)}to{transform:scale(1)}}.hud-combo{font-family:var(--font-display);color:var(--gold);text-shadow:0 0 14px #ffd166cc;align-items:baseline;gap:7px;margin-top:4px;font-size:20px;font-weight:800;animation:.9s ease-in-out infinite comboPulse;display:inline-flex}.hud-combo .combo-x{font-size:14px}.hud-combo .combo-count{font-family:var(--font-ui);letter-spacing:2px;color:var(--text-dim);font-size:13px}.hud-combo.hot{color:#ff8f4d;text-shadow:0 0 18px #ff6428e6}@keyframes comboPulse{50%{transform:scale(1.07)}}.hud-center{text-align:center;padding-top:4px}.hud-wave{font-family:var(--font-display);letter-spacing:4px;color:var(--text);text-shadow:0 0 14px #7aaaff99;font-size:clamp(14px,2.4vw,20px);font-weight:800}.wave-track{background:#ffffff1f;border-radius:3px;width:clamp(110px,18vw,200px);height:5px;margin:7px auto 0;overflow:hidden}.wave-fill{background:linear-gradient(90deg, var(--cyan), var(--magenta));border-radius:3px;width:0%;height:100%;transition:width .35s;box-shadow:0 0 8px #3ae7ffcc}.hud-right{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.hud-shield{gap:5px;display:flex}.hud-shield svg{filter:drop-shadow(0 0 6px #3ae7ffb3);width:24px;height:24px}.hud-shield .lost svg{opacity:.16;filter:none}.hud-shield .just-lost svg{animation:.5s ease-out heartPop}@keyframes heartPop{0%{opacity:1;transform:scale(1.6)}to{opacity:.16;transform:scale(1)}}.hud-buttons{pointer-events:auto;gap:6px;display:flex}.icon-btn{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;place-items:center;width:36px;height:36px;transition:all .15s;display:grid}.icon-btn svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.icon-btn:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:0 0 12px #3ae7ff59}.icon-btn.off{opacity:.45}.icon-btn.off svg{stroke:var(--text-dim)}#answer-wrap{left:50%;bottom:var(--answer-bottom,118px);z-index:22;pointer-events:none;position:absolute;transform:translate(-50%)}.answer-display{text-align:center;min-width:190px;font-family:var(--font-display);color:#fff;letter-spacing:4px;font-variant-numeric:tabular-nums;background:#080c1ec7;border:1px solid #3ae7ff80;border-radius:14px;padding:8px 26px;font-size:34px;font-weight:800;position:relative;box-shadow:0 0 24px #3ae7ff40,inset 0 0 18px #3ae7ff14}.answer-display .caret{background:var(--cyan);vertical-align:-4px;width:3px;height:30px;box-shadow:0 0 8px var(--cyan);margin-left:3px;animation:1s step-end infinite blink;display:inline-block}.answer-display:not(.has-text) .caret{visibility:hidden}@keyframes blink{50%{opacity:0}}.answer-placeholder{font-family:var(--font-ui);letter-spacing:5px;color:var(--text-dim);place-items:center;font-size:15px;font-weight:600;display:grid;position:absolute;inset:0}.answer-display.has-text .answer-placeholder{display:none}.answer-display.miss{border-color:var(--red);animation:.34s missShake;box-shadow:0 0 26px #ff47578c}@keyframes missShake{20%{transform:translate(-9px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(3px)}}#numpad{z-index:24;grid-template-columns:repeat(3,74px);gap:8px;display:grid;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.np-key{background:var(--panel);border:1px solid var(--panel-border);height:52px;font-family:var(--font-display);color:var(--text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;font-size:22px;font-weight:700;transition:transform 80ms,box-shadow .12s}.np-key:active{background:#3ae7ff2e;transform:scale(.93);box-shadow:0 0 16px #3ae7ff66}.np-fire{border-color:var(--cyan);letter-spacing:2px;text-shadow:0 0 10px #3ae7ffcc;background:linear-gradient(135deg,#3ae7ff40,#ff4fd840);font-size:15px}.np-back{font-size:18px}#banner{text-align:center;z-index:30;pointer-events:none;place-content:center;display:grid;position:absolute;inset:0}.banner-title{font-family:var(--font-display);letter-spacing:8px;color:#fff;text-shadow:0 0 30px #3ae7ffe6,0 0 90px #3ae7ff73;font-size:clamp(40px,9vw,92px);font-weight:900;animation:2.6s cubic-bezier(.16,1,.3,1) forwards bannerIn}.banner-sub{letter-spacing:6px;color:var(--text-dim);opacity:0;margin-top:6px;font-size:clamp(14px,2.6vw,22px);font-weight:600;animation:2.6s cubic-bezier(.16,1,.3,1) 80ms forwards bannerIn}#banner.boss .banner-title{color:#ffb3b3;text-shadow:0 0 30px #ff4757f2,0 0 90px #ff475780}@keyframes bannerIn{0%{opacity:0;transform:scale(.55)}12%{opacity:1;transform:scale(1.04)}18%{transform:scale(1)}78%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}#toasts{z-index:40;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:absolute;top:86px;right:16px}.toast{background:var(--panel);border:1px solid var(--gold);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;align-items:center;gap:12px;max-width:300px;padding:11px 18px 11px 13px;animation:.45s cubic-bezier(.34,1.56,.64,1) toastIn,.4s 3.1s forwards toastOut;display:flex;box-shadow:0 0 24px #ffd1664d}.toast svg{filter:drop-shadow(0 0 6px #ffd166e6);flex:none;width:30px;height:30px}.toast b{font-family:var(--font-display);letter-spacing:1px;color:var(--gold);font-size:13px;display:block}.toast span{color:var(--text-dim);font-size:13px;font-weight:600}@keyframes toastIn{0%{opacity:0;transform:translate(60px)scale(.8)}}@keyframes toastOut{to{opacity:0;transform:translate(40px)}}#menu{z-index:50;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0;overflow-y:auto}.menu-inner{text-align:center;width:min(680px,94vw);animation:.7s cubic-bezier(.16,1,.3,1) menuIn}@keyframes menuIn{0%{opacity:0;transform:translateY(26px)}}.logo-wrap{margin-bottom:26px}.logo{font-family:var(--font-display);letter-spacing:6px;color:#fff;text-shadow:0 0 24px #3ae7ffbf,0 0 80px #3ae7ff59;font-size:clamp(46px,10vw,96px);font-weight:900;line-height:1;animation:2.6s ease-in-out infinite logoGlow}.logo-nova{background:linear-gradient(120deg, var(--cyan), var(--magenta) 60%, var(--gold));color:#0000;filter:drop-shadow(0 0 22px #ff4fd88c);-webkit-background-clip:text;background-clip:text}@keyframes logoGlow{50%{text-shadow:0 0 34px #3ae7fff2,0 0 110px #3ae7ff80}}.logo-tag{letter-spacing:5px;color:var(--text-dim);margin-top:10px;font-size:clamp(11px,1.9vw,15px);font-weight:700}.menu-section{margin:20px 0}.menu-heading{letter-spacing:5px;color:var(--text-dim);margin-bottom:12px;font-size:13px;font-weight:700}.topic-grid{grid-template-columns:repeat(6,1fr);gap:10px;display:grid}.topic-card{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:13px 4px 11px;transition:all .16s;display:flex}.topic-card:hover{border-color:#ffffff80;transform:translateY(-3px)}.topic-card.sel{border-color:var(--cyan);background:#3ae7ff21;transform:translateY(-3px);box-shadow:0 0 20px #3ae7ff66}.topic-sym{font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1}.sym-add{color:var(--cyan);text-shadow:0 0 12px}.sym-sub{color:var(--orange);text-shadow:0 0 12px}.sym-mul{color:var(--magenta);text-shadow:0 0 12px}.sym-div{color:var(--lime);text-shadow:0 0 12px}.sym-frac{color:var(--gold);text-shadow:0 0 12px}.sym-mixed{color:#b48bff;text-shadow:0 0 12px}.topic-name{letter-spacing:.5px;color:var(--text);font-size:12px;font-weight:700}.diff-row{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.diff-btn{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:10px 6px;transition:all .16s}.diff-btn b{font-family:var(--font-display);letter-spacing:1px;font-size:13px;display:block}.diff-btn i{color:var(--text-dim);margin-top:3px;font-size:11px;font-style:normal;font-weight:600;display:block}.diff-btn:hover{border-color:#ffffff80;transform:translateY(-2px)}.diff-btn.sel{border-color:var(--gold);background:#ffd1661f;box-shadow:0 0 18px #ffd16659}.launch-btn{font-family:var(--font-display);letter-spacing:4px;color:#04121c;background:linear-gradient(120deg, var(--cyan), #7ef2ff);border-radius:16px;margin-top:26px;padding:16px 58px;font-size:22px;font-weight:900;transition:transform .14s,box-shadow .14s;position:relative;box-shadow:0 0 32px #3ae7ff8c,0 8px 26px #00000073}.launch-btn:hover{transform:scale(1.045);box-shadow:0 0 46px #3ae7ffcc,0 10px 30px #00000080}.launch-btn:active{transform:scale(.98)}.launch-btn.small{margin-top:18px;padding:12px 42px;font-size:16px}.menu-footer{flex-direction:column;align-items:center;gap:8px;margin-top:26px;display:flex}.menu-best{font-family:var(--font-display);letter-spacing:2px;color:var(--gold);text-shadow:0 0 10px #ffd16680;font-size:14px}.link-btn{letter-spacing:3px;color:var(--text-dim);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;transition:color .15s}.link-btn:hover{color:var(--cyan)}.menu-credit{letter-spacing:1px;color:#8fa8cc8c;font-size:11px;font-weight:600}.modal{z-index:60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#040712b8;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.modal-card{text-align:center;border:1px solid var(--panel-border);background:linear-gradient(160deg,#111a3af5,#090d20f5);border-radius:22px;width:min(560px,94vw);max-height:90vh;padding:30px 34px;animation:.45s cubic-bezier(.34,1.56,.64,1) cardIn;overflow-y:auto;box-shadow:0 0 60px #3ae7ff24,0 30px 60px #0009}@keyframes cardIn{0%{opacity:0;transform:scale(.86)translateY(18px)}}.modal-card h2{font-family:var(--font-display);letter-spacing:5px;text-shadow:0 0 18px #3ae7ff99;margin-bottom:14px;font-size:26px;font-weight:900}.howto-list{text-align:left;flex-direction:column;gap:11px;margin:8px 0 6px;list-style:none;display:flex}.howto-list li{color:var(--text);padding-left:18px;font-size:15px;font-weight:500;line-height:1.45;position:relative}.howto-list li:before{content:"▸";color:var(--cyan);position:absolute;left:0}.howto-list b{color:var(--gold);font-weight:700}.pause-btns{flex-direction:column;align-items:center;gap:6px;display:flex}.report-head{margin-bottom:6px}.go-stars{justify-content:center;gap:10px;margin:10px 0 4px;display:flex}.go-stars svg{width:44px;height:44px}.go-stars .earned{filter:drop-shadow(0 0 10px #ffd166e6);animation:.5s cubic-bezier(.34,1.56,.64,1) backwards starPop}.go-stars .earned:nth-child(2){animation-delay:.18s}.go-stars .earned:nth-child(3){animation-delay:.36s}@keyframes starPop{0%{transform:scale(0)rotate(-40deg)}}.go-newbest{font-family:var(--font-display);letter-spacing:3px;color:var(--gold);text-shadow:0 0 14px #ffd166cc;margin-top:4px;font-size:14px;animation:1s ease-in-out infinite comboPulse}.report-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0;display:grid}.stat{background:#ffffff0b;border:1px solid #ffffff17;border-radius:14px;padding:12px 6px}.stat-val{font-family:var(--font-display);color:#fff;text-shadow:0 0 12px #3ae7ff80;font-variant-numeric:tabular-nums;font-size:24px;font-weight:800}.stat-label{letter-spacing:2px;color:var(--text-dim);margin-top:3px;font-size:10.5px;font-weight:700}.practice-wrap{margin:6px 0 4px}.practice-chips{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;display:flex}.practice-chip{font-family:var(--font-display);color:var(--gold);letter-spacing:1px;background:#ffd16617;border:1px solid #ffd16673;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700}#countdown{z-index:45;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}#countdown-num{font-family:var(--font-display);color:#fff;text-shadow:0 0 40px #3ae7ffe6;font-size:clamp(90px,20vw,190px);font-weight:900}#countdown-num.tick{animation:.8s cubic-bezier(.16,1,.3,1) forwards countTick}@keyframes countTick{0%{opacity:0;transform:scale(2.1)}30%{opacity:1;transform:scale(1)}85%{opacity:1}to{opacity:0;transform:scale(.85)}}#flash{z-index:35;pointer-events:none;opacity:0;background:#fff;transition:opacity .4s;position:absolute;inset:0}#flash.red{background:radial-gradient(#0000 30%,#ff283c8c 100%)}#flash.on{opacity:1;transition:none}#freeze-tint{z-index:15;pointer-events:none;opacity:0;background:radial-gradient(#5ab4ff14,#2878ff38);transition:opacity .5s;position:absolute;inset:0}#freeze-tint.on{opacity:1}@media (width<=640px){.topic-grid{grid-template-columns:repeat(3,1fr)}.diff-row,.report-grid{grid-template-columns:repeat(2,1fr)}#hud{padding:10px 12px}.answer-display{min-width:150px;font-size:26px}}@media (prefers-reduced-motion:reduce){.logo,.hud-combo,.go-newbest{animation:none}}