/* SCHOLIA — aesthetic contract
   world:      a university-press annotated edition. The lecture is the text; your notes are the glosses in its margin
   signature:  THE FOLIO RULE under each lecture: inked where you watched, underlined in red where you went back
   neutral:    warm paper → black ink. accent: rubric red, used the way printers used it: marks, numbers, one rule at a time
   type:       Fraunces to read and to title, Instrument Sans for the interface, Plex Mono for every time and count
   motion:     quiet. ink settles in 240ms, pages turn in 560ms, nothing bounces
   Library:    ATELIER (projects/atelier-prime), copied into atelier/. Token names match the registry. Light only, by design. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/Fraunces-300-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("fonts/Fraunces-300-900-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/InstrumentSans-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  scroll-padding-top: calc(var(--mast-h, 60px) + 14px);
  --paper: #f3eee4; --leaf: #faf7f1; --ink: #1b1916; --ink-2: #48423b; --ink-3: #6c645a; --ink-4: #a2998c;
  --rule: #d8cfc0; --rule-2: #e6dfd3; --rubric: #a3301c; --rubric-2: #c04a33; --wash: rgba(163, 48, 28, 0.07); --verdigris: #2d6a50;
  --gilt: #ead9b4;
  --bg: var(--paper);
  /* the registry's names, so the vendored patterns read our paper and ink unchanged */
  --gray-1: #f6f2ea; --gray-2: #ece6db; --gray-3: #e3dccf; --gray-4: #d8cfc0; --gray-5: #cdc3b3; --gray-6: #c2b7a6;
  --gray-7: #ada292; --gray-8: #958b7e; --gray-9: #6c645a; --gray-10: #625b52; --gray-11: #48423b; --gray-12: #1b1916;
  --accent-3: #efd5ca; --accent-5: #dda08e; --accent-7: #c4664f; --accent-9: #a3301c; --accent-contrast: #faf7f1;

  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Instrument Sans", system-ui, sans-serif;
  --font-data: "Plex Mono", ui-monospace, monospace;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --dur-micro: 140ms; --dur-state: 240ms; --dur-scene: 560ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --spring-panel: linear(0, 0.0136, 0.0493, 0.1003, 0.1611, 0.2278, 0.2969, 0.366, 0.4334, 0.4978, 0.5582, 0.6142, 0.6654, 0.7118, 0.7535, 0.7906, 0.8233, 0.852, 0.877, 0.8986, 0.9171, 0.9329, 0.9463, 0.9576, 0.9669, 0.9747, 0.9811, 0.9863, 0.9905, 0.9938, 0.9964, 0.9984, 0.9999, 1.0011, 1.0019, 1.0024, 1.0027, 1.0029, 1.003, 1.0029, 1.0028, 1.0027, 1.0025, 1.0023, 1.0021, 1.0019, 1.0017, 1.0015, 1.0013, 1.0012, 1.001);
  --spring-panel-dur: 484ms;
  --ring-sw: 12;
  --mast-h: 60px;
  --gut: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { background: var(--paper); }
body { margin: 0; min-height: 100dvh; color: var(--ink); font: 0.9375rem/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(163, 48, 28, 0.18); }
kbd { font: 500 0.6875rem/1 var(--font-data); padding: 2px 5px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 3px; background: var(--leaf); color: var(--ink-2); }
.grain { z-index: 0; opacity: 0.07; }
.view { position: relative; z-index: 1; outline: none; }

