:root{
  --bg:#0d1117;
  --panel:#161b22;
  --line:#2b3a4a;
  --accent:#e8b33c;
  --accent2:#c9962a;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 600px at 10% -10%, #1b2431 0%, #0d1117 55%) fixed, #0d1117;
  color:#e6edf3;
}
.card{background:linear-gradient(180deg,#1a222d,#151b23);border:1px solid var(--line);border-radius:16px}
.opt{transition:all .15s ease;border:1.5px solid var(--line);background:#131a23;border-radius:12px;text-align:left}
.opt:hover:not(.done){border-color:#4b637a;background:#182231;transform:translateY(-1px)}
.opt.correct{border-color:#22c55e;background:rgba(34,197,94,.13)}
.opt.wrong{border-color:#ef4444;background:rgba(239,68,68,.13)}
.opt.missed{border-color:#22c55e;border-style:dashed;background:rgba(34,197,94,.06)}
.opt.done{cursor:default}
.badge{background:rgba(232,179,60,.14);color:var(--accent);border:1px solid rgba(232,179,60,.35)}
.fade-in{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pulse-ring{animation:pr 1.4s infinite}
@keyframes pr{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}70%{box-shadow:0 0 0 12px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0d1117}
::-webkit-scrollbar-thumb{background:#2b3a4a;border-radius:8px}
.step{transition:all .2s;border:1.5px solid var(--line);background:#131a23}
.step.active{border-color:var(--accent);background:rgba(232,179,60,.08)}
.step.ok{border-color:#22c55e;background:rgba(34,197,94,.1)}
.step.fail{border-color:#ef4444;background:rgba(239,68,68,.12)}
.tab-btn{transition:all .15s;border:1px solid var(--line);background:#131a23}
.tab-btn.active{border-color:var(--accent);background:rgba(232,179,60,.12);color:var(--accent)}
kbd{font-family:ui-monospace,monospace}