/* benchturn.com design system
   Warm off-white paper, ink text, Geist + Geist Mono, hairline borders, pill buttons,
   dark editor-window cards. Page-specific CSS lives in a <style> in that page.

   Contents
   1  Tokens            8  Cards, grids, sections
   2  Base              9  Dark window / terminal
   3  Type              10 Tables
   4  Layout            11 Details / FAQ
   5  Nav               12 Forms
   6  Buttons, install  13 Prose (long articles)
   7  Pills, callouts   14 Lists, key-value, stats, misc
                        15 Footer, motion
*/

/* 1 ─ Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#f7f7f4; --bg-2:#efeeea; --bg-3:#e9e8e2; --card:#fbfbf9;
  --ink:#26251e; --ink-2:#55534a; --ink-3:#6b695f;
  --line:rgba(38,37,30,.10); --line-2:rgba(38,37,30,.16); --line-3:rgba(38,37,30,.28);
  --win:#1b1b19; --win-2:#232320; --win-3:#2b2b28; --win-ink:#e6e4dc; --win-dim:#8f8d84; --win-line:rgba(255,255,255,.07);
  --ok:#5fb37c; --accent:#d9a35b; --blue:#7aa7d9; --red:#e07a6a;
  /* light-surface status colors (AA on --bg / --card) */
  --ok-ink:#2f6b43; --ok-bg:#e3efe6;
  --warn-ink:#7f5512; --warn-bg:#f5ead6;
  --bad-ink:#a1352a; --bad-bg:#f6e1dc;
  --info-ink:#2d5a8c; --info-bg:#e1eaf4;
  --focus:#3b6fd1;
  --r:10px; --r-lg:14px; --r-xl:16px; --maxw:1200px; --measure:68ch;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-win:0 30px 60px -20px rgba(30,28,20,.35),0 0 0 1px rgba(0,0,0,.25);
}

/* 2 ─ Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
/* faint grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
a{color:inherit}
img,svg,video{max-width:100%}
img{height:auto}
::selection{background:#e2dccd;color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:200;text-decoration:none}
.skip:focus{left:16px}
.sr-only,.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* 3 ─ Type ───────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-weight:500;color:var(--ink);text-wrap:balance}
h1,.display{letter-spacing:-.025em;line-height:1.08;font-size:clamp(34px,5.2vw,58px);margin:0 0 18px;max-width:17ch;font-weight:500}
.display-sm{letter-spacing:-.02em;line-height:1.12;font-size:clamp(28px,3.6vw,40px);margin:0 0 14px;font-weight:500}
h2{letter-spacing:-.02em;line-height:1.12;font-size:clamp(28px,3.6vw,42px);margin:0 0 16px;max-width:20ch}
h3{letter-spacing:-.01em;font-size:18px;line-height:1.35;margin:0 0 6px}
h4{font-size:15px;margin:0 0 6px}
p{margin:0 0 1em}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);margin:0 0 28px;max-width:52ch;line-height:1.5}
.lede .line{display:inline-block}  /* a sentence never breaks mid-way; the wrap lands at the full stop */
.sub{color:var(--ink-2);max-width:52ch;margin:0;font-size:17px}
.eyebrow,.label{display:block;font-size:13.5px;color:var(--ink-3);margin:0 0 12px;font-weight:400;letter-spacing:0}
.label a,.eyebrow a{color:var(--ink-2);text-decoration:none}
.label a:hover,.eyebrow a:hover{color:var(--ink)}
/* "Blog · Essay · 3 Oct 2026" rows */
.meta{display:flex;flex-wrap:wrap;gap:4px 0;align-items:center}
.meta > * + *::before{content:"·";margin:0 8px;color:var(--ink-3)}
.muted{color:var(--ink-3)}
.ink-2{color:var(--ink-2)}
.small,.fine{font-size:13.5px}
.fine{color:var(--ink-3);max-width:62ch;margin:16px 0 0}
.fine + .fine{margin-top:4px}
.fine a{color:var(--ink-2);text-underline-offset:3px}
.mono,code,kbd,samp{font-family:var(--mono)}
.nowrap{white-space:nowrap}
/* inline code chip */
:not(pre) > code,.inline-code{font-size:.86em;background:var(--bg-2);padding:1px 5px;border-radius:4px;color:var(--ink-2);overflow-wrap:anywhere}
kbd{font-size:.82em;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--card)}
/* inline text link */
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{text-decoration-color:var(--ink)}
/* quiet "Read more →" link */
.arrow-link,.more{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.arrow-link:hover,.more:hover{border-color:var(--ink)}
/* button that reads as a link */
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;cursor:pointer}
.link-btn:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* 4 ─ Layout ─────────────────────────────────────────────────────────────── */
.wrap,.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap,.container{padding:0 32px}}
.narrow{max-width:calc(760px + 64px)}
.measure{max-width:var(--measure)}
.stack > * + *{margin-top:var(--gap,16px)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* top of an inner page: eyebrow, h1, lede */
.page-head{padding-block:64px 32px}
@media(min-width:900px){.page-head{padding-block:96px 40px}}
.page-head .lede{margin-bottom:0}
.page-head + .block{border-top:0;padding-top:16px}

/* 5 ─ Nav ────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;letter-spacing:-.01em;font-size:16px;color:var(--ink);flex:none}
/* The mark: $_ in Geist Mono outlines; the cursor blinks slowly, like a prompt waiting. */
.mark{width:22px;height:22px;display:block;flex:none}
.mark .cur{animation:mark-blink 1.2s steps(1) infinite}
@keyframes mark-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mark .cur{animation:none}}
.nav-links{display:flex;align-items:center;gap:2px;min-width:0}
.nav-links a:not(.btn){text-decoration:none;font-size:14px;color:var(--ink-2);padding:6px 10px;border-radius:999px}
.nav-links a:not(.btn):hover{color:var(--ink);background:var(--bg-2)}
.nav-links a[aria-current="page"]:not(.btn){color:var(--ink)}
.nav-links .btn{height:32px;padding:0 14px;font-size:13px;margin-left:6px}
/* the Worker turns the Sign in link into this for signed-in visitors */
.nav-portal{max-width:14ch}
@media(max-width:380px){.nav-links a:not(.btn){padding:6px 7px}.nav-links .btn{padding:0 12px}}

