/* ==========================================================================
   Strike a Block: the shared stylesheet
   --------------------------------------------------------------------------
   Loaded by every page as <link rel="stylesheet" href="/site.css">, before
   the page's own small inline <style>. Reference, with every component
   rendered on every band: web/_styleguide.html. Spec: web/README.md.

   The look: flat full-bleed bands (paper, strike orange, cobalt, ink), one
   grotesque set large and tight, a pixel face for anything machine-made,
   and "windows" (1px border, ink title bar, hard offset shadow) around
   whatever is live or data-like. No rounded corners, no soft shadows, no
   gradients except the prismatic metal. Motion only where something is
   really running.

   Contents
     1  Fonts                      10  Buttons and big links
     2  Tokens                     11  Forms
     3  Reset and base             12  Tables
     4  Typography                 13  Data rows, key/values, zero bar
     5  Layout and bands           14  Code
     6  Section head and tag       15  Notes, proof marks, disclosures
     7  Nav                        16  Prose
     8  Footer                     17  Utilities
     9  Windows, plates, terminal  18  Reduced motion
                                   19  Print

   Breakpoints (max-width): 1240px, 900px, 640px. Each section carries its
   own responsive rules.
   ========================================================================== */


/* ---------- 1  Fonts ------------------------------------------------------
   Both self-hosted, both OFL (licences sit beside the files). Pages preload
   them; see the <head> boilerplate in web/README.md. */
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300 800;font-display:swap;
  src:url(/assets/v2/fonts/host-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Departure Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/v2/fonts/departure-mono-regular.woff2) format("woff2")}


/* ---------- 2  Tokens ----------------------------------------------------- */
:root{
  /* Palette. The four band colours, then the materials. */
  --white:#FFFFFF;         /* the Paper band, window bodies, input wells */
  --ink:#0E0E0E;           /* text, title bars, the Ink band */
  --strike:#F7931A;        /* the Orange band; the tile behind found zeros. Never text on white (2.3:1) */
  --cobalt:#2B4BFF;        /* the Cobalt band */
  --steel:#16202B;         /* plate bodies */
  --proof:#1E7F68;         /* a check that actually passed; nothing else */
  --gold:#D9AE3C;          /* 10-zero metal */
  --platinum:#B9C1C8;      /* 11-zero metal */
  --prism:#8FD3C8,#A9B8F0,#E7B8D8,#F2CFA0;   /* 12-zero metal: gradient stops */
  --chrome:#E8E8E4;        /* window greys: bar tracks, disabled wells */
  --mute:#4D4D4D;          /* secondary text on white */
  --mute-ink:#B5B5B5;      /* secondary text on ink and steel */
  --unlit:#8A8A8A;         /* hash digits still being tried (decorative, never the only copy) */
  --placeholder:#636363;   /* placeholders and counters inside inputs */
  --rule-quiet:#4A4A4A;    /* the one quiet hairline: above the footer's last line */

  /* Context. What the current surface is painted with and what sits on it.
     Each band class, .win, .plate-body, .terminal, pre and .note-strong
     re-declare these, so a component written once is right wherever it is
     nested. Page CSS should read these, not the palette, for text and rules. */
  --surface:var(--white);
  --text:var(--ink);
  --text-2:var(--mute);    /* quieter text that still passes AA on --surface */
  --knockout:var(--white); /* text on a fill of --text (solid buttons) */
  --label:var(--ink);      /* fill of tags and command chips */
  --on-label:var(--white);
  --focus:var(--strike);   /* the focus ring; white on the orange band */

  /* Type. Two families, one weight for display (500). */
  --sans:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pix:"Departure Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-display:clamp(46px,8.3vw,132px);   /* the homepage headline */
  --fs-1:clamp(40px,6.3vw,96px);          /* page titles and band heads */
  --fs-2:clamp(38px,4.6vw,68px);          /* column heads */
  --fs-3:clamp(28px,3.6vw,52px);          /* statements inside a band */
  --fs-4:26px;                            /* item titles */
  --fs-5:21px;                            /* small headings */
  --fs-lede:19px;
  --fs-body:17.5px;
  --fs-fine:15px;
  /* The pixel face is drawn on an 11px grid: use multiples of 11. */
  --pix-1:11px;
  --pix-2:22px;
  --pix-3:33px;
  --pix-4:44px;

  /* Space and widths. */
  --gutter:40px;           /* page side padding: 22px at 900, 16px at 640 */
  --band-pad:112px 0 120px;
  --s-1:8px;
  --s-2:12px;
  --s-3:18px;
  --s-4:24px;
  --s-5:36px;
  --s-6:56px;              /* head to content */
  --s-7:72px;
  --w-page:1400px;
  --w-head:1160px;
  --w-text:32em;           /* long-form measure: about 68 characters a line */

  --win-shadow:5px 5px 0 var(--ink);
}
@media(max-width:900px){
  :root{--gutter:22px;--band-pad:84px 0 88px}
}
@media(max-width:640px){
  :root{--gutter:16px;--band-pad:72px 0 76px;--fs-body:17px;--win-shadow:3px 3px 0 var(--ink)}
}