/* ---------- type, the shared voice ---------- */
.label { margin: 0 0 14px; font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubric); }
.dateline { margin: 0; font: 500 0.75rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.display { margin: 10px 0 0; font: 400 clamp(2.5rem, 5.4vw, 4.625rem)/1.02 var(--font-serif); letter-spacing: -0.02em; font-variation-settings: "opsz" 72, "SOFT" 30; text-wrap: balance; }
.lede { margin: 18px 0 0; max-width: 38em; font: 400 clamp(1.1875rem, 1.6vw, 1.375rem)/1.5 var(--font-serif); color: var(--ink-2); text-wrap: pretty; font-variation-settings: "opsz" 24; }
.lede i { color: var(--ink); }
.quiet { margin: 0; font-size: 0.875rem; color: var(--ink-3); }
.kicker { font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 20px; border-radius: 3px;
  background: var(--ink); color: var(--leaf); font: 500 0.875rem/1 var(--font-ui); letter-spacing: 0.01em; white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
.btn:hover { background: #000; box-shadow: 0 8px 20px -12px rgba(27, 25, 22, 0.8); }
.btn:active { transform: scale(0.98); }
.btn kbd { background: none; border-color: rgba(250, 247, 241, 0.3); color: var(--leaf); }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.quiet-btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.quiet-btn kbd { color: var(--ink-2); border-color: var(--rule); }
.quiet-btn:hover { background: var(--leaf); box-shadow: inset 0 0 0 1px var(--ink); }
.link { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; transition: color var(--dur-micro), text-decoration-color var(--dur-micro); }
.link:hover { color: var(--rubric); text-decoration-color: currentColor; }

/* ---------- the masthead ---------- */
.mast {
  position: sticky; top: 0; z-index: 20; height: var(--mast-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 var(--gut);
  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.wordmark { justify-self: start; font: 500 1.375rem/1 var(--font-serif); letter-spacing: 0.01em; font-variation-settings: "opsz" 72; }
.wordmark b { color: var(--rubric); font-weight: 600; }
.mast-nav { display: flex; gap: clamp(18px, 2.6vw, 36px); }
.mast-nav a { position: relative; padding: 8px 0; font: 500 0.875rem/1 var(--font-ui); color: var(--ink-3); transition: color var(--dur-micro) var(--ease-out); }
.mast-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--rubric); transform: scaleX(0); transition: transform var(--dur-state) var(--ease-sheet); }
.mast-nav a:hover, .mast-nav a[aria-current] { color: var(--ink); }
.mast-nav a[aria-current]::after { transform: scaleX(1); }
.due { margin-left: 3px; vertical-align: top; line-height: 0; font: 500 0.625rem/1 var(--font-data); color: var(--rubric); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mast-tools { justify-self: end; display: flex; gap: 8px; }
.tool { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 34px; padding: 0 10px; justify-content: center; border: 1px solid var(--rule); border-radius: 3px; font: 500 0.8125rem/1 var(--font-ui); color: var(--ink-2); transition: border-color var(--dur-micro), color var(--dur-micro); }
.tool:hover { border-color: var(--ink); color: var(--ink); }
.tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- pages ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: 52px var(--gut) 120px; }
.page-head { max-width: 780px; margin-bottom: 52px; }
.block { padding-top: 20px; border-top: 1px solid var(--ink); margin-bottom: 48px; }
.crumbs { margin: 0 0 28px; font-size: 0.8125rem; color: var(--ink-3); }
.crumbs a:hover { color: var(--rubric); }
.crumbs span { margin: 0 8px; color: var(--ink-4); }

/* rings (ATELIER 49) take the track's cloth */
.ring { width: 40px; height: 40px; flex: none; }
.ring circle.track { stroke: var(--rule-2); }
.ring circle.arc { stroke: var(--cloth, var(--rubric)); }

/* ---------- the desk ---------- */
.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
.cont { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.cont-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--ink); box-shadow: 0 22px 44px -28px rgba(27, 25, 22, 0.6); }
.cont-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) sepia(0.25) contrast(0.95); transition: transform var(--dur-scene) var(--ease-sheet), filter var(--dur-state); }
.cont:hover .cont-img img, .cont:focus-visible .cont-img img, .begin-i:hover img, .begin-i:focus-visible img, .cmdk .row[aria-selected="true"] .r-img { filter: none; }
.cont:hover .cont-img img { transform: scale(1.03); }
.cont-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(250, 247, 241, 0.75); }
.cont-bar i { display: block; height: 100%; background: var(--rubric); }
.cont-txt { display: grid; gap: 10px; justify-items: start; }
.cont-t { font: 400 clamp(1.625rem, 2.6vw, 2.125rem)/1.1 var(--font-serif); letter-spacing: -0.01em; }
.cont:hover .cont-t { color: var(--rubric); }
.cont-obj { font: italic 400 1.125rem/1.45 var(--font-serif); color: var(--ink-2); }
.cont .btn { margin-top: 6px; }
.begin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.begin-i { display: grid; gap: 8px; align-content: start; }
.begin-i img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 2px; filter: grayscale(0.85) sepia(0.25) contrast(0.95); transition: filter var(--dur-state); }
.begin-i b { font: 400 1.3125rem/1.15 var(--font-serif); }
.begin-i > span:last-child { font: italic 0.9375rem/1.4 var(--font-serif); color: var(--ink-2); }
.begin-i:hover b { color: var(--rubric); }
.begin-place { margin: 22px 0 0; font: italic 1rem/1.5 var(--font-serif); color: var(--ink-2); }
.begin-place .link { font-style: normal; }
.review-q { margin: 0; font: italic 400 clamp(1.375rem, 2.2vw, 1.75rem)/1.3 var(--font-serif); text-wrap: balance; }
.review-src { margin: 8px 0 18px; font: 0.75rem/1.4 var(--font-data); color: var(--ink-3); }
.prog-list { list-style: none; margin: 0; padding: 0; }
.prog-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.prog-list .ring { width: 44px; height: 44px; }
.prog-list b { display: flex; align-items: baseline; gap: 12px; font: 400 1.25rem/1.2 var(--font-serif); }
.prog-score { margin-left: auto; font: 500 0.75rem/1 var(--font-data); font-style: normal; color: var(--ink-3); }
.prog-list i { font: 0.8125rem/1.4 var(--font-ui); font-style: normal; color: var(--ink-3); }
.prog-list a:hover b { color: var(--rubric); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; margin: 0 0 18px; }
.stats div { display: grid; gap: 6px; align-content: start; }
.stats dt { font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.stats dd { margin: 0; font: 400 2.75rem/1 var(--font-serif); font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 72; }
.stats small { font-size: 0.6875rem; color: var(--ink-3); }
.year-wrap { overflow-x: auto; padding: 4px 2px; }
.cal-svg { width: 100%; max-width: 760px; height: auto; }
.cal-svg text { font-family: var(--font-data); fill: var(--ink-3); }
.cal-svg .cell { stroke: rgba(27, 25, 22, 0.04); }
.year-read { margin: 12px 0 0; font: 0.75rem/1.4 var(--font-data); color: var(--ink-3); }

/* ---------- the catalogue: a shelf, then the contents page ---------- */
.shelf { display: flex; align-items: flex-end; gap: 5px; margin: 0 0 72px; padding: 32px 4px 0; border-bottom: 7px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.spine {
  position: relative; flex: 0 0 46px; height: var(--h); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 18px;
  background: var(--cloth); color: var(--gilt); border-radius: 2px 2px 0 0;
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.16), inset 3px 0 0 rgba(255, 255, 255, 0.07);
  transition: transform var(--dur-state) var(--ease-sheet);
}
.spine::before, .spine::after { content: ""; position: absolute; left: 7px; right: 7px; height: 1px; background: rgba(234, 217, 180, 0.5); box-shadow: 0 3px 0 rgba(234, 217, 180, 0.3); }
.spine::before { top: 34px; }
.spine::after { bottom: 26px; }
.spine:hover, .spine:focus-visible { transform: translateY(-10px); }
.spine-n { font: 500 0.6875rem/1 var(--font-data); }
.spine-t { flex: 1; min-height: 0; overflow: hidden; writing-mode: vertical-rl; font: 500 0.9375rem/1 var(--font-serif); letter-spacing: 0.03em; white-space: nowrap; padding-top: 14px; }
.spine-fill { position: absolute; left: 8px; right: 8px; bottom: 9px; height: 3px; background: linear-gradient(to right, var(--gilt) calc(var(--p) * 100%), rgba(234, 217, 180, 0.22) 0); }
.part { margin: 0 0 60px; }
.part-h { display: flex; align-items: baseline; gap: 16px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font: 400 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--font-serif); letter-spacing: -0.01em; }
.part-h span { font: 600 0.6875rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubric); }
.part-note { margin: 10px 0 6px; font: italic 1rem/1.4 var(--font-serif); color: var(--ink-3); }
.vols { list-style: none; margin: 0; padding: 0; }
.vol { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 40px; gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule-2); }
.vol-n { display: grid; place-items: center; width: 30px; height: 40px; background: var(--cloth); color: var(--gilt); font: 500 0.75rem/1 var(--font-data); border-radius: 1px 3px 3px 1px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.2); transition: transform var(--dur-state) var(--ease-sheet); }
.vol:hover .vol-n { transform: translateY(-3px) rotate(-2deg); }
.vol-main b { display: block; font: 400 1.5rem/1.15 var(--font-serif); transition: color var(--dur-micro); }
.vol-main i { display: block; margin-top: 2px; font: italic 0.9375rem/1.4 var(--font-serif); color: var(--ink-3); }
.vol:hover .vol-main b { color: var(--rubric); }
.vol-meta { font: 0.75rem/1 var(--font-data); color: var(--ink-3); white-space: nowrap; }
.vol-ring .ring { width: 36px; height: 36px; }

