/* Ariadne Lens. Colors come only from ../brand/tokens.css.
 * Type roles: serif (--font-serif) is language and Ariadne's voice; sans is interface;
 * mono is only for what the machine said (ids, energies, bitstrings). */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--void); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--ink);
  font: 400 15px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

#hyphae { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.45; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.86em; }
code { color: var(--hypha); }
h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
h2 { font-size: 21px; line-height: 1.25; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hypha); outline-offset: 2px; border-radius: 2px; }

/* Top bar: where you are, and the way on */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px;
  padding: 10px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--void) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
/* The clew (brand/clew.svg): the site's mark, drawn in the current colour. `.sq` is the square-framed cut (brand/clew-icon.svg). */
.clew { display: inline-block; flex: none; background: currentColor; -webkit-mask: url(../brand/clew.svg) center / contain no-repeat; mask: url(../brand/clew.svg) center / contain no-repeat; }
.clew.sq { -webkit-mask-image: url(../brand/clew-icon.svg); mask-image: url(../brand/clew-icon.svg); }
.brand svg.clew { display: block; }
.wordmark { font-family: var(--font-serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.where { margin: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where .w-part { color: var(--ink-3); }
.where { opacity: 0; transition: opacity .25s var(--ease); }
.where.shown { opacity: 1; }
.where .w-sep { color: var(--hairline); margin: 0 10px; }
.pager, .tools { display: flex; gap: 6px; align-items: center; }
.icon-btn, .contents-btn {
  height: 32px; min-width: 32px; padding: 0 8px; display: inline-grid; place-items: center;
  border: 1px solid var(--hairline); background: transparent; color: var(--ink-2);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 14px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.contents-btn { padding: 0 14px; font-size: 13px; color: var(--ink); }
.icon-btn:hover:not(:disabled), .contents-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn[aria-pressed="true"] { color: var(--void); background: var(--hypha); border-color: var(--hypha); }

/* Controls */
.chip, .seg button, .resolution button {
  border: 1px solid var(--hairline); background: transparent; color: var(--ink-2);
  padding: 5px 11px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans); font-size: 12.5px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.chip:hover, .seg button:hover, .resolution button:hover { color: var(--ink); border-color: var(--ink-3); }
.chip[aria-pressed="true"], .seg button[aria-selected="true"], .resolution button[aria-pressed="true"] {
  color: var(--void); background: var(--ink); border-color: var(--ink);
}
.seg { display: flex; gap: 0; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.seg button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

main { position: relative; z-index: 1; padding: 0 clamp(16px, 4vw, 40px) 40px; max-width: 1320px; margin: 0 auto; }

/* Hero of a run view */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end;
  padding: 40px 0 32px;
}
.eyebrow { margin: 0 0 14px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.hero h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; font-weight: 350; letter-spacing: -0.02em; }
.hero h1 em, .cover h1 em { font-style: italic; color: var(--thread); }
.lede { font-family: var(--font-serif); color: var(--ink-2); font-size: 19px; line-height: 1.5; max-width: 38em; margin: 18px 0 0; }
.synthetic { margin: 16px 0 0; padding-left: 10px; border-left: 2px solid var(--tolerated); color: var(--tolerated); font-size: 12.5px; }
.note { margin: 14px 0 0; color: var(--ink-3); font-size: 14px; max-width: 64ch; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--ink-3); }
.metrics div { padding: 14px 16px 12px 0; border-bottom: 1px solid var(--hairline); }
.metrics div + div { padding-left: 16px; border-left: 1px solid var(--hairline); }
.metrics div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.metrics dt { font-size: 12px; color: var(--ink-3); }
.metrics dd { margin: 4px 0 0; font-family: var(--font-serif); font-size: 30px; font-weight: 350; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.metrics dd small { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }

/* Panels: quiet surfaces, hairline edges */
.panel {
  position: relative; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px; margin-top: 20px;
  scroll-margin-top: 72px;
}
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.hint { margin: 6px 0 0; color: var(--ink-3); font-size: 13.5px; max-width: 68ch; }
.hint b { color: var(--ink-2); font-weight: 500; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; }
.grid-main > .panel, .grid-two > .panel { margin-top: 0; }
.grid-main { margin-top: 0; }
.grid-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }

/* Network */
.network-wrap { background: var(--substrate); border-radius: var(--radius-sm); border: 1px solid var(--hairline); }
#network { display: block; width: 100%; height: auto; }
#network .node { cursor: pointer; }
#network .label { font-family: var(--font-mono); font-size: var(--label-size, 11px); fill: var(--ink-2); paint-order: stroke; stroke: var(--substrate); stroke-width: 5px; stroke-linejoin: round; }
#network .label.dim { fill: var(--ink-3); }
#network .edge { fill: none; stroke-width: 1.4; cursor: pointer; transition: opacity .25s var(--ease); }
#network .edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
#network .thread { fill: none; stroke: var(--thread); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--thread-glow)); }
#network .faded { opacity: 0.15; }
#network .ring { fill: none; stroke: var(--hairline); }
.resolution button.off-doctrine { opacity: 0.45; text-decoration: line-through; }
.rules td.decided { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.resolution { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; justify-content: flex-end; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 14px 0 0; font-size: 12px; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend svg { flex: none; }

/* Voice: Ariadne speaks in the serif */
.voice-panel { display: flex; flex-direction: column; }
.voice-head { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.portrait { width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden; border: 1px solid var(--hairline); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.findings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.findings li {
  padding: 16px 4px 16px 16px; border-bottom: 1px solid var(--hairline); position: relative; cursor: default;
  animation: rise .6s var(--ease) both;
}
.findings li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--sev); }
.findings li[data-subjects]:not([data-subjects=""]) { cursor: pointer; }
.findings li:hover { background: var(--hypha-dim); }
.findings .meta { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.findings .meta span:not(.sev) { font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: none; }
.findings .sev { color: var(--sev); font-weight: 500; }
.findings p { margin: 6px 0 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.45; color: var(--ink); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* Rules table */
.table-wrap { overflow-x: auto; }
table.rules { width: 100%; border-collapse: collapse; font-size: 14px; }
.rules th { text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 10px; border-bottom: 1px solid var(--ink-3); white-space: nowrap; }
.rules td { padding: 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.rules tr:last-child td { border-bottom: 0; }
.rules tbody tr:hover td { background: var(--hypha-dim); }
.rules .num { text-align: right; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.rules .id { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); display: block; }
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; }
.cost { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.cost .bar { height: 6px; border-radius: 1px; background: var(--hypha); min-width: 2px; }
.cost .zero { background: var(--contested); }
.cost span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

/* Ladder */
#ladder { display: block; width: 100%; height: auto; overflow: visible; }
#ladder text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); }
#ladder .grid { stroke: var(--hairline); }

/* Machine layer */
pre#machine-json {
  margin: 0; max-height: 420px; overflow: auto; padding: 16px; border-radius: var(--radius-sm);
  background: var(--substrate); border: 1px solid var(--hairline); color: var(--ink-2); font-size: 12px; line-height: 1.6;
}
pre .k { color: var(--hypha); } pre .s { color: var(--thread); } pre .n { color: var(--contested); }
.ising { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.ising td, .ising th { padding: 7px 10px; border-bottom: 1px solid var(--hairline); text-align: left; }
.ising th { font-weight: 400; color: var(--ink-3); }
.ising td.num { text-align: right; color: var(--ink); }
.ising caption { caption-side: top; text-align: left; color: var(--ink-3); font-family: var(--font-sans); font-size: 12px; padding-bottom: 10px; }

/* Tooltip */
.tooltip {
  position: fixed; z-index: 20; pointer-events: none; max-width: 300px;
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 10px 12px; font-size: 13px; box-shadow: 0 12px 40px color-mix(in srgb, var(--void) 60%, transparent);
}
.tooltip .t-id { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.tooltip .t-title { font-weight: 500; margin: 2px 0 6px; }
.tooltip .t-row { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2); font-size: 12px; }
.tooltip .t-row b { font-family: var(--font-mono); font-weight: 400; color: var(--ink); }
.tooltip p { margin: 6px 0 0; color: var(--ink-2); font-size: 12px; }

/* Empty + drop */
.empty { text-align: center; padding: 18vh 0; max-width: 560px; margin: 0 auto; color: var(--ink-2); }
.empty h1 { margin: 20px 0 12px; color: var(--ink); font-size: 34px; }
.dropzone { position: fixed; inset: 12px; z-index: 30; display: grid; place-items: center; border: 1.5px dashed var(--hypha); border-radius: var(--radius); background: color-mix(in srgb, var(--void) 85%, transparent); color: var(--hypha); }

/* ---------- The beginning (track landing) ---------- */
.kicker { margin: 0 0 22px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.section-title { font-size: 13px; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }

.cover { padding: clamp(48px, 9vh, 104px) 0 56px; }
.cover h1 { font-size: clamp(44px, 6.6vw, 92px); line-height: 0.98; font-weight: 330; letter-spacing: -0.03em; }
.cover .lede { font-size: 20px; margin-top: 28px; }
.begin { display: inline-flex; gap: 10px; margin-top: 32px; font-size: 15px; font-weight: 500; color: var(--thread); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.begin span { transition: transform .25s var(--ease); }
.begin:hover span { transform: translateX(4px); }

.aims ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink-3); counter-reset: aim; }
.aims li { padding: 22px 28px 26px 0; counter-increment: aim; }
.aims li + li { padding-left: 28px; border-left: 1px solid var(--hairline); }
.aims h2 { font-size: 24px; }
.aims h2::before { content: counter(aim, lower-roman) "."; font-style: italic; color: var(--thread); margin-right: 10px; }
.aims p { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 34ch; }

.toc { margin-top: 72px; }
.part { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: 40px; padding: 28px 0 40px; border-top: 1px solid var(--ink-3); }
.part-n { margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--thread); }
.part-head h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }
.part-intro { margin: 12px 0 0; color: var(--ink-3); font-size: 14px; max-width: 30ch; }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapters li + li .chapter { border-top: 1px solid var(--hairline); }
.chapter { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.9fr) 24px; gap: 24px; align-items: baseline; padding: 20px 0 22px; text-decoration: none; color: inherit; }
.c-n { font-family: var(--font-serif); font-size: 40px; font-weight: 300; line-height: 1; color: var(--ink-3); transition: color .25s var(--ease); font-variant-numeric: lining-nums; }
.c-main { display: flex; flex-direction: column; gap: 4px; }
.c-label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.c-title { font-family: var(--font-serif); font-size: 23px; line-height: 1.2; }
.c-q { font-size: 14px; color: var(--ink-2); }
.c-f { font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.c-tag { display: block; margin-top: 6px; font-family: var(--font-sans); font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.c-go { color: var(--ink-3); transition: transform .25s var(--ease), color .25s var(--ease); }
.chapter:hover .c-n, .chapter:hover .c-go, .chapter:focus-visible .c-n { color: var(--thread); }
.chapter:hover .c-go { transform: translateX(4px); }
.chapter:hover .c-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.carry { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ink-3); scroll-margin-top: 72px; }
.carry-lessons ol { list-style: none; margin: 0; padding: 0; counter-reset: lesson; }
.carry-lessons li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hairline); counter-increment: lesson; }
.carry-lessons li::before { content: counter(lesson); font-family: var(--font-serif); font-size: 20px; color: var(--ink-3); }
.carry-lessons li p { margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 1.4; }
.carry-lessons .l-at { display: flex; gap: 4px; font-family: var(--font-sans); font-size: 12px; }
.l-at a { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink-2); text-decoration: none; }
.l-at a:hover { color: var(--thread); border-color: var(--thread); }
.carry-frame { align-self: start; padding: 4px 0 4px 24px; border-left: 2px solid var(--thread); }
.frame-k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.frame-t { margin: 10px 0 12px; font-family: var(--font-serif); font-style: italic; font-size: 30px; line-height: 1.15; color: var(--thread); }
.carry-frame p:last-child { margin: 0; color: var(--ink-2); font-size: 15px; }

.bench { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.bench-note { margin: -6px 0 16px; color: var(--ink-3); font-size: 14px; max-width: 60ch; }
.bench-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bench-list a { display: inline-block; padding: 6px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
.bench-list a:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- Chapter chrome: header above each view, pager below ---------- */
.chapter-head { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: end; padding: 40px 0 22px; border-bottom: 1px solid var(--hairline); }
.ch-num { font-family: var(--font-serif); font-size: 76px; font-weight: 300; line-height: 0.8; color: var(--thread); font-variant-numeric: lining-nums; }
.ch-num.bench-num { color: var(--ink-3); }
.ch-kicker { margin: 0 0 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ch-title { font-size: 28px; line-height: 1.15; }
.ch-q { margin: 6px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--ink-2); max-width: 52em; }
.ch-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.ch-wi { font-size: 12px; color: var(--thread); }
.ch-also { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.chapter-head:not([hidden]) + div .hero, .chapter-head:not([hidden]) ~ div > .hero:first-child { padding-top: 28px; }

.chapter-foot { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 40px) 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg { display: flex; flex-direction: column; gap: 4px; padding: 18px 0 0; border-top: 2px solid var(--hairline); text-decoration: none; color: inherit; transition: border-color .25s var(--ease); }
.pg:hover { border-top-color: var(--thread); }
.pg-next { text-align: right; }
.pg-k { font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pg-t { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; }
.pg-prev .pg-t::before { content: "← "; color: var(--ink-3); }
.pg-next .pg-t::after { content: " →"; color: var(--thread); }

.unrun p { margin: 0 0 12px; color: var(--ink-2); }
.unrun pre { margin: 0; padding: 14px 16px; background: var(--substrate); border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow-x: auto; }

/* ---------- Contents sheet ---------- */
.contents-sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 100vw); height: 100%; max-height: 100%;
  padding: 0; border: 0; border-left: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
  overflow-y: auto;
}
.contents-sheet[open] { animation: sheet .35s var(--ease); }
.contents-sheet::backdrop { background: color-mix(in srgb, var(--void) 65%, transparent); }
@keyframes sheet { from { transform: translateX(24px); opacity: 0; } }
.sheet-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.sheet-head h2 { font-size: 24px; }
.sheet-head form { margin: 0; }
#contents-body { padding: 8px 24px 40px; }
.ct-home { display: block; margin: 12px 0 4px; padding: 10px 0; font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--ink-2); text-decoration: none; }
.ct-home:hover, .ct-home[aria-current="page"] { color: var(--thread); }
.ct-part { padding: 18px 0 6px; border-top: 1px solid var(--hairline); }
.ct-pn { margin: 0 0 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--thread); }
.ct-part h3 { font-size: 19px; margin-bottom: 6px; }
.ct-part ol { list-style: none; margin: 0; padding: 0; }
.ct-part a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0 7px 10px; margin-left: -10px; border-left: 2px solid transparent; font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.ct-part a:hover { color: var(--ink); }
.ct-part a[aria-current="page"] { color: var(--ink); border-left-color: var(--thread); }
.ct-n { font-family: var(--font-serif); font-size: 16px; color: var(--ink-3); }
.ct-tag { font-size: 11px; color: var(--ink-3); }

/* Layout breakpoints inside main are container queries on main's width (see washi.css), so the page reflows the
   same way whether the window is narrow or Ariadne's panel has pushed the page aside. */
@container page (max-width: 920px) {
  .hero, .grid-main, .grid-two, .carry { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 28px; }
  .part { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .part-intro { max-width: 52ch; }
}
@media (max-width: 760px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .where { display: none; }
  .tools { justify-self: end; }
  .chapter-foot { grid-template-columns: minmax(0, 1fr); }
  .pg-t { font-size: 20px; }
}
@container page (max-width: 699px) {
  .aims ol { grid-template-columns: minmax(0, 1fr); }
  .aims li, .aims li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--hairline); }
  .chapter { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 14px; }
  .c-n { font-size: 30px; }
  .c-f { grid-column: 2; }
  .c-go { display: none; }
  .carry-lessons li { grid-template-columns: 28px minmax(0, 1fr); }
  .carry-lessons .l-at { grid-column: 2; }
  .chapter-head { grid-template-columns: 52px minmax(0, 1fr); padding-top: 28px; }
  .ch-num { font-size: 56px; }
  .ch-title { font-size: 23px; }
  .ch-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .metrics dd { font-size: 22px; }
  .panel { padding: 16px; }
  .panel-head { flex-direction: column; }
  .rules .kind-col { display: none; }
  .brand img { display: none; }
  .contents-btn { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Quantum (QAOA) panel */
.quantum-panel { border-top: 2px solid var(--hypha); }
.quantum-panel .eyebrow { margin: 0 0 8px; }
.q-summary { font-family: var(--font-serif); font-size: 19px; line-height: 1.5; margin: 4px 0 20px; max-width: 70ch; }
.q-summary em { font-style: normal; color: var(--thread); }
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 18px; }
.q-fig { margin: 0; padding: 16px; background: var(--substrate); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.q-fig figcaption { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.q-fig figcaption b { color: var(--ink); font-weight: 500; }
.q-fig svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.q-fig svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); }
.q-fig .grid { stroke: var(--hairline); }
.readout { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-family: var(--font-mono); font-size: 12px; }
.readout .cells { display: flex; gap: 3px; }
.readout .cell { width: 10px; height: 14px; border-radius: 2px; border: 1px solid var(--yields); }
.readout .cell.on { background: var(--thread); border-color: var(--thread); }
.readout .prob { display: flex; align-items: center; gap: 8px; min-width: 0; }
.readout .bar { height: 6px; border-radius: 3px; background: var(--hypha); min-width: 2px; }
.readout .ok { color: var(--thread); }
.readout .e { color: var(--ink-3); text-align: right; }
@container page (max-width: 1020px) { .q-grid { grid-template-columns: minmax(0, 1fr); } }

/* Assignment view (learning step 3) */
.a-schedule td.num { color: var(--ink-3); }
.a-schedule td.a-neg { color: var(--tension); }
.a-schedule td.a-pick { color: var(--void); background: var(--thread); font-weight: 600; box-shadow: 0 0 18px var(--thread-glow); }
.a-schedule tbody tr:hover td.a-pick { background: var(--thread); }
.a-formula { margin: 0 0 14px; padding: 12px 14px; background: var(--substrate); border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--hypha); }
.a-grounds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 13px; }
.a-grounds li { display: grid; grid-template-columns: 92px 88px 1fr; gap: 10px; padding: 9px 0 9px 12px; border-bottom: 1px solid var(--hairline); position: relative; color: var(--ink-2); }
.a-grounds li:last-child { border-bottom: 0; }
.a-grounds li::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--thread); }
.a-grounds li.bad::before { background: var(--tension); }
.a-grounds li.bad b { color: var(--tension); font-weight: 500; }
.a-grounds .a-mult { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.a-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 18px; }
.a-grid .q-fig svg { max-width: 560px; }
.a-sub { margin: 4px 0 8px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.a-sub:not(:first-child) { margin-top: 16px; }
.a-readout .cells { gap: 5px; }
.a-group { display: flex; gap: 1px; padding: 1px; border-radius: 3px; border: 1px solid transparent; }
.a-group.bad { border-color: var(--tension); }
.a-readout .cell { width: 6px; height: 13px; }
@container page (max-width: 1020px) { .a-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .a-grounds li { grid-template-columns: 1fr 1fr; } .a-grounds li > span:last-child { grid-column: 1 / -1; } }
.q-fig .legend svg { width: 12px; height: 12px; display: inline; margin: 0; }

/* Neutral-atom panel (learning step 4) */
.at-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
#at-layout text { font-family: var(--font-mono); fill: var(--ink-2); }
#at-layout .atom { cursor: default; }
#at-facts th { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
@container page (max-width: 1020px) { .at-grid { grid-template-columns: minmax(0, 1fr); } }
#at-duration text, #at-spectrum text { paint-order: stroke; stroke: var(--substrate); stroke-width: 4px; stroke-linejoin: round; }

/* Timetable view (learning step 5) */
table.t-grid { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; min-width: 620px; }
.t-grid thead th { font-weight: 400; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); text-align: left; padding: 0 8px 4px; }
.t-grid tbody th { text-align: left; font-weight: 400; padding: 6px 8px; white-space: nowrap; width: 150px; }
.t-grid tbody th small { display: block; color: var(--ink-3); font-size: 11px; }
.t-grid td { border-radius: var(--radius-sm); padding: 8px 10px; vertical-align: top; }
.t-grid tr.t-bld th { color: var(--hypha); font-size: 12px; padding-top: 14px; }
.t-grid tr.t-bld td { font-family: var(--font-mono); font-size: 11px; padding: 14px 10px 2px; color: var(--ink-3); }
.t-grid tr.t-bld td.open { color: var(--hypha); }
.t-grid td.t-class { background: var(--substrate); border: 1px solid var(--hairline); cursor: default; }
.t-grid td.t-class b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; display: block; }
.t-grid td.t-class small { color: var(--ink-3); font-size: 11px; }
.t-grid td.t-class.moved { border-color: var(--thread); box-shadow: 0 0 14px var(--thread-glow); }
.t-grid td.t-class.moved b { color: var(--thread); }
.t-grid td.t-empty { border: 1px dashed var(--hairline); }
.t-grid td.closed.t-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--hairline) 6px 7px); border-style: solid; }
.t-swatch { display: inline-block; width: 14px; height: 12px; border-radius: 3px; border: 1px solid var(--thread); }
.t-swatch.closed { border-color: var(--hairline); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--hairline) 3px 4px); }
.t-why { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.t-why li { display: grid; grid-template-columns: 88px 116px 52px 1fr; gap: 10px; padding: 9px 0 9px 12px; border-bottom: 1px solid var(--hairline); position: relative; color: var(--ink-2); }
.t-why li:last-child { border-bottom: 0; }
.t-why li::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--thread); }
.t-why li.near::before { background: var(--contested); }
.t-why .t-at, .t-why .t-m { font-family: var(--font-mono); font-size: 12px; }
.t-why .t-m { text-align: right; color: var(--ink); }
.t-scale { margin-top: 18px; }
@media (max-width: 640px) { .t-why li { grid-template-columns: 1fr 1fr; } .t-why .t-m { text-align: left; } .t-why .t-r { grid-column: 1 / -1; } }