/* 6 ─ Buttons, install line ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;
  font:500 14px/1 var(--sans);text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;color:var(--ink);background:transparent}
.btn-dark,.btn-solid{background:var(--ink);color:var(--bg)}
.btn-dark:hover,.btn-solid:hover{background:#3a3930}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-sm{height:30px;padding:0 12px;font-size:13px}
.btn-lg{height:44px;padding:0 20px;font-size:15px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.win .btn-ghost,.dark .btn-ghost{color:var(--win-ink);border-color:rgba(255,255,255,.16)}
.win .btn-ghost:hover,.dark .btn-ghost:hover{background:var(--win-3)}
/* "$ curl … | sh  [Copy]" pill. Give the button class .copy-btn (never .copy on text). */
.install{display:flex;align-items:center;max-width:100%;min-width:0;background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:4px 4px 4px 16px;font-size:13.5px}
.install code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);min-width:0;flex:1;background:none;padding:0;font-size:inherit;border-radius:0}
.install code .p{color:var(--ink-3);user-select:none}
.install .btn{height:30px;padding:0 12px;font-size:13px;margin-left:12px;flex:none}
/* a block of copyable code: <div class="codeblock"><pre><code>…</code></pre><button class="btn btn-ghost btn-sm copy-btn">Copy</button></div> */
.codeblock{position:relative}
.codeblock > .btn{position:absolute;top:8px;right:8px}
.codeblock pre{padding-right:84px}

