/* clobber.css: the design system for Clobber's public pages.
   Concept: the matching instrument. Two sides meet around a spread.
   Guide: docs/design-system.md. Reference: /design/ (noindex).
   Rules in one breath: colour is function, numbers are mono and tabular, prose is Archivo,
   radii 2 to 6 px, shadows only on things that float, motion 120 to 180 ms for feedback. */

/* ------------------------------------------------------------------ 1. tokens */
:root{
  /* surfaces and text, light */
  --paper:#F4F3EE;
  --surface:#FFFFFF;
  --ink:#142029;
  --muted:#56646D;
  --rule:#D3D7D3;
  --rule-soft:#E4E6E2;
  --bid:#167A5B;
  --ask:#BD493B;
  --signal:#F0BB48;
  --bid-wash:rgba(22,122,91,.09);
  --ask-wash:rgba(189,73,59,.09);
  --signal-wash:rgba(240,187,72,.18);

  /* the same roles on a dark surface: every text token here clears 4.5:1 on --ink */
  --ink-2:#1B2A34;          /* raised surface on ink */
  --ink-3:#0E171E;          /* recessed surface on ink (code, tape) */
  --ink-fg:#F4F3EE;
  --ink-muted:#9AA8B0;
  --ink-rule:#2C3A44;
  --ink-bid:#3DB58A;
  --ink-ask:#E8806F;
  --ink-bid-wash:rgba(61,181,138,.14);
  --ink-ask-wash:rgba(232,128,111,.14);

  /* semantic aliases, remapped by .on-ink */
  --bg:var(--paper);
  --bg-raised:var(--surface);
  --bg-sunken:var(--paper);
  --fg:var(--ink);
  --fg-muted:var(--muted);
  --line:var(--rule);
  --line-soft:var(--rule-soft);
  --pos:var(--bid);
  --neg:var(--ask);
  --pos-wash:var(--bid-wash);
  --neg-wash:var(--ask-wash);
  --accent:var(--ink);            /* primary action on light is ink, never signal */
  --accent-fg:var(--paper);
  --focus:var(--ink);
  --mark:var(--signal);           /* the signal on light is a mark, never text */

  /* type */
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs-display:clamp(2.75rem,1.6rem + 4.2vw,5.5rem);     /* 44 to 88 */
  --fs-h2:clamp(1.75rem,1.2rem + 1.8vw,2.75rem);          /* 28 to 44 */
  --fs-h3:clamp(1.125rem,1rem + .45vw,1.375rem);          /* 18 to 22 */
  --fs-body:clamp(1.0625rem,1rem + .2vw,1.1875rem);       /* 17 to 19 */
  --fs-small:.9375rem;                                    /* 15 */
  --fs-caption:.8125rem;                                  /* 13 */
  --fs-label:.75rem;                                      /* 12 */
  --lh-tight:1.02;
  --lh-snug:1.15;
  --lh-body:1.55;
  --measure:65ch;
  --track-display:-.03em;
  --track-h2:-.02em;
  --track-label:.08em;

  /* space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;
  --gutter:clamp(20px,5vw - 8px,64px);
  --container:1240px;
  --gap:var(--s-6);

  /* form */
  --r-1:2px; --r-2:4px; --r-3:6px;
  --border:1px;
  --shadow-float:0 8px 24px rgba(20,32,41,.16),0 1px 2px rgba(20,32,41,.12);

  /* motion */
  --t-fast:120ms;
  --t:160ms;
  --t-slow:180ms;
  --ease:cubic-bezier(.2,0,0,1);
}

/* a dark region: every semantic alias flips, components need no second class */
.on-ink{
  --bg:var(--ink);
  --bg-raised:var(--ink-2);
  --bg-sunken:var(--ink-3);
  --fg:var(--ink-fg);
  --fg-muted:var(--ink-muted);
  --line:var(--ink-rule);
  --line-soft:var(--ink-rule);
  --pos:var(--ink-bid);
  --neg:var(--ink-ask);
  --pos-wash:var(--ink-bid-wash);
  --neg-wash:var(--ink-ask-wash);
  --accent:var(--signal);
  --accent-fg:var(--ink);
  --focus:var(--signal);
  --mark:var(--signal);
  --shadow-float:0 8px 24px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4);
  background:var(--bg);
  color:var(--fg);
  color-scheme:dark;
}

/* ------------------------------------------------------------------ 2. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--signal);color:var(--ink)}
img,svg{display:block;max-width:100%}
[hidden]{display:none}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}
}

/* ------------------------------------------------------------------ 3. type */
.display{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--track-display);font-weight:700;text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:var(--track-h2);font-weight:700;text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600;letter-spacing:-.005em}
.lead{font-size:clamp(1.125rem,1.05rem + .35vw,1.375rem);line-height:1.45;color:var(--fg-muted);max-width:var(--measure);text-wrap:pretty}
.prose{max-width:var(--measure);text-wrap:pretty}
.prose p+p{margin-top:var(--s-4)}
.small{font-size:var(--fs-small);line-height:1.5}
.caption{font-size:var(--fs-caption);line-height:1.45;color:var(--fg-muted)}
.muted{color:var(--fg-muted)}
.kicker,.label{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;line-height:1.3;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);
}
.kicker{display:flex;align-items:center;gap:var(--s-3)}
.kicker::before{content:"";width:var(--s-4);height:2px;background:var(--mark);flex:none}
.annot{font-size:var(--fs-caption);line-height:1.45;color:var(--fg-muted)}
.annot a{color:inherit}