/* Reversible CPU view (learning step 6) */
table.c-trace { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12px; min-width: 760px; }
.c-trace thead th { font-weight: 400; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; text-align: left; padding: 0 6px 4px; white-space: nowrap; }
.c-trace tbody th { font-weight: 400; padding: 6px 8px; }
.c-trace td { background: var(--substrate); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 6px 8px; vertical-align: top; white-space: nowrap; }
.c-trace td small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.c-trace td b { font-family: var(--font-mono); font-weight: 500; }
.c-trace td i { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--thread); margin-left: 6px; }
.c-trace td.skip { border-color: var(--thread); box-shadow: 0 0 12px var(--thread-glow); }
.c-trace td.c-ans { color: var(--thread); font-size: 14px; }
.c-trace td.c-ok { color: var(--hypha); }
.c-trace td.c-bad { color: var(--tension); }
.c-sw { display: inline-block; width: 14px; height: 12px; border-radius: 3px; border: 1px solid var(--thread); }
.c-pairs .readout { grid-template-columns: auto 1fr auto; }
#c-chart { max-width: 560px; }

/* Cryptography view (learning step 10) */
.k-grid { margin-top: 0; margin-bottom: 18px; }
.k-grid .q-fig svg { max-width: 560px; }
.k-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.k-env td { vertical-align: top; }
.k-ok { color: var(--thread); }
.k-miss { color: var(--ink-3); }
.ising tr.k-cur td { color: var(--thread); }
.k-photons tr.k-drop td { color: var(--ink-3); }
.k-photons tr.k-err td { color: var(--tension); }
.k-scale { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
.k-scale b { color: var(--ink); font-weight: 500; }
.k-mitm { margin-top: 8px; padding: 14px 16px; border-left: 2px solid var(--tension); background: var(--substrate); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.k-mitm p { margin: 0; max-width: 80ch; }
.k-mitm p + p { margin-top: 6px; }

/* Post-quantum migration plan */
table.pq-grid { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12px; min-width: 820px; }
.pq-grid thead th { font-weight: 400; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; text-align: left; padding: 0 6px 4px; white-space: nowrap; }
.pq-grid tbody th { font-weight: 400; text-align: left; padding: 6px 8px; min-width: 180px; }
.pq-grid tbody th b { font-family: var(--font-mono); font-weight: 500; }
.pq-grid tbody th small { display: block; color: var(--ink-3); font-size: 11.5px; }
.pq-grid tbody tr { cursor: pointer; }
.pq-grid tbody tr:hover th b, .pq-grid tr.pq-sel th b { color: var(--thread); }
.pq-grid tr.pq-sel th { box-shadow: inset 2px 0 0 var(--thread); }
.pq-grid td { background: var(--substrate); border: 1px solid var(--hairline); padding: 6px 8px; vertical-align: top; min-width: 76px; }
.pq-grid td span { font-family: var(--font-mono); font-size: 11px; }
.pq-grid td.pick { background: var(--thread); border-color: var(--thread); color: var(--void); box-shadow: 0 0 12px var(--thread-glow); }
.pq-grid td.pick.bad { box-shadow: inset 0 0 0 2px var(--tension); }
.pq-grid td.na { background: transparent; border-style: dashed; color: var(--ink-3); }
.pq-grid td i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10px; margin-top: 3px; }
.pq-dl { color: var(--tension); }
.pq-val { color: var(--hypha); }
.pq-grid td.pick i { color: var(--void); }
.pq-grid td.pq-rules { background: transparent; border: 0; white-space: normal; }
.pq-rules span { display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; border: 1px solid var(--hairline); font-size: 11px; color: var(--ink-2); }
.pq-rules span.bad { border-color: var(--tension); color: var(--tension); }
.pq-grid tfoot th { font-weight: 400; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; text-align: left; padding: 6px 8px; }
.pq-grid tfoot td { background: transparent; border: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.pq-grid tfoot td.full { color: var(--tolerated); }
.pq-sw { display: inline-block; width: 14px; height: 12px; border: 1px solid var(--hairline); background: var(--substrate); vertical-align: -1px; }
.pq-sw.pick { background: var(--thread); border-color: var(--thread); }
.pq-sw.pick.bad { box-shadow: inset 0 0 0 2px var(--tension); }
.pq-sw.na { background: transparent; border-style: dashed; }
.pq-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pq-findings li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0 12px 14px; border-bottom: 1px solid var(--hairline); position: relative; }
.pq-findings li:last-child { border-bottom: 0; }
.pq-findings li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--c); }
.pq-findings .pq-code { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); padding-top: 3px; }
.pq-findings p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 80ch; }
.pq-save { color: var(--hypha); }
.pq-then { display: block; color: var(--tension); font-size: 11px; }
.pq-assets { flex-wrap: wrap; }
.pq-alts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pq-alts li { display: grid; grid-template-columns: 90px 100px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.pq-alts li:last-child { border-bottom: 0; }
.pq-alts li b { font-family: var(--font-mono); font-weight: 500; }
.pq-alts .pq-d { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.pq-alts li.blocked .pq-d { color: var(--tension); }
.pq-alts li.na, .pq-alts li.na .pq-d { color: var(--ink-3); }
.pq-alts p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); }
.pq-r em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.pq-r-capacity, .pq-r-prerequisite { color: var(--tension); }
.pq-qday { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pq-qday li { padding: 10px 12px; border: 1px solid var(--hairline); background: var(--substrate); display: flex; flex-direction: column; gap: 2px; }
.pq-qday li b { font-family: var(--font-serif); font-size: 20px; font-weight: 400; }
.pq-qday li span { font-size: 12.5px; color: var(--ink-2); }
.pq-qday li small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.pq-qday li.moved { border-color: var(--tolerated); }
.pq-obl td small { display: block; color: var(--ink-3); font-size: 11px; }
.pq-draft { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--tolerated); color: var(--tolerated); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.pq-banner { max-width: none; margin: 18px 0 0; }
.pq-wi-tabs { margin: 0 0 8px; flex-wrap: wrap; }
.pq-wi-table td:first-child { min-width: 200px; }
.pq-wi-table td small { display: block; color: var(--ink-3); font-size: 11.5px; }
.pq-wi-table .wi-cell { min-width: 220px; }
.pq-wi-table .pq-tipnote { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.pq-wi-table .pq-tipnote b { color: var(--thread); font-weight: 500; }
@container page (max-width: 662px) {
  .pq-findings li { grid-template-columns: 1fr; gap: 4px; }
  .pq-alts li { grid-template-columns: 70px 1fr; }
  .pq-alts p { grid-column: 1 / -1; }
}

/* ---------- Interactive layer ---------- */
.chip.primary { color: var(--void); background: var(--thread); border-color: var(--thread); font-weight: 500; }
.chip.primary:hover { color: var(--void); filter: brightness(1.08); }
.chip:disabled { opacity: 0.4; cursor: default; }

/* Try it yourself */
.head-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.play-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-bottom: 14px; padding: 14px 16px; background: var(--substrate); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.play-ctl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pm-nums { display: flex; gap: 28px; flex-wrap: wrap; }
.pm-nums div { display: flex; flex-direction: column; }
.pm-nums span { font-size: 11px; color: var(--ink-3); }
.pm-nums b { font-family: var(--font-mono); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
.pm-nums b.hit { color: var(--thread); text-shadow: 0 0 18px var(--thread-glow); }
.pm-track { position: relative; height: 8px; margin: 12px 0 20px; border-radius: 4px; background: var(--hairline); }
.pm-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, var(--hypha), var(--thread)); transition: width .35s var(--ease); }
.pm-end { position: absolute; top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.pm-end.l { left: 0; } .pm-end.r { right: 0; }
.pm-where { margin: 0; font-size: 12px; color: var(--ink-2); }
#network .edge.paid { stroke-width: 3; filter: drop-shadow(0 0 5px var(--tension)); }
#network .edge.idle { opacity: 0.28; stroke-dasharray: 3 4; }
#ladder text.you { fill: var(--thread); font-weight: 600; }
.coach li { cursor: default; }
.coach .sev { text-transform: none; letter-spacing: 0.04em; }

/* What if */
.whatif-panel { border-top: 2px solid var(--thread); }
.whatif-panel .eyebrow { margin: 0 0 8px; color: var(--thread); }
.whatif-go { display: flex; gap: 6px; flex: none; }
.whatif-status { margin: 0 0 10px; min-height: 1.2em; font-size: 13px; color: var(--tolerated); }
.whatif-grid { margin-top: 0; }
.whatif-table td { padding: 8px 10px; }
.whatif-table th { padding: 0 10px 8px; }
.whatif-table tr.changed td { background: var(--thread-glow); }
.whatif-table tr.changed output { color: var(--thread); }
.wi-cell { width: 45%; min-width: 140px; }
.wi-range { position: relative; }
.wi-range input { width: 100%; accent-color: var(--hypha); margin: 0; position: relative; z-index: 1; }
.wi-tip { position: absolute; top: 50%; width: 2px; height: 16px; margin: -8px 0 0 -1px; background: var(--thread); border-radius: 1px; box-shadow: 0 0 6px var(--thread-glow); }
.wi-note { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.wi-note.past { color: var(--thread); }
.wi-pair { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.wi-pair span { color: var(--ink-3); margin: 0 6px; }
.whatif-banner { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--thread); border-radius: var(--radius-sm); background: var(--thread-glow); font-size: 14px; max-width: 64ch; }
.whatif-banner p { margin: 0 0 6px; }
.whatif-banner p span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-right: 6px; text-transform: uppercase; letter-spacing: .08em; }
.whatif-banner b { color: var(--thread); font-weight: 500; }
.whatif-banner .wb-title { font-size: 11.5px; font-weight: 500; color: var(--thread); letter-spacing: .12em; text-transform: uppercase; }

/* Shot machine */
.shots { margin: 0 0 18px; padding: 16px; background: var(--substrate); border: 1px solid color-mix(in srgb, var(--thread) 30%, var(--hairline)); border-radius: var(--radius-sm); }
.sh-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.sh-title { margin: 0; font-weight: 500; color: var(--thread); }
.sh-head .hint { margin-top: 4px; }
.sh-opts { flex-wrap: wrap; }
.sh-ctl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-field { display: flex; flex-wrap: wrap; gap: 3px; min-height: 22px; max-height: 120px; overflow: hidden; align-content: flex-start; margin-bottom: 10px; }
.sh-field i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--yields); animation: rise .3s var(--ease) both; }
.sh-field i.top { background: var(--hypha); border-color: var(--hypha); opacity: .7; }
.sh-field i.opt { background: var(--thread); border-color: var(--thread); box-shadow: 0 0 8px var(--thread-glow); }
.sh-more { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-left: 6px; align-self: center; }
.sh-stats { font-size: 13px; color: var(--ink-2); }
.sh-stats b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.sh-stats b.hit { color: var(--thread); }
.sh-stats span { color: var(--ink-3); font-size: 12px; }
.sh-last { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; flex-wrap: wrap; }
.sh-last .sh-lab { color: var(--ink-3); }
.sh-last .cells { display: flex; gap: 3px; }
.sh-last .cell { width: 10px; height: 14px; border-radius: 2px; border: 1px solid var(--yields); }
.sh-last .cell.on { background: var(--thread); border-color: var(--thread); }
.sh-last .ok { color: var(--thread); }
.sh-last .e { color: var(--ink-3); }