/* ---------- 3  Reset and base --------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:clip;background:var(--surface);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}

/* Selection is an ink block; where the surface is already dark it is the orange tile. */
::selection{background:var(--ink);color:var(--white)}
.b-ink ::selection,.plate-body ::selection,.terminal ::selection,pre ::selection{background:var(--strike);color:var(--ink)}

/* Focus: a 3px ring with an inner band in the text colour. The ring is
   orange (white on the orange band, where orange would vanish); the inner
   band carries the contrast where the ring alone is weak. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--text)}


/* ---------- 4  Typography -------------------------------------------------
   Headings are weight 500 with tight leading. h1 and h2 are sized for
   their usual jobs; inside .head both take the band-head size and centre.
   Use the classes when the element and the size you need disagree. */
h1,h2{font-weight:500;letter-spacing:-.045em;line-height:.9;text-wrap:balance}
h1{font-size:var(--fs-1)}
h2{font-size:var(--fs-2)}
h3{font-size:var(--fs-5);font-weight:600;line-height:1.25;letter-spacing:-.01em}
h4{font-size:var(--fs-body);font-weight:600;line-height:1.3}

.display{font-size:var(--fs-display);line-height:.86;letter-spacing:-.055em}
.subhead{font-size:var(--fs-3);font-weight:500;line-height:.95;letter-spacing:-.04em;text-wrap:balance}
.item-title{font-size:var(--fs-4);font-weight:500;line-height:1.1;letter-spacing:-.03em}

.lede{font-size:var(--fs-lede);max-width:58ch;color:var(--text-2)}
.b-ink .lede{color:var(--text)}          /* on ink the lede stays white; grey is kept for fine print */
.fine{font-size:var(--fs-fine);color:var(--text-2)}
.data{font:var(--pix-1)/1.5 var(--pix)}  /* small machine-made facts: counts, ids, timestamps */

/* A hash, anywhere in text. Wrap the real leading zeros, and only those,
   in .zeros: they become ink digits on an orange tile. */
.hash{font-family:var(--pix);font-size:var(--pix-1);line-height:1.5;word-break:break-all;font-variant-ligatures:none}
.zeros{background:var(--strike);color:var(--ink)}
.b-orange .zeros:not(.win *){background:var(--ink);color:var(--white)}   /* an orange tile cannot show on orange */

@media(max-width:640px){
  .display{font-size:clamp(44px,14.6vw,72px)}
}


/* ---------- 5  Layout and bands -------------------------------------------
   .wrap is the page column. .band gives a section its vertical rhythm.
   .b-paper / .b-orange / .b-cobalt / .b-ink paint a surface and set the
   context tokens; they work on a .band or on any wrapper. */
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)}
.band{position:relative;padding:var(--band-pad)}

.b-paper,.b-orange,.b-cobalt,.b-ink{background:var(--surface);color:var(--text)}
.b-paper{--surface:var(--white);--text:var(--ink);--text-2:var(--mute);--knockout:var(--white);--label:var(--ink);--on-label:var(--white);--focus:var(--strike)}
.b-orange{--surface:var(--strike);--text:var(--ink);--text-2:var(--ink);--knockout:var(--white);--label:var(--ink);--on-label:var(--white);--focus:var(--white)}
.b-cobalt{--surface:var(--cobalt);--text:var(--white);--text-2:var(--white);--knockout:var(--ink);--label:var(--ink);--on-label:var(--white);--focus:var(--strike)}
.b-ink{--surface:var(--ink);--text:var(--white);--text-2:var(--mute-ink);--knockout:var(--ink);--label:var(--white);--on-label:var(--ink);--focus:var(--strike)}