/* data: mono, tabular, never wrapped */
.num,.price,.qty,.seq{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
.price{font-weight:500}
.price.is-bid,.qty.is-bid{color:var(--pos)}
.price.is-ask,.qty.is-ask{color:var(--neg)}
.unit{font-family:var(--sans);font-size:.6em;font-weight:500;color:var(--fg-muted);margin-left:.25em;letter-spacing:.01em}
.mono{font-family:var(--mono)}
code{font-family:var(--mono);font-size:.9em}
:not(pre)>code{background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-1);padding:.08em .35em;white-space:nowrap}
.on-ink :not(pre)>code{background:var(--ink-3)}
.wordmark{
  font-family:var(--sans);font-weight:700;font-size:1.375rem;letter-spacing:-.035em;line-height:1;
  color:var(--fg);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:baseline;
}
.wordmark .dot{color:var(--mark)}
.wordmark .suffix{font-family:var(--mono);font-weight:500;font-size:.6875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);margin-left:.6em}

/* links: the underline is the rule colour, the text is the text colour */
a{color:inherit}
/* A link in running text is marked by its underline alone, so the underline has to be
   visible: the rule colour is 1.15:1 on paper and was, in practice, no mark at all. */
.prose a,.link{color:inherit;text-decoration:underline;text-decoration-color:var(--fg-muted);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color var(--t) var(--ease)}
.prose a:hover,.link:hover{text-decoration-color:currentColor}
.link-arrow{display:inline-flex;align-items:center;gap:.4em;font-weight:500;text-decoration:none;color:inherit}
.link-arrow::after{content:"";width:.7em;height:.7em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--t) var(--ease)}
.link-arrow:hover::after{transform:translateX(2px) rotate(45deg)}

/* ------------------------------------------------------------------ 4. layout */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-12{grid-column:span 12}
.col-start-2{grid-column-start:2}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}
@media (max-width:1023px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-3{grid-column:span 3}.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 6}
  .col-start-2,.col-start-7,.col-start-8{grid-column-start:auto}
  .md-col-3{grid-column:span 3}.md-col-6{grid-column:span 6}
}
@media (max-width:639px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
  .col-3,.md-col-3,.md-col-6{grid-column:span 4}
  .sm-col-2{grid-column:span 2}
}

/* the signature: two sides meet at a rule. Left side ranges right, right side ranges left. */
.facing{display:grid;grid-template-columns:1fr auto 1fr;gap:0 var(--s-8);align-items:start}
.facing__side{min-width:0}
.facing__side--bid{text-align:right}
.facing__side--ask{text-align:left}
.facing__axis{width:1px;background:var(--line);align-self:stretch;position:relative}
.facing__axis::before,.facing__axis::after{content:"";position:absolute;left:50%;width:7px;height:7px;background:var(--mark);transform:translateX(-50%) rotate(45deg)}
.facing__axis::before{top:0}
.facing__axis::after{bottom:0}
@media (max-width:639px){
  .facing{grid-template-columns:1fr;gap:var(--s-6)}
  .facing__side--bid{text-align:left}
  .facing__axis{width:auto;height:1px;align-self:auto}
  .facing__axis::before{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}
  .facing__axis::after{top:50%;left:auto;right:0;bottom:auto;transform:translate(50%,-50%) rotate(45deg)}
}

.section{padding-block:clamp(var(--s-16),8vw,var(--s-24))}
.section--tight{padding-block:clamp(var(--s-12),6vw,var(--s-16))}
.section--surface{background:var(--surface);border-top:var(--border) solid var(--line);border-bottom:var(--border) solid var(--line)}
.section--surface+.section--surface{border-top:0}
.section__head{display:grid;gap:var(--s-4);margin-bottom:clamp(var(--s-8),4vw,var(--s-12));max-width:var(--measure)}
.section__head .lead{margin-top:var(--s-2)}
.rule{border:0;border-top:var(--border) solid var(--line);margin:0}
.rule--strong{border-top-width:2px;border-color:var(--fg)}
.rule--dotted{border-top-style:dotted}
.stack{display:grid;gap:var(--s-4)}
.stack--lg{gap:var(--s-8)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

/* an editorial figure: a bordered container with a caption row */
.panel{background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-3);overflow:hidden}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-4);border-bottom:var(--border) solid var(--line)}
.panel__body{padding:var(--s-4)}
.panel__foot{padding:var(--s-3) var(--s-4);border-top:var(--border) solid var(--line);color:var(--fg-muted);font-size:var(--fs-caption)}

/* definition rows: label left, value right, a rule between rows */
.rows{display:grid}
.rows__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);padding:var(--s-3) 0;border-top:var(--border) solid var(--line);align-items:baseline}
.rows__row:first-child{border-top:0}
.rows__row dt{color:var(--fg-muted);font-size:var(--fs-small)}
.rows__row dd{text-align:right}

