/* MEMENTO — architectural memory workspace. One stylesheet, no build.
   Order: fonts · tokens · base · type · rail · buttons/controls · status · workspace · windows · blueprint ·
          page frames · index · charts · accession desk · $MEMENTO · protocol sheets · overlays · motion · responsive */

/* ============ 0. Fonts (self-hosted, OFL) ============ */
@font-face { font-family: "Archivo Variable"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin-wdth.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo Variable"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin-ext-wdth.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin-wght.woff2") format("woff2-variations"); }
@font-face { font-family: "Newsreader Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-wght.woff2") format("woff2-variations"); }
@font-face { font-family: "Newsreader Variable"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations"); }

/* ============ 1. Tokens ============ */
:root {
  color-scheme: light;
  /* v6 · MEMENTO semantic tokens: white paper, signature grey #969696 for display language, readable ink for essential text */
  --paper: #ffffff; --paper-soft: #f7f7f5; --paper-raised: #fbfbfa;
  --memento-grey: #969696; --memento-grey-a: #96969696;
  --ink-readable: #595959; --ink-strong: #151515;
  --line: #d9d9d6; --line-strong: #b9b9b5; --selection: #111111; --warning: #b6453c;
  --r-window: 16px; --r-control: 10px; --r-chip: 8px;
  /* application aliases (the v3–v5 stylesheet vocabulary maps onto the tokens above) */
  --ground: var(--paper); --ground-2: var(--paper-soft); --surface: var(--paper-raised); --surface-2: #f1f1ef;
  --line-2: var(--line-strong); --line-3: #a3a3a0;
  --ink: var(--ink-strong); --ink-2: var(--ink-readable); --ink-3: #767674;
  --sheet: var(--paper); --sheet-2: var(--paper-soft); --sheet-ink: var(--ink-strong); --sheet-ink-2: var(--ink-readable); --sheet-mute: #767674; --sheet-line: var(--line);
  --syn: #cfcfcc; --syn-2: #e6e6e3;
  --red: var(--warning); --red-soft: rgba(182, 69, 60, .12);
  --human: #b07f3e;
  --ink-rgb: 21, 21, 21; --ground-rgb: 255, 255, 255; --syn-rgb: 207, 207, 204; --red-rgb: 182, 69, 60; --form-rgb: 230, 230, 227;
  --display: "Archivo Variable", Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Newsreader Variable", Georgia, "Times New Roman", serif;
  --fs-0: .6875rem; --fs-1: .75rem; --fs-2: .8125rem; --fs-3: .9375rem; --fs-4: 1.0625rem; --fs-5: 1.375rem; --fs-6: 1.875rem; --fs-7: clamp(2.5rem, 5vw, 4rem); --fs-8: clamp(3.5rem, 9vw, 7.5rem);
  --rail-h: 3.5rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --t-hover: 160ms; --t-open: 340ms; --t-detail: 520ms; --t-replace: 1000ms; --t-capacity: 1600ms;
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(0, .55, .2, 1); --ease-in: cubic-bezier(.4, 0, .2, 1);
}
html.embed { --rail-h: 0px; }

/* ============ 2. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--display); font-size: var(--fs-3); line-height: 1.45; -webkit-font-smoothing: antialiased; min-height: 100vh; padding-bottom: var(--rail-h); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0 0 .8em; max-width: 58ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
p a, li a, td a, dd a { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: .18em; }
p a:hover, li a:hover, td a:hover, dd a:hover { text-decoration-color: currentColor; }
strong { font-weight: 600; }
img, video, canvas { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code, kbd, pre, .mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
code { font-size: .92em; }
pre { margin: 0; overflow-x: auto; font-size: var(--fs-2); line-height: 1.6; }
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sheet :focus-visible, .win :focus-visible, .desk-sheet :focus-visible, .sh-sheet :focus-visible { outline-color: var(--sheet-ink); }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 100; padding: .5rem .75rem; background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: var(--fs-1); }
.skip:focus { top: .5rem; }
.wrap { width: 100%; max-width: 96rem; margin-inline: auto; padding-inline: var(--gutter); }
.tnum { font-variant-numeric: tabular-nums; }

/* ============ 3. Type ============ */
.k, .eyebrow { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.k b { color: var(--ink); font-weight: 500; }
.big { font-family: var(--display); font-stretch: 70%; font-weight: 700; letter-spacing: -.02em; line-height: .9; }
.excerpt { font-family: var(--serif); font-style: italic; font-weight: 400; }
.red { color: var(--red); }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-2); color: var(--ink-2); }
.lead { font-size: var(--fs-5); line-height: 1.25; letter-spacing: -.01em; max-width: 34ch; color: var(--ink-2); }