/* ---------- 6  Section head and tag ---------------------------------------
   A band opens with a pixel tag naming it and a head framed by four crop
   marks:
     <section class="band b-orange"><div class="wrap">
       <span class="tag">pricing</span>
       <div class="head"><h2>…</h2><p class="lede">…</p></div>
       …
   Whatever follows the head starts 56px below it. */
.head{position:relative;padding:44px 28px 48px;max-width:var(--w-head);margin:0 auto}
.head::before{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:13px 1px,1px 13px,13px 1px,1px 13px,13px 1px,1px 13px,13px 1px,1px 13px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
.head h1,.head h2{font-size:var(--fs-1);text-align:center;max-width:14em;margin:0 auto}
.head .lede{margin:22px auto 0;text-align:center}
.head + *{margin-top:var(--s-6)}

.tag{display:inline-block;background:var(--label);color:var(--on-label);font:var(--pix-1)/1 var(--pix);padding:5px 7px 4px;white-space:nowrap}
.band > .wrap > .tag{position:absolute;top:28px}   /* the band's own name, top left */

@media(max-width:640px){
  .head{padding:30px 14px 34px}
}


/* ---------- 7  Nav --------------------------------------------------------
   Markup is canonical: paste web/_partials/nav.html. Mark the current
   page's link with aria-current="page" (it gets the orange tile). The
   pricing link is the one solid call to action. */
.skip-link{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;left:8px;top:8px;z-index:200;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;
  background:var(--ink);color:var(--white);padding:12px 16px;font-size:var(--fs-fine)}

.site-nav-inner{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap;
  font-weight:600;font-size:20px;letter-spacing:-.03em;line-height:1}
.brand svg{width:24px;height:24px;flex:none}
.site-nav-links{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;font-size:var(--fs-fine)}
.site-nav-links a{display:inline-block;padding:6px 11px;border:1px solid var(--ink);text-decoration:none;line-height:1.2}
.site-nav-links a[aria-current]{background:var(--strike)}
.site-nav-links a:hover,.site-nav-links .nav-cta{background:var(--ink);color:var(--white)}

@media(max-width:640px){
  .site-nav-inner{flex-wrap:wrap;gap:10px 16px;padding-top:12px;padding-bottom:4px}
  .site-nav-links{margin-left:0;width:100%;font-size:14.5px}
  .site-nav-links a{padding:9px 10px}
  .site-nav-links .nav-optional{display:none}
}


/* ---------- 8  Footer -----------------------------------------------------
   Markup is canonical: paste web/_partials/footer.html. It is an ink band;
   after another ink band it draws a hairline so the two stay apart. */
.site-footer{padding:0 0 36px;font-size:15.5px}
.footer-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;padding-top:40px}
.b-ink + .site-footer .footer-top,
main:has(> .b-ink:last-child) + .site-footer .footer-top{border-top:1px solid var(--white)}
.footer-brand p{margin-top:14px;max-width:38ch;color:var(--text-2)}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.footer-heading{font:var(--pix-1)/1 var(--pix);margin-bottom:12px}
.site-footer ul{list-style:none}
.site-footer li a{display:inline-block;padding:4px 0;text-decoration:none;color:var(--text-2)}
.site-footer li a:hover{color:var(--text);text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:48px;padding-top:20px;
  border-top:1px solid var(--rule-quiet);font-size:14.5px;color:var(--text-2)}

@media(max-width:900px){
  .footer-top{grid-template-columns:1fr;gap:36px}
}
@media(max-width:640px){
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer li a{padding:9px 0}
  .footer-bottom{flex-direction:column}
}


/* ---------- 9  Windows, plates, terminal ----------------------------------
   The window is the container for anything live or data-like:
     <div class="win">
       <div class="win-bar"><span>title</span><span>status</span></div>
       <div class="win-body">…</div>
     </div>
   The body is always paper, whatever band the window sits on. */
.win{--surface:var(--white);--text:var(--ink);--text-2:var(--mute);--knockout:var(--white);--label:var(--ink);--on-label:var(--white);--focus:var(--strike);
  background:var(--surface);color:var(--text);border:1px solid var(--ink);box-shadow:var(--win-shadow);min-width:0}