/* ---------- a track: the course page ---------- */
.t-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 52px; align-items: start; margin-bottom: 60px; }
.cover {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 4.2; padding: 26px 22px 24px 28px;
  background: var(--cloth); color: var(--gilt); border-radius: 2px 6px 6px 2px;
  box-shadow: inset 7px 0 0 rgba(0, 0, 0, 0.22), inset 8px 0 0 rgba(255, 255, 255, 0.07), 0 34px 60px -34px rgba(27, 25, 22, 0.75), 0 2px 0 rgba(27, 25, 22, 0.15);
}
.cover::before { content: ""; position: absolute; inset: 12px 12px 12px 18px; border: 1px solid rgba(234, 217, 180, 0.45); outline: 1px solid rgba(234, 217, 180, 0.18); outline-offset: 3px; pointer-events: none; }
.cover-k { font: 500 0.5625rem/1.4 var(--font-data); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.cover-t { margin-top: auto; font: 500 1.6875rem/1.05 var(--font-serif); letter-spacing: -0.01em; font-variation-settings: "opsz" 72; }
.cover-s { margin-top: 10px; font: italic 0.8125rem/1.35 var(--font-serif); opacity: 0.85; }
.cover-r { height: 1px; margin-top: 14px; background: currentColor; opacity: 0.45; }
.t-intro .display { margin-top: 4px; }
.t-sub { margin: 10px 0 0; font: italic 400 clamp(1.1875rem, 1.7vw, 1.4375rem)/1.4 var(--font-serif); color: var(--ink-2); }
.t-meta { margin: 14px 0 0; font-size: 0.875rem; color: var(--ink-3); }
.t-act { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 26px; }
.t-prog { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--ink-3); }
.t-prog .ring { width: 34px; height: 34px; }
.outcomes-block { margin-bottom: 60px; }
.outcomes { counter-reset: o; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.outcomes li { counter-increment: o; padding-top: 14px; border-top: 1px solid var(--rule); font: 400 1.1875rem/1.45 var(--font-serif); }
.outcomes li::before { content: counter(o, decimal-leading-zero); display: block; margin-bottom: 8px; font: 500 0.6875rem/1 var(--font-data); color: var(--rubric); }
.mod { margin: 0 0 40px; }
.mod-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font: 400 1.5rem/1.2 var(--font-serif); }
.mod-h span { font: 600 0.6875rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubric); }
.mod-h i { margin-left: auto; font: 0.8125rem/1 var(--font-ui); font-style: normal; color: var(--ink-3); }
.lessons { list-style: none; margin: 0; padding: 0; }
.lesson { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--rule-2); }
.l-n { font: 400 1.375rem/1.1 var(--font-serif); color: var(--ink-3); font-variant-numeric: lining-nums; }
.lesson[data-next] .l-n { color: var(--rubric); }
.l-main { display: grid; gap: 3px; min-width: 0; }
.l-main b { font: 400 1.3125rem/1.25 var(--font-serif); transition: color var(--dur-micro); }
.lesson:hover .l-main b { color: var(--rubric); }
.l-who { font-size: 0.8125rem; color: var(--ink-3); }
.l-obj { margin-top: 4px; max-width: 60ch; font: italic 1rem/1.45 var(--font-serif); color: var(--ink-2); }
.l-state { display: grid; justify-items: end; align-content: start; gap: 4px; font: 0.75rem/1.3 var(--font-data); color: var(--ink-3); white-space: nowrap; }
.studied { color: var(--verdigris); }
.studied::before { content: "✓ "; }

/* ---------- a lesson ---------- */
.lesson-page { max-width: 1420px; padding-top: 26px; }
.lesson-page .crumbs { margin-bottom: 14px; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 28vw, 400px); gap: clamp(28px, 3.4vw, 52px); align-items: start; }
.lp-main { min-width: 0; }
.lp-head .label { margin-bottom: 8px; }
.lp-title { margin: 0; font: 400 clamp(2rem, 3.1vw, 2.875rem)/1.05 var(--font-serif); letter-spacing: -0.018em; font-variation-settings: "opsz" 72, "SOFT" 30; text-wrap: balance; }
.lp-meta { margin: 8px 0 0; font-size: 0.875rem; color: var(--ink-3); }
.objective { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: baseline; margin: 16px 0 18px; padding: 12px 20px; background: var(--leaf); border-left: 3px solid var(--rubric); }
.obj-k { font: 600 0.6875rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubric); white-space: nowrap; }
.obj-q { font: italic 400 clamp(1.125rem, 1.4vw, 1.3125rem)/1.4 var(--font-serif); text-wrap: pretty; }
.stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--ink) center / cover no-repeat; outline: none; box-shadow: 0 30px 60px -36px rgba(27, 25, 22, 0.6), 0 0 0 1px rgba(27, 25, 22, 0.1); }
.stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* titles and answers take focus so a screen reader starts there; they are not controls, so no ring */
[tabindex="-1"]:focus:not(.stage) { outline: none; }
.stage-frame, .stage-frame > *, .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage-help { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; margin: 0; padding: 12px 14px; border-radius: 3px; background: var(--leaf); font-size: 0.8125rem; color: var(--ink-2); box-shadow: 0 10px 30px -10px rgba(27, 25, 22, 0.5); }
.stage-help b { color: var(--ink); }
.stage-help a { margin-left: 6px; color: var(--rubric); text-decoration: underline; }
.stage-help[hidden] { display: none; }
.stage-fill { display: none; }
.stage-touch { display: none; position: absolute; inset: 0; z-index: 2; touch-action: none; user-select: none; -webkit-user-select: none; }

