/* ============================================================
   register.css  v1.0
   A stylesheet for pages that show their work.

   One file. No build step. No runtime dependency.

   Grammar
     class      names the component        .register .row .panel .band .rule
     data-surface   paper it sits on       tint wash deep s1–s4 ok open stop info
     data-series    which data series      1 2 3 4
     data-state     what state it is in    done active waiting blocked parked
                                           optional live reserved superseded
     data-style     a component's variant  (documented per component)
     data-size      sm | lg
     data-kind      what a register lists  claims relations log edges refs
                                           cmds lexicon theorems notes forecasts
     data-theme     site theme (on <html>) neutral forest parchment slate signal
     data-display   display face (on <html>) mono | serif

   Rules
     1  identify     every object shows its id in the register column
     2  rule, don't box   hairlines and alignment; fills are surfaces that
                          invert the tokens; one deep surface per screen
     3  mono says what, sans says why   ids, numbers, labels in lowercase mono
     4  color is data   one accent, three states, four series; never decor
     5  flatten     every component has a plain-text twin; accents are
                    drawn from the material and rationed
   ============================================================ */

/* ---------- 0. Tokens ---------- */
:root {
  color-scheme: light;
  --paper: #fafaf7; --paper-2: #f3f3ee; --paper-3: #ebebe4;
  --ink: #171717; --ink-2: #3d3d38; --muted: #696961; --faint: #97978e;
  --rule: #dcdcd4; --rule-2: #bdbdb4;
  --deep: #2b2b28;
  --accent: #0550ae; --accent-wash: #eaf2ff;
  --ok: #18794e; --ok-wash: #e9f7ef;
  --open: #a96512; --open-wash: #f7ecd6;
  --stop: #9a2d25; --stop-wash: #f9e7e5;
  --s1: #2a78d6; --s2: #087d26; --s3: #a76900; --s4: #b4476f;
  --s1-deep: #1c56a0; --s2-deep: #055c1c; --s3-deep: #7a4c00; --s4-deep: #8a3457;
  --s1-wash: #e3eefb; --s2-wash: #e2f2e5; --s3-wash: #f6ecd7; --s4-wash: #f7e4ec;

  /* deep surface: what sits on --deep. Dark skins set these to dark-on-light. */
  --deep-ink: #fafaf7; --deep-ink-2: #e4e4dc; --deep-muted: #b3b3a9; --deep-faint: #85857c;
  --deep-accent: #8fbcff; --deep-ok: #7fd3a6; --deep-open: #e8b04a; --deep-stop: #ff9a8f;
  --deep-s1: #7fb2f0; --deep-s2: #6fd08a; --deep-s3: #e8b04a; --deep-s4: #e58bb0;
  --on-series: #ffffff; --selection: #cfe3ff;

  /* faces: display for headings, label for metadata, mono for ids/numbers/code */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
  --display: var(--sans); --display-weight: 600; --display-tracking: -.02em; --display-leading: 1.12;
  --label: var(--mono); --label-case: none; --label-tracking: 0;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15.5px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --fs-display: clamp(30px, 4vw, 44px);

  /* shape, density, motion */
  --radius: 0px; --line: 1px; --line-2: 2px; --line-3: 3px; --shadow: none;
  --space: 1; --motion: 1;
  --shell: 1080px; --measure: 68ch; --register: 112px;
  --sp-1: calc(4px * var(--space)); --sp-2: calc(8px * var(--space)); --sp-3: calc(12px * var(--space)); --sp-4: calc(16px * var(--space)); --sp-5: calc(24px * var(--space)); --sp-6: calc(36px * var(--space)); --sp-7: calc(56px * var(--space));
}

/* ---------- 1. Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font: var(--fs-base)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; transition: color calc(120ms * var(--motion)) ease; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a[href^="http"]:not([data-internal])::after { content: " ↗"; font-family: var(--mono); font-size: .85em; color: var(--faint); }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: var(--line) solid var(--rule); margin: var(--sp-5) 0; }
p, ul, ol, dl, blockquote, pre, table, figure { margin: 0 0 var(--sp-4); }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--sp-1); }
.measure, .prose > p, .prose > ul, .prose > ol { max-width: var(--measure); }
.prose > * + h2 { margin-top: var(--sp-6); }
.prose > * + h3 { margin-top: var(--sp-5); }
h1, h2, h3, h4 { margin: 0 0 .4em; font-family: var(--display); font-weight: var(--display-weight); line-height: var(--display-leading); letter-spacing: var(--display-tracking); text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: calc(var(--display-leading) - .07); letter-spacing: calc(var(--display-tracking) - .01em); max-width: 22ch; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); letter-spacing: -.01em; }
h1[data-size="lg"] { font-size: clamp(40px, 6vw, 72px); letter-spacing: -.04em; max-width: 16ch; }
[data-display="mono"] h1 { font-family: var(--mono); letter-spacing: -.03em; font-size: clamp(26px, 3.4vw, 38px); }
[data-display="serif"] h1, [data-display="serif"] .statement p { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; }
[data-display="serif"] h1 { font-size: clamp(32px, 4.4vw, 48px); }
code, kbd, samp, .mono { font-family: var(--mono); font-size: .92em; }
code { background: var(--paper-2); padding: .1em .35em; border: var(--line) solid var(--rule); border-radius: var(--radius); }
pre { padding: var(--sp-3) var(--sp-4); background: var(--paper-2); border: var(--line) solid var(--rule); overflow-x: auto; font: var(--fs-sm)/1.5 var(--mono); border-radius: var(--radius); }
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.c-s1 { color: var(--s1-deep); } .c-s2 { color: var(--s2-deep); } .c-s3 { color: var(--s3-deep); } .c-s4 { color: var(--s4-deep); }
.c-ok { color: var(--ok); } .c-open { color: var(--open); } .c-stop { color: var(--stop); } .c-accent { color: var(--accent); }
mark.hl { background: var(--open-wash); color: inherit; padding: 0 .15em; box-decoration-break: clone; }
mark.hl[data-state="active"] { background: var(--accent-wash); } mark.hl[data-state="done"] { background: var(--ok-wash); }
mark.hl[data-series="1"] { background: var(--s1-wash); } mark.hl[data-series="2"] { background: var(--s2-wash); }
mark.hl[data-series="3"] { background: var(--s3-wash); } mark.hl[data-series="4"] { background: var(--s4-wash); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-160%); padding: 6px 9px; border: 1px solid var(--ink); background: var(--paper); font: var(--fs-xs)/1.4 var(--mono); color: var(--ink); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* label case and tracking are skin parameters; the default is lowercase, none */
.eyebrow, .section-line h2, table.data th, .register-head, .meta, .chip, .kind-chip, .status, .note .label, .aside h3, .tab, .legend, .demo-label, .twins b, .breadcrumb, .family, .nav-utility, .field > span, .chart-head, .statement .role { text-transform: var(--label-case); letter-spacing: var(--label-tracking); }

/* ---------- 2. Chrome ---------- */
.shell { width: min(var(--shell), calc(100vw - 32px)); margin-inline: auto; }
.family { display: flex; justify-content: space-between; gap: var(--sp-4); min-height: 26px; align-items: center; border-bottom: var(--line) solid var(--rule); font: var(--fs-xs)/1 var(--label); color: var(--faint); }
.family ul { display: flex; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.family a { color: var(--faint); } .family a::after { content: none; }
.family a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.family a:hover { color: var(--accent); }
.topbar { display: flex; align-items: center; gap: var(--sp-5); min-height: 52px; border-bottom: var(--line) solid var(--rule-2); }
.brand { display: inline-flex; align-items: baseline; gap: var(--sp-2); margin-right: auto; color: var(--ink); font: 700 var(--fs-md)/1 var(--mono); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; color: var(--accent); }
.brand small { font: var(--fs-xs)/1 var(--label); color: var(--faint); font-weight: 400; }
.nav { display: flex; gap: var(--sp-4); }
.nav a { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { text-decoration: none; color: var(--accent); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.nav-utility { display: flex; gap: var(--sp-3); padding-left: var(--sp-4); border-left: var(--line) solid var(--rule); font: var(--fs-xs)/1 var(--label); }
.nav-utility a { color: var(--muted); } .nav-utility a::after { content: none; }
.breadcrumb { margin: var(--sp-3) 0 0; font: var(--fs-xs)/1.4 var(--label); color: var(--faint); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--rule-2); }
.breadcrumb a { color: var(--muted); }
.twins { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: var(--sp-3) 0; font: var(--fs-xs)/1.5 var(--label); color: var(--faint); }
.twins b { color: var(--muted); font-weight: 500; }
.twins a { color: var(--muted); } .twins a::after { content: none; }
.twins a + a::before { content: "·"; margin-right: 10px; color: var(--rule-2); }
.pager { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: var(--line) solid var(--rule-2); font: var(--fs-xs)/1.4 var(--label); }
.pager a { color: var(--muted); } .pager a::after { content: none; }
footer.site-footer { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-7); padding: var(--sp-4) 0 var(--sp-6); border-top: var(--line) solid var(--rule-2); font: var(--fs-xs)/1.5 var(--label); color: var(--faint); }
footer.site-footer a { color: var(--muted); }

/* ---------- 3. Page header, section line, statement ---------- */
.page-header { padding: var(--sp-6) 0 var(--sp-5); border-bottom: var(--line) solid var(--rule); }
.eyebrow { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); margin: 0 0 var(--sp-3); font: 500 var(--fs-xs)/1.4 var(--label); color: var(--muted); }
.eyebrow b { color: var(--ink); font-weight: 600; }
.eyebrow .id { color: var(--accent); }
.dek { max-width: 60ch; margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.45; }
.meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); font: var(--fs-xs)/1.4 var(--label); color: var(--faint); }
.meta b { color: var(--ink-2); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); align-items: center; }
.section { padding: var(--sp-5) 0; border-top: var(--line) solid var(--rule-2); }
.section:first-of-type { border-top: 0; }
.section-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); font: var(--fs-xs)/1.3 var(--label); }
.section-line h2 { margin: 0; font: 700 var(--fs-sm)/1.3 var(--label); letter-spacing: 0; }
.section-line h2 span { color: var(--faint); font-weight: 400; }
.section-line h2 .plate + span { color: var(--ink); }
.section-line > span, .section-line > a { color: var(--faint); }
.section-line[data-style="big"] h2 { font: 600 var(--fs-2xl)/1.1 var(--sans); letter-spacing: -.02em; }
.section-line[data-style="underline"] { border-bottom: var(--line-2) solid var(--ink); padding-bottom: 6px; }
.section-line[data-style="underline"][data-series="1"] { border-bottom-color: var(--s1); } .section-line[data-style="underline"][data-series="2"] { border-bottom-color: var(--s2); }
.section-line[data-style="underline"][data-series="3"] { border-bottom-color: var(--s3); } .section-line[data-style="underline"][data-series="4"] { border-bottom-color: var(--s4); }
.section-line[data-style="rule"] { border-top: var(--line-3) solid var(--ink); padding-top: 8px; }
.section-line[data-style="slash"] h2::before { content: "// "; color: var(--faint); }
.section-line[data-surface] { padding: 6px 10px; }
.section-line[data-surface="deep"] h2, .section-line[data-surface="deep"] > span { color: var(--ink); }
.statement { display: grid; grid-template-columns: var(--register) minmax(0, 1fr); gap: var(--sp-4); margin: var(--sp-5) 0; padding: var(--sp-4) 0; border-top: var(--line) solid var(--rule-2); border-bottom: var(--line) solid var(--rule); }
.statement .role { padding-top: 5px; font: var(--fs-xs)/1.5 var(--label); color: var(--faint); }
.statement p { max-width: 36ch; margin: 0; font: 500 var(--fs-xl)/1.3 var(--sans); letter-spacing: -.015em; }
.statement small { display: block; margin-top: var(--sp-2); font: var(--fs-xs)/1.4 var(--label); color: var(--faint); letter-spacing: 0; }
.statement[data-style="serif"] p { font-family: var(--serif); font-size: 24px; }