@media (max-width: 640px) {
  .play-bar { grid-template-columns: minmax(0, 1fr); }
  .play-ctl { justify-content: flex-start; }
  .pm-nums { gap: 16px; }
  .pm-nums b { font-size: 18px; }
  .head-tools { align-items: flex-start; }
  .whatif-go { width: 100%; }
  .whatif-table td { padding: 8px 6px; }
  .wi-cell { min-width: 96px; }
  .whatif-table .wi-note { white-space: normal; font-size: 11px; }
  .wi-pair { white-space: normal; }
}

/* Replay audit view (learning step 8) */
#rp-acc, #rp-tape { display: block; width: 100%; height: auto; }
#rp-acc text, #rp-tape text { font-family: var(--font-mono); font-size: var(--label-size, 11px); fill: var(--ink-3); }
#rp-acc .grid, #rp-tape .grid { stroke: var(--hairline); }
#rp-acc text.rp-pipe { fill: var(--ink); font-size: 13px; font-weight: 500; }
#rp-acc .rp-row:hover rect:first-child { fill: var(--hypha-dim); }
#rp-tape text.lane { fill: var(--ink-2); }
.rp-tape-wrap { padding: 10px 8px 4px; }
.rp-grid { margin-top: 20px; }
.rp-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.rp-card-head .t-id { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.rp-verdict { margin: 4px 0 0; font-size: 18px; }
.rp-verdict.wrong { color: var(--tension); }
.rp-pos { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rp-card-grid { margin-top: 8px; }
.rp-card-grid .ising th { font-family: var(--font-sans); color: var(--ink-2); }
.rp-replay, .rp-checks { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rp-replay li, .rp-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-2); }
.rp-replay li:last-child, .rp-checks li:last-child { border-bottom: 0; }
.rp-replay li > span, .rp-checks li > span { font-family: var(--font-mono); font-weight: 600; text-align: center; }
.rp-replay .ok > span, .rp-checks .ok > span { color: var(--hypha); }
.rp-replay .warn > span, .rp-checks .warn > span { color: var(--tolerated); }
.rp-replay .bad > span, .rp-checks .bad > span { color: var(--tension); }
.rp-checks b { color: var(--ink); font-weight: 500; }
.rp-checks p { margin: 2px 0 0; }
.rp-checks-grid { margin-top: 0; }
.rp-says { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--substrate); border: 1px solid var(--hairline); }
.rp-says .clew { margin-top: 2px; }
.rp-says p { margin: 0; font-size: 14px; color: var(--ink); }
.rp-ids { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.rp-ids .chip { padding: 3px 8px; font-size: 11px; }
.rp-ids span { font-size: 11px; color: var(--ink-3); margin-left: 4px; }
@media (max-width: 640px) { .rp-card-head { flex-direction: column; } }

/* formulation review */
.rv-verdict { --sev: var(--hypha); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sev); border: 1px solid var(--sev); border-radius: var(--radius-sm); padding: 5px 12px; white-space: nowrap; }
.rv-verdict-text { margin: 0 0 12px; font-size: 15px; color: var(--ink); max-width: 72ch; }
.rv-questions { margin: 0 0 18px; padding: 12px 16px 12px 34px; border-left: 2px solid var(--tension); background: color-mix(in srgb, var(--tension) 8%, transparent); border-radius: 0; }
.rv-questions li { margin: 4px 0; color: var(--ink); }
.rv-h { font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; margin: 20px 0 8px; font-family: var(--font-sans); }
.rv-grid { margin-top: 0; align-items: start; }
.rv-readback { margin: 0; padding-left: 18px; color: var(--ink-2, var(--ink)); font-size: 14px; }
.rv-readback li { margin: 5px 0; }
.rv-tips td { vertical-align: top; }
.rv-made { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tension); border: 1px solid currentColor; border-radius: 2px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }
.rv-cell { width: 22%; min-width: 120px; }
.rv-bar { display: flex; align-items: center; height: 18px; width: 100%; }
.rv-half { flex: 1; display: flex; }
.rv-half:first-child { justify-content: flex-end; }
.rv-arm { height: 4px; background: var(--hypha); border-radius: 2px; }
.rv-arm.open { background: repeating-linear-gradient(90deg, var(--hypha) 0 4px, transparent 4px 7px); opacity: 0.6; }
.rv-bar.hot .rv-arm:not(.open) { background: var(--tension); }
.rv-mid { width: 2px; height: 14px; background: var(--ink); border-radius: 1px; flex: none; }
.rv-tie-note { font-family: var(--font-mono); font-size: 11px; color: var(--contested); }
.rv-side { font-size: 13px; }
.rv-side .rv-at { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.rv-side .rv-then { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.rv-none { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
#rv-more, #t-rv-more { margin-top: 12px; }
@container page (max-width: 662px) { .rv-cell { min-width: 80px; } .rv-tips th:nth-child(3), .rv-tips td:nth-child(3) { display: none; } }

/* ======================================================================
 * Journal typesetting on the lamplight palette.
 * Garamond carries the text; sans survives only in tables, charts and
 * controls; sections and figures are numbered by chapter (4.2, Figure 4.1).
 * ====================================================================== */

body {
  font: 400 18px/1.55 var(--font-serif);
  font-variant-numeric: oldstyle-nums proportional-nums;
  background-color: var(--void);
}
#hyphae { display: none; }
main { max-width: 1180px; }
table, .legend, .chip, .seg button, .resolution, .tooltip, .metrics dt, .metrics dd small, .ising caption, .rv-side, .whatif-status, .play-bar { font-family: var(--font-sans); font-variant-numeric: lining-nums tabular-nums; }
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
.sc { font-variant: small-caps; letter-spacing: 0.06em; }

/* Running head: text, not buttons */
.topbar { background: color-mix(in srgb, var(--void) 96%, transparent); backdrop-filter: none; border-bottom: 1px solid var(--ink); padding-top: 8px; padding-bottom: 8px; }
.wordmark { font-size: 17px; font-variant: small-caps; letter-spacing: 0.14em; font-weight: 500; text-transform: lowercase; }
.brand img { width: 20px; height: 20px; }
.where { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-2); }
.where .w-part { font-style: normal; font-variant: small-caps; letter-spacing: 0.08em; }
.icon-btn, .contents-btn { border: 0; background: none; height: 28px; font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); }
.contents-btn { font-variant: small-caps; letter-spacing: 0.1em; font-size: 16px; text-transform: lowercase; border-bottom: 1px solid transparent; }
.contents-btn:hover { border-bottom-color: var(--ink); }
.icon-btn[aria-pressed="true"] { color: var(--hypha); background: none; text-decoration: underline; }
.tools { border-left: 1px solid var(--hairline); padding-left: 10px; }

/* Controls: quiet, squared, underlined when chosen */
.chip, .seg button, .resolution button { border-color: var(--hairline); background: transparent; }
.chip[aria-pressed="true"], .seg button[aria-selected="true"], .resolution button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--void); }
.chip.primary { background: var(--ink); border-color: var(--ink); color: var(--void); }
.chip.primary:hover { color: var(--void); filter: none; opacity: 0.88; }

