/* Aura Sniffer: 1-bit night instrument. Two colours only (ink / paper), half-tones only as Bayer tiles,
   one art pixel (--u) for every sprite, frame and tile. No opacity greys, no gradients, no shadows, no blur. */
@font-face { font-family: "POHB"; src: url(/assets/fonts/PixelOperatorHB.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "PO"; src: url(/assets/fonts/PixelOperator.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "PO"; font-weight: 700; src: url(/assets/fonts/PixelOperator-Bold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Atk"; src: url(/assets/fonts/Atkinson-400.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Atk"; font-weight: 700; src: url(/assets/fonts/Atkinson-700.ttf) format("truetype"); font-display: swap; }
:root {
  --ink: #1C1B29; --paper: #E8E4D6; --u: 4px;
  --b12: url(/assets/px/b12.png); --b25: url(/assets/px/b25.png); --b50: url(/assets/px/b50.png); --b75: url(/assets/px/b75.png);
  --t25: url(/assets/px/t25.png); --t50: url(/assets/px/t50.png);
  --disp: "POHB", "PO", ui-monospace, monospace; --ui: "PO", ui-monospace, monospace; --num: "Atk", system-ui, sans-serif;
  --cur: url(/assets/px/cur-arrow.png) 0 0, default; --cur-p: url(/assets/px/cur-nose.png) 14 10, pointer;
  --wmax: 1040px;
}
@media (max-width: 600px) { :root { --u: 3px; } }
@media (max-width: 359px) { :root { --u: 2px; } }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); cursor: var(--cur); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; min-height: 100vh; font: 400 17px/1.5 var(--num); color: var(--paper); overflow-x: hidden;
  background: var(--ink) url(/assets/px/lattice.png) 0 0 / calc(12 * var(--u)) calc(12 * var(--u)); image-rendering: pixelated;
  -webkit-font-smoothing: none; font-smooth: never; }
::selection { background: var(--paper); color: var(--ink); }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
a, button, [role=button], summary, label[for], .ca[data-ca] { cursor: var(--cur-p); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
:focus-visible { outline: var(--u) solid var(--paper); outline-offset: var(--u); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.px { display: block; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); max-width: none; }
.disp { font-family: var(--disp); font-weight: 400; letter-spacing: 0; }
.lbl { font: 400 16px/1 var(--ui); letter-spacing: 0; margin: 0; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- buttons: early-Mac double frame */
.btn { display: inline-flex; border: var(--u) solid var(--paper); padding: var(--u); background: var(--ink); color: var(--paper); text-decoration: none; vertical-align: middle; user-select: none; }
.btn .bi { display: flex; align-items: center; justify-content: center; border: var(--u) solid var(--paper); padding: calc(1.5 * var(--u)) calc(4 * var(--u)); min-height: calc(8 * var(--u)); width: 100%; }
.btn .bl { display: inline-flex; align-items: center; gap: 8px; font: 400 16px/1 var(--disp); padding: 2px var(--u); background: var(--ink); white-space: nowrap; }
.btn .bl svg { width: 16px; height: 16px; display: block; }
.btn-lg .bl svg { width: 28px; height: 28px; }
.btn:hover .bi { background: var(--b50) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.btn:active .bi, .btn.on .bi { background: var(--paper); }
.btn:active .bl, .btn.on .bl { background: var(--paper); color: var(--ink); }
.btn[disabled], .btn.wait { cursor: progress; }
.btn[disabled] .bi, .btn.wait .bi { background: var(--b25) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.btn-lg .bl { font-size: 32px; }
.btn-lg .bi { padding: calc(2 * var(--u)) calc(6 * var(--u)); }

/* ---------------------------------------------------------------- CA */
.ca, .ca-slot { display: inline-flex; align-items: stretch; max-width: 100%; border: var(--u) solid var(--paper); background: var(--ink); text-align: left; }
.ca-k, .ca-c { font: 400 16px/1 var(--ui); display: flex; align-items: center; padding: 0 calc(2 * var(--u)); }
.ca-k { background: var(--paper); color: var(--ink); }
.ca-v { font: 400 15px/1.35 var(--num); font-variant-numeric: tabular-nums; padding: calc(1.5 * var(--u)) calc(2 * var(--u)); overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.ca-c { border-left: var(--u) solid var(--paper); }
.ca[data-ca]:hover .ca-c { background: var(--b50) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.ca.ok, .ca.ok .ca-c { background: var(--paper); color: var(--ink); }
.ca.ok .ca-k { background: var(--ink); color: var(--paper); }
.ca-pend .ca-v { font-family: var(--ui); font-size: 16px; }
.tick { font: 400 16px/1 var(--disp); border: var(--u) solid var(--paper); padding: 2px var(--u); margin-left: calc(2 * var(--u)); }

/* ---------------------------------------------------------------- menubar */
.bar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(2 * var(--u)) calc(4 * var(--u));
  padding: calc(1 * var(--u)) calc(4 * var(--u)); background: var(--ink); border-bottom: var(--u) solid var(--paper); }
.bar-brand { display: inline-flex; align-items: center; gap: calc(2 * var(--u)); text-decoration: none; }
.bar-logo { width: 64px; height: 63px; }
.bar-name { font: 400 32px/1 var(--disp); white-space: nowrap; }
.bar-nav { display: flex; gap: calc(5 * var(--u)); font: 400 16px/1 var(--ui); }
.bar-nav a { text-decoration: none; padding: calc(2 * var(--u)) var(--u); }
.bar-nav a:hover { background: var(--paper); color: var(--ink); }
.bar-act { display: flex; gap: calc(2 * var(--u)); }
.bar-ca { grid-column: 1 / -1; display: flex; justify-content: center; padding-bottom: var(--u); }
.bar-ca .ca, .bar-ca .ca-slot { font-size: 14px; }
@media (min-width: 1100px) {
  .bar { grid-template-columns: auto auto 1fr auto; }
  .bar-ca { grid-column: auto; grid-row: 1; grid-column-start: 3; justify-content: flex-end; padding: 0; }
  .bar-act { grid-column-start: 4; }
}
@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto; padding: var(--u) calc(3 * var(--u)); gap: calc(2 * var(--u)); }
  .bar-nav { display: none; }
  .bar-name { font-size: 16px; }
  .bar-logo { width: 48px; height: auto; aspect-ratio: 64 / 63; }
  .bar-act .btn .bi { padding: var(--u) calc(2 * var(--u)); }
}

/* ---------------------------------------------------------------- sheet + trail */
.sheet { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 16px calc(10 * var(--u)); }
.trail { display: block; position: absolute; left: 50%; top: 0; height: 0; width: var(--u); margin-left: calc(var(--u) / -2); z-index: 0; pointer-events: none; overflow: hidden; }
.trail-in { display: block; position: absolute; inset: 0; background: url(/assets/px/trail.png) 0 0 / var(--u) calc(3 * var(--u)); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.sheet > section, .sheet > .win { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- hero */
.hero { min-height: calc(100svh - 120px); display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(8 * var(--u)) 0 calc(10 * var(--u)); }
.hero-name { font-size: 64px; line-height: 1; margin: 0; background: var(--ink); padding: var(--u) calc(3 * var(--u)); }
.nose { position: relative; margin: calc(2 * var(--u)) 0 0; }
.nose .halo { width: calc(112 * var(--u)); height: calc(96 * var(--u)); }
.nose-tag { position: absolute; right: 0; top: calc(4 * var(--u)); border: var(--u) solid var(--paper); padding: var(--u) calc(2 * var(--u)); background: var(--ink); }
.hero-line { font: 400 32px/1.1 var(--disp); margin: calc(2 * var(--u)) 0 calc(6 * var(--u)); max-width: 24ch; background: var(--ink); padding: var(--u) calc(3 * var(--u)); }
.strip { display: flex; align-items: stretch; gap: calc(3 * var(--u)); width: min(860px, 100%); background: var(--ink); }
.strip-in { position: relative; flex: 1; display: flex; align-items: center; border: var(--u) solid var(--paper); background: var(--ink); padding: 0 calc(4 * var(--u)); min-width: 0; cursor: text; }
.strip-v { width: 100%; background: transparent; border: 0; outline: 0; color: var(--paper); font: 400 20px/1.2 var(--num); caret-color: transparent; padding: calc(4 * var(--u)) 0; min-width: 0; }
.strip-v::placeholder { color: var(--paper); font: 400 16px/1 var(--ui); opacity: 1; }
.strip-in:focus-within { outline: var(--u) solid var(--paper); outline-offset: var(--u); }
.caret { position: absolute; top: 50%; left: 0; width: calc(2 * var(--u)); height: 24px; margin-top: -12px; background: var(--paper); animation: blink 1.06s steps(1) infinite; pointer-events: none; }
.strip-in:not(:focus-within) .caret { display: none; }
@keyframes blink { 50% { visibility: hidden; } }
.strip-err { margin: calc(3 * var(--u)) 0 0; background: var(--paper); color: var(--ink); font: 400 16px/1.3 var(--ui); padding: var(--u) calc(3 * var(--u)); }
.strip-deep { margin: calc(3 * var(--u)) 0 0; font: 400 16px/1 var(--ui); display: inline-flex; gap: calc(2 * var(--u)); align-items: center; }
.hero-n { display: grid; grid-template-columns: repeat(3, auto); gap: calc(10 * var(--u)); margin: calc(8 * var(--u)) 0 0; }
.hero-n div { display: flex; flex-direction: column; gap: calc(2 * var(--u)); align-items: center; background: var(--ink); padding: var(--u) calc(2 * var(--u)); }
.hero-n dd { order: -1; }
.hero-n dd { margin: 0; font-size: 32px; line-height: 1; }
@media (max-width: 600px) {
  .hero { padding-top: calc(6 * var(--u)); min-height: 0; }
  .hero-name { font-size: 48px; }
  .hero-line { font-size: 32px; }
  .strip { flex-direction: column; }
  .strip-go { align-self: stretch; }
  .hero-n { grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--u)); width: 100%; }
  .hero-n dd { font-size: 24px; }
  .hero-n dt { font-size: 16px; line-height: 1.1; }
  .nose-tag { position: static; display: inline-block; margin-top: var(--u); }
}
@media (max-width: 359px) { .hero-name { font-size: 32px; } .hero-line { font-size: 16px; } }

/* ---------------------------------------------------------------- windows */
.win { max-width: var(--wmax); margin: calc(14 * var(--u)) auto 0; border: var(--u) solid var(--paper); background: var(--ink); }
.win-t { position: relative; display: flex; justify-content: center; align-items: center; height: calc(11 * var(--u)); border-bottom: var(--u) solid var(--paper);
  background: url(/assets/px/stripes.png) 0 0 / var(--u) calc(2 * var(--u)) content-box; padding: calc(2 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u) - 1px); }
.win-n { margin: 0; font: 400 16px/1 var(--disp); background: var(--ink); padding: var(--u) calc(4 * var(--u)); }
.win-b { padding: calc(8 * var(--u)); }
@media (max-width: 600px) { .win-b { padding: calc(4 * var(--u)); } .win { margin-top: calc(10 * var(--u)); } }

/* read: idle */
.read-ask { font: 400 32px/1.15 var(--disp); margin: 0 0 calc(8 * var(--u)); max-width: 28ch; }
.today .lbl { margin-bottom: calc(3 * var(--u)); }
.trow { display: grid; grid-template-columns: 9.5em 1fr 4em; align-items: center; gap: calc(3 * var(--u)); margin: calc(2 * var(--u)) 0; }
.trow .lbl { margin: 0; }
.trow .num { text-align: right; font-size: 18px; }
.track { position: relative; height: calc(6 * var(--u)); border: var(--u) solid var(--paper); background: var(--ink); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.pat-s { background: var(--paper); }
.pat-75 { background: var(--b75) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.pat-50 { background: var(--b50) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.pat-25 { background: var(--b25) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.pat-12 { background: var(--b12) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.pat-0 { background: var(--ink); box-shadow: inset 0 0 0 var(--u) var(--paper); }
.mark { position: absolute; top: calc(-3 * var(--u)); bottom: calc(-3 * var(--u)); width: var(--u); background: var(--paper); margin-left: calc(var(--u) / -2); }
.mark::after { content: attr(data-l); position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); font: 400 16px/1 var(--ui); white-space: nowrap; background: var(--ink); padding: 0 2px; }

/* read: sniffing */
.sniffing { display: grid; gap: calc(4 * var(--u)); }
.sniffing .disp { font-size: 32px; margin: 0; line-height: 1.1; }
.sniffing .note { margin: 0; max-width: 60ch; }

/* read: result */
.rd-head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.rd-head .ca { flex: 0 1 auto; }
.rd-meta { font: 400 16px/1 var(--ui); display: flex; gap: calc(3 * var(--u)); flex-wrap: wrap; align-items: center; }
.rd-meta a { text-decoration: none; border-bottom: var(--u) solid var(--paper); padding-bottom: 2px; }
.rd-meta a:hover { background: var(--paper); color: var(--ink); }
.rd-main { display: grid; grid-template-columns: minmax(260px, 1fr) 1.4fr; gap: calc(10 * var(--u)); align-items: start; }
@media (max-width: 860px) { .rd-main { grid-template-columns: 1fr; gap: calc(8 * var(--u)); } }
.verdict { display: grid; gap: calc(4 * var(--u)); justify-items: start; }
.stamp { display: inline-block; background: var(--paper); color: var(--ink); font: 400 16px/1 var(--disp); padding: var(--u) calc(2 * var(--u)); text-transform: uppercase; }
.v-stamp { font-size: 48px; padding: calc(2 * var(--u)) calc(4 * var(--u)); transform-origin: 50% 50%; }
.v-stamp.hit { animation: stamp .36s steps(3) both; }
@keyframes stamp { 0% { transform: scale(1.6); } 34% { transform: scale(1.25); } 67% { transform: scale(.94); } 100% { transform: scale(1); } }
.v-aura { display: flex; align-items: baseline; gap: calc(3 * var(--u)); }
.v-aura .num { font-size: 96px; line-height: .9; }
.v-aura .lbl { font-size: 32px; font-family: var(--disp); }
.v-range { margin: 0; font: 400 16px/1.3 var(--ui); }
.v-unsure { border: var(--u) solid var(--paper); padding: calc(3 * var(--u)); display: grid; gap: calc(2 * var(--u)); width: 100%; justify-items: start; }
.v-unsure p { margin: 0; }
.v-unsure ul { margin: 0; padding-left: 1.1em; }
.v-band { margin: 0; max-width: 40ch; }
.bars { display: grid; gap: calc(5 * var(--u)); }
.bar5 { display: grid; grid-template-columns: 1fr auto; gap: calc(2 * var(--u)) calc(3 * var(--u)); align-items: end; }
.bar5 .lbl { line-height: 1.1; }
.bar5 .num { font-size: 22px; line-height: 1; text-align: right; }
.bar5 .track { grid-column: 1 / -1; }
.bar5 .why { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.35; }
.bar5.has-mark .why { padding-top: 16px; }
.bar5 .na { font: 400 16px/1 var(--ui); }
.holders { margin-top: calc(10 * var(--u)); }
.hstrip { display: flex; height: calc(12 * var(--u)); border: var(--u) solid var(--paper); gap: var(--u); background: var(--ink); margin: calc(3 * var(--u)) 0; }
.hseg { min-width: var(--u); height: 100%; }
.hseg.grow { animation: grow .5s steps(6) both; transform-origin: 0 50%; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ctab { width: 100%; border-collapse: collapse; margin-top: calc(4 * var(--u)); font-size: 15px; }
.ctab th { font: 400 16px/1 var(--ui); text-align: left; padding: calc(2 * var(--u)) var(--u); border-bottom: var(--u) solid var(--paper); }
.ctab td { padding: calc(1.5 * var(--u)) var(--u); vertical-align: middle; }
.ctab td.r, .ctab th.r { text-align: right; }
.ctab tr + tr td { border-top: 1px dotted var(--paper); }
.sw8 { display: inline-block; width: calc(6 * var(--u)); height: calc(4 * var(--u)); vertical-align: middle; margin-right: calc(2 * var(--u)); border: 2px solid var(--paper); }
.math { margin-top: calc(8 * var(--u)); border-top: var(--u) solid var(--paper); padding-top: calc(4 * var(--u)); display: grid; gap: calc(2 * var(--u)); }
.math p { margin: 0; }
.math code { font: 400 15px/1.5 var(--num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.strongs { margin-top: calc(6 * var(--u)); }
.rd-foot { margin-top: calc(8 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); align-items: center; justify-content: space-between; }
.rd-foot .fine { font-size: 14px; margin: 0; max-width: 60ch; }
.rd-share { display: flex; gap: calc(2 * var(--u)); flex-wrap: wrap; }
.tbl-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- bark log */
.bk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(4 * var(--u)); }
.bk-mode { margin: 0; font: 400 16px/1.35 var(--ui); max-width: 52ch; }
.bk-mode b { background: var(--paper); color: var(--ink); padding: 0 var(--u); font-weight: 400; }
.bk-ctl { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); align-items: center; }
.sw { display: inline-flex; align-items: stretch; min-height: 40px; border: var(--u) solid var(--paper); font: 400 16px/1 var(--ui); }
.sw-c, .sw-l { display: flex; align-items: center; }
.sw-c { padding: calc(2 * var(--u)) calc(2 * var(--u)); }
.sw-l { padding: calc(2 * var(--u)) calc(3 * var(--u)); border-left: var(--u) solid var(--paper); }
.sw[aria-checked=false] .sw-off, .sw[aria-checked=true] .sw-on { background: var(--paper); color: var(--ink); }
.sw:hover .sw-l { background: var(--b50) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.sw:hover .sw-l { color: var(--paper); }
.bk-note { margin: calc(4 * var(--u)) 0 0; background: var(--paper); color: var(--ink); padding: var(--u) calc(3 * var(--u)); font: 400 16px/1.3 var(--ui); }
.bk-gate { margin-top: calc(4 * var(--u)); border: var(--u) solid var(--paper); padding: calc(4 * var(--u)); display: grid; gap: calc(3 * var(--u)); }
.bk-gate p { margin: 0; }
.bk-list { list-style: none; margin: calc(6 * var(--u)) 0 0; padding: 0; display: grid; gap: 0; }
.bk-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: calc(4 * var(--u)); align-items: center; padding: calc(4 * var(--u)) 0; border-top: var(--u) solid var(--paper); }
.bk-row:last-child { border-bottom: var(--u) solid var(--paper); }
.bk-row.new { animation: drop .4s steps(4) both; }
@keyframes drop { from { transform: translateY(calc(-8 * var(--u))); } to { transform: none; } }
.woof { font: 400 32px/1 var(--disp); background: var(--paper); color: var(--ink); padding: calc(2 * var(--u)) calc(3 * var(--u)); }
.bk-mid { display: grid; gap: calc(2 * var(--u)); min-width: 0; }
.bk-mid .ca { font-size: 14px; }
.bk-what { margin: 0; }
.bk-ent { margin: 0; font-size: 14px; }
.bk-when { display: grid; gap: var(--u); justify-items: end; font: 400 16px/1.2 var(--ui); text-align: right; }
.bk-when .num { font-size: 18px; font-weight: 400; }
.bk-tag { border: 2px solid var(--paper); padding: 2px var(--u); }
.bk-tag.live { background: var(--paper); color: var(--ink); }
.bk-acts { display: flex; gap: calc(3 * var(--u)); font: 400 16px/1 var(--ui); }
.bk-acts a, .bk-acts button { text-decoration: none; border-bottom: var(--u) solid var(--paper); padding-bottom: 2px; }
.bk-acts a:hover, .bk-acts button:hover { background: var(--paper); color: var(--ink); }
.bk-wrap { display: grid; grid-template-columns: auto 1fr; gap: calc(6 * var(--u)); align-items: start; margin-top: calc(6 * var(--u)); }
.bk-dogbox { position: sticky; top: 120px; padding-top: calc(4 * var(--u)); }
.bk-wrap .bk-list { margin: 0; }
.bk-mid .ca { justify-self: start; }
@media (max-width: 1000px) { .bk-wrap { grid-template-columns: 1fr; } .bk-dogbox { display: none; } }
@media (max-width: 760px) {
  .bk-row { grid-template-columns: auto 1fr; }
  .bk-row .mini-i { display: none; }
  .bk-when { grid-column: 1 / -1; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: calc(3 * var(--u)); }
}
.bk-empty { display: grid; justify-items: center; text-align: center; gap: calc(4 * var(--u)); padding: calc(8 * var(--u)) 0 calc(2 * var(--u)); }
.bk-e1 { font-size: 32px; margin: 0; line-height: 1.1; }
.bk-e2 { margin: 0; max-width: 58ch; }
.bk-idx { display: grid; grid-template-columns: repeat(4, auto); gap: calc(8 * var(--u)); margin: calc(2 * var(--u)) 0 0; }
.bk-idx div { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.bk-idx dd { order: -1; }
.bk-idx dd { margin: 0; font-size: 26px; }
@media (max-width: 600px) { .bk-idx { grid-template-columns: repeat(2, auto); gap: calc(4 * var(--u)) calc(8 * var(--u)); } }

/* ---------------------------------------------------------------- how */
.how { max-width: var(--wmax); margin: calc(20 * var(--u)) auto 0; text-align: center; display: grid; justify-items: center; gap: calc(6 * var(--u)); }
.how-h { font-size: 64px; margin: 0; background: var(--ink); padding: 0 calc(3 * var(--u)); line-height: 1.1; }
.how-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); width: 100%; }
.how-c { display: grid; justify-items: center; align-content: start; gap: calc(3 * var(--u)); background: var(--ink); padding: calc(4 * var(--u)); border: var(--u) solid var(--paper); }
.how-c .mini { width: calc(72 * var(--u)); height: calc(68 * var(--u)); }
.how-c p { margin: 0; max-width: 30ch; }
.how-k { font-size: 32px; line-height: 1; background: var(--paper); color: var(--ink); padding: var(--u) calc(3 * var(--u)); }
.how-u, .how-b { margin: 0; width: min(64ch, 100%); overflow-wrap: anywhere; background: var(--ink); padding: calc(2 * var(--u)) calc(3 * var(--u)); }
.how-b b { font-weight: 400; font-size: 16px; background: var(--paper); color: var(--ink); padding: 2px var(--u); margin-right: var(--u); }
@media (max-width: 1000px) { .how-c .mini { width: calc(72 * var(--u) * .75); height: calc(68 * var(--u) * .75); } }
@media (max-width: 760px) { .how-row { grid-template-columns: 1fr; } .how-c .mini { width: calc(72 * var(--u)); height: calc(68 * var(--u)); } .how-h { font-size: 32px; } }

/* film slot (stage 7) */
.film-box { position: relative; margin: 0; aspect-ratio: 16 / 9; border: var(--u) solid var(--paper); }
.film-box img, .film-box video { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: auto; }
.film-play { position: absolute; right: calc(4 * var(--u)); top: calc(4 * var(--u)); }
.film { margin-top: calc(14 * var(--u)); }

/* ---------------------------------------------------------------- end + footer */
.end { display: grid; justify-items: center; gap: calc(5 * var(--u)); margin: calc(22 * var(--u)) auto 0; text-align: center; }
.end-h { font-size: 48px; margin: 0; line-height: 1; background: var(--ink); padding: 0 calc(3 * var(--u)); }
.end-act { display: flex; gap: calc(3 * var(--u)); flex-wrap: wrap; justify-content: center; }
.end .ca, .end .ca-slot { max-width: min(640px, 100%); }
.foot { position: relative; z-index: 1; border-top: var(--u) solid var(--paper); background: var(--ink); padding: calc(5 * var(--u)) 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(3 * var(--u)); max-width: none; }
.foot-l { margin: 0; font-size: 14px; }
.foot-n { display: flex; gap: calc(4 * var(--u)); font: 400 16px/1 var(--ui); flex-wrap: wrap; }
.foot-n a { text-decoration: none; padding: 12px 6px; display: inline-block; }
.foot-n a:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 600px) { .end-h { font-size: 32px; } }

/* ---------------------------------------------------------------- docs */
.docs-in { max-width: var(--wmax); }
.docs-top { display: flex; gap: calc(6 * var(--u)); align-items: center; padding: calc(10 * var(--u)) 0 calc(4 * var(--u)); }
.docs-h { font-size: 48px; margin: 0 0 calc(2 * var(--u)); line-height: 1; }
.docs-lead { margin: 0; max-width: 60ch; }
.docs-toc { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)); font: 400 16px/1 var(--ui); margin: calc(4 * var(--u)) 0 0; }
.docs-toc a { text-decoration: none; border: var(--u) solid var(--paper); padding: calc(1.5 * var(--u)) calc(2 * var(--u)); background: var(--ink); }
.docs-toc a:hover { background: var(--paper); color: var(--ink); }
.dsec { margin-top: calc(10 * var(--u)); }
.dsec p { margin: 0 0 calc(3 * var(--u)); max-width: 72ch; }
.dsec ul, .dsec ol { margin: 0 0 calc(3 * var(--u)); padding-left: 1.2em; max-width: 72ch; }
.dsec li { margin: calc(1.5 * var(--u)) 0; }
.dsec h3 { font: 400 16px/1 var(--disp); margin: calc(5 * var(--u)) 0 calc(2 * var(--u)); }
.dsec code, .docs-in code { font: 400 15px/1.5 var(--num); font-variant-numeric: tabular-nums; background: var(--paper); color: var(--ink); padding: 0 4px; overflow-wrap: anywhere; }
.dsec .ctab td { font-size: 15px; }
.dsec .ctab code { background: none; color: inherit; padding: 0; }
@media (max-width: 600px) { .docs-top { flex-direction: column; align-items: flex-start; } .docs-h { font-size: 32px; } }

/* ---------------------------------------------------------------- 404 */
.nf-in { min-height: calc(100vh - 140px); display: grid; place-content: center; justify-items: center; gap: calc(4 * var(--u)); text-align: center; padding: calc(10 * var(--u)) 16px; }
.nf-px { max-width: calc(100vw - 32px); height: auto; aspect-ratio: 134 / 52; }
.nf-k { background: var(--paper); color: var(--ink); padding: var(--u) calc(2 * var(--u)); }
.nf-h { font-size: 64px; margin: 0; line-height: 1; }
.nf-p { margin: 0; }
@media (max-width: 600px) { .nf-h { font-size: 32px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .caret { animation: none; }
}
/* text on the sheet sits on ink plates, so the lattice and the trail never run through letters */
.docs-top > div, .nf-h, .nf-p, .read-ask, .bk-e1, .bk-e2 { background: var(--ink); }
.docs-top > div { padding: calc(2 * var(--u)); }
.dsec .ctab th:first-child { width: 26%; }
.rd-meta a, .bk-acts a, .bk-acts button { padding: 10px 2px 4px; display: inline-block; }
.foot-n a { min-width: 40px; text-align: center; }
.how-u .stamp, .how-b b { display: inline-block; line-height: 1; vertical-align: 2px; }