:root{--bg:#0b1020;--fg:#eaf2ff;--muted:#9bb3d1;--card:rgba(255,255,255,.06);--accent1:#7c9cff;--accent2:#9effd6;--bad:#ff6b6b;--ok:#2bd4a1}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 10% 10%,#16213e,#0b1020 60%,#070b17);color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu}a{color:inherit;text-decoration:none}.muted{color:var(--muted)}.app-shell{min-height:100%;display:flex;flex-direction:column}.topbar{position:sticky;top:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:linear-gradient(180deg,#ffffff14,#ffffff05);display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid rgba(255,255,255,.08)}.brand{font-weight:800;letter-spacing:.3px;font-size:20px}.brand span{color:var(--accent2)}.container{width:min(1100px,92%);margin:24px auto;flex:1}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.card{background:var(--card);padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px #0003;transition:transform .15s,border .15s}.card:hover{transform:translateY(-3px);border-color:#7c9cff80}.card h3{margin:4px 0 8px}.summary{color:var(--muted);min-height:54px}.meta{display:flex;justify-content:space-between;opacity:.9;margin-top:8px}.back{display:inline-block;margin-bottom:10px;opacity:.9}.module h1{margin:6px 0 14px}.lesson{background:var(--card);padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.08)}.lesson ul{margin:8px 0 12px 18px}.tip{margin:12px 0;padding:10px 12px;border-left:3px solid var(--accent2);background:#9effd61a;border-radius:8px}.quiz{margin-top:18px}.qcard{background:var(--card);padding:14px;border-radius:12px;margin:10px 0;border:1px solid rgba(255,255,255,.06)}.qtitle{font-weight:600;margin-bottom:10px}.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.opt{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);padding:10px;border-radius:8px;cursor:pointer;transition:transform .08s,border .1s}.opt:hover{border-color:var(--accent1)}.opt.picked{border-color:var(--accent2);transform:translateY(-1px)}.actions{display:flex;gap:10px;margin-top:10px;align-items:center}button{color:var(--fg);background:transparent;border:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:10px;cursor:pointer}button.primary{background:linear-gradient(135deg,var(--accent1),#67ffd7);border:0;color:#07111e;font-weight:700}button.ghost{opacity:.9}.results{margin-top:14px;background:var(--card);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.06)}.rline{display:flex;gap:8px;align-items:flex-start;margin:6px 0}.rline.ok{color:var(--ok)}.rline.bad{color:var(--bad)}.ex{opacity:.95}.demo{margin:6px 0 2px;padding:12px;border-radius:12px;border:1px dashed rgba(255,255,255,.15)}.pwinput,.input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#ffffff0d;color:var(--fg)}.meter{height:10px;background:#ffffff14;border-radius:10px;margin:10px 0}.meter .bar{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--bad),#ffcf6b,var(--ok));transition:width .2s}.footer{opacity:.6;text-align:center;padding:20px}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 0;text-align:center;background:radial-gradient(900px 600px at 80% -10%,rgba(124,156,255,.15),transparent 60%),radial-gradient(900px 600px at 10% 10%,rgba(158,255,214,.12),transparent 60%);border-radius:0;margin-top:0;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:-24px;margin-bottom:-24px}.hero h1{margin:0 0 10px;font-size:clamp(28px,5vw,44px);line-height:1.1}.hero-sub{color:var(--muted);margin:0 auto 16px;max-width:700px}.hero-actions{display:flex;gap:14px;justify-content:center;flex-direction:column;align-items:center}.start-btn{background:linear-gradient(135deg,var(--accent1),#67ffd7);border:0;color:#07111e;font-weight:800;padding:14px 22px;border-radius:14px;font-size:18px;cursor:pointer;box-shadow:0 10px 30px #00000040}.section-title{margin-top:30px}.section-title h2{margin:0 0 6px}.section-title{scroll-margin-top:120px}.meter.small{height:6px;margin-top:6px}.runner-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:6px}.runner-progress{min-width:220px}.game-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 600px at 20% -10%,rgba(124,156,255,.15),transparent 60%),radial-gradient(900px 600px at 80% 110%,rgba(158,255,214,.12),transparent 60%);padding:20px;z-index:20}.game-stage{width:min(900px,96vw);max-height:92vh;display:flex;align-items:center;justify-content:center}.game-card{width:100%;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px;box-shadow:0 20px 60px #00000059;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.game-card h1{margin-top:0}.glow{text-shadow:0 0 18px rgba(124,156,255,.45)}.space-between{justify-content:space-between}.center{justify-content:center}.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.15);margin-bottom:8px}.badge.ok{background:#2bd4a126;border-color:#2bd4a166}.badge.bad{background:#ff6b6b1f;border-color:#ff6b6b66}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:slideInUp .35s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn .4s ease-out}@keyframes popIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.pop-in{animation:popIn .25s ease-out}@keyframes wobble{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.wobble{animation:wobble .3s ease-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.pulse{animation:pulse 1.2s infinite ease-in-out}