:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  --radius-sm: 0.25rem; --radius-md: 0.4rem; --radius-lg: 0.65rem; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Zodiak', 'Iowan Old Style', Georgia, serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;

  --side-w: 288px;
}

:root, [data-theme='light'] {
  --color-bg: #f4efe4;
  --color-surface: #faf7f0;
  --color-surface-2: #fffdf8;
  --color-surface-offset: #ece5d6;
  --color-border: oklch(0.25 0.02 80 / 0.14);
  --color-divider: oklch(0.25 0.02 80 / 0.09);
  --color-text: #1f1c17;
  --color-text-muted: #635d52;
  --color-text-faint: #9c9484;
  --color-text-inverse: #faf7f0;
  --color-primary: #264d44;
  --color-primary-hover: #1b3a33;
  --color-primary-highlight: #dde6df;
  --color-gold-ink: #a8741a;
  --color-sand: #8a5a1c;
  --color-sand-bg: #f1e4d0;
  --color-lahn: #5b4a7a;
  --color-lahn-bg: #e6e0ee;
  --color-correct: #3b6f37;
  --color-correct-bg: #e1ebdc;
  --color-wrong: #a3412c;
  --color-wrong-bg: #f3dfd7;
  --shadow-sm: 0 1px 2px oklch(0.3 0.03 80 / 0.07);
  --shadow-md: 0 6px 18px oklch(0.3 0.03 80 / 0.09);
}

[data-theme='dark'] {
  --color-bg: #15140f;
  --color-surface: #1c1a15;
  --color-surface-2: #221f19;
  --color-surface-offset: #2a261f;
  --color-border: oklch(0.95 0.02 80 / 0.12);
  --color-divider: oklch(0.95 0.02 80 / 0.07);
  --color-text: #e6dfd0;
  --color-text-muted: #a49c8b;
  --color-text-faint: #6f685b;
  --color-text-inverse: #15140f;
  --color-primary: #86b8a8;
  --color-primary-hover: #a3cbbd;
  --color-primary-highlight: #22322d;
  --color-gold-ink: #d8a24a;
  --color-sand: #d9a25e;
  --color-sand-bg: #33281a;
  --color-lahn: #b39dd8;
  --color-lahn-bg: #2b2535;
  --color-correct: #8cc47f;
  --color-correct-bg: #1f2d1c;
  --color-wrong: #e98a6f;
  --color-wrong-bg: #3a221b;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.35);
}

/* ---------- Shell ---------- */
.skip { position: absolute; left: var(--space-4); top: -100px; background: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: 100; }
.skip:focus { top: var(--space-4); }

.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100dvh; }
.side {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);
}
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.logo { width: 30px; height: 30px; color: var(--color-primary); }
.brand-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; line-height: 1; }
.brand-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-4); padding-left: calc(30px + var(--space-3)); }

#nav { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; }
.nav-group h2 { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); margin-bottom: var(--space-2); display: flex; gap: var(--space-2); }
.nav-group h2 .lvl { color: var(--color-gold-ink); }
.nav-link {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); min-height: 40px;
}
.nav-link:hover { background: var(--color-surface-offset); color: var(--color-text); }
.nav-link[aria-current='page'] { background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 600; }
.nav-link .num { font-variant-numeric: tabular-nums; font-size: var(--text-xs); width: 1.6em; color: var(--color-text-faint); }
.nav-link[aria-current='page'] .num { color: var(--color-primary); }
.nav-link .done { margin-left: auto; width: 16px; height: 16px; color: var(--color-correct); opacity: 0; }
.nav-link.is-done .done { opacity: 1; }
.nav-util { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }

.side-foot { padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.progress-label { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); font-variant-numeric: tabular-nums; }
.progress-bar { height: 6px; background: var(--color-surface-offset); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; background: var(--color-primary); border-radius: inherit; transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1); }

.col { display: flex; flex-direction: column; min-width: 0; }
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-12));
  background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.crumb { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn, .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-text-muted); }
.icon-btn:hover, .menu-btn:hover { background: var(--color-surface-offset); color: var(--color-text); }
.menu-btn { display: none; }