/* ============ 4. System Rail ============ */
.rail { position: fixed; left: 0; right: 0; bottom: 0; height: var(--rail-h); z-index: 80; background: var(--ground-2); border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; padding-inline: .5rem; gap: .5rem; }
.rail-nav { display: flex; align-items: stretch; }
.rail-item { display: inline-flex; align-items: center; gap: .55rem; padding: 0 .85rem; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); position: relative; border-right: 1px solid var(--line); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); white-space: nowrap; }
.rail-item:hover, .rail-item:focus-visible { background: var(--ink); color: var(--ground); outline: 0; }
.rail-item[aria-current="page"] { color: var(--ink); }
.rail-item[aria-current="page"]::after { content: ""; position: absolute; left: .85rem; right: .85rem; top: 0; height: 2px; background: var(--ink); }
.rail-item[aria-current="page"]:hover::after { background: var(--ground); }
.rail-item .g { width: .8rem; height: .8rem; display: inline-grid; place-items: center; flex: none; }
.rail-item .g i { display: block; width: 100%; height: 100%; background: currentColor; }
.rail-item .g.g-ws i { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.rail-item .g.g-ix i { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }
.rail-item .g.g-add i { background: none; position: relative; }
.rail-item .g.g-add i::before, .rail-item .g.g-add i::after { content: ""; position: absolute; background: currentColor; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rail-item .g.g-add i::before { width: 100%; height: 1.5px; } .rail-item .g.g-add i::after { height: 100%; width: 1.5px; }
.rail-item .g.g-cap i { background: linear-gradient(to top, currentColor 0 38%, transparent 38%); box-shadow: inset 0 0 0 1.5px currentColor; }
.rail-item .g.g-pr i { background: repeating-linear-gradient(180deg, currentColor 0 1.5px, transparent 1.5px 3.5px); }
.rail-records { display: flex; align-items: center; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-inline: .5rem; }
.rail-records::-webkit-scrollbar { display: none; }
.rail-rec { display: inline-flex; align-items: center; gap: .45rem; height: 2rem; padding: 0 .6rem; border: 1px solid var(--line-2); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; max-width: 14rem; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.rail-rec span { overflow: hidden; text-overflow: ellipsis; }
.rail-rec .sw { width: .55rem; height: .55rem; flex: none; }
.rail-rec:hover, .rail-rec:focus-visible { background: var(--ink); color: var(--ground); outline: 0; }
.rail-rec.active { border-color: var(--ink); color: var(--ink); }
.rail-rec.min { border-style: dashed; }
.rail-rec.min::before { content: "▁"; font-size: .6rem; }
.rail-tools { display: flex; align-items: stretch; }
.rail-tools .rail-item { border-right: 0; border-left: 1px solid var(--line); }
.rail-tools .rail-item[aria-pressed="true"] { color: var(--ink); }
.rail-tools .rail-item[aria-pressed="true"] .g i { background: var(--red); }
.rail-status { display: inline-flex; align-items: center; gap: .4rem; padding-inline: .85rem; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-left: 1px solid var(--line); }
.rail-status i { width: .5rem; height: .5rem; background: var(--ink-3); }
.rail-status:hover { color: var(--ink); }

/* ============ 5. Buttons & controls ============ */
.btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; padding: .85em 1.1em; border: 1px solid var(--ink); color: var(--ink); background: transparent; line-height: 1; white-space: nowrap; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--ground); outline: 0; }
.btn.fill { background: var(--ink); color: var(--ground); }
.btn.fill:hover, .btn.fill:focus-visible { background: transparent; color: var(--ink); }
.btn.quiet { border-color: var(--line-2); color: var(--ink-2); }
.btn.quiet:hover { border-color: var(--ink); }
.btn.red { border-color: var(--red); color: var(--red); }
.btn.red:hover { background: var(--red); color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; color: var(--ink); }
.btn.fill[disabled]:hover { background: var(--ink); color: var(--ground); }
.btn.lg { font-size: var(--fs-1); padding: 1em 1.4em; }
.btn .arrow { transition: transform var(--t-hover) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.on-sheet .btn, .win .btn { border-color: var(--sheet-ink); color: var(--sheet-ink); }
.on-sheet .btn:hover, .win .btn:hover, .on-sheet .btn:focus-visible, .win .btn:focus-visible { background: var(--sheet-ink); color: var(--sheet); }
.on-sheet .btn.fill, .win .btn.fill { background: var(--sheet-ink); color: var(--sheet); }
.on-sheet .btn.fill:hover { background: transparent; color: var(--sheet-ink); }
.on-sheet .btn.quiet, .win .btn.quiet { border-color: var(--sheet-line); color: var(--sheet-ink-2); }
.on-sheet .btn.fill[disabled]:hover { background: var(--sheet-ink); color: var(--sheet); }
.on-sheet .btn[disabled]:hover { background: transparent; color: var(--sheet-ink); }

.seg { display: inline-flex; border: 1px solid var(--line-2); }
.seg button { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; padding: .6em .9em; color: var(--ink-2); border-right: 1px solid var(--line-2); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.on-sheet .seg { border-color: var(--sheet-ink); } .on-sheet .seg button { color: var(--sheet-ink-2); border-color: var(--sheet-ink); } .on-sheet .seg button[aria-pressed="true"] { background: var(--sheet-ink); color: var(--sheet); }

.chipset { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; padding: .45em .65em; border: 1px solid var(--line-2); color: var(--ink-2); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); display: inline-flex; gap: .5em; align-items: center; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.chip .n { opacity: .55; }
.on-sheet .chip { border-color: var(--sheet-line); color: var(--sheet-ink-2); } .on-sheet .chip:hover { border-color: var(--sheet-ink); color: var(--sheet-ink); } .on-sheet .chip[aria-pressed="true"] { background: var(--sheet-ink); color: var(--sheet); border-color: var(--sheet-ink); }

input[type="text"], input[type="search"], input[type="url"], input[type="date"], input[type="number"], textarea, select { font: inherit; font-size: var(--fs-3); color: var(--ink); background: var(--ground); border: 1px solid var(--line-2); padding: .6em .7em; width: 100%; border-radius: 0; transition: border-color var(--t-hover) var(--ease); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--ink); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
textarea { min-height: 7.5em; resize: vertical; line-height: 1.5; }
select { font-family: var(--mono); font-size: var(--fs-2); appearance: none; padding-right: 2.2em; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.on-sheet input[type="text"], .on-sheet input[type="search"], .on-sheet input[type="url"], .on-sheet input[type="date"], .on-sheet input[type="number"], .on-sheet textarea, .on-sheet select { background: #fff; color: var(--sheet-ink); border-color: var(--sheet-line); }
.on-sheet input:focus, .on-sheet textarea:focus, .on-sheet select:focus { border-color: var(--sheet-ink); }
.on-sheet input::placeholder, .on-sheet textarea::placeholder { color: var(--sheet-mute); }
label, .lbl { display: block; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem; }
.on-sheet label, .on-sheet .lbl, .on-sheet .k { color: var(--sheet-mute); } .on-sheet .k b { color: var(--sheet-ink); }
label .req { color: var(--red); }
.field { margin-bottom: 1rem; }
.field .help { font-family: var(--mono); font-size: var(--fs-0); color: var(--sheet-mute); margin-top: .35rem; display: flex; justify-content: space-between; gap: 1rem; }
.field .err { font-family: var(--mono); font-size: var(--fs-0); color: var(--red); margin-top: .35rem; letter-spacing: .02em; }
.check { display: flex; gap: .6em; align-items: flex-start; font-family: var(--display); font-size: var(--fs-2); text-transform: none; letter-spacing: 0; color: inherit; cursor: pointer; margin-bottom: .45rem; }
.check input { margin: .25em 0 0; accent-color: var(--sheet-ink); width: 1em; height: 1em; flex: none; }
.check span small { display: block; color: var(--sheet-mute); font-size: var(--fs-1); }
input[type="range"] { width: 100%; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-2); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line-2); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; background: var(--ink); margin-top: -5px; border: 0; border-radius: 0; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: var(--ink); border: 0; border-radius: 0; }
input[type="range"].simr::-webkit-slider-thumb { background: var(--red); } input[type="range"].simr::-moz-range-thumb { background: var(--red); }
.copy { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line-2); padding: .4em .6em; color: var(--ink-2); }
.copy:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.copy[data-state="done"] { border-color: var(--ink); color: var(--ink); }
.on-sheet .copy { border-color: var(--sheet-line); color: var(--sheet-ink-2); } .on-sheet .copy:hover { background: var(--sheet-ink); color: var(--sheet); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.1rem; margin: 0; font-size: var(--fs-2); }
.kv dt { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: .2em; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv dd.mono { font-size: var(--fs-1); color: var(--ink-2); }
.on-sheet .kv dt { color: var(--sheet-mute); } .on-sheet .kv dd { color: var(--sheet-ink); } .on-sheet .kv dd.mono { color: var(--sheet-ink-2); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.table th, .table td { text-align: left; padding: .55em .75em .55em 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.table td.mono, .table th.mono { font-family: var(--mono); font-size: var(--fs-1); white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.on-sheet .table th, .on-sheet .table td { border-color: var(--sheet-line); } .on-sheet .table th { color: var(--sheet-mute); }

/* ============ 6. Status vocabulary ============ */
.tag { display: inline-flex; align-items: center; gap: .45em; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; padding: .3em .55em; border: 1px solid currentColor; color: var(--ink-2); line-height: 1.2; white-space: nowrap; }
.tag::before { content: ""; width: .45em; height: .45em; background: currentColor; }
.tag.live { background: var(--ink); color: var(--ground); }
.tag.proto { color: var(--ink-2); }
.tag.demo { border-style: dashed; color: var(--ink-2); }
.tag.sim { color: var(--red); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--red-soft) 4px 6px); }
.tag.proposed { color: var(--ink-3); border-style: dotted; }
.tag.notdep { color: var(--red); }
.on-sheet .tag.proto, .on-sheet .tag.demo, .win .tag.proto, .win .tag.demo { color: var(--sheet-ink-2); }
.on-sheet .tag.proposed { color: var(--sheet-mute); }

/* ============ 7. Workspace ============ */
.ws { position: relative; height: calc(100vh - var(--rail-h)); height: calc(100dvh - var(--rail-h)); overflow: hidden; background: var(--ground); }
.ws-id { position: absolute; left: var(--gutter); top: 1.25rem; z-index: 19; display: grid; gap: .5rem; pointer-events: none; }
.ws-id > * { pointer-events: auto; }
.ws-id .wm { font-family: var(--display); font-weight: 700; font-stretch: 72%; font-size: clamp(2.6rem, 6vw, 5.5rem); letter-spacing: -.03em; line-height: .85; }
.ws-id .wm i { display: inline-block; width: .11em; height: .11em; background: var(--red); margin-left: .06em; }
.ws-id .cap { font-family: var(--mono); font-size: var(--fs-1); letter-spacing: .08em; color: var(--ink-2); text-transform: uppercase; white-space: nowrap; }
.ws-id .cap b { color: var(--ink); font-weight: 500; }
.ws-id .rule { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); max-width: 30ch; line-height: 1.6; }
.ws-status { position: absolute; right: var(--gutter); top: 1.25rem; z-index: 19; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ws-help { position: absolute; left: var(--gutter); bottom: 1rem; z-index: 19; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 1.25rem; flex-wrap: wrap; }
.ws-help b { color: var(--ink-2); font-weight: 500; }
.ws-surface { position: absolute; inset: 0; }
.art { position: absolute; z-index: 2; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.art.dragging { cursor: grabbing; z-index: 30; }
.art:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.art.selected { outline: 1px solid var(--ink); outline-offset: 5px; }
.art .lab { position: absolute; left: 0; right: 0; top: 100%; margin-top: .3rem; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; display: flex; justify-content: space-between; gap: .5rem; }
.art .lab b { color: var(--ink-2); font-weight: 500; }
.art:hover .lab, .art.selected .lab { color: var(--ink-2); }
.art.snapping::after { content: ""; position: absolute; inset: -6px; border: 1px dashed var(--red); pointer-events: none; }
.art-photo { width: 12.5rem; }
.art-photo .frame { background: var(--sheet); padding: 4px; overflow: hidden; }
.art-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.9); transition: transform var(--t-hover) var(--ease); }
.art-photo.tall img { aspect-ratio: 3/4; }
.art:hover img { transform: scale(1.03); }
.art-slip { width: 15rem; background: var(--sheet); color: var(--sheet-ink); padding: .75rem .85rem .8rem; }
.art-slip .excerpt { font-size: var(--fs-3); line-height: 1.35; color: var(--sheet-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art-slip .tab { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; background: var(--sheet-ink); color: var(--sheet); padding: .2em .45em; margin-bottom: .45rem; }
.art-wave { width: 14rem; background: var(--surface); border: 1px solid var(--line-2); padding: .5rem .6rem; transition: background var(--t-hover) var(--ease); }
.art-wave svg { width: 100%; height: 2.6rem; display: block; }
.art-wave svg path { stroke: var(--ink); fill: none; stroke-width: 1.2; }
.art-wave .dur { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: .3rem; display: flex; justify-content: space-between; }
.art-frame { width: 13rem; background: var(--ground); border: 1px solid var(--line-2); padding: .4rem .35rem; }
.art-frame .strip { position: relative; overflow: hidden; }
.art-frame img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: saturate(.85); transition: transform var(--t-hover) var(--ease); }
.art-frame .perf { height: 4px; background: repeating-linear-gradient(90deg, var(--line-3) 0 4px, transparent 4px 9px); margin: .3rem 0; }
.art-frame .tc { position: absolute; right: .35rem; bottom: .3rem; font-family: var(--mono); font-size: 9px; background: var(--ground); color: var(--ink); padding: .15em .35em; letter-spacing: .08em; }
.art-scan { width: 7.5rem; background: var(--sheet); padding: 3px; }
.art-scan img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.art-syn { width: 5.6rem; height: 5.6rem; background: var(--syn-2); border: 1px solid var(--line-2); display: grid; place-items: center; text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.7; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.art-syn b { color: var(--ink-2); font-weight: 500; display: block; font-size: 10px; }
.art-syn i { display: block; width: 1rem; height: 1rem; background: var(--syn); margin: 0 auto .3rem; }
.art-spec { width: 11.5rem; background: var(--sheet); color: var(--sheet-ink); padding: .65rem .75rem .75rem; border-top: 3px solid var(--sheet-ink); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.art-spec .sn { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); display: flex; justify-content: space-between; }
.art-spec h3 { font-size: var(--fs-2); font-weight: 600; margin-top: .35rem; line-height: 1.2; }
.art-spec .lines { margin-top: .5rem; display: grid; gap: 3px; }
.art-spec .lines i { display: block; height: 2px; background: var(--sheet-line); }
.art-spec .lines i:nth-child(2) { width: 70%; } .art-spec .lines i:nth-child(3) { width: 85%; }
.art:hover .art-photo .frame, .art:hover .art-slip, .art:hover .art-scan { box-shadow: 0 0 0 1px var(--ink); }
.art:hover .art-syn { background: var(--ink); color: var(--ground); border-color: var(--ink); } .art:hover .art-syn b { color: var(--ground); } .art:hover .art-syn i { background: var(--ground); }
.art:hover .art-spec { background: var(--sheet-ink); color: var(--sheet); border-top-color: var(--sheet); } .art:hover .art-spec .sn { color: var(--ink-2); } .art:hover .art-spec .lines i { background: var(--line-3); }
.art:hover .art-wave { background: var(--ink); } .art:hover .art-wave .dur { color: var(--ground); } .art:hover .art-wave svg path { stroke: var(--ground); }
.guides { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.guides .gl { position: absolute; background: var(--red); opacity: 0; transition: opacity var(--t-hover); }
.guides .gl.v { width: 1px; top: 0; bottom: 0; } .guides .gl.h { height: 1px; left: 0; right: 0; }
.guides .gl.on { opacity: .8; }

/* ============ 8. Record windows ============ */
.win { position: absolute; z-index: 20; width: min(34rem, calc(100vw - 2rem)); background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-ink); box-shadow: 0 0 0 1px var(--ground), 0 30px 60px -20px rgba(0, 0, 0, .18); display: grid; grid-template-rows: auto 1fr auto; max-height: calc(100vh - var(--rail-h) - 2rem); }
.win.focused { box-shadow: 0 0 0 1px var(--ground), 0 0 0 3px var(--ink), 0 30px 60px -20px rgba(0, 0, 0, .18); }
.win.expanded { width: min(64rem, calc(100vw - 2rem)); }
.win-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .8rem; background: var(--sheet-ink); color: var(--sheet); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.win-bar:active { cursor: grabbing; }
.win-bar .ttl { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-bar .ttl b { font-weight: 500; }
.win-bar .ttl i { font-style: normal; color: var(--ink-2); margin: 0 .5em; }
.win-ctl { display: inline-flex; }
.win-ctl button { width: 1.75rem; height: 1.6rem; display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-1); color: var(--sheet); border-left: 1px solid var(--line-2); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.win-ctl button:hover, .win-ctl button:focus-visible { background: var(--sheet); color: var(--sheet-ink); outline: 0; }
.win-ctl button.x:hover { background: var(--red); color: var(--ink); }
.win-body { overflow: auto; display: grid; grid-template-columns: 9rem 1fr; }
.win.expanded .win-body { grid-template-columns: 12rem 1fr 14rem; }
.win-hist { border-right: 1px solid var(--sheet-line); padding: .8rem; display: grid; gap: .55rem; align-content: start; font-family: var(--mono); font-size: var(--fs-0); color: var(--sheet-ink-2); letter-spacing: .04em; }
.win-hist b { color: var(--sheet-ink); font-weight: 500; display: block; letter-spacing: .1em; text-transform: uppercase; font-size: 9px; margin-bottom: .1rem; }
.win-hist div { line-height: 1.35; }
.win-main { min-width: 0; }
.win-media { background: var(--ground); position: relative; }
.win-media img, .win-media video { width: 100%; max-height: 18rem; object-fit: cover; display: block; }
.win-media .demo { position: absolute; top: .5rem; left: .5rem; color: var(--ink-2); }
.win-media audio { width: 100%; display: block; padding: .6rem .8rem; }
.win-media .swatch { height: 4.5rem; }
.win-media .wave { padding: 1rem .8rem .4rem; } .win-media .wave svg { width: 100%; height: 3.2rem; display: block; } .win-media .wave path { stroke: var(--ink); fill: none; stroke-width: 1.2; }
.win-text { padding: .9rem 1rem; }
.win-text h2 { font-size: var(--fs-5); font-weight: 600; letter-spacing: -.015em; margin-bottom: .45rem; }
.win-text .excerpt { font-size: var(--fs-4); line-height: 1.4; color: var(--sheet-ink); }
.win-text .syn { font-family: var(--mono); font-size: var(--fs-2); color: var(--sheet-ink-2); line-height: 1.5; }
.win-text .cap { font-size: var(--fs-2); color: var(--sheet-ink-2); margin-top: .5rem; }
.win-prov { border-left: 1px solid var(--sheet-line); padding: .8rem; display: grid; gap: .6rem; align-content: start; }
.win .kv { grid-template-columns: 6.5rem 1fr; gap: .3rem .6rem; font-size: var(--fs-1); }
.win .kv dt { color: var(--sheet-mute); } .win .kv dd { color: var(--sheet-ink); } .win .kv dd.mono { color: var(--sheet-ink-2); }
.win-before { margin: 0 1rem .9rem; border-left: 2px solid var(--red); padding: .55rem .7rem; background: var(--sheet-2); font-size: var(--fs-2); }
.win-before .k { color: var(--red); display: block; margin-bottom: .25rem; }
.win-before s { color: var(--sheet-ink-2); text-decoration-color: var(--red); }
.win-before .h { font-family: var(--mono); font-size: 9px; color: var(--sheet-mute); margin-top: .3rem; overflow-wrap: anywhere; }
.win-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .8rem; border-top: 1px solid var(--sheet-line); }

/* ============ 9. Blueprint layer ============ */
.bp { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity var(--t-open) var(--ease); }
body.structure .bp { opacity: 1; }
.bp svg { width: 100%; height: 100%; display: block; font-family: var(--mono); font-size: 9px; }
.bp .gcol { stroke: var(--line-2); stroke-width: 1; }
.bp .gcol.major { stroke: var(--line-3); }
.bp .grow { stroke: var(--line); stroke-width: 1; }
.bp .grow.major { stroke: var(--line-2); }
.bp .axis-lab { fill: var(--ink-3); letter-spacing: .1em; }
.bp .bound { stroke: var(--red); stroke-width: 1; stroke-dasharray: 4 3; }
.bp .bound-lab { fill: var(--red); letter-spacing: .12em; }
.bp .reserved { fill: url(#bp-hatch); }
.bp .reserved-lab { fill: var(--ink-3); letter-spacing: .12em; }
.bp .marker { fill: none; stroke: var(--red); stroke-width: 1.5; }
.bp .marker.syn { stroke: var(--ink-2); }
.bp .link { stroke: var(--red); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.bp .link.syn { stroke: var(--ink-3); }
.bp .link-lab { fill: var(--ink-2); letter-spacing: .1em; }
.bp .axis-d { stroke-dasharray: 3000; stroke-dashoffset: 3000; }
body.structure .bp .axis-d { animation: draw 1.2s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ============ 10. Page frames ============ */
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0 .8rem; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--fs-5); font-weight: 600; letter-spacing: -.01em; display: flex; align-items: baseline; gap: .8rem; }
.page-head h1 small { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.page-head .counts { display: flex; gap: 1.1rem; font-family: var(--mono); font-size: var(--fs-1); color: var(--ink-2); font-variant-numeric: tabular-nums; flex-wrap: wrap; align-items: center; }
.page-head .counts b { color: var(--ink); font-weight: 500; }
.page-head .counts .h b { color: var(--human); }
.panel { background: var(--surface); border: 1px solid var(--line); }
/* card / sheet header: title column that may wrap + badge column that never shrinks. Below 340px of container
   width the badge drops to its own row. No absolute positioning, no negative margins (v7 §1). */
.panel, .sheet, .evidence, .profile, .inspector { container-type: inline-size; }
.ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: .75rem; row-gap: .35rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-0); line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ph > * { min-width: 0; }
.ph > :first-child { overflow-wrap: anywhere; }
.ph b { color: var(--ink); font-weight: 500; }
.ph .tag, .ph > span:last-child:not(:first-child) { white-space: nowrap; justify-self: end; align-self: start; flex-shrink: 0; }
.ph .tag { margin: 0; line-height: 1.2; }
@container (max-width: 300px) { .ph { grid-template-columns: minmax(0, 1fr); } .ph .tag, .ph > span:last-child:not(:first-child) { justify-self: start; } }
@supports not (container-type: inline-size) { @media (max-width: 420px) { .ph { grid-template-columns: minmax(0, 1fr); } .ph .tag { justify-self: start; } } }
.panel .pb { padding: .8rem; }
.sheet { background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-ink); }
.sheet .ph { border-color: var(--sheet-ink); color: var(--sheet-mute); } .sheet .ph b { color: var(--sheet-ink); }

/* ============ 11. Index ============ */
.idx, .mind { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; padding-block: 1rem 1.5rem; position: relative; }
.idx > *, .mind > * { min-width: 0; }
.stage { display: grid; gap: .6rem; }
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.stage-bar .tools { display: inline-flex; }
.stage-bar .tools button { font-family: var(--mono); font-size: var(--fs-1); width: 2rem; height: 2rem; border: 1px solid var(--line-2); margin-left: -1px; color: var(--ink-2); display: inline-grid; place-items: center; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.stage-bar .tools button:hover, .stage-bar .tools button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.legend { display: inline-flex; gap: 1rem; align-items: center; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.legend i { display: inline-block; width: .6em; height: .6em; vertical-align: -1px; margin-right: .4em; }
.legend .h i { background: var(--human); } .legend .s i { background: var(--syn); } .legend .r i { background: var(--red); } .legend .p i { background: repeating-linear-gradient(135deg, var(--ink-3) 0 1px, transparent 1px 3px); }
.view { position: relative; background: var(--ground); border: 1px solid var(--line-2); min-height: 20rem; }
.view-field { height: clamp(20rem, 52vh, 38rem); }
.view-field canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.view-field canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.view-field canvas.grab { cursor: grabbing; }
.hud { position: absolute; left: .6rem; right: .6rem; bottom: .5rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; pointer-events: none; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hud .reader { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-size: var(--fs-1); background: var(--ground); border: 1px solid var(--line); padding: .3rem .5rem; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud .reader b { color: var(--ink); font-weight: 500; }
.hud .zoom { background: var(--ground); border: 1px solid var(--line); padding: .3rem .5rem; }
.cap-strip { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cap-strip b { color: var(--ink); font-weight: 500; }
.cap-strip .simv { color: var(--red); }
.scrub { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.scrub b { color: var(--ink); font-weight: 500; }
.scrub .play { width: 1.75rem; height: 1.75rem; border: 1px solid var(--line-2); display: inline-grid; place-items: center; color: var(--ink-2); }
.scrub .play:hover { background: var(--ink); color: var(--ground); }
.pipe { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); }
.pipe div { padding: .5rem .6rem; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: grid; gap: .2rem; min-width: 0; }
.pipe div:last-child { border-right: 0; }
.pipe div b { color: var(--ink); font-weight: 500; font-size: var(--fs-0); letter-spacing: .04em; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe div.red b { color: var(--red); }
.ctrl { display: grid; gap: .9rem; }
.ctrl .group { display: grid; gap: .45rem; }
.ctrl .group > .k { display: flex; justify-content: space-between; }
.ctrl .group > .k button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-3); } .ctrl .group > .k button:hover { color: var(--ink); }
.search input { font-family: var(--mono); font-size: var(--fs-2); }
.daterow { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.daterow input { font-family: var(--mono); font-size: var(--fs-1); padding: .4em .5em; }
.ctrl details { border-top: 1px solid var(--line); padding-top: .6rem; }
.ctrl details summary { cursor: pointer; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); list-style: none; display: flex; justify-content: space-between; }
.ctrl details summary::-webkit-details-marker { display: none; }
.ctrl details summary::after { content: "+"; } .ctrl details[open] summary::after { content: "–"; }
.ctrl details > div { display: grid; gap: .9rem; margin-top: .8rem; }
.ctrl .foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-0); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.ctrl .foot b { color: var(--ink); font-weight: 500; }
.results .rh { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.results .rh b { color: var(--ink); font-weight: 500; }
.results .rh select { width: auto; padding: .3em 1.8em .3em .5em; font-size: var(--fs-0); background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%; }
.rlist { list-style: none; margin: 0; padding: 0; height: 30rem; overflow: auto; scrollbar-width: thin; position: relative; }
.rlist li { border-bottom: 1px solid var(--line); height: 3.6rem; }
.rlist .spacer { border: 0; }
.rlist button { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .6rem; width: 100%; text-align: left; padding: .55rem .8rem; align-items: start; height: 100%; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.rlist button:hover { background: var(--ink); color: var(--ground); }
.rlist button:hover .m, .rlist button:hover .m b { color: var(--ground); }
.rlist button[aria-current="true"] { box-shadow: inset 2px 0 0 var(--ink); background: var(--surface-2); }
.rlist button > span:last-child { display: grid; min-width: 0; }
.rlist .thumb { width: 2.4rem; height: 2.4rem; background: var(--syn); overflow: hidden; position: relative; }
.rlist .thumb img { width: 100%; height: 100%; object-fit: cover; }
.rlist .thumb .mt { position: absolute; right: 1px; bottom: 1px; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; background: var(--ground); padding: 1px 3px; color: var(--ink-2); }
.rlist .t { display: block; font-size: var(--fs-2); font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlist .m { font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: .06em; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlist .m b { color: var(--ink-2); font-weight: 500; }
.inspector { display: grid; }
.inspector .ih { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem .8rem; border-bottom: 1px solid var(--sheet-line); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); }
.inspector .ih b { color: var(--sheet-ink); font-weight: 500; }
.inspector .media { position: relative; background: var(--ground); border-bottom: 1px solid var(--sheet-line); }
.inspector .media img, .inspector .media video { width: 100%; max-height: 18rem; object-fit: cover; display: block; }
.inspector .media .swatch { height: 5rem; }
.inspector .media .demo { position: absolute; top: .5rem; left: .5rem; color: var(--ink-2); }
.inspector .media audio { width: 100%; display: block; padding: .6rem .8rem 0; }
.inspector .body { padding: .8rem; display: grid; gap: .75rem; }
.inspector .body h2 { font-size: var(--fs-5); font-weight: 600; }
.inspector .text { font-family: var(--serif); font-style: italic; font-size: var(--fs-4); line-height: 1.4; }
.inspector .text.syn { font-family: var(--mono); font-style: normal; font-size: var(--fs-2); color: var(--sheet-ink-2); }
.inspector .caption { font-size: var(--fs-2); color: var(--sheet-ink-2); }
.inspector .before { border-left: 2px solid var(--red); padding: .6rem .7rem; background: var(--sheet-2); font-size: var(--fs-2); }
.inspector .before .k { color: var(--red); display: block; margin-bottom: .25rem; }
.inspector .before s { color: var(--sheet-ink-2); text-decoration-color: var(--red); }
.inspector .before .h { font-family: var(--mono); font-size: 9px; color: var(--sheet-mute); margin-top: .3rem; overflow-wrap: anywhere; }
.inspector .foot { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .65rem .8rem; border-top: 1px solid var(--sheet-line); }
.inspector .warn { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; color: var(--sheet-ink-2); border: 1px dashed var(--sheet-line); padding: .35em .55em; }
.empty-state, .error-state { padding: 2rem 1rem; text-align: center; color: var(--ink-3); font-size: var(--fs-2); display: grid; gap: .6rem; justify-items: center; }
.empty-state b, .error-state b { color: var(--ink); font-weight: 500; font-size: var(--fs-3); }
.error-state b { color: var(--red); }
.loading-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 5, 5, .85); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); z-index: 3; }
.loading-veil i { display: block; width: 2rem; height: 2px; background: var(--line-2); margin-top: .75rem; position: relative; overflow: hidden; }
.loading-veil i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateX(-100%); animation: shimmer 1s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ============ 12. Charts ============ */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; font-family: var(--mono); font-size: 11px; overflow: visible; }
.chart .gridline { stroke: var(--line); } .chart .axis { stroke: var(--line-2); }
.chart .lab { fill: var(--ink-3); } .chart .lab.strong { fill: var(--ink); font-weight: 500; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.h { stroke: var(--human); }
.chart .area { fill: var(--ink); opacity: .05; } .chart .area.h { fill: var(--human); opacity: .1; }
.chart .bar { fill: var(--ink-3); opacity: .5; } .chart .bar.h { fill: var(--human); }
.chart .dot { fill: var(--human); stroke: var(--ground); stroke-width: 2; }
.chart .marker { stroke: var(--red); stroke-width: 1; stroke-dasharray: 2 3; } .chart .marker-lab { fill: var(--red); }
.chart .cross { stroke: var(--ink-2); stroke-width: 1; opacity: 0; } .chart .hover-dot { fill: var(--ground); stroke: var(--ink); stroke-width: 1.5; opacity: 0; }
.chart .rail-svg { width: auto; max-width: 100%; height: 8.5rem; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: var(--fs-0); padding: .45em .6em; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 10px)); transition: opacity var(--t-hover); z-index: 5; }
.tip b { font-weight: 600; }
.chart-card { padding: .8rem; display: grid; gap: .5rem; }
.chart-card .ch { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.chart-card .ch h3 { font-size: var(--fs-2); font-weight: 600; }
.chart-card .v { font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: var(--fs-6); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.chart-card .v small { font-family: var(--mono); font-stretch: 100%; font-weight: 400; font-size: var(--fs-0); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin-left: .5em; }
.chart-card .foot { font-family: var(--mono); font-size: var(--fs-0); color: var(--ink-3); letter-spacing: .04em; display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.chart-card .sr { font-family: var(--mono); font-size: var(--fs-0); color: var(--ink-3); }
.signal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.signal > * { min-width: 0; background: var(--ground); }
.signal .c2 { grid-column: span 2; } .signal .c3 { grid-column: span 3; } .signal .c4 { grid-column: span 4; } .signal .c6 { grid-column: span 6; }
.meter-row { display: grid; grid-template-columns: 6.5rem 1fr 3.5rem; gap: .6rem; align-items: center; font-size: var(--fs-2); padding: .25rem 0; }
.meter-row .k { font-size: var(--fs-0); }
.meter-row .bar { height: 5px; background: var(--syn-2); position: relative; }
.meter-row .bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ink-2); } .meter-row .bar i.h { background: var(--human); }
.meter-row .n { font-family: var(--mono); font-size: var(--fs-1); text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.timeline-view { display: grid; gap: 1rem; padding: .8rem; }
.data-table-toggle { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .data-table-toggle:hover { color: var(--ink); }

/* ============ 13. Accession desk ============ */
.desk { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 17rem; gap: 1rem; align-items: start; padding-block: 1rem 2rem; }
.desk > * { min-width: 0; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.stages li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stages li i { font-style: normal; width: 1.3rem; height: 1.3rem; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 9px; }
.stages li[aria-current="step"] { color: var(--ink); } .stages li[aria-current="step"] i { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.stages li.done { color: var(--ink-2); } .stages li.done i { border-color: var(--ink-2); }
.desk-sheet { background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-ink); position: relative; min-height: 28rem; display: grid; grid-template-rows: auto 1fr auto; }
.desk-sheet .sh { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--sheet-ink); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); }
.desk-sheet .sh b { color: var(--sheet-ink); font-weight: 500; }
.desk-sheet .sb { padding: 1rem 1.1rem 1.1rem; }
.step { display: none; } .step.on { display: block; animation: stepin var(--t-open) var(--ease-out); }
@keyframes stepin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.step h2 { font-size: var(--fs-5); font-weight: 600; margin-bottom: .3rem; letter-spacing: -.015em; }
.step h2:focus { outline: none; }
.step .intro { color: var(--sheet-ink-2); font-size: var(--fs-2); margin-bottom: 1rem; max-width: 52ch; }
.types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--sheet-ink); border: 1px solid var(--sheet-ink); }
.type { background: var(--sheet); padding: .9rem .8rem 1rem; text-align: left; display: grid; gap: .3rem; align-content: start; min-height: 8.5rem; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.type .ic { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); }
.type b { font-weight: 600; font-size: var(--fs-3); line-height: 1.15; }
.type small { color: var(--sheet-ink-2); font-size: var(--fs-1); line-height: 1.35; }
.type:hover, .type[aria-pressed="true"] { background: var(--sheet-ink); color: var(--sheet); } .type:hover .ic, .type:hover small, .type[aria-pressed="true"] .ic, .type[aria-pressed="true"] small { color: var(--ink-2); }
.opts { display: flex; flex-wrap: wrap; gap: 1px; background: var(--sheet-ink); border: 1px solid var(--sheet-ink); }
.opt { background: var(--sheet); color: var(--sheet-ink); padding: .55rem .8rem; text-align: left; display: grid; gap: .1rem; flex: 1 1 8rem; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.opt b { font-weight: 600; font-size: var(--fs-2); } .opt small { color: var(--sheet-ink-2); font-size: var(--fs-0); }
.opt:hover, .opt[aria-pressed="true"] { background: var(--sheet-ink); color: var(--sheet); } .opt:hover small, .opt[aria-pressed="true"] small { color: var(--ink-2); }
.drop { border: 1px dashed var(--sheet-ink); padding: 1.4rem 1rem; text-align: center; color: var(--sheet-ink-2); font-size: var(--fs-2); display: grid; gap: .35rem; justify-items: center; cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.drop:hover, .drop.over { background: var(--sheet-ink); color: var(--sheet); }
.drop b { font-weight: 600; } .drop input { display: none; }
.loose { display: grid; grid-template-columns: 8rem 1fr; gap: .8rem; align-items: start; border: 1px solid var(--sheet-ink); padding: .5rem; background: #fff; }
.loose .pm { width: 8rem; aspect-ratio: 1; background: var(--sheet-2); display: grid; place-items: center; overflow: hidden; color: var(--sheet-mute); font-family: var(--mono); font-size: var(--fs-0); }
.loose .pm img, .loose .pm video { width: 100%; height: 100%; object-fit: cover; }
.loose .pm audio { width: 7.5rem; }
.loose .pi { display: grid; gap: .25rem; font-family: var(--mono); font-size: var(--fs-0); color: var(--sheet-mute); letter-spacing: .04em; }
.loose .pi b { color: var(--sheet-ink); font-weight: 600; font-family: var(--display); font-size: var(--fs-2); letter-spacing: 0; overflow-wrap: anywhere; }
.desk-actions { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .7rem .8rem; border-top: 1px solid var(--sheet-ink); }
.desk-side { position: sticky; top: 1rem; display: grid; gap: .75rem; }
.plan { background: var(--ground); border: 1px solid var(--line-2); position: relative; }
.plan canvas { width: 100%; height: auto; aspect-ratio: 90/41; display: block; }
.plan-bar { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.plan-bar span:last-child { color: var(--ink-2); text-align: right; text-transform: none; letter-spacing: .04em; }
.sleeve { background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-ink); display: grid; }
.sleeve .sl-h { padding: .45rem .7rem; border-bottom: 1px solid var(--sheet-ink); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); display: flex; justify-content: space-between; }
.sleeve .sl-h b { color: var(--sheet-ink); font-weight: 500; }
.sleeve .sl-m { min-height: 5rem; background: var(--sheet-2); display: grid; place-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); overflow: hidden; position: relative; }
.sleeve .sl-m img, .sleeve .sl-m video { width: 100%; max-height: 10rem; object-fit: cover; }
.sleeve .labels { display: flex; flex-wrap: wrap; gap: .3rem; padding: .55rem .7rem; }
.sleeve .label { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--sheet-ink); padding: .25em .45em; color: var(--sheet-ink); animation: labelin var(--t-open) var(--ease-out); }
.sleeve .label.red { color: var(--red); border-color: var(--red); }
@keyframes labelin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sleeve .sl-t { padding: 0 .7rem .7rem; font-family: var(--serif); font-style: italic; font-size: var(--fs-2); line-height: 1.4; color: var(--sheet-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pipeline { display: grid; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--sheet-mute); border-top: 1px solid var(--sheet-line); }
.pipeline div { display: grid; grid-template-columns: .9rem 1fr auto; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--sheet-line); }
.pipeline i { width: .5rem; height: .5rem; border: 1px solid var(--sheet-line); display: inline-block; }
.pipeline div.done { color: var(--sheet-ink-2); } .pipeline div.done i { background: var(--sheet-ink-2); border-color: var(--sheet-ink-2); }
.pipeline div.active { color: var(--sheet-ink); } .pipeline div.active i { border-color: var(--sheet-ink); animation: blink 1s infinite; }
.pipeline div.stop { color: var(--red); } .pipeline div.stop i { border-color: var(--red); background: var(--red); }
@keyframes blink { 50% { opacity: .2; } }
.progress { height: 2px; background: var(--sheet-line); position: relative; overflow: hidden; }
.progress i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--sheet-ink); transition: width var(--t-hover) linear; }
.progress.err i { background: var(--red); }
.banner { border: 1px solid var(--red); color: var(--red); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; padding: .55rem .75rem; line-height: 1.5; }
.banner.neutral { border-color: var(--sheet-line); color: var(--sheet-ink-2); }
.hashbox { font-family: var(--mono); font-size: 9px; color: var(--sheet-ink-2); background: #fff; border: 1px solid var(--sheet-line); padding: .55rem .65rem; overflow-wrap: anywhere; line-height: 1.7; }
.summary .row { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; font-size: var(--fs-2); padding: .4rem 0; border-bottom: 1px solid var(--sheet-line); }
.summary .row .v { overflow-wrap: anywhere; }
.erased { border-left: 2px solid var(--red); padding: .7rem .8rem; background: var(--sheet-2); font-size: var(--fs-2); color: var(--sheet-ink); }
.erased .k { color: var(--red); display: block; margin-bottom: .3rem; }
.erased s { color: var(--sheet-ink-2); text-decoration-color: var(--red); }

/* ============ 14. $MEMENTO ============ */
.tok { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.25rem; align-items: start; padding-block: 1rem 2rem; }
.tok > * { min-width: 0; }
.tok-head { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: end; margin-bottom: 1rem; }
.tok-head .wm { font-family: var(--display); font-weight: 700; font-stretch: 72%; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.03em; line-height: .85; }
.tok-head p { color: var(--ink-2); font-size: var(--fs-3); max-width: 44ch; }
.section-draw { background: var(--ground); border: 1px solid var(--line-2); position: relative; }
.section-draw svg { width: 100%; height: auto; display: block; font-family: var(--mono); font-size: 10px; }
.section-draw .lab { fill: var(--ink-3); letter-spacing: .12em; } .section-draw .lab.strong { fill: var(--ink); }
.section-draw .bound { stroke: var(--red); stroke-width: 1; stroke-dasharray: 4 3; } .section-draw .bound-lab { fill: var(--red); letter-spacing: .12em; }
.section-draw .frame { fill: none; stroke: var(--line-3); }
.section-draw .v2-frame { fill: none; stroke: var(--ink-3); stroke-dasharray: 3 3; }
.realbox { border: 1px solid var(--line-2); padding: .9rem 1rem; display: grid; gap: .5rem; }
.realbox .v { font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: var(--fs-6); letter-spacing: -.02em; color: var(--ink-2); line-height: 1; }
.realbox .v small, .simbox .v small { display: block; font-family: var(--mono); font-stretch: 100%; font-weight: 400; font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: .35rem; }
.realbox .adapter { font-family: var(--mono); font-size: var(--fs-0); color: var(--ink-3); letter-spacing: .04em; line-height: 1.7; }
.realbox .adapter b { color: var(--ink-2); font-weight: 500; }
.simbox { border: 1px solid var(--red); padding: .9rem 1rem; display: grid; gap: .65rem; background: repeating-linear-gradient(135deg, transparent 0 8px, var(--red-soft) 8px 10px); }
.simbox .v { font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: var(--fs-6); letter-spacing: -.02em; color: var(--red); line-height: 1; }
.simbox p { font-size: var(--fs-2); color: var(--ink-2); }
.rule-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.rule-list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); color: var(--ink-2); }
.rule-list li i { font-style: normal; font-family: var(--mono); font-size: var(--fs-0); color: var(--ink-3); letter-spacing: .1em; padding-top: .25em; }
.rule-list li b { color: var(--ink); font-weight: 600; display: block; margin-bottom: .1rem; }
.rule-list li.never i { color: var(--red); }
.verify { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.verify div { background: var(--ground); padding: .6rem; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: grid; gap: .3rem; }
.verify div b { color: var(--ink); font-weight: 500; font-size: var(--fs-0); }
.verify div.red b { color: var(--red); }

/* ============ 15. Protocol sheets ============ */
.spec { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; padding-block: 1rem 3rem; }
.spec-nav { position: sticky; top: 1rem; align-self: start; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .06em; }
.spec-nav ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.spec-nav li { border-bottom: 1px solid var(--line); }
.spec-nav a { display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem; padding: .45rem 0; color: var(--ink-3); text-transform: uppercase; }
.spec-nav a i { font-style: normal; }
.spec-nav a:hover, .spec-nav a.active { color: var(--ink); }
.spec-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 56rem; } .spec-body > * { min-width: 0; }
.spec-body > header { padding: .5rem 0 1.5rem; }
.spec-body h1 { font-size: var(--fs-7); font-weight: 700; font-stretch: 78%; letter-spacing: -.03em; line-height: .92; }
.sh-sheet { background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-ink); scroll-margin-top: 1rem; }
.sh-sheet .sh-h { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: baseline; padding: .55rem .9rem; border-bottom: 1px solid var(--sheet-ink); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); }
.sh-sheet .sh-h b { color: var(--sheet-ink); font-weight: 500; }
.sh-sheet .sh-h h2 { font-family: var(--display); font-size: var(--fs-4); font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--sheet-ink); }
.sh-sheet .sh-b { padding: 1rem 1rem 1.1rem; display: grid; gap: .75rem; }
.sh-sheet p, .sh-sheet li { color: var(--sheet-ink-2); font-size: var(--fs-3); }
.sh-sheet p strong, .sh-sheet li strong { color: var(--sheet-ink); }
.sh-sheet ul, .sh-sheet ol { margin: 0; padding-left: 1.2em; max-width: 60ch; } .sh-sheet li { margin-bottom: .35em; }
.sh-sheet h3 { font-size: var(--fs-3); font-weight: 600; margin-top: .5rem; }
.codeblock { border: 1px solid var(--sheet-ink); background: #fff; overflow: hidden; }
.codeblock .cbh { display: flex; justify-content: space-between; align-items: center; padding: .45rem .8rem; border-bottom: 1px solid var(--sheet-line); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); }
.codeblock pre { padding: .8rem; } .codeblock code { color: var(--sheet-ink); font-size: var(--fs-1); }
.diagram { border: 1px solid var(--sheet-line); padding: .8rem; background: #fff; margin: 0; }
.diagram svg { width: 100%; height: auto; display: block; font-family: var(--mono); font-size: 10px; }
.diagram .box { fill: #fff; stroke: var(--sheet-ink); } .diagram .box.red { stroke: var(--red); } .diagram .box.fill { fill: var(--sheet-ink); }
.diagram .box.hatch { fill: url(#dg-hatch); stroke: var(--sheet-ink-2); stroke-dasharray: 3 3; }
.diagram text { fill: var(--sheet-ink); } .diagram .t2 { fill: var(--sheet-mute); font-size: 9px; } .diagram .tr { fill: var(--red); } .diagram .tw { fill: var(--sheet); }
.diagram .path { fill: none; stroke: var(--sheet-ink-2); stroke-width: 1.25; } .diagram .path.red { stroke: var(--red); }
.diagram .path.draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.diagram.in .path.draw { animation: draw 1.3s var(--ease-out) forwards; } .diagram.in .path.draw.d2 { animation-delay: .3s; } .diagram.in .path.draw.d3 { animation-delay: .6s; } .diagram.in .path.draw.d4 { animation-delay: .9s; }
.diagram figcaption { margin-top: .6rem; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sheet-mute); }
details.q { border-top: 1px solid var(--sheet-line); }
details.q:last-of-type { border-bottom: 1px solid var(--sheet-line); }
details.q summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 1.5rem; gap: 1rem; align-items: center; padding: .7rem 0; font-size: var(--fs-3); color: var(--sheet-ink); }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: "+"; font-family: var(--mono); color: var(--sheet-mute); text-align: right; } details.q[open] summary::after { content: "–"; color: var(--red); }
details.q .a { padding: 0 0 .9rem; }
.status-table td .tag { vertical-align: middle; }

/* ============ 16. Overlays, mobile stream ============ */
.stream { display: none; }
.sheet-modal { position: fixed; inset: 0; z-index: 90; background: var(--ground); display: grid; grid-template-rows: auto 1fr auto; }
.sheet-modal .sm-bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem .9rem; background: var(--sheet-ink); color: var(--sheet); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; }
.sheet-modal .sm-body { overflow: auto; background: var(--sheet); color: var(--sheet-ink); }
.sheet-modal .sm-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.sheet-modal .sm-nav button { background: var(--ground); color: var(--ink); padding: .9rem; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; }
.sheet-modal .sm-nav button:hover { background: var(--ink); color: var(--ground); }
.sheet-modal .sm-nav button[disabled] { opacity: .35; }
.bp-full { position: fixed; inset: 0; z-index: 85; background: var(--ground); display: grid; grid-template-rows: auto 1fr; }
.bp-full .sm-bar { display: flex; justify-content: space-between; align-items: center; padding: .5rem .5rem .5rem .9rem; background: var(--sheet-ink); color: var(--sheet); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; }
.bp-full .bp-scroll { overflow: auto; }
.bp-full .bp-scroll svg { width: 900px; height: auto; display: block; margin: 1rem; font-family: var(--mono); font-size: 9px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--rail-h) + .8rem); transform: translate(-50%, 8px); background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: var(--fs-1); padding: .65em 1em; opacity: 0; transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); z-index: 95; pointer-events: none; max-width: calc(100vw - 2rem); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--red); color: var(--ink); }

