/* VoltLab — dark laboratory theme */
:root{
  --p-ink-0: oklch(0.16 0.02 260);
  --p-ink-1: oklch(0.21 0.025 260);
  --p-ink-2: oklch(0.27 0.03 258);
  --p-ink-3: oklch(0.34 0.032 256);
  --p-cyan: oklch(0.86 0.11 195);
  --p-cyan-deep: oklch(0.70 0.14 210);
  --p-amber: oklch(0.84 0.15 85);
  --p-rose: oklch(0.72 0.19 15);
  --p-mint: oklch(0.85 0.13 165);

  --surface: var(--p-ink-0);
  --surface-2: var(--p-ink-1);
  --surface-3: var(--p-ink-2);
  --line: oklch(0.32 0.03 258);
  --text: oklch(0.93 0.015 250);
  --text-2: oklch(0.72 0.03 252);
  --accent: var(--p-cyan);
  --accent-deep: var(--p-cyan-deep);
  --good: var(--p-mint);
  --bad: var(--p-rose);
  --warn: var(--p-amber);
  --radius: 12px;
  --font-display: "Space Grotesk","Noto Sans SC",ui-sans-serif,system-ui,sans-serif;
  --font-body: "Noto Sans SC","Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-mono: "SF Mono","JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font:16px/1.7 var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, oklch(0.25 0.05 250 / 0.55), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, oklch(0.24 0.06 195 / 0.35), transparent 60%),
    var(--surface);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button,[role=button]{cursor:pointer;font-family:inherit}
canvas{display:block}

.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100dvh}

/* ---------- sidebar ---------- */
.sidebar{
  position:sticky;top:0;height:100dvh;overflow-y:auto;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-right:1px solid var(--line);
  padding:22px 16px 18px;
  display:flex;flex-direction:column;gap:14px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand-mark{color:var(--accent);flex:none}
.brand-text{font:700 17px/1.25 var(--font-display);letter-spacing:.02em}
.brand-text small{display:block;font:500 11px/1.4 var(--font-display);color:var(--text-2);letter-spacing:.08em;text-transform:uppercase}
.side-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-left:2px}
.side-caption{font-size:12px;color:var(--text-2);letter-spacing:.05em}
.lang-btn{
  flex:none;border:1px solid var(--line);background:var(--surface-3);color:var(--accent);
  border-radius:999px;padding:5px 12px;font:600 12px/1 var(--font-display);letter-spacing:.06em;
  transition:border-color .15s ease,transform .15s ease;
}
.lang-btn:hover{border-color:var(--accent-deep);transform:translateY(-1px)}
.chapters{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.ch-btn{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;
  width:100%;text-align:left;padding:9px 10px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--text-2);font:500 13.5px/1.35 var(--font-body);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ch-btn:hover{background:var(--surface-3);color:var(--text)}
.ch-btn[aria-current="true"]{background:var(--surface-3);border-color:var(--line);color:var(--text)}
.ch-btn .idx{font:700 11px/1 var(--font-mono);color:var(--accent-deep)}
.ch-btn .done-flag{font-size:11px;color:var(--good)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.side-foot p{font-size:12px;color:var(--text-2)}
.side-foot .hint{line-height:1.6}
#progress-line{font-family:var(--font-mono);color:var(--accent)}

/* ---------- main / hero ---------- */
.main{min-width:0;padding:34px 44px 90px}
.hero{max-width:820px;padding:26px 0 38px;border-bottom:1px dashed var(--line);margin-bottom:10px}
.hero h1{font:700 clamp(34px,4.6vw,52px)/1.12 var(--font-display);letter-spacing:.01em}
.hero h1 .accent{color:var(--accent)}
.lede{margin-top:14px;color:var(--text-2);max-width:64ch;font-size:16.5px}
.hero-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  padding:10px 18px;border-radius:999px;font:500 14.5px/1 var(--font-body);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-1px);border-color:var(--accent-deep)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:oklch(0.2 0.03 230);font-weight:700}
.btn-primary:hover{background:oklch(0.9 0.1 195);border-color:transparent}

/* ---------- chapter ---------- */
.chapter{padding-top:34px;max-width:1060px;scroll-margin-top:10px}
.ch-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ch-kicker{font:700 12px/1 var(--font-mono);color:var(--accent);letter-spacing:.14em;text-transform:uppercase}
.ch-title{font:700 clamp(26px,3vw,34px)/1.2 var(--font-display)}
.ch-sub{color:var(--text-2);font-family:var(--font-display);font-size:15px;letter-spacing:.02em}
.ch-intro{margin-top:12px;color:var(--text-2);max-width:72ch}