/* THE FOLIO RULE */
.folio { position: relative; height: 56px; margin-top: 4px; cursor: pointer; outline: none; touch-action: none; }
.folio:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.folio-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.f-base { stroke: var(--rule); stroke-width: 1; }
.f-ink { fill: var(--ink); }
.f-under { fill: none; stroke: var(--rubric); stroke-width: 1.5; stroke-linecap: round; }
.f-tick { stroke: var(--ink-4); stroke-width: 1; }
.f-sup { font: 600 0.6875rem/1 var(--font-serif); fill: var(--rubric); text-anchor: middle; cursor: pointer; }
.f-away { font: 0.9375rem/1 var(--font-serif); fill: var(--ink-4); text-anchor: middle; }
.folio-head { position: absolute; top: 8px; bottom: 16px; left: 0; width: 1.5px; margin-left: -0.75px; background: var(--rubric); pointer-events: none; transition: left 480ms linear; }
.folio-head::before { content: ""; position: absolute; top: -5px; left: -3.25px; border: 4px solid transparent; border-top: 5px solid var(--rubric); }
.folio-tip { position: absolute; bottom: calc(100% - 4px); transform: translateX(-50%); display: grid; gap: 2px; justify-items: center; padding: 6px 10px; max-width: 300px; background: var(--leaf); border: 1px solid var(--rule); border-radius: 3px; box-shadow: 0 10px 24px -14px rgba(27, 25, 22, 0.5); pointer-events: none; white-space: nowrap; z-index: 3; }
.folio-tip b { font: 500 0.75rem/1 var(--font-data); }
.folio-tip span { max-width: 280px; overflow: hidden; text-overflow: ellipsis; font: italic 0.8125rem/1.3 var(--font-serif); color: var(--ink-2); }
.folio-tip[hidden] { display: none; }
.folio-line { min-height: 1.5em; margin: 0; font-size: 0.8125rem; color: var(--ink-3); }
.folio-line button { margin-left: 4px; color: var(--rubric); text-decoration: underline; text-underline-offset: 3px; }
.sep { margin: 0 8px; color: var(--ink-4); }
.lp-study { margin-top: 34px; }
.lp-study .tablist { gap: 22px; width: 100%; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; }
.lp-study .indicator { top: auto; bottom: -1px; height: 2px; background: var(--rubric); border-radius: 0; }
.lp-study .tablist button[role="tab"] { padding: 12px 0; border-radius: 0; font: 500 0.9375rem/1 var(--font-ui); color: var(--ink-3); }
.lp-study .tablist button[role="tab"].is-on { color: var(--ink); }
.lp-study .panels { margin-top: 22px; }
#quizMount:empty { display: none; }
/* inside the tabs, the tab already names the panel and draws the rule: the modules' own title and top rule step back */
.lp-study .st-title { display: none; }
.lp-study .st { margin-top: 0; }
.lp-study .st-head { margin: 0 0 18px; padding: 0; }
.lp-study .st-lede { margin: 0; }
.lp-study .tx-find, .lp-study .tx-empty { border-top: 0; }
.t-needs { margin: 10px 0 0; font: italic 0.9375rem/1.45 var(--font-serif); color: var(--ink-2); }
.need-ok { font-style: normal; font-size: 0.8125rem; color: var(--verdigris); }
.need-at { font-style: normal; font-size: 0.8125rem; color: var(--ink-3); }
.lp-k-lede { margin: 0 0 12px; font: italic 1rem/1.5 var(--font-serif); color: var(--ink-2); }
.lp-kata { border-bottom: 1px solid var(--rule-2); }
.lp-kata > summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; font: 400 1.1875rem/1.3 var(--font-serif); color: var(--ink); }
.lp-kata > summary small { margin-left: auto; flex: none; font: 0.6875rem/1 var(--font-data); color: var(--ink-3); }
.lp-kata > summary small span { color: var(--verdigris); }
.lp-kata > div { padding: 4px 0 16px; }
#quizMount { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rule-2); }
.sec-list { list-style: none; margin: 0; padding: 0; }
.sec { display: grid; grid-template-columns: 36px minmax(0, 1fr) 64px 110px; gap: 16px; align-items: center; width: 100%; padding: 11px 6px; border-bottom: 1px solid var(--rule-2); text-align: left; transition: background var(--dur-micro); }
.sec:hover { background: var(--leaf); }
.sec[aria-current] { background: var(--wash); }
.sec-n { font: 600 0.75rem/1 var(--font-serif); color: var(--rubric); }
.sec-t { min-width: 0; font: 400 1rem/1.35 var(--font-serif); }
.sec[aria-current] .sec-t { font-style: italic; }
.sec-t sup { margin-left: 3px; font: 500 0.625rem/1 var(--font-data); color: var(--rubric); }
.sec-time { font: 0.75rem/1 var(--font-data); color: var(--ink-3); text-align: right; }
.sec-bar { height: 2px; background: var(--rule-2); }
.sec-bar i { display: block; height: 100%; background: var(--ink-3); transition: width var(--dur-state) var(--ease-out); }
.lp-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--ink); }
.lp-nav a { display: grid; gap: 4px; }
.lp-nav a[rel="next"], .lp-nav a[rel="up"] { text-align: right; }
.lp-nav span { font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lp-nav b { font: 400 1.25rem/1.25 var(--font-serif); transition: color var(--dur-micro); }
.lp-nav a:hover b { color: var(--rubric); }

/* the margin: notes, practice, check */
.margin { position: sticky; top: calc(var(--mast-h) + 16px); max-height: calc(100dvh - var(--mast-h) - 32px); overflow-y: auto; padding: 6px 20px 26px; background: var(--leaf); border: 1px solid var(--rule); border-radius: 3px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.margin .tablist { position: sticky; top: -6px; z-index: 2; width: 100%; gap: 0; padding: 6px 0 0; background: var(--leaf); border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.margin .indicator { top: auto; bottom: -1px; height: 2px; background: var(--rubric); border-radius: 0; }
.margin .tablist button[role="tab"] { flex: 1; padding: 12px 0; border-radius: 0; font: 500 0.875rem/1 var(--font-ui); color: var(--ink-3); }
.margin .tablist button[role="tab"].is-on { color: var(--ink); }
.margin .tablist sup { margin-left: 3px; font: 500 0.625rem/1 var(--font-data); color: var(--rubric); }
.margin .panels { margin-top: 18px; }
.composer { display: grid; gap: 8px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; transition: border-color var(--dur-state), box-shadow var(--dur-state); }
.composer[data-on] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--wash); }
.c-top { display: flex; }
.c-at { font: 500 0.75rem/1 var(--font-data); color: var(--rubric); }
.c-at:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-box.autosize { min-height: calc(1.5em * 2); padding: 0; border: 0; background: transparent; font: 400 1.0625rem/1.5 var(--font-serif); color: var(--ink); outline: none; }
.c-box::placeholder { color: var(--ink-3); font-style: italic; }
.c-hint { margin: 0; font-size: 0.75rem; color: var(--ink-3); }
.c-hint b { font: 500 0.75rem/1 var(--font-data); color: var(--ink); }
.glosses { list-style: none; margin: 16px 0 0; padding: 0; }
.g-sec { margin: 18px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--rule-2); font: italic 400 0.875rem/1.35 var(--font-serif); color: var(--ink-3); }
.gloss { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; padding: 10px 6px 10px 0; transition: background var(--dur-state); }
.gloss[data-now] { background: linear-gradient(to right, var(--wash), transparent 80%); }
.g-n { padding-top: 2px; font: 600 0.8125rem/1.2 var(--font-serif); color: var(--rubric); text-align: right; font-variant-numeric: lining-nums; }
.g-body { min-width: 0; }
.g-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.g-t { font: 500 0.71875rem/1 var(--font-data); color: var(--ink-3); }
.g-t:hover { color: var(--rubric); text-decoration: underline; }
.g-k { font: 600 0.65625rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rubric); }
.g-key .g-k, .g-answer .g-k { color: var(--ink); }
.g-code .g-k { color: var(--ink-3); }
.g-text { margin: 4px 0 0; font: 400 1.03125rem/1.5 var(--font-serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.g-answer .g-text { font-style: italic; }
pre.g-code { margin: 6px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px; font: 0.75rem/1.55 var(--font-data); }
.g-a { display: block; margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--verdigris); font: 0.9375rem/1.5 var(--font-serif); }
.g-a > span { display: block; margin-bottom: 2px; font: 600 0.625rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--verdigris); }
.g-act { display: inline-flex; gap: 12px; margin-left: auto; opacity: 0; transition: opacity var(--dur-micro); }
@media (hover: none) { .g-act { opacity: 1; } }
.g-act[hidden] { display: none; }
.gloss:hover .g-act, .gloss:focus-within .g-act { opacity: 1; }
.g-act button { font-size: 0.75rem; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.g-act button:hover { color: var(--ink); }
.slide { display: block; max-width: 20rem; margin: 8px 0 0; }
.slide img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); transition: border-color var(--dur-micro); }
.slide:hover img { border-color: var(--ink-3); }
.nb-body .slide { max-width: 34rem; }
.g-edit.autosize { margin-top: 6px; font: 1rem/1.5 var(--font-serif); background: var(--paper); border-color: var(--rule); }
.g-empty { padding: 10px 0; font: italic 1rem/1.5 var(--font-serif); color: var(--ink-3); }