/* ============ 17. Motion preferences ============ */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .diagram .path.draw, .bp .axis-d { stroke-dashoffset: 0; } }
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
.no-motion .diagram .path.draw, .no-motion .bp .axis-d { stroke-dashoffset: 0; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }

/* ============ 18. Responsive ============ */
@media (max-width: 1180px) {
  .idx, .mind { grid-template-columns: 13rem minmax(0, 1fr); } .idx .col-r, .mind .col-r { grid-column: 1 / -1; }
  .desk { grid-template-columns: minmax(0, 1fr) 15rem; } .desk .col-l { grid-column: 1 / -1; }
  .stages { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; } .stages li { border-bottom: 0; border-top: 1px solid var(--line); } .stages li[aria-current="step"] { border-top-color: var(--ink); }
  .signal .c2 { grid-column: span 3; }
  .tok { grid-template-columns: minmax(0, 1fr); }
  .win.expanded .win-body { grid-template-columns: 10rem 1fr; } .win.expanded .win-prov { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--sheet-line); }
}
@media (max-width: 860px) {
  :root { --rail-h: 3.25rem; }
  .rail { grid-template-columns: 1fr auto; padding-inline: 0; gap: 0; }
  .rail-nav { display: grid; grid-template-columns: repeat(5, 1fr); }
  .rail-item { padding: 0; justify-content: center; gap: .3rem; flex-direction: column; font-size: 8px; letter-spacing: .06em; border-right: 1px solid var(--line); }
  .rail-item .lbl { font-size: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; letter-spacing: .03em; } .rail-item .lbl-long { display: none; }
  .rail-item[aria-current="page"]::after { left: 0; right: 0; }
  .rail-records { display: none; }
  .rail-tools .rail-item .lbl { display: none; } .rail-tools .rail-item { padding: 0 .7rem; }
  .rail-status { display: none; }
  .ws { height: auto; overflow: visible; min-height: calc(100vh - var(--rail-h)); }
  .ws-surface, .guides, .bp, .ws-help { display: none; }
  .ws-id { position: static; padding: 1.25rem var(--gutter) .5rem; }
  .ws-id .cap { white-space: normal; }
  .ws-status { position: static; justify-content: flex-start; padding: 0 var(--gutter) 1rem; }
  .stream { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .stream .sitem { background: var(--ground); color: var(--ink); display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; padding: .8rem var(--gutter); text-align: left; align-items: start; width: 100%; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
  .stream .sitem:hover, .stream .sitem:focus-visible { background: var(--ink); color: var(--ground); outline: 0; }
  .stream .sitem .th { width: 5.5rem; aspect-ratio: 1; background: var(--syn-2); overflow: hidden; display: grid; place-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--ink-3); }
  .stream .sitem .th img { width: 100%; height: 100%; object-fit: cover; }
  .stream .sitem .th.slip { background: var(--sheet); color: var(--sheet-ink); font-family: var(--serif); font-style: italic; font-size: var(--fs-0); padding: .4rem; letter-spacing: 0; text-transform: none; line-height: 1.3; overflow: hidden; }
  .stream .sitem .m { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .stream .sitem:hover .m { color: var(--ground); }
  .stream .sitem b { display: block; font-weight: 600; font-size: var(--fs-3); margin: .2rem 0; }
  .stream .sitem .x { font-size: var(--fs-2); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .stream .sitem:hover .x { color: var(--ground); }
  .idx, .mind { grid-template-columns: minmax(0, 1fr); } .idx .col-l, .idx .col-r, .mind .col-l, .mind .col-r { grid-column: 1 / -1; }
  .view-field { height: clamp(16rem, 60vw, 26rem); }
  .rlist { height: 20rem; }
  .signal { grid-template-columns: 1fr 1fr; } .signal .c2, .signal .c3, .signal .c4, .signal .c6 { grid-column: span 2; }
  .desk { grid-template-columns: minmax(0, 1fr); } .desk .col-r { grid-column: 1 / -1; } .desk-side { position: static; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .type { min-height: 0; }
  .tok-head { grid-template-columns: 1fr; }
  .spec { grid-template-columns: minmax(0, 1fr); } .spec-nav { position: static; } .spec-nav ol { display: flex; flex-wrap: wrap; gap: 0 .9rem; border: 0; } .spec-nav li { border: 0; } .spec-nav a { grid-template-columns: auto auto; padding: .3rem 0; }
  .win { position: fixed; inset: 0 0 var(--rail-h) 0 !important; width: auto; max-height: none; transform: none !important; }
  .win-body { grid-template-columns: 1fr; } .win-hist { border-right: 0; border-bottom: 1px solid var(--sheet-line); grid-template-columns: 1fr 1fr; }
  .verify { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipe { grid-template-columns: repeat(2, 1fr); } .pipe div { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .kv { grid-template-columns: 1fr; gap: .1rem .6rem; } .kv dt { padding-top: .45rem; }
  .meter-row { grid-template-columns: 5rem 1fr 3rem; }
  .signal { grid-template-columns: 1fr; } .signal .c2, .signal .c3, .signal .c4, .signal .c6 { grid-column: span 1; }
  .summary .row { grid-template-columns: 1fr; gap: .15rem; }
  .loose { grid-template-columns: 1fr; } .loose .pm { width: 100%; aspect-ratio: 16/9; }
  .hud .zoom { display: none; } .hud .reader { max-width: 100%; }
  .types { grid-template-columns: 1fr; }
  .stages { grid-template-columns: auto auto auto auto 1fr; gap: .4rem; } .stages li { grid-template-columns: 1.3rem auto; gap: .35rem; min-width: 0; } .stages li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stages li:not([aria-current]) span { display: none; }
  .verify { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .rail, .btn { display: none !important; } body { background: #fff; color: #000; padding: 0; } }

/* Index inspector: the Workspace record body, folded into one column for the 19rem sheet */
.inspector .insp-body { grid-template-columns: 1fr; max-height: 60vh; }
.inspector .insp-body .win-hist { border-right: 0; border-bottom: 1px solid var(--sheet-line); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inspector .insp-body .win-prov { border-left: 0; border-top: 1px solid var(--sheet-line); }
.inspector .insp-body .kv { grid-template-columns: 5.5rem 1fr; }
.inspector .foot .btn-row { display: flex; flex-wrap: wrap; gap: .4rem; }
body.sim-mode .cap-strip { border-top: 1px dashed var(--red); padding-top: .4rem; }
.on-sheet .ctrl .foot b { color: var(--sheet-ink); }
.h-sec { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.sim-sep { border-top: 1px dashed var(--red); padding-top: 1rem; }
.section-draw .sim-row { transition: opacity 120ms linear; }
tr.sim-reached td { background: rgba(224, 58, 30, .05); }
.win-sheet { grid-template-columns: 1fr; }
.win-sheet .sh-h { grid-template-columns: auto 1fr; } .win-sheet .sh-h > span:last-child { display: none; }
.win-sheet .sh-b { padding: .9rem 1rem 1rem; }
.win-sheet .codeblock pre { overflow-x: auto; }
.win.expanded.win-spec .win-body { grid-template-columns: 1fr; }

/* ===================== v4 · Mind Index ===================== */
.modes button { padding: .6em 1.1em; }
.seg.small button { padding: .45em .7em; font-size: 9px; }
.stage-bar .tools button.wide { width: auto; padding: 0 .6rem; letter-spacing: .1em; }
.legend .t i { background: var(--red); }
.mind[data-mode]:not([data-mode="memory"]) .view-field { height: clamp(11rem, 26vh, 15rem); }
.trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; overflow: visible; }
.trace .tr-cell { fill: none; stroke: var(--red); stroke-width: 1.2; }
.trace .tr-path { fill: none; stroke: var(--red); stroke-width: 1; stroke-dasharray: 3 2; }
.trace .tr-path.draw { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw .7s var(--ease-out) forwards; }
.trace .tr-end { fill: var(--red); }
.trace .tr-lab { fill: var(--red); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
/* version rail */
.vrail { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); padding: .35rem .6rem; }
.vrail b { color: var(--ink); font-weight: 500; }
.vrail .play { width: 1.75rem; height: 1.75rem; border: 1px solid var(--line-2); display: inline-grid; place-items: center; color: var(--ink-2); }
.vrail .play:hover { background: var(--ink); color: var(--ground); }
.vr-track { position: relative; }
.vr-ticks { position: absolute; left: 0; right: 0; top: 2px; height: 5px; pointer-events: none; }
.vr-ticks i { position: absolute; top: 0; width: 1px; height: 5px; background: var(--ink-3); }
.vr-ticks i.principle, .vr-ticks i.editorial, .vr-ticks i.review { background: var(--red); height: 7px; top: -1px; }
.vr-ticks i.current, .vr-ticks i.initialisation { background: var(--ink); }
.vr-label { text-transform: none; letter-spacing: .04em; white-space: nowrap; }
.vr-label .now { color: var(--human); }
/* left-column navigation lists */
.dimlist, .plist, .slist, .vlist { list-style: none; margin: 0; padding: 0; }
.dimlist li, .plist li, .slist li, .vlist li { border-bottom: 1px solid var(--sheet-line); }
.dimlist button, .plist button, .slist button, .vlist button { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; width: 100%; text-align: left; padding: .55rem .7rem; align-items: start; color: var(--sheet-ink); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.dimlist button:hover, .plist button:hover, .slist button:hover, .vlist button:hover { background: var(--sheet-ink); color: var(--sheet); }
.dimlist button:hover .m, .plist button:hover .m, .slist button:hover .m, .vlist button:hover .m { color: var(--ink-2); }
.dimlist button[aria-current="true"], .plist button[aria-current="true"], .slist button[aria-current="true"], .vlist button[aria-current="true"] { box-shadow: inset 2px 0 0 var(--red); background: var(--sheet-2); }
.dimlist .n, .plist .n, .slist .n, .vlist .n { font-family: var(--mono); font-size: var(--fs-0); color: var(--sheet-mute); padding-top: .15em; }
.dimlist b, .plist b, .slist b, .vlist b { font-weight: 600; font-size: var(--fs-2); line-height: 1.25; display: block; }
.dimlist .m, .plist .m, .slist .m, .vlist .m { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--sheet-mute); margin-top: .15rem; }
.plist .m.contested, .plist .m.fractured { color: var(--red); } .plist .m.rewritten { color: var(--sheet-ink); }
.sheet-note { padding: .6rem .7rem .7rem; font-size: var(--fs-1); color: var(--sheet-mute); border-top: 1px solid var(--sheet-line); }
/* profile */
.profile .pf-body { padding: .7rem .8rem .8rem; display: grid; gap: .6rem; }
.pf-print { display: grid; place-items: center; background: var(--ground); border: 1px solid var(--line-2); padding: .5rem; }
.pf-print svg { width: 100%; max-width: 12.5rem; height: auto; }
.pf-tracks { display: grid; gap: 2px; }
.pf-track { display: grid; grid-template-columns: 4.3rem 1fr 4.3rem; gap: .35rem; align-items: center; width: 100%; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--sheet-mute); padding: 0; transition: color var(--t-hover) var(--ease); }
.pf-track .lo { text-align: right; } .pf-track .hi { text-align: left; }
.pf-track:hover { color: var(--sheet-ink); }
.track-svg { width: 100%; height: auto; display: block; }
.track-svg .tl { stroke: var(--sheet-line); stroke-width: 1; } .track-svg .tc { stroke: var(--sheet-mute); stroke-width: 1; }
.track-svg .band { fill: rgba(224, 58, 30, .12); } .track-svg .base { fill: none; stroke: var(--sheet-mute); stroke-width: 1; }
.track-svg .move { stroke: var(--sheet-ink); stroke-width: 1.2; } .track-svg .cur { fill: var(--sheet-ink); }
.track-svg .up { fill: var(--red); } .track-svg .down { fill: var(--sheet-mute); }
.pf-princ { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.pf-p { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; border: 1px solid var(--sheet-line); padding: .2em .35em; color: var(--sheet-mute); display: inline-flex; gap: .3em; align-items: center; }
.pf-p i { width: .45em; height: .45em; border: 1px solid currentColor; display: inline-block; }
.pf-p.contested i { background: var(--red); border-color: var(--red); } .pf-p.fractured { color: var(--red); border-color: var(--red); } .pf-p.fractured i { background: var(--red); border-color: var(--red); }
.pf-p.rewritten { color: var(--sheet); background: var(--sheet-ink); border-color: var(--sheet-ink); } .pf-p.rewritten i { background: var(--red); border-color: var(--red); }
.pf-p:hover { border-color: var(--sheet-ink); color: var(--sheet-ink); }
.pf-princ .k { margin-left: auto; font-size: 9px; }
.pf-foot { display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--sheet-mute); }
/* inspector additions */
.causal { list-style: none; margin: 0; padding: .5rem .6rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; border-bottom: 1px solid var(--sheet-line); background: var(--sheet-2); }
.causal li { min-width: 0; }
.causal li > *, .causal li button { display: grid; gap: .1rem; width: 100%; text-align: left; padding: .35rem .4rem; border: 1px solid var(--sheet-line); background: var(--sheet); color: var(--sheet-ink); min-height: 100%; font-size: 9px; }
.causal li button:hover:not([disabled]), .causal li button:focus-visible { background: var(--sheet-ink); color: var(--sheet); border-color: var(--sheet-ink); }
.causal li button:hover:not([disabled]) span, .causal li button:hover:not([disabled]) i { color: var(--ink-2); }
.causal li button[disabled] { opacity: .5; }
.causal i { font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; color: var(--sheet-mute); }
.causal b { font-weight: 600; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.causal span { font-family: var(--mono); font-size: 8px; color: var(--sheet-mute); line-height: 1.3; overflow-wrap: anywhere; }
.causal li.on > * { border-color: var(--sheet-ink); } .causal li.red > * { border-color: var(--red); } .causal li.red b { color: var(--red); }
.imprint { padding: .7rem .9rem .9rem; border-top: 1px solid var(--sheet-line); display: grid; gap: .5rem; }
.imprint > .k { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); }
.imp-rows { display: grid; gap: .3rem; }
.imp-row { display: grid; grid-template-columns: 4.5rem 1fr 4.5rem 3.4rem; gap: .4rem; align-items: center; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--sheet-mute); position: relative; }
.imp-row span:first-child { text-align: right; }
.imp-row i { position: relative; display: block; height: 6px; background: var(--sheet-2); }
.imp-row i::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--w); background: var(--red); left: auto; right: auto; }
.imp-row i[style*="left:50%"]::after { left: 50%; } .imp-row i[style*="right:50%"]::after { right: 50%; }
.imp-row i::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--sheet-mute); }
.imp-row b { color: var(--sheet-ink); font-weight: 500; text-align: right; text-transform: none; }
.imprint .kv { grid-template-columns: 5.5rem 1fr; font-size: var(--fs-1); }
.lesson { border-left: 2px solid var(--sheet-ink); padding: .5rem .7rem; background: var(--sheet-2); font-size: var(--fs-2); display: grid; gap: .35rem; }
.lesson .k { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); }
.lesson p b { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--sheet-mute); font-weight: 500; }
.lesson p { font-family: var(--serif); font-style: italic; font-size: var(--fs-3); line-height: 1.35; }
/* instruments */
.instrument { border: 1px solid var(--line); background: var(--ground-2); }
.ins-h { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ins-note { padding: .6rem .8rem .8rem; font-size: var(--fs-1); color: var(--ink-3); border-top: 1px solid var(--line); }
/* behavior tracks */
.tracks { display: grid; }
.track { padding: .55rem .8rem .5rem; border-bottom: 1px solid var(--line); display: grid; gap: .3rem; cursor: pointer; transition: background var(--t-hover) var(--ease); }
.track:hover, .track:focus-visible { background: var(--surface); outline: 0; }
.track.on { background: var(--surface); box-shadow: inset 2px 0 0 var(--red); }
.tk-h { display: grid; grid-template-columns: 2rem 1fr 1fr; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tk-h .hi { text-align: right; } .tk-h .n { color: var(--ink-2); }
.track .track-svg .tl { stroke: var(--line-2); } .track .track-svg .tc { stroke: var(--line-3); } .track .track-svg .base { stroke: var(--ink-3); } .track .track-svg .move { stroke: var(--ink); } .track .track-svg .cur { fill: var(--ink); } .track .track-svg .band { fill: rgba(224, 58, 30, .16); } .track .track-svg .down { fill: var(--ink-3); }
.tk-f { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--ink-3); }
.tk-f b { color: var(--ink); font-weight: 500; }
/* principle clauses */
.clauses { display: grid; }
.clause { border-bottom: 1px solid var(--line); }
.clause .cl-h { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 1rem; align-items: baseline; width: 100%; text-align: left; padding: .9rem .9rem; transition: background var(--t-hover) var(--ease); }
.clause .cl-h:hover, .clause .cl-h:focus-visible { background: var(--surface); outline: 0; }
.clause.open .cl-h { background: var(--surface); }
.clause .n { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: var(--fs-6); letter-spacing: -.02em; color: var(--ink-3); line-height: 1; }
.clause.open .n { color: var(--ink); }
.clause .w { display: grid; gap: .15rem; }
.clause .w b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-5); line-height: 1.2; letter-spacing: -.005em; }
.clause .w s { font-family: var(--mono); font-size: var(--fs-1); color: var(--ink-3); text-decoration-color: var(--red); }
.clause.contested .n, .clause.fractured .n { color: var(--red); }
.clause .cl-b { padding: .4rem .9rem 1rem 4.2rem; display: grid; gap: .8rem; background: var(--surface); }
.clause .cl-b .kv { grid-template-columns: 7rem 1fr; max-width: 46rem; }
.review { border: 1px dashed var(--red); padding: .6rem .8rem; display: grid; gap: .2rem; font-size: var(--fs-2); }
.review .k, .history .k, .args .k { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: block; }
.review b { font-family: var(--serif); font-size: var(--fs-4); font-weight: 400; }
.review .m, .history .m, .args .m { font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: .04em; display: block; }
.history { display: grid; gap: .5rem; }
.rev { display: grid; grid-template-columns: 2.4rem 1fr; gap: .5rem; align-items: start; padding: .5rem 0; border-top: 1px solid var(--line); }
.rev .n { font-size: var(--fs-1); font-family: var(--mono); font-stretch: 100%; font-weight: 500; color: var(--ink-2); }
.rev b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-4); display: block; }
.rev s { font-family: var(--mono); font-size: var(--fs-1); color: var(--ink-3); text-decoration-color: var(--red); display: block; }
.rev .rat { font-size: var(--fs-2); color: var(--ink-2); margin-top: .3rem; max-width: 60ch; }
.args { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.args .arg { display: block; width: 100%; text-align: left; font-family: var(--serif); font-style: italic; font-size: var(--fs-3); line-height: 1.3; padding: .45rem 0; border-top: 1px solid var(--line); color: var(--ink); }
.args .arg:hover { color: var(--red); }
.args .arg .m { font-style: normal; margin-top: .2rem; }
.cl-f { display: flex; gap: .5rem; flex-wrap: wrap; }
/* response lab */
.lab { display: grid; gap: .8rem; padding: .8rem; }
.lab-ctl { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.lab-ctl label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.lab-ctl select { width: auto; max-width: 16rem; padding: .35em 1.8em .35em .5em; font-size: var(--fs-0); }
.lab-q { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: baseline; }
.lab-q .n { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; color: var(--ink-3); }
.lab-q h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-6); letter-spacing: -.01em; line-height: 1.15; }
.lab-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.lab-col { background: var(--sheet); color: var(--sheet-ink); padding: .8rem .9rem 1rem; }
.lab-ch { display: flex; justify-content: space-between; gap: .5rem; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sheet-mute); margin-bottom: .5rem; }
.lab-ch b { color: var(--sheet-ink); font-weight: 500; }
.lab-text { font-family: var(--serif); font-size: var(--fs-4); line-height: 1.45; }
.lab-text .seg { transition: background var(--t-hover) var(--ease); }
.lab-text .seg.changed.from { text-decoration: line-through; text-decoration-color: var(--red); color: var(--sheet-mute); }
.lab-text .seg.changed.to { background: rgba(224, 58, 30, .12); box-shadow: 0 1px 0 var(--red); }
.lab-text .seg.pending { color: transparent; background: var(--sheet-2); }
.lab-text .seg.typeset { animation: typeset var(--t-detail) var(--ease-out); }
@keyframes typeset { from { background: var(--red); color: var(--sheet); } to { background: rgba(224, 58, 30, .12); color: inherit; } }
.lab-diff { display: grid; gap: .35rem; font-size: var(--fs-2); }
.lab-diff .k { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lab-diff .dr { display: grid; gap: .1rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.lab-diff s { color: var(--ink-3); text-decoration-color: var(--red); } .lab-diff b { font-weight: 500; }
.lab-diff .m { font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: .04em; }
.lab-meta .kv { grid-template-columns: 8rem 1fr; font-size: var(--fs-1); }
.lab-meta .retr { display: flex; flex-wrap: wrap; gap: .3rem; }
.lab-meta .retr button { border: 1px solid var(--line-2); padding: .25em .45em; font-family: var(--mono); font-size: 9px; color: var(--ink-2); text-align: left; }
.lab-meta .retr button:hover { background: var(--ink); color: var(--ground); }
.lab-meta .retr .m { color: var(--ink-3); }
/* versions */
.vs-ctl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.vs-ctl label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.vs-ctl select { width: auto; max-width: 15rem; padding: .35em 1.8em .35em .5em; font-size: var(--fs-0); }
.vtable td { font-size: var(--fs-1); padding: .45em .6em .45em 0; cursor: pointer; }
.vtable tr.cur td { background: var(--surface-2); } .vtable tr.named td:first-child b { color: var(--human); }
.vtable .m { font-family: var(--mono); font-size: 9px; color: var(--ink-3); } .vtable .red, .cmp .red { color: var(--red); }
.vtable .up, .cmp .up { color: var(--human); } .vtable .down, .cmp .down { color: var(--ink-2); }
.vtable .roots { font-size: 9px; color: var(--ink-3); }
/* evidence sheet */
.evidence .ev-body { padding: .7rem .8rem .9rem; display: grid; gap: .55rem; max-height: 70vh; overflow: auto; }
.evidence h3 { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); font-weight: 500; margin-top: .3rem; }
.evidence h3 em { font-style: normal; color: var(--sheet-ink); }
.evidence .lead-s { font-size: var(--fs-3); line-height: 1.35; }
.evidence .kv { grid-template-columns: 6rem 1fr; font-size: var(--fs-1); }
.evl { list-style: none; margin: 0; padding: 0; display: grid; }
.evl li { border-top: 1px solid var(--sheet-line); }
.evl button { display: grid; gap: .1rem; width: 100%; text-align: left; padding: .45rem .3rem; color: var(--sheet-ink); }
.evl button:hover { background: var(--sheet-ink); color: var(--sheet); } .evl button:hover .m, .evl button:hover .q { color: var(--ink-2); }
.evl b { font-weight: 600; font-size: var(--fs-2); }
.evl .m { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--sheet-mute); }
.evl .q { font-family: var(--serif); font-style: italic; font-size: var(--fs-2); color: var(--sheet-ink-2); }
.evl.plain li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .2rem; font-size: var(--fs-2); }
.ev-seg { border-top: 1px solid var(--sheet-line); padding-top: .4rem; }
.ev-seg .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sheet-mute); }
.ev-seg p { font-family: var(--serif); font-style: italic; font-size: var(--fs-3); margin: .2rem 0; }
.evidence .cap { font-size: var(--fs-1); color: var(--sheet-mute); }
/* how / share */
.how { display: grid; grid-template-columns: 18rem 1fr; gap: 1.5rem; padding: 1.5rem var(--gutter); max-width: 70rem; }
.how svg { width: 100%; height: auto; background: var(--ground); border: 1px solid var(--line-2); }
.how h2 { font-size: var(--fs-5); font-weight: 600; margin-bottom: .6rem; }
.how ol { padding-left: 1.2em; margin: 0 0 1rem; display: grid; gap: .4rem; font-size: var(--fs-2); color: var(--sheet-ink-2); }
.how .table th, .how .table td { border-color: var(--sheet-line); }
.share-card { max-width: 52rem; margin: 2rem auto; background: var(--ground); color: var(--ink); border: 1px solid var(--line-2); padding: 1.5rem; display: grid; gap: 1rem; }
.share-card .sc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.share-card .wm { font-family: var(--display); font-weight: 700; font-stretch: 72%; font-size: var(--fs-6); letter-spacing: -.03em; }
.share-card h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-6); line-height: 1.15; }
.share-card .sc-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.share-card .sc-ab > div { background: var(--sheet); color: var(--sheet-ink); padding: .9rem; }
.share-card .sc-ab p { font-family: var(--serif); font-size: var(--fs-4); line-height: 1.45; margin-top: .4rem; }
.share-card .sc-ab .seg.changed.from { text-decoration: line-through; text-decoration-color: var(--red); color: var(--sheet-mute); }
.share-card .sc-ab .seg.changed.to { background: rgba(224, 58, 30, .12); box-shadow: 0 1px 0 var(--red); }
.share-card .sc-f { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.share-card .sc-f svg { margin-right: .4rem; vertical-align: middle; }
.sheet-modal.share .sm-body { background: var(--ground); color: var(--ink); padding: 0 var(--gutter); }
@media (max-width: 1180px) {
  .mind .col-r { grid-column: 1 / -1; }
  .lab-ab, .args { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .modes { width: 100%; display: flex; } .modes button { flex: 1 1 0; min-width: 0; padding: .6em .2em; font-size: 8px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; }
  .causal { grid-template-columns: 1fr 1fr; }
  .how { grid-template-columns: 1fr; padding: 1rem var(--gutter); }
  .clause .cl-h { grid-template-columns: 2.4rem 1fr; } .clause .cl-h .st { grid-column: 2; } .clause .cl-b { padding-left: .9rem; }
  .share-card .sc-ab { grid-template-columns: 1fr; }
  .vrail { grid-template-columns: auto 1fr; } .vr-label { grid-column: 1 / -1; }
  .imp-row { grid-template-columns: 3.6rem 1fr 3.6rem 3rem; }
}
/* consequence sheet (Accession Desk) */
.consequence { display: grid; gap: 1px; background: var(--sheet-line); border: 1px solid var(--sheet-ink); margin-bottom: 1rem; }
.consequence > div { background: var(--sheet); padding: .6rem .8rem; display: grid; gap: .3rem; }
.consequence .cq-h { display: flex; justify-content: space-between; align-items: center; background: var(--sheet-2); }
.consequence .k { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); }
.consequence b { font-weight: 600; }
.consequence .m { font-size: var(--fs-1); color: var(--sheet-ink-2); }
.consequence .red s { color: var(--sheet-ink-2); text-decoration-color: var(--red); } .consequence .red .k { color: var(--red); }
.consequence .imp-rows { max-width: 32rem; }
/* workspace v4: identity block, mind objects, mind windows */
.ws-id .line { font-size: var(--fs-4); color: var(--ink); max-width: 30ch; line-height: 1.3; letter-spacing: -.005em; }
.ws-cta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.art-print { width: 10.6rem; aspect-ratio: 1; background: var(--ground); border: 1px solid var(--line-2); display: grid; place-items: center; padding: .3rem; }
.art-print svg { width: 100%; height: auto; }
.art-principle { width: 14.75rem; background: var(--sheet); color: var(--sheet-ink); padding: .6rem .75rem .7rem; border-top: 3px solid var(--sheet-ink); display: grid; gap: .3rem; }
.art-principle .sn { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); display: flex; justify-content: space-between; }
.art-principle.contested .st, .art-principle.fractured .st { color: var(--red); }
.art-principle.fractured { border-top-color: var(--red); }
.art-principle .pw { font-family: var(--serif); font-size: var(--fs-4); line-height: 1.2; }
.art-principle .pw s { font-family: var(--mono); font-size: 9px; color: var(--sheet-mute); text-decoration-color: var(--red); display: block; }
.art-principle .ev { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--sheet-mute); }
.art-transcript { width: 15.6rem; background: var(--sheet); color: var(--sheet-ink); padding: .6rem .75rem .7rem; border-top: 3px solid var(--sheet-ink); display: grid; gap: .3rem; }
.art-transcript .sn { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); display: flex; justify-content: space-between; }
.art-transcript .q { font-weight: 600; font-size: var(--fs-2); line-height: 1.2; }
.art-transcript .a, .art-transcript .b { font-family: var(--serif); font-style: italic; font-size: var(--fs-1); line-height: 1.3; display: grid; grid-template-columns: 3.4rem 1fr; gap: .4rem; }
.art-transcript i { font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--sheet-mute); padding-top: .2em; }
.art-transcript .a span { text-decoration: line-through; text-decoration-color: var(--red); color: var(--sheet-mute); }
.art-transcript .b span { box-shadow: 0 1px 0 var(--red); }
.win-mind .mw { padding: .9rem 1rem 1rem; display: grid; gap: .6rem; }
.win-mind .mw.print { grid-template-columns: 15rem 1fr; gap: 1rem; }
.win-mind .mw-print { display: grid; gap: .4rem; justify-items: center; }
.win-mind .mw-print svg { width: 100%; height: auto; background: var(--ground); border: 1px solid var(--line-2); }
.win-mind h2 { font-size: var(--fs-4); font-weight: 600; margin-bottom: .3rem; }
.win-mind ol { padding-left: 1.1em; margin: 0; display: grid; gap: .3rem; font-size: var(--fs-2); color: var(--sheet-ink-2); }
.win-mind .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sheet-mute); }
.win-mind .clause-w { grid-template-columns: 3rem 1fr; }
.win-mind .cw-n { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: var(--fs-6); color: var(--sheet-mute); }
.win-mind .clause-w.fractured .cw-n, .win-mind .clause-w.contested .cw-n { color: var(--red); }
.win-mind .cw-w b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-5); line-height: 1.2; display: block; }
.win-mind .cw-w s { font-family: var(--mono); font-size: var(--fs-1); color: var(--sheet-mute); text-decoration-color: var(--red); display: block; }
.win-mind .arg { font-family: var(--serif); font-style: italic; font-size: var(--fs-3); border-top: 1px solid var(--sheet-line); padding: .4rem 0; }
.win-mind .arg .m { display: block; font-family: var(--mono); font-style: normal; font-size: 9px; color: var(--sheet-mute); margin-top: .15rem; }
.win-mind .tw-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sheet-line); border: 1px solid var(--sheet-line); }
.win-mind .tw-ab > div { background: var(--sheet); padding: .6rem .7rem; }
.win-mind .tw-ab p { font-family: var(--serif); font-size: var(--fs-3); line-height: 1.4; margin-top: .3rem; }
.win-mind .seg.changed.from { text-decoration: line-through; text-decoration-color: var(--red); color: var(--sheet-mute); }
.win-mind .seg.changed.to { background: rgba(224, 58, 30, .12); box-shadow: 0 1px 0 var(--red); }
.stream .sitem .th#stream-print { background: var(--ground); padding: 0; } .stream .sitem .th#stream-print svg { width: 100%; height: 100%; }
@media (max-width: 860px) { .ws-cta { padding: 0 var(--gutter) .5rem; } .win-mind .mw.print, .win-mind .tw-ab { grid-template-columns: 1fr; } }
.section-draw svg.firewall { font-size: 10px; }
.spec-nav li.sep { border-top: 1px solid var(--line-3); margin-top: .4rem; padding-top: .4rem; }
.stage > *, .instrument > * { min-width: 0; }
.instrument .table-wrap { overflow-x: auto; max-width: 100%; } .vtable { min-width: 44rem; }
@media (max-width: 1180px) { .rail-status { display: none; } .rail-tools .rail-item .lbl { display: none; } .rail-tools .rail-item { padding: 0 .7rem; } }
@media (max-width: 860px) {
  /* mobile: a vertical evidence sequence — instrument first, then the version rail, the field, the evidence sheet, and the list last */
  .mind:not([data-mode="memory"]) .col-l { order: 3; }
  .mind:not([data-mode="memory"]) .col-r { order: 2; }
  .mind:not([data-mode="memory"]) .instrument { order: -2; }
  .mind:not([data-mode="memory"]) .vrail { order: -1; }
}

