/* ==========================================================================
   Shamit / S-k404 — datasheet layout
   Type: Archivo (variable width) for text, JetBrains Mono for labels & data.
   Palette: cool instrument grey + one accent, oscilloscope CH1 yellow.
   ========================================================================== */

/* Self-hosted (moved off the Google Fonts CDN — one less external dependency, and it's the same fix as
   the font-swap CLS work, since a local variable file loads faster and more predictably than a
   cross-origin stylesheet). Licensed under the SIL Open Font License; see /fonts/*-OFL.txt. Only the
   latin and latin-ext subsets are kept — the other ~7 regional subsets Google serves by default aren't
   needed for this site's content. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #e4e7e9;
  --paper: #eef0f1;
  --ink: #111518;
  --ink-2: #4a5258;
  --rule: #aeb6bc;
  --rule-soft: #cdd3d7;
  --dot: #c3c9cd;
  --accent: #f5c400;
  --accent-ink: #111518;
  --accent-text: #6b5400;
  --focus: #111518;

  /* Corner rose watermark only. Muted on purpose: the sheet is grey + one yellow. */
  --rose: #b8456b;
  --leaf: #4a7d55;

  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rail-w: 13.5rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 58rem;
  /* One vertical step for the whole sheet: the space on either side of every rule, and around every cat. */
  --block-pad: clamp(3rem, 7vw, 5rem);
  --cat-caption: 0.75rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1215;
    --paper: #151a1e;
    --ink: #dde2e5;
    --ink-2: #a1aab1;
    --rule: #39434a;
    --rule-soft: #232b31;
    --dot: #1e252a;
    --accent: #f5c400;
    --accent-ink: #0e1215;
    --accent-text: #f5c400;
    --focus: #f5c400;
    --rose: #d96a8e;
    --leaf: #5f9c6d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1215;
  --paper: #151a1e;
  --ink: #dde2e5;
  --ink-2: #a1aab1;
  --rule: #39434a;
  --rule-soft: #232b31;
  --dot: #1e252a;
  --accent: #f5c400;
  --accent-ink: #0e1215;
  --accent-text: #f5c400;
  --focus: #f5c400;
  --rose: #d96a8e;
  --leaf: #5f9c6d;
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
code {
  font-family: var(--mono);
  font-size: 0.82em;
  padding: 0.05em 0.3em;
  background: var(--rule-soft);
}
strong { font-weight: 650; }

.mono {
  font-family: var(--mono);
}
/* JetBrains Mono ships code ligatures (-> != == --). Keep labels, CLI flags and ASCII art literal. */
code, .mono, .skip, .chip-id, .pins a, .theme, .diagram svg, .specs th, .jack { font-variant-ligatures: none; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 0.9rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

.arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 160ms ease;
}
a:hover .arrow, a:focus-visible .arrow { transform: translate(2px, -2px); }

/* ---------- Sheet: rail + main ---------- */

.sheet {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* Pin-out rail */
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2rem 1.25rem 1.5rem 1.5rem;
  border-right: 1px solid var(--rule);
  background: var(--bg);
}

/* Visual order: chip, documents, sheets, then the scroll meter fills what is left. dither.js inserts the meter after
   the first nav, which is the document list, so it is placed by `order` rather than by its DOM position. */