/* Small-caps labels replace the tracked sans kickers */
.eyebrow, .kicker, .section-title, .part-n, .c-label, .ch-kicker, .pg-k, .frame-k, .ct-pn, .rv-h, .whatif-banner .wb-title, .metrics dt, .pr-k, .pr-h, .pr-like span {
  font-family: var(--font-serif); font-weight: 400; font-size: 16px; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.1em;
}
.eyebrow { color: var(--ink-3); }

/* ---------- Masthead and title page ---------- */
.masthead { padding: 36px 0 0; text-align: center; border-bottom: 3px double var(--ink); }
.mh-line { display: flex; justify-content: space-between; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.12em; font-size: 15px; color: var(--ink-2); }
.mh-title { margin: 18px 0 0; font-size: clamp(56px, 11vw, 132px); line-height: 0.9; font-weight: 500; letter-spacing: 0.02em; font-variant: small-caps; text-transform: lowercase; }
.mh-sub { margin: 10px 0 18px; font-style: italic; font-size: 20px; color: var(--ink-2); }

/* Title page: text only, centered under the masthead */
.cover { display: block; max-width: 820px; margin: 0 auto; padding: 56px 0 48px; text-align: center; }
.cover .lede { margin-left: auto; margin-right: auto; text-align: left; }
.cover h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; font-weight: 400; letter-spacing: -0.01em; }
.cover h1 em, .hero h1 em { color: var(--thread); }
.cover .lede { font-size: 20px; color: var(--ink); column-count: 1; }
.cover .lede::first-letter { float: left; font-size: 4.1em; line-height: 0.8; padding: 6px 10px 0 0; color: var(--thread); font-weight: 500; }
.begin { font-family: var(--font-serif); font-size: 19px; font-style: italic; font-weight: 400; color: var(--ink); border-bottom-color: var(--thread); }

