:root {
    /* Light palette — flatter, less heavy, refined whitespace */
    --bg: #fbfaf6;
    --bg-elev: #ffffff;
    --bg-sunk: #f1eee6;
    --ink: #1a1814;
    --ink-2: #4a4640;
    --ink-3: #8a857c;
    --ink-4: #c4bfb5;
    --line: rgba(26,24,20,0.07);
    --line-2: rgba(26,24,20,0.03);
    --accent: #3e4fdb;
    --accent-2: #6a7af0;
    --accent-soft: rgba(62,79,219,0.08);
    --accent-ink: #1f2b8f;
    --ok: #2a7a52;
    --ok-2: #36916a;
    --ok-soft: rgba(42,122,82,0.08);
    --warn: #b56a25;
    /* Per-lesson-type tints (subtle, harmonised with palette) */
    --t-video: #3e4fdb;
    --t-video-soft: rgba(62,79,219,0.10);
    --t-reading: #a06f1f;
    --t-reading-soft: rgba(160,111,31,0.10);
    --t-quiz: #1f6a78;
    --t-quiz-soft: rgba(31,106,120,0.10);
    --t-code: #7048d8;
    --t-code-soft: rgba(112,72,216,0.10);
    --t-ai: #b53b8f;
    --t-ai-soft: rgba(181,59,143,0.10);
    /* Lighter shadows — barely visible */
    --shadow-card: 0 1px 2px rgba(20,18,12,0.03);
    --shadow-card-lg: 0 1px 3px rgba(20,18,12,0.04), 0 12px 32px rgba(20,18,12,0.04);
    --radius: 12px;
    --radius-sm: 8px;
    --font-display: 'Heebo', system-ui, sans-serif;
    --font-body: 'Heebo', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  }

  /* Warm theme — cream bg, terracotta accent */
  html[data-theme="warm"] {
    --bg: #f6efe4;
    --bg-elev: #fdfaf3;
    --bg-sunk: #ede5d6;
    --ink: #2a2520;
    --ink-2: #5a4f44;
    --ink-3: #9a8d7d;
    --ink-4: #cbbfae;
    --line: rgba(60,40,20,0.10);
    --line-2: rgba(60,40,20,0.05);
    --accent: #c75a3a;
    --accent-soft: rgba(199,90,58,0.14);
    --accent-ink: #8a3a22;
    --ok: #6b8a3a;
    --ok-soft: rgba(107,138,58,0.16);
    --warn: #c9892b;
  }

  /* Editorial — high contrast, serif display */
  html[data-theme="editorial"] {
    --bg: #f3f1ec;
    --bg-elev: #ffffff;
    --bg-sunk: #e8e5dd;
    --ink: #0e0e0e;
    --ink-2: #3a3a3a;
    --ink-3: #7a7770;
    --ink-4: #b4b1a8;
    --line: rgba(0,0,0,0.12);
    --line-2: rgba(0,0,0,0.05);
    --accent: #1a1a1a;
    --accent-soft: rgba(0,0,0,0.06);
    --accent-ink: #000000;
    --ok: #1a5a3a;
    --ok-soft: rgba(26,90,58,0.10);
    --warn: #a06020;
    --font-display: 'Frank Ruhl Libre', 'Heebo', serif;
  }

  /* Soft — gentle airy light blue. Like Mono in restraint, but with a
     subtle cool tint so it doesn't feel monochrome. Easy on the eyes. */
  html[data-theme="soft"] {
    --bg: #f5f7fb;
    --bg-elev: #ffffff;
    --bg-sunk: #ebeff7;
    --ink: #1c2230;
    --ink-2: #4a5468;
    --ink-3: #8a93a7;
    --ink-4: #c5cbd8;
    --line: rgba(28,34,48,0.07);
    --line-2: rgba(28,34,48,0.03);
    --accent: #5b7cc4;
    --accent-2: #7d96d2;
    --accent-soft: rgba(91,124,196,0.10);
    --accent-ink: #3a5694;
    --ok: #4a8a72;
    --ok-2: #5ea587;
    --ok-soft: rgba(74,138,114,0.10);
    --warn: #b88660;
    --t-video: #5b7cc4;
    --t-video-soft: rgba(91,124,196,0.10);
    --t-reading: #a08260;
    --t-reading-soft: rgba(160,130,96,0.10);
    --t-quiz: #4a8aa0;
    --t-quiz-soft: rgba(74,138,160,0.10);
    --t-code: #8470b8;
    --t-code-soft: rgba(132,112,184,0.10);
    --t-ai: #b06099;
    --t-ai-soft: rgba(176,96,153,0.12);
    --shadow-card: 0 1px 2px rgba(28,34,48,0.025);
    --shadow-card-lg: 0 1px 3px rgba(28,34,48,0.03), 0 12px 32px rgba(28,34,48,0.035);
  }
  html[data-dark="1"][data-theme="soft"] {
    --bg: #161a24;
    --bg-elev: #1e232f;
    --bg-sunk: #11151d;
    --ink: #eef1f7;
    --ink-2: #b8bdcc;
    --ink-3: #7a8294;
    --ink-4: #4a5060;
    --line: rgba(255,255,255,0.07);
    --line-2: rgba(255,255,255,0.03);
    --accent: #97aee0;
    --accent-soft: rgba(151,174,224,0.14);
    --accent-ink: #c5d3ee;
  }

  /* Mono — minimal grayscale */
  html[data-theme="mono"] {
    --bg: #fafafa;
    --bg-elev: #ffffff;
    --bg-sunk: #f0f0f0;
    --ink: #111111;
    --ink-2: #444444;
    --ink-3: #888888;
    --ink-4: #c4c4c4;
    --line: rgba(0,0,0,0.07);
    --line-2: rgba(0,0,0,0.03);
    --accent: #111111;
    --accent-soft: rgba(0,0,0,0.05);
    --accent-ink: #000000;
    --ok: #2f8a5a;
    --ok-soft: rgba(47,138,90,0.08);
    --warn: #888888;
  }

  /* Dark variants — kept compatible */
  html[data-dark="1"][data-theme="calm"] {
    --bg: #15161a;
    --bg-elev: #1d1f25;
    --bg-sunk: #101115;
    --ink: #f0eee8;
    --ink-2: #b8b5ad;
    --ink-3: #7a7770;
    --ink-4: #4a4845;
    --line: rgba(255,255,255,0.07);
    --line-2: rgba(255,255,255,0.03);
    --accent: #8a9eff;
    --accent-soft: rgba(138,158,255,0.14);
    --accent-ink: #c3cdff;
  }
  html[data-dark="1"][data-theme="warm"] {
    --bg: #1c1814;
    --bg-elev: #25201a;
    --bg-sunk: #14110d;
    --ink: #f0e8d8;
    --ink-2: #c0b29c;
    --ink-3: #8a7e6c;
    --ink-4: #4a443c;
    --line: rgba(255,235,200,0.07);
    --line-2: rgba(255,235,200,0.03);
    --accent: #e88865;
    --accent-soft: rgba(232,136,101,0.14);
    --accent-ink: #f3a98e;
  }
  html[data-dark="1"][data-theme="editorial"] {
    --bg: #0f0f0f;
    --bg-elev: #1a1a1a;
    --bg-sunk: #060606;
    --ink: #f5f3ec;
    --ink-2: #b8b5ad;
    --ink-3: #6a6660;
    --ink-4: #3a3835;
    --line: rgba(255,255,255,0.10);
    --line-2: rgba(255,255,255,0.04);
    --accent: #f5f3ec;
    --accent-soft: rgba(255,255,255,0.07);
    --accent-ink: #ffffff;
  }
  html[data-dark="1"][data-theme="mono"] {
    --bg: #0e0e0e;
    --bg-elev: #18181a;
    --bg-sunk: #050505;
    --ink: #f0f0f0;
    --ink-2: #b0b0b0;
    --ink-3: #707070;
    --ink-4: #404040;
    --line: rgba(255,255,255,0.07);
    --line-2: rgba(255,255,255,0.03);
    --accent: #f0f0f0;
    --accent-soft: rgba(255,255,255,0.07);
    --accent-ink: #ffffff;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    /* No radial gradients — flat, calm */
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  #root { min-height: 100vh; }

  ::selection { background: var(--accent-soft); color: var(--accent-ink); }

  button { font-family: inherit; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* Thinner scrollbars */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--ink-4);
    border-radius: 999px;
    border: 3px solid var(--bg);
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--ink-3);
    border: 3px solid var(--bg);
    background-clip: content-box;
  }
  * { scrollbar-color: var(--ink-4) transparent; scrollbar-width: thin; }

  /* ─── Light overrides on shared components ──────────
     The shared JSX components (lessons, sidebar, project)
     bake in shadows + heavy chrome. Tone them down here. */

  /* Cards: lose drop-shadows, keep hairlines */
  .lsn-wrap, .sb-side, .ch-card, .practice-card,
  .proj-card, .module-hero, .mh-card {
    box-shadow: none !important;
  }
  .lsn-dock { box-shadow: var(--shadow-card) !important; }

  /* Tighter type — bring everything down a notch */
  .lsn-title { letter-spacing: -0.022em !important; }
  .mh-title  { letter-spacing: -0.026em !important; }

  /* Less radial sparkle around the hero */
  .module-hero::before,
  .module-hero::after,
  .mh-bg { display: none !important; }

  /* Footer mentor strip — hidden in the Light look */
  .gf-bottom .gf-mentor { display: none !important; }

  /* ───────────────────────────────────────────────────
     LIGHT-V3 — UI/UX refinements on top of index.html
     Less weight, more breathing room, cleaner hierarchy.
     ─────────────────────────────────────────────────── */

  /* Global header — use the CANONICAL site header so the logo + menu bar is
     identical to every other page. (The Light-v3 "airy/denser" header overrides
     — .gh / .gh-inner padding+height, .gh-nav, .gh-search, .gh-iconbtn,
     .gh-streak, .gh-avatar* — were removed for header parity. The shared
     global.css/layout.css/components.css now governs the header.) */

  /* Breadcrumbs — keep the standard site breadcrumb (tier pills + actions)
     so it matches index.html / courses.html exactly. v3 only softens the
     background to blend with its lighter palette; structure stays canonical. */
  .bc { background: transparent !important; border-bottom: 0.5px solid var(--line) !important; }

  /* Module header (mh) — quieter eyebrow, smaller heading, less padding */
  .mh { background: transparent !important; border-bottom: 0 !important; }
  .mh-inner { padding: 32px 24px 0 !important; gap: 22px !important; max-width: none !important; }
  .mh-modeyebrow {
    font-size: 10.5px !important;
    letter-spacing: 0.12em !important;
    color: var(--ink-3) !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
  }
  .mh-modtitle h1 {
    font-size: 36px !important;
    font-weight: 700 !important;
    letter-spacing: -0.026em !important;
    margin: 0 0 8px !important;
    line-height: 1.08 !important;
  }
  .mh-modtitle p {
    font-size: 15.5px !important;
    color: var(--ink-2) !important;
    max-width: 64ch !important;
  }

  /* Stepper — slim text tabs, no big circles, clean underline */
  .mh-stepper {
    grid-template-columns: repeat(3, max-content) !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    border-radius: 0 !important;
    border-bottom: 0.5px solid var(--line);
    overflow: visible !important;
  }
  .mh-stage {
    grid-template-columns: 22px max-content auto !important;
    gap: 10px !important;
    padding: 14px 22px !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    align-items: center !important;
  }
  .mh-stage:hover:not(.active) { background: var(--bg-tint, var(--bg-sunk)) !important; }
  .mh-stage.active { background: transparent !important; border-bottom-color: var(--accent) !important; }
  .mh-stage + .mh-stage::before { display: none !important; }

  /* Tiny status pip instead of huge circle */
  .mh-stage-num {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    background: var(--bg-sunk) !important;
    color: var(--ink-3) !important;
    box-shadow: none !important;
  }
  .mh-stage-num svg { width: 13px !important; height: 13px !important; }
  .mh-stage.active .mh-stage-num {
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  .mh-stage.complete .mh-stage-num {
    background: var(--ok) !important;
    color: #fff !important;
  }

  .mh-stage-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }
  .mh-stage-name > span:first-child { display: none !important; }
  .mh-stage.active .mh-stage-name { color: var(--ink) !important; }

  .mh-stage-meta {
    font-size: 11.5px !important;
    color: var(--ink-3) !important;
    gap: 6px !important;
    margin-top: 1px !important;
  }
  .mh-stage-meta .pip {
    background: transparent !important;
    color: var(--ink-3) !important;
    padding: 0 !important;
    font-weight: 500 !important;
    font-size: 11px !important;
  }
  .mh-stage.complete .mh-stage-meta .pip { color: var(--ok) !important; background: transparent !important; }
  .mh-stage.active .mh-stage-meta .pip { color: var(--accent) !important; background: transparent !important; }
  .mh-stage-body { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }

  /* Drop the dot progress indicators — too much visual noise */
  .mh-stage-dots { display: none !important; }

  /* Bottom-right floating widget (mentor / pro chip) — collapse to a single small avatar pill */
  .mentor-float, .mentor-strip, #mentor-widget,
  .mentor-float-card { display: none !important; }

  /* Avatar pill — don't let it wrap or get squeezed */
  .gh-avatar { flex-shrink: 0 !important; }
  .gh-avatar-pic { flex-shrink: 0 !important; }
  .gh-avatar-text { white-space: nowrap !important; }
  .gh-avatar-name, .gh-avatar-role { white-space: nowrap !important; }
  /* Let the search shrink first */
  .gh-search { min-width: 0 !important; flex-shrink: 1 !important; }

  /* Footer slimmer */
  .gf { padding: 28px 24px 20px !important; }
  .gf-grid { gap: 20px !important; }

  /* Lesson nav bar — give the "01 / 08" counter enough room and beef
     up the prev/next arrows so they read as proper controls. */
  .main-bar { gap: 10px !important; padding: 12px 24px !important; }
  .main-bar .lesson-counter {
    white-space: nowrap !important;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 13px !important;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.04em;
    padding: 0 12px !important;
    min-width: 60px !important;
    text-align: center;
  }
  .main-bar .nav-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 0.5px solid var(--line) !important;
    background: var(--bg-elev) !important;
    transition: background .15s, border-color .15s, color .15s;
  }
  .main-bar .nav-btn:hover:not(:disabled) {
    background: var(--accent-soft) !important;
    border-color: color-mix(in oklab, var(--accent) 25%, var(--line)) !important;
    color: var(--accent) !important;
  }
  .main-bar .nav-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
  }
  .main-bar .nav-btn svg { width: 15px !important; height: 15px !important; }

  /* Sidebar layout — let the lesson list grow to fill remaining space.
     Compact the head/foot so the user gets max vertical real-estate for
     the chapters/lessons (which is what they navigate). */
  .sb {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .sb-head {
    flex-shrink: 0 !important;
    padding: 18px 18px 14px !important;
    position: relative !important;
  }
  /* Close (×) button for the mobile drawer — only visible when open */
  .sb-close-x {
    display: none;
    appearance: none; border: 0; cursor: pointer;
    background: transparent;
    color: var(--ink-3);
    width: 32px; height: 32px;
    border-radius: 999px;
    align-items: center; justify-content: center;
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    transition: background .12s, color .12s;
  }
  .sb-close-x:hover { background: var(--bg-sunk); color: var(--ink); }
  body.r-sb-open .sb-close-x { display: inline-flex !important; }
  /* tighten progress / module title block */
  .sb-head .sb-modtitle,
  .sb-head .sb-mod-title { font-size: 17px !important; line-height: 1.25 !important; margin-bottom: 6px !important; }
  .sb-head .sb-modsub,
  .sb-head .sb-mod-sub { font-size: 12.5px !important; line-height: 1.4 !important; }
  .sb-head .sb-progress { margin-top: 10px !important; }

  .sb-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 4px 12px 8px !important;
  }
  .sb-shortcuts { flex-shrink: 0 !important; padding: 10px 12px !important; }
  .sb-shortcut {
    padding: 10px 12px !important;
    gap: 10px !important;
    grid-template-columns: 30px 1fr auto !important;
  }
  .sb-shortcut .ic { width: 30px !important; height: 30px !important; }
  .sb-shortcut .lbl { font-size: 9.5px !important; margin-bottom: 1px !important; }
  .sb-shortcut .t { font-size: 13px !important; }
  .sb-shortcut .s { font-size: 11px !important; margin-top: 1px !important; }

  .sb-foot {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
  }
  .sb-foot, .sb-foot * {
    font-size: 12px !important;
  }
  .sb-foot .sb-foot-avatar { width: 28px !important; height: 28px !important; }

  /* Keep all chapters' bodies in the layout flow, so toggling expansion
     of one doesn't cause visual jumps on click. We do this by always
     allowing scroll within the .sb-list and by giving each chapter
     body a small min-height transition. */
  .sb-chap-body {
    transition: none !important;
  }
  .sb-chap:not(.expanded) .sb-chap-body {
    display: none !important;
  }
  /* Make the chapter header look "expandable" but avoid layout jump on click —
     freeze scroll position during the React re-render. */
  .sb-chap-head {
    scroll-margin-top: 100px;
  }

  /* Chapter cards inside sb-list — slightly tighter */
  .sb-chap, .sb-chapter { margin-bottom: 4px !important; }
  .sb-chap > summary, .sb-chap-head {
    padding: 10px 10px !important;
    /* Distinguish chapter header from lesson rows below */
    background: var(--bg-sunk) !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
  }
  .sb-chap > summary:hover, .sb-chap-head:hover {
    background: color-mix(in oklab, var(--bg-sunk) 70%, var(--ink-4)) !important;
  }
  .sb-chap > summary .sb-chap-title,
  .sb-chap-head .sb-chap-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ink-3) !important;
  }
  .sb-chap > summary .sb-chap-sub,
  .sb-chap-head .sb-chap-sub { display: none !important; }
  .sb-chap[open] > summary,
  .sb-chap-head[aria-expanded="true"] {
    background: transparent !important;
    border-bottom: 0.5px solid var(--line) !important;
    border-radius: 0 !important;
    margin-bottom: 6px !important;
  }
  .sb-chap[open] > summary .sb-chap-title,
  .sb-chap-head[aria-expanded="true"] .sb-chap-title {
    color: var(--ink) !important;
    font-size: 12.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
  }
  .sb-item { padding: 7px 10px !important; }

  /* Hide the floating 3px accent bar on the active lesson — in v3 the
     row background already signals "current" clearly enough. */
  .sb-item.active::before {
    display: none !important;
  }
  /* Add a clean inline-start accent border instead */
  .sb-item.active {
    border-inline-start: 2px solid var(--accent) !important;
    border-radius: 0 8px 8px 0 !important;
    padding-inline-start: 10px !important;
  }
  html[dir="rtl"] .sb-item.active {
    border-radius: 8px 0 0 8px !important;
  }

  /* ─── Option A: sidebar-led nav ─── */
  /* Hide the top stepper entirely; the module title block stays as content. */
  .mh-stepper { display: none !important; }
  .mh-modtitle { display: none !important; }
  .mh { display: none !important; }

  /* Inject shortcut cards into the sidebar for Practice / Project. */
  .sb-shortcuts {
    border-top: 0.5px solid var(--line);
    padding: 14px 18px 4px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .sb-shortcut {
    appearance: none; border: 0; background: transparent;
    font: inherit; cursor: pointer;
    width: 100%; text-align: inherit;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 12px; align-items: center;
    padding: 12px 12px;
    border-radius: 10px;
    border: 0.5px solid var(--line);
    background: var(--bg-elev);
    transition: border-color .15s, transform .12s, background .15s;
    direction: rtl;
  }
  .sb-shortcut:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--accent) 25%, var(--line));
    background: color-mix(in oklab, var(--accent-soft) 50%, var(--bg-elev));
  }
  .sb-shortcut .ic {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--bg-sunk);
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sb-shortcut .ic svg { width: 16px; height: 16px; }
  .sb-shortcut.practice .ic { background: var(--accent-soft); color: var(--accent); }
  .sb-shortcut.project  .ic { background: rgba(184,134,43,0.12); color: var(--t-reading); }
  .sb-shortcut .body { min-width: 0; }
  .sb-shortcut .lbl {
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
    margin-bottom: 2px;
  }
  .sb-shortcut .t {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
  }
  .sb-shortcut .s {
    font-size: 11.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
  }
  .sb-shortcut .s b { color: var(--ink-2); font-weight: 600; }
  .sb-shortcut .go {
    color: var(--ink-4);
    display: inline-flex; align-items: center;
  }
  .sb-shortcut .go svg { width: 16px; height: 16px; }
  .sb-shortcut:hover .go { color: var(--accent); }

  /* Sidebar-style "Back to module" button shown in practice/project mode */
  .pl-back, .proj-back {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: blur(20px);
    border-bottom: 0.5px solid var(--line);
    padding: 14px 28px;
    display: flex; align-items: center; gap: 12px;
  }
  .pl-back button, .proj-back button {
    appearance: none; cursor: pointer;
    background: transparent; border: 0.5px solid var(--line);
    color: var(--ink-2);
    padding: 7px 14px;
    border-radius: 999px;
    font: inherit; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s, color .12s;
  }
  .pl-back button:hover, .proj-back button:hover {
    background: var(--bg-sunk); color: var(--ink);
  }
  .pl-back button svg, .proj-back button svg {
    width: 13px; height: 13px;
  }
  .pl-back .crumb-trail {
    font-size: 12.5px; color: var(--ink-3);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .pl-back .crumb-trail .cur {
    color: var(--ink); font-weight: 500;
  }
  .pl-back .crumb-trail .sep { color: var(--ink-4); }

  /* ─── Responsive (Option A shortcuts + back bar) ─── */
  /* Patch: responsive.css has malformed comments that leak the @media keyword
     inside CSS comments, breaking the global tablet/mobile breakpoints.
     We re-declare the critical ones here, scoped to this page only. */

  @media (max-width: 1280px) {
    html body .app-shell { grid-template-columns: 300px 1fr !important; }
    html body .gh-inner, html body .bc-inner, html body .mh-inner, html body .gf-inner {
      padding-inline: 24px !important;
    }
  }

  @media (max-width: 1024px) {
    /* Hide the inline nav links (drawer is the clone) and reveal burger */
    html body .gh-nav { display: none !important; }
    html body .r-burger { display: inline-flex !important; }
    /* Hide noisy chrome on tablet */
    html body .gh-streak,
    html body .gh-search { display: none !important; }
    html body .gh-avatar-text { display: none !important; }
    html body .gh-avatar { padding: 4px !important; width: 38px !important; height: 38px !important; }

    /* App shell: kill the 2-col grid so .main fills full width */
    html body .app-shell,
    html body .app-shell-wrap > .app-shell {
      display: block !important;
      grid-template-columns: 1fr !important;
    }
    html body .app-shell > .main,
    html body .app-shell > main {
      width: 100% !important;
      min-width: 0 !important;
    }

    /* Sidebar becomes off-canvas drawer.
       Use physical left/right (not logical inset-inline-*) to avoid
       RTL/LTR confusion with translateX direction. */
    html body .sb {
      position: fixed !important;
      top: 0 !important;
      bottom: 0 !important;
      height: 100vh !important;
      max-height: 100vh !important;
      width: min(340px, 86vw) !important;
      max-width: 86vw !important;
      z-index: 100 !important;
      transition: transform .25s ease !important;
      overflow-y: auto !important;
      inset-inline-start: auto !important;
      inset-inline-end: auto !important;
    }
    /* RTL: sidebar lives on physical RIGHT, slides off to right */
    html[dir="rtl"] body .sb {
      right: 0 !important;
      left: auto !important;
      transform: translateX(110%) !important;
      box-shadow: -24px 0 60px rgba(0,0,0,0.18) !important;
    }
    /* LTR: sidebar lives on physical LEFT, slides off to left */
    html:not([dir="rtl"]) body .sb {
      left: 0 !important;
      right: auto !important;
      transform: translateX(-110%) !important;
      box-shadow: 24px 0 60px rgba(0,0,0,0.18) !important;
    }
    html body.r-sb-open .sb { transform: none !important; }

    /* Main bar with sidebar trigger appears */
    html body .main-bar .r-sb-trigger { display: inline-flex !important; }

    /* Stepper compaction */
    html body .mh-stage { grid-template-columns: 28px 1fr !important; padding: 12px 14px !important; }
    html body .mh-stage-meta { display: none !important; }

    /* Practice/project back bar */
    .pl-back, .proj-back {
      padding: 12px 20px !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
    }
    .pl-back .crumb-trail { font-size: 12px !important; }
    .sb-shortcut { padding: 11px 12px !important; gap: 10px !important; }
    .sb-shortcut .ic { width: 32px !important; height: 32px !important; }
    .sb-shortcut .t { font-size: 13.5px !important; }
    .sb-shortcuts { padding: 12px 14px 4px !important; }
  }

  @media (max-width: 640px) {
    /* Tighter padding (header kept at the canonical mobile size for parity) */
    html body .gh-inner { padding: 0 16px !important; height: 56px !important; }
    html body .bc-inner { padding: 8px 14px !important; }
    /* Breadcrumb: swipe horizontally on mobile instead of wrapping/clipping. */
    html body .bc-path { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    html body .bc-path::-webkit-scrollbar { display: none; }
    html body .bc-item { flex-shrink: 0; white-space: nowrap; }
    html body .mh-inner { padding: 14px 14px 0 !important; gap: 12px !important; }
    html body .mh-modtitle h1 { font-size: 22px !important; }
    html body .mh-modtitle p { font-size: 13.5px !important; }
    html body .gf-inner { padding: 24px 16px 16px !important; }

    /* Stepper goes vertical on phones */
    html body .mh-stepper {
      grid-template-columns: 1fr !important;
      border: 0 !important;
      gap: 4px !important;
    }
    html body .mh-stage {
      border: 0.5px solid var(--line) !important;
      border-radius: 10px !important;
      margin-bottom: 0 !important;
    }
    html body .mh-stage.active {
      border-color: var(--accent) !important;
      background: var(--accent-soft) !important;
    }

    /* Back bar slimmer */
    .pl-back, .proj-back {
      padding: 10px 14px !important;
      position: static !important;
    }
    .pl-back button, .proj-back button {
      font-size: 12.5px !important;
      padding: 6px 12px !important;
    }
    .pl-back .crumb-trail {
      font-size: 11.5px !important;
      flex-wrap: wrap !important;
    }

    /* Lesson content */
    html body .lsn-wrap { padding: 18px 16px 80px !important; }
    html body .lsn-title { font-size: 22px !important; line-height: 1.2 !important; }

    .sb-shortcut .lbl { font-size: 10px !important; }
    .sb-shortcut .t { font-size: 13px !important; }
    .sb-shortcut .s { font-size: 11px !important; }
  }

  @media (max-width: 380px) {
    .sb-shortcut { grid-template-columns: 28px 1fr !important; }
    .sb-shortcut .go { display: none !important; }
    .sb-shortcut .ic { width: 28px !important; height: 28px !important; }
    html body .gh-iconbtn { width: 32px !important; height: 32px !important; }
  }



    /* Mentor widget — uses host CSS variables (--ink, --accent, etc.) if present */
    .mtw {
      --mtw-bg: var(--bg-elev, #ffffff);
      --mtw-bg-sunk: var(--bg-sunk, #f3f1ec);
      --mtw-bg-page: var(--bg, #fbfaf7);
      --mtw-ink: var(--ink, #1a1a1a);
      --mtw-ink-2: var(--ink-2, #4a4a4a);
      --mtw-ink-3: var(--ink-3, #8a8780);
      --mtw-line: var(--line, rgba(20,18,12,0.08));
      --mtw-line-2: var(--line-2, rgba(20,18,12,0.04));
      --mtw-accent: var(--accent, #4f5eed);
      --mtw-accent-soft: var(--accent-soft, rgba(79,94,237,0.10));
      --mtw-accent-ink: var(--accent-ink, #2b3aa8);
      --mtw-ok: var(--ok, #1f8a5a);
      --mtw-ok-soft: var(--ok-soft, rgba(31,138,90,0.10));
      --mtw-font: var(--font-body, 'Heebo', system-ui, sans-serif);
      --mtw-font-display: var(--font-display, var(--mtw-font));
      font-family: var(--mtw-font);
      font-size: 14px;
      color: var(--mtw-ink);
      position: fixed; z-index: 60;
      inset-inline-end: 24px;
      bottom: 24px;
      direction: rtl;
    }

    /* Floating pill ─────────────────────────────────────────────────── */
    .mtw-pill {
      appearance: none; border: 0; cursor: pointer;
      background: var(--mtw-bg);
      border: 0.5px solid var(--mtw-line);
      padding: 8px 16px 8px 8px;
      border-radius: 999px;
      display: inline-flex; align-items: center; gap: 12px;
      box-shadow: 0 12px 30px rgba(20,18,12,0.12), 0 2px 6px rgba(20,18,12,0.06);
      font: inherit;
      color: var(--mtw-ink);
      transition: transform .18s cubic-bezier(.16,1,.3,1),
                  box-shadow .18s ease,
                  border-color .18s ease;
      max-width: 320px;
    }
    .mtw-pill:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(20,18,12,0.16), 0 4px 10px rgba(20,18,12,0.08);
      border-color: color-mix(in oklab, var(--mtw-accent) 30%, var(--mtw-line));
    }
    .mtw-pill:active { transform: translateY(0); }
    .mtw-pill[hidden] { display: none; }

    .mtw-pill-avatar {
      position: relative;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4f5eed, #1f8a5a);
      color: #fff;
      font-family: var(--mtw-font-display);
      font-weight: 700; font-size: 15px;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .mtw-pill-avatar .mtw-dot {
      position: absolute;
      bottom: -1px; inset-inline-end: -1px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--mtw-ok);
      border: 2.5px solid var(--mtw-bg);
      box-shadow: 0 0 0 0 color-mix(in oklab, var(--mtw-ok) 30%, transparent);
      animation: mtwPulse 2.4s ease-in-out infinite;
    }
    .mtw-pill-avatar .mtw-dot.off {
      background: #c8a02b;
      animation: none;
    }
    @keyframes mtwPulse {
      0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mtw-ok) 30%, transparent); }
      50%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--mtw-ok) 0%, transparent); }
    }

    .mtw-pill-text {
      display: flex; flex-direction: column;
      align-items: flex-start;
      line-height: 1.2;
      min-width: 0;
    }
    .mtw-pill-title {
      font-size: 13.5px; font-weight: 600;
    }
    .mtw-pill-title b { color: var(--mtw-accent); font-weight: 600; }
    .mtw-pill-sub {
      font-size: 11px; color: var(--mtw-ink-3);
      display: inline-flex; align-items: center; gap: 4px;
      margin-top: 1px;
    }
    .mtw-pill-sub i {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--mtw-ok);
      flex-shrink: 0;
    }
    .mtw-pill-sub.off i { background: #c8a02b; }

    .mtw-pill-badge {
      flex-shrink: 0;
      margin-inline-start: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--mtw-accent-soft);
      color: var(--mtw-accent-ink);
      font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.02em;
    }

    /* Hello toast (one-shot) ──────────────────────────────────────── */
    .mtw-hello {
      position: absolute;
      bottom: calc(100% + 12px);
      inset-inline-end: 0;
      background: var(--mtw-ink);
      color: var(--mtw-bg);
      padding: 12px 16px;
      border-radius: 14px;
      font-size: 13px;
      max-width: 280px;
      line-height: 1.45;
      box-shadow: 0 16px 40px rgba(20,18,12,0.2);
      animation: mtwHelloIn .35s cubic-bezier(.16,1,.3,1);
    }
    .mtw-hello b { color: color-mix(in oklab, var(--mtw-accent) 30%, var(--mtw-bg)); font-weight: 600; }
    .mtw-hello::after {
      content: ""; position: absolute;
      bottom: -6px; inset-inline-end: 24px;
      width: 12px; height: 12px;
      background: var(--mtw-ink);
      transform: rotate(45deg);
      border-radius: 2px;
    }
    .mtw-hello-close {
      appearance: none; border: 0; cursor: pointer;
      background: transparent;
      color: rgba(255,255,255,0.6);
      padding: 0 0 0 8px;
      margin-inline-start: 6px;
      font: inherit; font-size: 16px; line-height: 1;
    }
    .mtw-hello-close:hover { color: #fff; }
    @keyframes mtwHelloIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }

    /* Composer popover ────────────────────────────────────────────── */
    .mtw-pop {
      position: absolute;
      bottom: 0;
      inset-inline-end: 0;
      width: min(420px, calc(100vw - 32px));
      background: var(--mtw-bg);
      border: 0.5px solid var(--mtw-line);
      border-radius: 18px;
      box-shadow: 0 24px 60px rgba(20,18,12,0.22), 0 4px 12px rgba(20,18,12,0.08);
      overflow: hidden;
      display: flex; flex-direction: column;
      max-height: min(640px, calc(100vh - 48px));
      animation: mtwPopIn .25s cubic-bezier(.16,1,.3,1);
      transform-origin: bottom var(--mtw-origin, left);
    }
    @keyframes mtwPopIn {
      from { opacity: 0; transform: scale(0.94) translateY(8px); }
      to   { opacity: 1; transform: none; }
    }
    .mtw-pop[hidden] { display: none; }

    .mtw-pop-header {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 18px 14px;
      background: linear-gradient(135deg,
        color-mix(in oklab, var(--mtw-accent) 8%, var(--mtw-bg)),
        var(--mtw-bg) 80%);
      border-bottom: 0.5px solid var(--mtw-line-2);
    }
    .mtw-pop-avatar {
      position: relative;
      width: 48px; height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4f5eed, #1f8a5a);
      color: #fff;
      font-family: var(--mtw-font-display);
      font-weight: 700; font-size: 18px;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 6px 16px color-mix(in oklab, var(--mtw-accent) 30%, transparent);
    }
    .mtw-pop-avatar .mtw-dot {
      position: absolute;
      bottom: -2px; inset-inline-end: -2px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--mtw-ok);
      border: 3px solid var(--mtw-bg);
    }
    .mtw-pop-avatar .mtw-dot.off { background: #c8a02b; }
    .mtw-pop-head-text { flex: 1; min-width: 0; }
    .mtw-pop-head-greeting {
      font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--mtw-accent);
      margin-bottom: 2px;
    }
    .mtw-pop-head-name {
      font-family: var(--mtw-font-display);
      font-size: 17px; font-weight: 700; color: var(--mtw-ink);
      line-height: 1.2;
    }
    .mtw-pop-head-status {
      font-size: 12px; color: var(--mtw-ink-3);
      margin-top: 4px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .mtw-pop-head-status i {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--mtw-ok);
      flex-shrink: 0;
    }
    .mtw-pop-head-status.off i { background: #c8a02b; }
    .mtw-pop-close {
      appearance: none; border: 0; cursor: pointer;
      background: var(--mtw-bg-sunk);
      color: var(--mtw-ink-2);
      width: 28px; height: 28px;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background .15s ease, color .15s ease;
    }
    .mtw-pop-close:hover { background: var(--mtw-accent-soft); color: var(--mtw-accent-ink); }
    .mtw-pop-close svg { width: 13px; height: 13px; }

    /* Mentor message (intro bubble) */
    .mtw-bubble {
      margin: 12px 18px 0;
      background: var(--mtw-bg-sunk);
      padding: 12px 14px;
      border-radius: 12px;
      border-top-inline-start-radius: 4px;
      font-size: 13.5px;
      color: var(--mtw-ink);
      line-height: 1.55;
      position: relative;
    }
    .mtw-bubble::before {
      content: ""; position: absolute;
      top: 0; inset-inline-start: -6px;
      border: 6px solid transparent;
      border-top-color: var(--mtw-bg-sunk);
      border-inline-end-color: var(--mtw-bg-sunk);
    }
    .mtw-bubble b { color: var(--mtw-accent-ink); font-weight: 600; }

    /* Composer body */
    .mtw-pop-body {
      flex: 1; min-height: 0;
      overflow-y: auto;
      padding: 14px 18px 16px;
    }

    .mtw-ctx {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: var(--mtw-accent-soft);
      border-radius: 10px;
      border: 0.5px solid color-mix(in oklab, var(--mtw-accent) 18%, transparent);
      margin-bottom: 14px;
      font-size: 12.5px;
    }
    .mtw-ctx-ic {
      flex-shrink: 0;
      color: var(--mtw-accent-ink);
      width: 18px; height: 18px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .mtw-ctx-ic svg { width: 14px; height: 14px; }
    .mtw-ctx-lbl { color: var(--mtw-ink-3); margin-inline-end: 4px; }
    .mtw-ctx-val {
      color: var(--mtw-accent-ink);
      font-weight: 600;
      flex: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mtw-ctx-edit {
      appearance: none; border: 0; background: transparent;
      color: var(--mtw-accent-ink); cursor: pointer;
      padding: 2px 6px; border-radius: 5px;
      font: inherit; font-size: 11.5px;
    }
    .mtw-ctx-edit:hover { background: rgba(255,255,255,0.5); }

    .mtw-chips-label {
      font-size: 11.5px; font-weight: 600;
      color: var(--mtw-ink-3);
      letter-spacing: 0.04em; text-transform: uppercase;
      margin-bottom: 8px;
    }
    .mtw-chips {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-bottom: 14px;
    }
    .mtw-chip {
      appearance: none; border: 0.5px solid var(--mtw-line);
      background: var(--mtw-bg);
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 999px;
      font: inherit; font-size: 12.5px; font-weight: 500;
      color: var(--mtw-ink-2);
      transition: background .15s ease, color .15s ease, border-color .15s ease;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .mtw-chip:hover { background: var(--mtw-bg-sunk); color: var(--mtw-ink); }
    .mtw-chip.active {
      background: var(--mtw-accent-soft);
      color: var(--mtw-accent-ink);
      border-color: color-mix(in oklab, var(--mtw-accent) 30%, transparent);
    }
    .mtw-chip svg { width: 12px; height: 12px; }

    .mtw-textarea {
      width: 100%;
      padding: 12px 14px;
      border: 0.5px solid var(--mtw-line);
      border-radius: 12px;
      background: var(--mtw-bg);
      color: var(--mtw-ink);
      font: inherit; font-size: 14px;
      line-height: 1.55;
      outline: none;
      resize: vertical;
      min-height: 90px;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .mtw-textarea::placeholder { color: var(--mtw-ink-3); }
    .mtw-textarea:focus {
      border-color: var(--mtw-accent);
      box-shadow: 0 0 0 3px var(--mtw-accent-soft);
    }

    .mtw-footer {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 18px 16px;
      border-top: 0.5px solid var(--mtw-line-2);
      background: var(--mtw-bg);
    }
    .mtw-footer-meta {
      flex: 1; min-width: 0;
      font-size: 11.5px; color: var(--mtw-ink-3);
      display: flex; flex-direction: column; gap: 2px;
    }
    .mtw-footer-meta b { color: var(--mtw-ink-2); font-weight: 600; }
    .mtw-footer-meta .count { font-family: var(--mtw-font); }
    .mtw-send {
      appearance: none; border: 0; cursor: pointer;
      padding: 10px 18px;
      border-radius: 999px;
      background: var(--mtw-ink);
      color: var(--mtw-bg);
      font: inherit; font-size: 13.5px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
      transition: background .15s ease, transform .12s ease, opacity .15s ease;
    }
    .mtw-send:hover:not(:disabled) { background: color-mix(in oklab, var(--mtw-ink) 80%, #000); }
    .mtw-send:active:not(:disabled) { transform: scale(0.97); }
    .mtw-send:disabled { opacity: 0.4; cursor: not-allowed; }
    .mtw-send svg { width: 13px; height: 13px; }
    .mtw-send-spinner {
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: mtwSpin .7s linear infinite;
    }
    @keyframes mtwSpin { to { transform: rotate(360deg); } }

    .mtw-social {
      padding: 10px 18px;
      background: var(--mtw-bg-sunk);
      border-top: 0.5px solid var(--mtw-line-2);
      font-size: 11.5px;
      color: var(--mtw-ink-3);
      display: flex; align-items: center; gap: 8px;
      line-height: 1.4;
    }
    .mtw-social b { color: var(--mtw-ink-2); font-weight: 600; }
    .mtw-social svg { width: 13px; height: 13px; color: var(--mtw-accent); flex-shrink: 0; }

    /* Success state ─────────────────────────────────────────────── */
    .mtw-success {
      padding: 32px 26px 26px;
      text-align: center;
    }
    .mtw-success-ic {
      width: 60px; height: 60px;
      margin: 0 auto 14px;
      border-radius: 50%;
      background: var(--mtw-ok);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      animation: mtwBounce .55s cubic-bezier(.34,1.6,.64,1);
      box-shadow: 0 12px 30px color-mix(in oklab, var(--mtw-ok) 30%, transparent);
    }
    .mtw-success-ic svg { width: 28px; height: 28px; }
    @keyframes mtwBounce {
      0%   { transform: scale(0.3); opacity: 0; }
      60%  { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(1); }
    }
    .mtw-success h3 {
      font-family: var(--mtw-font-display);
      font-size: 18px; font-weight: 700;
      margin: 0 0 6px;
      color: var(--mtw-ink);
    }
    .mtw-success p {
      font-size: 13.5px; color: var(--mtw-ink-2);
      margin: 0 0 16px;
      line-height: 1.55;
    }
    .mtw-success .eta {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px;
      border-radius: 999px;
      background: var(--mtw-accent-soft);
      color: var(--mtw-accent-ink);
      font-size: 12.5px; font-weight: 600;
      margin-bottom: 18px;
    }
    .mtw-success .eta svg { width: 13px; height: 13px; }
    .mtw-success-actions {
      display: flex; gap: 8px; justify-content: center;
    }
    .mtw-success-btn {
      appearance: none; border: 0; cursor: pointer;
      background: var(--mtw-bg-sunk);
      color: var(--mtw-ink);
      padding: 9px 16px;
      border-radius: 999px;
      font: inherit; font-size: 12.5px; font-weight: 600;
    }
    .mtw-success-btn:hover { background: var(--mtw-accent-soft); color: var(--mtw-accent-ink); }

    /* Mobile tweaks ─────────────────────────────────────────────── */
    @media (max-width: 480px) {
      .mtw {
        inset-inline-end: 12px;
        bottom: 12px;
      }
      .mtw-pop {
        width: calc(100vw - 24px);
      }
      .mtw-pill-text { display: none; }
      .mtw-pill-badge { display: none; }
      .mtw-pill { padding: 6px; }
    }
  


    .gh-um-wrap { position: relative; display: inline-flex; }
    .gh-um-menu {
      position: fixed;
      min-width: 240px;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--bg-elev, #fff);
      border: 0.5px solid var(--line, rgba(20,18,12,0.08));
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(20,18,12,0.20), 0 4px 10px rgba(20,18,12,0.06);
      z-index: 999;
      padding: 6px;
      animation: ghUmIn .16s cubic-bezier(.16,1,.3,1);
      font-family: var(--font-body, 'Heebo', system-ui, sans-serif);
      direction: rtl;
    }
    .gh-um-menu::-webkit-scrollbar { width: 8px; }
    .gh-um-menu::-webkit-scrollbar-thumb { background: var(--line, rgba(20,18,12,0.12)); border-radius: 4px; }
    .gh-um-menu::-webkit-scrollbar-thumb:hover { background: var(--ink-4, #c4c1b8); }
    .gh-um-menu::-webkit-scrollbar-track { background: transparent; }
    @keyframes ghUmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    .gh-um-head {
      padding: 12px 14px 14px;
      border-bottom: 0.5px solid var(--line-2, rgba(20,18,12,0.04));
      margin-bottom: 6px;
      display: flex; gap: 12px; align-items: center;
    }
    .gh-um-head-pic {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f5b91e, #c75a3a);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 15px;
      flex-shrink: 0;
    }
    .gh-um-head-text { min-width: 0; }
    .gh-um-name {
      font-size: 13.5px; font-weight: 600;
      color: var(--ink, #1a1a1a);
      line-height: 1.2;
    }
    .gh-um-email {
      font-size: 12px; color: var(--ink-3, #8a8780);
      direction: ltr; text-align: start;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      margin-top: 2px;
    }
    .gh-um-link, .gh-um-button {
      appearance: none; border: 0; background: transparent;
      width: 100%;
      padding: 9px 12px;
      border-radius: 8px;
      display: flex; align-items: center; gap: 11px;
      cursor: pointer;
      font: inherit; font-size: 13px;
      color: var(--ink-2, #4a4a4a);
      text-decoration: none;
      text-align: start;
      transition: background .12s ease, color .12s ease;
    }
    .gh-um-link:hover, .gh-um-button:hover {
      background: var(--bg-sunk, #f3f1ec);
      color: var(--ink, #1a1a1a);
      text-decoration: none;
    }
    .gh-um-link svg, .gh-um-button svg {
      width: 16px; height: 16px;
      color: var(--ink-3, #8a8780);
      flex-shrink: 0;
    }
    .gh-um-link:hover svg, .gh-um-button:hover svg { color: var(--ink, #1a1a1a); }
    .gh-um-link .kbd {
      margin-inline-start: auto;
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 10.5px;
      color: var(--ink-3, #8a8780);
      background: var(--bg-sunk, #f3f1ec);
      padding: 1px 6px; border-radius: 4px;
    }
    .gh-um-link .pip {
      margin-inline-start: auto;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--accent-soft, rgba(79,94,237,0.10));
      color: var(--accent-ink, #2b3aa8);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .gh-um-sep {
      height: 0.5px;
      background: var(--line-2, rgba(20,18,12,0.04));
      margin: 6px 4px;
    }
    .gh-um-section {
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--ink-3, #8a8780);
      padding: 8px 12px 4px;
    }
    .gh-um-link.danger { color: #c4543a; }
    .gh-um-link.danger svg { color: #c4543a; }
    .gh-um-link.danger:hover { background: rgba(196,84,58,0.08); color: #c4543a; }
    .gh-um-overlay {
      position: fixed; inset: 0;
      z-index: 99;
      background: transparent;
    }

    /* Guest-mode: hide the menu entirely on pages where viewer="guest" */
    html[data-viewer="guest"] .gh-um-wrap,
    html[data-viewer="guest"] .gh-avatar { display: none !important; }
  


    /* Top renewal strip — sits ABOVE the sticky global header.
       It scrolls naturally; only the header stays sticky.            */
    .ccr-strip {
      display: none;
      width: 100%;
      background: linear-gradient(90deg,
        color-mix(in oklab, var(--warn, #c97a2b) 14%, var(--bg-elev, #fff)),
        color-mix(in oklab, var(--accent, #4f5eed) 12%, var(--bg-elev, #fff)) 70%,
        var(--bg-elev, #fff));
      border-bottom: 0.5px solid var(--line, rgba(20,18,12,0.10));
      color: var(--ink, #1a1a1a);
      position: relative;
      z-index: 49; /* below header (50) so backdrop-blur looks right */
    }
    html[data-viewer="free"] .ccr-strip { display: block; }
    html[data-viewer="free"].ccr-banner-dismissed .ccr-strip { display: none; }

    .ccr-strip-inner {
      max-width: 1440px; margin: 0 auto;
      padding: 9px 32px;
      display: flex; align-items: center; gap: 14px;
      font-size: 13px;
      line-height: 1.45;
    }
    .ccr-strip-dot {
      width: 8px; height: 8px;
      border-radius: 999px;
      background: var(--warn, #c97a2b);
      box-shadow: 0 0 0 4px color-mix(in oklab, var(--warn, #c97a2b) 18%, transparent);
      flex-shrink: 0;
    }
    .ccr-strip-text {
      flex: 1; min-width: 0;
      color: var(--ink-2, #4a4a4a);
    }
    .ccr-strip-text b { color: var(--ink, #1a1a1a); font-weight: 600; }
    .ccr-strip-text .ccr-mut { color: var(--ink-3, #8a8780); margin-inline-start: 8px; }
    @media (max-width: 720px) {
      .ccr-strip-text .ccr-mut { display: none; }
      .ccr-strip-inner { padding: 9px 16px; gap: 10px; }
    }

    .ccr-strip-cta {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px;
      border-radius: 999px;
      background: var(--ink, #1a1a1a);
      color: var(--bg-elev, #fff);
      font-size: 12.5px; font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      transition: background .15s ease, transform .15s ease;
    }
    .ccr-strip-cta:hover { background: var(--ink-2, #4a4a4a); text-decoration: none; transform: translateY(-1px); }
    .ccr-strip-cta svg { width: 12px; height: 12px; }

    .ccr-strip-x {
      appearance: none; border: 0; background: transparent;
      width: 28px; height: 28px;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--ink-3, #8a8780);
      cursor: pointer;
      transition: background .12s ease, color .12s ease;
      flex-shrink: 0;
    }
    .ccr-strip-x:hover { background: rgba(0,0,0,0.06); color: var(--ink, #1a1a1a); }
    .ccr-strip-x svg { width: 14px; height: 14px; }

    /* ── Premium-feature modal ──────────────────────────────────── */
    .ccr-overlay {
      position: fixed; inset: 0;
      background: rgba(15,12,8,0.55);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      z-index: 9999;
      display: grid; place-items: center;
      padding: 24px;
      animation: ccrFade .18s ease;
    }
    @keyframes ccrFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes ccrPop {
      from { opacity: 0; transform: translateY(8px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .ccr-modal {
      width: 100%; max-width: 480px;
      background: var(--bg-elev, #fff);
      color: var(--ink, #1a1a1a);
      border-radius: 20px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.6) inset;
      overflow: hidden;
      animation: ccrPop .22s cubic-bezier(.16,1,.3,1);
      position: relative;
      font-family: var(--font-body, 'Heebo', system-ui, sans-serif);
    }
    .ccr-modal-x {
      position: absolute;
      top: 14px; inset-inline-end: 14px;
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 0;
      background: transparent;
      color: var(--ink-3, #8a8780);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background .12s, color .12s;
      z-index: 2;
    }
    .ccr-modal-x:hover { background: var(--bg-sunk, #f3f1ec); color: var(--ink, #1a1a1a); }
    .ccr-modal-x svg { width: 16px; height: 16px; }

    .ccr-modal-hero {
      padding: 28px 28px 0;
      background:
        radial-gradient(600px 200px at 50% -20%, color-mix(in oklab, var(--accent, #4f5eed) 18%, transparent), transparent 60%),
        radial-gradient(400px 180px at 10% 0%, color-mix(in oklab, #f5b91e 14%, transparent), transparent 60%);
      text-align: start;
    }
    .ccr-modal-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: color-mix(in oklab, var(--warn, #c97a2b) 18%, transparent);
      color: color-mix(in oklab, var(--warn, #c97a2b) 70%, var(--ink, #1a1a1a));
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.04em;
      margin-bottom: 14px;
    }
    .ccr-modal-eyebrow svg { width: 12px; height: 12px; }
    .ccr-modal h2 {
      font-family: var(--font-display, 'Heebo', system-ui, sans-serif);
      font-size: 22px; font-weight: 700;
      margin: 0 0 8px;
      line-height: 1.25;
      letter-spacing: -0.01em;
    }
    .ccr-modal-desc {
      color: var(--ink-2, #4a4a4a);
      font-size: 14px;
      margin: 0 0 22px;
      line-height: 1.6;
    }
    .ccr-modal-feats {
      padding: 0 28px;
      list-style: none;
      margin: 0 0 24px;
    }
    .ccr-modal-feats li {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 0;
      border-top: 0.5px solid var(--line-2, rgba(20,18,12,0.04));
      font-size: 13.5px;
      color: var(--ink-2, #4a4a4a);
      line-height: 1.5;
    }
    .ccr-modal-feats li:first-child { border-top: 0; }
    .ccr-modal-feats li b { color: var(--ink, #1a1a1a); font-weight: 600; }
    .ccr-modal-feats .check {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: color-mix(in oklab, var(--ok, #1f8a5a) 18%, transparent);
      color: var(--ok, #1f8a5a);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .ccr-modal-feats .check svg { width: 11px; height: 11px; }

    .ccr-modal-foot {
      padding: 18px 28px 24px;
      border-top: 0.5px solid var(--line-2, rgba(20,18,12,0.04));
      display: flex; align-items: center; gap: 10px;
      background: color-mix(in oklab, var(--bg-sunk, #f3f1ec) 40%, transparent);
    }
    .ccr-modal-foot .ccr-spacer { flex: 1; }
    .ccr-btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 22px;
      border-radius: 999px;
      background: var(--ink, #1a1a1a);
      color: var(--bg-elev, #fff);
      font-size: 14px; font-weight: 600;
      text-decoration: none;
      transition: background .15s, transform .15s;
      border: 0;
      cursor: pointer;
      font-family: inherit;
    }
    .ccr-btn-primary:hover { background: var(--ink-2, #4a4a4a); text-decoration: none; transform: translateY(-1px); }
    .ccr-btn-primary svg { width: 14px; height: 14px; }
    .ccr-btn-ghost {
      display: inline-flex; align-items: center;
      padding: 11px 16px;
      border-radius: 999px;
      background: transparent;
      color: var(--ink-2, #4a4a4a);
      font-size: 13.5px; font-weight: 500;
      border: 0;
      cursor: pointer;
      font-family: inherit;
    }
    .ccr-btn-ghost:hover { background: var(--bg-sunk, #f3f1ec); color: var(--ink, #1a1a1a); }

    .ccr-modal-hint {
      font-size: 11.5px;
      color: var(--ink-3, #8a8780);
      padding: 0 28px 18px;
      margin-top: -6px;
    }
    .ccr-modal-hint b { color: var(--ink-2, #4a4a4a); font-weight: 600; }
  


    /* Palette presets — change brand colors site-wide. Default 'indigo' is set in each page's :root. */
    html[data-palette="soft"] {
      --bg: #f5f7fb;
      --bg-elev: #ffffff;
      --bg-sunk: #ebeff7;
      --ink: #1c2230;
      --ink-2: #4a5468;
      --ink-3: #8a93a7;
      --ink-4: #c5cbd8;
      --line: rgba(28,34,48,0.07);
      --line-2: rgba(28,34,48,0.03);
      --accent: #5b7cc4;
      --accent-2: #7d96d2;
      --accent-soft: rgba(91,124,196,0.10);
      --accent-ink: #3a5694;
      --shadow-card: 0 1px 2px rgba(28,34,48,0.025);
      --shadow-card-lg: 0 1px 3px rgba(28,34,48,0.03), 0 12px 32px rgba(28,34,48,0.035);
    }
    /* Kill noisy radial bg-images on pages that bake them in via body {} */
    html[data-palette="soft"] body {
      background-image: none !important;
    }
    html[data-palette="soft"][data-theme="dark"] {
      --bg: #161a24;
      --bg-elev: #1e232f;
      --bg-sunk: #11151d;
      --ink: #eef1f7;
      --ink-2: #b8bdcc;
      --ink-3: #7a8294;
      --ink-4: #4a5060;
      --line: rgba(255,255,255,0.07);
      --line-2: rgba(255,255,255,0.03);
      --accent: #97aee0;
      --accent-2: #b3c4ea;
      --accent-soft: rgba(151,174,224,0.16);
      --accent-ink: #c5d3ee;
    }
    html[data-palette="emerald"] {
      --accent: #1f8a5a;
      --accent-2: #2faa72;
      --accent-soft: rgba(31,138,90,0.10);
      --accent-ink: #15663f;
    }
    html[data-palette="emerald"][data-theme="dark"] {
      --accent: #4dc586;
      --accent-2: #6ee0a0;
      --accent-soft: rgba(77,197,134,0.16);
      --accent-ink: #93f0bb;
    }
    html[data-palette="rose"] {
      --accent: #c75a3a;
      --accent-2: #db7152;
      --accent-soft: rgba(199,90,58,0.10);
      --accent-ink: #8c3622;
    }
    html[data-palette="rose"][data-theme="dark"] {
      --accent: #e87f5e;
      --accent-2: #f29a7e;
      --accent-soft: rgba(232,127,94,0.16);
      --accent-ink: #fab199;
    }
    html[data-palette="violet"] {
      --accent: #8a5af0;
      --accent-2: #a47cff;
      --accent-soft: rgba(138,90,240,0.10);
      --accent-ink: #5b30b8;
    }
    html[data-palette="violet"][data-theme="dark"] {
      --accent: #a47cff;
      --accent-2: #c4a5ff;
      --accent-soft: rgba(164,124,255,0.18);
      --accent-ink: #d1baff;
    }
    html[data-palette="amber"] {
      --accent: #c89100;
      --accent-2: #d6a017;
      --accent-soft: rgba(214,160,23,0.12);
      --accent-ink: #7a5800;
    }
    html[data-palette="amber"][data-theme="dark"] {
      --accent: #e9a553;
      --accent-2: #f0b66e;
      --accent-soft: rgba(233,165,83,0.18);
      --accent-ink: #fbd29c;
    }
  


    html[data-theme="dark"] {
      --bg: #14151a;
      --bg-elev: #1d1f26;
      --bg-sunk: #11121a;
      --ink: #f0eee8;
      --ink-2: #c4c1b8;
      --ink-3: #8a8780;
      --ink-4: #4a4e58;
      --line: rgba(255,255,255,0.08);
      --line-2: rgba(255,255,255,0.04);
      --accent: #6b7afa;
      --accent-2: #8896ff;
      --accent-soft: rgba(107,122,250,0.16);
      --accent-ink: #9bafff;
      --ok: #4dc586;
      --ok-soft: rgba(77,197,134,0.16);
      --warn: #e9a553;
      --warn-soft: rgba(233,165,83,0.18);
      --err: #e36e54;
      --err-soft: rgba(227,110,84,0.18);
      --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.35);
      --shadow-card-lg: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 3px rgba(0,0,0,0.4), 0 20px 50px rgba(0,0,0,0.5);
    }
    html[data-theme="dark"] body {
      background: var(--bg) !important;
      background-image: none !important;
      color-scheme: dark;
    }
    html[data-theme="dark"] img { opacity: 0.92; }
    /* Sticky headers tend to use a fixed white-ish backdrop — re-tint */
    html[data-theme="dark"] .gh,
    html[data-theme="dark"] .pf-top,
    html[data-theme="dark"] .legal-top,
    html[data-theme="dark"] .pr-top,
    html[data-theme="dark"] .a-top,
    html[data-theme="dark"] .tu-top {
      background: color-mix(in oklab, var(--bg-elev) 90%, transparent) !important;
    }
    /* Cards with hardcoded white backgrounds in legacy CSS */
    html[data-theme="dark"] .db-resume,
    html[data-theme="dark"] .iv-doc { background: var(--bg-elev) !important; color: var(--ink); }
    html[data-theme="dark"] .iv-doc { border-color: var(--line); }
    html[data-theme="dark"] .iv-doc-mark { color: #fff; }
  


    /* Hide all legacy per-page viewer toggles */
    .vstate { display: none !important; }

    .scw {
      position: fixed;
      bottom: 20px; inset-inline-start: 20px;
      z-index: 60;
      direction: rtl;
      font-family: var(--font-body, 'Heebo', system-ui, sans-serif);
    }
    .scw-pill {
      display: inline-flex; align-items: center;
      background: var(--bg-elev, #fff);
      border: 0.5px solid var(--line, rgba(20,18,12,0.08));
      border-radius: 999px;
      padding: 4px;
      box-shadow: 0 14px 30px rgba(20,18,12,0.18), 0 2px 6px rgba(20,18,12,0.06);
      gap: 2px;
    }
    .scw-btn {
      appearance: none; border: 0; cursor: pointer;
      background: transparent;
      color: var(--ink-2, #4a4a4a);
      padding: 7px 11px;
      border-radius: 999px;
      font: inherit; font-size: 12.5px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
      transition: background .15s ease, color .15s ease;
      white-space: nowrap;
    }
    .scw-btn:hover { background: var(--bg-sunk, #f3f1ec); color: var(--ink, #1a1a1a); }
    .scw-btn.active {
      background: var(--ink, #1a1a1a);
      color: var(--bg-elev, #fff);
    }
    .scw-btn svg { width: 13px; height: 13px; }
    .scw-icon-only { padding: 7px 9px; }
    .scw-sep {
      width: 1px; height: 18px; align-self: center;
      background: var(--line, rgba(20,18,12,0.1));
      margin: 0 4px;
    }

    /* Palette swatch */
    .scw-swatch {
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--accent);
      border: 0.5px solid rgba(0,0,0,0.12);
      display: inline-block;
    }
    .scw-palette { position: relative; }
    .scw-palette-menu {
      position: absolute;
      bottom: calc(100% + 8px);
      inset-inline-start: 0;
      background: var(--bg-elev, #fff);
      border: 0.5px solid var(--line, rgba(20,18,12,0.08));
      border-radius: 14px;
      padding: 8px;
      box-shadow: 0 20px 40px rgba(20,18,12,0.18);
      display: flex; gap: 6px;
      animation: scwIn .14s ease-out;
    }
    .scw-palette-swatch {
      appearance: none; border: 0; cursor: pointer;
      width: 28px; height: 28px; border-radius: 50%;
      padding: 0;
      transition: transform .12s ease, box-shadow .12s ease;
      box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.10);
    }
    .scw-palette-swatch:hover { transform: scale(1.08); }
    .scw-palette-swatch.active {
      transform: scale(1.12);
      box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--ink);
    }

    /* Viewer dropdown */
    .scw-viewer { position: relative; }
    .scw-caret {
      width: 11px; height: 11px;
      transition: transform .15s ease;
      opacity: 0.6;
    }
    .scw-viewer.open .scw-caret { transform: rotate(180deg); }
    .scw-menu {
      position: absolute;
      bottom: calc(100% + 8px);
      inset-inline-end: 0;
      min-width: 220px;
      background: var(--bg-elev, #fff);
      border: 0.5px solid var(--line, rgba(20,18,12,0.08));
      border-radius: 14px;
      box-shadow: 0 24px 50px rgba(20,18,12,0.20), 0 4px 10px rgba(20,18,12,0.06);
      padding: 6px;
      animation: scwIn .16s cubic-bezier(.16,1,.3,1);
    }
    @keyframes scwIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .scw-menu-section {
      padding: 8px 12px 4px;
      font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--ink-3, #8a8780);
    }
    .scw-menu-item {
      appearance: none; border: 0; cursor: pointer;
      background: transparent;
      width: 100%; padding: 9px 12px;
      border-radius: 9px;
      font: inherit; font-size: 13px;
      color: var(--ink-2, #4a4a4a);
      text-align: start;
      display: flex; align-items: center; gap: 10px;
      transition: background .12s ease, color .12s ease;
    }
    .scw-menu-item:hover { background: var(--bg-sunk, #f3f1ec); color: var(--ink, #1a1a1a); }
    .scw-menu-item.active {
      background: var(--accent-soft, rgba(79,94,237,0.10));
      color: var(--accent-ink, #2b3aa8);
      font-weight: 600;
    }
    .scw-menu-item .dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--ink-4, #c4c1b8);
      flex-shrink: 0;
    }
    .scw-menu-item.active .dot { background: var(--accent, #4f5eed); }
    .scw-menu-item .sub {
      font-size: 11px; color: var(--ink-3, #8a8780);
      font-weight: 400;
      margin-top: 1px;
    }
    .scw-menu-item .text { flex: 1; min-width: 0; }
    .scw-menu-item .text .name { font-weight: 600; }

    .scw-overlay {
      position: fixed; inset: 0; z-index: 59; background: transparent;
    }

    @media (max-width: 480px) {
      .scw-viewer-label { display: none; }
      .scw-viewer .scw-btn { padding: 7px 9px; }
    }
  


  .gh { position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg-elev) 90%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 0.5px solid var(--line); }
  .gh-inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; height: 60px;
    display: flex; align-items: center; gap: 28px; }
  .gh-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); flex-shrink: 0; }
  .gh-logo:hover { text-decoration: none; }
  .gh-logo-mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--ok)));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 700; font-size: 16px;
    box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative; }
  .gh-logo-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,0.18); }
  .gh-logo-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
  .gh-logo-name span { color: var(--accent); font-weight: 800; }
  .gh-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
  .gh-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none;
    transition: background .15s ease, color .15s ease; }
  .gh-nav a:hover { background: var(--bg-sunk); color: var(--ink); text-decoration: none; }
  .gh-nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
  .gh-nav a svg { width: 14px; height: 14px; }
  .gh-actions { display: flex; align-items: center; gap: 6px; }
  .gh-iconbtn { appearance: none; border: 0; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    transition: background .15s ease, color .15s ease; }
  .gh-iconbtn:hover { background: var(--bg-sunk); color: var(--ink); }
  .gh-iconbtn svg { width: 18px; height: 18px; }
  .gh-iconbtn .bdg {
    position: absolute; top: 6px; left: 6px; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 999px; background: var(--warn); color: #fff;
    font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--bg-elev); line-height: 1; }
  .gh-streak {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 8px; border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in oklab, #f5b91e 18%, var(--bg-elev)), var(--bg-elev) 80%);
    border: 0.5px solid color-mix(in oklab, #f5b91e 30%, var(--line));
    font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .gh-streak svg { width: 16px; height: 16px; color: #c89100; }
  .gh-streak b { color: #8a6800; font-variant-numeric: tabular-nums; }
  .gh-avatar {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 4px 4px 10px;
    border-radius: 999px; border: 0.5px solid var(--line); background: var(--bg-elev); cursor: pointer; }
  .gh-avatar:hover { background: var(--bg-sunk); border-color: color-mix(in oklab, var(--accent) 22%, var(--line)); text-decoration: none; }
  .gh-avatar-pic { width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #f5b91e, #c75a3a); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12.5px; }
  .gh-avatar-text { display: flex; flex-direction: column; line-height: 1.2; padding-inline-end: 4px; }
  .gh-avatar-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .gh-avatar-role { font-size: 10.5px; color: var(--ink-3); }

  /* Guest-mode swaps */
  .gh-guest-cta { display: none; }
  html[data-viewer="guest"] .gh-guest-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 999px;
    font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
  html[data-viewer="guest"] .gh-guest-cta.primary {
    background: var(--ink); color: var(--bg-elev);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 18%, transparent); }
  html[data-viewer="guest"] .gh-guest-cta.primary:hover { background: var(--accent); text-decoration: none; }
  html[data-viewer="guest"] .gh-guest-cta.ghost {
    background: transparent; color: var(--ink-2); border: 0.5px solid var(--line); }
  html[data-viewer="guest"] .gh-guest-cta.ghost:hover { background: var(--bg-sunk); color: var(--ink); text-decoration: none; }
  html[data-viewer="guest"] .gh-avatar,
  html[data-viewer="guest"] .gh-streak,
  html[data-viewer="guest"] .gh-iconbtn:has(.bdg) { display: none !important; }
  


  .gf { margin-top: 64px; background: var(--bg-elev); border-top: 0.5px solid var(--line); }
  .gf-inner { max-width: 1280px; margin: 0 auto; padding: 48px 32px 32px; }
  .gf-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; margin-bottom: 36px; }
  .gf-brand-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
  .gf-brand-logo .mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--ok)));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 700; font-size: 16px; }
  .gf-brand-logo .name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
  .gf-brand-logo .name span { color: var(--accent); font-weight: 800; }
  .gf-brand p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 12px 0 0; max-width: 34ch; }
  .gf-col h4 { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
  .gf-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .gf-col a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
  .gf-col a:hover { color: var(--ink); text-decoration: none; }
  .gf-bottom { max-width: 1280px; margin: 0 auto; padding: 22px 32px; border-top: 0.5px solid var(--line-2); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
  .gf-bottom .gf-spacer { flex: 1; }
  .gf-bottom a { color: var(--ink-3); text-decoration: none; }
  .gf-bottom a:hover { color: var(--ink); }
  @media (max-width: 760px) {
    .gf-inner { padding: 40px 18px 24px; }
    .gf-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .gf-brand { grid-column: span 2; }
    .gf-bottom { padding: 22px 18px; }
  }
  


  .app-shell {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 100vh;
    background: var(--bg);
  }
  html[dir="rtl"] .app-shell { direction: rtl; }

  /* Sidebar with subtle inner gradient */
  .sb {
    position: sticky; top: 0; align-self: start;
    height: 100vh;
    background: var(--bg-elev);
    background-image: linear-gradient(180deg,
      color-mix(in oklab, var(--bg-elev) 100%, transparent) 0%,
      color-mix(in oklab, var(--bg-elev) 98%, var(--accent-soft)) 100%);
    border-inline-end: 0.5px solid var(--line);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .sb-head {
    padding: 22px 24px 18px;
    border-bottom: 0.5px solid var(--line);
  }
  .sb-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ink-3); margin-bottom: 10px;
  }
  .sb-breadcrumb a { color: var(--ink-3); }
  .sb-breadcrumb .sep { color: var(--ink-4); }

  .sb-course-title {
    font-family: var(--font-display);
    font-size: 19px; font-weight: 700; line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
  }
  .sb-course-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }

  /* Progress: bar */
  .pr-bar { display: block; }
  .pr-bar-track {
    height: 7px; border-radius: 999px;
    background: var(--bg-sunk);
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 1px rgba(0,0,0,0.03) inset;
  }
  .pr-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
    width: var(--p, 0%);
    transition: width .5s cubic-bezier(.16,1,.3,1);
    border-radius: 999px;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent);
  }
  html[dir="rtl"] .pr-bar-fill {
    background: linear-gradient(-90deg, var(--accent), var(--accent));
  }
  .pr-meta {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 12.5px; color: var(--ink-3);
  }
  .pr-meta b { color: var(--ink); font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }

  /* Progress: dots */
  .pr-dots { display: block; }
  .pr-dots-row { display: flex; gap: 5px; margin-bottom: 8px; }
  .pr-dot {
    flex: 1; height: 6px; border-radius: 3px;
    background: var(--bg-sunk);
    transition: background .3s ease;
  }
  .pr-dot.done { background: var(--ok); }
  .pr-dot.active {
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
  }

  /* Progress: ring */
  .pr-ring { display: flex; align-items: center; gap: 14px; }
  .pr-ring svg { width: 56px; height: 56px; flex-shrink: 0; }
  .pr-ring circle { fill: none; stroke-width: 5; }
  .pr-ring .pr-track-c { stroke: var(--bg-sunk); }
  .pr-ring .pr-fill-c {
    stroke: var(--accent);
    stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: center;
    transition: stroke-dashoffset .5s cubic-bezier(.16,1,.3,1);
  }
  .pr-ring-num {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
  }
  .pr-ring-svg-wrap { position: relative; }

  /* Lesson list */
  .sb-list {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 10px 10px 24px;
  }

  /* Chapter header (parent topic) */
  .sb-chap {
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    transition: background .2s ease;
  }
  .sb-chap:first-child { margin-top: 4px; }
  .sb-chap-head {
    appearance: none; border: 0; background: transparent;
    width: 100%; text-align: inherit; font: inherit; color: inherit;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 12px;
    transition: background .15s ease;
  }
  .sb-chap-head:hover { background: var(--bg-sunk); }
  .sb-chap-num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--bg-sunk);
    color: var(--ink-3);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease;
  }
  .sb-chap.has-active .sb-chap-num,
  .sb-chap.all-done .sb-chap-num {
    background: var(--accent); color: #fff;
  }
  html[data-theme="editorial"] .sb-chap.has-active .sb-chap-num,
  html[data-theme="mono"] .sb-chap.has-active .sb-chap-num,
  html[data-theme="editorial"] .sb-chap.all-done .sb-chap-num,
  html[data-theme="mono"] .sb-chap.all-done .sb-chap-num { background: var(--ink); color: var(--bg-elev); }
  .sb-chap.all-done .sb-chap-num { background: var(--ok); }
  .sb-chap-text { flex: 1; min-width: 0; }
  .sb-chap-title {
    font-size: 14px; font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 1px;
    overflow: hidden; text-overflow: ellipsis;
  }
  .sb-chap-meta {
    font-size: 11.5px; color: var(--ink-3);
    display: flex; gap: 6px; align-items: center;
  }
  .sb-chap-meta .pip {
    padding: 1px 7px; border-radius: 999px;
    background: var(--bg-sunk);
    font-size: 10.5px; font-weight: 600;
  }
  .sb-chap.all-done .sb-chap-meta .pip { background: var(--ok-soft); color: var(--ok); }

  .sb-chap-caret {
    flex-shrink: 0;
    width: 16px; height: 16px;
    color: var(--ink-3);
    transition: transform .2s ease;
  }
  .sb-chap.expanded .sb-chap-caret { transform: rotate(90deg); }
  html[dir="rtl"] .sb-chap-caret { transform: rotate(180deg); }
  html[dir="rtl"] .sb-chap.expanded .sb-chap-caret { transform: rotate(90deg); }

  .sb-chap-body {
    display: none;
    padding: 2px 0 6px;
  }
  .sb-chap.expanded .sb-chap-body { display: block; }

  .sb-item {
    appearance: none; border: 0; width: 100%; text-align: inherit;
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 12px 10px 12px;
    padding-inline-start: 18px;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    color: inherit;
    transition: background .15s ease;
    font: inherit;
    position: relative;
    margin-top: 2px;
  }
  .sb-chap-body .sb-item { padding-inline-start: 50px; }
  .sb-item:hover { background: var(--bg-sunk); }
  .sb-item.active {
    background: var(--accent-soft);
  }
  .sb-item.active::before {
    content: ""; position: absolute; top: 12px; bottom: 12px;
    inset-inline-start: 30px;
    width: 3px; border-radius: 3px;
    background: var(--accent);
  }

  .sb-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--bg-sunk);
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease;
  }
  .sb-icon svg { width: 16px; height: 16px; }
  .sb-item.active .sb-icon {
    background: var(--accent); color: #fff;
  }
  html[data-theme="editorial"] .sb-item.active .sb-icon,
  html[data-theme="mono"] .sb-item.active .sb-icon {
    background: var(--ink); color: var(--bg-elev);
  }
  .sb-item.done .sb-icon {
    background: var(--ok-soft); color: var(--ok);
  }
  .sb-item.done.active .sb-icon {
    background: var(--ok); color: #fff;
  }

  .sb-text { flex: 1; min-width: 0; }
  .sb-name {
    font-size: 14px; font-weight: 500; color: var(--ink);
    line-height: 1.35;
    margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis;
  }
  .sb-item.done .sb-name { color: var(--ink-2); }
  .sb-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--ink-3);
  }
  .sb-meta .pip {
    padding: 1px 8px; border-radius: 999px;
    background: var(--bg-sunk);
    font-size: 10.5px; font-weight: 500;
  }
  .sb-meta .sep { color: var(--ink-4); }

  .sb-state {
    flex-shrink: 0; align-self: center;
    color: var(--ink-4);
  }
  .sb-state svg { width: 16px; height: 16px; }
  .sb-item.done .sb-state { color: var(--ok); }

  /* Footer / module summary at bottom */
  .sb-foot {
    border-top: 0.5px solid var(--line);
    padding: 14px 18px;
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: var(--ink-2);
  }
  .sb-foot-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--ok));
    color: #fff; font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sb-foot b { color: var(--ink); font-weight: 600; }

  /* ── Main column ── */
  .main {
    min-width: 0;
    background: var(--bg);
    position: relative;
  }
  .main-bar {
    position: sticky; top: var(--header-h, 0px); z-index: 10;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 32px;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 0.5px solid var(--line);
  }
  .main-bar-title { font-weight: 500; font-size: 13.5px; color: var(--ink-2); }
  .main-bar .spacer { flex: 1; }
  .main-bar .nav-btn {
    appearance: none; border: 0.5px solid var(--line);
    background: var(--bg-elev);
    width: 32px; height: 32px;
    border-radius: 9px;
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
  }
  .main-bar .nav-btn:hover:not(:disabled) { background: var(--bg-sunk); color: var(--ink); }
  .main-bar .nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .main-bar .nav-btn svg { width: 14px; height: 14px; }
  .main-bar .lesson-counter { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

  .lsn-content-scroller {
    /* Natural page scroll — page chrome is fixed to top, this just flows. */
  }

  /* Module complete card */
  .module-complete {
    margin: 14px 12px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ok-soft), var(--accent-soft));
    border: 0.5px solid var(--line);
  }
  .module-complete-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 13.5px;
    margin-bottom: 4px;
  }
  .module-complete-title svg { width: 16px; height: 16px; color: var(--ok); }
  .module-complete-sub { font-size: 12.5px; color: var(--ink-2); }



  .lsn-wrap {
    max-width: 860px; margin: 0 auto;
    padding: 40px 56px 96px;
    position: relative;
  }

  /* Per-lesson-type color */
  .lsn-wrap[data-type="video"]   { --type: var(--t-video);   --type-soft: var(--t-video-soft); }
  .lsn-wrap[data-type="reading"] { --type: var(--t-reading); --type-soft: var(--t-reading-soft); }
  .lsn-wrap[data-type="quiz"]    { --type: var(--t-quiz);    --type-soft: var(--t-quiz-soft); }
  .lsn-wrap[data-type="code"]    { --type: var(--t-code);    --type-soft: var(--t-code-soft); }

  .lsn-eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 16px;
  }
  .lsn-eyebrow .lsn-pip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 11px;
    border-radius: 999px;
    background: var(--type-soft, var(--accent-soft));
    color: var(--type, var(--accent-ink));
    font-size: 11px; letter-spacing: 0.04em;
    border: 0.5px solid color-mix(in oklab, var(--type, var(--accent)) 18%, transparent);
  }
  .lsn-eyebrow .lsn-pip svg { width: 12px; height: 12px; }
  .lsn-eyebrow .sep { color: var(--ink-4); }
  .lsn-eyebrow time { color: var(--ink-3); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
  .lsn-eyebrow .lsn-num {
    color: var(--ink-3); letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }

  .lsn-title {
    font-family: var(--font-display);
    font-size: 40px; line-height: 1.1; font-weight: 700;
    letter-spacing: -0.022em;
    margin: 0 0 12px;
    text-wrap: pretty;
    color: var(--ink);
  }
  html[data-theme="editorial"] .lsn-title { font-weight: 700; letter-spacing: -0.015em; font-size: 46px; }
  .lsn-deck {
    font-size: 17.5px; color: var(--ink-2);
    margin: 0 0 32px;
    max-width: 62ch;
    text-wrap: pretty;
    line-height: 1.5;
  }

  /* Video */
  .lsn-video {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: var(--shadow-card);
  }
  .lsn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .lsn-video-meta {
    display: flex; gap: 18px; align-items: center;
    color: var(--ink-3); font-size: 13.5px;
    margin-bottom: 26px;
  }
  .lsn-video-meta svg { width: 15px; height: 15px; vertical-align: -3px; margin-inline-end: 4px; }

  /* Reading */
  .lsn-prose { font-size: 16.5px; line-height: 1.78; color: var(--ink); max-width: 64ch; }
  .lsn-prose p { margin: 0 0 18px; text-wrap: pretty; }
  .lsn-prose h3 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
    margin: 36px 0 12px;
  }
  .lsn-prose ul { padding-inline-start: 22px; margin: 0 0 18px; }
  .lsn-prose li { margin-bottom: 8px; }
  .lsn-prose code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--bg-sunk);
    padding: 2px 6px;
    border-radius: 5px;
    direction: ltr; display: inline-block;
  }
  .lsn-prose pre {
    direction: ltr; text-align: left;
    background: var(--bg-sunk);
    border: 0.5px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 14px 0 22px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.65;
    overflow-x: auto;
  }
  .lsn-prose pre .k { color: #b94aaa; }
  .lsn-prose pre .s { color: #2f8a5a; }
  .lsn-prose pre .c { color: var(--ink-3); font-style: italic; }
  .lsn-prose pre .t { color: #4f6bed; }
  html[data-dark="1"] .lsn-prose pre .k { color: #e08adb; }
  html[data-dark="1"] .lsn-prose pre .s { color: #7dd1a3; }
  html[data-dark="1"] .lsn-prose pre .t { color: #8a9eff; }
  .lsn-prose blockquote {
    margin: 22px 0;
    padding: 14px 18px;
    border-inline-start: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 10px 10px 0;
    color: var(--ink);
    font-size: 15.5px;
  }
  html[dir="rtl"] .lsn-prose blockquote { border-radius: 10px 0 0 10px; }

  /* Reading progress bar (top of reading lesson) */
  .lsn-read-progress {
    position: sticky; top: 0; z-index: 5;
    height: 3px;
    background: transparent;
    margin: -32px -48px 32px;
  }
  .lsn-read-progress > i {
    display: block; height: 100%;
    background: var(--accent);
    width: var(--p, 0%);
    transition: width .12s linear;
  }

  /* Completion CTA dock at bottom of content */
  .lsn-dock {
    margin-top: 44px;
    padding: 22px 26px;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 18px;
    display: flex; align-items: center; gap: 18px;
    box-shadow: var(--shadow-card-lg);
    position: relative;
    overflow: hidden;
  }
  .lsn-dock::before {
    content: ""; position: absolute;
    inset-inline-start: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--type, var(--accent)), transparent);
    opacity: 0.7;
  }
  .lsn-dock-text { flex: 1; min-width: 0; }
  .lsn-dock-title { font-weight: 600; font-size: 15.5px; margin-bottom: 3px; color: var(--ink); }
  .lsn-dock-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

  .lsn-btn {
    appearance: none; cursor: pointer;
    padding: 13px 22px;
    border: 0;
    border-radius: 999px;
    font-size: 14.5px; font-weight: 600;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap;
  }
  .lsn-btn:active { transform: scale(0.97); }
  .lsn-btn svg { width: 16px; height: 16px; }
  .lsn-btn.primary {
    background: var(--ink); color: var(--bg-elev);
  }
  .lsn-btn.primary:hover { background: var(--ink-2); }
  .lsn-btn.ok {
    background: var(--ok); color: #fff;
  }
  .lsn-btn.disabled {
    background: var(--bg-sunk);
    color: var(--ink-3);
    cursor: not-allowed;
    pointer-events: none;
  }
  .lsn-btn.ghost {
    background: transparent; color: var(--ink-2);
    border: 0.5px solid var(--line);
    padding: 12px 18px;
  }
  .lsn-btn.ghost:hover { background: var(--bg-sunk); color: var(--ink); }

  /* Quiz */
  .quiz-q {
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .quiz-q.locked { background: var(--bg); }
  .quiz-qhead { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
  .quiz-qnum {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-sunk);
    color: var(--ink-3);
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  .quiz-q.locked .quiz-qnum { background: var(--ok-soft); color: var(--ok); }
  .quiz-qtext { font-size: 16px; font-weight: 500; line-height: 1.45; }
  .quiz-qtext code {
    font-family: var(--font-mono); font-size: 0.92em;
    background: var(--bg-sunk); padding: 2px 6px; border-radius: 5px;
    direction: ltr; display: inline-block;
  }
  .quiz-options { display: flex; flex-direction: column; gap: 8px; }
  .quiz-opt {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 0.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    background: var(--bg);
  }
  .quiz-opt:hover { background: var(--bg-sunk); }
  .quiz-opt input { accent-color: var(--accent); }
  .quiz-opt.selected { border-color: var(--accent); background: var(--accent-soft); }
  .quiz-opt.correct {
    border-color: var(--ok); background: var(--ok-soft); color: var(--ink);
    cursor: default; pointer-events: none;
  }
  .quiz-opt.wrong-selected {
    border-color: var(--warn); background: rgba(201,122,43,0.10);
    cursor: default; pointer-events: none; text-decoration: line-through;
    text-decoration-color: var(--warn); text-decoration-thickness: 1.5px;
  }
  .quiz-opt.muted { opacity: 0.55; cursor: default; pointer-events: none; }
  .quiz-opt .opt-text { flex: 1; font-size: 14.5px; }
  .quiz-opt .opt-text code {
    font-family: var(--font-mono); font-size: 0.9em;
    background: var(--bg-sunk); padding: 2px 6px; border-radius: 5px;
    direction: ltr; display: inline-block;
  }
  .quiz-opt .opt-tag {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
  }
  .quiz-opt.correct .opt-tag { background: var(--ok); color: #fff; }
  .quiz-opt.wrong-selected .opt-tag { background: var(--warn); color: #fff; }
  .quiz-opt.selected-correct {
    border-color: var(--ok);
    background: var(--ok-soft);
  }
  .quiz-opt.selected-correct .opt-tag { background: var(--ok); color: #fff; }
  .quiz-q.graded-correct .quiz-qnum { background: var(--ok); color: #fff; }
  .quiz-q.graded-wrong .quiz-qnum { background: var(--warn); color: #fff; }

  .quiz-explain {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--bg-sunk);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ink-2);
    border-inline-start: 3px solid var(--ok);
  }
  .quiz-explain b { color: var(--ink); }

  /* Code Quiz — fill-in-the-blank */
  .cq-q {
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 16px;
    padding: 22px 24px 20px;
    margin-bottom: 16px;
  }
  .cq-q-prompt {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 16px;
    display: flex; gap: 12px; align-items: baseline;
  }
  .cq-q-prompt code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--bg-sunk);
    padding: 2px 6px;
    border-radius: 5px;
    direction: ltr; display: inline-block;
  }
  .cq-qnum {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-sunk);
    color: var(--ink-3);
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, color .2s ease;
  }
  .cq-q.done .cq-qnum { background: var(--ok-soft); color: var(--ok); }
  .cq-q.wrong .cq-qnum { background: rgba(201,122,43,0.16); color: var(--warn); }

  .cq-code {
    direction: ltr; text-align: left;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.95;
    background: var(--bg-sunk);
    color: var(--ink);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
  }
  .cq-code .seg { color: var(--ink); }

  .cq-blank {
    display: inline-block;
    height: 28px;
    padding: 0 8px;
    margin: 0 1px;
    vertical-align: middle;
    background: #fff;
    color: var(--ink);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  html[data-dark="1"] .cq-blank {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: var(--ink);
  }
  .cq-blank::placeholder { color: var(--ink-4); letter-spacing: 1px; font-weight: 500; }
  .cq-blank:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--bg-elev);
  }
  .cq-blank.correct {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
    font-weight: 600;
  }
  .cq-blank.wrong {
    border-color: var(--warn);
    background: rgba(201,122,43,0.10);
    color: var(--warn);
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: rgba(201,122,43,0.5);
  }
  .cq-blank.hint {
    border-color: #f5b91e;
    border-style: dashed;
    background: rgba(245,185,30,0.12);
    color: #8a6800;
    font-weight: 600;
    font-style: italic;
  }
  html[data-dark="1"] .cq-blank.hint {
    background: rgba(245,185,30,0.16);
    color: #f5d878;
    border-color: rgba(245,185,30,0.6);
  }
  .cq-blank:disabled { cursor: default; opacity: 1; }

  .cq-actions-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px;
  }
  .cq-actions-row .spacer { flex: 1; }

  .cq-hint-btn {
    appearance: none; cursor: pointer;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: #f5b91e;
    color: #3d2c00;
    font-size: 13.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px;
    transition: transform .12s ease, background .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .cq-hint-btn:hover { background: #ffc62b; }
  .cq-hint-btn:active { transform: scale(0.97); }
  .cq-hint-btn svg { width: 14px; height: 14px; }
  .cq-hint-btn.shown { background: rgba(245,185,30,0.18); color: #8a6800; box-shadow: none; }
  html[data-dark="1"] .cq-hint-btn { background: #f5b91e; color: #2a1f00; }
  html[data-dark="1"] .cq-hint-btn.shown { background: rgba(245,185,30,0.22); color: #f5d878; }

  .cq-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600;
    padding: 5px 12px; border-radius: 999px;
  }
  .cq-status.correct { background: var(--ok-soft); color: var(--ok); }
  .cq-status.wrong { background: rgba(201,122,43,0.14); color: var(--warn); }
  .cq-status svg { width: 13px; height: 13px; }

  .cq-hint {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(245,185,30,0.10);
    border: 0.5px solid rgba(245,185,30,0.35);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.55;
    display: flex; gap: 10px; align-items: flex-start;
  }
  .cq-hint b { color: var(--ink); }
  .cq-hint svg {
    width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
    color: #b88a00;
  }

  .cq-correction {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(201,122,43,0.08);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  .cq-correction b { color: var(--warn); font-family: var(--font-mono); }



  .celeb-root {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    background: rgba(0,0,0,0);
    transition: background .4s ease;
  }
  .celeb-root[data-show="1"] { background: rgba(0,0,0,0.32); pointer-events: auto; }
  .celeb-root[data-show="1"][data-dim="0"] { background: rgba(0,0,0,0); }

  .celeb-card {
    position: relative;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 22px;
    padding: 36px 44px 30px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.06);
    text-align: center;
    transform: scale(0.92) translateY(8px);
    opacity: 0;
    transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    min-width: 340px; max-width: 440px;
  }
  .celeb-root[data-show="1"] .celeb-card { transform: scale(1) translateY(0); opacity: 1; }

  .celeb-check {
    width: 76px; height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--ok-soft);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .celeb-check::before {
    content: ""; position: absolute; inset: -8px;
    border-radius: 50%;
    border: 2px solid var(--ok);
    opacity: 0;
    animation: celebRing 1.2s ease-out forwards;
  }
  .celeb-check svg { width: 38px; height: 38px; }
  .celeb-check path {
    fill: none; stroke: var(--ok); stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: celebDraw .5s cubic-bezier(.16,1,.3,1) .15s forwards;
  }
  @keyframes celebRing {
    0% { transform: scale(0.7); opacity: 0.6; }
    100% { transform: scale(1.35); opacity: 0; }
  }
  @keyframes celebDraw {
    to { stroke-dashoffset: 0; }
  }

  .celeb-eyebrow {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ok);
    margin-bottom: 6px;
  }
  .celeb-title {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 700; line-height: 1.2;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .celeb-sub {
    font-size: 14.5px; color: var(--ink-2);
    margin: 0 0 22px;
    line-height: 1.5;
  }
  .celeb-actions {
    display: flex; gap: 10px; justify-content: center;
  }
  .celeb-btn {
    appearance: none; border: 0; cursor: pointer;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    transition: transform .15s ease, background .15s ease;
  }
  .celeb-btn:active { transform: scale(0.97); }
  .celeb-btn.primary { background: var(--ink); color: var(--bg-elev); }
  .celeb-btn.primary:hover { background: var(--ink-2); }
  .celeb-btn.ghost { background: transparent; color: var(--ink-2); }
  .celeb-btn.ghost:hover { background: var(--bg-sunk); color: var(--ink); }

  /* Confetti */
  .confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 99; overflow: hidden; }
  .confetti-piece {
    position: absolute; top: -20px;
    width: 10px; height: 14px;
    opacity: 0;
    animation: confettiFall var(--dur, 2.2s) cubic-bezier(.2,.6,.4,1) forwards;
    animation-delay: var(--delay, 0s);
  }
  @keyframes confettiFall {
    0%   { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0deg); }
    8%   { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(var(--rot, 720deg)); }
  }

  /* Quiet return-state badge */
  .quiet-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--ok) 12%, var(--bg-elev)),
      color-mix(in oklab, var(--ok) 6%, var(--bg-elev)));
    color: var(--ok);
    border: 0.5px solid color-mix(in oklab, var(--ok) 24%, transparent);
    border-radius: 14px;
    font-size: 13.5px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(20,18,12,0.03);
  }
  .quiet-banner svg { width: 20px; height: 20px; flex-shrink: 0; }
  .quiet-banner b { color: var(--ok); font-weight: 600; }
  .quiet-banner-meta {
    margin-inline-start: auto; color: var(--ink-3); font-size: 12.5px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--bg-elev);
    border: 0.5px solid var(--line-2);
  }



  /* ── Global header ── */
  .gh {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg-elev) 90%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 0.5px solid var(--line);
  }
  .gh-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 0 32px;
    height: 60px;
    display: flex; align-items: center; gap: 28px;
  }

  /* Logo */
  .gh-logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
  }
  .gh-logo:hover { text-decoration: none; }
  .gh-logo-mark {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--ok)));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 32%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
  }
  .gh-logo-mark::after {
    content: ""; position: absolute;
    inset: 4px;
    border-radius: 6px;
    border: 1.5px solid rgba(255,255,255,0.18);
    pointer-events: none;
  }
  .gh-logo-name {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .gh-logo-name span { color: var(--accent); font-weight: 800; }

  /* Nav */
  .gh-nav {
    display: flex; align-items: center; gap: 4px;
    flex: 1;
  }
  .gh-nav a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
  }
  .gh-nav a:hover { background: var(--bg-sunk); color: var(--ink); text-decoration: none; }
  .gh-nav a.active {
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 600;
  }
  html[data-theme="editorial"] .gh-nav a.active,
  html[data-theme="mono"] .gh-nav a.active { color: var(--ink); background: var(--bg-sunk); }
  .gh-nav a svg { width: 14px; height: 14px; }

  /* Right side actions */
  .gh-actions {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
  }
  .gh-search {
    position: relative;
    width: 240px;
  }
  .gh-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 36px;
    border: 0.5px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
  }
  .gh-search input:focus {
    border-color: var(--accent);
    background: var(--bg-elev);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .gh-search input::placeholder { color: var(--ink-3); }
  .gh-search svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--ink-3);
    pointer-events: none;
  }
  html[dir="rtl"] .gh-search input { padding: 0 36px 0 12px; }
  html[dir="rtl"] .gh-search svg { left: auto; right: 12px; }
  .gh-search kbd {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    background: var(--bg-sunk);
    border: 0.5px solid var(--line);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
  }
  html[dir="rtl"] .gh-search kbd { right: auto; left: 8px; }

  .gh-iconbtn {
    appearance: none; border: 0; cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    transition: background .15s ease, color .15s ease;
  }
  .gh-iconbtn:hover { background: var(--bg-sunk); color: var(--ink); }
  .gh-iconbtn svg { width: 18px; height: 18px; }
  .gh-iconbtn .bdg {
    position: absolute;
    top: 6px; right: 6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--warn);
    color: #fff;
    font-size: 9.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--bg-elev);
    line-height: 1;
  }
  html[dir="rtl"] .gh-iconbtn .bdg { right: auto; left: 6px; }

  /* Streak chip */
  .gh-streak {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,
      color-mix(in oklab, #f5b91e 18%, var(--bg-elev)),
      var(--bg-elev) 80%);
    border: 0.5px solid color-mix(in oklab, #f5b91e 30%, var(--line));
    font-size: 12.5px; font-weight: 600;
    color: var(--ink);
  }
  .gh-streak svg { width: 16px; height: 16px; color: #c89100; }
  .gh-streak b {
    color: #8a6800;
    font-variant-numeric: tabular-nums;
  }
  html[data-dark="1"] .gh-streak b { color: #f5d878; }

  /* Avatar menu */
  .gh-avatar {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 0.5px solid var(--line);
    background: var(--bg-elev);
    cursor: pointer;
    font: inherit;
    transition: background .15s ease, border-color .15s ease;
    position: relative;
  }
  .gh-avatar:hover { background: var(--bg-sunk); border-color: color-mix(in oklab, var(--accent) 22%, var(--line)); }
  .gh-avatar-pic {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5b91e, #c75a3a);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .gh-avatar-text { display: flex; flex-direction: column; line-height: 1.2; padding-inline-end: 4px; }
  .gh-avatar-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .gh-avatar-role { font-size: 10.5px; color: var(--ink-3); }
  html[dir="rtl"] .gh-avatar { padding: 4px 4px 4px 10px; }

  /* Avatar dropdown menu */
  .gh-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 240px;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
    padding: 6px;
    z-index: 100;
    animation: ghMenuIn .18s cubic-bezier(.16,1,.3,1);
  }
  @keyframes ghMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .gh-menu-header {
    padding: 12px 14px 10px;
    border-bottom: 0.5px solid var(--line-2);
    margin-bottom: 6px;
  }
  .gh-menu-header .name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
  .gh-menu-header .email { font-size: 12px; color: var(--ink-3); }
  .gh-menu-item {
    appearance: none; border: 0; background: transparent;
    width: 100%; text-align: inherit;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink-2);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
  }
  .gh-menu-item:hover { background: var(--bg-sunk); color: var(--ink); }
  .gh-menu-item svg { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }
  .gh-menu-item:hover svg { color: var(--accent); }
  .gh-menu-item.danger { color: var(--warn); }
  .gh-menu-item.danger svg { color: var(--warn); }
  .gh-menu-item.danger:hover { background: rgba(201,122,43,0.10); color: var(--warn); }
  .gh-menu-item.danger:hover svg { color: var(--warn); }
  .gh-menu-divider {
    height: 1px; background: var(--line-2);
    margin: 6px 4px;
  }
  .gh-menu-overlay {
    position: fixed; inset: 0; z-index: 99;
  }

  /* ── Breadcrumbs / hierarchy ── */
  .bc {
    background: var(--bg-elev);
    border-bottom: 0.5px solid var(--line-2);
  }
  .bc-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 14px 32px 14px;
    display: flex; align-items: center; gap: 12px;
  }
  .bc-path {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 4px;
    overflow: hidden;
  }
  .bc-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    transition: background .15s ease;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bc-item:hover { background: var(--bg-sunk); text-decoration: none; }
  .bc-item .bc-tier {
    font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3);
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bg-sunk);
    flex-shrink: 0;
  }
  .bc-item.track .bc-tier { background: rgba(138,90,240,0.14); color: #6a3fce; }
  .bc-item.course .bc-tier { background: rgba(31,122,138,0.14); color: var(--t-quiz); }
  .bc-item.module .bc-tier { background: var(--accent-soft); color: var(--accent-ink); }
  html[data-dark="1"] .bc-item.track .bc-tier { color: #c4a8ff; }
  .bc-item.current {
    color: var(--ink);
    font-weight: 600;
  }
  .bc-sep {
    color: var(--ink-4);
    flex-shrink: 0;
    width: 14px; height: 14px;
  }
  .bc-actions {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
    color: var(--ink-3);
    font-size: 12.5px;
  }
  .bc-actions .pip {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-sunk);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-2);
  }
  .bc-actions .pip b { color: var(--ink); font-weight: 600; }
  .bc-actions svg { width: 13px; height: 13px; }

  /* ── Footer ── */
  .gf {
    margin-top: 64px;
    background: var(--bg-elev);
    border-top: 0.5px solid var(--line);
  }
  .gf-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 48px 32px 32px;
  }
  .gf-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 36px;
  }
  .gf-brand .gf-logo {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
  }
  .gf-brand p {
    font-size: 13.5px; color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 32ch;
  }
  .gf-social {
    display: flex; gap: 6px;
  }
  .gf-social a {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 0.5px solid var(--line);
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .gf-social a:hover {
    background: var(--bg-sunk);
    color: var(--accent);
    border-color: color-mix(in oklab, var(--accent) 28%, var(--line));
    text-decoration: none;
  }
  .gf-social svg { width: 16px; height: 16px; }

  .gf-col h4 {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
  }
  .gf-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .gf-col a {
    font-size: 13.5px;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .15s ease;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .gf-col a:hover { color: var(--ink); text-decoration: none; }
  .gf-col a .gf-new {
    background: var(--accent);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Newsletter */
  .gf-newsletter {
    grid-column: span 2;
  }
  .gf-newsletter h4 { color: var(--ink); font-size: 15px; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
  .gf-newsletter p { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.5; }
  .gf-newsletter form {
    display: flex; gap: 8px;
  }
  .gf-newsletter input {
    flex: 1;
    height: 38px;
    padding: 0 14px;
    border: 0.5px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    outline: none;
  }
  .gf-newsletter input:focus { border-color: var(--accent); }
  .gf-newsletter button {
    appearance: none; border: 0; cursor: pointer;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg-elev);
    font-size: 13px; font-weight: 600;
    transition: background .15s ease;
  }
  .gf-newsletter button:hover { background: var(--ink-2); }

  /* Bottom bar */
  .gf-bottom {
    border-top: 0.5px solid var(--line-2);
    padding-top: 22px;
    display: flex; align-items: center; gap: 16px;
    font-size: 12px;
    color: var(--ink-3);
  }
  .gf-bottom .spacer { flex: 1; }
  .gf-bottom a { color: var(--ink-3); text-decoration: none; }
  .gf-bottom a:hover { color: var(--ink); text-decoration: none; }
  .gf-bottom .gf-mentor {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-sunk);
    color: var(--ink-2);
    font-size: 11.5px;
  }
  .gf-bottom .gf-mentor svg { width: 12px; height: 12px; color: var(--ok); }

  @media (max-width: 900px) {
    .gh-nav { display: none; }
    .gh-search { width: auto; }
    .gh-streak { display: none; }
    .gf-grid { grid-template-columns: 1fr 1fr; }
    .gf-newsletter { grid-column: span 2; }
  }

  /* ── Guest mode — hide member chrome, show login/signup CTAs.
     Triggers off <html data-viewer="guest">. Matches the pattern used on
     every other page so behaviour is consistent.                       */
  .gh-guest-cta { display: none; }
  html[data-viewer="guest"] .gh-guest-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  html[data-viewer="guest"] .gh-guest-cta.primary {
    background: var(--ink); color: var(--bg-elev);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 18%, transparent);
  }
  html[data-viewer="guest"] .gh-guest-cta.primary:hover { background: var(--ink-2); text-decoration: none; }
  html[data-viewer="guest"] .gh-guest-cta.ghost {
    background: transparent; color: var(--ink-2);
    border: 0.5px solid var(--line);
  }
  html[data-viewer="guest"] .gh-guest-cta.ghost:hover {
    background: var(--bg-sunk); color: var(--ink); text-decoration: none;
  }
  /* Hide member-only chrome in guest mode (avatar, streak, notification badge). */
  html[data-viewer="guest"] .gh-avatar,
  html[data-viewer="guest"] .gh-streak,
  html[data-viewer="guest"] .gh-iconbtn:has(.bdg) { display: none !important; }



  .mh {
    background: var(--bg-elev);
    border-bottom: 0.5px solid var(--line);
  }
  .mh-inner {
    max-width: 1440px; margin: 0 auto;
    padding: 22px 32px 0;
    display: flex; flex-direction: column; gap: 18px;
  }

  .mh-modtitle {
    max-width: 900px;
  }
  .mh-modeyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 4px;
  }
  .mh-modtitle h1 {
    font-family: var(--font-display);
    font-size: 28px; font-weight: 700; line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .mh-modtitle p {
    font-size: 14.5px; color: var(--ink-2);
    margin: 0;
    line-height: 1.5;
    max-width: 60ch;
  }

  /* Stepper bar */
  .mh-stepper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
  }

  .mh-stage {
    appearance: none; border: 0; background: transparent;
    width: 100%; text-align: inherit; font: inherit; color: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 20px 16px;
    position: relative;
    transition: background .15s ease;
    border-bottom: 3px solid transparent;
  }
  .mh-stage:hover:not(.active) {
    background: var(--bg-sunk);
  }
  .mh-stage.active {
    border-bottom-color: var(--accent);
  }
  .mh-stage.active .mh-stage-num {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 35%, transparent);
  }
  .mh-stage.complete .mh-stage-num {
    background: var(--ok);
    color: #fff;
  }

  /* Visual connector between stages (subtle line on RTL bottom) */
  .mh-stage + .mh-stage::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    inset-inline-end: 0;
    width: 1px;
    background: var(--line-2);
  }

  .mh-stage-num {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg-sunk);
    color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 17px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    position: relative;
  }
  .mh-stage-num svg { width: 18px; height: 18px; }

  .mh-stage-body { min-width: 0; }
  .mh-stage-name {
    font-size: 15px; font-weight: 600; color: var(--ink);
    line-height: 1.2;
    margin-bottom: 2px;
    display: flex; align-items: center; gap: 8px;
  }
  .mh-stage.active .mh-stage-name { color: var(--accent-ink); }
  html[data-theme="editorial"] .mh-stage.active .mh-stage-name,
  html[data-theme="mono"] .mh-stage.active .mh-stage-name { color: var(--ink); }
  .mh-stage-meta {
    font-size: 12.5px; color: var(--ink-3);
    display: flex; align-items: center; gap: 8px;
  }
  .mh-stage-meta .pip {
    padding: 2px 9px; border-radius: 999px;
    background: var(--bg-sunk);
    font-size: 11px; font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .mh-stage.complete .mh-stage-meta .pip {
    background: var(--ok-soft); color: var(--ok);
  }
  .mh-stage.active .mh-stage-meta .pip {
    background: var(--accent-soft); color: var(--accent-ink);
  }

  /* mini progress dots */
  .mh-stage-dots {
    display: flex; gap: 3px; align-items: center;
    flex-shrink: 0;
  }
  .mh-stage-dots i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bg-sunk);
    transition: background .25s ease, box-shadow .25s ease;
    position: relative;
  }
  .mh-stage-dots i.done { background: var(--ok); }
  .mh-stage-dots i.active {
    background: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
    animation: mhPulse 1.8s ease-in-out infinite;
  }
  @keyframes mhPulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent); }
  }



  /* ── Practice list ── */
  .prac {
    max-width: 1280px; margin: 0 auto;
    padding: 44px 32px 80px;
  }

  /* Practice hero — calm, focused, elegant */
  .prac-hero {
    background:
      radial-gradient(700px 400px at 80% 20%, color-mix(in oklab, var(--t-code) 14%, var(--bg-elev)), transparent 70%),
      linear-gradient(135deg, var(--bg-elev), color-mix(in oklab, var(--t-code-soft) 55%, var(--bg-elev)));
    border: 0.5px solid var(--line);
    border-radius: 22px;
    padding: 32px 36px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-card-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .prac-hero-text { min-width: 0; }
  .prac-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--t-code);
    margin-bottom: 12px;
    padding: 5px 12px 5px 11px;
    border-radius: 999px;
    background: var(--t-code-soft);
    border: 0.5px solid color-mix(in oklab, var(--t-code) 18%, transparent);
  }
  .prac-hero-eyebrow svg { width: 13px; height: 13px; }
  .prac-hero-title {
    font-family: var(--font-display);
    font-size: 42px; line-height: 1.08; font-weight: 700;
    letter-spacing: -0.022em;
    margin: 0 0 12px;
    color: var(--ink);
    text-wrap: balance;
  }
  html[data-theme="editorial"] .prac-hero-title { font-size: 48px; }
  .prac-hero-sub {
    font-size: 16.5px; color: var(--ink-2);
    margin: 0;
    max-width: 78ch;
    line-height: 1.5;
    text-wrap: pretty;
  }

  /* Stats column — vertical, calm */
  .prac-hero-stats {
    display: flex; flex-direction: column;
    gap: 14px;
    align-items: flex-end;
    text-align: end;
  }
  .prac-hero-stat {
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .prac-hero-stat .num {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 700;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .prac-hero-stat .num .total {
    color: var(--ink-3);
    font-size: 18px;
    font-weight: 500;
  }
  .prac-hero-stat .lbl {
    font-size: 12px; color: var(--ink-3);
    font-weight: 500;
  }
  .prac-hero-stat.ok .num { color: var(--ok); }
  .prac-hero-stat.active .num { color: var(--accent); }

  /* Mobile: stack hero text + stats neatly */
  @media (max-width: 720px) {
    .prac-hero {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 22px;
      padding-bottom: 22px;
      align-items: start;
    }
    .prac-hero-eyebrow { font-size: 11px; padding: 4px 10px; }
    .prac-hero-title { font-size: 26px; text-wrap: balance; }
    .prac-hero-sub { font-size: 14.5px; line-height: 1.6; }
    .prac-hero-stats {
      flex-direction: row;
      flex-wrap: wrap;
      text-align: start;
      gap: 18px;
    }
    .prac-hero-stat .num { font-size: 22px; }
    .prac-hero-stat .num .total { font-size: 15px; }
    .prac-hero-stat .lbl { font-size: 11.5px; }
  }
  @media (max-width: 420px) {
    .prac-hero-title { font-size: 22px; }
  }

  .prac-list {
    display: flex; flex-direction: column; gap: 14px;
  }
  .prac-card {
    appearance: none; border: 0.5px solid var(--line);
    background: var(--bg-elev);
    border-radius: 18px;
    padding: 20px 24px;
    cursor: pointer;
    text-align: inherit; font: inherit; color: inherit;
    width: 100%;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 18px;
    align-items: center;
    box-shadow: var(--shadow-card);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
    overflow: hidden;
  }
  .prac-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-lg);
    border-color: color-mix(in oklab, var(--accent) 28%, transparent);
  }
  .prac-card::before {
    content: ""; position: absolute;
    inset-inline-start: 0; top: 14px; bottom: 14px;
    width: 3px;
    background: var(--t-code);
    opacity: 0.3;
    border-radius: 3px;
  }
  .prac-card.done::before { background: var(--ok); opacity: 0.85; }
  .prac-card.in-progress::before { background: var(--accent); opacity: 0.85; }
  .prac-card.submitted::before { background: #f5b91e; opacity: 0.85; }

  .prac-card-num {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--t-code-soft);
    color: var(--t-code);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 19px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .prac-card.done .prac-card-num {
    background: var(--ok-soft); color: var(--ok);
  }
  .prac-card.in-progress .prac-card-num {
    background: var(--accent-soft); color: var(--accent-ink);
  }
  .prac-card.submitted .prac-card-num {
    background: rgba(245,185,30,0.15); color: #8a6800;
  }
  html[data-dark="1"] .prac-card.submitted .prac-card-num { color: #f5c878; }

  .prac-card-body { min-width: 0; }
  .prac-card-title {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 600; color: var(--ink);
    line-height: 1.3;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
  }
  .prac-card-sub {
    font-size: 14px; color: var(--ink-2);
    margin: 0 0 10px;
    line-height: 1.5;
    text-wrap: pretty;
  }
  .prac-card-meta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: 12px; color: var(--ink-3);
  }
  .prac-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-sunk);
    font-size: 11.5px; font-weight: 500;
  }
  .prac-pill.diff-easy   { background: rgba(31,138,90,0.10); color: var(--ok); }
  .prac-pill.diff-medium { background: rgba(184,134,43,0.12); color: #8a6800; }
  .prac-pill.diff-hard   { background: rgba(199,90,58,0.14); color: var(--warn); }
  html[data-dark="1"] .prac-pill.diff-medium { color: #f5c878; }
  .prac-pill.status-done { background: var(--ok-soft); color: var(--ok); }
  .prac-pill.status-in-progress { background: var(--accent-soft); color: var(--accent-ink); }
  .prac-pill.status-submitted { background: rgba(245,185,30,0.15); color: #8a6800; }
  html[data-dark="1"] .prac-pill.status-submitted { color: #f5c878; }
  .prac-pill.status-not-started { background: var(--bg-sunk); color: var(--ink-3); }
  .prac-pill svg { width: 13px; height: 13px; }

  .prac-card-tail {
    flex-shrink: 0; align-self: center;
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 8px;
  }
  .prac-score {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    color: var(--ok);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .prac-score .total { color: var(--ink-3); font-size: 14px; font-weight: 500; }
  .prac-score-label { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

  .prac-cta {
    appearance: none; border: 0; cursor: pointer;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s ease, transform .12s ease;
    white-space: nowrap;
  }
  .prac-cta:active { transform: scale(0.97); }
  .prac-cta.primary { background: var(--ink); color: var(--bg-elev); }
  .prac-cta.primary:hover { background: var(--ink-2); }
  .prac-cta.secondary { background: var(--bg-sunk); color: var(--ink); }
  .prac-cta.secondary:hover { background: var(--accent-soft); color: var(--accent-ink); }
  .prac-cta svg { width: 13px; height: 13px; }

  .prac-feedback-strip {
    grid-column: 2 / -1;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg);
    border: 0.5px solid var(--line-2);
    font-size: 13px;
    color: var(--ink-2);
    display: flex; gap: 10px; align-items: flex-start;
    line-height: 1.55;
  }
  .prac-feedback-strip svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--accent); margin-top: 2px; }
  .prac-feedback-strip b { color: var(--ink); }
  .prac-feedback-strip .ai-tag {
    flex-shrink: 0;
    margin-inline-start: auto;
    padding: 2px 8px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-ink);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  }

  /* ── Workspace ── */
  .ws {
    position: fixed; inset: 0; z-index: 60;
    background: var(--bg);
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }
  .ws.has-footer { grid-template-rows: auto 1fr auto; }
  /* Slim site footer — gives the focused workspace a sense of belonging. */
  .ws-foot {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 22px;
    background: var(--bg-elev);
    border-top: 0.5px solid var(--line);
    font-size: 12px; color: var(--ink-3);
    white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .ws-foot::-webkit-scrollbar { display: none; }
  .ws-foot .spacer { flex: 1; }
  .ws-foot a { color: var(--ink-2); text-decoration: none; transition: color .15s ease; }
  .ws-foot a:hover { color: var(--ink); }
  .ws-foot-brand {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display); font-weight: 600; color: var(--ink) !important;
  }
  .ws-foot-brand b { color: var(--accent); font-weight: 700; }
  .ws-foot-mark {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--ok)));
    border-radius: 6px; padding: 2px 5px; line-height: 1;
  }
  .ws-foot-sep, .ws-foot-mut { color: var(--ink-4); }
  .ws-foot-mut { font-size: 11.5px; }
  .ws-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 22px;
    background: var(--bg-elev);
    border-bottom: 0.5px solid var(--line);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  }
  .ws-back {
    appearance: none; border: 0.5px solid var(--line);
    background: var(--bg);
    color: var(--ink-2);
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500;
    transition: background .15s ease, color .15s ease;
  }
  .ws-back:hover { background: var(--bg-sunk); color: var(--ink); }
  .ws-back svg { width: 14px; height: 14px; }
  .ws-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
  .ws-bar .spacer { flex: 1; }
  .ws-bar .ws-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px;
    color: var(--ink-3);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-sunk);
  }
  .ws-bar .ws-status.dirty { background: rgba(245,185,30,0.16); color: #8a6800; }
  .ws-bar .ws-status.saved { background: var(--ok-soft); color: var(--ok); }
  html[data-dark="1"] .ws-bar .ws-status.dirty { color: #f5c878; }
  .ws-bar .ws-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

  /* Toggle instructions button in toolbar */
  .ws-inst-toggle {
    appearance: none; border: 0.5px solid var(--line);
    background: var(--bg);
    color: var(--ink-2);
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 500;
    transition: background .15s ease, color .15s ease;
  }
  .ws-inst-toggle:hover { background: var(--bg-sunk); color: var(--ink); }
  .ws-inst-toggle.active { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 24%, transparent); color: var(--accent-ink); }
  .ws-inst-toggle svg { width: 14px; height: 14px; }

  .ws-btn {
    appearance: none; border: 0; cursor: pointer;
    padding: 9px 17px;
    border-radius: 999px;
    font-size: 13.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background .15s ease, transform .12s ease;
  }
  .ws-btn:active { transform: scale(0.97); }
  .ws-btn.primary { background: var(--accent); color: #fff; }
  .ws-btn.primary:hover { background: color-mix(in oklab, var(--accent) 90%, black 10%); }
  .ws-btn.success { background: var(--ok); color: #fff; }
  .ws-btn.success:hover { background: color-mix(in oklab, var(--ok) 92%, black 8%); }
  .ws-btn.ghost { background: transparent; color: var(--ink-2); border: 0.5px solid var(--line); }
  .ws-btn.ghost:hover { background: var(--bg-sunk); color: var(--ink); }
  .ws-btn.warn { background: transparent; color: var(--warn); border: 0.5px solid color-mix(in oklab, var(--warn) 35%, var(--line)); }
  .ws-btn.warn:hover { background: rgba(201,122,43,0.08); }
  .ws-btn.disabled { background: var(--bg-sunk); color: var(--ink-3); pointer-events: none; }
  .ws-btn svg { width: 14px; height: 14px; }

  /* Workspace body — instructions (right in RTL) + editor (left in RTL).
     Resizer column between them. No preview pane. */
  .ws-body {
    display: grid;
    grid-template-columns: var(--ws-inst-w, 320px) 6px 1fr;
    gap: 8px;
    padding: 14px;
    min-height: 0;
    background: var(--bg);
    position: relative;
  }
  .ws-body.inst-collapsed { grid-template-columns: 40px 6px 1fr; }

  .ws-resizer {
    width: 6px;
    background: var(--line);
    cursor: col-resize;
    position: relative;
    align-self: stretch;
    border-radius: 3px;
    transition: background .15s ease;
    user-select: none;
  }
  .ws-resizer::before {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 36px;
    border-radius: 3px;
    background: var(--ink-3);
    opacity: 0.5;
    transition: opacity .15s ease, background .15s ease;
  }
  .ws-resizer:hover { background: color-mix(in oklab, var(--accent) 35%, var(--line)); }
  .ws-resizer:hover::before { opacity: 1; background: var(--accent); }
  .ws-resizer.dragging { background: var(--accent); }
  .ws-resizer.dragging::before { opacity: 1; background: #fff; height: 56px; }

  /* Collapsed instructions rail */
  .ws-inst-rail {
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 14px;
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 0;
    gap: 8px;
  }
  .ws-inst-rail-btn {
    appearance: none; border: 0; background: transparent;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
  }
  .ws-inst-rail-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
  .ws-inst-rail-btn svg { width: 16px; height: 16px; }
  .ws-inst-rail-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 12px; font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-top: 6px;
  }

  /* Pane header — add a close button when paired with instructions */
  .ws-pane-head .ws-collapse {
    margin-inline-start: auto;
    appearance: none; border: 0; background: transparent;
    width: 26px; height: 26px;
    border-radius: 6px;
    color: var(--ink-3);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ws-pane-head .ws-collapse:hover { background: var(--bg-sunk); color: var(--ink); }
  .ws-pane-head .ws-collapse svg { width: 14px; height: 14px; }

  .ws-pane {
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 0;
  }
  .ws-pane-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--line-2);
    font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .ws-pane-head svg { width: 14px; height: 14px; color: var(--ink-3); }
  .ws-pane-head .menu {
    margin-inline-start: auto;
    display: flex; gap: 6px;
  }
  .ws-pane-head .menu button {
    appearance: none; border: 0; background: transparent;
    color: var(--ink-3); cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
    font-size: 11.5px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
  }
  .ws-pane-head .menu button:hover { background: var(--bg-sunk); color: var(--ink); }
  .ws-pane-head .menu button svg { width: 12px; height: 12px; vertical-align: middle; margin-inline-start: 4px; color: inherit; }

  /* Instructions slide-in panel (drawer-from-right in RTL) */
  .ws-inst-drawer {
    position: absolute; top: 14px; bottom: 14px;
    inset-inline-end: 14px;
    width: 380px;
    z-index: 25;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.16);
    animation: wsInstIn .28s cubic-bezier(.16,1,.3,1);
  }
  @keyframes wsInstIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  html[dir="rtl"] .ws-inst-drawer { animation-name: wsInstInRtl; }
  @keyframes wsInstInRtl {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  .ws-inst-drawer-overlay {
    position: absolute; inset: 0; z-index: 20;
    background: rgba(0,0,0,0.18);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: wsFadeIn .2s ease-out;
  }
  @keyframes wsFadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* Instructions pane */
  .ws-inst-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 18px 22px 28px;
  }
  .ws-inst-close {
    appearance: none; border: 0; background: var(--bg-sunk);
    width: 30px; height: 30px; border-radius: 50%;
    color: var(--ink-2); cursor: pointer;
    margin-inline-start: auto;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ws-inst-close:hover { background: var(--accent-soft); color: var(--accent-ink); }
  .ws-inst-close svg { width: 14px; height: 14px; }
  .ws-inst-title {
    font-family: var(--font-display);
    font-size: 19px; font-weight: 700; line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
  }
  /* Guest mode banner inside the workspace instructions pane */
  .ws-guest-banner {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 12px 0 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: color-mix(in oklab, var(--accent) 8%, var(--bg-elev));
    border: 0.5px solid color-mix(in oklab, var(--accent) 28%, var(--line));
  }
  .ws-guest-banner-ic {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--bg-elev);
    border: 0.5px solid color-mix(in oklab, var(--accent) 26%, var(--line));
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .ws-guest-banner-ic svg { width: 16px; height: 16px; }
  .ws-guest-banner-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
  }
  .ws-guest-banner-text {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  .ws-guest-banner-text a {
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
    text-underline-offset: 2px;
  }
  .ws-guest-banner-text a:hover {
    text-decoration-color: var(--accent);
  }

  .ws-inst-diff {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    margin-bottom: 14px;
  }
  .ws-inst-body p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0 0 12px; }
  .ws-inst-body h4 {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600;
    margin: 18px 0 8px;
    color: var(--ink);
  }
  .ws-inst-body ul { padding-inline-start: 22px; margin: 0 0 12px; }
  .ws-inst-body li { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; line-height: 1.55; }
  .ws-inst-body code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--bg-sunk); padding: 2px 6px; border-radius: 4px;
    direction: ltr; display: inline-block;
  }
  .ws-inst-criteria {
    background: var(--bg);
    border: 0.5px solid var(--line-2);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 6px 0;
  }
  .ws-inst-criteria .ws-crit-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 6px 0;
    font-size: 13px; color: var(--ink-2);
    border-bottom: 0.5px solid var(--line-2);
  }
  .ws-inst-criteria .ws-crit-item:last-child { border-bottom: 0; }
  .ws-inst-criteria svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--ink-4); }
  .ws-inst-criteria .ws-crit-item.done svg { color: var(--ok); }
  .ws-inst-criteria .ws-crit-item.done { color: var(--ink); }

  /* Preview pane */
  .ws-preview-frame {
    flex: 1; min-height: 0;
    background: #fff;
    border: 0;
    width: 100%;
  }
  .ws-preview-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-top: 0.5px solid var(--line-2);
    background: var(--bg-sunk);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    direction: ltr;
  }
  .ws-preview-bar .ws-pv-dots { display: flex; gap: 5px; margin-inline-end: 4px; }
  .ws-preview-bar .ws-pv-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); }
  .ws-preview-bar .ws-pv-url {
    flex: 1;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--bg-elev);
    color: var(--ink-2);
  }

  /* AI grading overlay */
  .ws-grading-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
  }
  .ws-grading-card {
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 22px;
    padding: 36px 44px;
    text-align: center;
    min-width: 380px; max-width: 480px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  }
  .ws-grading-spinner {
    width: 56px; height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 3.5px solid var(--bg-sunk);
    border-top-color: var(--accent);
    animation: wsSpin 0.8s linear infinite;
  }
  @keyframes wsSpin { to { transform: rotate(360deg); } }
  .ws-grading-card h3 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700; margin: 0 0 6px;
  }
  .ws-grading-card p { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
  .ws-grading-steps {
    text-align: start;
    background: var(--bg);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px;
  }
  .ws-grading-steps li {
    display: flex; gap: 10px; padding: 4px 0;
    color: var(--ink-3);
    list-style: none;
  }
  .ws-grading-steps li.active { color: var(--ink); }
  .ws-grading-steps li.done { color: var(--ok); }
  .ws-grading-steps li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

  /* Result panel — shown in instructions pane after submit */
  .ws-result {
    background: linear-gradient(135deg, var(--ok-soft), color-mix(in oklab, var(--accent-soft) 60%, transparent));
    border: 0.5px solid color-mix(in oklab, var(--ok) 22%, transparent);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
  }
  .ws-result-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .ws-result-score {
    font-family: var(--font-display);
    font-size: 36px; font-weight: 700; color: var(--ok);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .ws-result-score .total { color: var(--ink-3); font-size: 18px; font-weight: 500; }
  .ws-result-head .lbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok); margin-bottom: 4px; }
  .ws-result-head .sub { font-size: 12.5px; color: var(--ink-2); }
  .ws-result-fb { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
  .ws-result-fb b { color: var(--ink); }
  .ws-result-fb ul { padding-inline-start: 22px; margin: 6px 0 0; }
  .ws-result-fb li { margin-bottom: 4px; }

  .ws-solution-btn {
    margin-top: 14px;
    appearance: none; cursor: pointer;
    width: 100%;
    border: 0.5px solid var(--accent);
    background: var(--bg-elev);
    color: var(--accent);
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 13.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s ease;
  }
  .ws-solution-btn:hover { background: var(--accent-soft); }
  .ws-solution-btn svg { width: 14px; height: 14px; }
  .ws-solution-btn.locked {
    color: var(--ink-3);
    border-color: var(--line);
    background: var(--bg-sunk);
    cursor: not-allowed;
  }

  /* Solution drawer */
  .ws-sol-drawer {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: 560px; max-width: 80vw;
    background: var(--bg-elev);
    box-shadow: 12px 0 40px rgba(0,0,0,0.18);
    z-index: 250;
    display: flex; flex-direction: column;
    animation: wsSlideIn .25s cubic-bezier(.16,1,.3,1);
  }
  html[dir="rtl"] .ws-sol-drawer { inset-inline-start: auto; inset-inline-end: 0; box-shadow: -12px 0 40px rgba(0,0,0,0.18); }
  @keyframes wsSlideIn {
    from { transform: translateX(-100%); opacity: 0.5; }
    to { transform: translateX(0); opacity: 1; }
  }
  html[dir="rtl"] .ws-sol-drawer { animation-name: wsSlideInRtl; }
  @keyframes wsSlideInRtl {
    from { transform: translateX(100%); opacity: 0.5; }
    to { transform: translateX(0); opacity: 1; }
  }
  .ws-sol-overlay {
    position: fixed; inset: 0; z-index: 240;
    background: rgba(0,0,0,0.32);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .ws-sol-head {
    padding: 18px 22px;
    border-bottom: 0.5px solid var(--line);
    display: flex; align-items: center; gap: 12px;
  }
  .ws-sol-head h3 {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 700; margin: 0;
  }
  .ws-sol-head .ws-sol-eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 2px;
  }
  .ws-sol-close {
    margin-inline-start: auto;
    appearance: none; border: 0; background: var(--bg-sunk);
    width: 32px; height: 32px; border-radius: 50%;
    color: var(--ink-2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ws-sol-close svg { width: 14px; height: 14px; }
  .ws-sol-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 18px 22px;
  }

  /* Solution drawer file tabs */
  .ws-sol-tabs {
    display: flex; align-items: stretch;
    border-bottom: 0.5px solid var(--line);
    background: var(--bg);
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .ws-sol-tabs::-webkit-scrollbar { height: 0; display: none; }
  .ws-sol-tab {
    appearance: none; border: 0; background: transparent;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 11px 16px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    border-inline-end: 0.5px solid var(--line-2);
    transition: background .15s ease, color .15s ease;
    direction: ltr;
    white-space: nowrap;
    position: relative;
  }
  .ws-sol-tab:hover { background: var(--bg-sunk); color: var(--ink-2); }
  .ws-sol-tab.active {
    background: var(--bg-elev);
    color: var(--ink);
    font-weight: 500;
  }
  .ws-sol-tab.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--accent);
  }
  .ws-sol-tab-ic {
    width: 14px; height: 14px; border-radius: 3px;
    color: #fff; font-size: 9px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ws-sol-tab-mark { color: var(--accent); font-size: 8px; margin-inline-start: 2px; }

  /* ── Mobile: full-screen editor with an explicit editor⇄instructions toggle ── */
  .ws-mobile-toggle { display: none; }
  @media (max-width: 760px) {
    /* bar + toggle are auto, body takes the rest */
    .ws { grid-template-rows: auto auto 1fr !important; }
    .ws.has-footer { grid-template-rows: auto auto 1fr auto !important; }
    .ws-foot { padding: 8px 14px; gap: 10px; font-size: 11.5px; }
    .ws-foot-mut:last-child { display: none; }
    .ws-mobile-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 8px 10px;
      background: var(--bg-elev);
      border-bottom: 0.5px solid var(--line);
      position: sticky; top: 0; z-index: 7;
    }
    .ws-mobile-toggle button {
      appearance: none; cursor: pointer;
      border: 0.5px solid var(--line);
      background: var(--bg-sunk); color: var(--ink-2);
      font: inherit; font-size: 13.5px; font-weight: 600;
      padding: 11px 10px; border-radius: 11px;
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .ws-mobile-toggle button svg { width: 16px; height: 16px; }
    .ws-mobile-toggle button.active {
      background: var(--ink); color: var(--bg-elev); border-color: var(--ink);
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    /* One pane at a time, edge to edge, filling all remaining height */
    .ws-body {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: 1fr !important;
      gap: 0 !important;
      padding: 0 !important;
      min-height: 0 !important;
    }
    .ws-resizer { display: none !important; }
    .ws-inst-rail { display: none !important; }
    /* Drop the file rail on mobile — the file TABS above already switch files,
       and the rail eats ~210px of precious code width. */
    .ws-ide-wrap .ide-rail { display: none !important; }
    .ws-body[data-mobile="editor"] .ws-pane { display: none !important; }
    .ws-body[data-mobile="instructions"] .ws-ide-wrap { display: none !important; }
    .ws-pane,
    .ws-ide-wrap {
      flex: 1 1 auto !important;
      width: 100% !important;
      min-height: 0 !important;
      height: auto !important;
      border-radius: 0 !important;
      border-left: 0 !important; border-right: 0 !important;
    }
    /* The toggle above already labels the pane — drop the pane's own header
       (title + collapse chevron) on mobile; it's redundant and eats height. */
    .ws-pane .ws-pane-head { display: none !important; }
    /* Smooth touch scrolling for the instructions; room to breathe at the end. */
    .ws-inst-body {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding-bottom: 40px !important;
    }
    /* Keep the toolbar to one tidy row instead of a tall wrap that eats screen. */
    .ws-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ws-bar::-webkit-scrollbar { display: none; }
    .ws-bar .ws-title { display: none; }
  }



  .proj {
    max-width: 1280px; margin: 0 auto;
    padding: 44px 32px 96px;
  }

  /* Project hero — elegant title block */
  .proj-hero {
    background:
      radial-gradient(700px 400px at 80% 20%, color-mix(in oklab, var(--accent) 14%, var(--bg-elev)), transparent 70%),
      linear-gradient(135deg, var(--bg-elev), color-mix(in oklab, var(--ok-soft) 50%, var(--bg-elev)));
    border: 0.5px solid var(--line);
    border-radius: 22px;
    padding: 32px 36px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-card-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .proj-hero-text { min-width: 0; }
  .proj-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    padding: 5px 12px 5px 11px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 0.5px solid color-mix(in oklab, var(--accent) 18%, transparent);
  }
  .proj-hero-eyebrow svg { width: 13px; height: 13px; }
  .proj-hero-title {
    font-family: var(--font-display);
    font-size: 46px; line-height: 1.05; font-weight: 700;
    letter-spacing: -0.024em;
    margin: 0 0 14px;
    color: var(--ink);
    text-wrap: balance;
  }
  html[data-theme="editorial"] .proj-hero-title { font-size: 54px; }
  .proj-hero-sub {
    font-size: 17px; color: var(--ink-2);
    margin: 0;
    max-width: 80ch;
    line-height: 1.5;
    text-wrap: pretty;
  }
  .proj-hero-side {
    display: flex; flex-direction: column; gap: 14px;
    align-items: flex-end;
    text-align: end;
  }
  .proj-hero-meta {
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .proj-hero-meta b {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .proj-hero-meta span {
    font-size: 12px; color: var(--ink-3);
  }
  .proj-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    background: var(--bg-sunk); color: var(--ink-2);
  }
  .proj-status-pill svg { width: 14px; height: 14px; }
  .proj-status-pill.not-started { background: var(--bg-sunk); color: var(--ink-3); }
  .proj-status-pill.in-progress { background: var(--accent-soft); color: var(--accent-ink); }
  .proj-status-pill.submitted   { background: rgba(245,185,30,0.16); color: #8a6800; }
  .proj-status-pill.completed   { background: var(--ok-soft); color: var(--ok); }
  html[data-dark="1"] .proj-status-pill.submitted { color: #f5c878; }

  /* Body layout */
  .proj-body {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
  }
  .proj-main { display: flex; flex-direction: column; gap: 22px; }
  .proj-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h, 0px) + 16px); }

  /* Project — mobile: stack the hero + body columns, the side panel moves below. */
  @media (max-width: 760px) {
    .proj { padding: 28px 16px 64px; }
    .proj-hero {
      grid-template-columns: 1fr; gap: 18px; align-items: start;
      margin-bottom: 26px; padding-bottom: 22px;
    }
    .proj-hero-title { font-size: 30px; }
    .proj-hero-side { align-items: flex-start; text-align: start; }
    .proj-hero-meta { align-items: flex-start; }
    .proj-body { grid-template-columns: 1fr; gap: 18px; }
    .proj-side { position: static; top: auto; }
  }

  .proj-section {
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: var(--shadow-card);
  }
  .proj-section h3 {
    font-family: var(--font-display);
    font-size: 19px; font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 10px;
  }
  .proj-section h3 .step-n {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .proj-section p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 14px; }
  .proj-section ul { padding-inline-start: 22px; margin: 0; }
  .proj-section li { font-size: 14.5px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.55; }
  .proj-section code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--bg-sunk); padding: 2px 6px; border-radius: 5px;
    direction: ltr; display: inline-block;
  }
  .proj-section pre {
    direction: ltr; text-align: left;
    background: var(--bg-sunk);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 10px 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.7;
    overflow-x: auto;
  }
  .proj-section pre .c { color: var(--ink-3); }
  .proj-section pre .f { color: var(--accent); font-weight: 500; }

  /* Folder tree */
  .proj-tree {
    background: var(--bg);
    border: 0.5px solid var(--line-2);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 8px 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.85;
    direction: ltr; text-align: left;
  }
  .proj-tree .folder { color: var(--accent); font-weight: 600; }
  .proj-tree .file { color: var(--ink-2); }
  .proj-tree .file .ic {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 3px;
    margin-inline-end: 6px; vertical-align: -2px;
    text-align: center; line-height: 14px;
    color: #fff; font-weight: 700; font-size: 9px;
  }
  .proj-tree .file .ic.html { background: #e08a4f; }
  .proj-tree .file .ic.css  { background: #4f9eed; }
  .proj-tree .file .ic.js   { background: #f5c878; color: #2a1f00; }

  /* Checklist */
  .proj-check {
    display: flex; flex-direction: column; gap: 6px;
  }
  .proj-check-item {
    border: 0.5px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elev);
    overflow: hidden;
    transition: border-color .15s ease;
  }
  .proj-check-item[open] { border-color: color-mix(in oklab, var(--accent) 26%, var(--line)); }
  .proj-check-item > summary {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
  }
  .proj-check-item > summary::-webkit-details-marker { display: none; }
  .proj-check-item > summary:hover { background: var(--bg-sunk); }
  .proj-check-item > summary::after {
    content: ""; flex-shrink: 0;
    width: 9px; height: 9px;
    border-inline-end: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform .2s ease;
    margin-inline-start: 4px;
  }
  .proj-check-item[open] > summary::after { transform: rotate(-135deg); }
  .proj-check-body {
    padding: 0 16px 14px 48px;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.65;
  }
  .proj-check-body p { margin: 0 0 8px; }
  .proj-check-body ul { padding-inline-start: 20px; margin: 6px 0 0; }
  .proj-check-body li { margin-bottom: 4px; }
  .proj-check-body code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--bg-sunk); padding: 1px 6px; border-radius: 4px;
    direction: ltr; display: inline-block;
  }
  .proj-check-box {
    appearance: none; cursor: pointer; padding: 0;
    width: 22px; height: 22px;
    border-radius: 7px;
    border: 1.5px solid var(--ink-4);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent;
    transition: all .15s ease;
  }
  .proj-check-item:hover .proj-check-box { border-color: var(--ink-3); }
  .proj-check-item.done .proj-check-box {
    background: var(--ok); border-color: var(--ok); color: #fff;
  }
  .proj-check-item.in_progress .proj-check-box {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }
  .proj-check-box svg { width: 14px; height: 14px; }
  .proj-check-text {
    font-size: 14.5px; color: var(--ink); flex: 1;
    line-height: 1.4;
  }
  .proj-check-item.done .proj-check-text {
    color: var(--ink-3);
    text-decoration: line-through;
    text-decoration-color: var(--ink-4);
  }
  .proj-check-state {
    font-size: 11.5px; font-weight: 600;
    padding: 3px 10px; border-radius: 999px;
    background: var(--bg-sunk); color: var(--ink-3);
    flex-shrink: 0;
  }
  .proj-check-item.done .proj-check-state { background: var(--ok-soft); color: var(--ok); }
  .proj-check-item.in_progress .proj-check-state { background: var(--accent-soft); color: var(--accent-ink); }

  /* Upload zone — premium drag-drop card */
  .proj-upload-wrap {
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--accent-soft) 65%, var(--bg-elev)),
      color-mix(in oklab, var(--ok-soft) 50%, var(--bg-elev)) 110%);
    border: 0.5px solid color-mix(in oklab, var(--accent) 18%, var(--line));
    border-radius: 18px;
    padding: 8px;
    position: relative;
    overflow: hidden;
  }
  .proj-upload-wrap::before {
    content: ""; position: absolute;
    inset-inline-end: -120px; top: -120px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%);
    pointer-events: none;
  }
  .proj-upload {
    position: relative; z-index: 1;
    display: block;
    border: 2px dashed color-mix(in oklab, var(--accent) 40%, transparent);
    border-radius: 14px;
    background: var(--bg-elev);
    padding: 36px 28px;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    cursor: pointer;
  }
  .proj-upload:hover {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent-soft) 30%, var(--bg-elev));
    transform: translateY(-1px);
  }
  .proj-upload-icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--ok)));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px color-mix(in oklab, var(--accent) 38%, transparent);
    position: relative;
  }
  .proj-upload-icon::after {
    content: ""; position: absolute; inset: -6px;
    border: 1.5px dashed color-mix(in oklab, var(--accent) 30%, transparent);
    border-radius: 24px;
    animation: projDash 12s linear infinite;
  }
  @keyframes projDash {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .proj-upload-icon svg { width: 30px; height: 30px; }
  .proj-upload-title {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .proj-upload-hint { font-size: 13.5px; color: var(--ink-2); margin: 0 0 4px; }
  .proj-upload-or {
    font-size: 12px; color: var(--ink-3);
    margin: 12px 0 8px;
    display: flex; align-items: center; gap: 10px;
  }
  .proj-upload-or::before, .proj-upload-or::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
  }
  .proj-upload-browse {
    appearance: none; border: 0; cursor: pointer;
    background: var(--ink); color: var(--bg-elev);
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13.5px; font-weight: 600;
    transition: background .15s ease, transform .12s ease;
    pointer-events: none; /* parent label handles click */
  }
  .proj-upload-browse:hover { background: var(--ink-2); }
  .proj-upload-formats {
    margin-top: 18px;
    font-size: 12px; color: var(--ink-3);
    display: inline-flex; gap: 10px; flex-wrap: wrap;
    justify-content: center;
  }
  .proj-upload-formats .fmt {
    padding: 3px 10px; border-radius: 999px;
    background: var(--bg-sunk);
    border: 0.5px solid var(--line);
    font-family: var(--font-mono);
  }
  .proj-upload-formats .fmt b { color: var(--ink-2); }

  /* ZIP upload — interactive states (ui/project.js): drag-over, uploading,
     submitted-lock, and the post-upload status line. */
  .proj-upload.dragover { border-color: var(--accent); background: var(--accent-soft); }
  .proj-upload.uploading { opacity: 0.7; pointer-events: none; }
  .proj-upload-done { text-align: center; }
  .proj-upload-done .proj-upload-icon { color: var(--ok); }
  .proj-upload-link {
    display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
    color: var(--accent-ink);
  }
  .proj-upload-status {
    margin-top: 14px; display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-2);
  }
  .proj-upload-status[hidden] { display: none; }
  .proj-upload-status .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--warn, #d6a017); flex: none;
  }
  .proj-upload-status a { color: var(--accent-ink); font-weight: 600; }

  /* Uploaded file preview */
  .proj-uploaded {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    box-shadow: var(--shadow-card);
  }
  .proj-uploaded-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ok);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .proj-uploaded-icon svg { width: 22px; height: 22px; }
  .proj-uploaded-body { flex: 1; min-width: 0; }
  .proj-uploaded-name {
    font-weight: 600; font-size: 14.5px;
    direction: ltr; text-align: start;
    font-family: var(--font-mono);
    margin: 0 0 3px;
  }
  .proj-uploaded-meta { font-size: 12px; color: var(--ink-3); }

  .proj-actions {
    display: flex; gap: 10px; align-items: center;
    margin-top: 18px;
  }
  .proj-btn {
    appearance: none; cursor: pointer; border: 0;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s ease, transform .12s ease;
  }
  .proj-btn:active { transform: scale(0.98); }
  .proj-btn.primary { background: var(--accent); color: #fff; }
  .proj-btn.primary:hover { background: color-mix(in oklab, var(--accent) 90%, black 10%); }
  .proj-btn.ghost { background: transparent; color: var(--ink-2); border: 0.5px solid var(--line); }
  .proj-btn.ghost:hover { background: var(--bg-sunk); color: var(--ink); }
  .proj-btn.disabled { background: var(--bg-sunk); color: var(--ink-3); cursor: not-allowed; }
  .proj-btn svg { width: 15px; height: 15px; }

  /* Submitted state — clean confirmation card */
  .proj-submitted {
    padding: 22px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--ok) 14%, var(--bg-elev)),
      color-mix(in oklab, var(--accent) 8%, var(--bg-elev)) 100%);
    border: 0.5px solid color-mix(in oklab, var(--ok) 26%, transparent);
    display: flex; gap: 16px; align-items: center;
    box-shadow: var(--shadow-card);
  }
  .proj-submitted-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--ok);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px color-mix(in oklab, var(--ok) 38%, transparent);
  }
  .proj-submitted-icon svg { width: 24px; height: 24px; }
  .proj-submitted-body { flex: 1; min-width: 0; }
  .proj-submitted-title {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .proj-submitted-sub {
    font-size: 13.5px; color: var(--ink-2);
    line-height: 1.55;
  }
  .proj-submitted-sub b { color: var(--ink); font-weight: 600; }
  .proj-submitted-eta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--bg-elev);
    border: 0.5px solid color-mix(in oklab, var(--ok) 22%, transparent);
    border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    color: var(--ok);
  }
  .proj-submitted-eta svg { width: 14px; height: 14px; }

  /* AI checking (legacy, retained for when grading does happen instantly) */
  .proj-checking {
    padding: 20px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-soft), transparent 80%);
    border: 0.5px solid color-mix(in oklab, var(--accent) 22%, transparent);
    display: flex; gap: 14px; align-items: center;
  }
  .proj-checking-spinner {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid var(--bg-sunk);
    border-top-color: var(--accent);
    animation: projSpin 0.8s linear infinite;
  }
  @keyframes projSpin { to { transform: rotate(360deg); } }
  .proj-checking-text {
    font-size: 14px; color: var(--ink);
  }
  .proj-checking-text b { display: block; margin-bottom: 2px; }
  .proj-checking-text span { font-size: 12.5px; color: var(--ink-3); }

  /* Result */
  .proj-result {
    padding: 26px 28px;
    border-radius: 18px;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--ok) 16%, var(--bg-elev)),
      color-mix(in oklab, var(--accent) 8%, var(--bg-elev)) 60%,
      var(--bg-elev));
    border: 0.5px solid color-mix(in oklab, var(--ok) 26%, transparent);
    box-shadow: var(--shadow-card-lg);
  }
  .proj-result-head { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; }
  .proj-result-score {
    font-family: var(--font-display);
    font-size: 52px; font-weight: 700; color: var(--ok);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .proj-result-score .total { color: var(--ink-3); font-size: 24px; font-weight: 500; }
  .proj-result-head .lbl {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ok); margin-bottom: 4px;
  }
  .proj-result-head h4 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700; margin: 0;
  }
  .proj-result-fb {
    font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
    margin: 0;
  }
  .proj-result-fb b { color: var(--ink); }
  .proj-result-list {
    margin-top: 14px;
    background: var(--bg-elev);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .proj-result-list .item {
    display: flex; gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 0.5px solid var(--line-2);
    line-height: 1.5;
  }
  .proj-result-list .item:last-child { border-bottom: 0; }
  .proj-result-list .item svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; }
  .proj-result-list .item.pass svg { color: var(--ok); }
  .proj-result-list .item.note svg { color: var(--accent); }
  .proj-result-list .item.warn svg { color: var(--warn); }
  .proj-result-list .item b { color: var(--ink); }

  /* Side pane (sticky stats) */
  .proj-side-card {
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
  }
  .proj-side-card h4 {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600;
    margin: 0 0 12px;
    color: var(--ink);
  }
  .proj-side-card .stat {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--line-2);
    font-size: 13.5px;
  }
  .proj-side-card .stat:last-child { border-bottom: 0; }
  .proj-side-card .stat .lbl { color: var(--ink-3); }
  .proj-side-card .stat .val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .proj-side-card .stat .val.ok { color: var(--ok); }

  .proj-side-progress {
    margin-top: 12px;
    height: 7px;
    background: var(--bg-sunk);
    border-radius: 999px;
    overflow: hidden;
  }
  .proj-side-progress > i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--ok));
    width: var(--p, 0%);
    transition: width .4s cubic-bezier(.16,1,.3,1);
    border-radius: 999px;
  }



  /* Wrapper takes the full page width below the breadcrumb. */
  .pw-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 32px 80px;
    position: relative;
  }
  @media (max-width: 720px) {
    .pw-shell { padding: 18px 14px 50px; }
    .pw-context-row { gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
    .pw-grid { gap: 18px; }
    .pw-card { border-radius: 18px; }
    .pw-card-inner { padding: 26px 20px 22px; }
    .pw-monogram {
      width: 72px; height: 72px;
      border-radius: 18px;
      margin-bottom: 18px;
    }
    .pw-monogram svg { width: 30px; height: 30px; }
    .pw-card h1 {
      font-size: 26px;
      max-width: 100%;
      margin-bottom: 14px;
    }
    .pw-card .pw-desc { font-size: 14.5px; margin-bottom: 20px; }
    .pw-feats li { font-size: 14px; padding: 12px 0; gap: 12px; }
    .pw-feats .ic { width: 24px; height: 24px; }
    .pw-feats .ic svg { width: 12px; height: 12px; }

    .pw-cta-primary { padding: 13px 22px; font-size: 14px; flex: 1; justify-content: center; }
    .pw-cta-ghost { padding: 12px 16px; font-size: 13.5px; }
    .pw-actions { gap: 8px; }
    .pw-trust { gap: 10px; font-size: 11.5px; padding-top: 14px; }
    .pw-trust .item { font-size: 11px; }

    .pw-preview { border-radius: 18px; padding: 20px 18px 22px; }
    .pw-preview-head h3 { font-size: 15px; }
    .pw-item { padding: 9px 10px; font-size: 13px; gap: 10px; }
    .pw-item .meta { font-size: 10.5px; }
    .pw-item .lk { width: 20px; height: 20px; }

    .pw-plans { padding: 16px 18px; gap: 14px; border-radius: 16px; }
    .pw-plans-text h4 { font-size: 14.5px; }
    .pw-plans-text p { font-size: 12.5px; }
    .pw-plan-pill { min-width: 90px; padding: 9px 14px; flex: 1; }
    .pw-plan-pill .pr { font-size: 16px; }
  }

  @media (max-width: 420px) {
    .pw-card h1 { font-size: 22px; }
    .pw-context-row .crumb { font-size: 11px; padding: 4px 9px; }
    .pw-eyebrow { font-size: 10.5px; padding: 5px 11px; }
  }

  .pw-context-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 22px;
    font-size: 12px;
    color: var(--ink-3);
  }
  .pw-context-row .crumb {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    color: var(--ink-2);
    font-size: 11.5px; font-weight: 500;
  }
  .pw-context-row .crumb svg { width: 12px; height: 12px; }
  .pw-context-row .crumb b { color: var(--ink); font-weight: 600; }
  .pw-context-row .sep { color: var(--ink-4); }

  /* Two-column grid: messaging | locked-content preview */
  .pw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  @media (max-width: 980px) {
    .pw-grid { grid-template-columns: 1fr; }
  }

  /* ── Left rail: editorial paywall card ───────────────────────── */
  .pw-card {
    position: relative;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.7) inset,
      0 1px 3px rgba(20,18,12,0.04),
      0 30px 80px rgba(20,18,12,0.08);
  }
  .pw-card-bg {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      radial-gradient(800px 320px at 100% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
      radial-gradient(600px 260px at -10% 0%, color-mix(in oklab, #f5b91e 18%, transparent), transparent 60%);
  }
  html[data-dark="1"] .pw-card-bg {
    background:
      radial-gradient(800px 320px at 100% -10%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%),
      radial-gradient(600px 260px at -10% 0%, color-mix(in oklab, #f5b91e 22%, transparent), transparent 60%);
  }

  .pw-card-inner {
    position: relative;
    padding: 40px 44px 36px;
  }

  /* Big monogram lock — feels intentional, not iconographic */
  .pw-monogram {
    width: 96px; height: 96px;
    border-radius: 24px;
    background:
      linear-gradient(135deg,
        color-mix(in oklab, var(--warn) 22%, var(--bg-elev)),
        color-mix(in oklab, var(--accent) 22%, var(--bg-elev)));
    border: 0.5px solid color-mix(in oklab, var(--warn) 30%, var(--line));
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    margin-bottom: 28px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.7) inset,
      0 12px 28px color-mix(in oklab, var(--warn) 16%, transparent);
  }
  .pw-monogram::after {
    content: ""; position: absolute;
    inset: 7px;
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--warn) 18%, transparent);
    pointer-events: none;
  }
  .pw-monogram svg {
    width: 40px; height: 40px;
    color: color-mix(in oklab, var(--warn) 70%, var(--ink));
  }

  .pw-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--warn) 14%, transparent);
    color: color-mix(in oklab, var(--warn) 78%, var(--ink));
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .pw-eyebrow svg { width: 12px; height: 12px; }
  .pw-eyebrow .pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--warn) 22%, transparent);
  }

  .pw-card h1 {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin: 0 0 18px;
    max-width: 18ch;
    text-wrap: pretty;
  }
  .pw-card h1 em {
    font-style: normal;
    background: linear-gradient(120deg,
      color-mix(in oklab, var(--accent) 75%, var(--ink)),
      color-mix(in oklab, var(--warn) 70%, var(--ink)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .pw-card .pw-desc {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    margin: 0 0 26px;
    max-width: 52ch;
    text-wrap: pretty;
  }

  /* Feature list — minimal rows with subtle dividers */
  .pw-feats {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    border-top: 0.5px solid var(--line-2);
  }
  .pw-feats li {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--line-2);
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  .pw-feats li b { color: var(--ink); font-weight: 600; }
  .pw-feats .ic {
    width: 28px; height: 28px;
    border-radius: 9px;
    background: color-mix(in oklab, var(--ok) 14%, transparent);
    color: var(--ok);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .pw-feats .ic svg { width: 14px; height: 14px; }

  .pw-actions {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .pw-cta-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg-elev);
    font-size: 15px; font-weight: 700;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.18) inset,
      0 8px 20px color-mix(in oklab, var(--ink) 28%, transparent);
    letter-spacing: -0.005em;
  }
  .pw-cta-primary:hover {
    background: var(--ink-2);
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.18) inset,
      0 14px 28px color-mix(in oklab, var(--ink) 32%, transparent);
    text-decoration: none;
  }
  .pw-cta-primary svg { width: 16px; height: 16px; }

  .pw-cta-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 20px;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    border: 0.5px solid var(--line);
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
  }
  .pw-cta-ghost:hover { background: var(--bg-sunk); color: var(--ink); text-decoration: none; }
  .pw-cta-ghost svg { width: 13px; height: 13px; }

  .pw-trust {
    display: flex; align-items: center; gap: 16px;
    padding-top: 18px;
    border-top: 0.5px solid var(--line-2);
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
    flex-wrap: wrap;
  }
  .pw-trust .item {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .pw-trust .item svg { width: 13px; height: 13px; color: var(--ok); }
  .pw-trust .item b { color: var(--ink-2); font-weight: 600; }

  /* ── Right rail: locked preview list ─────────────────────────── */
  .pw-preview {
    position: relative;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 24px;
    padding: 26px 26px 30px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .pw-preview-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 0.5px solid var(--line-2);
    flex-wrap: wrap;
  }
  .pw-preview-head h3 {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.005em;
  }
  .pw-preview-head .count {
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .pw-preview-head .count b { color: var(--ink-2); font-weight: 600; }

  /* Compact type-by-type summary chips, shown above the list. */
  .pw-preview-summary {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 18px;
  }
  .pw-preview-summary .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--bg-sunk);
    border: 0.5px solid var(--line-2);
    font-size: 11.5px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .pw-preview-summary .chip b {
    color: var(--ink);
    font-weight: 700;
  }
  .pw-preview-summary .chip .ic {
    width: 16px; height: 16px;
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pw-preview-summary .chip .ic svg { width: 10px; height: 10px; }
  .pw-preview-summary .chip .ic.video    { background: rgba(79,94,237,0.14);  color: #4f5eed; }
  .pw-preview-summary .chip .ic.book     { background: rgba(184,134,43,0.16); color: #b8862b; }
  .pw-preview-summary .chip .ic.quiz     { background: rgba(31,122,138,0.16); color: #1f7a8a; }
  .pw-preview-summary .chip .ic.code     { background: rgba(138,90,240,0.16); color: #8a5af0; }
  .pw-preview-summary .chip .ic.project  { background: rgba(31,138,90,0.14);  color: #1f8a5a; }

  .pw-preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; flex-direction: column;
    gap: 6px;
    position: relative;
  }
  .pw-preview-group {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 0.5px dashed var(--line-2);
  }
  .pw-preview-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .pw-preview-group-h {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.3;
  }
  .pw-preview-group-h .num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-4);
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--bg-sunk);
    letter-spacing: 0;
    flex-shrink: 0;
  }
  .pw-preview-group-h .ttl {
    flex: 1; min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pw-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--bg-sunk);
    font-size: 13.5px;
    color: var(--ink-2);
    transition: background .15s ease;
    position: relative;
  }
  .pw-item:hover { background: color-mix(in oklab, var(--bg-sunk) 60%, var(--accent-soft)); }
  /* Clickable preview items — made obviously interactive: accent border,
     underline on title, "פתח" CTA on the side that brightens on hover. */
  a.pw-item-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 0.5px solid color-mix(in oklab, var(--accent) 14%, var(--line));
    background: color-mix(in oklab, var(--accent-soft) 50%, var(--bg-sunk));
  }
  a.pw-item-link .nm {
    color: var(--ink);
    text-decoration-line: underline;
    text-decoration-color: color-mix(in oklab, var(--accent) 22%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  a.pw-item-link:hover {
    background: color-mix(in oklab, var(--accent-soft) 80%, var(--bg-elev));
    border-color: color-mix(in oklab, var(--accent) 38%, var(--line));
    text-decoration: none;
    transform: translateX(-2px);
  }
  html[dir="rtl"] a.pw-item-link:hover { transform: translateX(2px); }
  a.pw-item-link:hover .nm {
    text-decoration-color: var(--accent);
  }
  a.pw-item-link .lk-open {
    background: var(--bg-elev);
    border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 4px;
    width: auto;
    padding: 0 8px 0 6px;
    height: 22px;
    border-radius: 11px;
  }
  a.pw-item-link:hover .lk-open {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .pw-item-cta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  /* Small inline lock next to the chevron for free users — signals that the
     destination itself is still gated even though the page is reachable. */
  .pw-item-lock {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-4);
    flex-shrink: 0;
  }
  .pw-item-lock svg { width: 11px; height: 11px; }
  .pw-item .type-ic {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .pw-item .type-ic svg { width: 13px; height: 13px; }
  .pw-item .type-ic.video    { background: rgba(79,94,237,0.14);  color: #4f5eed; }
  .pw-item .type-ic.book     { background: rgba(184,134,43,0.16); color: #b8862b; }
  .pw-item .type-ic.quiz     { background: rgba(31,122,138,0.16); color: #1f7a8a; }
  .pw-item .type-ic.code     { background: rgba(138,90,240,0.16); color: #8a5af0; }
  .pw-item .type-ic.project  { background: rgba(31,138,90,0.14);  color: #1f8a5a; }

  .pw-item .nm {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ink-2);
  }
  .pw-item .meta {
    font-size: 11.5px;
    color: var(--ink-4);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .pw-item .lk {
    color: var(--ink-4);
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
  }
  .pw-item .lk svg { width: 11px; height: 11px; }

  /* ── Bottom strip: subscription plan teaser ──────────────────── */
  .pw-plans {
    grid-column: 1 / -1;
    margin-top: 8px;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 20px;
    padding: 20px 24px;
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-card);
  }
  .pw-plans-text { flex: 1; min-width: 220px; }
  .pw-plans-text h4 {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
  }
  .pw-plans-text p {
    font-size: 13px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.5;
  }
  .pw-plans-row {
    display: flex; gap: 10px;
    flex-wrap: wrap;
  }
  .pw-plan-pill {
    display: inline-flex; flex-direction: column;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--bg-sunk);
    border: 0.5px solid var(--line);
    min-width: 160px;
    transition: border-color .15s, background .15s, transform .15s;
    text-decoration: none;
    color: var(--ink);
  }
  .pw-plan-pill:hover {
    border-color: color-mix(in oklab, var(--accent) 36%, var(--line));
    background: color-mix(in oklab, var(--bg-sunk) 60%, var(--bg-elev));
    transform: translateY(-2px);
    text-decoration: none;
  }
  .pw-plan-pill .nm {
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .pw-plan-pill .pr {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 700;
    color: var(--ink);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .pw-plan-pill .pr small {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    margin-inline-start: 2px;
  }
  .pw-plan-pill.featured {
    background: color-mix(in oklab, var(--accent) 9%, var(--bg-elev));
    border-color: color-mix(in oklab, var(--accent) 38%, var(--line));
  }
  .pw-plan-pill.featured .nm { color: var(--accent-ink); }
  .pw-plan-pill.featured:hover {
    background: color-mix(in oklab, var(--accent) 14%, var(--bg-elev));
    border-color: color-mix(in oklab, var(--accent) 50%, var(--line));
  }
  html[data-dark="1"] .pw-plan-pill.featured {
    background: color-mix(in oklab, var(--accent) 16%, var(--bg-elev));
    border-color: color-mix(in oklab, var(--accent) 48%, var(--line));
  }
  html[data-dark="1"] .pw-plan-pill.featured:hover {
    background: color-mix(in oklab, var(--accent) 22%, var(--bg-elev));
  }

  /* ── Inline / compact variant (for tabs inside other layouts) ── */
  .pw-inline {
    margin: 24px 0;
    background: var(--bg-elev);
    border: 0.5px solid var(--line);
    border-radius: 18px;
    padding: 32px;
    display: flex; gap: 24px; align-items: flex-start;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
  }
  .pw-inline::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(400px 200px at 30% -20%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
    pointer-events: none;
  }
  .pw-inline-ic {
    width: 58px; height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--warn) 22%, var(--bg-elev)),
      color-mix(in oklab, var(--accent) 18%, var(--bg-elev)));
    border: 0.5px solid color-mix(in oklab, var(--warn) 28%, var(--line));
    color: color-mix(in oklab, var(--warn) 70%, var(--ink));
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
  }
  .pw-inline-ic svg { width: 26px; height: 26px; }
  .pw-inline-body { flex: 1; min-width: 0; position: relative; }
  .pw-inline-body h3 {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700;
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .pw-inline-body p {
    font-size: 14px;
    color: var(--ink-2);
    margin: 0 0 16px;
    line-height: 1.6;
    max-width: 64ch;
  }
  .pw-inline-body .pw-inline-feats {
    margin: 12px 0 18px;
    padding: 0;
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
    font-size: 13px;
    color: var(--ink-2);
  }
  .pw-inline-body .pw-inline-feats li {
    display: flex; align-items: center; gap: 8px;
  }
  .pw-inline-body .pw-inline-feats .check {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ok) 16%, transparent);
    color: var(--ok);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .pw-inline-body .pw-inline-feats .check svg { width: 9px; height: 9px; }
  .pw-inline-body .pw-inline-actions {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
  }

  @media (max-width: 700px) {
    .pw-inline { flex-direction: column; gap: 14px; padding: 22px; }
    .pw-inline-body .pw-inline-feats { grid-template-columns: 1fr; }
  }

  /* ── AI capstone lesson (data-type="ai") ── */
  .lsn-wrap[data-type="ai"] { --type: var(--t-ai, #b53b8f); --type-soft: var(--t-ai-soft, rgba(181,59,143,0.12)); }

  .ai-band {
    display: flex; gap: 15px; align-items: flex-start;
    padding: 18px 20px;
    margin-bottom: 26px;
    border-radius: 16px;
    background: var(--type-soft);
    border: 0.5px solid color-mix(in oklab, var(--type) 24%, transparent);
  }
  .ai-band-ic {
    flex-shrink: 0; width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--type); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ai-band-ic svg { width: 22px; height: 22px; }
  .ai-band-text { flex: 1; min-width: 0; }
  .ai-band-title { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
  .ai-band-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

  .ai-h {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
    margin: 40px 0 16px; color: var(--ink);
    display: flex; align-items: center; gap: 11px;
  }
  .ai-h::before {
    content: ""; width: 9px; height: 9px; border-radius: 2px;
    background: var(--type); transform: rotate(45deg); flex-shrink: 0;
  }

  .ai-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ai-principle {
    padding: 17px 18px;
    border: 0.5px solid var(--line);
    border-radius: 14px;
    background: var(--bg-elev);
    box-shadow: var(--shadow-card);
  }
  .ai-principle-n {
    width: 27px; height: 27px; border-radius: 8px;
    background: var(--type-soft); color: var(--type);
    font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 11px;
    font-variant-numeric: tabular-nums;
  }
  .ai-principle-t { font-weight: 600; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; line-height: 1.35; }
  .ai-principle-b { font-size: 13px; color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }

  .ai-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .ai-card {
    border: 0.5px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-elev);
    box-shadow: var(--shadow-card);
  }
  .ai-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
    border-bottom: 0.5px solid var(--line);
  }
  .ai-card.weak .ai-card-head { color: var(--warn); background: rgba(181,106,37,0.08); }
  .ai-card.strong .ai-card-head { color: var(--ok); background: var(--ok-soft); }
  .ai-card-head svg { width: 15px; height: 15px; }
  .ai-card-prompt {
    padding: 15px 16px;
    font-size: 13.5px; line-height: 1.62; color: var(--ink);
    text-wrap: pretty;
  }
  .ai-card.weak .ai-card-prompt { color: var(--ink-2); }
  .ai-card-prompt .quote { color: var(--ink-4); }
  .ai-card-why {
    margin: 0 16px 15px;
    padding-top: 12px;
    border-top: 0.5px dashed var(--line);
    font-size: 12.5px; color: var(--ink-3); line-height: 1.55;
  }
  .ai-card-why b { color: var(--ink-2); font-weight: 600; }

  @media (max-width: 720px) {
    .ai-principles, .ai-compare { grid-template-columns: 1fr; }
  }

/* ── Stage tabs (course-style, top) ────────────────────────────────────────
   Replaces the old header stepper + sidebar shortcut cards. Mirrors .crs-tabs
   from course.css (not loaded on module pages). data-cc-stage → module.js. */
.mh-tabs { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.mh-tabs .crs-tabs { display: flex; gap: 4px; padding-top: 6px; border-bottom: 0.5px solid var(--line); margin: 0; }
.mh-tabs .crs-tab {
  appearance: none; border: 0; background: transparent;
  padding: 12px 18px 14px;
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-2); cursor: pointer;
  border-radius: 8px 8px 0 0; position: relative;
  display: inline-flex; align-items: center; gap: 8px;
}
.mh-tabs .crs-tab:hover { background: var(--bg-sunk); color: var(--ink); }
.mh-tabs .crs-tab.active { color: var(--ink); font-weight: 600; }
.mh-tabs .crs-tab.active::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.mh-tabs .crs-tab svg { width: 15px; height: 15px; }
.mh-tabs .crs-tab .pip {
  padding: 2px 8px; border-radius: 999px; background: var(--bg-sunk);
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
}
.mh-tabs .crs-tab.active .pip { background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 860px) {
  .mh-tabs { padding: 0 16px; }
  .mh-tabs .crs-tabs { overflow-x: auto; scrollbar-width: none; }
  .mh-tabs .crs-tabs::-webkit-scrollbar { display: none; }
}

/* Breadcrumb aligned to the 1280 content column (global bc-inner is 1440), matching course/track. */
.bc-inner { max-width: 1280px; } /* module: match course/track */

/* ── Project review — the AI grader's structured feedback (score + summary +
      per-requirement breakdown), rendered by components/project.php ───────── */
.proj-review {
  margin-top: 12px;
  background: var(--bg-elev);
  border: 0.5px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  text-align: start;
}
.proj-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.proj-review-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  margin: 0 0 6px; color: var(--ink);
}
.proj-review-summary { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; max-width: 72ch; }
.proj-review-score {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 18px; border-radius: 14px;
  background: var(--bg-sunk);
}
.proj-review-score b {
  font-family: var(--font-display);
  font-size: 26px; line-height: 1; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.proj-review-score .total { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.proj-review-score small { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em; }
.proj-review-score.good b { color: var(--ok); }
.proj-review-score.mid b { color: var(--warn); }
.proj-review-score.low b { color: #b0483a; }
.proj-review-items { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.proj-review-item { border: 0.5px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.proj-review-item summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; }
.proj-review-item summary::-webkit-details-marker { display: none; }
.proj-review-item[data-empty] summary { cursor: default; }
.proj-review-pill {
  flex-shrink: 0;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.proj-review-pill.ok { background: var(--ok-soft); color: var(--ok); }
.proj-review-pill.part { background: rgba(181, 106, 37, 0.12); color: var(--warn); }
.proj-review-pill.miss { background: rgba(176, 72, 58, 0.10); color: #b0483a; }
.proj-review-item-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.proj-review-item-body { padding: 0 14px 13px; border-top: 0.5px solid var(--line-2); }
.proj-review-notes { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.proj-review-evidence { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.proj-review-evidence .cap { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; }
.proj-review-evidence code {
  display: block;
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg-sunk);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  direction: ltr; text-align: left;
  white-space: pre-wrap; word-break: break-word;
}
.proj-review-text { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
html[data-dark="1"] .proj-review-score.low b,
html[data-dark="1"] .proj-review-pill.miss { color: #e08a7c; }
@media (max-width: 720px) {
  .proj-review { padding: 16px; }
  .proj-review-head { flex-direction: column-reverse; }
}