.rail > .chip { order: 0; }
.rail > .docs { order: 1; }
.rail > nav[aria-label="Sheets"] { order: 2; }
.rail > .dither-meter { order: 3; }
.rail > .theme { order: 4; }
.docs::before, .rail nav[aria-label="Sheets"]::before {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.docs::before { content: "Documents"; }
.rail nav[aria-label="Sheets"]::before { content: "Sheets"; }

.chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.chip svg { width: 2.25rem; height: 2.25rem; color: var(--ink); }
.mark-s { stroke: var(--accent-text); }
.chip-id {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Document switcher: the other sub-sites, between the chip and the sheet pins. Hidden in the phone header, where
   the footer map carries the same links. */
.docs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.docs a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-left: -0.4rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.doc-no { flex: none; width: 4.2rem; font-size: 0.68rem; }
.docs a:hover { color: var(--ink); border-color: var(--rule); }
.docs a[aria-current="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--ink); font-weight: 600; }

.pins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.pins a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* The pin lead: a short trace running out of the package edge. */
.pins a::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 50%;
  width: 1.5rem;
  border-top: 1px solid var(--rule);
  transition: border-color 160ms ease;
}
.pin-no {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 1.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.7rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.pins a:hover { color: var(--ink); }
.pins a:hover .pin-no { border-color: var(--ink); }
.pins a[aria-current="page"] { color: var(--ink); }
.pins a[aria-current="page"]::before { border-color: var(--ink); border-top-width: 2px; }
.pins a[aria-current="page"] .pin-no {
  background: var(--accent);
  border-color: var(--ink);
  color: var(--accent-ink);
  font-weight: 600;
}

/* Rail links read as links: full-strength text, a trailing arrow, and a fill and underline on hover. */
.pins a { color: var(--ink); padding: 0.35rem 0.5rem 0.35rem 0; }
.pins a::after { content: "\2192"; margin-left: auto; color: var(--ink-2); transition: transform 160ms ease; }
.pins a[aria-current="page"]::after { content: none; }
.pins a:hover { background: var(--paper); }
.pins a:hover::after { transform: translateX(3px); color: var(--ink); }
.pins a:hover .pin-name, .docs a:hover .doc-name {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.docs a { color: var(--ink); }
.docs a .doc-no { color: var(--ink-2); }
.docs a[data-xdoc]::after { content: "\2197"; margin-left: auto; color: var(--ink-2); }
.docs a[data-xdoc]:hover { background: var(--paper); border-color: var(--ink); }
.docs a[aria-current="true"] .doc-no { color: var(--accent-ink); }

/* Theme toggle */
.theme {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.theme:hover { color: var(--ink); }
.theme-track {
  position: relative;
  width: 2rem;
  height: 1rem;
  border: 1px solid currentColor;
  flex: none;
}
.theme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--ink);
  transition: transform 180ms ease;
}
:root[data-theme="dark"] .theme-knob { transform: translateX(1rem); background: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-knob { transform: translateX(1rem); background: var(--accent); }
}

/* Main column */
main {
  padding: 0 var(--gutter);
  max-width: calc(var(--measure) + 2 * var(--gutter));
  width: 100%;
}

/* ---------- 00 Title block ---------- */

.title {
  padding: 0 0 clamp(3rem, 8vw, 5.5rem);
}

.docline {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.name {
  margin-top: clamp(2.5rem, 9vw, 5.5rem);
  font-size: clamp(4.25rem, 15vw, 10.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.035em;
  line-height: 0.82;
  margin-left: -0.05em;
}

.handle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-top: 1.5rem;
  font-size: clamp(0.78rem, 1.6vw, 0.9rem);
  letter-spacing: 0.02em;
}
.tag {
  padding: 0.2rem 0.55rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.lede {
  margin-top: 2rem;
  max-width: 38rem;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.45;
  font-variation-settings: "wdth" 96;
  letter-spacing: -0.005em;
}

.titleblock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 3rem 0 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.titleblock > div {
  padding: 0.7rem 0.85rem 0.8rem;
  border-left: 1px solid var(--rule);
}
.titleblock > div:first-child { border-left: 0; }
.titleblock dt {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.titleblock dd {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  text-wrap: balance;
}

/* ---------- Blocks ---------- */

.block {
  padding: var(--block-pad) 0;
  border-top: 1px solid var(--ink);
}

.block-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.block-no {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--ink);
  transform: translateY(-0.35em);
}
.block-head h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 750;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em;
}

/* 01 About */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.prose p + p { margin-top: 1rem; }
.prose { max-width: 36rem; }

.features {
  padding: 1.1rem 1.2rem 1.25rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  align-self: start;
}
.features h3 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.features ul {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.45;
}
.features li {
  position: relative;
  padding-left: 1.1rem;
}
.features li + li { margin-top: 0.6rem; }
.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent);
  outline: 1px solid var(--ink);
}

/* 02 Work: each project is a "part" on the sheet */
.part {
  position: relative;
  padding: 1.75rem 0 2.25rem;
  border-top: 1px dashed var(--rule);
}
.part:first-of-type { border-top: 0; padding-top: 0; }
.part + .part { margin-top: 1.5rem; }

.part-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.6rem;
  align-items: baseline;
}
.part-id > :not(.refdes) { grid-column: 2; }

.refdes {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.4rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 600;
  align-self: start;
}
.part-id h3 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.015em;
  align-self: center;
}
.part-sum { max-width: 40rem; color: var(--ink); }

