.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}}.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}}