/* ============ v5 · embed mode (application pages hosted in a portal window) ============ */
html.embed .rail, html.embed .skip { display: none !important; }
html.embed body { padding-bottom: 0; min-height: 100vh; }
html.embed .toast { bottom: .8rem; }
/* v6 · honest empty states (System mode without a configured source) */
.empty-state { padding: 2rem 1.2rem; display: grid; gap: .5rem; border: 1px dashed var(--line-strong); border-radius: var(--r-control); color: var(--ink-2); max-width: 40ch; margin: 1rem; }
.empty-state p { margin: 0; font-size: var(--fs-2); }

/* ============ v6 · Index information architecture ============ */
.mode-explain { margin: .4rem 0 0; font-size: var(--fs-2); color: var(--ink-2); max-width: 60ch; }
.fgroup { border-top: 1px solid var(--sheet-line); }
.fgroup summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem 0; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--sheet-mute); min-height: 40px; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::before { content: "▸"; font-size: .6rem; margin-right: .4rem; color: var(--memento-grey); transition: transform var(--t-hover) var(--ease); }
.fgroup[open] summary::before { transform: rotate(90deg); }
.fgroup summary span { flex: 1; } .fgroup summary b { font-weight: 500; color: var(--sheet-ink); text-transform: none; letter-spacing: 0; }
.fgroup > div { padding: 0 0 .7rem; display: grid; gap: .5rem; }
.typelist { display: grid; gap: 1px; }
.typerow { display: grid; grid-template-columns: .9rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .4rem .2rem; text-align: left; font-size: var(--fs-2); color: var(--sheet-ink-2); border-radius: var(--r-chip); min-height: 34px; }
.typerow i { width: .7rem; height: .7rem; border: 1px solid var(--line-strong); border-radius: 2px; display: block; }
.typerow[aria-pressed="true"] { color: var(--sheet-ink); } .typerow[aria-pressed="true"] i { background: var(--ink); border-color: var(--ink); }
.typerow b { font-family: var(--mono); font-weight: 400; font-size: var(--fs-0); color: var(--sheet-mute); }
.typerow:hover { background: var(--sheet-2); }
.active-row { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--sheet-line); font-size: var(--fs-1); color: var(--sheet-ink-2); }
.ar-count { margin-right: .3rem; } .ar-count b { color: var(--sheet-ink); }
.ar-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2em .5em; border: 1px solid var(--line-strong); border-radius: var(--r-chip); font-family: var(--mono); font-size: var(--fs-0); color: var(--sheet-ink-2); min-height: 30px; }
.ar-chip span { text-transform: uppercase; letter-spacing: .06em; color: var(--sheet-mute); } .ar-chip b { font-weight: 500; color: var(--sheet-ink); } .ar-chip i { font-style: normal; color: var(--sheet-mute); }
.ar-chip:hover, .ar-chip:focus-visible { border-color: var(--sheet-ink); } .ar-chip:hover i { color: var(--red); }
.ar-clear { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .06em; text-transform: uppercase; color: var(--red); padding: .2em .4em; min-height: 30px; }
.view-feed { padding: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 20rem; max-height: calc(100vh - 14rem); }
.feed-head, .frow .fr-main { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) 5rem 7.4rem 5.4rem 1.6rem; gap: .6rem; align-items: center; }
.feed-head { padding: .45rem .6rem; border-bottom: 1px solid var(--sheet-line); }
.feed { list-style: none; margin: 0; padding: 0; overflow: auto; }
.frow { border-bottom: 1px solid var(--sheet-line); }
.frow .fr-main { width: 100%; padding: .55rem .6rem; text-align: left; font-size: var(--fs-2); min-height: 44px; }
.frow .fr-main:hover, .frow.sel .fr-main { background: var(--sheet-2); }
.frow.sel .fr-main .t { font-weight: 600; }
.frow .fr-main .mono { font-family: var(--mono); font-size: var(--fs-0); color: var(--sheet-mute); }
.frow .fr-main .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.frow .tg { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--sheet-mute); border: 1px dotted var(--line-strong); border-radius: var(--r-chip); padding: .1em .4em; justify-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.frow .tg.red { color: var(--red); border-color: var(--red); }
.frow .plus { font-family: var(--mono); color: var(--sheet-mute); text-align: center; }
.fr-body { padding: .2rem 1rem 1rem 6.6rem; display: grid; gap: .5rem; }
.fr-body .excerpt { font-size: var(--fs-3); margin: 0; max-width: 60ch; }
.fr-meta { margin: 0; }
.fr-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.fr-tech { grid-template-columns: 7rem minmax(0, 1fr); font-size: var(--fs-1); max-width: 60ch; }
.feed-foot { padding: .45rem .6rem; border-top: 1px solid var(--sheet-line); }
@media (max-width: 860px) {
  .feed-head { display: none; }
  .frow .fr-main { grid-template-columns: minmax(0, 1fr) 1.6rem; grid-template-areas: "acc plus" "title plus" "meta plus"; row-gap: .15rem; }
  .frow .fr-main > .mono:first-child { grid-area: acc; } .frow .fr-main .t { grid-area: title; white-space: normal; } .frow .fr-main .tg { grid-area: meta; } .frow .fr-main .tg + .tg { display: none; } .frow .fr-main .mono:nth-last-child(2) { display: none; } .frow .plus { grid-area: plus; }
  .fr-body { padding-left: .6rem; }
}
.ctrl details.fgroup summary::after { content: none; }
.ctrl details.fgroup summary { display: flex; }
#topic-chips .chip { padding: .25em .5em; font-size: 10px; }
#topic-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
#topic-chips .chip { justify-content: space-between; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v6 · accession phase strip */
.phase-strip { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.phase-strip li { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-top: 2px solid var(--line); padding-top: .35rem; display: grid; gap: .1rem; }
.phase-strip li i { font-style: normal; color: var(--memento-grey); }
.phase-strip li.on { color: var(--ink); border-top-color: var(--ink); }
/* v6 · geometry: 12–18 px panels, 8–12 px controls, quiet borders */
.panel, .sheet, .desk-sheet, .sh-sheet, .inspector, .evidence, .instrument, .stage .view, .hashbox, .codeblock, .diagram, .loose, .realbox, .sim-sep, .consequence, .banner { border-radius: 14px; }
.btn, .chip, .seg button, input[type="text"], input[type="search"], input[type="url"], input[type="date"], input[type="number"], textarea, select, .type, .tools button { border-radius: var(--r-control); }
.tag { border-radius: var(--r-chip); }
.win, .sheet-modal { border-radius: 16px; }
.phase-strip { grid-template-columns: 1fr; gap: .15rem; margin-bottom: 1.2rem; }
.phase-strip li { display: flex; gap: .5rem; align-items: baseline; border-top: 0; border-left: 2px solid var(--line); padding: .15rem 0 .15rem .5rem; }
.type[aria-pressed="true"] { background: var(--paper-soft); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.type[aria-pressed="true"] b, .type[aria-pressed="true"] small, .type[aria-pressed="true"] .ic { color: var(--ink); }
.type[aria-pressed="true"] small { color: var(--ink-readable); }
.type:hover { background: var(--paper-soft); color: var(--ink); } .type:hover .ic, .type:hover small { color: var(--ink-readable); }
.equation { font-family: var(--mono); font-size: var(--fs-2); line-height: 1.7; border: 1px solid var(--sheet-line); border-radius: 12px; padding: .8rem 1rem; background: #fff; overflow-wrap: anywhere; display: grid; gap: .2rem; }
.equation b { font-weight: 500; color: var(--ink); } .equation .k { display: block; margin-bottom: .2rem; }
.equation .prop { color: var(--ink-3); } .equation .prop b { color: var(--ink-3); }
/* v6 · the Instrument (experimental) */
.tag.exp { color: var(--memento-grey); border-style: dashed; font-size: 9px; padding: 0 .35em; margin-left: .3em; }
.view-instrument { padding: .6rem .8rem .8rem; display: grid; gap: .6rem; }
.inst-disclosure { margin: 0; }
.inst { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.inst-rail { display: grid; gap: 2px; }
.inst-p { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .4rem; align-items: center; padding: .45rem .5rem; text-align: left; border: 1px solid transparent; border-radius: var(--r-control); font-size: var(--fs-2); position: relative; min-height: 40px; }
.inst-p kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 .3em; color: var(--ink-3); text-align: center; }
.inst-p b { font-family: var(--mono); font-weight: 400; font-size: var(--fs-0); color: var(--ink-2); white-space: nowrap; }
.inst-p i { grid-column: 1 / -1; display: block; height: 2px; background: linear-gradient(to right, var(--ink) calc(var(--v, 0) * 100%), var(--line) 0); border-radius: 1px; }
.inst-p[aria-selected="true"] { border-color: var(--ink); background: var(--paper-soft); }
.inst-p:hover { background: var(--paper-soft); }
.inst-reset { margin-top: .4rem; justify-self: start; }
.inst-help { margin: .4rem 0 0; }
.inst-fig { display: grid; gap: .5rem; min-width: 0; }
#inst-canvas { width: 100%; display: block; border: 1px solid var(--sheet-line); border-radius: 10px; background: #fff; }
.inst-summary { margin: 0; max-width: none; line-height: 1.6; }
@media (max-width: 860px) { .inst { grid-template-columns: 1fr; } }
picture { display: contents; }

/* ======================= v7 · Index toolbar, filters drawer, result cards, Mind summary ======================= */
.page-head { align-items: center; }
.page-head .head-main { display: grid; gap: .2rem; }
.page-head h1 { font-size: var(--fs-5); }
.mode-explain { margin: 0; font-size: var(--fs-2); color: var(--ink-readable); }
.toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .8rem 0 .5rem; }
.toolbar .tb-search { flex: 1 1 16rem; min-width: 0; }
.toolbar .tb-search input { width: 100%; }
.toolbar .tb-filters { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-control, 10px); font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-strong); background: var(--paper); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.toolbar .tb-filters:hover, .toolbar .tb-filters[aria-expanded="true"] { background: var(--ink-strong); color: var(--paper); }
.toolbar .tb-filters b { display: none; min-width: 1.4em; height: 1.4em; border-radius: 999px; background: var(--warning); color: #fff; font-size: 9px; line-height: 1.4em; text-align: center; font-weight: 600; letter-spacing: 0; }
.toolbar .tb-filters.on b { display: inline-block; }
.toolbar .tb-filters::after { content: "▾"; font-size: 9px; }
.toolbar .tb-views { margin-left: auto; }
.toolbar .tb-status { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.toolbar .tb-status b { color: var(--ink-strong); font-weight: 500; }
.active-row:empty { display: none; }
.active-row { padding: 0 0 .6rem; }
.filters { position: relative; z-index: 30; }
.filters .ctrl-panel { position: absolute; top: 0; left: 0; width: min(26rem, 100%); max-height: min(70vh, 34rem); overflow: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .12); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 14px; }
.filters .ctrl-panel .ph .btn { padding: .3em .7em; font-size: 9px; }
.filters .pb { padding: .8rem .9rem 1rem; }
.filters .ctrl details:first-of-type { border-top: 0; padding-top: 0; }
#theme.vh { position: absolute; }
.mind[data-mode="memory"] { grid-template-columns: minmax(0, 1fr) 22rem; }
.mind[data-mode="memory"] .col-l { display: none; }
@media (min-width: 1001px) { .mind[data-mode="memory"] .col-r { grid-column: 2; grid-row: 1; } .mind[data-mode="memory"] .col-c { grid-column: 1; grid-row: 1; } }
.rlist { --row: 6.1rem; }
.rlist li { height: var(--row); }
.rlist button { padding: .6rem .8rem; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .7rem; }
.rlist .thumb { width: 2.6rem; height: 2.6rem; border-radius: 6px; }
.rlist .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.rlist .s { display: block; font-size: var(--fs-1); color: var(--ink-readable); line-height: 1.3; margin-top: .15rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.rlist .m { margin-top: .2rem; }
.rlist .e { display: inline-block; margin-top: .3rem; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--warning); }
.rlist .e.none { color: var(--ink-3); }
.rlist button:hover .s, .rlist button:hover .e { color: var(--ground); }
.pipe-wrap { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .8rem; }
.pipe-wrap summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.pipe-wrap summary::-webkit-details-marker { display: none; }
.pipe-wrap summary::after { content: "+"; } .pipe-wrap[open] summary::after { content: "–"; }
.pipe-wrap .pipe { margin-top: .6rem; border-radius: 8px; }
.tech { border-top: 1px solid var(--sheet-line); margin-top: .5rem; padding-top: .5rem; }
.tech > summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); display: flex; justify-content: space-between; padding: .3rem 0; }
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary::after { content: "+"; } .tech[open] > summary::after { content: "–"; }
.tech .kv { margin: .5rem 0; }
.lab .tech { border-top-color: var(--line); } .lab .tech > summary { color: var(--ink-3); }
.mind-summary .sum { display: grid; gap: 0; margin: 0; }
.mind-summary .sum > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--sheet-line); }
.mind-summary .sum > div:first-child { border-top: 0; padding-top: 0; }
.mind-summary .sum dt { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--sheet-mute); padding-top: .15rem; }
.mind-summary .sum dd { margin: 0; display: grid; gap: .2rem; font-size: var(--fs-2); line-height: 1.4; min-width: 0; }
.mind-summary .sum dd b { font-weight: 600; }
.mind-summary .sum dd .m { font-size: var(--fs-1); color: var(--sheet-mute); }
.mind-summary .sum dd .track-svg { max-width: 220px; }
.mind-summary .sum dd em { font-style: normal; color: var(--warning); }
.mind-summary .why-mem { text-align: left; display: grid; gap: .15rem; padding: .3rem .4rem; margin: 0 -.4rem; border-radius: 8px; color: inherit; }
.mind-summary .why-mem:hover { background: var(--sheet-2); }
.mind-summary .why-mem .q { font-size: var(--fs-1); font-style: italic; color: var(--sheet-ink-2); }
.mind-summary .btn.sm { justify-self: start; padding: .35em .7em; font-size: 9px; margin-top: .2rem; }
@container (max-width: 380px) { .mind-summary .sum > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }
.tk-f { flex-wrap: wrap; }
@media (max-width: 1000px) { .mind[data-mode="memory"] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .toolbar { padding-top: .6rem; }
  .toolbar .tb-views { margin-left: 0; width: 100%; overflow-x: auto; }
  .toolbar .tb-status { width: 100%; justify-content: space-between; }
  .filters .ctrl-panel { position: fixed; inset: auto 0 0 0; width: 100%; max-height: 82vh; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18); padding-bottom: env(safe-area-inset-bottom); }
  body.filters-open { overflow: hidden; }
}

/* v7 · Capacity lead number, Protocol "start here" */
.tok-head .cap-number { display: flex; align-items: baseline; gap: .6rem; }
.tok-head .cap-number b { font-family: var(--display); font-stretch: 78%; font-weight: 600; font-size: clamp(3rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.02em; color: var(--ink-strong); }
.tok-head .cap-number span { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tok-head p b { font-weight: 600; color: var(--ink-strong); }
.cap-tech { border-top: 0; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .9rem; } .cap-tech > summary { color: var(--ink-3); }
.brief { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem 1rem; background: var(--paper-soft); }
.brief ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.brief li { font-size: var(--fs-3); line-height: 1.45; color: var(--ink-readable); }
.brief li b { display: block; color: var(--ink-strong); font-weight: 600; }
.brief a { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; }
.tok-head { align-items: start; }
@media (max-width: 860px) { .mind:not([data-mode="memory"]) .col-r { order: 0; } .mind:not([data-mode="memory"]) .col-c { order: 1; } .mind:not([data-mode="memory"]) .col-l { order: 2; } }