/* practice: the bench on paper */
.bench-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg button { padding: 7px 12px; font: 500 0.78125rem/1 var(--font-ui); color: var(--ink-3); transition: background var(--dur-micro), color var(--dur-micro); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--leaf); }
.bench-what { font-size: 0.78125rem; color: var(--ink-3); }
.bench-what a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rubric); text-underline-offset: 3px; }
.ed { position: relative; }
.ed-hl, .bench-ed { margin: 0; padding: 14px; font: 0.8125rem/1.6 var(--font-data); tab-size: 4; white-space: pre; border-radius: 3px; letter-spacing: 0; }
.ed-hl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); }
.bench-ed { position: relative; display: block; width: 100%; min-height: 300px; resize: vertical; overflow: auto; background: transparent; color: transparent; caret-color: var(--ink); border: 1px solid transparent; outline: none; }
.bench-ed::selection { background: rgba(163, 48, 28, 0.2); color: transparent; }
.ed:focus-within .ed-hl { border-color: var(--ink); box-shadow: 0 0 0 3px var(--wash); }
.tok-key { color: var(--rubric); }
.tok-str { color: var(--verdigris); }
.tok-com { color: var(--ink-3); font-style: italic; }
.tok-typ { color: #24364f; }
.tok-num { color: #8a6420; }
.bench-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bench-act .btn { height: 36px; padding: 0 16px; font-size: 0.8125rem; }
.bench-run[aria-busy] { opacity: 0.6; }
.ghost { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 3px; font: 500 0.8125rem/1 var(--font-ui); color: var(--ink-2); transition: border-color var(--dur-micro); }
.ghost:hover { border-color: var(--ink); }
.bench-out { margin-top: 14px; }
.bench-note { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }
.verdict { margin: 0 0 10px; font: 400 1.1875rem/1.3 var(--font-serif); }
.verdict.good { color: var(--verdigris); }
.verdict.bad { color: var(--rubric); }
.tests { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tests li { display: grid; gap: 4px; padding: 10px 12px; background: var(--paper); border-left: 3px solid var(--rubric); }
.tests li.pass { border-left-color: var(--verdigris); }
.tests code { font: 0.75rem/1.45 var(--font-data); overflow-wrap: anywhere; }
.t-in { color: var(--ink); }
.t-row { display: flex; gap: 8px; align-items: baseline; color: var(--ink-2); }
.t-row > span { flex: none; width: 62px; font: 600 0.625rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.t-row em { font: 0.625rem/1 var(--font-data); color: var(--ink-3); }
.t-row b { font-weight: 500; color: var(--rubric); }
.tests summary, .bench-stderr summary { font-size: 0.75rem; color: var(--ink-3); cursor: pointer; }
.tests pre, .bench-pre { margin: 6px 0 0; padding: 10px 12px; max-height: 240px; overflow: auto; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px; font: 0.75rem/1.5 var(--font-data); white-space: pre; }
.bench-pre.err { color: var(--rubric); }

/* check */
.ck { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rule-2); }
.ck .label { margin-bottom: 10px; }
.ck-q { margin: 0 0 12px; font: italic 1.1875rem/1.4 var(--font-serif); }
.ck-a { margin: 0 0 12px; padding: 10px 14px; background: var(--paper); border-left: 2px solid var(--ink); font: 1rem/1.5 var(--font-serif); }
.ck-a cite { display: block; margin-top: 6px; font: 0.6875rem/1 var(--font-data); font-style: normal; color: var(--ink-3); }
.ck-box.autosize { font: 1rem/1.5 var(--font-serif); background: var(--paper); border-color: var(--rule); border-radius: 3px; }
.ck-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 10px 0 0; }
.ck-row .quiet { font-size: 0.78125rem; }
.ck-open { list-style: none; margin: 0 0 8px; padding: 0; }
.ck-open li { padding: 6px 0; font: 1rem/1.45 var(--font-serif); }
.ck-prog { margin: 0 0 12px; font-size: 0.875rem; color: var(--ink-2); }

/* ---------- the notebook ---------- */
.nb-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-bottom: 44px; padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.filters { display: flex; flex-wrap: wrap; gap: 4px; }
.filters button { padding: 7px 12px; border-radius: 3px; font: 500 0.8125rem/1 var(--font-ui); color: var(--ink-3); transition: background var(--dur-micro), color var(--dur-micro); }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--leaf); }
.nb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 0.8125rem; }
.nb-track { margin-bottom: 60px; }
.nb-track h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font: 400 clamp(1.625rem, 2.8vw, 2.125rem)/1.1 var(--font-serif); }
.nb-track h2 span { font: 600 0.6875rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubric); }
.nb-lesson { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
.nb-lesson h3 { margin: 0; font: 400 1.3125rem/1.25 var(--font-serif); }
.nb-lesson h3 span { display: block; margin-bottom: 4px; font: 600 0.6875rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.nb-lesson h3 a:hover { color: var(--rubric); }
.nb-lesson ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nb-lesson li { display: grid; grid-template-columns: 20px 54px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.nb-t { font: 500 0.75rem/1 var(--font-data); color: var(--ink-3); }
.nb-t:hover { color: var(--rubric); }
.nb-body { font: 1.03125rem/1.5 var(--font-serif); overflow-wrap: anywhere; }
.nb-body em { margin-right: 8px; font: 600 0.65625rem/1 var(--font-ui); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rubric); }
.nb-empty { margin: 0 0 16px; font: italic 1.5rem/1.4 var(--font-serif); color: var(--ink-2); }
.nb-empty a { font-style: normal; font-family: var(--font-ui); font-size: 0.9375rem; margin-left: 10px; color: var(--rubric); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- review: one moment at a time, set like a plate in a book ---------- */
.review { max-width: 840px; display: grid; justify-items: center; gap: 30px; text-align: center; }
.rv-card { width: 100%; }
.rv-src { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }
.rv-q { margin: 18px 0 0; font: 300 clamp(2rem, 4.2vw, 3.25rem)/1.18 var(--font-serif); letter-spacing: -0.01em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.rv-note { max-width: 36em; margin: 22px auto 0; font: 1.1875rem/1.55 var(--font-serif); color: var(--ink-2); }
.rv-note span { display: block; margin-bottom: 6px; font: 600 0.6875rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubric); }
.rv-ans[hidden] { display: none; }
.plate { width: min(100%, 720px, 48vh * 16 / 9); margin: 0; }
.plate[hidden] { display: none; }
.plate-frame { position: relative; aspect-ratio: 16 / 9; margin: 10px; background: var(--ink); box-shadow: 0 0 0 9px var(--leaf), 0 0 0 10px var(--rule), 0 30px 60px -30px rgba(27, 25, 22, 0.5); }
.plate-clip, .plate-clip .stage-frame, .plate-clip iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plate-veil { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--paper); transition: opacity var(--dur-scene) var(--ease-out); }
.veil-t { font: 300 clamp(2.5rem, 7vw, 4.5rem)/1 var(--font-serif); letter-spacing: -0.02em; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.plate-veil[hidden] { display: block; opacity: 0; pointer-events: none; }
.plate figcaption { margin-top: 18px; font: italic 0.875rem/1.4 var(--font-serif); color: var(--ink-3); }
.plate figcaption b { font-style: normal; font-weight: 600; color: var(--rubric); }
.rv-act { display: grid; justify-items: center; gap: 12px; }
.rv-act [hidden] { display: none; }
.rv-q[data-long] { max-width: 34em; margin-inline: auto; font: 400 clamp(1.3125rem, 2vw, 1.625rem)/1.4 var(--font-serif); text-align: left; letter-spacing: 0; }
.rv-verdict { margin: 14px 0 0; font: 600 0.8125rem/1.4 var(--font-ui); letter-spacing: 0.04em; color: var(--ink-2); }
.rv-verdict:empty { display: none; }
.rv-lock { max-width: 30em; margin: 0; font: italic 0.9375rem/1.45 var(--font-serif); color: var(--ink-2); text-align: center; }
.lp-wp { margin: 4px 0 14px; font: italic 0.9375rem/1.45 var(--font-serif); color: var(--ink-2); }
.lp-wp[hidden] { display: none; }
.grades button:disabled { opacity: 0.4; cursor: not-allowed; }
.rv-log { max-width: 46em; margin: 18px auto 0; padding: 12px 14px; overflow-x: auto; background: var(--leaf); border: 1px solid var(--rule); border-radius: 3px; font: 0.78125rem/1.6 var(--font-data); color: var(--ink-2); text-align: left; white-space: pre; }
.rv-chain { max-width: 46em; margin: 18px auto 0; text-align: left; }
.rv-q code, .rv-opts code, .rv-note code { font: 0.86em var(--font-data); padding: 0 3px; background: var(--leaf); border-radius: 2px; }
.rv-hint { margin: 18px 0 0; font: italic 1rem/1.4 var(--font-serif); color: var(--ink-3); }
.rv-opts { list-style: none; margin: 26px auto 0; padding: 0; max-width: 640px; display: grid; text-align: left; border-top: 1px solid var(--ink); }
.rv-opts[hidden] { display: none; }
.rv-back { font-size: 1rem; }
.rv-opts button { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: baseline; width: 100%; padding: 14px 8px; background: none; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; font: 1.0625rem/1.4 var(--font-serif); text-align: left; transition: background var(--dur-micro), transform var(--dur-micro); }
.rv-opts button:hover:not(:disabled) { background: var(--leaf); }
.rv-opts button:active:not(:disabled) { transform: scale(0.99); }
.rv-opts button span { display: grid; place-items: center; width: 30px; height: 30px; margin-top: -4px; border: 1px solid var(--rule); border-radius: 50%; font: 500 0.8125rem/1 var(--font-serif); color: var(--ink-2); }
.rv-opts button[data-right] { box-shadow: inset 3px 0 0 var(--verdigris); }
.rv-opts button[data-right] span { background: var(--verdigris); border-color: var(--verdigris); color: var(--leaf); }
.rv-opts button[data-wrong] { box-shadow: inset 3px 0 0 var(--rubric); color: var(--ink-2); }
.rv-opts button[data-wrong] span { background: var(--rubric); border-color: var(--rubric); color: var(--leaf); }
.rv-opts button:disabled { cursor: default; }
.rv-keys { max-width: 36em; margin: 10px auto 0; padding-left: 20px; text-align: left; font: 1rem/1.5 var(--font-serif); color: var(--ink-2); }
.rv-why { font-style: italic; }
.grades { display: flex; gap: 10px; }
.grades button { display: grid; justify-items: center; gap: 5px; min-width: 128px; padding: 12px 16px; background: var(--leaf); border: 1px solid var(--rule); border-radius: 3px; transition: border-color var(--dur-micro), transform var(--dur-micro); }
.grades button:hover, .grades button[data-suggest] { border-color: var(--ink); }
.grades button:active { transform: scale(0.98); }
.grades b { font: 400 1.1875rem/1 var(--font-serif); }
.grades i { font: 0.75rem/1 var(--font-ui); font-style: normal; color: var(--ink-3); }

.today-sum { margin: 0 0 6px; font: italic 1.0625rem/1.4 var(--font-serif); color: var(--ink-2); }
.today-list .coach-g { color: var(--ink-3); }

/* ---------- search inside the lectures ---------- */
.deep-form { display: flex; gap: 10px; margin-top: 18px; max-width: 640px; }
.deep-form input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 3px; background: var(--leaf); font: 400 1.1875rem/1 var(--font-serif); color: var(--ink); outline: none; }
.deep-form input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--wash); }
.deep-form .btn { height: 46px; }
.deep-hits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.deep-lec { padding: 22px 0 8px; border-bottom: 1px solid var(--rule); }
.deep-lec .kicker { margin: 0; }
.deep-lec-t { margin: 4px 0 6px; font: 400 1.375rem/1.25 var(--font-serif); }
.deep-moments { list-style: none; margin: 0; padding: 0; }
.deep-moments a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule-2); }
.deep-t { font: 500 0.75rem/1 var(--font-data); color: var(--rubric); }
.deep-snip { max-width: 72ch; }
.deep-moments a:hover .deep-snip { color: var(--ink); }
.deep-snip { font: 1rem/1.55 var(--font-serif); color: var(--ink-2); }
.deep-snip mark { background: var(--wash); color: var(--ink); box-shadow: inset 0 -1px 0 var(--rubric); }
.row-deep[hidden] { display: none; }
@media (max-width: 500px) { .row-deep .grp { display: none; } .row-deep .name { white-space: normal; } }

