/* ===== Data Visualisation Study App - redesigned UI ===== */
/* Cohesive LIGHT theme by default; body.theme-dark for dark.
   Charts use --c-* chart-chrome vars (light panel + dark axes in light,
   dark panel + light axes in dark) so they blend with the page. */
:root{
  --bg:#f4f7fc; --bg2:#eef3fa; --panel:#ffffff; --panel2:#f1f5fb;
  --ink:#1c2734; --text:#37475a; --muted:#6b7a8c; --line:#e4eaf2;
  --strong:#111b27; --head:#2a4d86;
  --accent:#4361ee; --accent-soft:#eaeefe; --accent2:#0d9488; --gold:#b7791f; --pink:#db2777; --on-accent:#fff;
  --hover:rgba(67,97,238,.07); --zebra:rgba(20,40,80,.028);
  /* Ten chapter accent hues, one per chapter, used consistently for badges,
     pills, nav icons and lecture headers so a chapter is recognisable by
     colour alone. C1 and C2 reuse the existing brand blue/teal for
     continuity, C3-C10 are evenly spaced around the wheel from there. */
  --ch1:#4361ee; --ch2:#0d9488; --ch3:#7c3aed; --ch4:#e11d48; --ch5:#c2410c;
  --ch6:#b7791f; --ch7:#4d7c0f; --ch8:#047857; --ch9:#0e7490; --ch10:#4f46e5;
  --ch1-soft:#eaeefe; --ch2-soft:#e3f6f3; --ch3-soft:#f1eafe; --ch4-soft:#fde5ea;
  --ch5-soft:#fbe8dd; --ch6-soft:#faf0dc; --ch7-soft:#eef5df; --ch8-soft:#e2f6ee;
  --ch9-soft:#e1f2f5; --ch10-soft:#e9e8fd;
  /* chart chrome (light) */
  --c-surface:#f7faff; --c-panel:#eef3fb; --c-axis:#758598; --c-ink:#33445a; --c-grid:#e3eaf4; --c-stripe:#e3ecf7;
  --invert-surface:#111b27;
  --radius:16px;
  --sb:clamp(192px, 15.5vw, 234px);   /* fluid sidebar width */
  --shadow:0 1px 2px rgba(16,30,54,.04), 0 10px 26px rgba(16,30,54,.07);
  --shadow-sm:0 1px 2px rgba(16,30,54,.05);
}
body.theme-dark{
  --bg:#0b1622; --bg2:#0f1f2e; --panel:#13283b; --panel2:#16304a;
  --ink:#eef5fb; --text:#cfe0ee; --muted:#90a8bd; --line:#23425e;
  --strong:#ffffff; --invert-surface:#16283a; --head:#bcd6f5;
  --accent:#6c8cff; --accent-soft:rgba(108,140,255,.16); --accent2:#2dd4bf; --gold:#ffd166; --pink:#ff5d8f;
  --hover:rgba(108,140,255,.12); --zebra:rgba(255,255,255,.025);
  --c-surface:#0f1f2e; --c-panel:#13283b; --c-axis:#9bb8cc; --c-ink:#e7f0f7; --c-grid:#33506a; --c-stripe:#1d3b57;
  --shadow:0 8px 28px rgba(0,0,0,.35); --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  /* Lifted and desaturated-up so all ten still clear 4.5:1 against the dark
     panel, verified computationally, not eyeballed. */
  --ch1:#6c8cff; --ch2:#2dd4bf; --ch3:#a78bfa; --ch4:#fb7185; --ch5:#fb923c;
  --ch6:#ffd166; --ch7:#a3e635; --ch8:#34d399; --ch9:#22d3ee; --ch10:#818cf8;
  --ch1-soft:rgba(108,140,255,.14); --ch2-soft:rgba(45,212,191,.14); --ch3-soft:rgba(167,139,250,.14); --ch4-soft:rgba(251,113,133,.14);
  --ch5-soft:rgba(251,146,60,.14); --ch6-soft:rgba(255,209,102,.14); --ch7-soft:rgba(163,230,53,.14); --ch8-soft:rgba(52,211,153,.14);
  --ch9-soft:rgba(34,211,238,.14); --ch10-soft:rgba(129,140,248,.14);
}
*{box-sizing:border-box}
/* fluid root font: scales the whole UI with the viewport so it stays
   proportionate across Mac/Windows and different display-scaling settings */
html{font-size:clamp(12.5px, 0.62vw + 7.4px, 15.5px); -webkit-text-size-adjust:100%; text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
  min-height:100dvh;
}
a{color:var(--accent); text-decoration:none}
::selection{background:var(--accent-soft)}

/* ---- sidebar (floating, always-visible) ---- */
.sidebar{
  width:var(--sb); background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:16px 14px;
  position:fixed; top:14px; left:14px; bottom:14px; overflow-y:auto;
  box-shadow:var(--shadow); z-index:50;
}
.brand{display:flex;align-items:center;gap:11px;padding:4px 6px 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.brand .logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:transparent;box-shadow:none}
.brand .logo img{width:100%;height:100%;display:block;object-fit:contain}
.brand b{font-size:15px;letter-spacing:-.2px;color:var(--strong)}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
#nav{display:flex;flex-direction:column;gap:2px}
#nav a{color:var(--text);padding:9px 12px;border-radius:10px;font-weight:500;font-size:14px;display:flex;align-items:center;transition:background .12s,color .12s}
#nav a:hover{background:var(--hover);color:var(--ink)}
#nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:650}
.side-foot{margin-top:18px;padding:12px 6px 6px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);text-align:center}
.theme-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:9px 10px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer;transition:.12s}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
/* currentColor picks up the button's own text colour, which already tracks the
   light/dark theme variables, so the icon stays visible in both without any
   separate colour logic of its own. */
.theme-icon{flex:none}
.theme-icon-moon{opacity:0}
.theme-btn[aria-pressed="true"] .theme-icon-sun{opacity:0}
.theme-btn[aria-pressed="true"] .theme-icon-moon{opacity:1}

/* ---- main ---- */
h1{font-size:2rem;margin:0 0 8px;letter-spacing:-.7px;color:var(--strong);font-weight:800;line-height:1.15}
h2{font-size:1.3rem;margin:30px 0 12px;color:var(--strong);font-weight:700;letter-spacing:-.3px}
h3{margin:0 0 6px;color:var(--strong);font-weight:650}
.sub{color:var(--muted);font-size:1rem;margin:0 0 8px;line-height:1.5}
.badge{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.3px;margin-bottom:10px}
.section-title{border-left:3px solid var(--accent);padding-left:11px}