.panel{
  background:linear-gradient(180deg,var(--surface-2),oklch(0.195 0.022 260));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-top:22px;
}
.panel h3{font:700 15px/1.3 var(--font-body);color:var(--text);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.panel h3 .tag{font:600 10.5px/1 var(--font-mono);color:var(--accent-deep);border:1px solid var(--line);border-radius:999px;padding:4px 8px;letter-spacing:.08em}

.theory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.theory-card{background:var(--surface-3);border:1px solid var(--line);border-radius:10px;padding:14px 15px}
.theory-card h4{font:700 13.5px/1.4 var(--font-body);color:var(--accent);margin-bottom:6px}
.theory-card p{font-size:13.5px;color:var(--text-2);line-height:1.65}
.theory-card p b,.theory-card p strong{color:var(--text);font-weight:600}
.formula{
  font-family:var(--font-mono);font-size:15px;color:var(--warn);
  background:oklch(0.2 0.03 260 / .6);border:1px solid var(--line);
  border-radius:8px;padding:2px 8px;white-space:nowrap;
}

.sim-wrap{margin-top:22px}
.sim-stage{position:relative;background:oklch(0.14 0.02 262);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sim-stage canvas{width:100%;height:auto;touch-action:none}
.sim-readout{
  position:absolute;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none;
}
.readout-chip{
  font:500 12px/1.5 var(--font-mono);color:var(--text);
  background:oklch(0.2 0.03 258 / .82);border:1px solid var(--line);
  border-radius:8px;padding:4px 10px;backdrop-filter:blur(4px);
}
.readout-chip b{color:var(--accent);font-weight:700}
.controls{display:flex;flex-wrap:wrap;gap:16px 26px;margin-top:14px;align-items:flex-end}
.ctl{display:flex;flex-direction:column;gap:6px;min-width:180px;flex:1 1 200px;max-width:320px}
.ctl-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--text-2)}
.ctl-row output{font:700 13px/1 var(--font-mono);color:var(--accent)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent-deep),var(--line))}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);margin-top:-6px;border:none;
  box-shadow:0 0 0 3px oklch(0.86 0.11 195 / .18);
  transition:transform .12s ease;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:none}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{
  border:none;background:var(--surface-2);color:var(--text-2);padding:8px 14px;
  font:500 13px/1 var(--font-body);transition:background .15s ease,color .15s ease;
}
.seg button[aria-pressed="true"]{background:var(--accent);color:oklch(0.2 0.03 230);font-weight:700}
.sim-note{margin-top:10px;font-size:12.5px;color:var(--text-2);line-height:1.6}
.sim-note b{color:var(--text);font-weight:600}

/* ---------- quiz ---------- */
.quiz-list{display:flex;flex-direction:column;gap:12px}
.quiz-q{background:var(--surface-3);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.quiz-q legend,.quiz-q .q-text{font:600 14px/1.6 var(--font-body);color:var(--text);margin-bottom:10px;display:block}
.quiz-q .q-text .qn{font-family:var(--font-mono);color:var(--accent);margin-right:8px}
.quiz-opts{display:grid;gap:6px}
.quiz-opt{
  display:flex;align-items:center;gap:10px;text-align:left;width:100%;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;color:var(--text-2);font-size:13.5px;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.quiz-opt:hover:not(:disabled){border-color:var(--accent-deep);color:var(--text)}
.quiz-opt:disabled{cursor:default;opacity:.92}
.quiz-opt .key{font:700 11px/1 var(--font-mono);color:var(--accent-deep);flex:none}
.quiz-opt.correct{border-color:var(--good);color:var(--text);background:oklch(0.28 0.06 165 / .35)}
.quiz-opt.correct .key{color:var(--good)}
.quiz-opt.wrong{border-color:var(--bad);color:var(--text);background:oklch(0.27 0.07 20 / .35)}
.quiz-opt.wrong .key{color:var(--bad)}
.quiz-fb{margin-top:8px;font-size:13px;line-height:1.6;color:var(--text-2);display:none}
.quiz-fb.show{display:block}
.quiz-fb.good{color:var(--good)}
.quiz-fb.bad{color:var(--bad)}
.quiz-score{font:700 13px/1 var(--font-mono);color:var(--warn)}

/* footer of chapter */
.ch-foot{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .main{padding:22px 18px 70px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}