/* ------------------------------------------------------------------ 5. buttons */
.btn{
  --btn-bg:transparent;--btn-fg:var(--fg);--btn-line:var(--fg);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:0 var(--s-6);border-radius:var(--r-2);
  border:var(--border) solid var(--btn-line);background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--sans);font-weight:600;font-size:var(--fs-small);line-height:1;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;user-select:none;white-space:nowrap;position:relative;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.btn:hover{--btn-bg:var(--bg-raised)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn--primary{--btn-bg:var(--accent);--btn-fg:var(--accent-fg);--btn-line:var(--accent)}
.btn--primary:hover{--btn-bg:color-mix(in srgb,var(--accent) 88%,var(--fg) 12%)}
.on-ink .btn--primary:hover{--btn-bg:color-mix(in srgb,var(--signal) 88%,white 12%)}
.btn--secondary{--btn-line:var(--line);--btn-bg:var(--bg-raised)}
.btn--secondary:hover{--btn-line:var(--fg)}
.btn--quiet{--btn-line:transparent;padding-inline:var(--s-3)}
.btn--quiet:hover{--btn-bg:var(--bg-raised);--btn-line:var(--line)}
.btn--sm{min-height:34px;padding-inline:var(--s-4);font-size:var(--fs-caption)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--btn-fg);border-right-color:transparent;animation:spin .7s linear infinite;
}
.btn--primary.is-loading::after{border-color:var(--accent-fg);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.is-loading::after{animation:none;border-right-color:var(--btn-fg);opacity:.5}
}

/* ------------------------------------------------------------------ 6. navigation */
.nav{border-bottom:var(--border) solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);min-height:64px}
.nav__links{display:flex;align-items:center;gap:var(--s-6);margin:0;padding:0;list-style:none}
.nav__links a{font-size:var(--fs-small);font-weight:500;color:var(--fg-muted);text-decoration:none;padding:var(--s-2) 0;border-bottom:2px solid transparent;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.nav__links a:hover{color:var(--fg)}
.nav__links a[aria-current=page]{color:var(--fg);border-bottom-color:var(--mark)}
.nav__cta{display:flex;align-items:center;gap:var(--s-3)}
.nav__toggle{display:none}
@media (max-width:1023px){
  .nav__inner{flex-wrap:wrap}
  .nav__toggle{display:inline-flex}
  .nav__links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:var(--s-2) 0 var(--s-4);border-top:var(--border) solid var(--line)}
  .nav__links a{display:block;padding:var(--s-3) 0;border-bottom:var(--border) solid var(--line-soft);font-size:var(--fs-body)}
  .nav__links a[aria-current=page]{border-bottom-color:var(--line-soft);box-shadow:inset 3px 0 0 var(--mark);padding-left:var(--s-3)}
  .nav.is-open .nav__links{display:flex}
  .nav__cta .btn--desktop{display:none}
}
@media (max-width:639px){.wordmark .suffix{display:none}}

/* ------------------------------------------------------------------ 7. forms */
.field{display:grid;gap:var(--s-2)}
.field__label{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);display:flex;justify-content:space-between;gap:var(--s-3)}
.field__label .opt{text-transform:none;letter-spacing:0;font-family:var(--sans);font-weight:400}
.input,.select,.textarea{
  width:100%;min-height:44px;padding:0 var(--s-3);
  background:var(--bg-raised);color:var(--fg);border:var(--border) solid var(--line);border-radius:var(--r-2);
  font-family:var(--sans);font-size:var(--fs-small);line-height:1.4;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.on-ink .input,.on-ink .select,.on-ink .textarea{background-color:var(--ink-3)}
.input::placeholder,.textarea::placeholder{color:var(--fg-muted);opacity:.8}
.input:hover,.select:hover,.textarea:hover{border-color:var(--fg-muted)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:none;border-color:var(--fg);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--focus)}
.textarea{padding:var(--s-3);min-height:120px;resize:vertical}
.select{
  appearance:none;padding-right:var(--s-8);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2356646D' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-3) center;
}
.on-ink .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%239AA8B0' stroke-width='1.5'/%3E%3C/svg%3E")}
.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--neg);box-shadow:inset 3px 0 0 var(--neg)}
.input[disabled],.select[disabled],.textarea[disabled]{opacity:.5;cursor:not-allowed;background-color:var(--bg-sunken)}
.field__hint{font-size:var(--fs-caption);color:var(--fg-muted)}
.field__error{font-size:var(--fs-caption);color:var(--neg);display:flex;gap:var(--s-2);align-items:flex-start}
.field__error::before{content:"";flex:none;width:8px;height:8px;margin-top:.45em;background:var(--neg)}
.field__error:empty{display:none}
.form-msg{display:none;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border:var(--border) solid var(--line);border-radius:var(--r-2);font-size:var(--fs-small);background:var(--bg-raised)}
.form-msg.is-visible{display:flex}
.form-msg--ok{border-color:var(--pos);color:var(--fg);background:var(--pos-wash)}
.form-msg--err{border-color:var(--neg);color:var(--fg);background:var(--neg-wash)}
.form-msg--info{border-color:var(--line)}
.form-msg .glyph{flex:none;margin-top:.3em}
.form-msg--ok .glyph{color:var(--pos)}
.form-msg--err .glyph{color:var(--neg)}

/* ------------------------------------------------------------------ 8. tables */
.table-wrap{overflow-x:auto;border:var(--border) solid var(--line);border-radius:var(--r-3);background:var(--bg-raised)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-small);min-width:560px}
.table th,.table td{padding:var(--s-3) var(--s-4);text-align:left;vertical-align:top;border-bottom:var(--border) solid var(--line-soft)}
.table thead th{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);background:var(--bg-sunken);border-bottom:var(--border) solid var(--line)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:color-mix(in srgb,var(--bg-sunken) 60%,var(--bg-raised))}
.table th[scope=row]{font-weight:500;color:var(--fg);white-space:nowrap}
.table .num,.table td.num,.table th.num{text-align:right}
.table--compare th[scope=row]{color:var(--fg-muted);font-weight:400;font-size:var(--fs-caption);width:1%}
.table--compare thead th{color:var(--fg);font-family:var(--sans);font-size:var(--fs-body);font-weight:600;letter-spacing:0;text-transform:none;background:var(--bg-raised)}
.table--compare thead th.is-hot{box-shadow:inset 0 3px 0 var(--mark)}
.table--compare tbody td{vertical-align:top}
.table--compare tfoot td{border-top:var(--border) solid var(--line);border-bottom:0;padding-top:var(--s-4);padding-bottom:var(--s-4)}
.table .yes{color:var(--pos)}
.table .no{color:var(--fg-muted)}