/* The aims read as an abstract */
.aims ol { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.aims h2 { font-size: 22px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.08em; }
.aims h2::before { font-variant: normal; }
.aims p { font-size: 17px; }

/* Contents as a book's contents page: title, dotted leader, number */
.toc { margin-top: 64px; }
.toc::before { content: "Contents"; display: block; text-align: center; font-size: 30px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.16em; margin-bottom: 20px; }
.part { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 26px 0 18px; border-top: 1px solid var(--ink); }
.part-head { text-align: center; margin-bottom: 8px; }
.part-n { color: var(--thread); font-size: 17px; }
.part-head h2 { font-size: 30px; font-style: italic; }
.part-intro { margin: 6px auto 0; max-width: 46ch; font-size: 16px; font-style: normal; color: var(--ink-3); }
.chapters { width: 100%; max-width: 760px; margin: 0 auto; }
.chapters li + li .chapter { border-top: 0; }
.chapter { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 14px 0; }
.c-n { order: 2; font-size: 22px; font-weight: 400; color: var(--ink); align-self: baseline; font-variant-numeric: oldstyle-nums; }
.c-main { order: 1; display: grid; grid-template-columns: auto minmax(20px, 1fr); column-gap: 10px; align-items: baseline; }
.c-label { display: none; }
.c-title { font-size: 22px; }
.c-main::after { content: ""; border-bottom: 2px dotted var(--hairline); transform: translateY(-6px); grid-row: 1; grid-column: 2; }
.c-q { grid-column: 1 / -1; font-family: var(--font-serif); font-size: 16px; color: var(--ink-3); }
.c-f { order: 3; grid-column: 1 / -1; font-size: 17px; color: var(--ink-2); padding-left: 1.4em; border-left: 1px solid var(--thread); margin-top: 6px; }
.c-go { display: none; }
.chapter:hover .c-title { text-decoration-color: var(--thread); }

/* Afterword */
.carry { border-top: 3px double var(--ink); }
.carry-lessons li p { font-size: 20px; }
.carry-frame { border-left: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 18px 0; text-align: center; }
.frame-t { font-size: 32px; }
.l-at a { border-radius: 0; border: 0; border-bottom: 1px solid var(--hairline); font-family: var(--font-serif); font-size: 16px; min-width: 18px; height: auto; }
.bench-list a { border-radius: 0; }

/* ---------- Chapter opener: centered, with an epigraph ---------- */
.chapter-head { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding: 48px 0 26px; border-bottom: 3px double var(--ink); gap: 6px; }
.ch-num { font-size: 26px; color: var(--thread); line-height: 1; font-variant-numeric: oldstyle-nums; }
.ch-num::before, .ch-num::after { content: "—"; color: var(--hairline); margin: 0 12px; }
.ch-kicker { font-size: 16px; }
.ch-title { font-size: clamp(34px, 4.4vw, 50px); line-height: 1.08; }
.ch-q { font-size: 21px; max-width: 34em; margin-top: 10px; }
.ch-acts { justify-content: center; margin-top: 10px; }

/* Panels become sections of the page, numbered by chapter */
#view, #assign-view, #tt-view, #cpu-view, #crypto-view, #pqc-view, #res-view, #mem-view, #replay-view, #raw-view, #chapter-view { counter-reset: sec fig; }
.panel { background: transparent; border: 0; border-top: 1px solid var(--ink); padding: 22px 0 8px; margin-top: 36px; }
.grid-main, .grid-two { gap: 40px; }
.grid-main > .panel, .grid-two > .panel { margin-top: 36px; }
.panel h2 { font-size: 26px; }
.panel .panel-head h2::before { counter-increment: sec; content: var(--ch, "") counter(sec) "\2002"; color: var(--thread); font-variant-numeric: oldstyle-nums; }
.voice-panel .voice-head h2::before { content: none; }
.hint { font-family: var(--font-serif); font-size: 16px; color: var(--ink-3); max-width: 62ch; }
.quantum-panel, .whatif-panel { border-top: 1px solid var(--ink); }
.q-fig, .network-wrap, .play-bar, .shots, pre#machine-json, .a-formula { border-radius: 0; }
.q-fig { background: transparent; border: 0; border-top: 1px solid var(--hairline); padding: 12px 0 0; }
.q-fig figcaption { font-family: var(--font-serif); font-size: 16px; }
.q-fig figcaption::before { counter-increment: fig; content: "Figure " var(--ch, "") counter(fig) ". "; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.06em; color: var(--ink); }
.q-summary { font-size: 20px; }

/* Hero of a run: headline and a booktabs table of figures */
.hero { padding-top: 32px; }
.hero h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 400; }
.lede { font-size: 19px; color: var(--ink); }
.metrics { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.metrics div { border-bottom: 0; }
.metrics dd { font-family: var(--font-serif); font-size: 28px; font-weight: 400; font-variant-numeric: lining-nums; }
.synthetic { border-left: 0; padding-left: 0; font-style: italic; font-family: var(--font-serif); font-size: 15px; }
.synthetic::before { content: "† "; font-style: normal; }
.note { font-size: 16px; }

/* Ariadne's voice as marginal notes */
.voice-head { border-bottom: 1px solid var(--hairline); }
.portrait { border-radius: 50%; }
.findings li { padding-left: 18px; }
.findings li::before { width: 1px; }
.findings p { font-size: 18px; font-style: italic; }
.findings .meta { font-family: var(--font-sans); }

/* Tables: booktabs rules */
.rules th { border-bottom: 1px solid var(--ink); font-family: var(--font-serif); font-size: 15px; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.08em; font-weight: 400; }
table.rules { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
table.rules thead th { padding-top: 8px; }

/* Pager at the foot of a chapter */
.chapter-foot { border-top: 3px double var(--ink); margin-top: 40px; padding-top: 18px; }
.pg { border-top: 0; }
.pg-t { font-style: italic; font-size: 24px; }

/* Contents sheet */
.contents-sheet { background: var(--void); border-left: 1px solid var(--ink); }
.sheet-head { background: var(--void); border-bottom: 3px double var(--ink); }
.sheet-head h2 { font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.12em; }
.ct-part h3 { font-style: italic; }
.ct-part a { font-family: var(--font-serif); font-size: 17px; }

@media (max-width: 760px) { body { font-size: 17px; } }
@container page (max-width: 699px) {
  .masthead { padding-top: 20px; }
  .mh-line span:nth-child(2) { display: none; }
  .cover { gap: 28px; }
  .chapter { padding: 12px 0; }
  .c-f { padding-left: 0.9em; }
  .chapter-head { padding-top: 32px; }
  .ch-num { font-size: 22px; }
}

/* ---------- The primer: a plain-language start to every chapter ---------- */
.primer { margin: 0 auto; max-width: 1080px; border-bottom: 1px solid var(--ink); padding: 0; }
.primer > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 18px 0; }
.primer > summary::-webkit-details-marker { display: none; }
.primer > summary:focus-visible { outline: 2px solid var(--hypha); outline-offset: 4px; }
.pr-k { color: var(--thread); font-size: 18px; }
.pr-sub { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--ink-3); }
.pr-toggle { margin-left: auto; font-family: var(--font-serif); font-size: 15px; color: var(--ink-3); border-bottom: 1px solid var(--hairline); }
.pr-toggle::after { content: "show"; }
.primer[open] .pr-toggle::after { content: "hide"; }
.primer > summary:hover .pr-toggle { color: var(--ink); border-color: var(--ink-3); }
.pr-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 8px 48px; padding: 0 0 26px; }
.pr-story { grid-column: 1 / -1; max-width: 70ch; }
.pr-story p { margin: 0 0 12px; font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--ink); }
.pr-story p:first-child::first-letter { float: left; font-size: 3.4em; line-height: 0.8; padding: 6px 8px 0 0; color: var(--thread); }
.pr-h { display: block; margin: 12px 0 10px; color: var(--ink-3); font-size: 15px; }
.pr-ideas { grid-column: 1; }
.pr-side { grid-column: 2; align-self: start; }
.pr-ideas dl { margin: 0; }
.pr-ideas dl > div { padding: 12px 0; border-top: 1px solid var(--hairline); }
.pr-ideas dt { font-family: var(--font-serif); font-size: 19px; font-style: italic; color: var(--thread); margin-bottom: 4px; }
.pr-ideas dd { margin: 0; }
.pr-ideas dd p { margin: 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.pr-like { margin-top: 6px !important; color: var(--ink) !important; }
.pr-like span { font-size: 14px; color: var(--ink-3); margin-right: 8px; }
.pr-myth { margin-top: 12px; padding: 12px 0 12px 16px; border-left: 2px solid var(--contested); }
.pr-myth .pr-h { margin-top: 0; color: var(--contested); }
.pr-myth p { margin: 0 0 6px; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.pr-wrong { color: var(--ink-3) !important; }
.pr-wrong::before { content: "Not quite: "; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.06em; color: var(--contested); }
.pr-look ul { margin: 0; padding-left: 18px; }
.pr-look li { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 6px; }
.pr-thread { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ink); }
.pr-thread .pr-h { font-style: normal; margin: 0 0 4px; }
@container page (max-width: 740px) {
  .pr-body { grid-template-columns: minmax(0, 1fr); }
  .pr-ideas, .pr-side { grid-column: 1; }
  .pr-story p { font-size: 18px; }
}

/* Glossary on the title page */
.glossary { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink); }
.gloss { margin: 0; columns: 2 340px; column-gap: 48px; }
.gloss > div { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.gloss dt { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--thread); }
.gloss dd { margin: 2px 0 0; font-family: var(--font-serif); font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.gloss dd a { margin-left: 4px; color: var(--ink-3); font-variant-numeric: oldstyle-nums; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.gloss dd a:hover { color: var(--thread); border-color: var(--thread); }

/* Reservoir view (learning step 7) */
.rs-chain-fig svg { max-width: 640px; }
.rs-fig > svg { max-width: 660px; }
.rs-fig svg text.rs-lab { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-2); }
.rs-fig svg text.rs-atoms { fill: var(--thread); }
.rs-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 24px; margin: 16px 0 0; }
.rs-facts dt { font-family: var(--font-serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.08em; color: var(--ink-3); font-size: 15px; }
.rs-facts dd { margin: 2px 0 0; font-family: var(--font-serif); font-size: 16px; color: var(--ink); }
.rs-fair { margin: 0; padding-left: 22px; max-width: 80ch; }
.rs-fair li { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--ink-2); margin-bottom: 8px; }
@media (max-width: 600px) {
  .rs-fig { overflow-x: auto; }
  .rs-fig > svg { min-width: 520px; }
}