main { flex: 1; padding: clamp(var(--space-8), 5vw, var(--space-16)) clamp(var(--space-4), 4vw, var(--space-12)) var(--space-20); outline: none; }
.wrap { max-width: 920px; }
.foot { padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-12)); border-top: 1px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-muted); }
.foot a, .prose a, .src-link { color: var(--color-primary); text-underline-offset: 3px; }

.scrim { position: fixed; inset: 0; background: oklch(0.1 0 0 / 0.4); z-index: 40; }

/* ---------- Typography ---------- */
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-ink); }
.h-hero { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -0.02em; max-width: 16ch; }
.h-hero em { font-style: italic; color: var(--color-primary); }
.h-page { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.01em; }
.h-sec { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.005em; }
.lede { color: var(--color-text-muted); max-width: 62ch; }
.prose p + p { margin-top: var(--space-3); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }

/* ---------- Home ---------- */
.hero { display: grid; gap: var(--space-5); padding-bottom: var(--space-12); border-bottom: 1px solid var(--color-divider); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.case { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); font-size: var(--text-sm); }
.case dt { color: var(--color-text-faint); }

.path { margin-top: var(--space-12); display: grid; gap: 0; }
.path-level { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-6); padding-block: var(--space-8); border-bottom: 1px solid var(--color-divider); }
.path-num { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-gold-ink); font-weight: 400; }
.path-level h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.1; }
.path-level .sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.path-mods { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.path-mod { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); }
.path-mod:hover { border-color: var(--color-primary); }
.path-mod .num { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.path-mod .t { font-weight: 500; flex: 1; }
.path-mod .m { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.path-mod.is-done .m { color: var(--color-correct); font-weight: 600; }

.routine { margin-top: var(--space-16); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-10); align-items: start; }
.routine ol { counter-reset: r; list-style: none; display: grid; gap: var(--space-4); }
.routine li { counter-increment: r; display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); }
.routine li::before { content: counter(r); font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-gold-ink); line-height: 1.3; }
.routine li strong { font-weight: 600; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { border-color: var(--color-border); color: var(--color-text); background: var(--color-surface); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Module layout ---------- */
.mod-head { display: grid; gap: var(--space-3); padding-bottom: var(--space-8); }
.mod-meta { display: flex; gap: var(--space-4); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.concept { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.concept aside { font-size: var(--text-sm); border-left: 1px solid var(--color-divider); padding-left: var(--space-6); }
.concept aside h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); margin-bottom: var(--space-3); font-weight: 600; }
.concept aside dl { display: grid; gap: var(--space-3); }
.concept aside dt { font-weight: 600; }
.concept aside dd { color: var(--color-text-muted); }

.exercise { margin-top: var(--space-12); }
.ex-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.score { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.score strong { color: var(--color-text); font-size: var(--text-lg); }

.items { display: grid; gap: var(--space-4); }
.item { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); display: grid; gap: var(--space-4); }
.item.correct { border-color: color-mix(in oklab, var(--color-correct) 55%, transparent); }
.item.wrong { border-color: color-mix(in oklab, var(--color-wrong) 55%, transparent); }
.item-top { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-muted); }
.who { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-sm); }
.who::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.who-Sand { color: var(--color-sand); background: var(--color-sand-bg); }
.who-Lahn { color: var(--color-lahn); background: var(--color-lahn-bg); }
.who-Moderator, .who-Social { color: var(--color-text-muted); background: var(--color-surface-offset); }
.quote { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; font-weight: 400; }
.flow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.flow-cell { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-divider); font-size: var(--text-sm); }
.flow-cell .lab { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); margin-bottom: var(--space-2); font-weight: 600; }
.arrow { color: var(--color-text-faint); }

.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { min-height: 40px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text); }
.chip:hover { border-color: var(--color-primary); }
.chip[aria-pressed='true'] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.chip.is-key { box-shadow: 0 0 0 2px var(--color-correct); }
.chip[disabled] { cursor: default; }
.chip-row { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-3); align-items: center; }
.chip-row > span { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

.feedback { font-size: var(--text-sm); padding: var(--space-4); border-radius: var(--radius-md); display: grid; gap: var(--space-1); animation: rise 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.feedback.ok { background: var(--color-correct-bg); }
.feedback.no { background: var(--color-wrong-bg); }
.feedback .verdict { font-weight: 700; }
.feedback.ok .verdict { color: var(--color-correct); }
.feedback.no .verdict { color: var(--color-wrong); }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; align-items: center; }
.note { margin-top: var(--space-10); padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg); background: var(--color-primary-highlight); display: grid; gap: var(--space-2); }
.note h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--color-primary); }