.b-ink .win{border-color:var(--white);box-shadow:none}        /* an ink shadow cannot show on ink */
.win .win{border-color:var(--ink);box-shadow:none}            /* a window inside a window sits flat */
.win-bar{display:flex;justify-content:space-between;gap:14px;background:var(--ink);color:var(--white);
  font:var(--pix-1)/1 var(--pix);padding:7px 9px 6px;white-space:nowrap;overflow:hidden}
.win-bar span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.win-bar span + span{flex:none}
.win-body{padding:var(--s-3)}

/* A whole window as a link: wrap it. The title bar lights up on hover. */
a.win-link{display:flex;text-decoration:none}
a.win-link > .win{flex:1}
a.win-link:hover .win-bar,a.win-link:focus-visible .win-bar{background:var(--strike);color:var(--ink)}

/* The plate: a struck block. A window with a paper title bar and a steel
   body. Add .d10 / .d11 / .d12 for gold, platinum and prismatic metal
   (8 and 9 zeros are plain); the metal colours the bar's chip and the
   zeros. .zeros wraps the hash's real leading zeros and nothing else.
     <div class="win plate d10">
       <div class="win-bar"><span><i></i>title</span><span>10 zeros</span></div>
       <div class="plate-body">
         <p class="plate-text">“inscription”</p>
         <p class="plate-hash"><span class="zeros">0000000000</span>19d6…</p>
         <p class="plate-meta"><span>nonce …</span><span>date</span></p>
       </div>
     </div>
   .live marks a plate struck a moment ago in this browser: its zeros are
   orange tiles. */
.plate{--metal:var(--white);display:flex;flex-direction:column}
.plate .win-bar{background:var(--white);color:var(--ink);border-bottom:1px solid var(--ink)}
.b-ink .plate .win-bar{border-bottom-color:var(--white)}
.plate .win-bar i{display:inline-block;width:8px;height:8px;background:var(--metal);border:1px solid var(--ink);margin-right:6px;vertical-align:-1px}
.plate-body{--surface:var(--steel);--text:var(--white);--text-2:var(--mute-ink);--knockout:var(--ink);--label:var(--white);--on-label:var(--ink);--focus:var(--strike);
  background:var(--surface);color:var(--text);padding:18px 18px 16px;flex:1}