/* ------------------------------------------------------------------ 9. code
   on a surface, like everything else. Keywords are weight, not colour; strings are bid;
   names and numbers take two quiet hues that clear 4.5:1 on white. .on-ink keeps a dark set. */
.code{background:var(--bg-raised);color:var(--fg);border:var(--border) solid var(--line);border-radius:var(--r-3);overflow:hidden;font-size:.8125rem;line-height:1.65}
.code__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);border-bottom:var(--border) solid var(--line);background:var(--bg-sunken);color:var(--fg-muted);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase}
.code pre{margin:0;padding:var(--s-4);overflow-x:auto;font-family:var(--mono);font-size:inherit;tab-size:2;white-space:pre}
.code .c-k{color:var(--fg);font-weight:500}
.code .c-s{color:var(--pos)}
.code .c-p{color:#3A5F8A}
.code .c-n{color:#7A4E9E}
.code .c-c{color:var(--fg-muted)}
.code .c-arrow{color:var(--fg-muted)}
.on-ink .code{background:var(--ink-3);color:var(--ink-fg);border-color:var(--ink-rule);color-scheme:dark}
.on-ink .code__head{background:transparent;border-color:var(--ink-rule);color:var(--ink-muted)}
.on-ink .code .c-k{color:var(--signal);font-weight:400}
.on-ink .code .c-s{color:var(--ink-bid)}
.on-ink .code .c-p{color:#9CC2E5}
.on-ink .code .c-n{color:#E4C0F0}
.on-ink .code .c-c,.on-ink .code .c-arrow{color:var(--ink-muted)}
.copy{
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:28px;padding:0 var(--s-2) 0 var(--s-3);
  border:var(--border) solid var(--line);border-radius:var(--r-1);background:var(--bg-raised);color:var(--fg-muted);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;cursor:pointer;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.copy:hover{color:var(--fg);border-color:var(--fg-muted)}
.copy:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.on-ink .copy{background:transparent;border-color:var(--ink-rule);color:var(--ink-muted)}
.on-ink .copy:hover{color:var(--ink-fg);border-color:var(--ink-muted)}
.copy .copy__done,.copy .copy__fail{display:none}
.copy.is-done{color:var(--pos);border-color:var(--pos)}
.copy.is-done .copy__idle,.copy.is-fail .copy__idle{display:none}
.copy.is-done .copy__done{display:inline-flex;align-items:center;gap:var(--s-2)}
.copy.is-fail{color:var(--neg);border-color:var(--neg)}
.copy.is-fail .copy__fail{display:inline}

/* ------------------------------------------------------------------ 10. metrics */
.metric{display:grid;gap:var(--s-1);padding:var(--s-4) 0;border-top:var(--border) solid var(--line);align-content:start}
.metric__value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);line-height:1.05;letter-spacing:-.01em;white-space:nowrap}
.metric__value .unit{font-size:.45em;margin-left:.3em;vertical-align:baseline}
.metric__what{font-weight:600;font-size:var(--fs-small);margin-top:var(--s-2)}
.metric__cond{font-size:var(--fs-caption);color:var(--fg-muted);line-height:1.45}
.metric__source{font-size:var(--fs-label);font-family:var(--mono);letter-spacing:.04em;color:var(--fg-muted);margin-top:var(--s-1)}
.metric__source a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em}
.metric__source a:hover{text-decoration-color:currentColor}
.metric--target .metric__value::after{content:"target";font-family:var(--mono);font-size:.35em;font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);margin-left:.6em;vertical-align:middle}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--s-8)}
/* when the count is not four: as many as fit, each still wide enough to read */
.metrics--auto{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 var(--s-8)}
@media (max-width:1023px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.metrics{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ 11. status labels
   shape plus text plus colour: never colour alone. */
.tag{display:inline-flex;align-items:center;gap:var(--s-2);min-height:22px;padding:0 var(--s-2) 0 var(--s-2);border:var(--border) solid var(--line);border-radius:var(--r-1);font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-muted);background:var(--bg-raised);white-space:nowrap;line-height:1}
.tag .glyph{width:8px;height:8px;flex:none;display:inline-block}
.tag--ok{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 45%,transparent);background:var(--pos-wash)}
.tag--ok .glyph{background:currentColor;border-radius:50%}
.tag--err{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 45%,transparent);background:var(--neg-wash)}
.tag--err .glyph{background:currentColor}
.tag--warn{color:var(--fg);border-color:var(--signal);background:var(--signal-wash)}
.tag--warn .glyph{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--signal)}
.tag--idle .glyph{border:1.5px solid currentColor;border-radius:50%}
.tag--off .glyph{border:1.5px dashed currentColor;border-radius:50%}
.tag--busy .glyph{border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
.tag--on-ink{background:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.tag--busy .glyph{animation:none;border-right-color:currentColor;opacity:.6}}

/* data states inside a container: never a dash */
.state{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-8) var(--s-4);text-align:center;color:var(--fg-muted);font-size:var(--fs-small)}
.state .glyph{width:14px;height:14px;display:block}
.state--empty .glyph{border:1.5px solid currentColor;border-radius:50%}
.state--loading .glyph{border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
.state--off .glyph{border:1.5px dashed currentColor;border-radius:50%}
.state--error{color:var(--neg)}
.state--error .glyph{background:currentColor}
.state__title{color:var(--fg);font-weight:600}
.state--error .state__title{color:var(--neg)}
.skeleton{display:block;height:1em;border-radius:var(--r-1);background:linear-gradient(90deg,var(--line-soft),var(--line) 50%,var(--line-soft));background-size:200% 100%;animation:shimmer 1.4s ease infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.state--loading .glyph{animation:none;border-right-color:currentColor;opacity:.6}.skeleton{animation:none}}

/* ------------------------------------------------------------------ 12. order book, spread, tape */
.book{
  --depth-bid:var(--pos-wash);--depth-ask:var(--neg-wash);
  font-family:var(--mono);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;
  background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-3);overflow:hidden;
}
.book__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-width:0;padding:var(--s-3) var(--s-4);border-bottom:var(--border) solid var(--line)}
.book__title{font-weight:500;color:var(--fg);min-width:0}
.book__head .tag{flex:none}
.book__cols,.book__row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-3);padding:0 var(--s-4);align-items:center}
.book__cols{height:28px;color:var(--fg-muted);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase}
.book__cols span,.book__row span{text-align:right;white-space:nowrap}
.book__cols span:first-child,.book__row span:first-child{text-align:left}
.book__row{height:28px;position:relative;isolation:isolate}
.book__row::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to left,var(--depth-color,transparent) 0 calc(var(--depth,0)*1%),transparent calc(var(--depth,0)*1%));
  transition:background var(--t-slow) var(--ease);
}
.book__row--ask{--depth-color:var(--depth-ask)}
.book__row--ask .price{color:var(--neg)}
.book__row--bid{--depth-color:var(--depth-bid)}
.book__row--bid .price{color:var(--pos)}
.book__row .price{font-weight:500}
.book__row .qty,.book__row .total{color:var(--fg)}
.book__row .total{color:var(--fg-muted)}
.book__row.is-changed .qty{animation:tick var(--t-slow) var(--ease)}
@keyframes tick{0%{color:var(--fg-muted)}100%{color:var(--fg)}}
.book__row.is-changed::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mark);animation:fade 700ms var(--ease) forwards}
@keyframes fade{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.book__row.is-changed::after{animation:none;opacity:0}.book__row.is-changed .qty{animation:none}}