/* ---------- toasts (ATELIER 02) ---------- */
/* bottom right: on the left they would cover the folio rule just as a note lands on it */
.toaster { position: fixed; right: var(--gut); bottom: 24px; z-index: 40; width: 360px; }
.toast { padding: 12px 14px; background: var(--ink); color: var(--leaf); border: 0; border-radius: 3px; box-shadow: 0 20px 40px -20px rgba(27, 25, 22, 0.7); }
.toast-body { display: flex; align-items: center; justify-content: space-between; gap: 14px; font: 0.875rem/1.4 var(--font-ui); }
.toast-body b { color: var(--gilt); font-weight: 600; }
.toast-body button { flex: none; font: 600 0.8125rem/1 var(--font-ui); color: var(--gilt); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- search (ATELIER 06) ---------- */
.find-layer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding-top: 14vh; background: rgba(27, 25, 22, 0.28); backdrop-filter: blur(2px); }
.find-layer[hidden] { display: none; }
.cmdk { width: min(640px, calc(100vw - 24px)); background: var(--leaf); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 40px 80px -30px rgba(27, 25, 22, 0.55); }
.cmdk input { padding: 18px 20px; border-bottom: 1px solid var(--rule); font: 400 1.375rem/1.3 var(--font-serif); color: var(--ink); }
.cmdk input::placeholder { color: var(--ink-3); font-style: italic; }
.cmdk ul { max-height: 54vh; }
.cmdk .row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; font-size: 0.9375rem; }
.cmdk .row[hidden] { display: none; }
.cmdk .row[aria-selected="true"] { background: var(--paper); }
.cmdk .row mark { background: none; color: var(--rubric); font-weight: 600; }
.cmdk .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk .grp { flex: none; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 0.6875rem/1 var(--font-data); color: var(--ink-3); letter-spacing: 0; text-transform: none; }
.r-mark { flex: none; display: grid; place-items: center; width: 22px; height: 28px; margin: 0 16px; background: var(--cloth); color: var(--gilt); font: 500 0.625rem/1 var(--font-data); border-radius: 1px 3px 3px 1px; }
.r-img { flex: none; width: 54px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; filter: grayscale(0.85) sepia(0.25) contrast(0.95); }
.r-time { flex: none; width: 54px; text-align: center; font: 500 0.6875rem/1 var(--font-data); color: var(--rubric); }