/* 7 ─ Pills, callouts, dots ─────────────────────────────────────────────── */
.pill{display:inline-block;font-family:var(--mono);font-size:11.5px;line-height:1.5;padding:2px 8px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);white-space:nowrap}
.pill.g,.pill.ok{background:var(--ok-bg);color:var(--ok-ink)}
.pill.a,.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.bad{background:var(--bad-bg);color:var(--bad-ink)}
.pill.info{background:var(--info-bg);color:var(--info-ink)}
.win .pill,.dark .pill{font-size:10.5px;padding:2px 7px;background:#33332f;color:var(--win-dim)}
.win .pill.g,.win .pill.ok,.dark .pill.g,.dark .pill.ok{background:rgba(95,179,124,.15);color:var(--ok)}
.win .pill.a,.win .pill.warn,.dark .pill.a,.dark .pill.warn{background:rgba(217,163,91,.15);color:var(--accent)}
.win .pill.bad,.dark .pill.bad{background:rgba(224,122,106,.15);color:var(--red)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line-3);flex:none;vertical-align:middle}
.dot.ok,.dot.fresh{background:var(--ok)}
.dot.warn{background:var(--accent)}
.dot.bad{background:var(--red)}
.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:var(--r);padding:16px 18px;margin:24px 0;color:var(--ink-2);font-size:15px}
.callout > :last-child{margin-bottom:0}
.callout strong{color:var(--ink);font-weight:500}
.callout.ok{border-left-color:var(--ok);background:var(--ok-bg)}
.callout.warn{border-left-color:var(--accent);background:var(--warn-bg)}
.callout.bad{border-left-color:var(--bad-ink);background:var(--bad-bg)}
.callout.info{border-left-color:var(--info-ink);background:var(--info-bg)}

/* 8 ─ Cards, grids, sections ────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset;min-width:0}
@media(min-width:900px){.card{padding:28px}}
.card > :last-child{margin-bottom:0}
.card-sm{padding:16px}
@media(min-width:900px){.card-sm{padding:20px}}
.card h3{margin-bottom:8px}
.card .k{font-family:var(--mono);font-size:12px;color:var(--ink-3);display:block;margin-bottom:12px}
.card.dark,.card-dark{background:var(--win);color:var(--win-ink);border-color:#000;font-family:var(--mono);font-size:12.5px;line-height:1.75;overflow-x:auto}
.card.dark .dim,.card-dark .dim{color:var(--win-dim)}
.card.dark .ok,.card-dark .ok{color:var(--ok)}
a.card{display:block;text-decoration:none;transition:border-color .15s,background .15s}
a.card:hover{border-color:var(--line-3)}
.grid,.grid2,.grid3,.grid4{display:grid;gap:12px}
@media(min-width:760px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* two columns: text + visual. Add .rev to flip on desktop. */
.split{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:5fr 7fr;gap:64px}.split.rev{grid-template-columns:7fr 5fr}.split.rev > :first-child{order:2}.split.top{align-items:start}}
.split > *{min-width:0}
section.block,.block{padding:72px 0;border-top:1px solid var(--line)}
@media(min-width:900px){section.block,.block{padding:112px 0}}
.block-sm{padding:48px 0}
@media(min-width:900px){.block-sm{padding:72px 0}}
.section-head{margin-bottom:40px}
.section-head > :last-child{margin-bottom:0}

