:root {
  --bg: #0e1116;
  --panel: #161c24;
  --panel-2: #1c2430;
  --line: #2a3442;
  --text: #e8edf3;
  --text-dim: #9aa7b4;
  --accent: #4da3ff;
  --accent-2: #7c5cff;
  --good: #2fd57a;
  --warn: #ffb020;
  --bad: #ff5c5c;
  --radius: 10px;
  --mono: "SF Mono", "Cascadia Code", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
.hidden { display: none !important; }

/* ---------- topbar ---------- */
#topbar { position: sticky; top: 0; z-index: 50; display: flex; gap: 12px; align-items: center;
  padding: 10px 16px; background: rgba(14,17,22,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--text); white-space: nowrap; }
.brand span { color: var(--accent); }
#menu-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 4px 10px; cursor: pointer; }
#search { flex: 1; max-width: 480px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; outline: none; }
#search:focus { border-color: var(--accent); }
#search-results { position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
  width: min(560px, 92vw); max-height: 60vh; overflow: auto; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
#search-results a { display: block; padding: 8px 14px; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--line); }
#search-results a:hover { background: var(--panel); }
#search-results .sr-num { color: var(--accent); font-family: var(--mono); margin-right: 8px; }
#progress-pill { margin-left: auto; font-family: var(--mono); font-size: 13px; background: var(--panel);
  border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

/* ---------- layout ---------- */
#layout { display: flex; min-height: calc(100vh - 110px); }
#sidebar { width: 290px; flex-shrink: 0; border-right: 1px solid var(--line); padding: 16px 12px;
  overflow-y: auto; height: calc(100vh - 110px); position: sticky; top: 57px; }
#sidebar .stage-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 8px; color: var(--text-dim); text-decoration: none; font-size: 14px; }
#sidebar .stage-link:hover { background: var(--panel); color: var(--text); }
#sidebar .stage-link.active { background: var(--panel-2); color: var(--text); }
#sidebar .stage-num { font-family: var(--mono); font-size: 12px; color: var(--accent); min-width: 26px; }
#sidebar .mini-bar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
#sidebar .mini-bar i { display: block; height: 100%; background: var(--good); transition: width .3s; }
#main { flex: 1; padding: 24px 28px 60px; max-width: 1080px; margin: 0 auto; outline: none; }

/* ---------- cards & typography ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin: 16px 0; }
.card h3 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); }
h1.concept-title { font-size: 26px; margin: 4px 0 8px; }
h1.concept-title .num { color: var(--accent); font-family: var(--mono); font-size: 16px; vertical-align: middle; }
.crumb { font-size: 13px; color: var(--text-dim); }
.crumb a { color: var(--accent); text-decoration: none; }
.tex-fallback { font-family: var(--mono); color: #ffd479; background: rgba(255,212,121,.07);
  padding: 0 4px; border-radius: 4px; }
blockquote.note { border-left: 3px solid var(--accent-2); margin: 12px 0; padding: 6px 14px;
  color: var(--text-dim); background: var(--panel); border-radius: 0 8px 8px 0; }

/* ---------- home / dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.stage-card { display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--text); }
.stage-card:hover { border-color: var(--accent); }
.stage-card .top { display: flex; justify-content: space-between; align-items: baseline; }
.stage-card .name { font-weight: 600; }
.stage-card .count { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.stage-card .bar { height: 6px; background: var(--line); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.stage-card .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); }
.stage-card .gate { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); }

/* ---------- concept list ---------- */
.concept-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 8px 0;
  text-decoration: none; color: var(--text); }
.concept-row:hover { border-color: var(--accent); }
.concept-row .num { font-family: var(--mono); color: var(--accent); min-width: 38px; }
.concept-row .title { flex: 1; }
.concept-row .tick { color: var(--good); font-weight: 700; visibility: hidden; }
.concept-row.mastered .tick { visibility: visible; }
.concept-row.mastered { border-color: rgba(47,213,122,.4); }

.motivation-card { border-left: 3px solid var(--accent); }
.eli5-card { border-left: 3px solid var(--good); background: rgba(47,213,122,.04); }
.eli5-card h3 { color: var(--good) !important; }