.plate-text{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.015em;overflow-wrap:anywhere;margin-bottom:14px}
.plate-hash{font:var(--pix-1)/1.5 var(--pix);color:var(--text-2);word-break:break-all}
.plate-hash .zeros{background:none;color:var(--metal)}
.plate-meta{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:10px;font-size:14px;color:var(--text-2)}
.plate.d10{--metal:var(--gold)}
.plate.d11{--metal:var(--platinum)}
.plate.d12{--metal:#A9B8F0}
.plate.d12 .win-bar i{background:linear-gradient(135deg,var(--prism))}
.plate.d12 .plate-hash .zeros{background:linear-gradient(90deg,var(--prism));-webkit-background-clip:text;background-clip:text;color:transparent}
.plate.live .plate-hash .zeros{background:var(--strike);color:var(--ink)}

/* Plates side by side: three across, two at 1240, one at 640. */
.plate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* The terminal: an ink readout for a machine's status. .stat (or b) lifts
   a value to white. */
.terminal{--surface:var(--ink);--text:var(--white);--text-2:var(--mute-ink);--knockout:var(--ink);--label:var(--white);--on-label:var(--ink);--focus:var(--strike);
  background:var(--surface);color:var(--text-2);padding:16px 18px;font-size:16px;line-height:1.55}
.terminal b,.terminal .stat{color:var(--text);font-weight:600}
.b-ink .terminal:not(.win *){border:1px solid var(--white)}   /* straight on the ink band it needs an edge */

@media(max-width:1240px){
  .plate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .plate-grid{grid-template-columns:1fr}
}


/* ---------- 10  Buttons and big links -------------------------------------
   .btn is the solid action; .btn-secondary the outlined one beside it.
   Both invert on hover. .biglink is the other call to action: display
   type, underlined, set beside or instead of a button. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:10px 24px;
  background:var(--text);color:var(--knockout);border:1px solid var(--text);border-radius:0;
  font:500 17px/1.2 var(--sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface);color:var(--text)}
.btn-secondary{background:transparent;color:var(--text)}
.btn-secondary:hover{background:var(--text);color:var(--knockout)}
.btn-small{min-height:40px;padding:6px 14px;font-size:var(--fs-fine)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.biglink{font-weight:500;font-size:clamp(28px,3.9vw,58px);line-height:1;letter-spacing:-.04em;
  text-decoration-thickness:.07em;text-underline-offset:.13em}
.biglink:hover{text-decoration-thickness:.12em}

@media(max-width:640px){
  .btn-row .btn{width:100%}
}


/* ---------- 11  Forms -----------------------------------------------------
   Controls are paper wells with an ink edge on every band.
     <div class="field">
       <label class="field-label" for="x">Label</label>
       <input class="input" id="x" aria-describedby="x-hint">
       <p class="field-hint" id="x-hint">Help text</p>
     </div>
   .input also goes on <select> and <textarea>. .choice is a toggle button
   (set aria-pressed); group them in .choice-row. */
.field-label{display:block;font-weight:600;font-size:16px;margin-bottom:var(--s-1)}
.field-hint{margin-top:var(--s-1);font-size:var(--fs-fine);color:var(--text-2)}
.field-error{margin-top:var(--s-1);font-size:var(--fs-fine);font-weight:600}
.field-error::before{content:"error";display:inline-block;margin-right:8px;background:var(--label);color:var(--on-label);
  font:var(--pix-1)/1 var(--pix);padding:5px 7px 4px;vertical-align:1px}
.field + .field{margin-top:var(--s-4)}

.input{display:block;width:100%;min-width:0;min-height:58px;padding:14px 16px;border-radius:0;
  background:var(--white);color:var(--ink);border:1px solid var(--ink);font:500 19px/1.3 var(--sans)}
.input::placeholder{color:var(--placeholder);opacity:1}
.input:focus-visible{outline-offset:0}
.input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.input:disabled{background:var(--chrome);color:var(--mute);cursor:not-allowed}
.input-small{min-height:44px;padding:8px 12px;font-size:16px}
textarea.input{min-height:132px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 15px) 50%;background-size:7px 7px;background-repeat:no-repeat}

.choice-row{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.choice{font:500 15px/1.2 var(--sans);padding:11px 13px;border-radius:0;cursor:pointer;
  border:1px solid var(--ink);background:var(--white);color:var(--ink)}
.choice b{font:var(--pix-1)/1 var(--pix);font-weight:400;margin-right:4px}
.choice[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--label)}


/* ---------- 12  Tables ----------------------------------------------------
   <table class="table">, usually inside a .win. Pixel-face column heads,
   a hairline under every row but the last. Wrap any table that may be
   wider than a phone in <div class="table-scroll" tabindex="0" role="region"
   aria-label="…">. Bare tables inside .prose get the same look. */
.table,.prose table{width:100%;border-collapse:collapse;text-align:left}
.table thead th,.prose thead th{font:var(--pix-1)/1.3 var(--pix);font-weight:400;padding:12px 16px;border-bottom:1px solid var(--text)}
.table td,.table tbody th,.prose td,.prose tbody th{padding:14px 16px;border-bottom:1px solid var(--text);vertical-align:top}
.table tbody th,.prose tbody th{font-weight:600}
.table tbody tr:last-child > *,.prose tbody tr:last-child > *{border-bottom:0}
.table .num,.prose .num{text-align:right;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto}
.table-scroll > table{min-width:560px}
/* A table standing on a band without a window keeps a rule above and below. */
.table-scroll:not(.win *),.prose > table{border-top:1px solid var(--text);border-bottom:1px solid var(--text)}


/* ---------- 13  Data rows, key/values, zero bar ---------------------------
   .rows is a ruled list: a hairline above the first item and under each.
   .rows-tight is the compact version for short facts.
   A .row inside it is a grid of parts. The page sets the columns in its
   own CSS, per breakpoint, with --row-cols
   (.tiers .row{--row-cols:auto 1fr 2fr 140px}); the default is two columns.
   Each row is its own grid: give every column but the flexible ones a
   fixed width, or the rows will not line up.
     <ol class="rows tiers">
       <li class="row">
         <div class="zero-bar d10"><i style="--i:0">0</i>…</div>
         <h3 class="row-name">Gold <small>10 zeros</small></h3>
         <p class="row-facts"><b>About 8 seconds</b><span>256× the work</span></p>
         <p class="row-value">$9.99</p>
       </li>
   The zero bar is the depth drawn as pixel zeros on ink. Hovering or
   focusing inside the row stamps the zeros in turn (each <i> needs its
   index in --i). */