/* ---------- atoms as a memory (learning step 12) ---------- */
.mm-web { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(260px, 1fr); gap: 20px 32px; align-items: start; }
.mm-layout-fig svg { max-width: 420px; width: 100%; }
.mm-patterns { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 18px; }
.mm-patterns .row, .mm-cues .row { display: flex; align-items: center; gap: 10px; }
.mm-patterns .cells, .mm-cues .cells { display: flex; gap: 3px; }
.mm-patterns .cell, .mm-cues .cell { width: 12px; height: 16px; border-radius: 2px; border: 1px solid var(--yields); }
.mm-patterns .cell.on, .mm-cues .cell.on { background: var(--thread); border-color: var(--thread); }
.mm-cues .cell.wrong { border-color: var(--tension); box-shadow: inset 0 0 0 1px var(--tension); }
.mm-patterns .lab, .mm-cues .lab { font-family: var(--font-serif); font-size: 15px; color: var(--ink-2); min-width: 5.5em; }
.mm-table-wrap { overflow-x: auto; }
.mm-cues { border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; }
.mm-cues th { text-align: left; font-family: var(--font-serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500; font-size: 15px; padding: 4px 14px 6px 0; border-bottom: 1px solid var(--ink-3); white-space: nowrap; }
.mm-cues td { padding: 5px 14px 5px 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; white-space: nowrap; }
.mm-cues td.ok { color: var(--hypha); }
.mm-cues td.bad { color: var(--tension); }
.mm-cues td.num { text-align: right; font-variant-numeric: tabular-nums; }
@container page (max-width: 662px) {
  .mm-web { grid-template-columns: 1fr; }
}

/* ---------- Navigation: one system ----------
   The running head, the chapter opener, the contents sheet and the pager all read the same place in the book.
   The running head names the chapter once its opener scrolls away, then the section you're in; the hairline
   under it fills as you read. Clicking it opens the contents at the current chapter, with its sections. */
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; padding: 8px 14px; background: var(--ink); color: var(--void); font-family: var(--font-serif); text-decoration: none; }
.skip:focus { top: 8px; }
.topbar { position: sticky; }
button.where { display: block; width: 100%; min-width: 0; padding: 2px 0; border: 0; background: none; cursor: pointer; line-height: 1.4; }
button.where:disabled { cursor: default; visibility: hidden; }
button.where:not(.shown) { pointer-events: none; visibility: hidden; }
button.where:hover .w-t { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; }
.where .w-sec { margin-left: 14px; color: var(--ink-3); }
.where .w-sec:empty { display: none; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--ink-3); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .12s linear; }
.cb-at { margin-left: 8px; color: var(--ink-3); font-variant: normal; text-transform: none; letter-spacing: 0; font-style: italic; font-variant-numeric: oldstyle-nums; }
.cb-at:empty { display: none; }
.contents-btn { display: inline-flex; align-items: baseline; }
.ch-title:focus { outline: none; }
.ch-title:focus-visible, #track-headline:focus-visible { outline: 2px solid var(--hypha); outline-offset: 6px; }
#track-headline:focus, #carry h2:focus { outline: none; }

