/* ── one token layer, shared with the application ────────────────────────────
   The public pages had their own palette: the same names with different values,
   which is how a brand comes to mean one blue on the marketing page and another
   two clicks later. They now read from tokens.js, like everything else.

   --alt is kept because the public pages alternate section grounds and the
   application does not; it maps onto an existing surface rather than inventing
   a colour. */
:root{
  --bg:#F4F6F8;--panel:#FFFFFF;--raise:#FAFBFC;--sunk:#EDF0F3;--ink:#111519;--ink2:#38424E;--muted:#5E6976;--faint:#8A94A1;--line:#DFE4E9;--hair:#EAEEF2;--control:#7C8894;--brand:#0F4C81;--brand-ink:#FFFFFF;--brand-soft:#EEF4FC;--ok:#0A7A46;--ok-bg:#E7F6EC;--ok-line:#BCDFC9;--hold:#8A6B08;--hold-bg:#FFF4CE;--hold-line:#E4D4A4;--no:#7A0C14;--no-bg:#FDE7E9;--no-line:#F0CCC5;--other:#2E2478;--other-bg:#F1EEFF;--other-line:#DACDEE;--neutral:#374151;--neutral-bg:#F3F4F6;--focus:#0F6CBD;
  --sans:system-ui,"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Noto Sans Mono",monospace;
  --measure:68ch;
  --space-hair:2px;--space-tight:4px;--space-snug:6px;--space-base:8px;--space-gutter:12px;--space-card:16px;--space-section:24px;--space-block:32px;--space-major:40px;--space-page:48px;--text-micro:10.5px;--text-meta:12px;--text-small:13px;--text-body:15px;--text-body-large:16px;--text-lead:17px;--text-h3:18px;--text-h2:21px;--text-h1:27px;--text-display:34px;--lead-tight:1.25;--lead-snug:1.4;--lead-body:1.55;--lead-loose:1.7;--radius-control:6px;--radius-panel:10px;--radius-chip:6px;--border-width:1px;--focus-ring:2px;--focus-offset:2px;--shadow-raise:0 1px 2px rgba(17,21,25,.06);--shadow-panel:0 1px 3px rgba(17,21,25,.08);--shadow-dialog:0 12px 40px rgba(17,21,25,.22);--shell-top-bar:50px;--shell-rail-collapsed:72px;--shell-rail-expanded:240px;--shell-command-bar:46px;--shell-content-max:1600px;--shell-context-pane:360px;--shell-context-pane-from:1600px;--shell-reading-max:760px;--shell-public-max:1400px;--shell-touch-min:44px;--shell-touch-external:48px;--shell-touch-dense:28px;--motion-fast:120ms;--motion-base:160ms;--motion-slow:220ms;--motion-ease:cubic-bezier(.2,0,.2,1);
  color-scheme:light dark;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1317;--panel:#171C22;--raise:#1D232A;--sunk:#101519;--ink:#E8EDF2;--ink2:#C3CCD6;--muted:#95A1AE;--faint:#6F7C8A;--line:#2A323B;--hair:#222930;--control:#7A8798;--brand:#5CA8F0;--brand-ink:#0B1015;--brand-soft:#16242F;--ok:#6ED79A;--ok-bg:#13251B;--ok-line:#245437;--hold:#E8C468;--hold-bg:#241E10;--hold-line:#5A4A20;--no:#F08C90;--no-bg:#291418;--no-line:#5E2A2E;--other:#B3A4F0;--other-bg:#1E1A2E;--other-line:#3E3566;--neutral:#AEB8C4;--neutral-bg:#1A1F25;--focus:#7FC1FF}}
:root[data-theme="dark"]{--bg:#0F1317;--panel:#171C22;--raise:#1D232A;--sunk:#101519;--ink:#E8EDF2;--ink2:#C3CCD6;--muted:#95A1AE;--faint:#6F7C8A;--line:#2A323B;--hair:#222930;--control:#7A8798;--brand:#5CA8F0;--brand-ink:#0B1015;--brand-soft:#16242F;--ok:#6ED79A;--ok-bg:#13251B;--ok-line:#245437;--hold:#E8C468;--hold-bg:#241E10;--hold-line:#5A4A20;--no:#F08C90;--no-bg:#291418;--no-line:#5E2A2E;--other:#B3A4F0;--other-bg:#1E1A2E;--other-line:#3E3566;--neutral:#AEB8C4;--neutral-bg:#1A1F25;--focus:#7FC1FF}
:root{--alt:var(--sunk)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);
  /* "system-ui" first: on Windows the platform resolves it to Segoe UI Variable,
     which is the Office familiarity we want, chosen rather than imposed. See the
     longer note in page.js. */
  font:400 16px/1.6 system-ui,"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.86em}
a{color:var(--brand);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}

.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.bar .in{max-width:1080px;margin:0 auto;padding:0 22px;height:56px;display:flex;align-items:center;gap:18px}
.mark{font-weight:600;font-size:16px;letter-spacing:-.014em;display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.glyph{color:var(--brand);flex:none}
.bar nav{margin-left:auto;display:flex;gap:20px;font-size:14px;align-items:center}
.bar nav a{color:var(--muted);text-decoration:none;white-space:nowrap}
.bar nav a:hover{color:var(--ink)}
.creed{border-bottom:1px solid var(--line);background:var(--alt)}
.creed .in{max-width:1080px;margin:0 auto;padding:11px 22px;display:flex;gap:8px 26px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.creed b{color:var(--ink2);font-weight:600}
.creed span{display:flex;align-items:center;gap:9px}
.creed span::before{content:"";width:5px;height:5px;border:1.5px solid var(--brand);flex:none;transform:rotate(45deg)}
.bar .cta{background:var(--brand);color:var(--brandink);padding:8px 15px;border-radius:7px;font-weight:600;font-size:13.5px}
.bar .cta:hover{opacity:.9;color:var(--brandink)}
/* The header holds one line and never wraps, so on a narrow screen it can only
   hold fewer things. It was holding all of them: at 390px the bar needs about
   458px for its contents and has 346, and the item that fell off the right edge
   was the call to action — the one thing on the page with a job.
   What goes, and why:
     · below 860, the section links, which are anchors into a page the reader can
       simply scroll;
     · below 640, "Founder", and the header's Request access — not because it
       matters least but because the hero repeats it as a full-width button on
       the first screen, so on a phone the header copy is a duplicate competing for
       the same 130px that was pushing everything off;
     · below 500, "Open a reference", which is reached from the link in the
       letter that sent the reader here, not from our navigation.
   Sign in survives every step: it is the only item a returning reader cannot get
   to any other way. */
@media(max-width:859px){.bar nav a.hide-s{display:none}}
@media(max-width:639px){.bar nav a.hide-m{display:none}}
@media(max-width:500px){.bar nav a.hide-xs{display:none}}
@media(max-width:639px){
  .bar .in{padding:0 16px;gap:12px}
  .bar nav{gap:16px}
}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--brand);color:var(--brandink);
  padding:11px 18px;border-radius:0 0 8px 0;text-decoration:none;font-weight:600}
.skip:focus{left:0}

section{padding:64px 0}
section.alt{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.col{max-width:720px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 20px}
h1{font-size:clamp(33px,5.6vw,54px);line-height:1.06;letter-spacing:-.032em;font-weight:600;margin:0 0 22px;max-width:19ch;text-wrap:balance}
h2{font-size:clamp(25px,3.6vw,36px);line-height:1.15;letter-spacing:-.025em;font-weight:600;margin:0 0 18px;max-width:20ch;text-wrap:balance}
h3{font-size:18px;font-weight:600;letter-spacing:-.011em;margin:0 0 7px}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.5;color:var(--ink2);margin:0 0 32px;max-width:56ch}
p{margin:0 0 16px;max-width:66ch;color:var(--ink2)}
.sub{color:var(--muted);font-size:15px}
.tight{font-size:14px;color:var(--muted)}

.hero{padding:76px 0 64px}
@media(min-width:900px){.hero{padding:96px 0 76px}}
.btn{display:inline-block;background:var(--brand);color:var(--brandink);text-decoration:none;font-weight:600;
  padding:13px 24px;border-radius:9px;transition:opacity 120ms ease,transform 120ms ease}
.btn:hover{opacity:.9;color:var(--brandink)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.grid{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px}
.card p:last-child{margin-bottom:0}

.steps{counter-reset:s;display:grid;gap:30px;margin-top:34px}
.step{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:start}
.step .n{counter-increment:s;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:13.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.step .n::before{content:counter(s)}
.step p{margin:6px 0 0}

.refuse{display:grid;gap:0;margin-top:8px}
.refuse div{padding:18px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:1fr;gap:4px}
@media(min-width:720px){.refuse div{grid-template-columns:minmax(0,15rem) 1fr;gap:0 32px;align-items:baseline}}
.refuse b{font-weight:600;color:var(--ink)}
.refuse span{color:var(--muted);font-size:15px}

label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:18px 0 7px}
input,select,textarea{font:inherit;width:100%;padding:12px 13px;color:var(--ink);background:var(--sunk);
  border:1px solid var(--line);border-radius:8px}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
textarea{min-height:92px;resize:vertical}
button{font:inherit;font-weight:600;padding:13px 24px;border:0;border-radius:9px;background:var(--brand);
  color:var(--brandink);cursor:pointer;width:100%;margin-top:22px}
button:hover{opacity:.9}
.note{border-left:3px solid var(--line);background:var(--sunk);padding:13px 16px;border-radius:0 8px 8px 0;font-size:14.5px;color:var(--ink2);margin:0 0 20px}
.note.no{border-left-color:var(--no);color:var(--no)}
.note.ok{border-left-color:var(--ok)}

.creedline{margin:26px 0 0;font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.proof{margin-top:30px;padding:24px 26px;border:1px solid var(--line);border-radius:14px;background:var(--panel);max-width:680px}
.proof-lead{margin:0 0 18px;font-size:14.5px;color:var(--ink2);max-width:60ch}
.proof-foot{margin:16px 0 0;font-size:14px;color:var(--muted)}
.proof-foot strong{color:var(--ink)}
.hashes{display:grid;gap:14px}
.hashes div{display:grid;gap:4px}
.hashes span{font-size:12.5px;color:var(--muted)}
.hashes code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;word-break:break-all;color:var(--ink)}
.hashes div:first-child code{color:var(--no)}
.hashes div:last-child code{color:var(--ok)}
.rules{display:grid;gap:0;margin-top:38px}
.rules article{display:grid;grid-template-columns:1fr;gap:0;padding:30px 0;border-top:1px solid var(--line)}
@media(min-width:820px){.rules article{grid-template-columns:5rem minmax(0,26ch) minmax(0,1fr);gap:0 34px;align-items:start}}
.rules .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--faint);
  margin:0 0 10px;font-variant-numeric:tabular-nums;letter-spacing:.08em}
@media(min-width:820px){.rules .n{margin:3px 0 0}}
.rules h3{margin:0 0 10px;font-size:20px;letter-spacing:-.018em}
@media(min-width:820px){.rules h3{margin:0}}
.rules .sub{margin:0 0 12px;max-width:58ch}
.rules .deny{margin:0;font-size:14.5px;color:var(--ink2);padding-left:15px;border-left:2px solid var(--line)}
footer{border-top:1px solid var(--line);padding:44px 0 64px;background:var(--alt)}
footer .links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:20px;font-size:14px}
footer .links a{color:var(--muted);text-decoration:none}
footer .links a:hover{color:var(--ink)}
footer p{font-size:13px;color:var(--muted);max-width:74ch}