/* hero - soft accent banner (light) */
.hero{padding:30px 32px;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent-soft),var(--panel) 70%);box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:26px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(67,97,238,.12),transparent 70%)}
.hero h1{color:var(--strong);position:relative}
.hero .sub{color:var(--text);max-width:680px;position:relative}
.exam-banner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);margin:-10px 0 22px}
.exam-banner div{background:var(--panel);padding:14px 16px;min-width:0}
.exam-banner span{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:lowercase;margin-bottom:4px}
.exam-banner b{display:block;font-size:13px;line-height:1.35}
.source-note{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:20px}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.grid{display:grid;gap:16px}
.cards-grid{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.lecture-card{transition:transform .16s,box-shadow .16s,border-color .16s;position:relative}
.lecture-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}
.lecture-card h3{font-size:17px}
.lecture-card p{color:var(--muted);font-size:13px;margin:6px 0 10px}
.card-link{color:var(--accent);font-weight:700;font-size:13px}
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));margin-bottom:16px}
.stat-card{display:flex;flex-direction:column;gap:3px;transition:.15s}
.stat-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.stat-card strong{font-size:30px;line-height:1;color:var(--accent)}
.stat-card span{font-size:12px;color:var(--muted)}
.steps{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.steps .card{position:relative;padding-top:36px}
.step-n{position:absolute;top:14px;left:16px;width:26px;height:26px;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;display:grid;place-items:center;font-size:13px}
.steps b{display:block;margin-bottom:4px;color:var(--strong)}
.steps p{color:var(--muted);font-size:13px;margin:0}
.big-list{padding-left:20px}
.big-list li{margin:8px 0}

/* page head + chapter */
.page-head{margin-bottom:12px}
.lecture-jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.lecture-jump a{font-size:12px;background:var(--panel);border:1px solid var(--line);padding:5px 11px;border-radius:20px;color:var(--muted);transition:.12s}
.lecture-jump a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.lec-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:18px;box-shadow:var(--shadow-sm);scroll-margin-top:20px}
.lec-section h2{margin-top:0;color:var(--head)}
ul.pts{margin:0;padding-left:20px}
ul.pts li{margin:8px 0}
b{color:var(--strong);font-weight:650}
.callout{margin-top:14px;padding:12px 15px;border-radius:12px;font-size:14px}
.callout.key{background:rgba(183,121,31,.1);border:1px solid rgba(183,121,31,.32)}
.callout.tip{background:rgba(13,148,136,.09);border:1px solid rgba(13,148,136,.3)}
.page-foot{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* demos - blend with page (light surface in light mode) */
.demo-box{margin-top:16px;background:var(--c-surface);border:1px solid var(--line);border-radius:13px;padding:16px;position:relative;box-shadow:var(--shadow-sm)}
.demo-tag{position:absolute;top:-9px;left:16px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px;letter-spacing:.4px;box-shadow:var(--shadow-sm)}
.demo-note{color:var(--muted);font-size:12.5px;margin:12px 0 0;line-height:1.5}
.demo-controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:13px}
.demo-controls label{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
.demo-output{margin-top:11px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;min-height:20px;color:var(--text)}
.preatt-grid{display:flex;flex-wrap:wrap;gap:2px 6px;font-family:ui-monospace,Menlo,monospace;font-size:15px;color:var(--ink);max-width:560px}
.preatt-grid span{width:14px;text-align:center}
.spark-row{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:14px;color:var(--muted)}
.spark-tag{font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px}
.spark-tag.good{background:rgba(13,148,136,.16);color:var(--accent2)}
.spark-tag.bad{background:rgba(219,39,119,.16);color:var(--pink)}

/* buttons / pills */
.btn{background:var(--accent);color:#fff;border:none;padding:9px 16px;border-radius:10px;font-weight:650;font-size:14px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.12s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:default;filter:none;transform:none}
.btn-ghost{background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.chip{font-size:13px;padding:6px 12px}
.pill{display:inline-block;background:var(--accent-soft);border:1px solid transparent;color:var(--accent);border-radius:20px;padding:3px 10px;font-size:12px;margin:2px;font-weight:650}

/* lab */
.lab-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.lab-card h3{font-size:16px;color:var(--head)}
.lab-sub{color:var(--muted);font-size:13px;margin:2px 0 0}

/* quiz */
.quiz-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.shuffle-lbl{color:var(--muted);font-size:13px;display:flex;gap:6px;align-items:center;margin-left:6px}
.quiz-card .quiz-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:8px}
.quiz-q{font-size:1.25rem;margin:4px 0 16px;color:var(--strong);font-weight:700;line-height:1.4}
.quiz-opts{display:flex;flex-direction:column;gap:9px}
.opt{text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:12px 15px;border-radius:11px;cursor:pointer;font-size:14.5px;transition:.12s}
.opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.opt.correct{background:rgba(13,148,136,.14);border-color:var(--accent2);color:var(--strong)}
.opt.wrong{background:rgba(219,39,119,.12);border-color:var(--pink);color:var(--strong)}
.quiz-exp{margin-top:14px;font-size:14px;color:var(--text);max-height:0;overflow:hidden;transition:.2s}
.quiz-exp.show{max-height:320px;padding:13px 15px;background:var(--panel2);border:1px solid var(--line);border-radius:11px}
.quiz-nav{margin-top:16px;text-align:right}
.quiz-done{text-align:center;padding:36px}
.quiz-done h2{font-size:34px}
.type-pill{background:var(--panel2);color:var(--muted);border-color:var(--line)}
.result-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;background:conic-gradient(var(--accent) 0 var(--score),var(--panel2) var(--score));border:8px solid var(--accent-soft);font-size:27px;font-weight:800;color:var(--strong)}
.result-table{max-width:440px;margin:18px auto;text-align:left}
.result-table td:first-child{width:45%}
.quiz-done .page-foot{justify-content:center}
.opt:focus-visible,.btn:focus-visible,#nav a:focus-visible,.flashcard:focus-visible{outline:3px solid rgba(67,97,238,.35);outline-offset:2px}

/* flashcards (accent-gradient faces in both themes) */
.fc-stage{display:flex;flex-direction:column;align-items:center;margin-top:10px}
.flashcard{width:min(560px,92%);height:264px;perspective:1300px;cursor:pointer}
.fc-inner{display:block;position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.flashcard.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;text-align:center;box-shadow:var(--shadow);color:#fff}
.fc-front{background:linear-gradient(135deg,#4361ee,#5b6cf0)}
.fc-back{background:linear-gradient(135deg,#0d9488,#0ea5a4);transform:rotateY(180deg)}
.fc-label{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.8);font-weight:800;margin-bottom:14px}
.fc-text{font-size:24px;font-weight:750;color:#fff}
.fc-text.small{font-size:17px;font-weight:500;line-height:1.55;color:rgba(255,255,255,.96)}
.fc-hint{position:absolute;bottom:14px;font-size:11px;color:rgba(255,255,255,.7)}
.fc-controls{display:flex;gap:10px;margin-top:18px}
.fc-count{margin-top:12px;color:var(--muted);font-size:13px}

/* exam */
.exam-list{display:flex;flex-direction:column;gap:10px}
.exam-item{padding:0;overflow:hidden;transition:border-color .12s}
.exam-item:hover{border-color:var(--accent)}
.exam-q{padding:15px 18px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--strong)}
.exam-toggle{margin-left:auto;color:var(--accent);font-size:20px;font-weight:800}
.exam-a{max-height:0;overflow:hidden;transition:.25s;padding:0 18px;color:var(--text);font-size:14px;line-height:1.65}
.exam-item.open .exam-a{max-height:520px;padding:0 18px 16px}

/* cheat */
.cheat-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cheat h3{color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}
.cheat ul{margin:0;padding-left:18px}
.cheat li{margin:6px 0;font-size:13.5px}

/* rich content blocks */
.blk-p{margin:9px 0;color:var(--text)}
.blk-note{color:var(--muted);font-size:12.5px;font-style:italic;margin:8px 0;border-left:2px solid var(--line);padding-left:11px}
.sec-n{color:var(--accent);font-weight:800;margin-right:8px;font-variant-numeric:tabular-nums}

/* tables */
.table-wrap{overflow-x:auto;margin:13px 0;border-radius:12px;border:1px solid var(--line)}
table.dv-table{border-collapse:collapse;width:100%;font-size:13.5px}
.dv-table th{text-align:center;background:var(--panel2);color:var(--head);padding:9px 12px;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
.dv-table td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:top;color:var(--text);text-align:center}
.dv-table .cell-prose{text-align:left}
.dv-table td:first-child{font-weight:650;color:var(--strong);white-space:nowrap}
.dv-table tbody tr:nth-child(even){background:var(--zebra)}
.dv-table tbody tr:hover{background:var(--hover)}

/* definition boxes */
.defbox{margin:13px 0;border-radius:12px;padding:13px 16px;border:1px solid var(--line);border-left-width:3px}
.def-label{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:lowercase;padding:3px 9px;border-radius:8px;margin-bottom:8px;color:#fff}
.def-body{font-size:14px;line-height:1.6;color:var(--text)}
.defbox.def-def{background:rgba(67,97,238,.07);border-color:rgba(67,97,238,.35);border-left-color:#4361ee}
.def-def .def-label{background:#4361ee}
.defbox.def-key{background:rgba(183,121,31,.1);border-color:rgba(183,121,31,.32);border-left-color:#b7791f}
.def-key .def-label{background:#b7791f}
.defbox.def-rule{background:rgba(13,148,136,.08);border-color:rgba(13,148,136,.32);border-left-color:#0d9488}
.def-rule .def-label{background:#0d9488}
.defbox.def-ex{background:rgba(124,92,208,.09);border-color:rgba(124,92,208,.34);border-left-color:#7c5cd0}
.def-ex .def-label{background:#7c5cd0}
.defbox.def-formula{background:var(--panel2);border-left-color:#64748b}
.def-formula .def-label{background:#64748b}
.def-formula .def-body{font-family:ui-monospace,Menlo,monospace;font-size:13.5px}
.defbox.def-summary{background:linear-gradient(120deg,rgba(67,97,238,.1),rgba(13,148,136,.07));border-color:var(--accent);border-left-color:var(--accent)}
.def-summary .def-label{background:var(--accent)}

/* code blocks */
.code-block{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;overflow-x:auto;font-size:12.5px;line-height:1.5;margin:12px 0;font-family:ui-monospace,Menlo,monospace}

/* datatypes demo buttons */
.dt-prompt{font-size:15px;margin-bottom:10px;color:var(--text)}
.dt-count{color:var(--muted);font-size:12px}
button.btn.correct{background:var(--accent2);border-color:var(--accent2);color:#fff}
button.btn.wrong{background:var(--pink);border-color:var(--pink);color:#fff}

/* famous-viz gallery */
.fv-stage{display:flex;flex-direction:column;gap:8px}
.fv-img{width:100%;max-height:360px;object-fit:contain;background:#fbf7ee;border-radius:10px;border:1px solid var(--line)}
.fv-cap{font-size:13px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px;line-height:1.55}
.fv-why{margin:9px 0 0;font-size:12px;line-height:1.45;color:var(--muted);border-left:3px solid var(--accent);border-left:3px solid color-mix(in srgb,var(--accent) 45%, transparent);padding:8px 10px;background:var(--panel2);background:color-mix(in srgb,var(--accent2) 10%, transparent);border-radius:0 8px 8px 0}
.fv-why span{display:inline;font-weight:700;color:var(--strong);margin-right:6px}
.fv-thumbs{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.fv-thumb{width:68px;height:48px;object-fit:cover;border-radius:7px;border:2px solid transparent;cursor:pointer;opacity:.55;background:#fbf7ee;transition:.15s}
.fv-thumb:hover{opacity:1}
.fv-thumb.active{border-color:var(--accent);opacity:1}
.fv-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fv-thumb-img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block}
.section-figure-gallery{margin:18px 0 0}
.section-figure-gallery h3{margin:0 0 8px;font-size:.95rem;color:var(--head)}
.section-figure-gallery .fv-stage{max-width:100%}
.section-figure-gallery .fv-cap{min-height:38px}
.section-figure-gallery .fv-cap:empty{display:none}

/* figure (inline annotated image) */
.fig{margin:14px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.fig-img{display:block;width:100%;max-height:440px;object-fit:contain;background:#fbf7ee}
.fig-cap{font-size:12.5px;color:var(--muted);padding:10px 13px;line-height:1.55}
.fig-credit{color:var(--accent2);font-style:italic}

/* visual variables grid */
.vv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:8px}
.vv-card{background:var(--c-panel);border:1px solid var(--line);border-radius:9px;padding:7px 7px 3px}
.vv-h{font-size:11px;color:var(--head);margin-bottom:2px;display:flex;justify-content:space-between;align-items:center;gap:4px}
.vv-tag{font-size:8px;padding:1px 5px;border-radius:8px;font-weight:700;letter-spacing:.5px}
.vv-tag.q{background:rgba(67,97,238,.18);color:var(--accent)}
.vv-tag.c{background:rgba(183,121,31,.2);color:var(--gold)}

/* colour-scale families */
.cs-row{margin:11px 0}
.cs-name{font-weight:700;color:var(--head);font-size:13px;margin-bottom:4px}
.cs-use{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}

/* flow diagrams */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:7px;margin:13px 0}
.flow-col{flex-direction:column;align-items:flex-start}
.flow-step{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 14px;display:flex;flex-direction:column;min-width:98px;box-shadow:var(--shadow-sm)}
.flow-step b{color:var(--strong);font-size:13.5px}
.flow-step span{color:var(--muted);font-size:11px;margin-top:2px}
.flow-arrow{display:flex;align-items:center;color:var(--accent);font-weight:800;font-size:18px}
.flow-col .flow-arrow{padding-left:36px;font-size:15px}
.workflow-strip{counter-reset:wf}
.workflow-strip .flow-step{padding:0;min-width:130px;transition:border-color .15s,transform .15s}
.workflow-strip .flow-step:hover{border-color:var(--accent);transform:translateY(-1px)}
.workflow-strip .flow-step a{display:flex;flex-direction:column;padding:9px 14px 9px 30px;text-decoration:none;position:relative;height:100%}
.workflow-strip .flow-step a::before{counter-increment:wf;content:counter(wf);position:absolute;left:10px;top:10px;color:var(--accent);font-weight:800;font-size:11px}

/* chart-type reference zoo */
.zoo-group{margin:10px 0 5px;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:var(--accent);text-transform:lowercase}
.zoo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.zoo-card{background:var(--c-panel);border:1px solid var(--line);border-radius:10px;padding:9px}
.zoo-name{font-size:12.5px;font-weight:700;color:var(--ink)}
.zoo-use{font-size:10.5px;color:var(--muted);margin-top:1px;line-height:1.35}

/* svg text default */
svg text{font-family:inherit}

/* ---- embedded visual learning system ---- */
.visual-shell{margin:18px 0 4px;border:1px solid var(--line);border-radius:14px;background:var(--c-surface);overflow:hidden;box-shadow:var(--shadow-sm)}
.visual-head{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--line);background:var(--panel2)}
.visual-head span{font-size:9px;letter-spacing:1px;font-weight:800;color:var(--accent)}
.visual-head b{font-size:12px;color:var(--strong)}
.visual-stage{padding:18px;min-height:150px;color:var(--text);position:relative;width:100%;box-sizing:border-box;max-width:100%;overflow-x:auto;overflow-y:hidden}
.visual-stage button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer;transition:.16s}
.visual-stage button:hover,.visual-stage button.active,.visual-stage button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--strong)}
.visual-stage small{display:block;color:var(--muted);font-size:10.5px;line-height:1.35}
.d3-timeline-chart{width:100%}
.d3-timeline-chart svg{display:block;max-width:100%}
.visual-detail{min-height:38px;margin-top:13px;padding:9px 12px;border-left:3px solid var(--accent);background:var(--panel);color:var(--text);font-size:12px;border-radius:0 8px 8px 0}
.visual-index{display:flex;flex-direction:column;gap:10px;margin:0 0 26px}
.visual-index-group{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.visual-index-group summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;font-weight:700}
.visual-index-group summary::-webkit-details-marker{display:none}
.visual-index-group summary:hover{background:var(--hover)}
.visual-index-group summary span{font-size:.7rem;font-weight:800;color:var(--accent);letter-spacing:.04em;flex:none}
.visual-index-group summary b{flex:1;font-size:.95rem;color:var(--strong)}
.visual-index-group summary small{color:var(--muted);font-weight:600;font-size:.78rem;flex:none}
.visual-index-group summary::after{content:"▾";margin-left:2px;font-size:.8rem;color:var(--muted);transition:transform .15s ease;flex:none}
.visual-index-group[open] summary::after{transform:rotate(180deg)}
.visual-index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding:0 18px 18px}
.visual-index-grid a{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;font-size:12px;color:var(--text)}
.visual-index-grid a:hover{border-color:var(--accent);color:var(--accent)}
.visual-lab-section{scroll-margin-top:18px;margin:0 0 26px}
.visual-lab-section>h2{display:flex;align-items:center;gap:9px;margin-bottom:8px}

/* W7 timeline visuals */
.task-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}
.task-strip span{padding:9px 11px;background:var(--panel);border-left:3px solid var(--accent);border-radius:8px}.task-strip b{font-size:12px}.task-strip small{margin-top:2px}
.timeline-main{height:clamp(150px,28vw,180px);position:relative;margin:6px clamp(4px,2vw,24px) 0}
.time-axis{position:absolute;left:0;right:0;top:50%;border-top:2px solid var(--c-axis)}
.time-axis i{position:absolute;transform:translateX(-50%);top:8px;font-size:10px;color:var(--muted);font-style:normal}.time-axis i::before{content:"";position:absolute;left:50%;top:-11px;height:7px;border-left:1px solid var(--c-axis)}
.event-point{position:absolute;top:50%;transform:translate(-50%,-50%);padding:0!important;border:0!important;background:transparent!important;text-align:center}.event-point>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800}.event-point small{white-space:nowrap;margin-top:5px}
.event-interval{position:absolute;top:8px;height:27px;padding:3px 8px!important;background:var(--panel2)!important;background:color-mix(in srgb,var(--accent2) 22%,var(--panel))!important;border-color:var(--accent2)!important;font-size:10px;white-space:nowrap;overflow:hidden}.event-interval.lower{top:78%;background:var(--panel2)!important;background:color-mix(in srgb,var(--gold) 22%,var(--panel))!important;border-color:var(--gold)!important}
.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.format-grid>div,.map-type-grid>div,.encoding-grid>div,.contrast-grid>div{padding:11px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-align:center}.format-grid b{font-size:11px}.mini-horizontal,.mini-points{height:52px;margin:8px;position:relative;border-top:2px solid var(--c-axis);top:23px}.mini-horizontal i,.mini-points i{position:absolute;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--accent)}.mini-horizontal i:nth-child(1),.mini-points i:nth-child(1){left:5%}.mini-horizontal i:nth-child(2),.mini-points i:nth-child(2){left:45%}.mini-horizontal i:nth-child(3),.mini-points i:nth-child(3){left:87%}.mini-vertical{height:62px;width:2px;background:var(--c-axis);position:relative;margin:8px auto}.mini-vertical i{position:absolute;left:-5px;width:11px;height:11px;border-radius:50%;background:var(--accent)}.mini-vertical i:nth-child(1){top:0}.mini-vertical i:nth-child(2){top:25px}.mini-vertical i:nth-child(3){top:50px}.mini-intervals{height:62px;margin:8px;display:flex;flex-direction:column;gap:6px;justify-content:center}.mini-intervals i{height:8px;background:var(--accent);border-radius:5px}.mini-intervals i:nth-child(2){width:55%;margin-left:28%}.mini-intervals i:nth-child(3){width:38%;margin-left:55%}
.spacing-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.spacing-compare>div{padding:12px;background:var(--panel);border-radius:10px}.spacing-line{height:52px;border-top:2px solid var(--c-axis);margin:25px 8px 0;position:relative}.spacing-line i{position:absolute;top:-22px;transform:translateX(-50%);font-size:10px;font-style:normal}.spacing-line i::after{content:"";display:block;height:12px;border-left:2px solid var(--accent);margin:4px auto}.spacing-line.honest i:nth-child(1){left:0}.spacing-line.honest i:nth-child(2){left:33%}.spacing-line.honest i:nth-child(3){left:66%}.spacing-line.honest i:nth-child(4){left:100%}.spacing-line.warped i:nth-child(1){left:0}.spacing-line.warped i:nth-child(2){left:10%}.spacing-line.warped i:nth-child(3){left:76%}.spacing-line.warped i:nth-child(4){left:100%}.encoding-key{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:11px}.encoding-key span{display:flex;align-items:center;gap:5px}.swatch{width:10px;height:10px;border-radius:3px}.category-a{background:var(--accent)}.category-b{background:var(--accent2)}.category-c{background:var(--gold)}
.matrix{height:clamp(200px,40vw,230px);position:relative;margin:6px clamp(10px,2.5vw,34px) 22px;border-left:2px solid var(--c-axis);border-bottom:2px solid var(--c-axis);background-image:linear-gradient(var(--c-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-grid) 1px,transparent 1px);background-size:25% 25%}.matrix button{position:absolute;transform:translate(-50%,-50%);font-size:11px}.matrix .mx-y{position:absolute;left:-35px;top:0;font-size:10px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg)}.matrix .mx-x{position:absolute;right:0;bottom:-24px;font-size:10px;color:var(--muted)}
.vflow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}.vf-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}.vf-step b{font-size:11px}.vf-arrow{display:grid;place-items:center;color:var(--accent);font-weight:800}.architecture-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:14px}.architecture-grid>div{padding:13px;background:var(--panel);border-radius:10px}.stack-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0}.stack-flow span{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);font-size:10px}.stack-flow i{color:var(--accent);font-style:normal}.interaction-controls,.mode-tabs,.accuracy-buttons{display:flex;gap:7px;flex-wrap:wrap}.event-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.event-row button{display:flex;align-items:center;gap:6px}.event-row .dot{width:10px;height:10px;border-radius:50%}

/* W8 and W9 map visuals */
.gis-system{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:center}
.gis-system .big-arrow{justify-self:center}
.gis-core{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:14px;border:2px solid var(--accent);border-radius:16px;text-align:center;aspect-ratio:1.5;align-content:center;background:var(--accent-soft)}.gis-core b{grid-column:1/-1}.gis-core span{font-size:10px}
.geo-data,.map-output{padding:12px;background:var(--panel);border-radius:10px;text-align:center}.big-arrow{font-size:24px;color:var(--accent)}
.schematic-map{height:105px;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel2);border-radius:8px;margin:8px 0}.schematic-map .land{position:absolute;background:var(--accent-soft);background:color-mix(in srgb,var(--accent2) 25%,var(--panel));border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--accent2) 55%,var(--line))}.land-a{left:10%;top:18%;width:37%;height:45%;clip-path:polygon(10% 0,100% 15%,83% 100%,0 75%)}.land-b{right:7%;top:8%;width:39%;height:38%;clip-path:polygon(20% 0,100% 18%,76% 100%,0 78%)}.land-c{right:17%;bottom:8%;width:30%;height:31%;clip-path:polygon(5% 20%,87% 0,100% 90%,18% 100%)}.river{position:absolute;left:49%;top:0;height:110%;border-left:4px solid var(--accent);border-left:4px solid color-mix(in srgb,var(--accent) 55%,var(--panel));transform:rotate(12deg)}.road{position:absolute;left:5%;right:5%;top:60%;border-top:2px dashed var(--gold);transform:rotate(-8deg)}.city{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px var(--pink);box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 20%,transparent)}.city.c1{left:25%;top:35%}.city.c2{right:22%;bottom:24%}.schematic-map.thematic .road,.schematic-map.thematic .river{opacity:.18}.schematic-map.thematic .land-b{background:var(--accent);background:color-mix(in srgb,var(--accent) 62%,var(--panel))}.schematic-map.thematic .land-a{background:var(--accent-soft);background:color-mix(in srgb,var(--accent) 28%,var(--panel))}.schematic-map.thematic .land-c{background:var(--accent-soft);background:color-mix(in srgb,var(--accent) 45%,var(--panel))}
.visual-lead{margin:0 0 12px;font-size:12px;color:var(--muted)}.map-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.time-map-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px}.time-map-row>span,.time-map-row>button{display:flex;align-items:center;gap:4px;font-size:10px;font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;transition:.16s}.time-map-row>button:hover,.time-map-row>button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--strong)}.time-map{width:40px;height:30px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;position:relative}.time-map::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);left:8px;top:9px}.time-map.t2::after{width:17px;height:17px}.time-map.t3::after{width:21px;height:21px}.time-map.animated::after{transform:translateX(13px)}
.anatomy-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1.3fr));gap:16px}.anatomy-map{height:clamp(160px,30vw,220px);border:6px solid var(--c-axis);background:var(--panel2);position:relative;display:grid;place-items:center}.focus-shape{width:48%;height:48%;display:grid;place-items:center;text-align:center;background:var(--accent);color:var(--on-accent);clip-path:polygon(10% 8%,90% 0,100% 74%,61% 100%,0 77%);font-weight:800}.ground-label{position:absolute;left:10px;top:8px;font-size:10px;color:var(--muted)}.frame-label{position:absolute;right:4px;bottom:-24px;font-size:10px;color:var(--muted)}.anatomy-key{display:flex;flex-direction:column;gap:9px;justify-content:center}.anatomy-key span{display:grid;grid-template-columns:16px auto;gap:0 8px;font-size:11px}.anatomy-key i{grid-row:1/3;width:16px;height:16px}.key-figure{background:var(--accent)}.key-ground{background:var(--panel2);border:1px solid var(--line)}.key-frame{border:4px solid var(--c-axis)}
.annotated-map{height:clamp(180px,40vw,285px);position:relative;padding:clamp(16px,3vw,33px) clamp(18px,8vw,80px) clamp(26px,6vw,45px) clamp(12px,2.5vw,18px);background:var(--panel);border:1px solid var(--line)}.annotated-map .schematic-map{height:100%;margin:0}.map-title-label{position:absolute;left:18px;top:8px;font-weight:700;color:var(--strong)}.legend-box{position:absolute;right:10px;top:48px;padding:7px;background:var(--panel2);border:1px solid var(--line);font-size:9px}.north-arrow{position:absolute;right:12px;top:9px;text-align:center;font-size:10px}.scale-bar{position:absolute;bottom:12px;left:24px;font-size:9px}.cm-scale,.scale-bar{padding-bottom:3px;border-bottom:3px solid var(--strong)}.place-label{position:absolute;font-size:9px;background:var(--panel);padding:1px 4px}.place-label.p1{left:27%;top:44%}.place-label.p2{right:28%;bottom:29%}.element-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}.element-strip span{font-size:9px;padding:5px;background:var(--panel2);text-align:center}
.range-label{display:flex;align-items:center;gap:10px;font-size:11px}.range-label input{flex:1}.hierarchy-map{height:clamp(160px,35vw,205px);position:relative;margin-top:12px}.hierarchy-map>.schematic-map{height:100%;opacity:.45}.theme-layer{position:absolute;left:32%;top:35%;padding:14px;background:var(--accent);color:var(--on-accent);font-weight:800;border-radius:50%;opacity:var(--focus-opacity);transform:scale(var(--focus-scale))}.support-layer{position:absolute;right:12%;bottom:15%;font-size:10px;color:var(--muted)}
.variable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.variable-grid>div{padding:9px;background:var(--panel);border-radius:8px}.variable-grid b{font-size:10px}.variable-grid span{height:45px;display:flex;align-items:center;justify-content:center;gap:9px}.variable-grid i{display:block}.sizes i{border-radius:50%;background:var(--accent)}.sizes i:nth-child(1){width:8px;height:8px}.sizes i:nth-child(2){width:17px;height:17px}.sizes i:nth-child(3){width:28px;height:28px}.values i{width:28px;height:28px;background:var(--accent)}.values i:nth-child(1){opacity:.2}.values i:nth-child(2){opacity:.55}.textures i{width:28px;height:28px;background:repeating-linear-gradient(45deg,var(--accent) 0 2px,transparent 2px 6px)}.textures i:nth-child(2){background-size:5px 5px}.textures i:nth-child(3){background-size:2px 2px}.hues i{width:24px;height:24px;border-radius:4px}.hues i:nth-child(1){background:var(--accent)}.hues i:nth-child(2){background:var(--accent2)}.hues i:nth-child(3){background:var(--gold)}.orient i{width:3px;height:30px;background:var(--accent)}.orient i:nth-child(1){transform:rotate(0)}.orient i:nth-child(2){transform:rotate(45deg)}.orient i:nth-child(3){transform:rotate(90deg)}.shapes i{width:24px;height:24px;background:var(--accent)}.shapes i:nth-child(1){border-radius:50%}.shapes i:nth-child(2){clip-path:polygon(50% 0,100% 100%,0 100%)}.shapes i:nth-child(3){transform:rotate(45deg) scale(.7)}
.encoding-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.encoding-grid>div{display:flex;flex-direction:column;justify-content:space-between}.qual-symbols,.prop-symbols,.choro-ramp{min-height:80px;display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0}.qual-symbols i{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;font-style:normal;color:var(--on-accent)}.qual-symbols i:nth-child(1){background:var(--accent)}.qual-symbols i:nth-child(2){background:var(--accent2);border-radius:4px}.qual-symbols i:nth-child(3){background:var(--gold);clip-path:polygon(50% 0,100% 100%,0 100%)}.prop-symbols i{display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);background:color-mix(in srgb,var(--accent) 25%,var(--panel));border:2px solid var(--accent);font-style:normal;font-size:8px}.prop-symbols i:nth-child(1){width:24px;height:24px}.prop-symbols i:nth-child(2){width:42px;height:42px}.prop-symbols i:nth-child(3){width:66px;height:66px}.choro-ramp{gap:2px}.choro-ramp i{height:58px;flex:1;display:grid;place-items:center;font-size:8px;font-style:normal;background:var(--accent);color:var(--on-accent)}.choro-ramp i:nth-child(1){opacity:.2}.choro-ramp i:nth-child(2){opacity:.4}.choro-ramp i:nth-child(3){opacity:.65}
.cosmetic-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1.4fr));gap:12px}
.cosmetic-map{height:clamp(190px,35vw,240px);position:relative;padding:clamp(14px,3.5vw,30px) clamp(18px,7vw,76px) clamp(24px,6vw,50px) 12px;background:var(--panel);border:4px solid var(--c-axis)}.cosmetic-map .schematic-map{height:100%;margin:0}.cm-title{position:absolute;left:12px;top:6px;font-weight:700;font-size:11px}.cm-north{position:absolute;right:18px;top:8px}.cm-legend{position:absolute;right:8px;top:55px;font-size:9px}.cm-scale{position:absolute;left:20px;bottom:20px;font-size:8px}.cm-meta{position:absolute;right:7px;bottom:6px;font-size:7px;text-align:right}.checklist{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:center}.checklist button{font-size:9px;text-align:left}.checklist button[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.weak-map,.strong-map{height:170px;position:relative}.weak-map .schematic-map,.strong-map .schematic-map{height:100%}.weak-map>span:not(.schematic-map){position:absolute;font-weight:800;color:var(--pink)}.weak-map>span:nth-of-type(1){left:8%;top:22%}.weak-map>span:nth-of-type(2){right:12%;top:47%}.weak-map>span:nth-of-type(3){left:25%;bottom:12%}.primary-mark{position:absolute;left:30%;top:34%;padding:12px;background:var(--accent);color:var(--on-accent);font-weight:800;border-radius:50%}.secondary-mark{position:absolute;right:13%;bottom:15%;color:var(--muted);font-size:9px}
.mode-stage{height:clamp(150px,30vw,190px);position:relative;margin-top:10px}.mode-stage .schematic-map{height:100%}.mode-dot{position:absolute;left:28%;top:38%;width:30px;height:30px;border-radius:50%;background:var(--accent);transition:transform .5s}.mode-stage.dynamic .mode-dot{transform:translate(clamp(8px,48%,150px),40px) scale(1.35)}.mode-stage.filtered .mode-dot{background:var(--accent2);transform:translate(clamp(4px,28%,90px),5px)}.mode-action{margin-top:9px}.json-tree{display:flex;flex-direction:column;align-items:flex-start;background:var(--panel2);padding:12px;border-radius:10px;font-family:ui-monospace,Menlo,monospace;font-size:11px}.json-tree button{border:0;background:transparent;padding:4px 6px;text-align:left}.json-tree .indent{margin-left:18px}.json-tree .indent2{margin-left:38px}.json-tree .indent3{margin-left:60px}
.projection-flow{display:grid;grid-template-columns:minmax(110px,120px) minmax(130px,150px) minmax(0,1fr);gap:14px;align-items:center}
.globe{width:112px;height:112px;border:2px solid var(--accent);border-radius:50%;position:relative;overflow:hidden;background:radial-gradient(circle at 35% 30%,var(--accent-soft),var(--panel2))}
.globe::before,.globe::after,.globe i{content:"";position:absolute;border:1px solid var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:50%}
.globe::before{inset:18px -18px}
.globe::after{inset:-18px 20px}
.globe i:nth-child(1){left:0;right:0;top:33%;height:1px}
.globe i:nth-child(2){left:0;right:0;top:66%;height:1px}
.globe i:nth-child(3){top:0;bottom:0;left:50%;width:1px}
.projection-arrow{text-align:center}
.projection-arrow b{font-size:10px}
.projection-arrow i{display:block;font-size:28px;color:var(--accent);font-style:normal}
.flat-map{text-align:center}
.world-map svg,.workflow-map svg{display:block;width:100%;height:auto}
.world-map .country,.workflow-map .country{fill:var(--panel2);stroke:var(--c-axis);stroke-width:.35}
.world-map .malaysia,.workflow-map .malaysia{fill:var(--accent);stroke:var(--strong);stroke-width:1}
.map-fallback{padding:14px;background:var(--panel2);color:var(--muted);font-size:11px}
.workflow-map{width:100%;max-width:100%;margin:8px auto 0;aspect-ratio:2.8/1;overflow:hidden}
.workflow-layout{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:min(var(--content-max-width, 100%), 100%);
  margin-left:auto;
  margin-right:auto;
}
.workflow-flow-root{
  width:100%;
  max-width:100%;
  position:relative;
  margin:0;
  padding:0;
  box-sizing:border-box;
  isolation:isolate;
  aspect-ratio:2.6/1;
  overflow:hidden;
}
.workflow-flow{
  width:100%;
  height:100%;
  position:relative;
  display:block;
  max-width:100%;
  max-height:100%;
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
}
.workflow-flow-svg{width:100%;height:100%;display:block}
.workflow-flow-node{transition:fill .2s,opacity .2s}
.workflow-flow-node:focus-visible{outline:3px solid var(--accent);outline:3px solid color-mix(in srgb,var(--accent) 70%, white);outline-offset:2px}
.workflow-node-card{fill:var(--panel2);stroke:var(--line);stroke-width:1.2}
.workflow-node-title{fill:var(--strong);font-size:11px;font-weight:700;text-anchor:middle}
.workflow-node-sub{fill:var(--muted);font-size:9px;text-anchor:middle}
.workflow-flow-link{fill:none;stroke:var(--accent);stroke-width:3;opacity:.75;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke}
.workflow-flow-link marker{fill:var(--accent)}
.workflow-flow-node .workflow-node-card,.workflow-flow-node .workflow-node-title,.workflow-flow-node .workflow-node-sub{cursor:pointer}
.workflow-flow-node .workflow-node-card{transition:all .2s ease}
.workflow-flow-node:hover .workflow-node-card{fill:var(--panel2);fill:color-mix(in srgb,var(--accent) 16%, var(--panel2))}
.workflow-flow-node[aria-pressed="true"] .workflow-node-card{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}
.workflow-flow-node[aria-pressed="true"] .workflow-node-title{fill:var(--accent)}


/* W10 evaluation visuals */
.cycle-flow{display:flex;align-items:stretch;justify-content:center;gap:5px;position:relative;padding-bottom:32px}.cycle-flow span{flex:1;padding:9px;background:var(--panel);border-top:3px solid var(--accent);text-align:center;border-radius:7px}.cycle-flow i{display:grid;place-items:center;color:var(--accent);font-style:normal}.cycle-flow .cycle-back{position:absolute;right:3%;bottom:0;width:94%;height:25px;border-bottom:2px solid var(--accent);font-size:22px;display:block;text-align:left}
.nested-stack{display:flex;flex-direction:column;align-items:center;gap:5px}.nested-stack button{width:calc(100% - var(--depth)*12%);display:flex;justify-content:space-between;align-items:center;text-align:left;border-left:5px solid var(--accent);border-left:5px solid color-mix(in srgb,var(--accent) calc(100% - var(--depth)*18%),var(--accent2))}.nested-stack small{display:inline}.threat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.threat-grid>div{display:flex;flex-direction:column;padding:10px;background:var(--panel);border-top:3px solid var(--accent);border-radius:8px}.threat-grid b{font-size:10px}.threat-grid span{font-size:11px;margin-top:7px}.threat-grid i{color:var(--accent);font-style:normal}.threat-grid small{margin-top:auto}
.criteria-venn{display:flex;justify-content:center;align-items:center;min-height:230px;position:relative}.criterion{width:175px;height:175px;border-radius:50%;display:flex;flex-direction:column;align-items:center;padding-top:38px;background:var(--accent-soft);background:color-mix(in srgb,var(--accent) 24%,transparent);border:2px solid var(--accent);text-align:center}.criterion.engaging{margin-left:-45px;background:var(--panel2);background:color-mix(in srgb,var(--accent2) 24%,transparent);border-color:var(--accent2)}.criterion.clear{margin-left:-45px;background:var(--panel2);background:color-mix(in srgb,var(--gold) 24%,transparent);border-color:var(--gold)}.quality-center{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);text-align:center;font-size:10px;font-weight:800;color:var(--strong)}.criteria-cases{display:flex;justify-content:center;gap:10px}.criteria-cases span{padding:7px 10px;background:var(--panel);font-size:9px;text-align:center}
.measure-axis{padding:16px 30px 48px;position:relative}.measure-axis>div{height:8px;background:linear-gradient(90deg,var(--accent2),var(--gold),var(--pink));position:relative;border-radius:8px;margin-top:22px}.measure-axis .easy,.measure-axis .hard{position:absolute;top:0;font-size:9px;color:var(--muted)}.measure-axis .easy{left:30px}.measure-axis .hard{right:30px}.measure-axis i{position:absolute;top:-8px;transform:translateX(-50%);width:64px;text-align:center;font-style:normal}.measure-axis i::before{content:"";display:block;width:18px;height:18px;border-radius:50%;background:var(--panel);border:4px solid var(--accent);margin:auto}.measure-axis i b{display:block;font-size:9px}.equation-cards{display:flex;align-items:center;justify-content:center;gap:12px}.equation-cards span{padding:10px;background:var(--panel);border-radius:8px;font-size:10px}.equation-cards i{font-style:normal;font-size:22px;color:var(--pink)}
.test-simulator>label{display:flex;align-items:center;gap:10px;font-size:10px}.test-simulator>label input{flex:1}.test-quadrant{height:235px;position:relative;margin-top:12px;border-left:2px solid var(--c-axis);border-bottom:2px solid var(--c-axis);background:linear-gradient(90deg,transparent 49.8%,var(--c-grid) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,var(--c-grid) 50%,transparent 50.2%)}.test-quadrant span{position:absolute;font-size:9px;color:var(--muted)}.q-fast-good{left:8px;top:8px}.q-slow-good{right:8px;top:8px;text-align:right}.q-fast-bad{left:8px;bottom:8px}.q-slow-bad{right:8px;bottom:8px;text-align:right}.test-point{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--accent);border:4px solid var(--panel);box-shadow:0 0 0 2px var(--accent);transform:translate(-50%,-50%);transition:.2s}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.case-grid>div{padding:13px;background:var(--panel);border-top:4px solid var(--accent);border-radius:9px}.case-grid>div+div{border-top-color:var(--accent2)}.case-flow{display:flex;flex-direction:column;gap:3px;margin:10px 0}.case-flow span{padding:5px;background:var(--panel2);border-radius:5px;font-size:10px}.case-flow i{text-align:center;color:var(--accent);font-style:normal;transform:rotate(90deg)}