/* ---------- 4. Register (the grid everything sits on) ---------- */
.register { border-top: var(--line) solid var(--rule); }
.register-head, .row { display: grid; grid-template-columns: var(--register) minmax(0, 1fr); grid-auto-columns: minmax(140px, 220px); gap: var(--sp-4); }
.register-head { padding: 6px 0 5px; border-bottom: var(--line) solid var(--rule); font: var(--fs-xs)/1.3 var(--label); color: var(--faint); }
.row { align-items: start; padding: 10px 0; border-bottom: var(--line) solid var(--rule); transition: background calc(120ms * var(--motion)) ease; }
.row:hover { background: var(--paper-2); box-shadow: 8px 0 0 var(--paper-2), -8px 0 0 var(--paper-2); }
.row > .id { padding-top: 2px; color: var(--faint); font: var(--fs-xs)/1.5 var(--mono); white-space: nowrap; }
.row > .id a { color: inherit; }
.row > .id b { color: var(--ink); font-weight: 600; }
.row > .id small { display: block; font-weight: 400; white-space: normal; overflow-wrap: anywhere; }
.row h3 { margin: 0; font: 600 var(--fs-base)/1.4 var(--sans); letter-spacing: -.005em; }
.row h3 a { color: var(--ink); } .row h3 a:hover { color: var(--accent); }
.row h3 span { color: var(--faint); font-weight: 400; }
.row p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); max-width: 72ch; }
.row > .end, .register-head > .end { grid-column: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 3px 10px; padding-top: 2px; font: var(--fs-xs)/1.5 var(--label); color: var(--faint); }
.row > .end[data-style="stack"] { display: grid; justify-items: end; gap: 4px; }
.row > .end a { color: var(--faint); } .row > .end a::after { content: none; } .row > .end a:hover { color: var(--accent); }
.row[data-size="lg"] h3 { font-size: var(--fs-md); }
.register[data-size="wide"] { --register: 200px; }
.register[data-size="wide"] .row > .id { white-space: normal; overflow-wrap: anywhere; }
.register[data-style="tabs"] .row > .id { display: inline-block; width: max-content; padding: 1px 6px; background: var(--ink); color: var(--paper); font-weight: 600; margin-top: 1px; }
.register[data-style="rail"] .row > .id { background: var(--paper-2); margin: -10px 0; padding: 12px 8px; align-self: stretch; }
.register[data-style="rail"][data-series="1"] .row > .id { background: var(--s1-wash); color: var(--s1-deep); }
.register[data-style="rail"][data-series="2"] .row > .id { background: var(--s2-wash); color: var(--s2-deep); }
.register[data-style="rail"][data-series="3"] .row > .id { background: var(--s3-wash); color: var(--s3-deep); }
.register[data-style="rail"][data-series="4"] .row > .id { background: var(--s4-wash); color: var(--s4-deep); }
.register[data-style="rules"] .row { border-bottom: 2px solid var(--rule-2); }
.row[data-surface] { padding-inline: var(--sp-3); }
.row[data-surface]:hover { box-shadow: none; }
.row[data-surface="deep"] { border-bottom: 0; padding-block: 14px; }
/* kinds: what a register lists. Each tunes fonts, nothing else. */
.register[data-kind="claims"] .row > .id { font-weight: 600; color: var(--ink); }
.register[data-kind="claims"] .row > .id small { color: var(--faint); }
.register[data-kind="claims"] .scope { margin: 4px 0 0; font: var(--fs-xs)/1.5 var(--label); color: var(--muted); max-width: 72ch; }
.register[data-kind="claims"] .scope::before { content: "scope "; color: var(--faint); }
.register[data-kind="claims"] .row p:not(.scope) { color: var(--ink-2); font-size: var(--fs-base); }
.register[data-kind="relations"] .row { grid-template-columns: var(--register) 22px minmax(0,1fr); gap: var(--sp-3); }
.register[data-kind="relations"] .row p { color: var(--ink); font-size: var(--fs-base); }
.register[data-kind="log"] { border-top-color: var(--rule-2); }
.register[data-kind="log"] .row { grid-template-columns: var(--register) 140px minmax(0,1fr) auto; grid-auto-columns: auto; gap: var(--sp-3); padding: 6px 0; align-items: baseline; font: var(--fs-xs)/1.5 var(--label); }
.register[data-kind="log"] .row > .id { padding: 0; }
.register[data-kind="log"] .kind { color: var(--ink); font-weight: 600; }
.register[data-kind="log"] .what { color: var(--muted); overflow-wrap: anywhere; }
.register[data-kind="log"] .src { color: var(--faint); white-space: nowrap; }
.register[data-kind="log"] .row[data-state="waiting"] .kind { color: var(--open); }
.register[data-kind="log"] .row[data-state="blocked"] .kind { color: var(--stop); }
.register[data-kind="log"][data-style="timeline"] .row { grid-template-columns: var(--register) 14px 140px minmax(0,1fr) auto; }
.register[data-kind="log"][data-style="timeline"] .dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); position: relative; }
.register[data-kind="log"][data-style="timeline"] .dot::before { content: ""; position: absolute; left: 2.5px; top: 9px; width: 1px; height: 26px; background: var(--rule-2); }
.register[data-kind="log"][data-style="timeline"] .row:last-child .dot::before { content: none; }
.register[data-kind="log"][data-style="timeline"] .row[data-state="done"] .dot { background: var(--ink); }
.register[data-kind="log"][data-style="timeline"] .row[data-state="waiting"] .dot { background: var(--open); border-color: var(--open); }
.register[data-kind="log"][data-style="timeline"] .row[data-state="blocked"] .dot { background: var(--stop); border-color: var(--stop); }
.register[data-kind="edges"] .row { grid-template-columns: var(--register) minmax(0,1fr) auto; grid-auto-columns: auto; padding: 6px 0; font: var(--fs-xs)/1.5 var(--label); }
.register[data-kind="edges"] .row > .id { padding: 0; white-space: normal; overflow-wrap: anywhere; color: var(--muted); }
.register[data-kind="edges"] .to { color: var(--muted); }
.register[data-kind="edges"] .to::before { content: "→ "; color: var(--faint); }
.register[data-kind="edges"] .row[data-style="soft"] .to::before { content: "⇢ "; color: var(--rule-2); }
.register[data-kind="refs"] { counter-reset: ref; }
.register[data-kind="refs"] .row { padding: 8px 0; font-size: var(--fs-sm); }
.register[data-kind="refs"] .row > .id::before { counter-increment: ref; content: "[" counter(ref) "]"; }
.register[data-kind="refs"] .row > .id[data-ref]::before { content: "[" attr(data-ref) "]"; }
.register[data-kind="refs"] .who { color: var(--ink); } .register[data-kind="refs"] .venue { color: var(--muted); }
.register[data-kind="refs"] .ids { display: block; margin-top: 2px; font: var(--fs-xs)/1.5 var(--label); color: var(--faint); }
.register[data-kind="cmds"] { counter-reset: cmd; border-top-color: var(--rule-2); }
.register[data-kind="cmds"] .row { padding: 6px 0; font: var(--fs-sm)/1.5 var(--mono); }
.register[data-kind="cmds"] .row > .id::before { counter-increment: cmd; content: counter(cmd, decimal-leading-zero); }
.register[data-kind="cmds"] code { background: transparent; border: 0; padding: 0; font-size: inherit; overflow-wrap: anywhere; }
.register[data-kind="cmds"] .why { display: block; font: var(--fs-xs)/1.4 var(--sans); color: var(--muted); }
.register[data-kind="lexicon"] { border-top-color: var(--rule-2); }
.register[data-kind="lexicon"] .row { padding: 8px 0; }
.register[data-kind="lexicon"] .row > .id { font: 600 var(--fs-sm)/1.5 var(--sans); color: var(--ink); white-space: normal; padding: 0; }
.register[data-kind="lexicon"] .row p { margin: 0; color: var(--muted); }
.register[data-kind="theorems"] .row { padding: var(--sp-3) 0; }
.register[data-kind="theorems"] .row > .id { font-weight: 600; color: var(--ink); white-space: normal; }
.register[data-kind="theorems"] .row > .id small { color: var(--faint); }
.register[data-kind="theorems"] .row p { margin: 0; color: var(--ink); font-size: var(--fs-base); max-width: 68ch; }
.register[data-kind="theorems"] .row p + p { margin-top: var(--sp-2); }
.register[data-kind="theorems"] .row[data-style="theorem"] { border-top: var(--line-2) solid var(--ink); }
.register[data-kind="theorems"] .row[data-style="definition"] > .id, .register[data-kind="theorems"] .row[data-style="remark"] > .id, .register[data-kind="theorems"] .row[data-style="proof"] > .id { color: var(--muted); font-weight: 400; }
.register[data-kind="theorems"] .row[data-style="proof"] p:last-child::after { content: " ∎"; color: var(--faint); }
.register[data-kind="theorems"] .row[data-style="conjecture"] { border-top: 1px dashed var(--rule-2); }
.register[data-kind="theorems"] .row[data-style="formula"] { grid-template-columns: var(--register) minmax(0,1fr) auto; grid-auto-columns: auto; align-items: center; padding: 8px 0; border-bottom: 0; }
.register[data-kind="theorems"] .row[data-style="formula"] .eq { font: var(--fs-md)/1.5 var(--mono); overflow-x: auto; }
.register[data-kind="theorems"] .row[data-style="formula"] .eq[data-surface="tint"] { padding: 8px 12px; border: var(--line) solid var(--rule); background: var(--paper-2); }
.register[data-kind="theorems"] .row[data-style="formula"] .label { font: var(--fs-xs)/1.5 var(--label); color: var(--faint); }
.register[data-kind="notes"] { border-top: 0; }
.register[data-kind="notes"] .row { border-bottom: 0; padding: 0 0 var(--sp-4); }
.register[data-kind="notes"] .row:hover { background: none; box-shadow: none; }
.register[data-kind="notes"] .row > .id { white-space: normal; color: var(--muted); }
.register[data-kind="notes"] .row p { margin: 0; color: var(--ink); font-size: var(--fs-base); }
.register[data-kind="rules"] { counter-reset: rule; }
.register[data-kind="rules"] .row > .id::before { counter-increment: rule; content: "r." counter(rule, decimal-leading-zero); }
.register[data-kind="rules"] .row b { display: block; font-weight: 600; }
.register[data-kind="rules"] .row span { color: var(--muted); font-size: var(--fs-sm); }
.register[data-kind="type"] .row { align-items: baseline; }
.register[data-kind="type"] .row > .id { white-space: normal; }
.register[data-kind="forecasts"] .row > .id { white-space: normal; overflow-wrap: anywhere; }