/* ---------- about ---------- */
.about { width: min(560px, calc(100vw - 32px)); max-height: 88dvh; padding: 32px; background: var(--leaf); color: var(--ink-2); border: 1px solid var(--rule); border-radius: 4px; font-size: 0.9375rem; line-height: 1.6; box-shadow: 0 40px 80px -30px rgba(27, 25, 22, 0.55); }
.about::backdrop { background: rgba(27, 25, 22, 0.3); backdrop-filter: blur(2px); }
.about p { margin: 0 0 16px; }
.about-k { font: 500 1.625rem/1 var(--font-serif) !important; color: var(--ink); }
.about-k b { color: var(--rubric); font-weight: 600; }
.about-lede { font: italic 1.125rem/1.5 var(--font-serif); color: var(--ink); }
.about-steps { margin: 0 0 18px; padding-left: 20px; font: 1rem/1.5 var(--font-serif); }
.about-steps li { margin-bottom: 8px; padding-left: 4px; }
.about-steps li::marker { font: 600 0.8125rem var(--font-serif); color: var(--rubric); }
.about-steps b { font-weight: 600; color: var(--ink); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 18px; font-size: 0.875rem; }
@media (min-width: 560px) { .keys { grid-template-columns: auto 1fr auto 1fr; } }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; color: var(--ink-3); }
.about-set { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; font-size: 0.875rem; color: var(--ink); cursor: pointer; }
.about-set input { margin-top: 4px; accent-color: var(--rubric); }
.about-f { font-size: 0.8125rem; color: var(--ink-3); }
.about-f button { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.about form { margin: 4px 0 0; }

/* view transitions (ATELIER 17): a lesson's picture becomes its stage */
::view-transition-old(specimen-art), ::view-transition-new(specimen-art) { object-fit: cover; }
::view-transition-group(specimen-art) { z-index: 5; }

/* ---------- paper (ATELIER 100): the notebook prints as a study sheet ---------- */
@media print {
  @page { size: A4; margin: 18mm 16mm; }
  html, body { background: #fff; }
  body { font-size: 10.5pt; }
  .mast, .toaster, .find-layer, .grain, .nb-bar, .lp-nav, .margin .tablist, .s-foot, .stage, .folio, .folio-line { display: none !important; }
  .page { max-width: none; padding: 0; }
  .nb-lesson, .lesson, .gloss { break-inside: avoid; }
  .nb-lesson li, .slide { break-inside: avoid; }
  .nb-body .slide { max-width: 12cm; }
  .nb-track h2 { break-after: avoid; }
  .nb-lesson { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- narrower ---------- */
@media (max-width: 1100px) {
  .lp-grid, .desk-grid { grid-template-columns: minmax(0, 1fr); }
  .margin { position: relative; top: 0; max-height: none; }
  .begin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-main > .margin { margin-top: 22px; }
}
@media (max-width: 760px) {
  :root { --mast-h: 54px; }
  html { font-size: 18px; }   /* every type size is rem: a phone reads 12% larger, a desk is unchanged */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  /* a backdrop-filter would make the header the containing block of the fixed tab bar below, pinning it to the top */
  .mast { grid-template-columns: 1fr auto; background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mast-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--leaf); border-top: 1px solid var(--rule); }
  .mast-nav a { display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; white-space: nowrap; }
  .mast-nav a::after { top: -1px; bottom: auto; height: 2px; }
  .tool span, .tool kbd { display: none; }
  .page { padding-top: 30px; }
  .page-head { margin-bottom: 36px; }
  .cont { grid-template-columns: minmax(0, 1fr); }
  .begin { grid-template-columns: minmax(0, 1fr); }
  .stats dd { font-size: 2.25rem; }
  .t-head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cover { display: none; }   /* decorative: on a phone the meter and the coach come first */
  .cover-t { font-size: 1.25rem; }
  .cal-svg { width: 720px; max-width: none; }
  .outcomes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lesson { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
  .l-state { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; gap: 12px; }
  .vol { grid-template-columns: 30px minmax(0, 1fr) 36px; gap: 14px; }
  .vol-meta { display: none; }
  .stage { margin: 0 calc(var(--gut) * -1); border-radius: 0; }
  .objective { grid-template-columns: minmax(0, 1fr); }
  .sec { grid-template-columns: 30px minmax(0, 1fr) 52px; }
  .sec-bar { grid-column: 2 / -1; }
  .lp-nav { grid-template-columns: minmax(0, 1fr); }
  .lp-nav a[rel="next"], .lp-nav a[rel="up"] { text-align: left; }
  .margin { padding: 6px 14px 20px; }
  .nb-lesson { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grades button { min-width: 0; flex: 1; }
  .toaster { left: 12px; right: 12px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* a phone turned sideways: the lecture fills the screen, as the YouTube app does. Turn it back for the notes. */
@media (orientation: landscape) and (max-height: 480px) {
  .lesson-page .stage { position: fixed; inset: 0; z-index: 60; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none; }
  body:has(.lesson-page) .mast { visibility: hidden; }
  .lesson-page .stage.is-zoom .stage-frame { transform: var(--zoom); will-change: transform; }
  .lesson-page .stage.is-zoom .stage-touch { display: block; }
  .lesson-page .stage-fill { display: block; position: absolute; top: 10px; right: 10px; z-index: 3; padding: 8px 12px; border-radius: 999px; background: rgba(27, 25, 22, 0.72); color: var(--leaf); font: 600 0.75rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
}
@media (prefers-reduced-motion: reduce) {
  .spine, .vol-n, .cont-img img, .folio-head, .sec-bar i { transition: none; }
  .toast { transition: opacity 1ms !important; }
}
/* touch: no keyboard hints, and the small controls used most get a finger-sized hit area */
@media (hover: hover) { .touch-only { display: none; } }
@media (hover: none) {
  .kb-only { display: none; }
  .btn kbd, .grades kbd, .tool kbd, .as-page kbd, .about .keys, .g-empty kbd { display: none; }
}
@media (pointer: coarse) {
  .g-t, .g-act button, .c-at, .crumbs a, .glossary dd a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
}