/* Digest comparison — the visual centre of the page. Two files, one name, one
   difference. Difference is carried by a symbol and a word as well as colour,
   because colour alone fails for a printed page and for a reader who cannot
   separate the hues. */
.compare{margin-top:34px;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.compare-head{padding:20px 24px;border-bottom:1px solid var(--line);background:var(--sunk)}
.compare-head b{display:block;font-size:15px;color:var(--ink)}
.compare-head span{font-size:13.5px;color:var(--muted)}
.compare-body{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:820px){.compare-body{grid-template-columns:1fr auto 1fr}}
.file{padding:22px 24px;display:grid;gap:9px;align-content:start;min-width:0}
.file+.file{border-top:1px solid var(--line)}
@media(min-width:820px){.file+.file{border-top:0}}
.file .who{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.file .nm{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:14px;color:var(--ink);word-break:break-all}
.file .dg{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;
  word-break:break-all;overflow-wrap:anywhere;color:var(--ink2);background:var(--sunk);border:1px solid var(--hair);
  border-radius:8px;padding:10px 12px}
.file .sz{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.file.a .dg{border-color:color-mix(in srgb,var(--no) 40%,var(--hair))}
.file.b .dg{border-color:color-mix(in srgb,var(--ok) 40%,var(--hair))}
.vs{display:grid;place-items:center;padding:8px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:820px){.vs{border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:22px 20px}}
.vs b{font-size:22px;line-height:1;color:var(--ink);font-weight:400}
.vs span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--faint);margin-top:6px}
.compare-foot{padding:18px 24px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink2)}
.compare-foot strong{color:var(--ink)}