/* ---------- 5. Surfaces ---------- */
/* Any band, panel, row, section-line, page-header, plate, tab, or chart body
   takes data-surface. Deep and series surfaces invert the tokens, so every
   component keeps working inside them. */
[data-surface="tint"] { background: var(--paper-2); }
[data-surface="wash"] { background: var(--paper-3); }
[data-surface="ok"] { background: var(--ok-wash); } [data-surface="open"] { background: var(--open-wash); }
[data-surface="stop"] { background: var(--stop-wash); } [data-surface="info"] { background: var(--accent-wash); }
[data-surface="s1w"] { background: var(--s1-wash); } [data-surface="s2w"] { background: var(--s2-wash); }
[data-surface="s3w"] { background: var(--s3-wash); } [data-surface="s4w"] { background: var(--s4-wash); }
[data-surface="deep"], [data-surface="s1"], [data-surface="s2"], [data-surface="s3"], [data-surface="s4"] { background: var(--paper); color: var(--ink); }
[data-surface="deep"] {
  --paper: var(--deep); --paper-2: color-mix(in srgb, var(--deep) 86%, var(--deep-ink)); --paper-3: color-mix(in srgb, var(--deep) 76%, var(--deep-ink));
  --ink: var(--deep-ink); --ink-2: var(--deep-ink-2); --muted: var(--deep-muted); --faint: var(--deep-faint);
  --rule: color-mix(in srgb, var(--deep) 78%, var(--deep-ink)); --rule-2: color-mix(in srgb, var(--deep) 62%, var(--deep-ink));
  --accent: var(--deep-accent); --accent-wash: color-mix(in srgb, var(--deep-accent) 18%, var(--deep));
  --ok: var(--deep-ok); --ok-wash: color-mix(in srgb, var(--deep-ok) 18%, var(--deep));
  --open: var(--deep-open); --open-wash: color-mix(in srgb, var(--deep-open) 18%, var(--deep));
  --stop: var(--deep-stop); --stop-wash: color-mix(in srgb, var(--deep-stop) 18%, var(--deep));
  --s1: var(--deep-s1); --s2: var(--deep-s2); --s3: var(--deep-s3); --s4: var(--deep-s4);
  --s1-deep: var(--deep-s1); --s2-deep: var(--deep-s2); --s3-deep: var(--deep-s3); --s4-deep: var(--deep-s4);
}
[data-surface="s1"] { --paper: var(--s1-deep); } [data-surface="s2"] { --paper: var(--s2-deep); }
[data-surface="s3"] { --paper: var(--s3-deep); } [data-surface="s4"] { --paper: var(--s4-deep); }
[data-surface="s1"], [data-surface="s2"], [data-surface="s3"], [data-surface="s4"] {
  --paper-2: color-mix(in srgb, var(--on-series) 10%, transparent); --paper-3: color-mix(in srgb, var(--on-series) 16%, transparent);
  --ink: var(--on-series); --ink-2: color-mix(in srgb, var(--on-series) 92%, transparent); --muted: color-mix(in srgb, var(--on-series) 78%, transparent); --faint: color-mix(in srgb, var(--on-series) 60%, transparent);
  --rule: color-mix(in srgb, var(--on-series) 28%, transparent); --rule-2: color-mix(in srgb, var(--on-series) 45%, transparent);
  --accent: var(--on-series); --s1: var(--on-series); --s2: var(--on-series); --s3: var(--on-series); --s4: var(--on-series);
  --s1-deep: var(--on-series); --s2-deep: var(--on-series); --s3-deep: var(--on-series); --s4-deep: var(--on-series);
}
[data-surface="duo"] { background: var(--paper-2); }
[data-surface="duo"][data-series="1"] { background: var(--s1-wash); color: var(--s1-deep); }
[data-surface="duo"][data-series="2"] { background: var(--s2-wash); color: var(--s2-deep); }
[data-surface="duo"][data-series="3"] { background: var(--s3-wash); color: var(--s3-deep); }
[data-surface="duo"][data-series="4"] { background: var(--s4-wash); color: var(--s4-deep); }
[data-surface="duo"] h3, [data-surface="duo"] b, [data-surface="duo"] .receipt dd { color: inherit; }
[data-surface="duo"] .muted, [data-surface="duo"] .faint, [data-surface="duo"] .receipt dt { color: inherit; opacity: .7; }
[data-surface="duo"] .receipt, [data-surface="duo"] .receipt dt, [data-surface="duo"] .receipt dd { border-color: color-mix(in srgb, currentColor 25%, transparent); }
[data-surface="deep"] code, [data-surface="deep"] .note { background: var(--paper-2); border-color: var(--rule); }
[data-surface="deep"] .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-surface="deep"] .btn[data-style="ghost"] { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.band { padding: var(--sp-5) 0; margin: var(--sp-5) 0; }
.band > :first-child { margin-top: 0; } .band > :last-child { margin-bottom: 0; }
.band[data-surface="tint"] { border-top: var(--line) solid var(--rule); border-bottom: var(--line) solid var(--rule); }
.band[data-surface="deep"], .band[data-surface^="s"]:not([data-surface$="w"]) { padding-block: var(--sp-6); }
.band[data-style="inset"] { padding-inline: var(--sp-5); }
.band[data-style="bleed"], .page-header[data-surface] { width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: max(16px, calc(50vw - min(var(--shell), calc(100vw - 32px)) / 2)); }
.page-header[data-surface] { padding-block: var(--sp-6) var(--sp-5); border-bottom: 0; }
.page-header[data-surface="tint"] { border-bottom: var(--line) solid var(--rule); }
.band .section-line { border-top: 0; }
.panel { padding: var(--sp-4); border: var(--line) solid var(--rule); background: var(--paper-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel > :last-child { margin-bottom: 0; }
.panel[data-surface] { border-color: transparent; }
.panel[data-surface="deep"], .panel[data-surface^="s"]:not([data-surface$="w"]) { border: 0; padding: var(--sp-5); background: var(--paper); }
.panel[data-style="outline"] { background: transparent; border: var(--line-2) solid var(--ink); }
.panel[data-style="thick"] { background: transparent; border: 0; border-top: var(--line-3) solid var(--ink); padding-inline: 0; }
.panel[data-style="plain"] { background: var(--paper); }
.panel .receipt { border-top-color: var(--rule-2); }
.aside { border-top: var(--line-2) solid var(--ink); padding-top: var(--sp-3); font-size: var(--fs-sm); }
.aside h3 { font: 700 var(--fs-xs)/1.4 var(--label); color: var(--muted); margin-bottom: var(--sp-3); }
.aside.panel { border-top: var(--line) solid var(--rule); }
.plate { display: inline-grid; place-items: center; flex: none; min-width: 40px; height: 40px; padding: 0 8px; background: var(--ink); color: var(--paper); font: 700 13px/1 var(--mono); letter-spacing: -.02em; border-radius: var(--radius); }
.plate[data-size="sm"] { min-width: 28px; height: 28px; font-size: 11px; padding: 0 6px; }
.plate[data-size="lg"] { min-width: 56px; height: 56px; font-size: 18px; }
.plate[data-style="outline"] { background: transparent; color: var(--ink); border: var(--line-2) solid var(--ink); }
.plate[data-surface="tint"] { background: var(--paper-3); color: var(--ink); }
.plate[data-series="1"] { background: var(--s1-deep); color: var(--on-series); } .plate[data-series="2"] { background: var(--s2-deep); color: var(--on-series); }
.plate[data-series="3"] { background: var(--s3-deep); color: var(--on-series); } .plate[data-series="4"] { background: var(--s4-deep); color: var(--on-series); }
.with-plate { display: flex; align-items: center; gap: var(--sp-3); }
.split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: var(--sp-6); align-items: start; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.split .row, .split .register-head, .two .row { grid-auto-columns: minmax(120px, 170px); }
.cols-2 { columns: 2; column-gap: var(--sp-6); } .cols-3 { columns: 3; column-gap: var(--sp-5); }
.cols-2 > *, .cols-3 > * { break-inside: avoid; }

/* ---------- 6. Status, marks of state ---------- */
.status, .checklist > li { display: inline-flex; align-items: center; gap: 6px; font: var(--fs-xs)/1.4 var(--label); color: var(--muted); white-space: nowrap; }
.status::before, .checklist > li::before { content: ""; flex: none; box-sizing: border-box; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
[data-state="done"].status::before, .checklist > li[data-state="done"]::before, [data-state="live"].status::before { color: var(--ok); background: var(--ok); }
[data-state="live"].status::before { animation: pulse 2.4s ease-in-out infinite; }
[data-state="active"].status::before, .checklist > li[data-state="active"]::before { color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
[data-state="waiting"].status::before, .checklist > li[data-state="waiting"]::before { color: var(--open); }
[data-state="blocked"].status::before, .checklist > li[data-state="blocked"]::before { content: "×"; width: auto; height: auto; border: 0; border-radius: 0; color: var(--stop); font: 700 13px/9px var(--mono); }
[data-state="parked"].status::before, .checklist > li[data-state="parked"]::before { color: var(--faint); border: 0; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 0; width: 7px; }
[data-state="optional"].status::before { color: var(--faint); border-radius: 0; transform: rotate(45deg) scale(.8); }
[data-state="reserved"].status::before, .checklist > li[data-state="reserved"]::before { color: var(--faint); border-style: dashed; }
[data-state="superseded"].status::before { color: var(--faint); border-color: var(--faint); background: var(--rule-2); }
@keyframes pulse { 50% { opacity: .35; } }
.status[data-size="lg"] { font: 600 var(--fs-md)/1.2 var(--mono); color: var(--ink); }
.checklist { list-style: none; margin: 0 0 var(--sp-4); padding: 0; border-top: var(--line) solid var(--rule); font-size: var(--fs-sm); }
.checklist > li { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 6px 0; border-bottom: var(--line) solid var(--rule); white-space: normal; color: var(--ink); font: var(--fs-sm)/1.5 var(--sans); }
.checklist > li::before { margin-top: 5px; border-color: var(--rule-2); }
.checklist > li .end { font: var(--fs-xs)/1.5 var(--mono); color: var(--faint); white-space: nowrap; }
.kind-chip, .chip { display: inline-block; padding: 1px 6px; border: var(--line) solid var(--rule-2); font: var(--fs-xs)/1.5 var(--label); color: var(--muted); border-radius: var(--radius); }
.kind-chip[data-kind="theorem"], .kind-chip[data-kind="proposition"], .kind-chip[data-kind="lemma"], .kind-chip[data-kind="corollary"] { border-color: var(--ink); color: var(--ink); }
.kind-chip[data-kind="conjecture"], .kind-chip[data-kind="research-question"], .kind-chip[data-kind="empirical-hypothesis"] { border-style: dashed; }
.kind-chip[data-kind="negative-result"] { color: var(--stop); border-color: var(--stop); }
.tag { font: var(--fs-xs)/1.5 var(--label); color: var(--faint); } .tag::before { content: "#"; }
.rel { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; font: 700 12px/1 var(--mono); color: var(--on-series); }
.rel[data-rel="support"] { background: var(--ok); } .rel[data-rel="counter"] { background: var(--stop); } .rel[data-rel="qualify"] { background: var(--open); }
.rel[data-rel="undercut"] { background: var(--ink); color: var(--paper); } .rel[data-rel="replicate"] { background: var(--accent); }
.rel[data-rel="unresolved"] { background: transparent; color: var(--open); border: 1.5px dashed var(--open); }
.rel-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font: var(--fs-xs)/1.5 var(--label); color: var(--muted); align-items: center; }
.rel-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stamp { display: inline-block; padding: 4px 10px; border: var(--line-2) solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; color: var(--ink); font: 700 var(--fs-xs)/1.4 var(--label); letter-spacing: .04em; transform: rotate(-3deg); border-radius: var(--radius); }
.stamp[data-state="done"] { border-color: var(--ok); outline-color: var(--ok); color: var(--ok); }
.stamp[data-state="waiting"] { border-color: var(--open); outline-color: var(--open); color: var(--open); }
.stamp[data-state="blocked"] { border-color: var(--stop); outline-color: var(--stop); color: var(--stop); }
.stamp[data-state="superseded"], .stamp[data-state="parked"] { border-color: var(--rule-2); outline-color: var(--rule-2); color: var(--faint); }
.stamp[data-style="flat"] { transform: none; }

/* ---------- 7. Numbers, receipts, notes ---------- */
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: var(--line) solid var(--rule-2); border-bottom: var(--line) solid var(--rule); }
.number { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-right: var(--line) solid var(--rule); }
.number + .number { padding-left: var(--sp-4); } .number:last-child { border-right: 0; }
.number b { display: block; font: 600 20px/1.1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.number b sup { font-size: .45em; color: var(--open); vertical-align: top; margin-left: 2px; }
.number span { display: block; margin-top: 6px; font: var(--fs-xs)/1.4 var(--label); color: var(--muted); }
.number small { display: block; margin-top: 2px; font: var(--fs-xs)/1.4 var(--label); color: var(--faint); }
.number[data-series="1"] b { color: var(--s1); } .number[data-series="2"] b { color: var(--s2); }
.number[data-series="3"] b { color: var(--s3); } .number[data-series="4"] b { color: var(--s4); }
.numbers[data-style="flow"] .number + .number { position: relative; }
.numbers[data-style="flow"] .number + .number::before { content: "→"; position: absolute; left: -6px; top: var(--sp-4); color: var(--faint); font: var(--fs-sm)/1 var(--mono); background: var(--paper); padding: 0 2px; }
.numbers[data-style="readout"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.numbers[data-style="readout"] .number { padding: 10px 12px 10px 0; border-bottom: var(--line) solid var(--rule); }
.numbers[data-style="readout"] .number b { font-size: 18px; margin-top: 2px; }
.numbers[data-style="readout"] .number span { margin-top: 0; }
.numbers[data-style="readout"] .number .copy { float: right; margin: -2px 0 0; padding: 0 5px; min-height: 20px; border: var(--line) solid var(--rule); background: var(--paper); font: 10px/1 var(--mono); color: var(--faint); cursor: pointer; }
.number[data-style="block"] { padding: var(--sp-4); border: 0; border-radius: var(--radius); }
.number[data-style="block"] b { font-size: 32px; color: var(--ink); }
.count { display: grid; grid-template-columns: var(--register) minmax(0,1fr); gap: var(--sp-4); align-items: baseline; padding: var(--sp-3) 0 6px; border-top: var(--line-2) solid var(--ink); }
.count b { font: 600 28px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.count b sup { font-size: .45em; color: var(--open); vertical-align: top; }
.count h3 { margin: 0; font: 600 var(--fs-md)/1.3 var(--sans); }
.count p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.count + .register { border-top: 0; }
.receipt { display: grid; grid-template-columns: max-content minmax(0, 1fr); border-top: var(--line) solid var(--rule-2); font: var(--fs-xs)/1.5 var(--label); }
.receipt dt, .receipt dd { margin: 0; padding: 7px 0; border-bottom: var(--line) solid var(--rule); }
.receipt dt { padding-right: var(--sp-5); color: var(--faint); white-space: nowrap; }
.receipt dd { color: var(--ink-2); overflow-wrap: anywhere; }
.receipt .hash { color: var(--muted); } .receipt .hash::before { content: attr(data-prefix); color: var(--faint); }
.receipt[data-size="wide"] { grid-template-columns: 180px minmax(0, 1fr); }
.receipt[data-style="leaders"] { display: block; }
.receipt[data-style="leaders"] div { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.receipt[data-style="leaders"] dt, .receipt[data-style="leaders"] dd { padding: 0; border: 0; }
.receipt[data-style="leaders"] div::after { content: ""; order: 2; flex: 1; border-bottom: 1px dotted var(--rule-2); min-width: 16px; transform: translateY(-3px); }
.receipt[data-style="leaders"] dt { order: 1; } .receipt[data-style="leaders"] dd { order: 3; color: var(--ink); }
.receipt[data-style="bare"] { border-top: 0; }
.receipt[data-style="bare"] dt, .receipt[data-style="bare"] dd { padding: 3px 0; border-bottom: 0; }
.receipt[data-style="bare"] dt { padding-right: var(--sp-4); }
.note { max-width: var(--measure); padding: var(--sp-3) var(--sp-4); border: var(--line) solid var(--rule); background: var(--paper-2); font-size: var(--fs-sm); border-radius: var(--radius); }
.note > :last-child { margin-bottom: 0; }
.note .label { display: inline-flex; margin-bottom: 4px; font: 600 var(--fs-xs)/1.4 var(--label); color: var(--muted); }
.note[data-surface="open"] { border-color: color-mix(in srgb, var(--open) 30%, var(--rule)); } .note[data-surface="open"] .label { color: var(--open); }
.note[data-surface="ok"] { border-color: color-mix(in srgb, var(--ok) 30%, var(--rule)); } .note[data-surface="ok"] .label { color: var(--ok); }
.note[data-surface="stop"] { border-color: color-mix(in srgb, var(--stop) 30%, var(--rule)); } .note[data-surface="stop"] .label { color: var(--stop); }
.note[data-surface="info"] { border-color: color-mix(in srgb, var(--accent) 30%, var(--rule)); } .note[data-surface="info"] .label { color: var(--accent); }
.span { margin: var(--sp-4) 0; padding-left: var(--sp-4); border-left: var(--line) solid var(--rule-2); }
.span-head { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; font: var(--fs-xs)/1.5 var(--label); color: var(--faint); }
.span-head b { color: var(--ink); font-weight: 600; } .span-head .locator { color: var(--muted); }
.span-quote { margin: 0; max-width: 72ch; font-size: var(--fs-sm); color: var(--ink-2); }
.span-quote::before { content: "\201C"; color: var(--faint); } .span-quote::after { content: "\201D"; color: var(--faint); }
.span .receipt { margin-top: 6px; font-size: 10.5px; }

/* ---------- 8. Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: var(--line) solid var(--rule-2); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; border-bottom: var(--line) solid var(--rule); }
table.data th { font: 600 var(--fs-xs)/1.3 var(--label); color: var(--faint); }
table.data td.mono, table.data td.num { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:hover td { background: var(--paper-2); }
table.data td a { color: var(--ink); font-weight: 500; } table.data td a:hover { color: var(--accent); }
table.data[data-style~="zebra"] tbody tr:nth-child(even) td { background: var(--paper-2); }
table.data[data-style~="grid"] th, table.data[data-style~="grid"] td { border: var(--line) solid var(--rule); padding: 6px 10px; }
table.data[data-style~="dense"] th, table.data[data-style~="dense"] td { padding: 4px 10px 4px 0; font-size: var(--fs-xs); }
table.data[data-style~="head-deep"] thead th { background: var(--deep); color: var(--deep-ink); padding-left: 8px; border-bottom: 0; }
table.data[data-style~="head-deep"] thead th:last-child { padding-right: 8px; }
table.data[data-style~="head-deep"] tbody td:first-child { padding-left: 8px; }
table.data[data-style~="notation"] td:first-child { font-family: var(--mono); color: var(--ink); white-space: nowrap; }
table.data[data-style~="heat"] td[data-heat] { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
table.data[data-style~="heat"] td[data-heat="1"] { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
table.data[data-style~="heat"] td[data-heat="2"] { background: color-mix(in srgb, var(--accent) 18%, var(--paper)); }
table.data[data-style~="heat"] td[data-heat="3"] { background: color-mix(in srgb, var(--accent) 32%, var(--paper)); }
table.data[data-style~="heat"] td[data-heat="4"] { background: color-mix(in srgb, var(--accent) 50%, var(--paper)); color: var(--on-series); }
table.data[data-style~="heat"] td[data-heat="5"] { background: var(--accent); color: var(--on-series); }

/* ---------- 9. Charts, boxes, meters ---------- */
.chart { margin: var(--sp-5) 0; border-top: var(--line) solid var(--rule-2); border-bottom: var(--line) solid var(--rule); }
.chart-head { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 8px 0; font: var(--fs-xs)/1.4 var(--label); color: var(--faint); }
.chart-head b { color: var(--ink); font-weight: 600; }
.chart-body { padding: var(--sp-4) 0; }
.chart-body[data-surface] { padding-inline: var(--sp-4); }
.chart-caption { padding: 8px 0 10px; border-top: var(--line) solid var(--rule); font: var(--fs-xs)/1.5 var(--label); color: var(--muted); max-width: 80ch; }
.chart-caption .run { color: var(--faint); }
.bars { display: grid; gap: 8px; font: var(--fs-xs)/1.4 var(--mono); }
.bar { display: grid; grid-template-columns: var(--register) minmax(0,1fr) 56px; gap: var(--sp-3); align-items: center; }
.bar > span:first-child { color: var(--muted); }
.bar i { display: block; height: 10px; background: var(--ink); }
.bar[data-series="1"] i { background: var(--s1); } .bar[data-series="2"] i { background: var(--s2); }
.bar[data-series="3"] i { background: var(--s3); } .bar[data-series="4"] i { background: var(--s4); }
.bar b { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
svg.plot { display: block; width: 100%; max-width: 760px; height: auto; font: 9px var(--mono); }
svg.plot .grid line { stroke: var(--rule); } svg.plot .axis { stroke: var(--rule-2); } svg.plot text { fill: var(--faint); }
svg.plot .line { fill: none; stroke: var(--ink); stroke-width: 2; }
svg.plot .line[data-series="1"] { stroke: var(--s1); } svg.plot .line[data-series="2"] { stroke: var(--s2); }
svg.plot .line[data-series="3"] { stroke: var(--s3); } svg.plot .line[data-series="4"] { stroke: var(--s4); }
svg.plot .pt { fill: var(--paper); stroke: var(--ink); stroke-width: 2; r: 3.5; }
svg.plot .pt[data-series="1"] { stroke: var(--s1); } svg.plot .pt[data-series="2"] { stroke: var(--s2); }
svg.plot .pt[data-series="3"] { stroke: var(--s3); } svg.plot .pt[data-series="4"] { stroke: var(--s4); }
svg.plot .pt.selected { r: 5; stroke-width: 3; } svg.plot .marker { stroke: var(--faint); stroke-dasharray: 3 3; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; font: var(--fs-xs)/1.5 var(--label); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; background: var(--ink); }
.legend [data-series="1"] i { background: var(--s1); } .legend [data-series="2"] i { background: var(--s2); }
.legend [data-series="3"] i { background: var(--s3); } .legend [data-series="4"] i { background: var(--s4); }
.pbar { display: inline-grid; grid-template-columns: 60px auto; gap: 6px; align-items: center; font: var(--fs-xs)/1 var(--label); }
.pbar i { display: block; height: 8px; background: var(--paper-3); position: relative; }
.pbar i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--ink); }
.pbar b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pbar[data-state="done"] i::before { background: var(--ok); } .pbar[data-state="blocked"] i::before { background: var(--stop); }
.boxes { display: grid; grid-template-columns: repeat(4, 40px); gap: 4px; }
.boxes[data-size="sm"] { grid-template-columns: repeat(4, 22px); gap: 3px; }
.boxes[data-size="lg"] { grid-template-columns: repeat(4, 64px); gap: 6px; }
.box { display: grid; place-items: center; width: 40px; height: 40px; border: var(--line) solid var(--rule-2); background: var(--paper); font: 600 11px/1 var(--mono); color: var(--faint); border-radius: var(--radius); }
.boxes[data-size="sm"] .box { width: 22px; height: 22px; font-size: 9px; }
.boxes[data-size="lg"] .box { width: 64px; height: 64px; font-size: 16px; }
.box[data-state="opened"] { background: var(--paper-3); color: var(--muted); }
.box[data-state="target"] { border: var(--line-2) solid var(--ink); color: var(--ink); }
.box[data-state="found"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.box[data-state="clue"] { border-style: dashed; color: var(--ink-2); }
.box[data-series="1"] { background: var(--s1); border-color: var(--s1); color: var(--on-series); } .box[data-series="2"] { background: var(--s2); border-color: var(--s2); color: var(--on-series); }
.box[data-series="3"] { background: var(--s3); border-color: var(--s3); color: var(--on-series); } .box[data-series="4"] { background: var(--s4); border-color: var(--s4); color: var(--on-series); }
.boxes-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, max-content)); gap: var(--sp-5) var(--sp-6); align-items: start; }
.boxes-caption { margin-top: 6px; max-width: 240px; font: var(--fs-xs)/1.4 var(--label); color: var(--muted); }
.meter { display: inline-flex; gap: 3px; vertical-align: middle; }
.meter i { width: 10px; height: 10px; border: 1px solid var(--ink); }
.meter i[data-state="done"] { background: var(--ink); }
.meter i[data-state="active"] { background: var(--ink); -webkit-mask: linear-gradient(90deg, #000 50%, transparent 50%); mask: linear-gradient(90deg, #000 50%, transparent 50%); border: 0; box-shadow: inset 0 0 0 1px var(--ink); }
.meter[data-size="sm"] i { width: 7px; height: 7px; }
.meter[data-series="1"] i { border-color: var(--s1); } .meter[data-series="1"] i[data-state="done"] { background: var(--s1); }
.meter[data-series="2"] i { border-color: var(--s2); } .meter[data-series="2"] i[data-state="done"] { background: var(--s2); }
.meter-label { font: var(--fs-xs)/1.4 var(--label); color: var(--muted); margin-left: 8px; vertical-align: middle; }
.spark { font-family: var(--mono); letter-spacing: -.05em; color: var(--ink); }
.spark[data-series="1"] { color: var(--s1); } .spark[data-series="2"] { color: var(--s2); } .spark[data-series="3"] { color: var(--s3); } .spark[data-series="4"] { color: var(--s4); }

/* ---------- 10. Controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 var(--fs-sm)/1 var(--sans); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow); transition: background calc(120ms * var(--motion)) ease, border-color calc(120ms * var(--motion)) ease, color calc(120ms * var(--motion)) ease; border-radius: var(--radius); }
.btn:hover { background: var(--accent); border-color: var(--accent); text-decoration: none; }
.btn[data-style="ghost"] { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn[data-style="ghost"]:hover { background: var(--paper-2); color: var(--accent); border-color: var(--accent); }
.btn[data-size="sm"] { font: 600 var(--fs-xs)/1 var(--mono); min-height: 28px; padding: 0 9px; }
.btn::after { content: none !important; }
.segmented { display: inline-flex; border: var(--line) solid var(--rule-2); background: var(--paper); border-radius: var(--radius); }
.segmented a, .segmented button { min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--muted); font: 600 var(--fs-xs)/1 var(--mono); cursor: pointer; }
.segmented a + a, .segmented button + button { border-left: var(--line) solid var(--rule-2); }
.segmented a::after { content: none; } .segmented a:hover { text-decoration: none; color: var(--accent); }
.segmented [aria-current="true"], .segmented [aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.field { display: grid; gap: 3px; }
.field > span { font: var(--fs-xs)/1.2 var(--label); color: var(--faint); }
.field input, .field select { height: 31px; padding: 0 8px; min-width: 0; border: var(--line) solid var(--rule); background: #fff; font: var(--fs-sm)/1 var(--mono); border-radius: var(--radius); }
.field input[type="range"] { padding: 0; accent-color: var(--ink); }
.field input:focus, .field select:focus { border-color: var(--accent); outline: 2px solid var(--accent-wash); outline-offset: 0; }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; align-items: end; padding: 10px 0; border-top: var(--line) solid var(--rule-2); border-bottom: var(--line) solid var(--rule); }
.controls[data-style="filters"] { grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(110px, 1fr)) auto; }
.controls > .legend-line { grid-column: 1 / -1; font: 600 var(--fs-xs)/1.4 var(--mono); color: var(--muted); }
.control-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; font: var(--fs-xs)/1.4 var(--label); }
.control-actions a { color: var(--muted); }
.live { display: flex; gap: 8px; align-items: baseline; margin: 8px 0 var(--sp-4); font: var(--fs-sm)/1.5 var(--label); color: var(--ink-2); }
details.disclosure { border-top: var(--line) solid var(--rule); border-bottom: var(--line) solid var(--rule); }
details.disclosure summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 36px; padding: 6px 0; cursor: pointer; font: var(--fs-xs)/1.4 var(--label); color: var(--muted); user-select: none; }
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::after { content: "+"; font: 700 14px/1 var(--label); color: var(--accent); }
details.disclosure[open] summary::after { content: "−"; }
details.disclosure summary:hover { color: var(--accent); }
details.disclosure[open] summary { border-bottom: var(--line) solid var(--rule); }
details.disclosure > :not(summary) { padding-top: var(--sp-3); }
.prompt { border: 1px solid var(--ink); background: var(--paper); border-radius: var(--radius); }
.copy-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 6px 10px; font: var(--fs-xs)/1.4 var(--label); color: var(--faint); }
.prompt .copy-row { border-bottom: var(--line) solid var(--rule); }
.prompt pre { margin: 0; border: 0; background: transparent; padding: 10px 12px; white-space: pre-wrap; font-size: var(--fs-sm); color: var(--ink); }
.cite { border-top: var(--line) solid var(--rule-2); padding-top: var(--sp-3); }
.cite-line { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.cite-line .chip { color: var(--ink); }
.cite pre { margin: 0; }
.placeholder { min-height: 96px; display: grid; place-items: center; border: 1px dashed var(--rule-2); font: var(--fs-xs)/1.4 var(--label); color: var(--muted); border-radius: var(--radius); }
.placeholder > span { background: var(--paper); padding: 2px 8px; }

/* ---------- 11. Accents (a closed collection; see accents.html for caps) ---------- */
.rule { display: block; height: 1px; margin: var(--sp-5) 0; background: var(--rule-2); border: 0; }
.rule[data-style="double"] { height: 3px; background: none; border-top: var(--line) solid var(--rule-2); border-bottom: var(--line) solid var(--rule-2); }
.rule[data-style="thick"] { height: 3px; background: var(--ink); }
.rule[data-style="dots"] { height: 0; background: none; border-top: 2px dotted var(--rule-2); }
.rule[data-style="dashes"] { height: 0; background: none; border-top: 1px dashed var(--rule-2); }
.rule[data-style="checker"] { height: 8px; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect width='4' height='4'/><rect x='4' y='4' width='4' height='4'/></svg>") repeat-x; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect width='4' height='4'/><rect x='4' y='4' width='4' height='4'/></svg>") repeat-x; }
.rule[data-style="ticks"] { height: 8px; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'><rect x='0' width='1' height='8'/><rect x='8' width='1' height='4'/><rect x='16' width='1' height='4'/><rect x='24' width='1' height='4'/><rect x='32' width='1' height='4'/></svg>") repeat-x; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'><rect x='0' width='1' height='8'/><rect x='8' width='1' height='4'/><rect x='16' width='1' height='4'/><rect x='24' width='1' height='4'/><rect x='32' width='1' height='4'/></svg>") repeat-x; }
.rule[data-style="slash"] { height: 8px; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M-2 10 L10 -2 M-2 2 L2 -2 M6 10 L10 6' stroke='%2523000' stroke-width='1.4'/></svg>") repeat-x; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M-2 10 L10 -2 M-2 2 L2 -2 M6 10 L10 6' stroke='%2523000' stroke-width='1.4'/></svg>") repeat-x; }
.rule[data-style="wedge"] { display: inline-block; vertical-align: middle; width: 40px; height: 3px; margin: 0 0 var(--sp-3); background: var(--ink); }
.rule[data-style="glyph"], .rule[data-style="label"] { display: flex; align-items: center; gap: 12px; height: auto; background: none; color: var(--faint); font: var(--fs-sm)/1 var(--label); }
.rule[data-style="label"] { font-size: var(--fs-xs); }
.rule[data-style="glyph"]::before, .rule[data-style="glyph"]::after, .rule[data-style="label"]::after { content: ""; flex: 1; height: 1px; background: var(--rule-2); }
.rule[data-series="1"] { background: var(--s1); } .rule[data-series="2"] { background: var(--s2); } .rule[data-series="3"] { background: var(--s3); } .rule[data-series="4"] { background: var(--s4); }
.rule[data-surface="deep"] { background: var(--deep); }
.ramp { display: flex; height: 8px; margin: var(--sp-5) 0; }
.ramp i { flex: 1; background: var(--ink); }
.ramp i:nth-child(1) { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/></svg>"); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/></svg>"); } .ramp i:nth-child(2) { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/></svg>"); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/></svg>"); }
.ramp i:nth-child(3) { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); } .ramp i:nth-child(4) { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); }
.ramp i:nth-child(5) { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='2' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='2' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); } .ramp i:nth-child(6) { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='2' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='6' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='2' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='2' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='6' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='2' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); }
.ramp i:nth-child(7) { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='2' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='6' y='0' width='2' height='2'/><rect x='0' y='2' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='2' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='4' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='2' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='6' y='0' width='2' height='2'/><rect x='0' y='2' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='2' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='4' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>"); }
.ramp[data-style="faint"] i { background: var(--rule-2); }
.ramp[data-size="lg"] { height: 24px; }
.ramp[data-style="reverse"] { flex-direction: row-reverse; }
.ramp[data-series="1"] i { background: var(--s1); } .ramp[data-series="2"] i { background: var(--s2); }
.ramp[data-series="3"] i { background: var(--s3); } .ramp[data-series="4"] i { background: var(--s4); }
.pattern { position: relative; }
.pattern::before { content: ""; position: absolute; inset: 0; background: var(--rule-2); pointer-events: none; z-index: 0; }
.pattern > * { position: relative; z-index: 1; }
.pattern[data-style="dots"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='1'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='1'/></svg>") repeat; }
.pattern[data-style="grid"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 0 H0 V24' fill='none' stroke='%2523000' stroke-width='1'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 0 H0 V24' fill='none' stroke='%2523000' stroke-width='1'/></svg>") repeat; }
.pattern[data-style="cross"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 9 V15 M9 12 H15' stroke='%2523000' stroke-width='1'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 9 V15 M9 12 H15' stroke='%2523000' stroke-width='1'/></svg>") repeat; }
.pattern[data-style="hatch"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M-2 10 L10 -2 M-2 2 L2 -2 M6 10 L10 6' stroke='%2523000' stroke-width='1.4'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M-2 10 L10 -2 M-2 2 L2 -2 M6 10 L10 6' stroke='%2523000' stroke-width='1.4'/></svg>") repeat; }
.pattern[data-style="checker"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect width='4' height='4'/><rect x='4' y='4' width='4' height='4'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect width='4' height='4'/><rect x='4' y='4' width='4' height='4'/></svg>") repeat; background: var(--paper-3); }
.pattern[data-style="dither"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/></svg>") repeat; }
.pattern[data-style="dither-dense"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>") repeat; }
.pattern[data-series="1"]::before { background: var(--s1); } .pattern[data-series="2"]::before { background: var(--s2); }
.pattern[data-series="3"]::before { background: var(--s3); } .pattern[data-series="4"]::before { background: var(--s4); }
.pattern[data-surface="deep"]::before { background: var(--ink); }
.corners { position: relative; padding: var(--sp-4); }
.corners::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect width='12' height='2'/><rect width='2' height='12'/></svg>") top left / 12px 12px no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect width='12' height='2'/><rect x='10' width='2' height='12'/></svg>") top right / 12px 12px no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect y='10' width='12' height='2'/><rect width='2' height='12'/></svg>") bottom left / 12px 12px no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect y='10' width='12' height='2'/><rect x='10' width='2' height='12'/></svg>") bottom right / 12px 12px no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect width='12' height='2'/><rect width='2' height='12'/></svg>") top left / 12px 12px no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect width='12' height='2'/><rect x='10' width='2' height='12'/></svg>") top right / 12px 12px no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect y='10' width='12' height='2'/><rect width='2' height='12'/></svg>") bottom left / 12px 12px no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><rect y='10' width='12' height='2'/><rect x='10' width='2' height='12'/></svg>") bottom right / 12px 12px no-repeat; }
.corners[data-style="faint"]::before { background: var(--rule-2); }
.corners[data-size="lg"]::before { -webkit-mask-size: 20px 20px; mask-size: 20px 20px; }
.corners[data-style="offset"] { outline: var(--line) solid var(--rule); outline-offset: -8px; }
[data-corner] { position: relative; }
[data-corner]::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--ink); pointer-events: none; }
[data-corner="br"]::after { right: 0; bottom: 0; } [data-corner="tl"]::after { left: 0; top: 0; }
[data-corner="tr"]::after { right: 0; top: 0; } [data-corner="bl"]::after { left: 0; bottom: 0; }
[data-corner][data-shape="diamond"]::after { transform: rotate(45deg) scale(.8); margin: 6px; }
[data-corner][data-shape="ring"]::after { background: transparent; border: var(--line-2) solid var(--ink); border-radius: 50%; margin: 6px; }
[data-corner][data-shape="triangle"]::after { width: 0; height: 0; background: none; border-right: 12px solid var(--ink); border-top: 12px solid transparent; }
[data-corner][data-shape="dither"]::after { width: 24px; height: 24px; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>") repeat; }
[data-corner][data-shape="boxes"]::after { width: 22px; height: 22px; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect width='4' height='4'/><rect x='4' y='4' width='4' height='4'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect width='4' height='4'/><rect x='4' y='4' width='4' height='4'/></svg>") repeat; margin: 6px; }
[data-corner][data-series="1"]::after { background: var(--s1); border-color: var(--s1); } [data-corner][data-series="2"]::after { background: var(--s2); border-color: var(--s2); }
[data-corner][data-series="3"]::after { background: var(--s3); border-color: var(--s3); } [data-corner][data-series="4"]::after { background: var(--s4); border-color: var(--s4); }
[data-corner][data-shape="triangle"][data-series="1"]::after { background: none; border-right-color: var(--s1); }
[data-corner][data-shape="triangle"][data-series="2"]::after { background: none; border-right-color: var(--s2); }
[data-corner][data-shape="ring"][data-series]::after { background: transparent; }
.frame[data-style="double"] { border: 3px double var(--ink); }
.frame[data-style="offset"] { position: relative; border: 1px solid var(--ink); }
.frame[data-style="offset"]::after { content: ""; position: absolute; inset: 6px -7px -7px 6px; border: var(--line) solid var(--rule-2); pointer-events: none; z-index: -1; }
.frame[data-style="ticket"] { clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px)); }
.frame[data-style="tag"] { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.frame[data-style="dog-ear"] { position: relative; overflow: hidden; }
.frame[data-style="dog-ear"]::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-left: 18px solid var(--paper-3); border-top: 18px solid var(--paper); }
.frame[data-style="dog-ear"]::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-left: 18px solid transparent; border-bottom: 18px solid var(--rule-2); }
.tabbed { position: relative; margin-top: 22px; }
.tabbed > .tab { position: absolute; top: -22px; left: -1px; padding: 4px 10px 3px; background: var(--ink); color: var(--paper); font: 600 var(--fs-xs)/1.4 var(--label); border-radius: var(--radius); }
.tabbed > .tab[data-style="outline"] { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-bottom-color: var(--paper); top: -21px; }
.tabbed > .tab[data-style="right"], .tabbed > .tab[data-style="outline right"] { left: auto; right: -1px; }
.tabbed > .tab[data-series="1"] { background: var(--s1); color: var(--on-series); } .tabbed > .tab[data-series="2"] { background: var(--s2); color: var(--on-series); }
.tabbed > .tab[data-series="3"] { background: var(--s3); color: var(--on-series); } .tabbed > .tab[data-series="4"] { background: var(--s4); color: var(--on-series); }
.endmark { display: block; margin: var(--sp-5) 0; color: var(--ink); font: 14px/1 var(--mono); }
.endmark::before { content: "∎"; }
.endmark[data-style="diamond"]::before { content: "◆"; }
.endmark[data-style="dots"]::before { content: "· · ·"; letter-spacing: .2em; color: var(--faint); }
.endmark[data-style="dither"] { width: 14px; height: 14px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>") repeat; }
.endmark[data-style="dither"]::before { content: none; }
.endmark[data-style~="center"] { text-align: center; }
.mark { display: inline-block; width: 9px; height: 9px; background: var(--ink); vertical-align: middle; margin-right: 6px; }
.mark[data-shape="diamond"] { transform: rotate(45deg) scale(.85); }
.mark[data-shape="circle"] { border-radius: 50%; }
.mark[data-shape="ring"] { background: transparent; border: 1.5px solid var(--ink); border-radius: 50%; }
.mark[data-shape="half"] { background: transparent; border: 1.5px solid var(--ink); border-radius: 50%; -webkit-mask: linear-gradient(90deg, #000 50%, transparent 50%); mask: linear-gradient(90deg, #000 50%, transparent 50%); }
.mark[data-size="sm"] { width: 6px; height: 6px; } .mark[data-size="lg"] { width: 14px; height: 14px; }
.mark[data-series="1"] { background: var(--s1); border-color: var(--s1); } .mark[data-series="2"] { background: var(--s2); border-color: var(--s2); }
.mark[data-series="3"] { background: var(--s3); border-color: var(--s3); } .mark[data-series="4"] { background: var(--s4); border-color: var(--s4); }
.mark[data-shape="ring"][data-series], .mark[data-shape="half"][data-series] { background: transparent; }
ul[data-style="squares"] { list-style: none; padding-left: 0; }
ul[data-style="squares"] li { padding-left: 16px; position: relative; }
ul[data-style="squares"] li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--ink); }
ul[data-style="rings"] { list-style: none; padding-left: 0; }
ul[data-style="rings"] li { padding-left: 16px; position: relative; }
ul[data-style="rings"] li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border: 1.5px solid var(--ink); }
.watermarked { position: relative; overflow: hidden; }
.watermark { position: absolute; right: 8px; bottom: -14px; font: 700 96px/1 var(--mono); letter-spacing: -.06em; color: var(--paper-3); pointer-events: none; user-select: none; z-index: 0; }
.watermark[data-style="word"] { font-size: 44px; bottom: 4px; }
.watermarked > :not(.watermark) { position: relative; z-index: 1; }
.brackets::before { content: "[ "; color: var(--faint); } .brackets::after { content: " ]"; color: var(--faint); }
.brackets[data-style="jp"]::before { content: "「"; } .brackets[data-style="jp"]::after { content: "」"; }
.noted { display: grid; grid-template-columns: var(--register) minmax(0,1fr); gap: var(--sp-4); }
.margin-note { font: var(--fs-xs)/1.5 var(--label); color: var(--muted); padding-top: 3px; }
.margin-note b { color: var(--ink); font-weight: 600; }
.ruler { height: 12px; background: var(--rule-2); -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'><rect x='0' width='1' height='8'/><rect x='8' width='1' height='4'/><rect x='16' width='1' height='4'/><rect x='24' width='1' height='4'/><rect x='32' width='1' height='4'/></svg>") repeat-x; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'><rect x='0' width='1' height='8'/><rect x='8' width='1' height='4'/><rect x='16' width='1' height='4'/><rect x='24' width='1' height='4'/><rect x='32' width='1' height='4'/></svg>") repeat-x; margin-top: 4px; }
.share-card { width: 1200px; height: 630px; padding: 48px 72px 44px; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); color: var(--ink); border: var(--line) solid var(--rule); font-size: 22px; }
.share-card .family { font-size: 18px; min-height: 40px; }
.share-card .share-body { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: center; }
.share-card .eyebrow { font-size: 20px; margin: 0 0 14px; }
.share-card h1 { font-size: 46px; max-width: 18ch; margin: 0 0 16px; }
.share-card .figure-line { font: 500 24px/1.4 var(--mono); color: var(--ink-2); }
.share-card .figure-line b { color: var(--ink); font-weight: 600; }
.share-card .share-foot { display: flex; justify-content: space-between; align-self: end; font: 20px/1 var(--mono); color: var(--faint); }
.share-preview { width: 600px; height: 315px; overflow: hidden; border: var(--line) solid var(--rule-2); }
.share-preview .share-card { transform: scale(.5); transform-origin: top left; }

/* ---------- 11b. Layout utilities ---------- */
.grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.grid[data-cols="1"] { --cols: 1; } .grid[data-cols="2"] { --cols: 2; } .grid[data-cols="3"] { --cols: 3; } .grid[data-cols="4"] { --cols: 4; }
.grid[data-cols="auto"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid[data-gap="sm"] { gap: var(--sp-3); } .grid[data-gap="lg"] { gap: var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }
.stack > .check, .stack > .field, .stack > .cluster { display: flex; }
.stack[data-gap="sm"] > * + * { margin-top: var(--sp-2); } .stack[data-gap="lg"] > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
[data-align="center"] { text-align: center; } [data-align="right"] { text-align: right; }
.sticky { position: sticky; top: var(--sp-4); }
.sidebar { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.sidebar[data-style="right"] { grid-template-columns: minmax(0, 1fr) 200px; }

/* ---------- 11c. Navigation extras ---------- */
/* menu toggle: no JavaScript. <input type="checkbox" id="menu" class="menu-toggle"><label for="menu" class="menu-label">menu</label> */
.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-label { display: none; align-items: center; min-height: 32px; padding: 0 10px; border: var(--line) solid var(--rule-2); font: 600 var(--fs-xs)/1 var(--label); cursor: pointer; border-radius: var(--radius); }
.menu-toggle:focus-visible + .menu-label { outline: 2px solid var(--accent); }
.toc { font: var(--fs-xs)/1.6 var(--label); border-top: var(--line) solid var(--rule-2); padding-top: var(--sp-2); }
.toc a { display: block; color: var(--muted); padding: 3px 0; border-left: var(--line-2) solid transparent; padding-left: 8px; margin-left: -9px; }
.toc a::after { content: none; }
.toc a:hover { color: var(--accent); text-decoration: none; }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); }
.toc .toc-head { display: block; margin-bottom: 4px; color: var(--faint); }
.pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--sp-5) 0; font: var(--fs-xs)/1 var(--label); }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; padding: 0 8px; border: var(--line) solid var(--rule); color: var(--muted); border-radius: var(--radius); }
.pagination a::after { content: none; }
.pagination a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.pagination [aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- 11d. Forms ---------- */
.field textarea { min-height: 96px; padding: 6px 8px; border: var(--line) solid var(--rule); background: var(--paper); font: var(--fs-sm)/1.5 var(--mono); resize: vertical; border-radius: var(--radius); }
.field textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-wash); outline-offset: 0; }
.field input { background: var(--paper); }
.field .help { font: var(--fs-xs)/1.4 var(--label); color: var(--faint); }
.field[data-state="stop"] input, .field[data-state="stop"] select, .field[data-state="stop"] textarea { border-color: var(--stop); }
.field[data-state="stop"] .help { color: var(--stop); }
.field[data-state="done"] input, .field[data-state="done"] select { border-color: var(--ok); }
.field[data-state="done"] .help { color: var(--ok); }
.field[data-state="parked"] input, .field[data-state="parked"] select, .field[data-state="parked"] textarea, .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }
.check input { appearance: none; width: 14px; height: 14px; margin: 0; border: 1.5px solid var(--rule-2); background: var(--paper); display: grid; place-items: center; border-radius: var(--radius); }
.check input:checked { border-color: var(--ink); background: var(--ink); }
.check input:checked::before { content: ""; width: 6px; height: 6px; background: var(--paper); }
.check input[type="radio"], .check input[type="radio"]::before { border-radius: 50%; }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check[data-style="switch"] input { width: 28px; height: 16px; border-radius: 8px; justify-items: start; }
.check[data-style="switch"] input::before { content: ""; width: 10px; height: 10px; margin-left: 2px; background: var(--rule-2); border-radius: 50%; }
.check[data-style="switch"] input:checked::before { background: var(--paper); margin-left: 14px; }
.check[data-style="switch"] input:checked { background: var(--ink); }
.input-group { display: flex; align-items: stretch; }
.input-group > * { border-radius: 0; }
.input-group > :first-child { border-radius: var(--radius) 0 0 var(--radius); } .input-group > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.input-group .affix { display: inline-flex; align-items: center; padding: 0 8px; border: var(--line) solid var(--rule); background: var(--paper-2); font: var(--fs-xs)/1 var(--label); color: var(--muted); }
.input-group .affix + input, .input-group input + .affix, .input-group input + .btn { margin-left: -1px; }
.input-group input { height: 31px; padding: 0 8px; min-width: 0; border: var(--line) solid var(--rule); background: var(--paper); font: var(--fs-sm)/1 var(--mono); flex: 1; }
fieldset.group { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--line) solid var(--rule); border-radius: var(--radius); }
fieldset.group legend { padding: 0 6px; font: 600 var(--fs-xs)/1.4 var(--label); color: var(--muted); }