.ext {
  justify-self: start;
  font-size: 0.8rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
}
.ext:hover { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* Block diagrams */
.diagram {
  margin: 1.75rem 0 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.diagram-scroll {
  overflow-x: auto;
  padding: 1rem 0.75rem 0.5rem;
  scrollbar-width: thin;
}
.diagram svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
  font-family: var(--mono);
}
.diagram figcaption {
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.node rect { fill: var(--bg); stroke: var(--ink); stroke-width: 1.25; }
.node text {
  fill: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  text-anchor: middle;
}
.node text.sub { fill: var(--ink-2); font-size: 7.5px; font-weight: 400; }
.node.hot rect { fill: var(--accent); }
.node.hot text, .node.hot text.sub { fill: var(--accent-ink); }
.wire path { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.wire.signal path {
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-dasharray: 5 14;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}
.joint { fill: var(--ink-2); }
.note { fill: var(--accent-text); font-size: 9px; text-anchor: middle; letter-spacing: 0.08em; }
.note.end { text-anchor: end; }

.part.is-live .wire.signal path {
  opacity: 1;
  animation: signal 1.4s linear infinite;
}
@keyframes signal { to { stroke-dashoffset: -19; } }

/* Characteristics table */
.specs {
  width: 100%;
  margin-top: 1.75rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.5;
}
.specs caption {
  text-align: left;
  padding-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.specs tr { border-top: 1px solid var(--rule-soft); }
.specs tr:last-child { border-bottom: 1px solid var(--rule-soft); }
.specs th, .specs td { padding: 0.65rem 0; vertical-align: baseline; text-align: left; }
.specs th {
  width: 9.5rem;
  padding-right: 1.25rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}
.tags li {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  color: var(--ink-2);
}

.tags li:has(> a) { padding: 0; }
.tags a { display: block; padding: 0.2rem 0.5rem; color: var(--ink); text-decoration: none; }
.tags li:has(> a):hover { background: var(--accent); border-color: var(--ink); }
.tags li:has(> a):hover a { color: var(--accent-ink); }
.tags .tag-by { border-color: var(--ink); color: var(--ink); }
.tags .tag-pick { background: var(--accent); border-color: var(--ink); color: var(--accent-ink); font-weight: 600; }

.more {
  margin-top: 1rem;
  font-size: 0.85rem;
}
.more a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* 03 Stack: bill of materials */
.bom-wrap { overflow-x: auto; }
.bom {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.bom thead th {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
}
.bom td, .bom tbody th {
  padding: 0.85rem 0.9rem;
  border-top: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: baseline;
}
.bom tbody tr:first-child > * { border-top: 0; }
.bom td.mono { width: 4rem; font-size: 0.75rem; font-weight: 600; color: var(--accent-text); }
.bom tbody th { width: 11rem; font-weight: 650; font-variation-settings: "wdth" 104; }

/* 04 Contact */
.connector {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 1.25rem;
  align-items: center;
}
.connector > :not(.refdes) { grid-column: 2; }
.connector p { font-size: 1.15rem; max-width: 34rem; }

.jack {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.2rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.jack svg { width: 1.3rem; height: 1.3rem; fill: currentColor; flex: none; }
.jack:hover { background: var(--accent); color: var(--accent-ink); }
.jack:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

/* Footer */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-left: var(--rail-w);
  padding: 1.5rem var(--gutter) 2rem;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  border-top: 1px solid var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Footer rule should line up with the main column, not the rail. */
@media (min-width: 821px) {
  .foot { border-top: 0; background: linear-gradient(var(--ink), var(--ink)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px; }
}

.foot-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.foot-doc { display: inline-block; min-width: 5.5rem; font-weight: 600; color: var(--ink); }
.foot-map a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.25em; }
.foot-map a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titleblock > div:nth-child(3) { border-left: 0; }
  .titleblock > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .about { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  :root { --rail-w: 0px; }
  html { scroll-padding-top: 4.5rem; }

  .sheet { grid-template-columns: minmax(0, 1fr); }

  .rail {
    z-index: 5;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .chip svg { width: 1.9rem; height: 1.9rem; }
  .chip-id { display: none; }

  .rail nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .rail nav::-webkit-scrollbar { display: none; }
  .pins { grid-auto-flow: column; justify-content: start; gap: 0.9rem; }
  .pins a { gap: 0.4rem; }
  .pins a::before { display: none; }
  .pin-no { width: 1.7rem; height: 1.35rem; font-size: 0.62rem; }
  .pin-name { font-size: 0.66rem; }

  .docs { display: none; }
  .rail nav[aria-label="Sheets"]::before { display: none; }
  .theme { margin-top: 0; }
  .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  main { padding: 0 1rem; }
  .docline { margin-top: 1.25rem; }
  .foot { margin-left: 0; padding: 1.25rem 1rem 1.75rem; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .pin-no { display: none; }
  .pins { gap: 0.25rem; }
  .pins a { padding: 0.3rem 0.45rem; border: 1px solid transparent; }
  .pins a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--ink); }

  .titleblock { grid-template-columns: minmax(0, 1fr); }
  .titleblock > div { border-left: 0 !important; }
  .titleblock > div + div { border-top: 1px solid var(--rule); }

  .part-id, .connector { grid-template-columns: minmax(0, 1fr); }
  .part-id > :not(.refdes), .connector > :not(.refdes) { grid-column: 1; }
  .refdes { justify-self: start; min-width: 2.2rem; height: 2.2rem; }

  .specs tr { display: block; padding: 0.6rem 0; }
  .specs th, .specs td { display: block; width: auto; padding: 0; }
  .specs th { margin-bottom: 0.25rem; }

  .bom thead { display: none; }
  .bom tr { display: grid; grid-template-columns: 3rem minmax(0, 1fr); border-top: 1px solid var(--rule-soft); }
  .bom tbody tr:first-child { border-top: 0; }
  .bom td, .bom tbody th { border-top: 0; width: auto !important; }
  .bom td.mono { grid-row: span 2; }
  .bom tbody th { padding-bottom: 0.15rem; }
  .bom td:last-child { padding-top: 0; grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .part.is-live .wire.signal path { opacity: 0; }
}

@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --paper: #fff; --ink: #000; --ink-2: #333; --rule: #999; --rule-soft: #ccc; --accent-text: #000; color-scheme: light;
  }
  body { background: #fff; }
  .rail, .skip, .theme { display: none; }
  .sheet { display: block; }
  .foot { margin-left: 0; }
  .block { break-inside: avoid-page; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.notfound { margin: 0 auto; padding: 2rem var(--gutter); }
.notfound .more { margin-top: 2.5rem; }

/* ---------- Sub-pages ---------- */

.pagehead { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.pagehead .lede { margin-top: 1.25rem; }
.pagetitle {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.pagehead .part-id .pagetitle { align-self: center; font-size: clamp(2.1rem, 5.2vw, 3.9rem); font-variation-settings: "wdth" 108; }
.pagehead .part-id .lede { margin-top: 0.5rem; }
.pagehead .refdes { min-width: 3rem; height: 3rem; font-size: 1rem; align-self: center; }

.crumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.crumbs a { text-decoration-color: var(--rule); text-underline-offset: 0.3em; }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.crumbs + .pagehead { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.part-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
}
.usage {
  padding: 0.35rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

/* Home: roadmap */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.roadmap li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule-soft);
}
.roadmap li:first-child { border-top: 0; }
.rm-state {
  justify-self: start;
  padding: 0.15rem 0.45rem;
  border: 1px dashed var(--ink-2);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Home: sheet index (links to the sub-sites) */
.sheets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.sheets a {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 12rem) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color 140ms ease, padding 140ms ease;
}
.sheets a:hover { background: var(--accent); color: var(--accent-ink); padding-left: 0.75rem; }
.sheets a:hover .sheets-no, .sheets a:hover .sheets-desc { color: var(--accent-ink); }
.sheets-no { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.sheets-name { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 700; font-variation-settings: "wdth" 110; letter-spacing: -0.01em; }
.sheets-desc { color: var(--ink-2); font-size: 0.95rem; }

/* Projects index */
.block:has(> .partlist) { border-top: 1px solid var(--ink); }
.partlist { list-style: none; margin: 0; padding: 0; }
.partrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 10rem;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-top: 1px dashed var(--rule);
}
.partrow:first-child { border-top: 0; padding-top: 0; }
/* A row with no key column (the Reference's designs) drops the empty 10rem track. :where() keeps the specificity
   at .partrow, so the narrower breakpoints below still win. */
.partrow:where(:not(:has(.partrow-key))) { grid-template-columns: auto minmax(0, 1fr); }
.partrow h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.015em;
}
.partrow h2 a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
}
.partrow h2 a:hover { background: var(--accent); color: var(--accent-ink); }
.partrow-body p { margin-top: 0.5rem; max-width: 36rem; }
.partrow-key {
  display: grid;
  align-content: start;
  justify-items: end;
  text-align: right;
  border-left: 1px solid var(--rule);
  padding-left: 1rem;
}
.key-val { font-size: 2.2rem; font-weight: 800; font-variation-settings: "wdth" 120; line-height: 1; }
.key-lbl { margin-top: 0.4rem; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }

/* Project pages */
.block .part { padding: 0; border: 0; }
.block .part .diagram { margin-top: 0; }
.bench caption {
  caption-side: bottom;
  padding: 0.6rem 0.9rem;
  text-align: left;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.bench tbody th { width: auto; font-weight: 500; }
.bench td { white-space: nowrap; font-variant-numeric: tabular-nums; }

.pager, .sheet-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--ink);
  font-size: 0.85rem;
}
.pager a, .sheet-end a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.sheet-end-docs a { margin-left: 0.6rem; }

@media (max-width: 720px) {
  .sheets a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.25rem; }
  .sheets-no { grid-column: 1 / -1; }
  .sheets-desc { grid-column: 1; }
  .sheets .arrow { grid-row: 2; grid-column: 2; }
  .partrow { grid-template-columns: auto minmax(0, 1fr); }
  .partrow-key { grid-column: 2; justify-items: start; text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-soft); padding-top: 0.75rem; }
  .roadmap li { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
}
@media (max-width: 560px) {
  .partrow { grid-template-columns: minmax(0, 1fr); }
  .partrow-key { grid-column: 1; }
  .bench thead { display: table-header-group; }
  .bench tr { display: table-row; }
  .bench td, .bench tbody th { display: table-cell; padding: 0.55rem 0.3rem; font-size: 0.85rem; }
  .bench thead th { padding: 0.5rem 0.3rem; letter-spacing: 0.03em; }
  .bench tbody tr:first-child > * { border-top: 0; }
  .bench td:last-child { padding-top: 0.6rem; }
}

.roadmap-intro { max-width: 38rem; margin-bottom: 1.5rem; color: var(--ink-2); }
.roadmap h3 { font-size: 1.1rem; font-weight: 700; font-variation-settings: "wdth" 106; }
.roadmap li p { margin-top: 0.25rem; max-width: 38rem; }
.roadmap li a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.rm-state.is-on { border-style: solid; border-color: var(--ink); background: var(--accent); color: var(--accent-ink); }

/* ---------- Projects: "On the bench" progress pies ---------- */
.pie {
  --p: 0%;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 var(--p), var(--paper) var(--p) 100%);
  box-shadow: inset 0 0 0 3px var(--paper);
}
.pie.is-queued { --p: 10%; }
.pie.is-planning { --p: 25%; }
.pie.is-building { --p: 50%; }
.pie.is-verifying { --p: 80%; }
.pie.is-done { --p: 100%; }
.partrow-next { display: flex; align-items: baseline; margin-top: 0.4rem !important; font-size: 0.85rem; color: var(--ink-2); }
.partrow-next span { flex: none; margin-right: 0.4rem; padding: 0 0.3rem; border: 1px solid var(--rule); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.05em; }
@media (max-width: 720px) {
  .partrow-key:has(.pie) { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-items: center; }
  .partrow-key .pie { grid-row: span 2; width: 2.2rem; height: 2.2rem; margin: 0; }
  .partrow-key:has(.pie) .key-lbl { margin-top: 0.2rem; }
}

/* ---------- Bench and Reference: updated stamp, stage strip, directory tables, folds ---------- */
.synced { margin-top: 1rem; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.stages li { display: inline-flex; align-items: center; gap: 0.4rem; }
.stages .pie { width: 1.1rem; height: 1.1rem; margin: 0; box-shadow: inset 0 0 0 2px var(--paper); }
.stage-count { font-weight: 700; color: var(--ink); }

/* "On this sheet": anchors to a long sheet's blocks, under the page head. */
.jump {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.jump ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.jump a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.jump a:hover { background: var(--accent); color: var(--accent-ink); }

/* Directory table: the .bom look, for lists too long for a bill of materials. */
.dir-wrap { overflow-x: auto; border: 1px solid var(--ink); background: var(--paper); }
.dir { width: 100%; border-collapse: collapse; }
.dir thead th {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
}
.dir td, .dir tbody th {
  padding: 0.85rem 0.9rem;
  border-top: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: baseline;
  font-size: 1rem;
}
.dir tbody tr:first-child > * { border-top: 0; }
.dir td.dir-ref { width: 4rem; font-size: 0.85rem; font-weight: 600; color: var(--accent-text); }
.dir tbody th { font-weight: 400; }
.dir-name { display: block; font-weight: 650; font-variation-settings: "wdth" 104; }
.dir-sub { display: block; margin-top: 0.2rem; font-size: 0.92rem; color: var(--ink-2); }
.dir .ext, .partrow h2 .ext { font-size: inherit; color: var(--ink); text-decoration-color: var(--accent); }

/* A heading row that starts a group of rows (a part category, say), and a list of links inside a cell. */
.dir tr.dir-group th {
  padding: 0.55rem 0.9rem;
  background: var(--bg);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dir tbody tr.dir-group:first-child th { border-top: 0; }
.dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.dir-list a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.dir-list a:hover { background: var(--accent); color: var(--accent-ink); }
.dir-list .mono { margin-right: 0.35rem; font-size: 0.8rem; color: var(--accent-text); }

/* Collapsible group around a directory table. */
.fold { border: 1px solid var(--ink); background: var(--paper); }
.fold + .fold { margin-top: 1rem; }
.fold .dir-wrap { border: 0; }
.fold > summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "+"; font-weight: 700; color: var(--accent-text); }
.fold[open] > summary { border-bottom: 1px solid var(--ink); }
.fold[open] > summary::before { content: "\2212"; }
.fold > summary:hover { background: var(--accent); color: var(--accent-ink); }
.fold > summary:hover::before { color: var(--accent-ink); }
.fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

@media (max-width: 560px) {
  /* Each row becomes a small card: the ref on the left, name and labelled cells stacked beside it. */
  .dir thead { display: none; }
  .dir tr { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); padding: 0.75rem 0; border-top: 1px solid var(--rule-soft); }
  .dir tbody tr:first-child { border-top: 0; }
  .dir td, .dir tbody th { grid-column: 2; padding: 0.1rem 0.9rem 0.1rem 0; border-top: 0; }
  .dir td.dir-ref { grid-column: 1; grid-row: 1 / span 8; width: auto; padding: 0.1rem 0 0.1rem 0.9rem; }
  .dir td[data-label]::before { content: attr(data-label) ": "; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
  .dir td:empty { display: none; }
  .dir tr.dir-group { display: block; padding: 0; border-top: 0; }
  .dir tr.dir-group th { display: block; padding: 0.5rem 0.9rem; }
}

/* ---------- ASCII cats ---------- */
/* Every big cat sits in the same interval as a section: one --block-pad above its dashed rule (the section
   before it supplies that), one between the rule and the art, and one between the caption and whatever
   comes next. The caption always sits --cat-caption under the art. */
.cat {
  margin: 0;
  padding: var(--block-pad) 0;
  border-top: 1px dashed var(--rule);
  display: grid;
  justify-items: center;
  gap: var(--cat-caption);
}
.cat-stage { display: grid; }
.cat-frame {
  grid-area: 1 / 1;
  margin: 0;
  min-width: 20ch;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--ink);
  opacity: 0;
  animation: cat-frame 2.4s steps(1, end) infinite;
}
.cat-frame:nth-child(1) { opacity: 1; }
.cat-frame:nth-child(2) { animation-delay: 0.8s; }
.cat-frame:nth-child(3) { animation-delay: 1.6s; }
@keyframes cat-frame { 0% { opacity: 1; } 33.34% { opacity: 0; } 100% { opacity: 0; } }
.cat-yarn { color: var(--accent-text); font-weight: 700; }
.cat figcaption { font-size: 0.65rem; letter-spacing: 0.04em; color: var(--ink-2); }
.cat-frame { text-transform: none; letter-spacing: 0; }
/* Footer cats: small, left-aligned, on their own line, --cat-caption above the footer text like a caption. */
.cat-mini { flex-basis: 100%; padding: 0; border: 0; justify-items: start; }
.foot .cat-mini { margin-bottom: calc(var(--cat-caption) - 0.5rem); }
.cat-mini .cat-frame { min-width: 0; font-size: 0.66rem; line-height: 1.15; color: var(--ink-2); }
.notfound .cat { margin-top: var(--block-pad); justify-items: start; }
.notfound .cat + .more { margin-top: 0; }

/* ---------- Touch and narrow screens ---------- */
/* Standalone links (breadcrumb, source link, pager) were 18px tall; give them a 24px+ hit area. */
@media (max-width: 820px), (pointer: coarse) {
  .crumbs a, .ext, .pager a, .sheet-end a { padding-block: 0.4rem; }
}

/* ---------- Sheet separator (between chained sheets) ---------- */
/* chain.js clones #sheet-sep between two sheets. On a page nobody scrolled far enough to chain, it never appears. */
.sheet-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cat-caption);
  padding: var(--block-pad) 0;
  border-top: 1px solid var(--ink);
}
.sheet-sep + .sheet-part > .docline { margin-top: 0; }
.sheet-sep-label {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sheet-sep-label::before { content: "↓ "; }

/* ---------- Dither layer ---------- */
/* Painted by dither.js. Every canvas is tiny: one canvas pixel is one dither cell, scaled up with
   nearest-neighbour so the dots stay crisp instead of smearing. Without the script none of this exists
   and the page is unchanged. */
.dither-bg, .dither-hero, .dither-rule canvas, .dither-meter canvas, .dither-boot canvas {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.dither-bg, .dither-hero, .dither-rule, .dither-meter, .dither-boot, .dither-rose { pointer-events: none; user-select: none; }

/* Page backdrop: fixed and behind everything; faint under the text column, stronger in the margins and along the bottom edge. */
.dither-bg { position: fixed; left: 0; top: 0; z-index: -1; opacity: 0; transition: opacity 0.9s ease; }
.dither-bg.on { opacity: 1; }

/* Hero field behind the page title. The title gets a halo in the page colour so it reads as a cut-out. */
.title, .pagehead { display: flow-root; }
.has-dither-hero { position: relative; isolation: isolate; }
.dither-hero { position: absolute; left: 0; z-index: -1; }
.has-dither-hero .name, .has-dither-hero .pagetitle { -webkit-text-stroke: 0.1em var(--bg); paint-order: stroke fill; }

/* Soft strip under each section rule, fading in the first time it scrolls into view. */
.has-dither-rule { position: relative; }
.dither-rule { position: absolute; left: 0; right: 0; top: 1px; height: 20px; overflow: hidden; }
.dither-rule canvas { position: absolute; left: 0; top: 0; }

/* Corner rose: a small watermark in the empty margin, never over the text column. */
.dither-rose { position: fixed; right: 1.5rem; bottom: 1.25rem; z-index: -1; }

/* Below the rail breakpoint dither.js moves the rose into the footer (no corner is free of content on
   a phone): it takes a column to the right of the footer text (which already holds the unrelated ASCII
   cat-mini + the two text lines), stem grounded on the footer's last line. */
@media (max-width: 820px) {
  .foot:has(.dither-rose) {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
  }
  .foot:has(.dither-rose) > * { grid-column: 1; }
  .foot .dither-rose { position: static; z-index: auto; grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}

/* Scroll meter: an ASCII cat walking down a track to a mouse, a column in the rail on desktop, one line
   under the top bar on phones. dither.js measures one character cell and fills the box with whole rows. */
.dither-meter { position: relative; flex: 1 1 auto; min-height: 7rem; max-height: 24rem; }
.dither-meter-art {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: pre;
  color: var(--ink-2);
}
.dither-meter-art .m-track { color: var(--rule); }
.dither-meter-art .m-read { color: var(--ink-2); }
.dither-meter-art .m-cat { color: var(--ink); }
.dither-meter-art .m-toy { color: var(--accent-text); }
.dither-meter-val {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .rail:has(.dither-meter) { padding-bottom: 1.55rem; }
  .dither-meter { position: absolute; left: 1rem; right: 1rem; bottom: 0.3rem; flex: none; height: 0.8rem; min-height: 0; max-height: none; overflow: hidden; }
  .dither-meter-art { line-height: 0.8rem; }
  .dither-meter-val { display: none; }
}

/* Boot veil, once per session: a soft grain dissolve. theme-init.js adds html.boot before first paint, so the
   cover is there from the first frame; dither.js plays the dissolve and drops the class, and a timer in
   theme-init.js drops it if the script never arrives. */
html.boot::before { content: ""; position: fixed; inset: 0; z-index: 900; background: var(--bg); }
.dither-boot { position: fixed; inset: 0; z-index: 901; }
.dither-boot canvas { position: absolute; left: 0; top: 0; }

@media print, (forced-colors: active) {
  .dither-bg, .dither-hero, .dither-rule, .dither-meter, .dither-boot, .dither-rose, html.boot::before { display: none; }
  .has-dither-hero .name, .has-dither-hero .pagetitle { -webkit-text-stroke: 0; }
}