/* Toulmin */
.t-card { display: grid; gap: var(--space-4); }
.t-frag { display: grid; grid-template-columns: 1fr 13rem; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); }
.t-frag:first-of-type { border-top: 0; }
.t-frag p { font-size: var(--text-sm); }
.t-frag.correct select { border-color: var(--color-correct); }
.t-frag.wrong select { border-color: var(--color-wrong); }
.t-fix { font-size: var(--text-xs); color: var(--color-wrong); grid-column: 1 / -1; }
select, input[type='text'], input[type='search'], textarea {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm);
}
select:focus, input:focus, textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-primary-highlight); }
label.lab { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.06em; }

/* Defs grid */
.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.def { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-divider); font-size: var(--text-sm); }
.def b { display: block; margin-bottom: var(--space-1); }
.def span { color: var(--color-text-muted); }

/* Rubric */
.tabs { display: inline-flex; padding: var(--space-1); gap: var(--space-1); background: var(--color-surface-offset); border-radius: var(--radius-md); flex-wrap: wrap; }
.tab { min-height: 40px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; }
.tab[aria-selected='true'] { background: var(--color-surface-2); color: var(--color-text); box-shadow: var(--shadow-sm); }
.rtable-wrap { overflow-x: auto; margin-top: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.rtable { font-size: var(--text-sm); min-width: 620px; }
.rtable th, .rtable td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.rtable thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); font-weight: 600; }
.rtable tfoot td { font-weight: 700; border-bottom: 0; }
.rtable select { min-height: 38px; width: 6.5rem; }
.rtable .w { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.keyval { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: var(--space-2); }
.keyval.diff { color: var(--color-wrong); font-weight: 600; }
.verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.vcard { padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
.vcard .grade { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.vcard .pf { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--space-2); }
.pass { color: var(--color-correct); } .fail { color: var(--color-wrong); }

/* Lenses */
.lens-list { display: grid; gap: var(--space-3); }
.lens { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); overflow: hidden; }
.lens summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.lens summary::-webkit-details-marker { display: none; }
.lens summary:hover { background: var(--color-surface); }
.lens summary h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); }
.lens summary .by { font-size: var(--text-xs); color: var(--color-text-muted); }
.lens .chev { transition: transform 200ms ease; color: var(--color-text-faint); flex-shrink: 0; }
.lens[open] .chev { transform: rotate(180deg); }
.lens-body { padding: 0 var(--space-6) var(--space-6); display: grid; gap: var(--space-4); font-size: var(--text-sm); }
.lens-body .k { padding: var(--space-3) var(--space-4); background: var(--color-surface-offset); border-radius: var(--radius-md); }
.lens-body .prompt { font-weight: 600; }
.lens-body textarea { min-height: 110px; resize: vertical; }
.model { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-highlight); animation: rise 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.model b { color: var(--color-primary); display: block; margin-bottom: var(--space-1); }