/* A chapter that shares its run shows only its own panel */
.sec-off { display: none !important; }
.recap { margin: 0 0 16px; font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 44em; }
.recap a { color: var(--thread); text-decoration-color: color-mix(in srgb, var(--thread) 45%, transparent); text-underline-offset: 3px; }

/* Examples in a chapter: links, the one on screen marked like a pressed control */
.ch-runs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
a.chip { display: inline-block; text-decoration: none; }
a.chip:hover { color: var(--ink); border-color: var(--ink-3); }
a.chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--void); }

/* The opener's synopsis: the chapter's sections in one run-in line, like an old book's chapter head */
.ch-syn { margin: 14px auto 0; max-width: 46em; text-align: center; line-height: 1.7; }
.ch-syn:empty { display: none; }
.ch-syn button { display: inline; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-serif); font-style: italic; font-size: 16.5px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; }
.ch-syn button:not(:last-child)::after { content: "·"; display: inline-block; margin: 0 4px 0 10px; color: var(--ink-3); font-style: normal; }  /* trails its item, so a wrapped line never opens on a dot */
.ch-syn button { margin-right: 6px; }
.ch-syn button span { color: var(--thread); font-style: normal; font-variant-numeric: oldstyle-nums; }
.ch-syn button:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.ch-syn .syn-play { color: var(--thread); }
.ct-secs button { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 6px; width: 100%; padding: 3px 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.35; color: var(--ink-2); }
.ct-sn { color: var(--thread); font-variant-numeric: oldstyle-nums; }
.ct-secs button:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* A chapter focused on one panel of a shared run: the recap stands in for the home chapter's headline */
#view.is-focus .hero h1, #view.is-focus #lede, #view.is-focus #note, #view.is-focus #synthetic, #view.is-focus #whatif-banner { display: none; }