/* 9 ─ Dark window / terminal ────────────────────────────────────────────── */
.win{background:var(--win);color:var(--win-ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-win);font-size:13px}
.win-chrome{display:flex;align-items:center;height:36px;padding:0 12px;background:var(--win-2);border-bottom:1px solid var(--win-line);gap:12px}
.win-dots{display:flex;gap:6px;width:42px;flex:none}
.win-dots i{width:10px;height:10px;border-radius:50%;background:#45443f;display:block}
.win-title{flex:1;text-align:center;color:var(--win-dim);font-size:12px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-chrome::after{content:"";width:42px;flex:none}
.win-tabs{display:flex;border-bottom:1px solid var(--win-line);background:var(--win-2);overflow:hidden}
.win-tab{padding:9px 14px;font-size:12px;color:var(--win-dim);border-right:1px solid var(--win-line);font-family:var(--mono);white-space:nowrap}
.win-tab.on{color:var(--win-ink);background:var(--win)}
/* terminal text: use on a div of .ln lines or on a <pre> */
.term{padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;margin:0;color:var(--win-ink);background:var(--win)}
@media(max-width:560px){.term{font-size:11.5px;padding:12px}}
.term .ln{display:block;min-height:1.7em}
.term .pr,.term .dim{color:var(--win-dim)}
.term .ok{color:var(--ok)}
.term .am{color:var(--accent)}
.term .bl{color:var(--blue)}
.term .rd{color:var(--red)}
.caret{display:inline-block;width:7px;height:1.1em;vertical-align:-2px;background:var(--win-ink);animation:bt-blink 1s steps(2) infinite}
@keyframes bt-blink{50%{opacity:0}}
/* soft backdrop a window sits on */
.stage-bg{position:relative;border-radius:var(--r-xl);padding:20px;border:1px solid var(--line);background:
  radial-gradient(120% 90% at 15% 0%,#e7e2d6 0%,transparent 60%),
  radial-gradient(90% 80% at 100% 100%,#dcdcd4 0%,transparent 60%),var(--bg-3)}
@media(min-width:900px){.stage-bg{padding:48px}}

/* 10 ─ Tables ───────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{text-align:left;font-weight:500;font-size:12.5px;color:var(--ink-3);padding:0 16px 10px 0;border-bottom:1px solid var(--line-2);white-space:nowrap}
.table td{padding:12px 16px 12px 0;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.table tbody tr:first-child td{border-top:0}
.table th:last-child,.table td:last-child{padding-right:0}
.table td:first-child{color:var(--ink)}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table small{display:block;color:var(--ink-3);font-size:12.5px}
/* two-column command list: <table class="cmds"><tr><td>benchturn status</td><td>What …</td></tr> */
table.cmds{width:100%;border-collapse:collapse;font-size:14.5px}
.cmds th{text-align:left;font-weight:500;font-size:12.5px;color:var(--ink-3);padding:0 20px 10px 0;border-bottom:1px solid var(--line-2)}
.cmds td{padding:11px 0;border-top:1px solid var(--line);vertical-align:top}
.cmds tr:first-child td,.cmds thead + tbody tr:first-child td{border-top:0}
.cmds td:first-child{font-family:var(--mono);font-size:13px;white-space:nowrap;padding-right:20px;color:var(--ink)}
.cmds td:last-child{color:var(--ink-2)}
@media(max-width:560px){.cmds thead{display:none}.cmds td{display:block;padding:2px 0}.cmds td:first-child{padding-top:12px;white-space:normal}.cmds tr:first-child td:first-child{padding-top:0}.cmds td:last-child{border-top:0;padding-bottom:10px}}

/* 11 ─ Details / FAQ ────────────────────────────────────────────────────── */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
details + details{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:18px 0;font-size:17px;font-weight:500;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ink-3);font-weight:400;transition:transform .2s;flex:none}
details[open] > summary::after{transform:rotate(45deg)}
details > :not(summary){color:var(--ink-2);max-width:62ch}
details > :last-child{margin-bottom:18px}
details > p{margin:0 0 12px}
.details-sm summary,details.sm summary{font-size:15px;padding:12px 0}
.faq{display:grid;gap:40px}
@media(min-width:900px){.faq{grid-template-columns:4fr 8fr;gap:64px}}

/* 12 ─ Forms ────────────────────────────────────────────────────────────── */
.form{display:grid;gap:20px;max-width:640px}
.field{display:grid;gap:6px;min-width:0}
.field-row{display:grid;gap:20px}
@media(min-width:640px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
label,.field-label,legend{font-size:14px;font-weight:500;color:var(--ink)}
.optional{font-weight:400;color:var(--ink-3);font-size:13px}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),textarea,select{
  width:100%;min-width:0;font:400 15px/1.4 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  padding:10px 12px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]){height:42px}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:#9a978c}
input:hover,textarea:hover,select:hover{border-color:var(--line-3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(59,111,209,.18)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
input[disabled],textarea[disabled],select[disabled]{opacity:.6;cursor:not-allowed}
select{padding-right:36px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2355534a' stroke-width='1.5'><path d='M3 4.5l3 3 3-3'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.field-help{font-size:13.5px;color:var(--ink-3);margin:0;max-width:62ch}
.field-help a{color:var(--ink-2);text-underline-offset:3px}
.field-error{font-size:13.5px;color:var(--bad-ink);margin:0}
.field.invalid input,.field.invalid textarea,.field.invalid select,input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--bad-ink)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:8px}
/* checkbox / radio row: <label class="check"><input type="checkbox"><span>…</span></label> */
label.check,label.radio{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-weight:400;font-size:14.5px;color:var(--ink-2);cursor:pointer;line-height:1.5}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:2px 0 0;border:1px solid var(--line-3);background:var(--card);border-radius:5px;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s,border-color .15s}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23f7f7f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 6.2l2.3 2.3 4.7-5'/></svg>");background-repeat:no-repeat;background-position:center}
input[type=radio]:checked{border-color:var(--ink);box-shadow:inset 0 0 0 4px var(--card);background:var(--ink)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.invalid input[type=checkbox]{border-color:var(--bad-ink)}
/* option cards: <fieldset class="options"><label class="option"><input type="radio"><span class="option-name">…</span><span class="option-note">…</span></label> */
.options{display:grid;gap:8px}
@media(min-width:640px){.options.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.options.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.option{position:relative;display:grid;grid-template-columns:18px 1fr;column-gap:10px;row-gap:2px;align-items:start;padding:14px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;font-weight:400;transition:border-color .15s,background .15s}
.option:hover{border-color:var(--line-3)}
.option input{grid-row:span 2}
.option:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.option-name{font-weight:500;color:var(--ink);font-size:14.5px}
.option-note{color:var(--ink-3);font-size:13px}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form-note{font-size:14px;color:var(--ink-3);margin:0}
.form-note.ok{color:var(--ok-ink)}
.form-note.err{color:var(--bad-ink)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.progress{height:4px;background:var(--bg-2);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--ink);border-radius:inherit;transition:width .2s}

/* 13 ─ Prose (long articles: docs, blog, cli) ───────────────────────────── */
.prose{max-width:calc(var(--measure) + 64px)}
.article-head{padding-block:64px 8px}
@media(min-width:900px){.article-head{padding-block:96px 16px}}
.article-head .display,.article-head h1{max-width:22ch}
.byline{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin:0}
.article-body{font-size:17px;line-height:1.7;color:var(--ink-2);padding-top:24px;padding-bottom:72px}
.article-body > :first-child{margin-top:0}
.article-body p,.article-body ul,.article-body ol,.article-body dl,.article-body blockquote,.article-body pre,.article-body figure,.article-body table,.article-body .table-wrap,.article-body .callout{margin:0 0 1.15em}
.article-body h2{font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.015em;max-width:none;margin:2.2em 0 .6em;scroll-margin-top:76px}
.article-body h3{font-size:18.5px;line-height:1.35;margin:1.8em 0 .4em;scroll-margin-top:76px}
.article-body h4{font-size:16px;margin:1.6em 0 .4em}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;text-decoration-thickness:1px}
.article-body a:hover{text-decoration-color:var(--ink)}
.article-body ul,.article-body ol{padding-left:1.3em}
.article-body li{margin:.35em 0;padding-left:.2em}
.article-body li::marker{color:var(--ink-3)}
.article-body blockquote{border-left:2px solid var(--ink);padding:2px 0 2px 18px;color:var(--ink);font-size:18px;line-height:1.6;margin-left:0;margin-right:0}
.article-body blockquote > :last-child{margin-bottom:0}
.article-body pre{background:var(--win);color:var(--win-ink);border-radius:var(--r);padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.65;-webkit-overflow-scrolling:touch}
.article-body pre code{background:none;color:inherit;padding:0;font-size:inherit;border-radius:0;overflow-wrap:normal}
.article-body table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(min-width:720px){.article-body table{display:table}}
.article-body th{text-align:left;font-weight:500;font-size:13px;color:var(--ink-3);padding:0 16px 10px 0;border-bottom:1px solid var(--line-2);vertical-align:bottom}
.article-body td{padding:10px 16px 10px 0;border-top:1px solid var(--line);vertical-align:top}
.article-body tbody tr:first-child td{border-top:0}
.article-body th:last-child,.article-body td:last-child{padding-right:0}
.article-body td code{white-space:nowrap}
.article-body figure{margin-left:0;margin-right:0}
.article-body figure img,.article-body figure svg{display:block;border-radius:var(--r);border:1px solid var(--line)}
.article-body figcaption{font-size:13.5px;color:var(--ink-3);margin-top:8px}
.article-body img{border-radius:var(--r)}
.article-body hr{margin:2.4em 0}
.article-body sup{font-size:.7em;line-height:0}
.article-body sup a{text-decoration:none;font-family:var(--mono);color:var(--ink-3);padding:0 1px}
.article-body .footnotes,.article-body .references{margin-top:3em;padding-top:1.4em;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-3)}
.article-body .footnotes ol,.article-body .references ol{padding-left:1.2em}
.article-foot{padding-bottom:80px}
.article-foot .muted{border-top:1px solid var(--line);padding-top:24px;font-size:15px}
/* on-this-page links */
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 0;padding:0;list-style:none}
.toc a{display:inline-block;font-size:13.5px;color:var(--ink-2);text-decoration:none;padding:5px 11px;border:1px solid var(--line-2);border-radius:999px}
.toc a:hover{color:var(--ink);background:var(--bg-2)}

/* 14 ─ Lists, key-value, stats, misc ────────────────────────────────────── */
/* hairline link rows (blog index, related links) */
.link-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.link-list > li{border-bottom:1px solid var(--line)}
.link-list > li > a{display:grid;gap:6px;padding:22px 0;text-decoration:none}
.link-list .ll-meta{font-size:13px;color:var(--ink-3)}
.link-list .ll-meta > * + *::before{content:"·";margin:0 8px}
.link-list .ll-title{font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.link-list .ll-desc{color:var(--ink-2);font-size:15px;max-width:62ch}
.link-list > li > a:hover .ll-title{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:4px}
/* icon rows in a card */
.rows{list-style:none;margin:0;padding:0}
.rows > li{padding:14px 0;border-top:1px solid var(--line)}
.rows > li:first-child{border-top:0;padding-top:0}
.rows > li:last-child{padding-bottom:0}
/* key-value: <dl class="kv"><div><dt>…</dt><dd>…</dd></div></dl> */
.kv{margin:0;display:grid}
.kv > div{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line)}
.kv > div:first-child{border-top:0;padding-top:0}
@media(min-width:720px){.kv > div{grid-template-columns:200px 1fr;gap:24px}}
.kv dt{font-weight:500;color:var(--ink);font-size:15px}
.kv dd{margin:0;color:var(--ink-2);font-size:15px}
/* compact label/value list: <ul class="kv-list"><li><span>Pending</span><span>$0.00</span></li> */
.kv-list{list-style:none;margin:0;padding:0;font-size:14px}
.kv-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.kv-list li:first-child{border-top:0}
.kv-list li span:last-child{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.kv-list li.zero span{color:var(--ink-3)}
.stat{font-size:clamp(32px,4vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1;margin:0 0 12px;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat-label{font-size:13px;color:var(--ink-3);margin:0 0 10px;display:block}
.avatar{width:28px;height:28px;border-radius:50%;display:block;border:1px solid var(--line);background:var(--bg-2)}
.empty{text-align:center;padding:40px 16px;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.skeleton{display:block;height:1em;border-radius:6px;background:linear-gradient(90deg,var(--bg-2) 0%,var(--bg-3) 50%,var(--bg-2) 100%);background-size:200% 100%;animation:bt-shimmer 1.4s ease-in-out infinite}
@keyframes bt-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.ic{width:28px;height:28px;border-radius:8px;background:var(--bg-2);display:grid;place-items:center;color:var(--ink-2);flex:none}
/* 404 and other single-message pages */
.center-page{display:grid;place-items:center;text-align:center;padding:96px 0}
.center-page .display,.center-page h1,.center-page .lede{margin-left:auto;margin-right:auto}

/* 15 ─ Footer, motion ───────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding:40px 0 48px;font-size:14px;color:var(--ink-3)}
.foot{display:grid;gap:28px}
@media(min-width:760px){.foot{grid-template-columns:2fr 1fr 1fr}}
.foot h2,.foot h5{margin:0 0 10px;font:500 13px/1 var(--sans);color:var(--ink);letter-spacing:0;max-width:none}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:6px 0}
.foot a{text-decoration:none;color:var(--ink-3)}
.foot a:hover{color:var(--ink)}
.foot .brand,.foot .brand:hover{color:var(--ink)}
.copyline{margin-top:36px;font-size:13px}
.copyline a{margin-left:20px;color:var(--ink-3);text-decoration:none}
.copyline a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}