/* the spread line: best bid ranges right toward the axis, best ask ranges left away from it */
.spread{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);border-top:var(--border) solid var(--line);border-bottom:var(--border) solid var(--line);background:var(--bg-sunken)}
.spread__bid{text-align:right;color:var(--pos);font-weight:500}
.spread__ask{text-align:left;color:var(--neg);font-weight:500}
.spread__mid{display:inline-flex;align-items:center;gap:var(--s-2);padding:2px var(--s-2);border:var(--border) solid var(--line);border-radius:var(--r-1);color:var(--fg-muted);font-size:var(--fs-label);letter-spacing:.04em;background:var(--bg-raised)}
.spread__mid b{color:var(--fg);font-weight:500}

.tape{border-top:var(--border) solid var(--line);background:var(--bg-sunken)}
.tape__cols{border-bottom:var(--border) solid var(--line-soft)}
.tape__row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-3);padding:0 var(--s-4);height:26px;align-items:center;color:var(--fg-muted)}
.tape__row span{text-align:right;white-space:nowrap}
.tape__row span:first-child{text-align:left}
.tape__row .price.is-bid{color:var(--pos)}
.tape__row .price.is-ask{color:var(--neg)}
.tape__row:first-child{color:var(--fg)}
.book__foot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:var(--s-2) var(--s-4);border-top:var(--border) solid var(--line);color:var(--fg-muted);font-size:var(--fs-label);letter-spacing:.04em}
.book__foot>span:last-child{white-space:nowrap;flex:none}

/* ------------------------------------------------------------------ 12b. candles
   A price over time, drawn as SVG rather than pulled from a charting library: the page has no
   build and no third party runtime, and a chart in the system's own colours reads as part of the
   instrument rather than as an embed. Up is bid, down is ask, the same rule as everywhere else.
   The SVG scales to its container and the viewBox does the arithmetic. */
.chart{background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-3);overflow:hidden}
.chart__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4) var(--s-2)}
.chart__title{font-family:var(--mono);font-size:var(--fs-caption);font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart__kind{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);flex:none}
/* The plot reserves its own right margin for the price labels, so the SVG never has to carry
   text: it is stretched to the container and stretched text is distorted and tiny. */