/* Grading. Four levels, each stating what it still yields — the table used to
   read as a list of losses, which is not what it measures. */
/* Four levels, and they are a scale rather than four cards. Set as columns they
   gave each about thirty characters a line, which turns sentences into columns
   of fragments — and this table is the product's central idea, so it has to be
   readable before it is decorative. As rows it keeps the order the scale
   depends on and gives the prose the full width of the page. */
.grades{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--line)}
.grade{display:grid;grid-template-columns:1fr;gap:6px;padding:22px 0;
  border-bottom:1px solid var(--hair);min-width:0}
@media(min-width:760px){
  .grade{grid-template-columns:10.5rem minmax(0,1fr);gap:4px 30px;align-items:start}
  .grade b{grid-row:1;grid-column:1}
  .grade .what{grid-row:1;grid-column:2}
  .grade .yields{grid-row:2;grid-column:2}
}
.grade b{font-size:15.5px;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:-.008em}
.grade b::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--gc);flex:none}
.grade:nth-child(1){--gc:var(--ok)}
.grade:nth-child(2){--gc:#B08900}
.grade:nth-child(3){--gc:#C4632A}
.grade:nth-child(4){--gc:var(--muted)}
.grade .what{font-size:15px;line-height:1.6;color:var(--ink2);margin:0;max-width:62ch}
.grade .yields{font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:62ch}
.grade .yields em{font-style:normal;font-weight:600;color:var(--ink2);font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;margin-right:8px}

/* Three verdicts, shown as the product's actual vocabulary. */
.verdicts{display:grid;gap:0;margin-top:26px;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.verdicts div{padding:18px 22px;display:grid;gap:5px;grid-template-columns:1fr}
@media(min-width:760px){.verdicts div{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:0 28px;align-items:baseline}}
.verdicts div+div{border-top:1px solid var(--hair)}
.verdicts b{font-size:15px;color:var(--ink);display:flex;align-items:center;gap:9px}
.verdicts b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vc);flex:none}
.verdicts div:nth-child(1){--vc:var(--ok)}
.verdicts div:nth-child(2){--vc:#B08900}
.verdicts div:nth-child(3){--vc:var(--no)}
.verdicts span{font-size:14.5px;color:var(--ink2)}

.api{margin-top:26px;border:1px solid var(--line);border-radius:13px;background:var(--panel);overflow:hidden}
.api-head{padding:16px 20px;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:var(--faint)}
.api pre{margin:0;padding:18px 20px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:13px;line-height:1.65;color:var(--ink2);background:var(--sunk)}
.api-foot{padding:15px 20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

.todo{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  padding:1px 6px;border:1px dashed var(--faint);border-radius:5px;color:var(--faint);white-space:nowrap;vertical-align:baseline}

.prose h3{margin-top:26px}
.prose h3:first-child{margin-top:0}

/* Printed and filed. This audience prints pages and puts them on a file, so the
   printed sheet has to carry the identity, the disclaimer and the URL it came
   from — otherwise it is an anonymous page in a bundle. */
@media print{
  :root{--bg:#fff;--alt:#fff;--panel:#fff;--sunk:#fff;--ink:#000;--ink2:#1a1a1a;--muted:#3a3a3a;
    --faint:#5a5a5a;--line:#b9b9b9;--hair:#d6d6d6;--brand:#000;--ok:#000;--no:#000}
  .bar,.creed,.btn,.row,form,button,.api-foot{display:none!important}
  body{font-size:11pt;background:#fff;color:#000}
  section{padding:12pt 0;border:0!important;background:#fff!important}
  h1{font-size:20pt;max-width:none}h2{font-size:14pt;max-width:none;margin-top:6pt}
  p,.sub,.tight{color:#000;max-width:none}
  .grades{grid-template-columns:repeat(2,1fr)}
  a[href^="/"]::after,a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  .printfoot{display:block!important;margin-top:14pt;padding-top:8pt;border-top:1pt solid #999;font-size:9pt;color:#000}
  footer{border:0;background:#fff}
  section,footer,.wrap{break-inside:auto}
}
.printfoot{display:none}

/* Assessment document. Label on the left, value on the right — the shape of a
   filed record rather than a marketing panel, because that is what it is. */
.doc{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;margin-top:26px}
.docrow{display:grid;grid-template-columns:1fr;gap:6px;padding:18px 22px}
@media(min-width:800px){.docrow{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:0 30px;align-items:start}}
.docrow+.docrow{border-top:1px solid var(--hair)}
.docrow>span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--faint);padding-top:2px}
.docrow>div{font-size:15px;color:var(--ink2);min-width:0}
.docrow b{color:var(--ink)}
.docrow b.v-rely{color:var(--ok)}
.docrow b.v-inconclusive{color:#8A6A00}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .docrow b.v-inconclusive{color:#E0B44A}}
:root[data-theme=dark] .docrow b.v-inconclusive{color:#E0B44A}
.docrow b.v-do_not_rely{color:var(--no)}
.fieldlist{margin:0;padding-left:19px;display:grid;gap:6px}
.fieldlist li{color:var(--ink2)}
.code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  padding:2px 7px;border:1px solid var(--line);border-radius:6px;background:var(--sunk);color:var(--ink2);
  margin:0 3px 4px 0;white-space:nowrap}
.brk{word-break:break-all;overflow-wrap:anywhere}
/* The sample assessment uses the site's own vocabulary and adds almost nothing.
   It previously had a private typographic system — its own paper tone, its own
   serif, its own exhibit component — which made the most important page on the
   site look like it came from somewhere else. The comparison panel it needs
   already exists on the home page and is the same thing: two files, one
   difference. Reusing it means one component to keep right rather than two that
   drift.
   What is added here is only what the document form genuinely needs: an answer
   set at the weight of a section heading, because it is the most important
   sentence on the page, and a technical appendix that folds away. */
.answer{font-size:clamp(28px,4.6vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.1;
  margin:0 0 18px;max-width:22ch;text-wrap:balance;color:var(--ink)}
.answer.hold{color:#7A5B00}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .answer.hold{color:#E3BC5A}}
:root[data-theme=dark] .answer.hold{color:#E3BC5A}

.numbered{list-style:none;counter-reset:pp;margin:26px 0 0;padding:0}
.numbered>li{counter-increment:pp;position:relative;padding-left:3rem;margin:0 0 22px;max-width:66ch;
  color:var(--ink2);font-size:15.5px;line-height:1.65}
.numbered>li::before{content:counter(pp,decimal-leading-zero);position:absolute;left:0;top:.3em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.06em}

.appendix{margin-top:34px;border-top:1px solid var(--line);padding-top:22px}
.appendix summary{cursor:pointer;list-style:none;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.appendix summary::-webkit-details-marker{display:none}
.appendix summary::after{content:" +";color:var(--faint)}
.appendix[open] summary::after{content:" \2212"}
.appendix summary:hover{color:var(--ink)}
.appendix dl{display:grid;grid-template-columns:1fr;margin:20px 0 0}
@media(min-width:680px){.appendix dl{grid-template-columns:15rem minmax(0,1fr)}}
.appendix dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:11px 0 3px;border-top:1px solid var(--hair)}
.appendix dd{margin:0;padding:11px 0 3px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--ink2);word-break:break-all;overflow-wrap:anywhere}
@media(min-width:680px){.appendix dd{border-top:1px solid var(--hair)}}