@media (prefers-reduced-motion:reduce){.visual-stage *{transition:none!important}}

/* exam countdown chip in sidebar */
.exam-chip{display:block;width:100%;text-align:left;margin:0 0 14px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:12px;padding:10px 13px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s}
.exam-chip:hover{transform:translateY(-1px);filter:brightness(1.05)}
.exam-chip .ec-top{font-size:10px;font-weight:800;letter-spacing:.5px;opacity:.9;text-transform:lowercase}
.exam-chip .ec-time{font-size:16px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.exam-chip .ec-loc{font-size:10.5px;opacity:.92;margin-top:2px}

/* hype welcome overlay */
.hype-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(12,20,36,.55);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);animation:hypeFade .4s ease}
.hype-overlay.closing{animation:hypeOut .4s ease forwards}
.hype-flash{position:fixed;inset:0;background:#fff;pointer-events:none;animation:hypeFlash .75s ease-out forwards}
.hype-card{position:relative;max-width:470px;width:100%;background:linear-gradient(160deg,#16304a,#0b1a29);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:32px 28px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.55);animation:hypePop .5s cubic-bezier(.2,.85,.25,1)}
.hype-kicker{font-size:12px;font-weight:800;letter-spacing:2px;color:#ffd166}
.hype-title{font-size:46px;font-weight:900;letter-spacing:-1px;margin:6px 0 2px;line-height:1;background:linear-gradient(90deg,#fff,#9fd6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hype-sub{color:#cfe0ee;font-size:15px}
.hype-meta{margin:13px 0 2px;font-size:14.5px;color:#fff;font-weight:600}
.hype-countdown{display:flex;justify-content:center;gap:8px;margin:18px 0 6px}
.cd-box{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 6px;min-width:64px}
.cd-num{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;color:#fff}
.cd-lbl{font-size:10px;letter-spacing:1px;color:#9fb6cc;margin-top:6px;text-transform:lowercase}
.hype-line{color:#cdd9e6;font-size:14px;line-height:1.65;margin:12px 6px 22px}
.hype-go{background:linear-gradient(135deg,#ff7b00,#ff006e);color:#fff;border:none;font-size:21px;font-weight:900;letter-spacing:.5px;padding:16px 34px;border-radius:14px;cursor:pointer;box-shadow:0 12px 34px rgba(255,0,110,.45);animation:hypePulse 1.5s ease-in-out infinite}
.hype-go:hover{filter:brightness(1.08);transform:scale(1.03)}
.hype-skip{display:block;margin:14px auto 0;background:none;border:none;color:#8fb0c6;font-size:12px;cursor:pointer}
.hype-skip:hover{color:#fff}
@keyframes hypeFade{from{opacity:0}to{opacity:1}}
@keyframes hypeOut{to{opacity:0;visibility:hidden}}
@keyframes hypeFlash{0%{opacity:.9}100%{opacity:0}}
@keyframes hypePop{from{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:none}}
@keyframes hypePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

@media (max-width:760px){
  .sidebar{position:static;width:auto;margin:10px 10px 0;bottom:auto;border-radius:14px;display:flex;flex-direction:column}
  #nav{flex-direction:row;flex-wrap:wrap}
  .hype-title{font-size:38px}
  .cd-box{min-width:54px}
  .exam-banner{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiz-card .quiz-meta{gap:10px;align-items:flex-start}
  .format-grid,.threat-grid{grid-template-columns:repeat(2,1fr)}
  .vflow{flex-wrap:wrap}.vf-step{min-width:120px}.vf-arrow{display:none}
  .gis-system{grid-template-columns:1fr 1fr}.gis-system .big-arrow{display:none}
  .projection-flow{grid-template-columns:100px 110px 1fr}.globe{width:92px;height:92px}
  .anatomy-layout,.cosmetic-layout{grid-template-columns:1fr}
  .mode-stage.dynamic .mode-dot{transform:translate(0px,40px) scale(1.24)}
  .mode-stage.filtered .mode-dot{transform:translate(0,5px)}
  .criterion{width:145px;height:145px}.criteria-venn{min-height:195px}
}
@media (max-width:430px){
  .exam-banner{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .flashcard{width:100%;height:290px}
  .fc-text{font-size:21px}
  .visual-stage{padding:13px}
  .task-strip,.spacing-compare,.architecture-grid,.map-type-grid,.anatomy-layout,.encoding-grid,.cosmetic-layout,.contrast-grid,.case-grid{grid-template-columns:1fr}
  .format-grid,.variable-grid,.threat-grid{grid-template-columns:1fr 1fr}
  .projection-flow{grid-template-columns:1fr;text-align:center}.globe{margin:auto}.projection-arrow i{transform:rotate(90deg)}
  .element-strip{grid-template-columns:1fr 1fr}
  .criteria-venn{transform:scale(.78);margin:-20px -60px}.criteria-cases{flex-direction:column}
  .cycle-flow{flex-wrap:wrap}.cycle-flow span{min-width:115px}.cycle-flow i:not(.cycle-back){display:none}
  .nested-stack button{width:100%}
}
@media print{
  .sidebar{display:none}
  body{background:#fff;color:#000}
  .card,.cheat,.lec-section{break-inside:avoid;box-shadow:none;border:1px solid #ccc;background:#fff;color:#000}
  .cheat h3{color:#000}
  .btn,.theme-btn{display:none}
}

/* ========================================================================== */
/* Premium learning product shell                                             */
/* ========================================================================== */
:root{
  --bg:#f4f6f3;--bg2:#eaf0ef;--panel:#ffffff;--panel2:#eef3f4;
  --ink:#102131;--text:#344657;--muted:#526274;--line:#d8e1e5;
  --strong:#07131f;--head:#173c5d;--accent:#3659e3;--accent-soft:#e8edff;
  --accent2:#0b8f83;--gold:#8a5a12;--pink:#bf2f61;--on-accent:#fff;
  --hover:rgba(54,89,227,.075);--zebra:rgba(15,41,64,.025);
  --c-surface:#f7fafb;--c-panel:#eef3f6;--c-axis:#617486;--c-ink:#253c51;--c-grid:#dfe8ed;--c-stripe:#dce7ed;
  --radius:14px;
  --sidebar-width:clamp(192px,15.5vw,234px);--sidebar-offset:14px;
  --content-sidebar-offset:calc(var(--sidebar-width) + var(--sidebar-offset));
  --content-gutter-x:clamp(14px,2.5vw,44px);
  --content-max-width:min(1180px,calc(100vw - var(--content-sidebar-offset) - (var(--content-gutter-x) * 2)));
  --sb:var(--sidebar-width);
  --shadow:0 20px 55px rgba(26,49,68,.09);--shadow-sm:0 6px 20px rgba(26,49,68,.065);
}
body.theme-dark{
  --bg:#07121d;--bg2:#0b1a28;--panel:#0e2130;--panel2:#132a3b;
  --ink:#eff7fb;--text:#d1e0ea;--muted:#9db2c0;--line:#244052;
  --strong:#fff;--head:#c4e0ef;--accent:#7892ff;--accent-soft:rgba(120,146,255,.16);
  --accent2:#38c8b4;--gold:#ffd477;--pink:#ff7aa5;--hover:rgba(120,146,255,.12);--zebra:rgba(255,255,255,.025);
  --c-surface:#0a1a27;--c-panel:#11283a;--c-axis:#9eb8c8;--c-ink:#edf7fb;--c-grid:#29485d;--c-stripe:#1a394e;
  --shadow:0 24px 65px rgba(0,0,0,.35);--shadow-sm:0 8px 24px rgba(0,0,0,.25);
}
html{font-size:16px;scroll-behavior:auto}
body{font-family:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.58;letter-spacing:-.005em}
button,input,select{font:inherit}
a,button,input{touch-action:manipulation}
:focus-visible{outline:3px solid var(--accent);outline:3px solid color-mix(in srgb,var(--accent) 72%,white);outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;z-index:3000;left:16px;top:12px;padding:12px 16px;background:var(--strong);color:var(--panel);border-radius:10px;transform:translateY(-160%)}
.skip-link:focus{transform:none}

.sidebar{width:var(--sidebar-width);top:0;bottom:0;left:var(--sidebar-offset);z-index:180;border:0;border-right:1px solid var(--line);border-radius:0;padding:24px 18px 18px;box-shadow:none;background:var(--panel);background:color-mix(in srgb,var(--panel) 96%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column}
.brand{padding:0 5px 20px;margin:0 0 18px;gap:12px;border-bottom:0;color:var(--text)}
.brand:hover{color:var(--text)}
.brand .logo{width:42px;height:42px;border-radius:12px;background:transparent;box-shadow:none}
.brand .logo img{width:100%;height:100%}
.brand b{font-size:15px;letter-spacing:-.35px}.brand small{font-size:10px;letter-spacing:.4px;text-transform:lowercase}
.exam-chip{cursor:default;text-align:left;margin:0 0 20px;padding:13px 14px;background:var(--accent-soft);color:var(--text);border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));box-shadow:none}
.exam-chip:hover{transform:none;filter:none}
.exam-chip>span{display:block;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:1px;text-transform:lowercase}
.exam-chip>b{display:block;color:var(--strong);font-size:17px;line-height:1.3;margin:3px 0}.exam-chip>small{color:var(--muted);font-size:10.5px}
#nav{display:block;overflow-y:auto;padding-right:12px;scrollbar-gutter:stable}
.nav-group{margin-bottom:18px}.nav-group h2{margin:0 0 6px;padding:0 10px;color:var(--muted);font-size:9px;text-transform:lowercase;letter-spacing:1.3px;font-weight:800}
.nav-group-collapsible{display:block}
.nav-group-collapsible summary{margin:0 0 6px;padding:9px 10px;min-height:42px;box-sizing:border-box;color:var(--muted);font-size:9px;text-transform:lowercase;letter-spacing:1.3px;font-weight:800;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:6px}
.nav-group-collapsible summary::-webkit-details-marker{display:none}
.nav-group-collapsible summary::after{content:"▾";font-size:10px;transition:transform .15s ease}
.nav-group-collapsible[open] summary::after{transform:rotate(180deg)}
.nav-group-collapsible summary:hover{color:var(--text)}
#nav a{min-height:42px;padding:8px 10px;gap:10px;border-radius:9px;font-size:12.5px;line-height:1.25}
#nav a.active{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.nav-icon{display:grid;place-items:center;flex:0 0 25px;height:25px;border:1px solid var(--line);border-radius:7px;font-size:9px;font-weight:800;color:var(--muted);background:var(--panel)}
.nav-icon--img{padding:0;border-color:transparent;background:transparent}
.nav-icon--img img{width:16px;height:16px;display:block;object-fit:contain}
#nav a.active .nav-icon{border-color:transparent;background:var(--accent);color:#fff}
/* The active chip is solid accent and these icons are line art with hardcoded
   #4361ee strokes, so without this they render blue on blue and disappear.
   color:#fff cannot reach inside an <img>, so invert the artwork to white. */
#nav a.active .nav-icon--img{background:var(--accent)}
#nav a.active .nav-icon--img img{filter:brightness(0) invert(1)}
.side-foot{margin-top:auto;padding:15px 4px 0;font-size:11px}.side-foot p{margin:0}.theme-btn{min-height:42px;margin-bottom:7px;text-align:center;padding:8px 12px;font-size:12px;background:transparent}
.mobile-header,.mobile-nav,.menu-scrim{display:none}

main#view{
  margin-left:var(--content-sidebar-offset);
  width:calc(100% - var(--content-sidebar-offset));
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
  padding:42px var(--content-gutter-x) 110px;
  box-sizing:border-box;
  position:relative;
  z-index:0;
}
main#view>*{width:min(1180px,100%);margin-left:auto;margin-right:auto}

.premium-head,
.page-head,
.section-heading,
.surface,
.lec-section,
.summary-band,
.cheat,
.source-grid>section,
.visual-lab-section,
.assessment-shell,
.lesson-stream,
.history-list,
.result-page,
.surface > * {
  max-width:var(--content-max-width, min(1180px, 100%));
}

.summary-band{
  width:100%;
  margin-left:0;
  margin-right:0;
}
h1{font-size:clamp(2.35rem,4vw,4.6rem);line-height:.98;letter-spacing:-.058em;font-weight:760}
h2{letter-spacing:-.035em}.eyebrow{display:block;color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:lowercase}
.premium-head{max-width:var(--content-max-width, min(1180px, 100%));margin:0 auto 22px}.premium-head h1{margin:9px 0 13px;font-size:clamp(2.4rem,4.5vw,4.4rem)}.premium-head>p{max-width:720px;color:var(--muted);font-size:1.05rem;margin:0}
.premium-head .eyebrow{margin-bottom:0.55rem}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border-radius:11px;font-size:.88rem;font-weight:750;letter-spacing:-.01em;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;box-shadow:none}
.btn:hover{transform:translateY(-2px)}.btn:disabled{transform:none;opacity:.45}
.btn-primary{background:var(--strong);color:#fff;border:1px solid var(--strong)}body.theme-dark .btn-primary{background:var(--accent);border-color:var(--accent)}
.btn-quiet{background:transparent;color:var(--text);border:1px solid var(--line)}.btn-quiet:hover{background:var(--panel);border-color:var(--accent);color:var(--accent)}
.btn-large{min-height:56px;padding:15px 26px;font-size:1rem}.text-action{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--accent);font-weight:750;cursor:pointer;padding:6px 0}

.command-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);min-height:470px;overflow:hidden;background:var(--invert-surface);border-radius:24px;color:#fff;margin-bottom:0;box-shadow:var(--shadow)}
.hero-copy{padding:clamp(36px,6vw,76px);position:relative;background-image:radial-gradient(circle at 75% 10%,rgba(120,146,255,.22),transparent 35%),linear-gradient(125deg,transparent 55%,rgba(56,200,180,.08))}
.hero-copy::after{content:"";position:absolute;right:8%;bottom:8%;width:180px;height:180px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 76px rgba(255,255,255,.015)}
.hero-copy .eyebrow{color:#9fb1ff}.hero-copy h1{position:relative;z-index:1;max-width:790px;color:#fff;margin:14px 0 24px}.hero-copy>p{position:relative;z-index:1;max-width:700px;color:#cad8e2;font-size:1.08rem}
.hero-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}.hero-copy .btn-primary{background:#fff;border-color:#fff;color:#0b1b29}.hero-copy .btn-quiet{border-color:rgba(255,255,255,.24);color:#fff}.hero-copy .btn-quiet:hover{background:rgba(255,255,255,.08)}
.evidence-line{position:relative;z-index:1;color:#9eb0bc;font-size:.75rem}.evidence-line b{color:#fff}.evidence-line span{padding:0 7px}
.next-action-panel{padding:clamp(28px,4vw,50px);display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(165deg,#405fe5,#1f3db8);border-left:1px solid rgba(255,255,255,.12)}
.next-action-panel>span{font-size:.65rem;text-transform:lowercase;letter-spacing:.13em;font-weight:800;color:#c8d2ff}.next-action-panel h2{font-size:1.75rem;line-height:1.1;color:#fff;margin:10px 0 13px}.next-action-panel p{font-size:.88rem;color:#dbe2ff}.next-action-panel .text-action{color:#fff;margin-top:12px}
.exam-ribbon{display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;margin-bottom:28px;overflow:hidden}
.exam-ribbon>div{padding:16px 20px;border-right:1px solid var(--line)}.exam-ribbon>div:last-child{border:0}.exam-ribbon span{display:block;font-size:.6rem;color:var(--muted);text-transform:lowercase;letter-spacing:.1em;font-weight:800}.exam-ribbon b{font-size:.78rem;color:var(--strong)}

.surface{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:18px;margin-bottom:18px}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.section-heading > div{min-width:0}
.section-heading > a{align-self:flex-end}
.section-heading h2,.surface>h2{font-size:1.5rem;margin:5px 0 0}
.section-heading h2{word-break:break-word;hyphens:auto}
.section-heading p{margin:4px 0 0;color:var(--muted);font-size:.88rem}
.surface-intel-controls{display:grid;grid-template-columns:1fr;gap:18px}
.intel-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.intel-controls label{display:flex;flex-direction:column;gap:8px;color:var(--text);font-size:.82rem;font-weight:700}
.intel-controls input.intel-search{height:42px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.intel-control-row{display:flex;flex-wrap:wrap;gap:8px}
.intel-control-row .btn{min-height:38px;padding:9px 12px}
.intel-controls .btn.btn-strong{background:var(--accent);border-color:var(--accent);color:#fff}
body.theme-dark .intel-controls .btn.btn-strong{background:var(--accent-soft);color:var(--strong)}
.intel-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.intel-matrix{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.intel-matrix-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:stretch}
.intel-week-label{display:grid;place-items:center;background:var(--c-surface);border:1px solid var(--line);border-radius:10px;font-size:.63rem;text-transform:lowercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.intel-matrix-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:9px}
.intel-matrix-cell{display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:flex-start;min-height:68px;padding:9px 10px 10px;border:1px solid var(--line);border-radius:10px;background:var(--c-surface);color:var(--text);text-align:left}
.intel-matrix-cell:hover{border-color:var(--accent);background:var(--accent-soft)}
.intel-matrix-cell.active{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.intel-matrix-cell span{display:block;font-size:.62rem;color:var(--muted);font-weight:700}
.intel-matrix-cell b{font-size:.87rem;line-height:1.1}
.intel-matrix-cell[data-density]{position:relative;overflow:hidden}
.intel-matrix-cell[data-density]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--accent) var(--density),var(--line) var(--density))}
.intel-topic-detail{font-size:.94rem}.intel-topic-detail p{margin:.2rem 0}
.intel-topic-detail .intel-detail-list{padding-left:18px;color:var(--muted);font-size:.84rem}
.intel-detail-list{margin:.4rem 0 1rem}
.intel-matrix-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.intel-matrix-head b{font-size:.84rem}
.intel-scenario-layout{display:grid;grid-template-columns:1fr;gap:14px}
.intel-scenario-option{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:52px;padding:11px 13px;text-align:left;color:var(--text);border:1px solid var(--line);border-radius:11px;background:var(--panel2)}
.intel-scenario-option:hover{border-color:var(--accent)}
.intel-scenario-option.active{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.intel-scenario-option span{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font-size:.67rem;font-weight:800}
.intel-scenario-option b{font-size:.84rem}
.intel-scenario-option[aria-pressed=\"true\"]{font-weight:700}
.intel-scenario-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 12px}
.intel-scenario-progress{font-size:.74rem;color:var(--muted)}
.intel-scenario-feedback{min-height:48px;display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0}
.intel-scenario-feedback strong{display:block;color:var(--strong);font-size:.83rem}
.intel-scenario-feedback{color:var(--muted);font-size:.82rem}
.intel-scenario-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.intel-scenario-table{overflow:auto;border-radius:12px;border:1px solid var(--line)}
.intel-scenario-table .dv-table{margin:0}
.intel-map-lab{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel2);padding:10px}
.knowledge-map{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}.knowledge-week{padding:0;margin:0}.knowledge-week h3{font-size:.65rem;color:var(--muted);letter-spacing:.1em;margin-bottom:8px}.knowledge-week>div{display:flex;flex-direction:column;gap:7px}
.knowledge-node{position:relative;display:flex;flex-direction:column;min-height:88px;padding:12px 12px 15px;border:1px solid var(--line);border-radius:11px;background:var(--c-surface);color:var(--text);overflow:hidden;transition:.18s}.knowledge-node:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--text)}.knowledge-node span{font-size:.72rem;font-weight:750}.knowledge-node b{font-size:.62rem;color:var(--muted);font-weight:600;margin-top:2px}.knowledge-node i{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--accent) var(--mastery),var(--line) var(--mastery))}
.readiness{display:flex;gap:16px;align-items:center;margin:16px 0 22px}.readiness-ring{flex:0 0 100px;width:100px;height:100px;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,var(--panel) 59%,transparent 61%),conic-gradient(var(--accent) var(--readiness),var(--line) 0);color:var(--strong)}.readiness-ring span{font-size:1.75rem;font-weight:800;line-height:1}.readiness-ring small{font-size:.56rem;color:var(--muted);text-transform:lowercase}.readiness>div:last-child b{font-size:.9rem}.readiness p{font-size:.74rem;color:var(--muted);margin:4px 0}
.week-progress{display:flex;flex-direction:column;gap:9px}.week-progress a{display:grid;grid-template-columns:28px 1fr 34px;align-items:center;gap:8px;font-size:.65rem;color:var(--text)}.week-progress div{height:4px;background:var(--line);border-radius:8px}.week-progress i{display:block;width:var(--value);height:100%;background:var(--accent);border-radius:inherit}.week-progress b{text-align:right;font-size:.62rem}
.analytics-tools{display:flex;justify-content:flex-start;align-items:center;gap:8px;margin-bottom:16px}
.analytics-window{display:inline-flex;gap:8px;flex-wrap:wrap}
.analytics-window .btn{min-height:36px;padding:10px 12px}
.analytics-window .btn.btn-strong{background:var(--strong);border-color:var(--strong);color:#fff}
body.theme-dark .analytics-window .btn.btn-strong{background:var(--accent);border-color:var(--accent)}
.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.analytics-metric-card{padding:15px 16px 16px;border:1px solid var(--line);border-radius:13px;background:var(--c-surface);display:flex;flex-direction:column;gap:4px}
.analytics-metric-card span{color:var(--muted);font-size:.66rem;text-transform:lowercase;letter-spacing:.12em;font-weight:800}
.analytics-metric-card b{font-size:1.55rem;line-height:1;display:block;color:var(--strong)}
.analytics-metric-card small{color:var(--muted);font-size:.7rem}
.analytics-bars,.analytics-topic-grid,.analytics-badges{display:flex;flex-direction:column;gap:8px}
.analytics-bars{margin-top:6px}
.analytics-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:8px;font-size:.83rem}
.analytics-row>span:first-child{font-weight:800}
.analytics-row>span:last-child{color:var(--muted);font-size:.76rem}
.analytics-bar{display:block;height:8px;background:var(--line);border-radius:999px;position:relative;overflow:hidden}
.analytics-bar i{display:block;width:var(--value);height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:inherit}
.analytics-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.analytics-topic{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.analytics-topic span{display:flex;flex-direction:column;gap:2px;min-width:0}
.analytics-topic b{color:var(--strong);font-size:.74rem;line-height:1.2}
.analytics-topic small{font-size:.64rem;color:var(--muted);margin-top:2px}
.analytics-topic i{font-size:.65rem;color:var(--muted)}
.analytics-topic .analytics-bar{width:min(160px,38vw)}
.analytics-topic.empty{opacity:.7;border-style:dashed}
.analytics-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.analytics-badges span{padding:12px;background:var(--c-surface);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:2px}
.analytics-badges b{font-size:.75rem;color:var(--strong)}
.analytics-list{padding-left:18px;color:var(--muted);font-size:.84rem;line-height:1.45}
.analytics-empty{margin:12px 0 2px;padding:12px;border-left:3px solid var(--pink);border-left:3px solid color-mix(in srgb,var(--pink) 60%,var(--line));background:var(--panel2);border-radius:0 8px 8px 0;color:var(--muted);font-size:.76rem}
.analytics-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.planner-surface{display:grid;grid-template-columns:minmax(250px,.55fr) 1fr;gap:35px;align-items:center}.time-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.time-choices button{min-height:92px;text-align:left;padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--c-surface);color:var(--text);cursor:pointer}.time-choices button:hover{border-color:var(--accent);background:var(--accent-soft)}.time-choices b,.time-choices span{display:block}.time-choices b{color:var(--strong)}.time-choices span{font-size:.68rem;color:var(--muted)}
.study-plan{display:flex;gap:22px;align-items:center}.plan-timeline{display:flex;flex:1;gap:8px}.plan-timeline>div{display:flex;align-items:center;gap:8px;flex:1}.plan-timeline>div>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:.7rem;font-weight:800}.plan-timeline p{margin:0}.plan-timeline b,.plan-timeline small{display:block}.plan-timeline b{font-size:.72rem}.plan-timeline small{font-size:.62rem;color:var(--muted)}
.plan-timeline>div:not(.current):not(.done){opacity:.55}.plan-timeline>div.done>span{background:var(--accent2)}.plan-route-banner{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;max-width:1180px!important;margin:0 auto 24px;padding:18px 20px;border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:15px;background:var(--accent-soft)}.plan-route-banner b{font-size:1rem}.plan-route-banner p{margin:2px 0 0;color:var(--muted);font-size:.78rem}

.lesson-progress,.assessment-progress{height:5px;background:var(--line);border-radius:8px;overflow:hidden}.lesson-progress i,.assessment-progress i{display:block;height:100%;width:var(--value);background:linear-gradient(90deg,var(--accent),var(--accent2))}.premium-head .lecture-jump{margin-top:22px}.lecture-jump a{min-height:34px;display:inline-flex;align-items:center;color:var(--text);font-size:.72rem}.lesson-stream{max-width:var(--content-max-width, min(1180px, 100%));margin-left:auto;margin-right:auto}.lec-section{padding:0;margin-bottom:26px;border:1px solid var(--line);border-radius:18px;box-shadow:none;overflow:hidden}.lec-section>header{display:grid;grid-template-columns:minmax(36px,46px) minmax(0,1fr) auto;align-items:flex-start;gap:12px;padding:19px 24px;border-bottom:1px solid var(--line);background:var(--c-surface)}.lec-section>header>span{font-size:.72rem;color:var(--accent);font-weight:800}.lec-section>header h2{margin:0;font-size:1.25rem;min-width:0;word-break:break-word;line-height:1.2}.lec-section>header small{color:var(--muted);font-size:.6rem;white-space:nowrap;align-self:flex-end}.lesson-body{padding:24px 28px}.lesson-body>.visual-shell{margin-top:28px}.lesson-loop{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:18px 24px;border-top:1px solid var(--line);background:var(--c-surface)}.lesson-loop b{display:block;font-size:.8rem}.confidence-group{display:flex;gap:4px}.confidence-group button,.card-confidence button,.flashcard-filters button{min-height:38px;padding:7px 11px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;font-size:.7rem;cursor:pointer}.confidence-group button.selected,.card-confidence button:hover,.flashcard-filters button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.blk-note{margin:14px 0;padding:13px 15px;border-left:3px solid var(--accent2);background:var(--panel2);background:color-mix(in srgb,var(--accent2) 7%,var(--panel));border-radius:0 10px 10px 0;font-size:.86rem}.blk-note span{display:block;font-size:.58rem;text-transform:lowercase;color:var(--accent2);font-weight:800;letter-spacing:.1em}.summary-band{max-width:var(--content-max-width, min(1180px, 100%));width:min(100%, var(--content-max-width, min(1180px, 100%)));padding:30px 34px;background:var(--invert-surface);border-radius:18px;color:#d7e3eb;margin-left:auto;margin-right:auto}.summary-band>span{font-size:.65rem;color:#9fb1ff;text-transform:lowercase;letter-spacing:.12em;font-weight:800}.summary-band p{font-size:1.04rem;margin:8px 0 14px}.summary-band>div{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.summary-band .btn-quiet{color:#fff;border-color:rgba(255,255,255,.2)}
.visual-shell{border-radius:14px;box-shadow:none}.visual-head{padding:12px 15px}.visual-head span{font-size:.6rem}.visual-head b{font-size:.8rem}.visual-stage{font-size:.88rem}.visual-index{margin-bottom:34px}.visual-index-grid{grid-template-columns:repeat(3,1fr);gap:7px}.visual-index-grid a{min-height:46px;padding:10px 13px}.visual-lab-section{margin-bottom:44px}.visual-lab-section>header{display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--line);margin-bottom:18px}.visual-lab-section>header span{font-size:.7rem;color:var(--accent);font-weight:800}.visual-lab-section>header h2{font-size:1.45rem;margin:3px 0 0;word-break:break-word}
.visual-loading{min-height:120px;display:grid;place-items:center;color:var(--muted);font-size:.72rem}.course-taxonomy{display:flex;flex-direction:column;margin-bottom:12px;padding:10px 12px;border-left:3px solid var(--gold);background:var(--panel);font-size:.72rem}.course-taxonomy small{color:var(--muted)}

.assessment-intro,.mock-contract{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.assessment-intro>div,.mock-contract>div{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.assessment-intro span,.mock-contract span{font-size:2.2rem;color:var(--accent);font-weight:800;line-height:1}.assessment-intro b,.assessment-intro p,.mock-contract b,.mock-contract small{display:block}.assessment-intro b,.mock-contract b{font-size:.82rem;margin-top:7px}.assessment-intro p,.mock-contract small{font-size:.7rem;color:var(--muted);margin:3px 0}.previous-result,.practice-note,.source-warning{margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--c-surface)}.previous-result span,.previous-result b{display:block}.previous-result span{font-size:.65rem;color:var(--muted);text-transform:lowercase}.previous-result b{font-size:1.25rem}.previous-result p,.practice-note p,.source-warning p{margin:2px 0;color:var(--muted);font-size:.8rem}.exam-rules{display:grid;grid-template-columns:1fr 1fr;gap:7px 28px;margin:22px 0;padding-left:20px;color:var(--text)}
.practice-builder{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:17px;display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:16px}.practice-builder fieldset{border:0;padding:0;margin:0}.practice-builder legend{font-size:.68rem;color:var(--muted);font-weight:800;text-transform:lowercase;letter-spacing:.09em;margin-bottom:9px}.practice-builder label{display:inline-block;margin:3px}.practice-builder input{position:absolute;opacity:0}.practice-builder label span{display:inline-flex;min-height:40px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:.74rem}.practice-builder input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.practice-builder input:focus-visible+span{outline:3px solid var(--accent);outline:3px solid color-mix(in srgb,var(--accent) 70%,white);outline-offset:2px}
.structured-filters{grid-template-columns:160px 1fr}.structured-filters select{min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font-size:.78rem}.structured-checks{display:flex;flex-wrap:wrap;gap:3px}
.structured-item{padding:20px;margin-top:12px}.structured-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.pill-highlight{background:rgba(183,121,31,.14);color:var(--gold, #b7791f);border-color:transparent}
.structured-prompt{font-size:1.3rem;line-height:1.4;color:var(--strong);margin:0 0 16px;font-weight:700}
.structured-figure{margin:0 0 14px}
.structured-answer-label{display:block;font-size:.68rem;color:var(--muted);font-weight:800;text-transform:lowercase;letter-spacing:.08em;margin-bottom:8px}
.structured-answer{width:100%;min-height:130px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--c-surface);color:var(--text);font:inherit;font-size:.88rem;line-height:1.55;resize:vertical;margin-bottom:12px}
.structured-answer:focus-visible{outline:3px solid var(--accent);outline:3px solid color-mix(in srgb,var(--accent) 70%,white);outline-offset:1px;border-color:var(--accent)}
.structured-reveal{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.structured-scheme h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.95rem;color:var(--strong);margin:0 0 12px}
.structured-running-total{padding:5px 12px;border-radius:20px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:.8rem;font-variant-numeric:tabular-nums}
.structured-scheme-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.structured-scheme-list label{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;min-height:48px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--c-surface);cursor:pointer}
.structured-scheme-list label.selected,.structured-scheme-list label:has(input:checked){border-color:var(--accent2);background:var(--panel2);background:color-mix(in srgb,var(--accent2) 9%,var(--panel))}
.structured-scheme-list b{font-size:.7rem;color:var(--muted);white-space:nowrap}
.structured-model{padding:15px 17px;border-left:3px solid var(--accent2);background:var(--panel2);background:color-mix(in srgb,var(--accent2) 7%,var(--panel));border-radius:0 10px 10px 0}.structured-model h3{margin:0 0 6px;font-size:.7rem;text-transform:lowercase;letter-spacing:.08em;color:var(--accent2)}
.structured-trap{padding:15px 17px;border-left:3px solid var(--pink);background:var(--panel2);background:color-mix(in srgb,var(--pink) 7%,var(--panel));border-radius:0 10px 10px 0}.structured-trap h3{margin:0 0 6px;font-size:.7rem;text-transform:lowercase;letter-spacing:.08em;color:var(--pink)}
.structured-warning{padding:15px 17px;border-left:3px solid var(--gold, #b7791f);background:rgba(183,121,31,.09);border-radius:0 10px 10px 0}.structured-warning p{margin:4px 0 0;font-size:.82rem;color:var(--muted)}
.structured-actions{display:flex;gap:10px;flex-wrap:wrap}
.exhibit-svg{display:block;width:100%;height:auto;min-height:220px;max-height:430px;background:var(--c-surface);border-radius:10px}.critique-item{max-width:1080px;margin-left:auto;margin-right:auto}.critique-figure-stage{margin:8px 0 24px;padding:18px;background:var(--c-surface);border:1px solid var(--line);border-radius:14px}.critique-figure-stage .structured-figure{margin:0}.critique-figure-stage .visual-shell{margin:0}.critique-scaffold{margin:22px 0}.critique-scaffold h2{font-size:1rem;margin:0 0 4px}.critique-scaffold>p{margin:0 0 12px;color:var(--muted);font-size:.78rem}.critique-table th:first-child{min-width:130px}.critique-table textarea{width:100%;min-width:150px;resize:vertical;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:.72rem}.critique-compare{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:var(--c-surface)}.critique-compare h3{margin:0;font-size:.82rem}
.assessment-shell{max-width:var(--content-max-width, min(1180px, 100%));margin-left:auto;margin-right:auto}.assessment-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:17px}.assessment-header h1{font-size:2rem;letter-spacing:-.04em;margin:6px 0 0}.assessment-meta{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:.76rem}.assessment-meta b{padding:7px 10px;background:var(--invert-surface);color:#fff;border-radius:8px;font-variant-numeric:tabular-nums}.assessment-layout{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:18px;margin-top:20px}.question-panel{margin:0;width:auto;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:18px;min-height:540px;display:flex;flex-direction:column}.question-meta{display:flex;gap:6px;margin-bottom:15px}.question-meta span{padding:4px 8px;border-radius:20px;background:var(--panel2);color:var(--muted);font-size:.62rem;font-weight:700}.question-fieldset{border:0;margin:0;padding:0}.question-fieldset legend{color:var(--strong);font-size:1.35rem;line-height:1.35;font-weight:750;margin-bottom:24px}.answer-options{display:flex;flex-direction:column;gap:9px}.answer-option{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;min-height:58px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--c-surface);cursor:pointer;transition:.14s}.answer-option:hover{border-color:var(--accent);background:var(--accent-soft)}.answer-option.selected,.answer-option:has(input:checked){border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:var(--accent-soft)}.answer-option.correct{border-color:var(--accent2);background:var(--panel2);background:color-mix(in srgb,var(--accent2) 10%,var(--panel))}.answer-option.wrong{border-color:var(--pink);background:var(--panel2);background:color-mix(in srgb,var(--pink) 9%,var(--panel))}.answer-option input{position:absolute;opacity:0}.answer-option:focus-within,.answer-option:has(input:focus-visible){outline:3px solid var(--accent);outline:3px solid color-mix(in srgb,var(--accent) 70%,white);outline-offset:2px}.option-letter{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;font-size:.7rem;font-weight:800}.answer-explanation{margin-top:18px;padding:15px 17px;border-left:3px solid var(--accent);background:var(--panel2);border-radius:0 10px 10px 0}.answer-explanation>span{font-size:.63rem;color:var(--accent);font-weight:800;text-transform:lowercase}.answer-explanation p{margin:3px 0;font-size:.85rem}.question-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:28px}.flag-btn{min-height:42px;border:0;background:transparent;color:var(--muted);cursor:pointer}.flag-btn.active{color:var(--gold);font-weight:750}
.question-navigator{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:15px;align-self:start;position:sticky;top:20px}.question-navigator h2{font-size:.8rem;margin:0 0 12px}.question-navigator>div{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.question-navigator button{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:var(--c-surface);color:var(--muted);font-size:.65rem;cursor:pointer}.question-navigator button.answered{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.question-navigator button.current{box-shadow:0 0 0 2px var(--strong)}.question-navigator button.flagged{border-bottom:4px solid var(--gold)}.question-navigator p{font-size:.6rem;color:var(--muted)}.question-navigator p i{display:inline-block;width:8px;height:8px;margin:0 3px 0 8px}.question-navigator p i.answered{background:var(--accent)}.question-navigator p i.flagged{background:var(--gold)}
.result-page>header{text-align:center;max-width:760px;margin:0 auto 28px}.score-orbit{width:150px;height:150px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;align-content:center;margin:16px auto;background:var(--panel);box-shadow:0 0 0 20px var(--panel2)}.score-orbit span{font-size:2.5rem;font-weight:800;color:var(--accent);line-height:1}.score-orbit small{color:var(--muted)}.result-page h1{font-size:2.6rem}.result-weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}.result-weeks>div{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.result-weeks span,.result-weeks b{display:block}.result-weeks span{font-size:.65rem;color:var(--muted)}.result-weeks b{font-size:1.2rem}.result-weeks meter{width:100%;accent-color:var(--accent)}.result-action{padding:25px 28px;background:var(--invert-surface);border-radius:15px;color:#dbe5ec}.result-action h2{color:#fff;margin:6px 0}.result-action p{font-size:.85rem}.result-action .btn{margin-right:6px}.answer-review{margin-top:30px}.review-item{border:1px solid var(--line);background:var(--panel);border-radius:10px;margin:7px 0;overflow:hidden}.review-item summary{display:grid;grid-template-columns:30px 70px 1fr;gap:10px;padding:13px 15px;cursor:pointer;font-size:.8rem}.review-item summary span{color:var(--muted)}.review-item.correct summary b{color:var(--accent2)}.review-item.wrong summary b{color:var(--pink)}.review-item>div{padding:5px 55px 16px;font-size:.8rem;color:var(--text)}.result-footer{display:flex;gap:8px;margin-top:24px}

.flashcard-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}.fc-stage{margin-top:0}.flashcard{width:min(720px,100%);height:350px;border:0;background:transparent}.fc-face{border-radius:22px;padding:42px;box-shadow:var(--shadow)}.fc-front{background:linear-gradient(135deg,#4361ee,#5b6cf0)}.fc-back{background:linear-gradient(135deg,#0b786e,#0b9b8d)}.fc-face small{font-size:.68rem;letter-spacing:.14em}.fc-face strong{font-size:clamp(1.3rem,3vw,2.1rem);color:#fff;max-width:600px}.fc-face em{position:absolute;bottom:22px;font-style:normal;font-size:.68rem;color:rgba(255,255,255,.7)}.fc-controls{align-items:center}.fc-controls>span{color:var(--muted);font-size:.75rem}.card-confidence{display:flex;align-items:center;gap:6px;margin-top:15px}.card-confidence>span{font-size:.72rem;color:var(--muted);margin-right:8px}
.cheat-grid,.source-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.cheat,.source-grid>section{padding:25px;background:var(--panel);border:1px solid var(--line);border-radius:15px}.cheat>span,.source-grid>section>span{font-size:.65rem;color:var(--accent);font-weight:800}.cheat h2,.source-grid h2{font-size:1.2rem;margin:5px 0 12px}.cheat li,.source-grid li{font-size:.8rem;margin:7px 0}.source-grid a{display:flex;justify-content:space-between;gap:10px}.print-btn{margin-top:18px}
.history-list{display:flex;flex-direction:column}.history-list>div{display:grid;grid-template-columns:1fr auto 140px;gap:20px;padding:12px 0;border-top:1px solid var(--line);font-size:.75rem}.history-list time,.history-list span{color:var(--muted)}.empty-state{padding:22px;background:var(--c-surface);border-radius:12px}.empty-state p{color:var(--muted);font-size:.8rem}

/* Theme-aware, matching .visual-shell. A hardcoded light background here made
   every chapter cover render as a glaring white block in dark mode. */
.lecture-cover{width:min(100%,900px);margin:20px auto 24px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--c-surface)}
.lecture-cover img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
.lecture-cover figcaption{font-size:12px;color:var(--muted);padding:9px 12px;border-top:1px solid var(--line)}

@media (max-width:1050px){
  :root{--sidebar-width:236px}.command-hero{grid-template-columns:1fr}.next-action-panel{min-height:230px;border-left:0;border-top:1px solid rgba(255,255,255,.12)}.dashboard-grid{grid-template-columns:1fr}.planner-surface{grid-template-columns:1fr}.intel-grid{grid-template-columns:1fr}.intel-matrix-cells{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.intel-controls{grid-template-columns:1fr}.intel-control-row{gap:6px}.knowledge-map{grid-template-columns:repeat(2,1fr)}.analytics-grid{grid-template-columns:1fr}.analytics-topic-grid{grid-template-columns:1fr}.analytics-badges{grid-template-columns:repeat(2,1fr)}.analytics-list{padding-left:0}.assessment-layout{grid-template-columns:1fr}.question-navigator{position:static}.question-navigator>div{grid-template-columns:repeat(10,1fr)}
}

@media (max-width:760px){
  :root{--content-sidebar-offset:0px;--content-max-width:100%}
  body{padding-top:64px;padding-bottom:68px}.mobile-header{display:grid;grid-template-columns:1fr auto 44px;align-items:center;gap:10px;position:fixed;z-index:120;left:0;right:0;top:0;height:64px;padding:8px 12px;background:var(--panel);background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.mobile-brand{display:flex;align-items:center;gap:8px;color:var(--text)}.mobile-brand-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--invert-surface);padding:2px}.mobile-brand-logo img{width:100%;height:100%;object-fit:contain}.mobile-brand b{font-size:.8rem}.mobile-exam{text-align:right}.mobile-exam span,.mobile-exam b{display:block}.mobile-exam span{font-size:.52rem;color:var(--muted);text-transform:lowercase}.mobile-exam b{font-size:.68rem}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;border:0;background:transparent}.menu-toggle>span:not(.sr-only){display:block;width:20px;border-top:2px solid var(--text);margin:auto}.sidebar{position:fixed;z-index:150;top:0;bottom:0;left:0;width:min(330px,88vw);margin:0;border-radius:0;display:flex;transform:translateX(-105%);transition:transform .25s ease}.menu-open .sidebar{transform:none}.menu-scrim{display:block;position:fixed;z-index:140;inset:0;border:0;background:rgba(2,10,18,.55);opacity:0;visibility:hidden;transition:.2s}.menu-open .menu-scrim{opacity:1;visibility:visible}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:110;left:0;right:0;bottom:0;min-height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--panel);border-top:1px solid var(--line)}.mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:.62rem}.mobile-nav a span{font-size:1rem}.mobile-nav a.active{color:var(--accent);font-weight:800}
  main#view{margin-left:0;width:100%;padding:20px 14px 70px}.command-hero{border-radius:18px;min-height:0}.hero-copy{padding:34px 24px}.hero-copy h1{font-size:2.65rem}.hero-copy>p{font-size:.94rem}.hero-copy::after{display:none}.next-action-panel{padding:25px;min-height:210px}.exam-ribbon{grid-template-columns:1fr 1fr}.exam-ribbon>div{padding:13px}.exam-ribbon>div:nth-child(2){border-right:0}.exam-ribbon>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.surface{padding:21px}.knowledge-map{grid-template-columns:1fr 1fr}.planner-surface{gap:12px}.time-choices{grid-template-columns:1fr}.time-choices button{min-height:68px}.study-plan{align-items:stretch;flex-direction:column}.plan-timeline{flex-direction:column}.plan-route-banner{grid-template-columns:1fr}.plan-route-banner .btn{width:100%}.premium-head h1{font-size:2.65rem}.lecture-jump{display:flex;overflow-x:visible;flex-wrap:wrap;padding-bottom:0;row-gap:7px;column-gap:6px}.lecture-jump a{white-space:normal}.lec-section>header{grid-template-columns:36px 1fr;padding:16px;align-items:flex-start}.lec-section>header small{display:none}.lesson-body{padding:19px 16px}.lesson-loop{grid-template-columns:1fr;padding:16px}.confidence-group{order:3}.summary-band{padding:24px 20px}.visual-index-grid{grid-template-columns:1fr 1fr}.assessment-intro,.mock-contract{grid-template-columns:1fr}.practice-builder{grid-template-columns:1fr;padding:20px}.assessment-header{align-items:flex-start}.assessment-meta{flex-direction:column;align-items:flex-end}.question-panel{padding:20px 16px;min-height:0}.question-fieldset legend{font-size:1.12rem}.question-controls{flex-wrap:wrap}.question-navigator>div{grid-template-columns:repeat(8,1fr)}.result-weeks{grid-template-columns:1fr 1fr}.result-page h1{font-size:2rem}.review-item summary{grid-template-columns:26px 65px 1fr}.review-item>div{padding:5px 15px 15px}.cheat-grid,.source-grid{grid-template-columns:1fr}.history-list>div{grid-template-columns:1fr auto}.history-list span{grid-column:1/-1}.flashcard{height:390px}.card-confidence{flex-wrap:wrap;justify-content:center}.card-confidence>span{width:100%;text-align:center}.format-grid,.variable-grid,.threat-grid{grid-template-columns:1fr 1fr}.projection-flow{grid-template-columns:1fr}.criteria-venn{transform:scale(.78);margin:-20px -70px}.visual-stage{overflow-x:auto}
}

@media (max-width:430px){
  .hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-copy h1{font-size:2.35rem}.exam-ribbon{grid-template-columns:1fr}.exam-ribbon>div{border-right:0;border-bottom:1px solid var(--line)!important}.knowledge-map{grid-template-columns:1fr}.visual-index-grid{grid-template-columns:1fr}.question-navigator>div{grid-template-columns:repeat(5,1fr)}.result-weeks{grid-template-columns:1fr 1fr}.assessment-meta>span{display:none}.lesson-loop .text-action{align-self:flex-start}.flashcard{height:420px}.fc-face{padding:28px 20px}.format-grid,.variable-grid,.threat-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media print{
  :root,body.theme-dark{--panel:#fff;--panel2:#fff;--bg:#fff;--text:#000;--muted:#333;--strong:#000;--ink:#000;--head:#000;--line:#bbb}
  body{padding:0;background:#fff;color:#000}.sidebar,.mobile-header,.mobile-nav,.menu-scrim,.hero-actions,.lesson-loop,.question-controls,.print-btn,.feedback-fab,.feedback-dialog{display:none!important}main#view{margin:0;width:100%;padding:20px}.command-hero,.summary-band{background:#fff;color:#000;border:1px solid #bbb;box-shadow:none}.hero-copy h1,.next-action-panel h2,.summary-band *{color:#000}.next-action-panel{background:#fff;border:0}.cheat,.lec-section{break-inside:avoid}
}

.lecture-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lecture-jump a{
  flex: 0 1 auto;
}

.summary-band,
.lec-section,
.surface,
.cheat,
.source-grid>section,
.visual-shell,
.card,
.visual-lab-section,
.intel-map-lab,
.visual-loading,
.workflow-layout{
  max-width: 100%;
  width: min(var(--content-max-width, 100%), 100%);
  box-sizing: border-box;
}

@media (max-width: 760px){
  .lecture-jump{
    overflow-x: visible;
    flex-wrap: wrap;
    padding-bottom: 0;
    row-gap: 7px;
    column-gap: 6px;
  }
  .lecture-jump a{
    white-space: normal;
  }

  .anatomy-layout,
  .cosmetic-layout,
  .gis-system,
  .projection-flow,
  .format-grid,
  .variable-grid,
  .threat-grid{display:grid;grid-template-columns:1fr;}

  .mode-stage.dynamic .mode-dot{
    transform:translate(0,40px) scale(1.24);
  }
  .mode-stage.filtered .mode-dot{
    transform:translate(0,5px);
  }
}

/* ---- subjective mock paper ---- */
.paper-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:22px 0}
.paper-card{padding:22px 24px;border-radius:var(--radius);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.paper-card h2{margin:4px 0 0;font-size:1.15rem}
.paper-card p{margin:0;color:var(--text)}
.paper-card .btn{margin-top:auto;align-self:flex-start}
.paper-card-primary{border-color:var(--accent);box-shadow:var(--shadow)}
.paper-bar{position:sticky;top:10px;z-index:20;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:18px 0 22px}
.paper-bar>div{background:var(--panel);padding:12px 14px;min-width:0}
.paper-bar span{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:lowercase;margin-bottom:3px}
.paper-bar b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.paper-time-low{color:var(--pink)}
.paper-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.paper-question{padding:22px 24px;border-radius:var(--radius);border:1px solid var(--line)}
.paper-submit{margin:26px 0 10px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.paper-your-answer{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0}
.paper-your-answer h3{font-size:12px;text-transform:lowercase;letter-spacing:.6px;color:var(--muted);margin:0 0 6px}
.paper-your-answer p{margin:0;white-space:normal}
.paper-breakdown{display:flex;flex-direction:column;gap:10px;margin:14px 0 8px}
.paper-breakdown-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px}
.paper-breakdown-row b{font-size:13px;color:var(--strong)}
.paper-breakdown-row small{color:var(--muted);font-variant-numeric:tabular-nums}
.paper-meter{height:9px;background:var(--panel2);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.paper-meter span{display:block;height:100%;background:var(--accent);border-radius:999px}
.paper-next{margin:12px 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
@media (max-width:760px){
  .paper-bar{grid-template-columns:repeat(2,minmax(0,1fr));position:sticky;top:76px}
  .paper-question{padding:18px 16px}
}

/* ---- chapter 1-6 interactive section explainers ---- */
.vc-controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 14px}
.vc-toggle{display:inline-flex;flex-wrap:wrap;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:4px}
/* Shared by dozens of chapter visual explainers (Stage/Layer/Mode toggle rows), so raising
   the minimum tap height here, rather than per-visual, fixes touch usability across all of
   them at once instead of retuning each one individually. */
.vc-btn{border:0;background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:600;padding:6px 11px;min-height:32px;box-sizing:border-box;border-radius:7px;cursor:pointer;transition:background .12s,color .12s}
.vc-btn:hover{background:var(--hover);color:var(--ink)}
.vc-btn.active{background:var(--accent);color:var(--on-accent,#fff)}
.vc-checks{display:flex;flex-wrap:wrap;gap:10px 16px}
.vc-check{display:inline-flex;align-items:center;gap:7px;padding:6px 2px;min-height:28px;box-sizing:border-box;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer}
.vc-check input{accent-color:var(--accent);width:15px;height:15px}
.vc-slider{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--text)}
.vc-slider span{white-space:nowrap;color:var(--muted)}
.vc-slider input[type=range]{accent-color:var(--accent);width:clamp(90px,14vw,150px)}
.vc-slider b{min-width:34px;text-align:right;font-variant-numeric:tabular-nums;color:var(--strong)}
.vc-readout{margin-top:12px;padding:12px 14px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;font-size:13px;line-height:1.6;color:var(--text)}
.vc-readout b{color:var(--strong)}
.vc-readout i{color:var(--muted);font-style:normal;display:block;margin-top:4px}
.vc-readout u{text-decoration:none;font-weight:700;color:var(--accent)}
.vc-plate{display:block;margin-top:10px;max-width:min(320px,100%);border-radius:8px;border:1px solid var(--line)}
.vc-node{cursor:pointer}
.vc-node:focus{outline:2px solid var(--accent);outline-offset:2px}
.vc-node rect,.vc-node circle{transition:fill .12s}
.vc-node-on rect{fill:var(--accent-soft);stroke:var(--accent)}
.vc-grid10{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}
.vc-tile{display:flex;align-items:center;gap:9px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--text);transition:.12s}
.vc-tile:hover{border-color:var(--accent);color:var(--ink)}
.vc-tile.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.vc-tile b{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--accent);color:var(--on-accent,#fff);font-size:11px;flex:none}
.vc-tile.active b{background:var(--accent)}
.vc-tile span{font-size:12px;font-weight:600;line-height:1.25}
@media (max-width:760px){
  .vc-controls{gap:8px}
  .vc-slider input[type=range]{width:110px}
}
.vc-crumb-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.vc-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}
.vc-crumb span{color:var(--muted)}
.vc-crumb-btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer}
.vc-crumb-btn:hover{border-color:var(--accent);color:var(--accent)}
.vc-crumb-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.vc-btn:disabled{opacity:.4;cursor:default;pointer-events:none}

/* ---- countdown blur toggle ----
   Uses filter:blur rather than visibility so the element keeps its exact
   footprint and nothing on the page shifts when it is hidden. */
/* position:relative only, so the eye button can anchor to the corner. The
   text stays left-aligned exactly as it was, per the rule above. */
.exam-chip{position:relative}
/* keep the label clear of the button rather than letting it run underneath */
.exam-chip>span{padding-right:26px}
.exam-eye{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:7px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;transition:background .12s,transform .12s}
/* The visible icon stays 24x24 for the compact chip layout, this pseudo-element
   just widens the actual tap/click catchment to something a real finger can hit. */
.exam-eye::before{content:"";position:absolute;inset:-10px}
.exam-eye:hover{background:rgba(255,255,255,.3)}
.exam-eye:active{transform:scale(.92)}
.exam-eye:focus-visible{outline:2px solid #fff;outline-offset:2px}
.exam-eye .eye-shut{opacity:0;transition:opacity .12s}
.exam-eye[aria-pressed="true"] .eye-shut{opacity:1}
.exam-eye[aria-pressed="true"] .eye-open{opacity:.55}
[data-exam-secret]{transition:filter .18s ease}
body.countdown-hidden [data-exam-secret]{filter:blur(3px);user-select:none;cursor:default}
body.countdown-hidden .mobile-exam [data-exam-secret]{filter:blur(3px)}
@media (prefers-reduced-motion:reduce){[data-exam-secret]{transition:none}}

/* ---- update-available overlay ----
   Deliberately loud: a stale tab silently serving an already-fixed bug is
   exactly the confusing state this exists to end, so it takes over the
   centre of the screen with a blurred backdrop and a repeating flash,
   and cannot be dismissed except by actually reloading. */
.update-overlay{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;background:rgba(8,14,24,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:updateFadeIn .3s ease}
.update-flash{position:fixed;inset:0;background:#fff;pointer-events:none;animation:updateFlashPulse 1.8s ease-in-out infinite}
.update-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:30px 26px;background:var(--panel);color:var(--text);border:2px solid var(--gold,#b7791f);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.45);max-width:min(420px,calc(100vw - 40px));animation:updateCardIn .35s cubic-bezier(.2,.85,.25,1)}
.update-card::before{content:"⚠";display:block;font-size:2.1rem;line-height:1}
.update-card span{font-size:1.05rem;font-weight:700;line-height:1.45}
.update-card .update-note{align-self:center;margin-top:-6px;font-size:.62rem;font-weight:600;color:var(--muted);text-align:center}
.update-card .btn{min-height:46px;padding:12px 24px;font-size:.92rem;font-weight:800}
@keyframes updateFadeIn{from{opacity:0}to{opacity:1}}
@keyframes updateCardIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
@keyframes updateFlashPulse{0%,100%{opacity:0}10%{opacity:.4}22%{opacity:0}}
@media (prefers-reduced-motion:reduce){.update-overlay{animation:updateFadeIn .3s ease}.update-card{animation:none}.update-flash{display:none}}

/* ---- chapter colour coding ---------------------------------------------
   Any element carrying data-ch="C1".."C10" gets that chapter's hue piped
   into --ch/--ch-soft via this ten-line lookup, then every visual role
   below reads var(--ch) generically. Add a new role without repeating
   ten rules, and the ten-line lookup is the only place chapter hues live. */
[data-ch="C1"]{--ch:var(--ch1);--ch-soft:var(--ch1-soft)}
[data-ch="C2"]{--ch:var(--ch2);--ch-soft:var(--ch2-soft)}
[data-ch="C3"]{--ch:var(--ch3);--ch-soft:var(--ch3-soft)}
[data-ch="C4"]{--ch:var(--ch4);--ch-soft:var(--ch4-soft)}
[data-ch="C5"]{--ch:var(--ch5);--ch-soft:var(--ch5-soft)}
[data-ch="C6"]{--ch:var(--ch6);--ch-soft:var(--ch6-soft)}
[data-ch="C7"]{--ch:var(--ch7);--ch-soft:var(--ch7-soft)}
[data-ch="C8"]{--ch:var(--ch8);--ch-soft:var(--ch8-soft)}
[data-ch="C9"]{--ch:var(--ch9);--ch-soft:var(--ch9-soft)}
[data-ch="C10"]{--ch:var(--ch10);--ch-soft:var(--ch10-soft)}

/* Cheat sheet / sources page badge, and the small chapter pill in
   structured practice, critique lab and the mock paper. */
.cheat[data-ch]>span,.source-grid>section[data-ch]>span{color:var(--ch)}
.cheat[data-ch],.source-grid>section[data-ch]{border-left:3px solid var(--ch)}
.pill[data-ch]{background:var(--ch-soft);color:var(--ch);border-color:transparent}
/* Chapter nav icon chip and the lecture page eyebrow badge. */
.nav-icon[data-ch]{background:var(--ch-soft)}
#nav a.active .nav-icon--img[data-ch]{background:var(--ch)}
.premium-head[data-ch] .eyebrow{color:var(--ch)}
.lec-section[data-ch]{border-top:3px solid var(--ch)}

/* ---- feedback widget ---- */
.feedback-fab{position:fixed;right:18px;bottom:18px;z-index:800;width:48px;height:48px;border-radius:50%;border:none;background:var(--strong);color:#fff;font-size:19px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s ease}
.feedback-fab:hover{transform:scale(1.06)}
body.theme-dark .feedback-fab{background:var(--accent)}
.feedback-dialog{position:fixed;right:18px;bottom:76px;z-index:801;width:min(340px,calc(100vw - 36px));padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);animation:updateBannerIn .2s ease}
.feedback-dialog[hidden]{display:none}
.feedback-dialog h2{margin:0 0 6px;font-size:.95rem}
.feedback-dialog p{margin:0 0 12px;font-size:.76rem;color:var(--muted)}
.feedback-dialog textarea{width:100%;resize:vertical;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--panel2,var(--panel));color:var(--text);font:inherit;font-size:.82rem}
.feedback-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.feedback-dialog-actions .btn{min-height:38px;padding:8px 14px;font-size:.8rem}
@media (max-width:760px){.feedback-fab{bottom:76px}.feedback-dialog{bottom:134px}}

/* ===== Forecasting Exam Studio: worked-calculation walkthrough engine ===== */
.walkthrough{display:flex;flex-direction:column;gap:14px}
.walkthrough-steps{display:flex;flex-wrap:wrap;gap:6px}
.wt-step{font:inherit;font-size:.72rem;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer;transition:.16s}
.wt-step:hover{border-color:var(--accent);color:var(--strong)}
.wt-step.active{border-color:var(--accent);background:var(--accent-soft);color:var(--strong);font-weight:700}
.walkthrough-body{display:flex;flex-direction:column;gap:10px}
.wt-revealed-step{padding:12px 14px;border-left:3px solid var(--accent);background:var(--panel);border-radius:0 8px 8px 0;font-size:.84rem;line-height:1.55}
.wt-revealed-step b{display:block;margin-bottom:4px;color:var(--strong);font-size:.78rem}
.wt-revealed-step div{color:var(--text)}
.walkthrough-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wt-progress{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.walkthrough-nav button:disabled{opacity:.4;cursor:not-allowed}

.compare-cards{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cc-card{font:inherit;font-size:.76rem;text-align:left;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer;transition:.16s}
.cc-card:hover{border-color:var(--accent)}
.cc-card.active{border-color:var(--accent);background:var(--accent-soft);color:var(--strong)}
.cc-card b{font-weight:700}

.corr-row{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:10px;margin-bottom:10px}
.corr-row>span{font-size:.72rem;font-weight:800;color:var(--accent)}
.corr-bars{position:relative;display:flex;align-items:flex-end;gap:5px;height:70px;padding:0 4px}
.corr-bar-wrap{flex:1;height:100%;display:flex;align-items:center;position:relative}
.corr-bar{display:block;width:100%;min-height:2px;height:var(--h);background:var(--accent);border-radius:2px}
.corr-bar[data-dir="down"]{background:var(--gold)}
.corr-band{position:absolute;left:0;right:0;bottom:calc(50% - (var(--band) / 2));height:var(--band);background:var(--hover);pointer-events:none;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}

.visual-error{color:var(--pink);font-size:.8rem}

/* ===== Interactive teaching diagrams ===== */
/* Inline SVG, so unlike the img-loaded icon set these inherit the page's CSS
   variables and are theme-aware automatically. */
.dgm{display:block;width:100%;height:auto;overflow:visible}
.dgm-stage{margin:6px 0 4px}
.dgm-legend{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 10px;font-size:.72rem;color:var(--muted)}
.dgm-legend span{display:inline-flex;align-items:center;gap:6px}
.dgm-legend i{width:16px;height:3px;border-radius:2px;display:block}
.dgm-read{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dgm-read span{flex:1 1 auto;min-width:130px;padding:8px 11px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;background:var(--panel);font-size:.72rem;color:var(--muted);line-height:1.45}
/* Only the FIRST b is the block heading. Any later b is inline emphasis inside
   the explanation, which must not break onto its own line or take the accent
   colour, or the sentence fragments into disconnected coloured phrases. */
.dgm-read span>b:first-child{display:block;font-size:.86rem;color:var(--strong);margin-bottom:2px;font-variant-numeric:tabular-nums}
.dgm-read span b~b,.dgm-read span b:not(:first-child){display:inline;font-size:inherit;color:var(--strong);margin:0}
.dgm-read span.good{border-left-color:var(--accent2)}
.dgm-read span.good>b:first-child{color:var(--accent2)}
.dgm-read span.warn{border-left-color:var(--pink)}
.dgm-read span.warn>b:first-child{color:var(--pink)}

.dgm-slider{display:block;margin:4px 0 12px}
.dgm-slider>span{display:block;font-size:.72rem;color:var(--muted);margin-bottom:5px}
.dgm-slider>span b{color:var(--accent);font-size:.82rem;font-variant-numeric:tabular-nums}
.dgm-slider input[type=range]{width:100%;max-width:340px;accent-color:var(--accent);cursor:pointer;height:22px}

.dgm-opts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.dgm-opts button{font:inherit;font-size:.74rem;padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);cursor:pointer;transition:.16s;min-height:36px}
.dgm-opts button:hover{border-color:var(--accent)}
.dgm-opts button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--strong);font-weight:700}

.ladder{display:flex;flex-direction:column-reverse;gap:6px}
.ladder-rung{padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:var(--panel);opacity:.42;transition:.18s}
.ladder-rung.on{opacity:1;border-color:var(--accent2);background:var(--accent-soft)}
.ladder-rung b{display:block;font-size:.8rem;color:var(--strong)}
.ladder-rung small{color:var(--muted);font-size:.7rem}

.eqn{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;font-size:.95rem}
.eqn span{color:var(--muted)}
.eqn button{font:inherit;font-size:.9rem;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);cursor:pointer;transition:.16s;min-height:38px}
.eqn button:hover{border-color:var(--accent)}
.eqn button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--strong);font-weight:700}

@media (max-width:760px){
  .corr-row{grid-template-columns:36px 1fr}
  .dgm-read span{min-width:100%}
  .dgm-slider input[type=range]{max-width:100%}
}

/* Chrome is rendered lowercase for a quieter interface voice. Acronyms and
   course codes must survive that, so anything wrapped in .keepcase opts out.
   Exam terms like ARIMA, MCQ and PACF are far harder to read lowercased.
   !important is deliberate here: this is a single-purpose opt-out utility and
   it has to beat higher-specificity component rules such as .brand small. */
.keepcase{text-transform:none !important}

/* ===== Priority chips (must master / should know / supporting) ===== */
.pri-chip{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.03em;padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle;text-transform:lowercase}
.lec-section>header h2 .pri-chip{font-size:.58rem;transform:translateY(-2px)}
.lecture-jump a .pri-chip{margin-left:0;margin-right:6px;padding:1px 6px}
.pri-must{background:color-mix(in srgb, var(--pink) 16%, transparent);color:var(--pink)}
.pri-should{background:var(--accent-soft);color:var(--accent)}
.pri-supporting{background:var(--panel2, var(--panel));color:var(--muted);border:1px solid var(--line)}

/* ===== Worked example block (full written-out steps, exam-reproducible) ===== */
.worked-example{margin:18px 0;border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:0 12px 12px 0;background:var(--c-surface);overflow:hidden}
.worked-head{display:flex;align-items:baseline;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel2, var(--panel))}
.worked-head span{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--accent2)}
.worked-head b{font-size:.86rem;color:var(--strong)}
.worked-steps{list-style:none;margin:0;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.worked-steps li{display:flex;gap:12px;align-items:flex-start}
.wk-num{flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--accent2);color:#fff;font-size:.72rem;font-weight:800}
.worked-steps b{display:block;font-size:.8rem;color:var(--strong);margin-bottom:3px}
.wk-work{font-size:.84rem;color:var(--text);line-height:1.6;font-variant-numeric:tabular-nums}
.wk-work code,.worked-answer b{font-family:var(--mono, ui-monospace, monospace)}
.worked-answer{display:flex;align-items:baseline;gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:var(--accent-soft)}
.worked-answer span{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--accent)}
.worked-answer b{font-size:1rem;color:var(--strong)}
.worked-meaning{margin:0;padding:12px 18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--text);line-height:1.55}
.worked-meaning span{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted);margin-bottom:3px}

/* ===== Active recall toggle ===== */
.recall-block{margin:14px 0}
.recall-q{width:100%;display:flex;align-items:center;gap:10px;text-align:left;font:inherit;padding:12px 16px;border:1px dashed var(--line);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer;transition:.15s}
.recall-q:hover{border-color:var(--accent);border-style:solid}
.recall-tag{flex:0 0 auto;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:20px}
.recall-q>span:not(.recall-tag):not(.recall-caret){flex:1;font-size:.84rem;font-weight:600}
.recall-caret{flex:0 0 auto;color:var(--muted);transition:transform .15s}
.recall-q[aria-expanded="true"] .recall-caret{transform:rotate(180deg)}
.recall-a{margin-top:6px;padding:12px 16px;border-radius:10px;background:var(--accent-soft);font-size:.82rem;color:var(--strong);line-height:1.55}

/* ===== Compact legend for the priority system, shown once near the top of Learn ===== */
.priority-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:11px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:.72rem;color:var(--muted);margin-bottom:18px}
.priority-legend b{color:var(--strong);font-weight:700}