.chart__body{padding:0 3.5rem var(--s-3) var(--s-4);min-height:100px}
.chart__plot{position:relative}
.chart__svg{display:block;width:100%;height:96px}
.chart__mark{
  position:absolute;right:calc(var(--s-3) * -1);transform:translate(100%,-50%);
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-label);
  color:var(--fg-muted);white-space:nowrap;pointer-events:none;
}
.chart__mark--lo{transform:translate(100%,50%)}
.chart__times{
  display:flex;justify-content:space-between;margin-top:var(--s-1);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;color:var(--fg-muted);
}
.chart__foot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:var(--s-2) var(--s-4) var(--s-3);border-top:var(--border) solid var(--line-soft);color:var(--fg-muted);font-size:var(--fs-label);letter-spacing:.04em}
.chart__foot .num{color:var(--fg);font-size:var(--fs-caption)}
.chart .up{fill:var(--pos);stroke:var(--pos)}
.chart .down{fill:var(--neg);stroke:var(--neg)}
.chart .grid{stroke:var(--line-soft)}
.chart .lastline{stroke:var(--fg-muted);stroke-dasharray:3 4;opacity:.6}

/* ------------------------------------------------------------------ 13. floating things: the only shadow */
.menu{position:absolute;z-index:20;min-width:200px;background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-float);padding:var(--s-1)}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:var(--s-2) var(--s-3);border:0;background:none;border-radius:var(--r-1);font-size:var(--fs-small);text-decoration:none;color:var(--fg);cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--bg-sunken)}

/* ------------------------------------------------------------------ 14. footer */
.footer{border-top:var(--border) solid var(--line);padding-block:var(--s-8);font-size:var(--fs-caption);color:var(--fg-muted)}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-3) var(--s-6)}
/* One line on a desktop: the mark and the company on the left, every document on the right. The
   list is long, so it is set at label size with a tighter gap, and it still wraps below 900px. */
.footer__links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);list-style:none;margin:0;padding:0;font-size:var(--fs-label)}
.footer__links a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.footer__links a:hover{color:var(--fg);border-color:currentColor}
.footer__entity{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.footer__entity:hover{color:var(--fg);border-color:currentColor}

/* ------------------------------------------------------------------ 15. utilities, few on purpose */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ta-r{text-align:right}
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}.mt-12{margin-top:var(--s-12)}
.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}.mb-8{margin-bottom:var(--s-8)}
.hide-sm{display:revert}
@media (max-width:639px){.hide-sm{display:none!important}}

/* ------------------------------------------------------------------ 16. the facing book
   bids and asks meet across the spread: quantities outside, prices against the axis, depth
   growing outward from it. The signature made literal, for a hero or a market header. */
.hbook{
  font-family:var(--mono);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;
  background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-3);overflow:hidden;
}
.on-ink .hbook{background:var(--ink-3)}
.hbook__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:var(--border) solid var(--line);min-width:0}
.hbook__title{font-weight:500;color:var(--fg);min-width:0}
.hbook__head .tag{flex:none}
/* one tab per market, when the instrument shows more than one. The kind is the label: it is
   the product's own word and it does not roll at midnight the way the symbols do. */
.hbook__tabs{display:flex;gap:0;padding:0 var(--s-2);border-bottom:var(--border) solid var(--line);overflow-x:auto;scrollbar-width:none}
.hbook__tabs::-webkit-scrollbar{display:none}
.hbook__tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:var(--s-2) var(--s-3);white-space:nowrap;cursor:pointer;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--fg-muted);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.hbook__tab:hover{color:var(--fg)}
.hbook__tab[aria-selected=true]{color:var(--fg);border-bottom-color:var(--mark)}
.hbook__tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.hbook__grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);grid-template-rows:32px repeat(var(--levels,5),30px);padding:var(--s-2) 0 var(--s-6)}
.hbook__axis{grid-column:2;grid-row:1/-1;background:var(--line);position:relative}
.hbook__axis::before{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:var(--mark);transform:translateX(-50%) rotate(45deg)}
.hbook__cols{display:grid;grid-template-columns:1fr 1fr;grid-row:1;align-items:center;padding:0 var(--s-4);color:var(--fg-muted);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase}
.hbook__cols--bid{grid-column:1}
.hbook__cols--bid span:last-child{text-align:right;color:var(--pos)}
.hbook__cols--ask{grid-column:3}
.hbook__cols--ask span:first-child{color:var(--neg)}
.hbook__cols--ask span:last-child{text-align:right}
.hbook__mid{grid-column:2;grid-row:-1;align-self:end;display:flex;justify-content:center;align-items:center;overflow:visible;z-index:1;transform:translateY(calc(100% + var(--s-2)))}
.hbook__mid b{white-space:nowrap;font-weight:500;font-size:var(--fs-label);letter-spacing:.04em;color:var(--fg-muted);background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-1);padding:2px var(--s-2)}
.on-ink .hbook__mid b{background:var(--ink-2)}
.hbook__mid b span{color:var(--fg)}
.hbook__level{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--s-3);padding:0 var(--s-4);position:relative;isolation:isolate}
.hbook__level::before{
  content:"";position:absolute;inset:2px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--dir),var(--depth-color) 0 calc(var(--depth,0)*1%),transparent calc(var(--depth,0)*1%));
  transition:background var(--t-slow) var(--ease);
}
.hbook__level--bid{grid-column:1;--dir:to left;--depth-color:var(--pos-wash)}
.hbook__level--ask{grid-column:3;--dir:to right;--depth-color:var(--neg-wash)}
.hbook__level span{white-space:nowrap}
.hbook__level .price{font-weight:500}
.hbook__level--bid .qty{text-align:left;color:var(--fg)}
.hbook__level--bid .price{text-align:right;color:var(--pos)}
.hbook__level--ask .price{text-align:left;color:var(--neg)}
.hbook__level--ask .qty{text-align:right;color:var(--fg)}
/* a level the book does not have: blank, because in a book blank is the meaning. A side with
   nothing in it says so rather than leaving the reader to guess. */