/* ---------- 11e. Text extras ---------- */
blockquote { max-width: var(--measure); margin: var(--sp-4) 0; padding-left: var(--sp-4); border-left: var(--line) solid var(--rule-2); color: var(--ink-2); }
blockquote cite { display: block; margin-top: 4px; font: var(--fs-xs)/1.4 var(--label); color: var(--faint); font-style: normal; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
figure.plain { margin: var(--sp-4) 0; }
figure.plain figcaption { margin-top: 6px; font: var(--fs-xs)/1.5 var(--label); color: var(--muted); }
dialog.dialog { max-width: min(560px, calc(100vw - 32px)); padding: var(--sp-5); border: var(--line-2) solid var(--ink); background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
dialog.dialog::backdrop { background: color-mix(in srgb, var(--deep) 60%, transparent); }
dialog.dialog h3 { margin-top: 0; }
.icon { width: 1em; height: 1em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon[data-size="lg"] { width: 1.4em; height: 1.4em; }

/* ---------- 11f. Images ---------- */
/* <figure class="image" data-ratio="3/2" data-treatment="duo" data-series="1"><img …><figcaption>… <span class="provenance">…</span></figcaption></figure>
   Treatments make any image, generated or photographed, sit inside the palette:
   mono (grayscale) · duo (grayscale + series color) · halftone (paper dots) · ink (high contrast) · plain */
.image { margin: var(--sp-5) 0; }
.image .frame, .image > img, .image > picture { display: block; position: relative; width: 100%; overflow: hidden; background: var(--paper-2); border: var(--line) solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.image .frame img, .image .frame picture, .image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image[data-ratio="1"] .frame { aspect-ratio: 1; } .image[data-ratio="4/3"] .frame { aspect-ratio: 4 / 3; } .image[data-ratio="3/2"] .frame { aspect-ratio: 3 / 2; }
.image[data-ratio="16/9"] .frame { aspect-ratio: 16 / 9; } .image[data-ratio="2/1"] .frame { aspect-ratio: 2 / 1; } .image[data-ratio="card"] .frame { aspect-ratio: 1200 / 630; }
.image[data-fit="contain"] .frame img { object-fit: contain; }
.image[data-treatment="mono"] .frame img { filter: grayscale(1) contrast(1.05); }
.image[data-treatment="ink"] .frame img { filter: grayscale(1) contrast(2.2) brightness(1.05); }
.image[data-treatment="duo"] .frame img { filter: grayscale(1) contrast(1.1); }
.image[data-treatment="duo"] .frame::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: multiply; pointer-events: none; }
.image[data-treatment="duo"][data-series="1"] .frame::after { background: var(--s1); } .image[data-treatment="duo"][data-series="2"] .frame::after { background: var(--s2); }
.image[data-treatment="duo"][data-series="3"] .frame::after { background: var(--s3); } .image[data-treatment="duo"][data-series="4"] .frame::after { background: var(--s4); }
.image[data-treatment="halftone"] .frame img { filter: grayscale(1) contrast(1.2); }
.image[data-treatment="halftone"] .frame::after { content: ""; position: absolute; inset: 0; background: var(--paper); -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='0' width='2' height='2'/><rect x='2' y='2' width='2' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='0' y='4' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='2' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/></svg>") repeat; pointer-events: none; opacity: .9; }
.image[data-style="corners"] .frame { border: 0; }
.image[data-style="corners"] { position: relative; }
.image[data-style="bare"] .frame { border: 0; background: transparent; }
.image figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 8px; font: var(--fs-xs)/1.5 var(--label); color: var(--muted); }
.image figcaption b { color: var(--ink); font-weight: 600; }
.image .provenance { color: var(--faint); }
.image .provenance::before { content: "⟡ "; }
.image-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-3); }
.image-grid[data-cols="2"] { --cols: 2; } .image-grid[data-cols="4"] { --cols: 4; }
.image-grid .image { margin: 0; }
.image[data-surface] .frame { background: var(--paper); }
body[data-texture] { position: relative; }
body[data-texture]::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--rule); opacity: .5; pointer-events: none; }
body[data-texture="dots"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='1'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='1'/></svg>") repeat; }
body[data-texture="grid"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 0 H0 V24' fill='none' stroke='%2523000' stroke-width='1'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 0 H0 V24' fill='none' stroke='%2523000' stroke-width='1'/></svg>") repeat; }
body[data-texture="dither"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/></svg>") repeat; }
body[data-texture="hatch"]::before { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M-2 10 L10 -2 M-2 2 L2 -2 M6 10 L10 6' stroke='%2523000' stroke-width='1.4'/></svg>") repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M-2 10 L10 -2 M-2 2 L2 -2 M6 10 L10 6' stroke='%2523000' stroke-width='1.4'/></svg>") repeat; opacity: .25; }

/* ---------- 12. Spec-page helpers ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.swatch { border: var(--line) solid var(--rule); border-radius: var(--radius); }
.swatch i { display: block; height: 44px; }
.swatch span { display: block; padding: 6px 8px; font: var(--fs-xs)/1.4 var(--label); color: var(--muted); }
.swatch span b { display: block; color: var(--ink); font-weight: 600; }
.demo { padding: var(--sp-4) 0; } .demo + .demo { border-top: 1px dashed var(--rule); }
.demo-label { display: block; margin-bottom: var(--sp-3); font: var(--fs-xs)/1.4 var(--label); color: var(--faint); }
.demo-label b { color: var(--ink); font-weight: 600; }
.twin { margin-top: var(--sp-3); padding: 8px 10px; border: 1px dashed var(--rule-2); font: var(--fs-xs)/1.5 var(--label); color: var(--muted); white-space: pre-wrap; }
.twin::before { content: "plain-text twin"; display: block; margin-bottom: 4px; color: var(--faint); font-size: 10px; }

/* ---------- 13. Themes ---------- */
[data-theme="forest"] { --paper: #f4f6f2; --paper-2: #eaeee6; --paper-3: #dfe4da; --ink: #142018; --ink-2: #33423a; --muted: #5f6b63; --faint: #8f9a92; --rule: #d6dcd3; --rule-2: #aeb8aa; --accent: #0b6b53; --accent-wash: #e2f1ea; --deep: #1f2d25; }
[data-theme="parchment"] { --paper: #f3f0e6; --paper-2: #ebe7da; --paper-3: #e0dbcb; --ink: #171a15; --ink-2: #3a3d36; --muted: #5e6259; --faint: #8e9187; --rule: #d2cdbd; --rule-2: #b3ad9a; --accent: #274c3a; --accent-wash: #e4ebe2; --open: #a96512; --open-wash: #f0e2c3; --deep: #2c2822; }
[data-theme="slate"] { --paper: #f5f6f8; --paper-2: #eceef2; --paper-3: #dfe3e9; --ink: #14202e; --ink-2: #33404f; --muted: #5f6b7a; --faint: #8f99a6; --rule: #d8dde4; --rule-2: #b2bac5; --accent: #0550ae; --accent-wash: #e6eefb; --deep: #1d2732; }
[data-theme="signal"] { --paper: #fbfbf9; --paper-2: #f1f1ec; --paper-3: #e6e6df; --ink: #111111; --ink-2: #333330; --muted: #63635c; --faint: #92928a; --rule: #dadad2; --rule-2: #b9b9b0; --accent: #c8102e; --accent-wash: #fbe6e9; --deep: #2b2b28; }
[data-theme], [data-skin] { background: var(--paper); color: var(--ink); font-family: var(--sans); }

/* ---------- 14. Responsive, print, motion ---------- */
.show-md, .show-sm { display: none !important; }
@media (max-width: 880px) {
  .show-md { display: initial !important; }
  :root { --register: 88px; }
  .row > .end, .register-head > .end { grid-column: 2; justify-content: flex-start; margin-top: -2px; }
  .split, .two { grid-template-columns: 1fr; }
  .cols-2, .cols-3 { columns: 1; }
  .controls[data-style="filters"] { grid-template-columns: 1fr 1fr; }
  .topbar { flex-wrap: wrap; gap: var(--sp-3); padding: 8px 0; }
  .nav-utility { border-left: 0; padding-left: 0; }
  .topbar:has(.menu-toggle) .nav, .topbar:has(.menu-toggle) .nav-utility { display: none; width: 100%; }
  .topbar:has(.menu-toggle:checked) .nav, .topbar:has(.menu-toggle:checked) .nav-utility { display: flex; flex-wrap: wrap; }
  .menu-label { display: inline-flex; }
  .grid[data-cols="3"], .grid[data-cols="4"] { --cols: 2; }
  .sidebar, .sidebar[data-style="right"] { grid-template-columns: 1fr; }
  .image-grid, .image-grid[data-cols="4"] { --cols: 2; }
  .hide-md { display: none !important; }
}
@media (max-width: 600px) {
  .show-sm { display: initial !important; }
  body { font-size: 13.5px; }
  .grid, .grid[data-cols] { --cols: 1; }
  .image-grid, .image-grid[data-cols] { --cols: 1; }
  .hide-sm { display: none !important; }
  .row, .register-head, .statement, .count, .noted, .bar { grid-template-columns: 1fr; gap: 3px; }
  .register[data-kind="log"] .row, .register[data-kind="edges"] .row, .register[data-kind="theorems"] .row[data-style="formula"] { grid-template-columns: 1fr; }
  .register[data-kind="relations"] .row { grid-template-columns: 22px minmax(0,1fr); }
  .register[data-kind="relations"] .row > .id { grid-column: 1 / -1; }
  .row > .id { padding-top: 0; }
  .receipt { grid-template-columns: 1fr; }
  .receipt dt { border-bottom: 0; padding-bottom: 0; }
  .numbers { grid-template-columns: 1fr 1fr; } .number { border-right: 0; }
  .numbers[data-style="flow"] .number + .number::before { content: none; }
  .family { overflow-x: auto; scrollbar-width: none; } .family ul { gap: 12px; white-space: nowrap; } .family li { flex: none; } .family > span { display: none; }
  h1 { max-width: none; }
  .share-preview { width: 100%; height: auto; aspect-ratio: 1200 / 630; }
  .share-preview .share-card { transform: scale(calc((100vw - 32px) / 1200)); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { transition: none !important; animation: none !important; } }
@media print { .family, .nav, .nav-utility, .actions { display: none; } body { background: #fff; } }