.rows{list-style:none;border-top:1px solid var(--text)}
.rows > *{padding:22px 0;border-bottom:1px solid var(--text)}
.rows-tight > *{padding:11px 0;font-size:16px}

.row{display:grid;align-items:center;column-gap:32px;row-gap:6px;grid-template-columns:var(--row-cols,minmax(0,1fr) auto)}
.row-name{font-size:40px;font-weight:500;line-height:1;letter-spacing:-.045em}
.row-name small{display:block;font:var(--pix-1)/1.4 var(--pix);letter-spacing:0;margin-top:8px}
.row-facts b{display:block;font-weight:600}
.row-facts span{display:block;font-size:15.5px}
.row-facts .tag{display:inline-block;margin-top:7px;font:var(--pix-1)/1 var(--pix)}
.row-value{font-size:44px;font-weight:500;line-height:1;letter-spacing:-.05em;text-align:right;font-variant-numeric:tabular-nums}

/* .kv: a key/value readout in the pixel face (a <dl>, keys left, values right). */
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font:var(--pix-1)/1.3 var(--pix)}
.kv dd{text-align:right}

.zero-bar{justify-self:start;display:inline-flex;background:var(--ink);padding:11px 15px 9px;font:var(--pix-4)/1 var(--pix);color:var(--white)}
.zero-bar i{font-style:normal;display:block;width:27px;text-align:center}
.zero-bar.d10{color:var(--gold)}
.zero-bar.d11{color:var(--platinum)}
.zero-bar.d12 i{color:hsl(calc(165 + var(--i)*17) 62% 76%)}
.b-ink .zero-bar:not(.win *){outline:1px solid var(--white)}
.row:hover .zero-bar i,.row:focus-within .zero-bar i{animation:stamp .3s steps(1) both;animation-delay:calc(var(--i)*38ms)}
@keyframes stamp{0%{background:var(--white);color:var(--ink)}40%{background:var(--strike);color:var(--ink)}100%{background:transparent}}

@media(max-width:1240px){
  .row{column-gap:24px}
  .row-name{font-size:34px}
  .row-value{font-size:36px}
  .zero-bar{font-size:36px;padding:9px 13px 7px}
  .zero-bar i{width:22px}
}
@media(max-width:640px){
  .zero-bar{font-size:min(8.6vw,36px);padding:8px 10px 6px}
  .zero-bar i{width:min(5.3vw,22px)}
}


/* ---------- 14  Code ------------------------------------------------------
   Inline code is the pixel face, no box. .cmd is a command someone will
   copy, shown as a chip. A <pre> is an ink panel that scrolls sideways
   rather than wrapping; put it in a .win when it wants a title bar. */
code{font-family:var(--pix);font-size:.82em;font-variant-ligatures:none}
.cmd{background:var(--label);color:var(--on-label);padding:4px 7px 3px;white-space:nowrap}
pre{--surface:var(--ink);--text:var(--white);--text-2:var(--mute-ink);--knockout:var(--ink);--label:var(--white);--on-label:var(--ink);--focus:var(--strike);
  background:var(--surface);color:var(--text);padding:16px 18px;overflow-x:auto;
  font:13px/1.6 var(--pix);font-variant-ligatures:none;tab-size:2}
pre code{font-size:inherit}
pre .dim{color:var(--text-2)}                       /* comments and prompts */
.b-ink pre:not(.win *){border:1px solid var(--white)}


/* ---------- 15  Notes, proof marks, disclosures ---------------------------
   .note is the callout: a ruled box with a pixel tag on its top edge saying
   what it is. .note-strong is an ink box with an orange tag, for the one
   thing a reader must not miss.
     <aside class="note"><span class="tag">note</span><p>…</p></aside>
   Proof green belongs to checks that really ran: .verified is the line
   under a re-hashed block, .pass the stamp. Use both on paper only. */