.hbook__level.is-none::before{background:none}
.hbook__level.is-none .price{color:var(--fg-muted);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase}
.hbook__level.is-changed::after{content:"";position:absolute;top:2px;bottom:2px;width:2px;background:var(--mark);animation:fade 700ms var(--ease) forwards}
.hbook__level--bid.is-changed::after{right:0}
.hbook__level--ask.is-changed::after{left:0}
.hbook__foot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-2) var(--s-4);border-top:var(--border) solid var(--line);color:var(--fg-muted);font-size:var(--fs-label);letter-spacing:.04em}
.hbook__last{white-space:nowrap;flex:none}
.hbook__last .price,.hbook__last .qty,.hbook__last .seq{color:var(--fg);font-size:var(--fs-caption)}
.hbook__last .price.is-bid{color:var(--pos)}
.hbook__last .price.is-ask{color:var(--neg)}
.hbook__sep{opacity:.5;margin:0 .3em}
@media (max-width:639px){
  .hbook__grid{grid-template-rows:30px repeat(var(--levels,5),28px)}
  .hbook__level,.hbook__cols{padding:0 var(--s-3);gap:var(--s-2)}
  .hbook__foot{flex-direction:column;gap:var(--s-1)}
}
@media (prefers-reduced-motion:reduce){.hbook__level.is-changed::after{animation:none;opacity:0}}

/* ------------------------------------------------------------------ 17. the document
   Long form pages: whitepaper, reliability, throughput, integrity. The landing's own top bar, a
   sidebar that is a table of contents rather than a menu, and a prose column at the reading
   measure. The sidebar sticks; the bar does not, here or on the landing. The body is generated from markdown, so everything here is styled by
   element: the renderer emits no class the writer has to remember. */
.doc{
  display:grid;grid-template-columns:232px minmax(0,1fr);gap:0 var(--s-12);
  width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  padding-block:var(--s-12) var(--s-24);align-items:start;
}
/* Two widths, on purpose: prose stays at the reading measure, and the things you look at rather
   than read (figures, tables, code, the section rules) get the whole column. */
.doc__body{max-width:900px;min-width:0}
.doc__body > :is(p,ul,ol,blockquote,.thm,.proof){max-width:var(--measure)}

/* ---- the sidebar: where you are in a set of documents, and where you are inside this one */
.doc__nav{position:sticky;top:var(--s-8);display:grid;gap:var(--s-8);max-height:calc(100vh - var(--s-16));overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--s-4)}
.doc__group{display:grid;gap:var(--s-1)}
.doc__group > .label{margin-bottom:var(--s-2)}
.doc__group a{
  display:block;padding:var(--s-1) 0 var(--s-1) var(--s-3);margin-left:-1px;
  border-left:var(--border) solid var(--line);
  font-size:var(--fs-small);line-height:1.4;color:var(--fg-muted);text-decoration:none;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.doc__group a:hover{color:var(--fg);border-left-color:var(--fg-muted)}
.doc__group a.is-current{color:var(--fg);font-weight:600;border-left:2px solid var(--mark);padding-left:calc(var(--s-3) - 1px)}
/* the open document's own sections, one step in and one step quieter */
.doc__toc{display:grid;gap:0;margin:var(--s-2) 0 var(--s-4)}
.doc__toc a{font-size:var(--fs-caption);color:var(--fg-muted);padding-block:3px}
.doc__blurb{font-family:var(--mono);font-size:var(--fs-label);line-height:1.5;color:var(--fg-muted);padding:0 0 var(--s-2) var(--s-3);border-left:var(--border) solid var(--line)}

.doc__toggle{display:none}
@media (max-width:1023px){
  .doc{grid-template-columns:minmax(0,1fr);gap:0;padding-block:var(--s-8) var(--s-16)}
  .doc__nav{position:static;max-height:none;overflow:visible;display:none;margin-bottom:var(--s-8);padding-bottom:var(--s-6);border-bottom:var(--border) solid var(--line)}
  .doc__nav.is-open{display:grid}
  .doc__toggle{display:inline-flex;justify-self:start;margin-bottom:var(--s-6)}
}

/* ---- prose. Element selectors on purpose: the markdown carries no classes. */
.doc__body > h1{font-size:clamp(2rem,1.45rem + 2.4vw,3.25rem);line-height:var(--lh-snug);letter-spacing:var(--track-h2);font-weight:700;text-wrap:balance;margin-bottom:var(--s-6)}
/* The document's own scale. It is not the landing's: between a 52px title and 19px body there
   has to be something, and --fs-h3 (22px) as a section head left h3 at 17px, SMALLER than the
   paragraph it introduces. 52 / 34 / 22 / 19 is the ladder. */
.doc__body > h2{font-size:clamp(1.625rem,1.4rem + 1.05vw,2.125rem);font-weight:700;letter-spacing:var(--track-h2);line-height:1.2;margin-top:var(--s-16);padding-top:var(--s-6);border-top:var(--border) solid var(--line);text-wrap:balance}
/* only the h2 that opens the document, directly under its title, skips the divider */
.doc__body > h1 + h2{margin-top:var(--s-8);padding-top:0;border-top:0}
/* the source already drew the divider: never two lines for one break */
.doc__body > hr + h2{margin-top:var(--s-6);padding-top:0;border-top:0}
.doc__body h3{font-size:clamp(1.25rem,1.15rem + .3vw,1.375rem);font-weight:600;margin-top:var(--s-12);letter-spacing:-.01em;line-height:1.3;text-wrap:balance}
.doc__body h4{font-size:var(--fs-body);font-weight:600;margin-top:var(--s-8);letter-spacing:-.005em}
.doc__body p{margin-top:var(--s-4);text-wrap:pretty}
.doc__body h1+p,.doc__body h2+p,.doc__body h3+p,.doc__body h4+p{margin-top:var(--s-3)}
.doc__body ul,.doc__body ol{margin-top:var(--s-4);padding-left:var(--s-6);display:grid;gap:var(--s-2)}
.doc__body li{text-wrap:pretty}
.doc__body li::marker{color:var(--fg-muted)}
.doc__body li>ul,.doc__body li>ol{margin-top:var(--s-2)}
.doc__body a{color:inherit;text-decoration:underline;text-decoration-color:var(--fg-muted);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color var(--t) var(--ease)}
.doc__body a:hover{text-decoration-color:currentColor}
.doc__body strong{font-weight:600}
.doc__body hr{border:0;border-top:var(--border) solid var(--line);margin:var(--s-12) 0}
.doc__body p code,.doc__body li code,.doc__body td code{white-space:nowrap}

/* a headline anchor that appears on approach and is reachable by keyboard */
.doc__body h2,.doc__body h3{position:relative}
.doc__body :is(h2,h3)>.anchor{position:absolute;left:-1.1em;top:0;width:1.1em;text-align:left;color:var(--fg-muted);text-decoration:none;opacity:0;font-weight:400;transition:opacity var(--t) var(--ease)}
.doc__body :is(h2,h3):hover>.anchor,.doc__body .anchor:focus-visible{opacity:1}
@media (max-width:1023px){.doc__body :is(h2,h3)>.anchor{display:none}}

/* code blocks: the same block the landing uses, without a head */
.doc__body pre{
  margin-top:var(--s-6);padding:var(--s-4);overflow-x:auto;white-space:pre;
  background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-3);
  font-family:var(--mono);font-size:.8125rem;line-height:1.65;
}
.doc__body pre code{background:none;padding:0;font-size:inherit;white-space:pre}