/* Contents: the current chapter opens to its sections */
.ct-secs { list-style: none; margin: 2px 0 8px 36px; padding: 4px 0 4px 12px; border-left: 1px solid var(--hairline); }
.ct-secs button { font-size: 15.5px; padding: 4px 0; }
.ct-end { border-top: 1px solid var(--hairline); margin-top: 0; padding-top: 16px; }
.ct-end:hover { color: var(--thread); }
.sheet-keys, .sheet-note { margin: 0; padding: 14px 24px 28px; font-family: var(--font-serif); font-size: 15px; color: var(--ink-3); }
.sheet-note { padding: 14px 24px 10px; color: var(--ink-2); }
.sheet-note code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
kbd { display: inline-block; min-width: 1.6em; padding: 0 4px; border: 1px solid var(--hairline); border-bottom-width: 2px; font-family: var(--font-sans); font-size: 12px; line-height: 1.5; text-align: center; color: var(--ink-2); }

/* The machine layer: the same sheet as the contents, carrying the record behind the page */
.machine-sheet { width: min(760px, 100vw); display: none; flex-direction: column; overflow: hidden; }
.machine-sheet[open] { display: flex; }
#machine-record { flex: 1; min-height: 0; margin: 0; padding: 14px 24px 40px; overflow: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--ink-2); border-top: 1px solid var(--hairline); }

@media (max-width: 760px) {
  /* Phones: once the opener scrolls away, the section you're in takes the wordmark's place */
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .brand, button.where { grid-column: 1; grid-row: 1; }
  button.where { text-align: left; }
  button.where .w-part, button.where .w-sep, button.where .w-t { display: none; }
  button.where .w-sec { margin-left: 0; }
  body:has(button.where.shown #where-sec:not(:empty)) .brand { visibility: hidden; }
  .cb-at { display: none; }
  .ct-secs { margin-left: 28px; }
}
.machine-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 24px 0; }
.machine-files:empty { display: none; }
.machine-files .chip { font-family: var(--font-mono); font-size: 12px; }

/* Touch: full-height targets in the running head, the glyphs stay small */
@media (pointer: coarse) {
  .topbar { padding-top: 2px; padding-bottom: 2px; }
  .icon-btn, .contents-btn { min-height: 44px; min-width: 40px; }
  .pager, .tools { gap: 0; }
}
/* Phones: the wordmark and the pager can't share the bar, so the clew stands for the brand */
@media (max-width: 640px) {
  .topbar { gap: 8px; }
  .brand img { display: block; }
  .brand .wordmark { display: none; }
  .tools { padding-left: 6px; }
}