.sr{--sr-gap: 14px;display:grid;gap:var(--sr-gap)}.sr-hud{display:grid;gap:12px;grid-template-columns:1fr}@media(min-width:620px){.sr-hud{grid-template-columns:1fr auto;align-items:center}}.sr-uptime-wrap{display:grid;gap:6px}.sr-uptime-bar{height:18px;border-radius:999px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);position:relative}.sr-uptime-fill{display:block;height:100%;background:linear-gradient(90deg,var(--good),var(--accent));transition:width .55s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 18px #2ee6a673 inset}.sr-uptime-fill.low{background:linear-gradient(90deg,var(--warn),var(--bad));box-shadow:0 0 18px #ff5d7380 inset}.sr-uptime-fill.crit{background:linear-gradient(90deg,var(--bad),#ff2e49);animation:srPulse 1s ease-in-out infinite}.sr-hudstats{display:flex;gap:10px;flex-wrap:wrap}.sr-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);font-weight:800;font-size:15px;letter-spacing:-.01em}.sr-chip.gold{color:var(--xp);border-color:#ffd23f66;box-shadow:0 0 16px #ffd23f2e}.sr-chip.uptime{color:var(--good)}.sr-chip.wave{color:var(--text)}.sr-board-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.sr-mod{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-sm);background:linear-gradient(180deg,var(--surface),var(--surface-2));padding:12px;display:grid;gap:6px;transition:transform .12s ease,border-color .15s ease,box-shadow .2s ease}.sr-mod .sr-mod-top{display:flex;align-items:center;gap:8px}.sr-mod .sr-mod-icon{font-size:22px;line-height:1}.sr-mod .sr-mod-name{font-weight:800;font-size:14px;letter-spacing:-.01em}.sr-mod .sr-mod-lvl{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:#ffffff0f;color:var(--muted)}.sr-mod .sr-defends{display:flex;flex-wrap:wrap;gap:4px}.sr-deftag{font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:#ffffff08}.sr-mod.synergized{border-color:#a974ff8c;box-shadow:0 0 0 1px #a974ff59,0 0 22px #a974ff38}.sr-mod.empty{display:grid;place-items:center;min-height:96px;border-style:dashed;color:var(--faint);font-weight:700}.sr-mod.firing{animation:srFire .5s ease;border-color:var(--accent);box-shadow:var(--glow);z-index:2}.sr-mod.hit{animation:srShake .45s ease;border-color:var(--bad)}.sr-synrow{display:flex;flex-wrap:wrap;gap:8px}.sr-syn{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);transition:all .2s ease}.sr-syn.active{color:var(--accent-2);border-color:#a974ff8c;background:#a974ff1a;box-shadow:0 0 18px #a974ff40}.sr-syn .sr-syn-count{font-family:var(--mono);font-size:11px;opacity:.85}.sr-shop-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.sr-offer{display:grid;gap:8px}.sr-offer .sr-offer-head{display:flex;align-items:center;gap:10px}.sr-offer .sr-offer-icon{font-size:26px;line-height:1}.sr-offer .sr-blurb{font-size:13px;color:var(--muted);min-height:52px}.sr-offer .sr-cost{font-family:var(--mono);font-weight:800;color:var(--xp)}.sr-tag-pillar{font-size:10px}.sr-preview-types{display:flex;flex-wrap:wrap;gap:8px}.sr-threat-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-weight:800;font-size:13px;border:1px solid var(--border);background:var(--surface-2)}.sr-threat-pill.covered{border-color:#2ee6a680;color:var(--good)}.sr-threat-pill.exposed{border-color:#ff5d7380;color:var(--bad);animation:srPulse 1.6s ease-in-out infinite}.sr-threat-pill .sr-tp-icon{font-size:16px}.sr-threat-pill .sr-tp-pow{font-family:var(--mono);font-size:11px;opacity:.85}.sr-arena{position:relative;min-height:120px;overflow:hidden;border-radius:var(--radius-sm);border:1px solid var(--border);background:radial-gradient(600px 200px at 50% -40%,rgba(255,93,115,.12),transparent 70%),var(--surface);padding:14px}.sr-battle-line{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--border)}.sr-battle-line:last-child{border-bottom:0}.sr-battle-line .sr-bl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sr-bl-icon{font-size:22px;line-height:1}.sr-bl-name{font-weight:800}.sr-bl-math{margin-left:auto;font-family:var(--mono);font-size:13px}.sr-bl-math .blocked{color:var(--good)}.sr-bl-math .through{color:var(--bad)}.sr-bl-math .clean{color:var(--good)}.sr-bl-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border)}.sr-bl-blocked{background:linear-gradient(90deg,var(--good),var(--accent));transition:width .6s cubic-bezier(.2,.8,.2,1)}.sr-bl-through{background:linear-gradient(90deg,var(--bad),#ff2e49);transition:width .6s cubic-bezier(.2,.8,.2,1)}.sr-bl-teach{font-size:12px;color:var(--muted)}.sr-fly{position:absolute;font-size:30px;pointer-events:none;z-index:3;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));animation:srFlyIn .65s cubic-bezier(.4,.05,.6,1) forwards}.sr-popnum{position:absolute;font-weight:900;font-family:var(--mono);font-size:18px;pointer-events:none;z-index:4;animation:srPopUp 1s ease forwards}.sr-popnum.dmg{color:var(--bad);text-shadow:0 0 12px rgba(255,93,115,.6)}.sr-popnum.blk{color:var(--good);text-shadow:0 0 12px rgba(46,230,166,.6)}.sr-banner{display:grid;place-items:center;gap:6px;padding:22px;border-radius:var(--radius);text-align:center;animation:srPop .35s ease both}.sr-banner.win{background:#2ee6a61a;border:1px solid rgba(46,230,166,.45)}.sr-banner.lose{background:#ff5d731a;border:1px solid rgba(255,93,115,.45)}.sr-banner .sr-banner-title{font-size:clamp(26px,6vw,42px);font-weight:900;letter-spacing:-.02em}.sr-banner.win .sr-banner-title{color:var(--good)}.sr-banner.lose .sr-banner-title{color:var(--bad)}.sr-waves{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.sr-wavedot{width:10px;height:10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}.sr-wavedot.done{background:var(--good);border-color:var(--good);box-shadow:0 0 10px #2ee6a680}.sr-wavedot.now{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px #36e6ff99;animation:srPulse 1.3s ease-in-out infinite}.sr-wavedot.boss{width:13px;height:13px}.sr-wavedot.boss.now{background:var(--bad);border-color:var(--bad);box-shadow:0 0 14px #ff5d73b3}.sr-quizcard{display:grid;gap:14px;animation:srPop .3s ease both}.sr-quizmeta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.sr-explain{border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;line-height:1.5;border:1px solid var(--border);background:var(--surface-2);animation:srPop .3s ease both}.sr-explain.correct{border-color:#2ee6a673}.sr-explain.wrong{border-color:#ff5d7373}.sr-section-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}.sr-foot{font-size:11px;color:var(--faint);font-family:var(--mono)}@keyframes srPop{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.03)}to{transform:scale(1);opacity:1}}@keyframes srPulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes srFire{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-6px) scale(1.06)}to{transform:translateY(0) scale(1)}}@keyframes srShake{10%,90%{transform:translate(-2px)}30%,70%{transform:translate(4px)}50%{transform:translate(-4px)}}@keyframes srFlyIn{0%{transform:translate(var(--fx-from-x, 0),-90px) scale(.6);opacity:0}25%{opacity:1}to{transform:translateY(var(--fx-to-y, 30px)) scale(1.15);opacity:0}}@keyframes srPopUp{0%{transform:translateY(6px) scale(.7);opacity:0}25%{transform:translateY(-2px) scale(1.1);opacity:1}to{transform:translateY(-40px) scale(1);opacity:0}}.art-fx-root{--art-cyan: var(--accent, #36e6ff);--art-violet: var(--accent-2, #a974ff);--art-good: var(--good, #2ee6a6);--art-bad: var(--bad, #ff5d73);--art-warn: var(--warn, #ffcc4d);--art-gold: var(--xp, #ffd23f)}.art-beam{position:absolute;left:var(--art-x, 0);top:var(--art-y, 0);width:var(--art-len, 80px);height:var(--art-thick, 4px);transform-origin:0 50%;transform:rotate(var(--art-angle, 0deg));pointer-events:none;z-index:5}.art-beam-line{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--art-tone, var(--art-cyan)) 65%,transparent) 30%,var(--art-tone, var(--art-cyan)));box-shadow:0 0 12px var(--art-tone, var(--art-cyan));transform:scaleX(0);transform-origin:0 50%;animation:artBeamGrow var(--art-dur, .42s) cubic-bezier(.5,0,.2,1) forwards}.art-beam-head{position:absolute;top:50%;left:0;width:calc(var(--art-thick, 4px) * 2.6);height:calc(var(--art-thick, 4px) * 2.6);margin-top:calc(var(--art-thick, 4px) * -1.3);margin-left:calc(var(--art-thick, 4px) * -1.3);border-radius:50%;background:#fff;box-shadow:0 0 10px var(--art-tone, var(--art-cyan)),0 0 22px var(--art-tone, var(--art-cyan));animation:artBeamTravel var(--art-dur, .42s) cubic-bezier(.5,0,.2,1) forwards}@keyframes artBeamGrow{0%{transform:scaleX(0);opacity:0}18%{opacity:1}70%{transform:scaleX(1);opacity:1}to{transform:scaleX(1);opacity:0}}@keyframes artBeamTravel{0%{left:0;opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1)}82%{left:var(--art-len, 80px);opacity:1;transform:scale(1)}to{left:var(--art-len, 80px);opacity:0;transform:scale(.5)}}.art-shield{position:absolute;left:var(--art-x, 50%);top:var(--art-y, 50%);width:var(--art-size, 64px);height:var(--art-size, 64px);margin-left:calc(var(--art-size, 64px) * -.5);margin-top:calc(var(--art-size, 64px) * -.5);pointer-events:none;z-index:6}.art-shield-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2.5px solid var(--art-tone, var(--art-good));box-shadow:0 0 18px color-mix(in srgb,var(--art-tone, var(--art-good)) 70%,transparent),inset 0 0 14px color-mix(in srgb,var(--art-tone, var(--art-good)) 45%,transparent);animation:artShieldPop var(--art-dur, .5s) cubic-bezier(.2,.8,.2,1) forwards}.art-shield-ring.echo{animation:artShieldEcho var(--art-dur, .5s) cubic-bezier(.2,.8,.2,1) .06s forwards;opacity:0}@keyframes artShieldPop{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.04);opacity:1}to{transform:scale(.92);opacity:0}}@keyframes artShieldEcho{0%{transform:scale(.6);opacity:.8;border-width:2.5px}to{transform:scale(1.5);opacity:0;border-width:.5px}}.art-spark{position:absolute;left:var(--art-x, 50%);top:var(--art-y, 50%);width:0;height:0;pointer-events:none;z-index:7}.art-spark-core{position:absolute;left:50%;top:50%;width:var(--art-core, 14px);height:var(--art-core, 14px);margin-left:calc(var(--art-core, 14px) * -.5);margin-top:calc(var(--art-core, 14px) * -.5);border-radius:50%;background:radial-gradient(circle,#fff 10%,var(--art-tone, var(--art-bad)) 55%,transparent 72%);animation:artSparkCore var(--art-dur, .42s) ease-out forwards}.art-spark-shard{position:absolute;left:50%;top:50%;width:var(--art-shard-w, 3px);height:var(--art-shard-h, 12px);margin-left:calc(var(--art-shard-w, 3px) * -.5);border-radius:999px;background:linear-gradient(var(--art-tone, var(--art-bad)),transparent);transform-origin:50% 0;transform:rotate(var(--art-rot, 0deg)) translateY(0);animation:artSparkShard var(--art-dur, .42s) cubic-bezier(.2,.7,.3,1) forwards}@keyframes artSparkCore{0%{transform:scale(.2);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes artSparkShard{0%{transform:rotate(var(--art-rot, 0deg)) translateY(2px) scaleY(.4);opacity:0}25%{opacity:1}to{transform:rotate(var(--art-rot, 0deg)) translateY(var(--art-reach, 26px)) scaleY(1);opacity:0}}.art-float{position:absolute;left:var(--art-x, 50%);top:var(--art-y, 50%);transform:translate(-50%,-50%);pointer-events:none;z-index:8;font-family:var(--mono, ui-monospace, monospace);font-weight:900;font-size:var(--art-fsize, 18px);letter-spacing:-.02em;line-height:1;white-space:nowrap;animation:artFloatRise var(--art-dur, 1s) cubic-bezier(.2,.7,.3,1) forwards}.art-float-tone-damage{color:var(--art-bad);text-shadow:0 0 12px color-mix(in srgb,var(--art-bad) 60%,transparent)}.art-float-tone-heal{color:var(--art-good);text-shadow:0 0 12px color-mix(in srgb,var(--art-good) 60%,transparent)}.art-float-tone-block{color:var(--art-cyan);text-shadow:0 0 12px color-mix(in srgb,var(--art-cyan) 60%,transparent)}.art-float-tone-gold{color:var(--art-gold);text-shadow:0 0 12px color-mix(in srgb,var(--art-gold) 60%,transparent)}.art-float-tone-crit{color:var(--art-warn);font-size:calc(var(--art-fsize, 18px) * 1.4);text-shadow:0 0 16px color-mix(in srgb,var(--art-warn) 70%,transparent)}@keyframes artFloatRise{0%{transform:translate(-50%,-30%) scale(.6);opacity:0}22%{transform:translate(-50%,-55%) scale(1.15);opacity:1}35%{transform:translate(-50%,-60%) scale(1)}to{transform:translate(-50%,-150%) scale(1);opacity:0}}.art-shake{display:contents}.art-shake-inner{animation:artShake var(--art-dur, .42s) cubic-bezier(.36,.07,.19,.97) both;will-change:transform}.art-shake-inner.intensity-soft{--art-amp: 3px}.art-shake-inner.intensity-med{--art-amp: 6px}.art-shake-inner.intensity-hard{--art-amp: 11px}@keyframes artShake{10%,90%{transform:translate3d(calc(var(--art-amp, 6px) * -.3),0,0)}20%,80%{transform:translate3d(calc(var(--art-amp, 6px) * .55),0,0)}30%,50%,70%{transform:translate3d(calc(var(--art-amp, 6px) * -1),calc(var(--art-amp, 6px) * .3),0)}40%,60%{transform:translate3d(var(--art-amp, 6px),calc(var(--art-amp, 6px) * -.3),0)}}.art-synergy{position:absolute;left:var(--art-x, 50%);top:var(--art-y, 50%);width:var(--art-size, 120px);height:var(--art-size, 120px);margin-left:calc(var(--art-size, 120px) * -.5);margin-top:calc(var(--art-size, 120px) * -.5);pointer-events:none;z-index:9}.art-synergy-glow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--art-tone, var(--art-violet)) 45%,transparent) 0%,transparent 62%);animation:artSynGlow var(--art-dur, .9s) ease-out forwards}.art-synergy-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid var(--art-tone, var(--art-violet));box-shadow:0 0 22px color-mix(in srgb,var(--art-tone, var(--art-violet)) 70%,transparent);animation:artSynRing var(--art-dur, .9s) cubic-bezier(.2,.8,.2,1) forwards}.art-synergy-spoke{position:absolute;left:50%;top:50%;width:2.5px;height:calc(var(--art-size, 120px) * .34);margin-left:-1.25px;border-radius:999px;background:linear-gradient(var(--art-tone, var(--art-violet)),transparent);transform-origin:50% 0;transform:rotate(var(--art-rot, 0deg)) translateY(calc(var(--art-size, 120px) * .12)) scaleY(0);animation:artSynSpoke var(--art-dur, .9s) cubic-bezier(.2,.8,.2,1) forwards}@keyframes artSynGlow{0%{transform:scale(.3);opacity:0}30%{transform:scale(1);opacity:1}to{transform:scale(1.25);opacity:0}}@keyframes artSynRing{0%{transform:scale(.2);opacity:0}25%{transform:scale(1);opacity:1}to{transform:scale(1.6);opacity:0}}@keyframes artSynSpoke{0%{transform:rotate(var(--art-rot, 0deg)) translateY(calc(var(--art-size, 120px) * .12)) scaleY(0);opacity:0}35%{opacity:1;transform:rotate(var(--art-rot, 0deg)) translateY(calc(var(--art-size, 120px) * .2)) scaleY(1)}to{opacity:0;transform:rotate(var(--art-rot, 0deg)) translateY(calc(var(--art-size, 120px) * .42)) scaleY(.8)}}@media(prefers-reduced-motion:reduce){.art-beam-line{transform:scaleX(1);opacity:.9}.art-beam-head{left:var(--art-len, 80px);opacity:1;transform:scale(1)}.art-shield-ring{transform:scale(1);opacity:.9}.art-shield-ring.echo{display:none}.art-spark-core{transform:scale(1);opacity:.8}.art-spark-shard{opacity:.7;transform:rotate(var(--art-rot, 0deg)) translateY(calc(var(--art-reach, 26px) * .5))}.art-float{transform:translate(-50%,-90%);opacity:1}.art-shake-inner{animation:none;transform:none}.art-synergy-glow{transform:scale(1);opacity:.85}.art-synergy-ring{transform:scale(1.1);opacity:.85}.art-synergy-spoke{opacity:.7;transform:rotate(var(--art-rot, 0deg)) translateY(calc(var(--art-size, 120px) * .28)) scaleY(1)}}@keyframes exvFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes exvPulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes exvHalo{0%,to{opacity:.25;transform:scale(.96)}50%{opacity:.55;transform:scale(1.04)}}@keyframes exvScramble{0%{opacity:.25}50%{opacity:1}to{opacity:.25}}@keyframes exvTwinkle{0%,to{opacity:.35}50%{opacity:.95}}@keyframes exvSpin{to{transform:rotate(360deg)}}@keyframes exvScan{0%{opacity:0}50%{opacity:.9}to{opacity:0}}.exv-float{animation:exvFloat 3.4s ease-in-out infinite}.exv-pulse{animation:exvPulse 2.4s ease-in-out infinite}.exv-halo{animation:exvHalo 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.exv-scramble{animation:exvScramble 1.3s steps(3) infinite}.exv-twinkle{animation:exvTwinkle 2.2s ease-in-out infinite}.exv-spin{animation:exvSpin 14s linear infinite;transform-box:fill-box;transform-origin:center}.exv-scan{animation:exvScan 2.4s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.exv-float,.exv-pulse,.exv-halo,.exv-scramble,.exv-twinkle,.exv-spin,.exv-scan{animation:none!important}.exv-halo{opacity:.4}.exv-scramble{opacity:.9}}.ex-root{display:grid;gap:16px}.ex-picker-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.ex-ep-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;transition:transform .14s cubic-bezier(.2,.8,.2,1),border-color .18s ease,box-shadow .18s ease}.ex-ep-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--glow),var(--shadow)}.ex-ep-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ex-ep-thumb{border-radius:var(--radius-sm);overflow:hidden;background:#05070d;border:1px solid var(--border)}.ex-ep-thumb svg{display:block;width:100%;height:auto}.ex-done-chip{display:inline-flex;align-items:center;gap:6px;color:var(--good);font-weight:700;font-size:12px}.ex-stage{display:grid;gap:14px}.ex-topbar{gap:12px;flex-wrap:wrap}.ex-dots{display:flex;gap:7px;align-items:center}.ex-dot{width:9px;height:9px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);transition:background .25s ease,transform .25s ease,box-shadow .25s ease}.ex-dot.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));transform:scale(1.35);box-shadow:0 0 12px #36e6ff80;border-color:transparent}.ex-dot.seen{background:var(--accent-2);border-color:transparent;opacity:.7}.ex-scene-card{position:relative;overflow:hidden}.ex-vignette{position:relative;border-radius:var(--radius-sm);background:radial-gradient(620px 320px at 50% -10%,rgba(54,230,255,.1),transparent 60%),radial-gradient(520px 300px at 90% 120%,rgba(169,116,255,.1),transparent 60%),#05070d;border:1px solid var(--border);overflow:hidden}.ex-vignette svg{display:block;width:100%;height:auto}.ex-term-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-family:var(--mono);font-weight:700;font-size:13px;color:#061018;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 4px 16px #36e6ff4d}.ex-narration{font-size:clamp(15px,2.4vw,17px);line-height:1.6;min-height:4.6em}.ex-caret{display:inline-block;width:2px;height:1.05em;vertical-align:-2px;margin-left:1px;background:var(--accent);animation:exCaret 1s steps(1) infinite}@keyframes exCaret{50%{opacity:0}}.ex-scene-enter{animation:exSceneIn .45s cubic-bezier(.2,.8,.2,1) both}@keyframes exSceneIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.ex-beat{display:grid;gap:10px;border:1px dashed var(--accent-2);border-radius:var(--radius-sm);padding:13px;background:#a974ff0f}.ex-beat-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}.ex-payoff{animation:exPayoff .5s cubic-bezier(.2,.8,.2,1) both;color:var(--text)}@keyframes exPayoff{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.ex-q-stem{font-size:clamp(16px,2.6vw,19px);font-weight:700;line-height:1.4}.ex-choices{display:grid;gap:10px}.ex-explain{animation:exPayoff .4s ease both;border-radius:var(--radius-sm);padding:12px 14px;font-size:14.5px;line-height:1.55}.ex-explain.good{background:#2ee6a61a;border:1px solid rgba(46,230,166,.4)}.ex-explain.bad{background:#ff5d731a;border:1px solid rgba(255,93,115,.4)}.ex-complete{text-align:center;display:grid;gap:14px;place-items:center}.ex-ring{animation:exPop .5s cubic-bezier(.2,.8,.2,1) both}@keyframes exPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.07)}to{transform:scale(1);opacity:1}}.ex-confetti span{position:absolute;top:-8px;width:8px;height:12px;border-radius:2px;animation:exFall linear forwards}@keyframes exFall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(360px) rotate(540deg);opacity:0}}@keyframes exFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes exPulse{0%,to{opacity:.55}50%{opacity:1}}@keyframes exDash{to{stroke-dashoffset:0}}@keyframes exSpin{to{transform:rotate(360deg)}}@keyframes exBlink{0%,to{opacity:1}50%{opacity:.25}}@keyframes exScramble{0%,to{opacity:.3}50%{opacity:.9}}.ex-float{animation:exFloat 3.2s ease-in-out infinite}.ex-pulse{animation:exPulse 2.4s ease-in-out infinite}.ex-blink{animation:exBlink 1.4s steps(2) infinite}.ex-foot{font-size:11px;color:var(--faint)}@media(max-width:560px){.ex-narration{min-height:5.6em}}@media(prefers-reduced-motion:reduce){.ex-float,.ex-pulse,.ex-blink,.ex-caret,.ex-confetti span{animation:none!important}.ex-caret{opacity:0}}:root{--bg: #07090f;--bg-grad-1: #0b1020;--bg-grad-2: #07090f;--surface: #11151f;--surface-2: #161c2a;--border: #232c3f;--text: #e8edf7;--muted: #93a0bd;--faint: #5c6680;--accent: #36e6ff;--accent-2: #a974ff;--good: #2ee6a6;--bad: #ff5d73;--warn: #ffcc4d;--xp: #ffd23f;--radius: 14px;--radius-sm: 9px;--shadow: 0 10px 40px rgba(0,0,0,.45);--glow: 0 0 0 1px rgba(54,230,255,.35), 0 0 28px rgba(54,230,255,.25);--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;--mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(1200px 700px at 80% -10%,rgba(169,116,255,.1),transparent 60%),radial-gradient(1000px 600px at 0% 0%,rgba(54,230,255,.1),transparent 55%),linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2));background-attachment:fixed;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5}#root{min-height:100%}h1,h2,h3{line-height:1.15;margin:0 0 .4em;letter-spacing:-.01em}a{color:var(--accent);text-decoration:none}button{font-family:inherit}.wrap{max-width:1040px;margin:0 auto;padding:22px clamp(14px,4vw,32px) 80px}.grid{display:grid;gap:16px}.row{display:flex;gap:12px;align-items:center}.spread{display:flex;gap:12px;align-items:center;justify-content:space-between}.muted{color:var(--muted)}.mono{font-family:var(--mono)}.center{text-align:center}.card{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card.glow{box-shadow:var(--glow),var(--shadow);border-color:#36e6ff66}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:11px 16px;border-radius:var(--radius-sm);font-weight:600;font-size:15px;transition:transform .08s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{border:none;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#061018;box-shadow:0 6px 22px #36e6ff47}.btn-primary:hover{box-shadow:0 8px 30px #36e6ff73}.btn-ghost{background:transparent}.btn-block{width:100%}.choice{text-align:left;width:100%}.choice.correct{border-color:var(--good);background:#2ee6a61f}.choice.wrong{border-color:var(--bad);background:#ff5d731f}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);font-size:12px;font-weight:600;color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:6px;font-weight:700}.tag-code{color:var(--accent-2)}.tag-web{color:var(--accent)}.tag-networking{color:var(--good)}.tag-security{color:var(--bad)}.bar{height:10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s cubic-bezier(.2,.8,.2,1)}.stat{font-weight:800;font-size:26px;letter-spacing:-.02em}.stat-xp{color:var(--xp)}@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}@keyframes floatUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-34px);opacity:0}}@keyframes shake{10%,90%{transform:translate(-1px)}30%,70%{transform:translate(3px)}50%{transform:translate(-3px)}}.pop{animation:pop .25s ease both}.shake{animation:shake .4s ease both}.float-up{animation:floatUp .9s ease forwards}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