/* tables: the system's table, reached by element because markdown emits none of its classes */
.doc__body .table-wrap{margin-top:var(--s-6)}
.doc__body table{width:100%;border-collapse:collapse;font-size:var(--fs-small);min-width:520px}
.doc__body th,.doc__body td{padding:var(--s-3) var(--s-4);text-align:left;vertical-align:top;border-bottom:var(--border) solid var(--line-soft)}
.doc__body thead th{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);background:var(--bg-sunken);border-bottom:var(--border) solid var(--line);white-space:nowrap}
.doc__body tbody tr:last-child td{border-bottom:0}
/* the row label column: enough width that a short phrase does not break over three lines
   while a prose column beside it has room to spare */
.doc__body :is(th,td):first-child{min-width:8.5rem}
.doc__body :is(td,th).num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* an aside the author marked with a blockquote: the signal as a mark, never as text colour */
.doc__body blockquote{
  margin-top:var(--s-6);padding:var(--s-3) var(--s-4);
  border-left:2px solid var(--mark);background:var(--signal-wash);border-radius:0 var(--r-2) var(--r-2) 0;
}
.doc__body blockquote p:first-child{margin-top:0}

/* figures and their captions */
.doc__body figure{margin-top:var(--s-8)}
/* A diagram scaled to a phone's width is a picture of a diagram. Below 640 it keeps a legible
   size and scrolls inside its own box, the same bargain the tables make. */
@media (max-width:639px){
  .doc__body figure{overflow-x:auto;overscroll-behavior-x:contain}
  .doc__body figure svg{min-width:560px}
}
.doc__body figure svg{width:100%;height:auto;display:block}
.doc__body figcaption{font-size:var(--fs-caption);line-height:1.5;color:var(--fg-muted);margin-top:var(--s-3);max-width:640px}

/* ---- mathematics. A claim is a named block; its proof is visibly a different thing. */
.thm{background:var(--bg-raised);border:var(--border) solid var(--line);border-left:2px solid var(--mark);border-radius:0 var(--r-3) var(--r-3) 0;padding:var(--s-4) var(--s-6);margin-top:var(--s-8)}
.thm .lbl{display:block;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted);margin-bottom:var(--s-2)}
.thm p{margin-top:0}
.thm p+p{margin-top:var(--s-3)}
.thm--def{border-left-color:var(--fg)}
.thm--cor{border-left-color:var(--line)}
.proof{border-left:var(--border) solid var(--line);padding-left:var(--s-6);margin:var(--s-4) 0 0 var(--s-1)}
.proof p{font-size:var(--fs-small);margin-top:var(--s-2)}
.proof p:first-child{margin-top:0}
.proof .lbl{font-style:italic;color:var(--fg-muted);margin-right:.4em}
.eq{background:var(--bg-raised);border:var(--border) solid var(--line);border-radius:var(--r-3);padding:var(--s-6);margin-top:var(--s-6);text-align:center;overflow-x:auto}
.eq math,.eq .expr{font-family:var(--mono);font-size:.9375rem;line-height:1.9;white-space:pre;display:inline-block;text-align:left}
.eq .expr .op{color:var(--fg-muted)}

/* ---- the foot of a document: where to go next */
.doc__next{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-24);padding-top:var(--s-6);border-top:var(--border) solid var(--line)}