/* ---------- engine area ---------- */
.engine-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin: 18px 0; overflow: hidden; }
.engine-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel-2); }
.engine-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.engine-head .name { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.engine-body { padding: 14px 16px; }
.engine-body canvas { display: block; width: 100%; border-radius: 8px; background: #0a0d12; touch-action: none; }
.engine-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.readout { font-family: var(--mono); font-size: 13px; background: #0a0d12; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; margin-top: 10px; white-space: pre-wrap; overflow-x: auto; }
.readout .hl { color: var(--accent); }

/* ---------- controls ---------- */
.btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 14px; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #08131f; font-weight: 600; }
.btn.good { border-color: var(--good); color: var(--good); }
.btn-ghost { background: none; }
.chip { display: inline-block; font-size: 12px; font-family: var(--mono); padding: 2px 9px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); margin: 2px 4px 2px 0; }
.chip.on { border-color: var(--accent); color: var(--accent); }
input[type="range"] { accent-color: var(--accent); }
label.slider { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px;
  color: var(--text-dim); }

/* ---------- matrix grid widgets ---------- */
.mgrid { display: inline-grid; gap: 4px; font-family: var(--mono); }
.mgrid input, .mgrid .cell { width: 58px; text-align: center; background: #0a0d12; color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 2px; font-family: var(--mono); font-size: 13px; }
.mgrid input:focus { border-color: var(--accent); outline: none; }
.mgrid .cell.pivot { border-color: var(--warn); color: var(--warn); }
.mgrid .cell.zero { color: var(--text-dim); opacity: .55; }
.mgrid .cell.free { border-style: dashed; }
.m-brackets { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin: 8px 8px; }
.m-brackets::before, .m-brackets::after { content: ""; width: 8px; height: 100%; min-height: 30px;
  border: 2px solid var(--text-dim); }
.m-brackets::before { border-right: none; border-radius: 4px 0 0 4px; }
.m-brackets::after { border-left: none; border-radius: 0 4px 4px 0; }

/* ---------- exercises ---------- */
details.ex { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; }
details.ex summary { padding: 10px 14px; cursor: pointer; list-style: none; }
details.ex summary::before { content: "▸ "; color: var(--accent); }
details.ex[open] summary::before { content: "▾ "; }
details.ex .ans { padding: 4px 16px 12px; color: var(--text-dim); border-top: 1px dashed var(--line); }

/* ---------- quiz ---------- */
.quiz-q { margin: 14px 0; }
.quiz-prompt { margin-bottom: 8px; }
.quiz-opts { display: grid; gap: 6px; }
.quiz-opt { display: flex; gap: 10px; align-items: baseline; text-align: left; background: #0a0d12;
  color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  cursor: pointer; font-size: 14px; }
.quiz-opt:hover:not(:disabled) { border-color: var(--accent); }
.quiz-opt:disabled { cursor: default; opacity: .75; }
.quiz-opt.correct { border-color: var(--good); color: var(--good); opacity: 1; background: rgba(47,213,122,.08); }
.quiz-opt.wrong { border-color: var(--bad); color: var(--bad); background: rgba(255,92,92,.06); }
.quiz-letter { font-family: var(--mono); font-size: 12px; color: var(--text-dim); min-width: 16px; }
.quiz-why { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--accent-2);
  background: var(--panel-2); border-radius: 0 8px 8px 0; color: var(--text-dim); font-size: 13.5px; }
.quiz-score { margin-top: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--warn); }

/* ---------- concept nav ---------- */
.concept-nav { display: flex; justify-content: space-between; margin: 26px 0 10px; }
.master-btn.done { border-color: var(--good); color: var(--good); }
.gate-box { border: 1px dashed var(--warn); border-radius: var(--radius); padding: 14px 18px;
  background: rgba(255,176,32,.06); margin: 20px 0; }
.gate-box h3 { margin: 0 0 6px; color: var(--warn); font-size: 14px; }

#footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px;
  border-top: 1px solid var(--line); color: var(--text-dim); font-size: 13px; }

@media (max-width: 900px) {
  #menu-toggle { display: block; }
  #sidebar { position: fixed; z-index: 40; left: 0; top: 57px; bottom: 0; background: var(--bg);
    transform: translateX(-100%); transition: transform .25s; }
  body.nav-open #sidebar { transform: none; }
  #main { padding: 16px; }
}

.incontext-card { border-left: 3px solid var(--accent-2); background: rgba(124,92,255,.05); }
.incontext-card h3 { color: var(--accent-2) !important; }

.cil { color: var(--accent); text-decoration: underline dotted var(--accent); text-underline-offset: 2px; }
.cil:hover { color: #fff; background: rgba(77,163,255,.15); border-radius: 3px; }

.cil-title { color: var(--accent); text-decoration: underline dotted var(--accent); text-underline-offset: 2px; }
.cil-num { font-size: 10.5px; color: var(--text-dim); font-family: var(--mono); margin-left: 2px; }
.cil:hover .cil-title { color: #fff; background: rgba(77,163,255,.15); border-radius: 3px; }