/* Benoit */
.b-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: center; }
.b-item .quote { font-size: var(--text-base); }
.b-controls { display: grid; gap: var(--space-2); }
.seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.seg button { min-height: 38px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); background: var(--color-surface); border-right: 1px solid var(--color-border); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed='true'] { background: var(--color-primary); color: var(--color-text-inverse); }
.seg button.is-key { outline: 2px solid var(--color-correct); outline-offset: -2px; }
.tally { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
.tally-card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.bars { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.bar-row { display: grid; grid-template-columns: 4.5rem 1fr 2rem; gap: var(--space-3); align-items: center; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.bar-track { height: 10px; border-radius: var(--radius-full); background: var(--color-surface-offset); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.fill-Sand { background: var(--color-sand); } .fill-Lahn { background: var(--color-lahn); }

/* Research */
.rq-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.rq-out { margin-top: var(--space-8); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px solid var(--color-border); display: grid; gap: var(--space-5); }
.rq-out .rq { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; }
.rq-out ol { padding-left: var(--space-5); display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.rq-out ol b { font-weight: 600; }

/* Readings */
.readings { display: grid; gap: 0; margin-top: var(--space-8); }
.reading { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); }
.reading .lvl { font-family: var(--font-display); color: var(--color-gold-ink); font-size: var(--text-lg); }
.reading .t { font-weight: 600; } .reading .t i { font-style: italic; }
.reading .a { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Transcript */
.tr-bar { display: grid; grid-template-columns: 1fr minmax(200px, 280px); gap: var(--space-4); align-items: end; margin-top: var(--space-6); }
.tr-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.tr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-8); margin-top: var(--space-6); align-items: start; }
.tr-paras { display: grid; gap: var(--space-2); }
.para { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; content-visibility: auto; contain-intrinsic-size: auto 140px; }
.para:hover { background: var(--color-surface); border-color: var(--color-divider); }
.para .ts { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-primary); text-decoration: none; padding-top: 3px; }
.para .ts:hover { text-decoration: underline; }
.para p { font-size: var(--text-sm); line-height: 1.7; max-width: 75ch; }
.para mark { background: color-mix(in oklab, var(--color-gold-ink) 30%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.para-tools { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; align-items: center; }
.tag-btn { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px dashed var(--color-border); min-height: 32px; }
.tag-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.tag { font-size: var(--text-xs); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--color-primary-highlight); color: var(--color-primary); }
.tag-note { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }
.annot { position: sticky; top: 84px; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--text-sm); display: grid; gap: var(--space-3); max-height: calc(100dvh - 120px); overflow-y: auto; }
.annot h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); font-weight: 600; }
.annot ul { list-style: none; display: grid; gap: var(--space-3); }
.annot li a { color: var(--color-text); text-decoration: none; display: grid; gap: 2px; }
.annot li a:hover .tag { text-decoration: underline; }
.empty { color: var(--color-text-muted); font-size: var(--text-sm); }
.tag-pop { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); margin-top: var(--space-2); animation: rise 220ms ease; }

/* Responsive */
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(var(--side-w), 86vw); z-index: 50; transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
  .side.open { transform: none; box-shadow: var(--shadow-md); }
  .menu-btn { display: grid; }
  .concept { grid-template-columns: 1fr; }
  .concept aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: var(--space-6); }
  .routine { grid-template-columns: 1fr; gap: var(--space-6); }
  .tr-layout { grid-template-columns: 1fr; }
  .annot { position: static; max-height: none; order: -1; }
  .rq-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .flow-pair, .verdicts, .tally { grid-template-columns: 1fr; }
  .t-frag { grid-template-columns: 1fr; gap: var(--space-2); }
  .b-item { grid-template-columns: 1fr; }
  .path-level { grid-template-columns: 1fr; gap: var(--space-3); }
  .chip-row { grid-template-columns: 1fr; }
  .tr-bar { grid-template-columns: 1fr; }
  .concept { padding: var(--space-5); }
  .item { padding: var(--space-4); }
  .para { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-3); }
  .path-mod { flex-wrap: wrap; }
}

/* Level IV */
code.sym { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--text-xs); background: var(--color-surface-offset); padding: 1px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.checks { display: grid; gap: var(--space-2); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); min-height: 32px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-primary); flex-shrink: 0; }
.pri { padding-left: var(--space-5); display: grid; gap: var(--space-1); font-size: var(--text-sm); }

/* Paper */
.paper { max-width: 70ch; font-size: var(--text-base); line-height: 1.75; }

.paper h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); margin: var(--space-10) 0 var(--space-3); }
.paper p { margin-top: var(--space-4); }
.paper ul, .paper ol { margin: var(--space-4) 0 0 var(--space-6); display: grid; gap: var(--space-2); }
.paper a { color: var(--color-primary); text-underline-offset: 3px; word-break: break-word; }
.paper strong { font-weight: 600; }
.prose h2 + p { margin-top: var(--space-3); }
.b-controls .seg { display: flex; }
.b-controls .seg button { flex: 1; }