.note{border:1px solid var(--text);padding:20px 18px 16px;position:relative}
.note > .tag{position:absolute;top:-10px;left:12px}
.note > * + *{margin-top:var(--s-1)}
.note-strong{--surface:var(--ink);--text:var(--white);--text-2:var(--mute-ink);--knockout:var(--ink);--label:var(--white);--on-label:var(--ink);--focus:var(--strike);
  background:var(--surface);color:var(--text);border-color:var(--ink);padding-top:16px}
.note-strong > .tag{position:static;background:var(--strike);color:var(--ink)}
.b-ink .note-strong:not(.win *){border-color:var(--white)}

.verified{display:flex;align-items:center;gap:8px;color:var(--proof);font-weight:600;font-size:17px;line-height:1.3}
.verified svg{flex:none}
.pass{display:inline-block;font:var(--pix-2)/1 var(--pix);padding:6px 9px 4px;background:var(--proof);color:var(--white)}

/* <details class="disclosure">: a ruled row that opens. Stack them. */
.disclosure{border-bottom:1px solid var(--text)}
.disclosure:first-of-type{border-top:1px solid var(--text)}
.disclosure > summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:18px 0;cursor:pointer;
  list-style:none;font-size:var(--fs-5);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.disclosure > summary::-webkit-details-marker{display:none}
.disclosure > summary::after{content:"+";flex:none;font:var(--pix-2)/1 var(--pix)}
.disclosure[open] > summary::after{content:"-"}
.disclosure > :not(summary){padding-bottom:20px;max-width:66ch}


/* ---------- 16  Prose -----------------------------------------------------
   Long-form reading: articles, documentation, legal. A centred column of
   about 68 characters; headings step down from the band head; lists,
   quotes, figures, tables and code are styled bare, so an article needs
   no classes inside. Wide tables go in .table-scroll; <pre> scrolls by
   itself. .prose-wide lifts the measure for reference pages. */
.prose{max-width:var(--w-text);margin-inline:auto;line-height:1.6}
.prose-wide{max-width:52em}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:-.04em;margin-top:2.1em}
.prose h3{font-size:var(--fs-4);font-weight:500;line-height:1.15;letter-spacing:-.03em;margin-top:1.7em}
.prose h4{margin-top:1.6em}
.prose h2 + *,.prose h3 + *,.prose h4 + *{margin-top:.6em}
.prose > :first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.35em}
.prose ul{list-style:square}
.prose li + li,.prose li > ul,.prose li > ol{margin-top:.4em}
.prose li::marker{font-family:var(--pix);font-size:.8em}
.prose blockquote{border-left:5px solid var(--text);padding:2px 0 2px 20px;font-size:var(--fs-5);font-weight:500;line-height:1.35;letter-spacing:-.015em}
.prose blockquote cite,.prose blockquote footer{display:block;margin-top:10px;font:var(--pix-1)/1.5 var(--pix);font-style:normal;letter-spacing:0}
.prose > figure{margin-top:2em;margin-bottom:2em}
.prose figure img{width:100%;border:1px solid var(--text)}
.prose figcaption{margin-top:var(--s-1);font:var(--pix-1)/1.5 var(--pix)}
.prose hr{border:0;border-top:1px solid var(--text);margin:2.4em 0}
.prose > pre,.prose > .win,.prose > .note,.prose > .table-scroll,.prose > table{margin-top:1.6em;margin-bottom:1.6em}
.prose dt{font-weight:600}
.prose dd + dt{margin-top:.8em}
.prose .lede{max-width:none}


/* ---------- 17  Utilities ------------------------------------------------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}


/* ---------- 18  Reduced motion --------------------------------------------
   Nothing animates and nothing eases. Scripts check the same media query
   and draw each live widget's finished state once (see web/README.md). */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* ---------- 19  Print -----------------------------------------------------
   Paper only: no chrome, no controls, no band colours, links spelled out
   in long-form text. */
@media print{
  .site-nav,.site-footer,.skip-link,.btn,.biglink,.input,.choice-row,.field,canvas{display:none!important}
  .band{padding:20px 0}
  .band > .wrap > .tag{position:static;margin-bottom:8px}
  .b-orange,.b-cobalt,.b-ink{--surface:var(--white);--text:var(--ink);--text-2:var(--mute);--knockout:var(--white);--label:var(--ink);--on-label:var(--white)}
  .win,.b-ink .win{border-color:var(--ink);box-shadow:none}
  .win,.note,pre,figure,tr{break-inside:avoid}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
}