/* Velobyte Console. One stylesheet, built from the brand book tokens (v1, 2026-10-11)
   and the approved console mockups. Serif for H1 only, sans for everything else,
   mono with tabular figures for every number. Gold means measured or selected.
   Type scale: 12 label/pill · 13 caption/help/table · 14 body/controls · 15 inputs/buttons · 16 h3/lede · 20 h2 · 28 h1/stat.
   Spacing and radii come from the --s* and --r-* tokens only; every colour is a token (the AWS button excepted). */
:root{
  --bg:#ffffff; --bg-2:#fbfaf8; --bg-3:#f4f1ea;
  --ink:#191813; --ink-2:#64615a; --ink-3:#8c877d;
  --line:#e9e6df; --line-2:#d8d3c9;
  --gold:#937334; --gold-wash:#f7f2e7;
  --blue:#365d89; --blue-wash:#eff4fa;
  --ok:#2f7a4f; --ok-wash:#e9f3ec; --warn:#a3690f; --warn-wash:#fbf3e3; --bad:#b23b3b; --bad-wash:#f9e9e9;
  --chart-1:#b8862b; --chart-2:#3b6fb3; --chart-3:#b04a3a; --chart-neutral:#c9c4b9;
  --mark-tile:#ffffff; /* provider logos sit on this tile; it stays white in dark mode so dark marks remain visible */
  --shadow-1:0 1px 2px rgba(25,24,19,.06),0 1px 1px rgba(25,24,19,.04);
  --shadow-2:0 12px 32px rgba(25,24,19,.10),0 2px 6px rgba(25,24,19,.06);
  --r-sm:6px; --r-md:12px; --r-pill:999px;
  --serif:"Newsreader",ui-serif,"Iowan Old Style",Palatino,Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --fast:160ms; --base:260ms; --slow:600ms;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141311;--bg-2:#1b1a17;--bg-3:#23211d;--ink:#f2efe8;--ink-2:#b5b0a6;--ink-3:#7f7a70;--line:#2c2a25;--line-2:#3b382f;
  --gold:#c9a35a;--gold-wash:#2a2415;--blue:#7fa3cc;--blue-wash:#17202b;
  --ok:#7fc49a;--ok-wash:#17261d;--warn:#d9a64a;--warn-wash:#2a2214;--bad:#e08a8a;--bad-wash:#2d1a1a;
  --chart-1:#b98a38;--chart-2:#5684c0;--chart-3:#c4604a;--chart-neutral:#4a463f;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 12px 32px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141311;--bg-2:#1b1a17;--bg-3:#23211d;--ink:#f2efe8;--ink-2:#b5b0a6;--ink-3:#7f7a70;--line:#2c2a25;--line-2:#3b382f;
  --gold:#c9a35a;--gold-wash:#2a2415;--blue:#7fa3cc;--blue-wash:#17202b;
  --ok:#7fc49a;--ok-wash:#17261d;--warn:#d9a64a;--warn-wash:#2a2214;--bad:#e08a8a;--bad-wash:#2d1a1a;
  --chart-1:#b98a38;--chart-2:#5684c0;--chart-3:#c4604a;--chart-neutral:#4a463f;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 12px 32px rgba(0,0,0,.5);color-scheme:dark}

*{box-sizing:border-box}
html{margin:0}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
[hidden]{display:none !important}
a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}
p{margin:0}
h1{margin:0;font:500 28px/1.15 var(--serif);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere}
h1 em{font-style:italic;color:var(--gold)}
h2{margin:0;font:600 20px/1.3 var(--sans);letter-spacing:-.01em;text-wrap:balance}
h3{margin:0;font:600 16px/1.4 var(--sans)}
h4{margin:0;font:600 14px/1.4 var(--sans)}
.lede{font:400 16px/1.5 var(--sans);color:var(--ink-2);max-width:68ch}
/* the three small-text classes: caption (provenance), help (under a control), msg (live status) */
.caption{font:400 13px/1.5 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.help{font:400 13px/1.5 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.msg{font:400 14px/1.5 var(--sans);color:var(--ink-2);min-height:0}
.msg:empty{display:none}
.msg--bad{color:var(--bad)}
.caption--warn{color:var(--warn)}
.caption--bad{color:var(--bad)}
.label{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:var(--s2);background:var(--bg);padding:var(--s2) var(--s3);border:1px solid var(--line-2);border-radius:var(--r-sm);z-index:10}
.skip:focus{left:var(--s2)}
.stack{display:grid;gap:var(--s3)}
.stack--tight{gap:var(--s1)}
/* the row primitive: a hairline on top, no box, no radius; selection is a gold ring on the row (.on / .sel) */
.row{border-top:1px solid var(--line);padding:var(--s3) var(--s2)}
.row.on,.row.sel{position:relative;z-index:1;border-top-color:transparent;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--gold),0 0 0 4px var(--gold-wash)}
.row.on+.row,.row.sel+.row{border-top-color:transparent}
/* a collapsed block: one summary line with a chevron, content below */
.fold>summary{display:flex;align-items:center;gap:var(--s2);cursor:pointer;list-style:none;font:500 14px/1.4 var(--sans);color:var(--ink-2);padding:var(--s2) 0}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"›";display:inline-block;width:12px;color:var(--ink-2);transition:transform var(--fast) var(--ease)}
.fold[open]>summary::before{transform:rotate(90deg)}
.fold>summary:hover{color:var(--ink)}
.fold>:not(summary){margin-top:var(--s3)}
.fold--line{border-top:1px solid var(--line);padding-top:var(--s2)}

/* app shell */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
/* Page shells contain placeholders, never show them as an authenticated console
   while session discovery is still pending or redirecting to sign-in. */
body:not([data-session="ready"])>.app{visibility:hidden}
body:has(>.app):not([data-session="ready"])::before{content:"Checking sign-in…";position:fixed;inset:0;display:grid;place-items:center;color:var(--ink-2);font:400 14px var(--sans)}
.side{background:var(--bg-2);border-right:1px solid var(--line);padding:var(--s4) var(--s3) var(--s5);display:flex;flex-direction:column;gap:var(--s5);height:100vh;position:sticky;top:0}
.wordmark{font:500 20px/1 var(--serif);letter-spacing:-.01em;display:flex;align-items:center;gap:var(--s2);color:var(--ink);text-decoration:none}
.mark{width:26px;height:26px;border-radius:var(--r-sm);display:block;flex:none}
.side .wordmark{padding:var(--s1) var(--s2)}
.side .wordmark small{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:2px;align-self:flex-end;padding-bottom:1px}
.side nav{display:grid;gap:2px}
.side nav a{display:flex;align-items:center;justify-content:flex-start;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-size:14px}
.side nav a:hover{background:var(--bg-3)}
.side nav a.on{background:var(--bg-3);color:var(--ink);font-weight:500}
.side nav a .ico{color:var(--ink-2)}
.side nav a.on .ico{color:var(--ink)}
.side nav a[data-nav="optimized"]{color:var(--ink);font-weight:500}
.side nav a[data-nav="optimized"] .ico{color:var(--primary)}
.side nav a .n{margin-left:auto;font:400 12px var(--mono);color:var(--ink-2)}
.side nav .sep{height:1px;background:var(--line);margin:var(--s2) var(--s2)}
.side .foot{margin-top:auto;display:grid;gap:var(--s3);padding:0 var(--s2)}
.side .foot .aws{display:grid;gap:2px;font:400 12px/1.4 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.side .foot .aws b{font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:var(--s2)}
.side .foot .aws b i{width:7px;height:7px;border-radius:50%;background:var(--line-2);display:inline-block;flex:none}
.side .foot .aws.is-ok b i{background:var(--ok)}
.side .foot .aws.is-warn b i{background:var(--warn)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-2);display:grid;place-items:center;font:500 12px var(--mono);color:var(--ink-2);flex:none}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{min-height:56px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:0 var(--s6);font-size:14px;flex:none}
.crumb{display:flex;gap:var(--s2);color:var(--ink-2);flex-wrap:wrap}
.crumb b{color:var(--ink);font-weight:500}
.content{padding:var(--s5) var(--s6) var(--s6);display:grid;gap:var(--s5);align-content:start}
.page-h{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s2)}
.page-h .l{display:grid;gap:var(--s2);min-width:0}
.cols{display:grid;gap:var(--s4);align-items:start}
.c-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols--connect{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.cols--new{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.cols--launch{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.cols--dash{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.cols--hosted{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.cols--side{display:grid;gap:var(--s4)}

/* components (from the brand book): buttons in three kinds and two sizes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:500 15px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.btn:hover{background:var(--bg-3)}
.btn--primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn--quiet{border-color:transparent;background:transparent;padding:0 var(--s1);color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.btn--quiet:hover{background:transparent}
.btn--sm{min-height:38px;padding:0 var(--s4);font-size:14px}
.btn--quiet.btn--sm{padding:0 var(--s1)}
.btn--danger{color:var(--bad)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--bg)}
.btn--primary[disabled]:hover{background:var(--ink)}
.btn--aws{background:#232f3e;color:#ff9900;border-color:#232f3e} /* AWS's own colors, inside this control only (brand book, Color table) */
.btn--aws:hover{background:#2d3b4e;border-color:#2d3b4e}
.field{display:grid;gap:var(--s2);min-width:0}
.field label,.field .label-text{font:500 13px var(--sans);color:var(--ink-2);display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline}
.field input,.field select,.field .input{font:400 15px var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);height:42px;padding:0 var(--s3);width:100%;display:flex;align-items:center;min-width:0}
.field textarea{font:400 15px var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:72px;padding:var(--s2) var(--s3);width:100%;min-width:0;resize:vertical}
.field input::placeholder,.field textarea::placeholder,.field .input.ph{color:var(--ink-3)}
.service-fields{border:0;padding:0;margin:var(--s4) 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.service-fields .actions{align-self:end;min-height:42px}
.service-wide{grid-column:1/-1}
.required-mark{color:var(--bad);font-weight:600}
.service-fields>.caption{margin:0}
.dedicated-key-action{margin:var(--s4) 0;padding:var(--s4);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg-2)}
.dedicated-key-action .help{margin:var(--s2) 0 0;max-width:65ch}
.service-key-card{border-top:1px solid var(--line);padding:var(--s4) 0}
.service-key-card .head{margin-bottom:var(--s2)}
.service-key-card h4,.service-review h4{margin:0;font:500 17px var(--sans);overflow-wrap:anywhere}
.service-key-card>.actions{margin:var(--s4) 0}
.service-key-card>.ak-made{margin-bottom:var(--s4)}
.service-connection{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:var(--s2) var(--s3);align-items:center;margin:var(--s4) 0}
.service-connection code{font:400 12px var(--mono);overflow-wrap:anywhere;min-width:0}
.service-key-stats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font:400 13px var(--sans);color:var(--ink-2)}
.service-key-stats b{color:var(--ink);font-weight:500}
.service-budget{display:flex;align-items:end;gap:var(--s3);margin:var(--s4) 0;flex-wrap:wrap}
.service-budget label{display:grid;gap:var(--s2);font:400 13px var(--sans)}
.service-budget input{max-width:200px;height:36px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:var(--s2);font:400 14px var(--mono);background:var(--bg);color:var(--ink)}
.service-review{padding:var(--s4);border:1px solid var(--line-2);border-radius:var(--r-sm);margin-top:var(--s4)}
@media(max-width:600px){.service-fields{grid-template-columns:minmax(0,1fr)}.service-connection{grid-template-columns:minmax(0,1fr) auto}.service-connection>.label{grid-column:1/-1}.service-key-stats{display:grid;gap:var(--s2)}}
.field input[disabled],.field select[disabled]{color:var(--ink-2);background:var(--bg-3)}
.field input[type=range]{height:28px;padding:0;border:0;background:transparent;accent-color:var(--ink)}
.field input.mono,.field .input.mono,.field textarea.mono{font:400 14px var(--mono)}
.field .ends{display:flex;justify-content:space-between;font:400 12px var(--mono);color:var(--ink-2)}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-content:start;min-width:0}
.card--paper{background:var(--bg-2)}
.card .head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:var(--s1);height:24px;padding:0 var(--s2);border-radius:var(--r-pill);font:500 12px var(--mono);letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.pill--proven{background:var(--gold-wash);color:var(--gold)}
.pill--ok{background:var(--ok-wash);color:var(--ok)}
.pill--warn{background:var(--warn-wash);color:var(--warn)}
.pill--bad{background:var(--bad-wash);color:var(--bad)}
.pill--neutral{background:var(--bg-3);color:var(--ink-2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s5)}
.stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{border-top:2px solid var(--ink);padding-top:var(--s3);display:grid;gap:var(--s2);align-content:start;min-width:0}
.stat .v{font:500 28px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.stat .v small{font:400 14px var(--sans);color:var(--ink-2);letter-spacing:0}
.stat .k{font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.stat .t{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
table{border-collapse:collapse;width:100%;font-size:13px}
td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
th{text-align:left;padding:var(--s2) var(--s3);vertical-align:top;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--ink)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.dim{color:var(--ink-2)}
.ledger{font-family:var(--mono)}
.ledger th{font-family:var(--mono);padding:0 var(--s2) var(--s2);white-space:nowrap}
.ledger td{padding:var(--s2);white-space:nowrap}
.ledger td .pill{vertical-align:middle}
.ledger td.wrap{white-space:normal}
code{font:400 13px var(--mono);background:var(--bg-3);padding:0 var(--s1);border-radius:var(--r-sm);overflow-wrap:anywhere}
pre{font:400 13px/1.55 var(--mono);background:var(--bg-3);border-radius:var(--r-sm);padding:var(--s4);overflow-x:auto;margin:0}
pre code{background:none;padding:0}

/* console-only controls, built from the same tokens */
.toggle{display:inline-flex;align-items:center;gap:var(--s2);font:400 14px var(--sans);color:var(--ink);white-space:nowrap;background:none;border:0;padding:0;cursor:pointer}
.toggle i{width:34px;height:20px;border-radius:var(--r-pill);background:var(--line-2);position:relative;display:inline-block;flex:none;transition:background var(--fast) var(--ease)}
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--bg);transition:left var(--fast) var(--ease)}
.toggle[aria-pressed="true"] i,.toggle[aria-checked="true"] i{background:var(--ink)}
.toggle[aria-pressed="true"] i::after,.toggle[aria-checked="true"] i::after{left:16px}
.toggle .state{font:400 13px var(--mono);color:var(--ink-2)}
.toggle[disabled]{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--bg);max-width:100%}
.seg label{position:relative;display:inline-flex}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.seg span{padding:0 var(--s4);height:38px;display:inline-flex;align-items:center;font-size:14px;color:var(--ink-2);border-right:1px solid var(--line-2);cursor:pointer;white-space:nowrap}
.seg label:last-child span{border-right:0}
.seg input:checked + span{background:var(--bg-3);color:var(--ink);font-weight:500}
.seg input:focus-visible + span{outline:2px solid var(--blue);outline-offset:-2px}
.seg--buttons button{background:none;border:0;border-right:1px solid var(--line-2);padding:0 var(--s4);height:38px;font:400 14px var(--sans);color:var(--ink-2);cursor:pointer}
.seg--buttons button:last-child{border-right:0}
.seg--buttons button[aria-pressed="true"]{background:var(--bg-3);color:var(--ink);font-weight:500}
.radio{width:16px;height:16px;border-radius:50%;border:1px solid var(--line-2);display:inline-grid;place-items:center;flex:none;background:var(--bg)}
.radio.on{border-color:var(--ink)}
.radio.on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.kv{display:grid;gap:var(--s2)}
.kv .row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:var(--s3);align-items:center;border-top:0;padding:0}
.kv .k{font:500 13px var(--sans);color:var(--ink-2)}
.kv .v{font:400 13px var(--mono);background:var(--bg-3);border-radius:var(--r-sm);padding:var(--s2) var(--s3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kv .v.wrap{white-space:normal;overflow-wrap:anywhere}
.dl{display:grid;gap:0}
.dl:empty{display:none}
.dl .row{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;font-size:14px;flex-wrap:wrap}
.dl .row:first-child{border-top:0}
.dl .row .k{color:var(--ink-2)}
.dl .row .v{font:500 14px var(--mono);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.dl .row .v small{font:400 13px var(--mono);color:var(--ink-2);font-weight:400}
.dl .row .v.plain{font:400 13px var(--mono);text-align:left}
.list{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2);font-size:14px;color:var(--ink-2)}
.list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--s2)}
.list li b{font:500 13px var(--mono);color:var(--ink-2)}
.check{font:400 14px var(--sans);color:var(--ink-2);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.check input{width:16px;height:16px;accent-color:var(--ink);flex:none;margin:0}
.check span{color:var(--ink)}
.actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}

/* sign-in gate */
.gate-body{background:var(--bg-2)}
.gate{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:var(--s6) var(--s4);position:relative;overflow:hidden;background:radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 1.5px) 0 0/18px 18px, var(--bg-2)}
.gate .art{position:absolute;left:0;bottom:0;width:100%;height:320px;display:block;pointer-events:none}
.art .wire{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 5}
.art .node{fill:var(--blue)}
.art .node--gold{fill:var(--gold)}
.gate .box{position:relative;width:440px;max-width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.gate .card{padding:var(--s6);gap:var(--s5)}
.signin-stock{display:grid;gap:var(--s2);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2)}
.signin-stock .head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.signin-stock h2{font:600 16px/1.4 var(--sans)}
.signin-stock .num{font-size:14px;white-space:nowrap}
.signin-stock>a{font-size:13px;font-weight:500}
.gate .foot{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font:400 13px var(--mono);color:var(--ink-2)}
.gate .foot a{color:var(--ink-2);text-decoration:none}
.gate form{display:grid;gap:var(--s4)}
.terms{max-height:220px;overflow:auto;white-space:pre-wrap;font:400 13px/1.5 var(--mono);background:var(--bg-3);border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin:0}

/* connect */
.stepper{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,.95fr) minmax(0,1.3fr);gap:var(--s4)}
.step{border-top:2px solid var(--line-2);padding-top:var(--s2);display:grid;gap:var(--s1);color:var(--ink-2);min-width:0}
.step.done{border-color:var(--ink-2)}
.step.cur{border-color:var(--ink);color:var(--ink)}
.step .n{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.step .t{font:500 14px var(--sans);display:flex;align-items:center;gap:var(--s2)}
.step .d{font:400 13px/1.5 var(--mono);overflow-wrap:anywhere}
.steps{display:grid}
.steps .s{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line);align-items:start}
.steps .s:first-child{border-top:0;padding-top:0}
.stepdot{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font:500 12px var(--mono);color:var(--ink-2);margin-top:1px;flex:none}
.stepdot.done{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.stepdot.cur{border-color:var(--ink);color:var(--ink);animation:vb-pulse 1.6s ease-out infinite}
.stepdot .ico{width:13px;height:13px}
.steps .t{font:500 15px var(--sans)}
.steps .d{font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.cancan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.connect-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:end}

/* new endpoint: the question first, then models, hardware and the launch card */
.search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);align-items:center}
.search--grow{flex:1;min-width:220px}
.ask{display:grid;gap:var(--s3)}
.ask-label{font:500 16px/1.3 var(--sans);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{font:400 13px var(--sans);color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--s1) var(--s3);cursor:pointer}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.results-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.models{display:grid}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:none;border:0;border-top:1px solid var(--line)}
.mrow:hover{background:var(--bg-2)}
.mrow .name{font:600 15px/1.3 var(--sans);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;overflow-wrap:anywhere}
.mrow .name small{font:400 13px var(--mono);color:var(--ink-2);font-weight:400}
.mrow .spec{font:400 13px/1.5 var(--mono);color:var(--ink-2);margin-top:var(--s1);overflow-wrap:anywhere}
.mrow .badges{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.mrow .st{justify-self:end}
/* model search: model + hardware pairs in the results list; the reason line answers the question asked */
.mrow.pair{align-items:start}
.mrow.pair .why{font:400 13px/1.5 var(--sans);color:var(--ink-2);margin-top:var(--s1);overflow-wrap:anywhere}
.mrow.pair .st{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2)}
.mrow.pair .st .use{font:500 13px var(--mono);color:var(--blue);white-space:nowrap}
.avatar-m{width:28px;height:28px;border-radius:var(--r-sm);object-fit:contain;padding:3px;background:var(--mark-tile);border:1px solid var(--line);flex:none;margin-right:var(--s2);vertical-align:middle}
.avatar-m--txt{display:inline-grid;place-items:center;padding:0;font:600 12px var(--mono);color:#18181b}
.mcard-h .avatar-m{width:22px;height:22px;margin-right:0}
.hdr h1 .avatar-m,.model-strip .avatar-m{width:26px;height:26px;vertical-align:-5px}
/* the model picked: a hairline section at the bottom of the model card */
.model-sec{display:grid;gap:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4)}
/* hardware: one group per provider, options as rows */
.hwlist{display:grid;gap:var(--s4)}
.hwg{display:grid;min-width:0}
.hwg .hwg-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;padding-bottom:var(--s2)}
.hwg .hwg-h h4{font:600 14px/1.4 var(--sans)}
.hwg>.btn{justify-self:start;margin:var(--s2) 0}
.hwg>.field,.hwg>.help,.hwg>.msg,.hwg>.stack{margin-top:var(--s3)}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:none;border:0;border-top:1px solid var(--line)}
.opt:hover{background:var(--bg-2)}
.opt .t{font:500 14px var(--sans);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.opt .t .caption{font-weight:400}
.opt .p{font:500 15px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.skel{display:grid;gap:var(--s2)}
.skel i{display:block;height:58px;border-radius:var(--r-md);background:var(--bg-3)}
/* the launch card: sizing rows, the measured box (kept gold), the confirm strip */
.measured{display:grid;gap:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--gold);border-radius:var(--r-sm);background:var(--gold-wash)}
.measured .row{display:flex;justify-content:space-between;gap:var(--s3);font-size:14px;flex-wrap:wrap;border-top:0;padding:0}
.measured .row .v{font:500 14px var(--mono);font-variant-numeric:tabular-nums}
.confirm{display:grid;gap:var(--s3);padding:var(--s3) var(--s4);border-left:2px solid var(--gold);background:var(--gold-wash);font-size:14px}
.adv-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
/* workload presets: one radio row per preset; the input stays for keyboards and screen readers */
.presets{display:grid}
.preset{position:relative;display:grid;gap:var(--s1);cursor:pointer;min-width:0}
.preset:hover{background:var(--bg-2)}
.preset input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.preset:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:-2px}
.preset .t{font:500 14px var(--sans);color:var(--ink)}
/* tuned recipes: title and workload, one sentence, a metrics row, one caption with the gain and the measurement */
.tuned{display:grid}
.trec{display:grid;gap:var(--s2);width:100%;text-align:left;cursor:pointer;min-width:0;font:inherit;color:inherit;background:none;border:0;border-top:1px solid var(--line)}
.trec:hover{background:var(--bg-2)}
.trec-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.trec .t{font:600 14px var(--sans);color:var(--ink)}
.trec.on .tag{color:var(--gold);background:var(--gold-wash)}
.trec .s{font:400 14px/1.5 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.trec .g{color:var(--gold);font-weight:500}
.trec .mx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s2)}
.trec .mx span{display:grid;min-width:0}
.trec .mx b{font:500 14px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.trec .mx small{font:400 12px/1.3 var(--mono);color:var(--ink-2)}
.trec .caption .ico{width:10px;height:10px;color:var(--gold);vertical-align:-1px}
/* optimization requests on the endpoint page, and the measured-run ledger on the results page */
.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.optreq{display:grid;gap:var(--s2)}
.optreq .head{display:flex;justify-content:space-between;gap:var(--s2);align-items:center;flex-wrap:wrap;font:400 13px var(--mono);color:var(--ink-2)}
.optreq table.exp{font-size:13px;font-variant-numeric:tabular-nums}
.optreq table.exp td{padding:var(--s1) var(--s2);text-align:left;border-bottom:1px solid var(--line)}
.optreq table.exp th{padding:var(--s1) var(--s2);text-align:left;border-bottom:1px solid var(--line);font:500 12px var(--sans);color:var(--ink-2)}
.results{min-width:1040px}
.results td{white-space:normal;vertical-align:top}
.results td.run{min-width:260px}
.results td.also{min-width:220px}
.results .dim{display:block;margin-top:var(--s1)}

/* launching */
.plist{display:grid}
.pstep{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line);align-items:start}
.pstep:first-child{border-top:0;padding-top:0}
.pstep .t{font:500 15px var(--sans);display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
.pstep .t small{font:400 13px var(--mono);color:var(--ink-2)}
.pstep .d{font:400 14px/1.5 var(--sans);color:var(--ink-2);margin-top:var(--s1)}
.pstep.pend{opacity:.6}
.prog{height:4px;background:var(--bg-3);border-radius:var(--r-pill);margin-top:var(--s3);position:relative;overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:var(--r-pill);transition:width .9s ease}
.prog.live i{background:var(--ok)}
.prog-l{display:flex;justify-content:space-between;gap:var(--s3);font:400 13px var(--mono);color:var(--ink-2);margin-top:var(--s2);flex-wrap:wrap}
.boot{display:grid;gap:var(--s2);margin:var(--s3) 0 var(--s1) calc(28px + var(--s4))}
.bstage{display:grid;grid-template-columns:22px 1fr auto;column-gap:var(--s2);align-items:center;color:var(--ink-2);font-size:14px}
.bstage .bd{grid-column:2/4;color:var(--ink-2);font-size:13px}
.bstage.done{color:var(--ink)}
.bstage.cur{color:var(--ink)}
.bstage.bad{color:var(--bad)}
.launch-progress-summary[data-state="slow"]{color:var(--gold)}
.launch-progress-summary:is([data-state="overdue"],[data-state="fault"],[data-state="failed"],[data-state="unconfirmed"]){color:var(--bad)}
.bdot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);font-size:12px}
.bstage.done .bdot{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.bstage.cur .bdot{border-color:var(--gold)}
.bstage.bad .bdot{background:var(--bad);border-color:var(--bad);color:var(--bg)}
.bdot .ico{width:12px;height:12px}
.bstage.cur .bdot .ico{color:var(--gold)}
.spin{display:block;width:10px;height:10px;border-radius:50%;border:2px solid var(--gold);border-right-color:transparent;animation:vb-spin .8s linear infinite}
.bt{font:400 13px var(--mono);color:var(--ink-2)}
.tick{font-variant-numeric:tabular-nums}

/* endpoint dashboard */
.hdr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s5);align-items:center}
.hdr .meta{grid-column:1 / -1;display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;font:400 13px var(--mono);color:var(--ink-2)}
.hdr .meta i{width:3px;height:3px;border-radius:50%;background:var(--line-2);display:inline-block}
.hdr .ctl{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
/* live metrics: tiles and small SVG line charts, every colour a token */
.live-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);align-items:start}
.token-totals{grid-template-columns:repeat(3,minmax(0,1fr))}
.token-totals .num{overflow-wrap:anywhere}
.tile{display:grid;align-content:start;gap:var(--s1);border-top:1px solid var(--line);padding-top:var(--s2);min-width:0}
.tile b{font:500 28px/1.1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.tile .k{font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.tile .k:empty,.spark-box:empty{display:none}
.spark-box{display:block;height:24px;color:var(--ink-2)}
.spark{display:block;width:100%;height:24px;overflow:visible}
.spark path{fill:none;stroke:currentColor;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.live-diagnosis{margin:var(--s3) 0 0;padding:var(--s3) var(--s4);border:1px solid var(--line-2);border-left:3px solid var(--ink);border-radius:var(--r-sm);background:var(--bg-2);font:400 14px/1.5 var(--sans);color:var(--ink)}
.live-manager{font:400 13px/1.5 var(--sans);color:var(--ink-2);margin:var(--s3) 0 0}
.live-manager b{font-weight:600;color:var(--ink)}
.live-manager--warn,.live-manager--warn b{color:var(--warn)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.live-bar{position:sticky;top:0;z-index:3;display:flex;gap:var(--s2) var(--s4);align-items:baseline;flex-wrap:wrap;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s2) 0;font:400 12px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:0}
.live-bar .live-time{font-weight:500;color:var(--ink);white-space:nowrap}
.live-bar.on .live-time{color:var(--blue)}
.live-values{display:flex;gap:var(--s1) var(--s4);flex-wrap:wrap;min-width:0}
.live-values span{white-space:nowrap}
.live-values b{font-weight:500;color:var(--ink)}
.charts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.charts:empty{display:none}
.chart{display:grid;gap:var(--s1);min-width:0;position:relative}
.chart + .chart{border-top:1px solid var(--line);padding-top:var(--s3)}
.chart-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s1) var(--s3);flex-wrap:wrap}
.chart h4{font-weight:500;color:var(--ink)}
.chart .legend{display:flex;gap:var(--s1) var(--s3);flex-wrap:wrap;font:400 12px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);min-height:18px}
.chart .legend i{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:var(--s1)}
.chart .legend b{font-weight:500;color:var(--ink)}
.chart .legend .sw1{background:var(--chart-1)}
.chart .legend .sw2{background:var(--chart-2)}
.chart .legend .sw3{background:var(--chart-3)}
.chart svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y;cursor:crosshair}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--ink-2);font:400 12px var(--mono);font-variant-numeric:tabular-nums}
.chart .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .ln.s1{stroke:var(--chart-1)}
.chart .ln.s2{stroke:var(--chart-2)}
.chart .ln.s3{stroke:var(--chart-3)}
.chart .col{fill:var(--ink);opacity:.07}
.chart .x{stroke:var(--ink-3);stroke-width:1}
.chart .mark line{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.chart .mark text{fill:var(--ink-2);font:500 10px var(--mono);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.chart .mark--win line{stroke:var(--chart-1);stroke-dasharray:none}
.chart .mark--win text{fill:var(--chart-1)}
.chart .mark--failed line,.chart .mark--stopped line{stroke:var(--chart-3)}
.activity{display:grid;gap:var(--s2);border-top:1px solid var(--line);padding-top:var(--s3);min-width:0}
.activity h4{font-weight:500;color:var(--ink)}
.activity ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.activity li{display:grid;grid-template-columns:20px auto minmax(0,1fr);gap:var(--s2);align-items:baseline;font:400 13px/1.5 var(--sans);color:var(--ink-2);min-width:0}
.activity li b{font:500 11px/1 var(--mono);color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;width:18px;height:18px;display:inline-grid;place-items:center;align-self:center}
.activity li .t{font:400 12px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.activity li span:last-child{overflow-wrap:anywhere}
.activity li[data-at]{cursor:pointer;color:var(--ink)}
.activity li[data-at]:hover b,.activity li[data-at]:focus-visible b{border-color:var(--ink-2);color:var(--ink)}
.activity li.ev--win b{border-color:var(--chart-1);color:var(--chart-1)}
.activity li.ev--failed b,.activity li.ev--stopped b{border-color:var(--chart-3);color:var(--chart-3)}
.live-values .ev{color:var(--ink);font-weight:500;flex-basis:100%}
.chart .dot{stroke:var(--bg);stroke-width:2}
.chart .dot.d1{fill:var(--chart-1)}
.chart .dot.d2{fill:var(--chart-2)}
.chart .dot.d3{fill:var(--chart-3)}
.chart .caption{font:400 12px/1.5 var(--sans);max-width:110ch}
.chart-empty{font:400 13px/1.5 var(--mono);color:var(--ink-2);border-top:1px solid var(--line);padding:var(--s5) var(--s3);text-align:center}

/* Endpoints page: the empty state sells the product; cards show life (status pulse, sparkline, boot hairline); finished endpoints fold under History */
.eps-wrap{display:grid;gap:var(--s5);align-items:start}
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s4)}
.ep{position:relative;display:grid;gap:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);min-width:0}
.ep--off .dot{animation:none}
.ep--in{animation:vb-rise .24s ease both}
.ep-top{display:grid;grid-template-columns:12px 28px minmax(0,1fr) auto;gap:0 var(--s2);align-items:center}
.ep-top .avatar-m{margin:0}
.ep-top .avatar-c{width:28px;height:28px;border-radius:var(--r-sm);background:var(--bg-3);display:grid;place-items:center;color:var(--ink-2)}
.ep-top .avatar-c svg{width:16px;height:16px}
.ep-name{min-width:0;display:grid;gap:2px}
.ep-name b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-name small{color:var(--ink-2);font:400 13px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:inline-block}
.dot--ok{background:var(--ok)}.dot--warn{background:var(--warn)}.dot--bad{background:var(--bad)}.dot--neutral{background:var(--line-2)}
.dot--pulse{animation:vb-pulse 1.6s ease-out infinite}
.ep-mid{display:grid;gap:var(--s2)}
.ep-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--s2) var(--s3);margin:0}
.ep-meta dt{font:400 13px var(--mono);color:var(--ink-2)}
.ep-meta dd{margin:2px 0 0;font:400 14px var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.spark{display:flex;align-items:center;gap:var(--s2);min-width:0}
.spark svg{width:auto;max-width:260px;min-width:0;height:28px;display:block;overflow:visible;flex:1 1 0}
.spark .ln{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark .area{fill:var(--chart-1);opacity:.12}
.spark .end{fill:var(--chart-1)}
.spark .sc{font:400 13px var(--mono);color:var(--ink-2);white-space:nowrap;flex:none}
.ep-boot{display:grid;gap:var(--s1)}
.hair{display:block;height:3px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.hair i{display:block;height:100%;background:var(--gold);border-radius:var(--r-pill);transition:width .6s ease}
.hair.indeterminate i{width:30%;animation:vb-slide 1.6s ease-in-out infinite}
.ep .url{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);border-top:1px solid var(--line);padding-top:var(--s2);min-width:0}
.ep .url code{background:none;padding:0;font:400 13px var(--mono)}
.ep .url .btn{min-height:0;padding:var(--s1) var(--s2);font-size:13px;border-color:transparent;background:transparent;color:var(--blue)}
.ep .note{font:400 13px/1.5 var(--sans);color:var(--ink-2);border-left:2px solid var(--line-2);padding-left:var(--s3)}
.ep .note--bad{border-color:var(--bad);color:var(--bad)}
.ep-note{display:grid;gap:var(--s1)}
.ep-why{margin:0}
.ep-why>summary{cursor:pointer;font:400 13px var(--mono);color:var(--ink-2);list-style:none;padding-left:var(--s3)}
.ep-why>summary::-webkit-details-marker{display:none}
.ep-why p{font:400 13px/1.5 var(--mono);color:var(--ink-2);margin:var(--s1) 0 0 var(--s3);overflow-wrap:anywhere;white-space:pre-wrap}
.history .eps{opacity:.85}
#eps-history:empty{display:none}
.empty{display:grid;gap:var(--s5);padding:var(--s2) 0}
.empty-text{display:grid;gap:var(--s2);max-width:62ch}
.paths{display:grid}
.path{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s1) var(--s3);align-items:start;color:var(--ink);text-decoration:none;min-width:0}
.path:hover{background:var(--bg-2)}
.path .pi{grid-row:1/3;width:34px;height:34px;border-radius:var(--r-sm);background:var(--gold-wash);color:var(--gold);display:grid;place-items:center}
.path .pi svg{width:18px;height:18px}
.path b{font:500 14px/1.3 var(--sans)}
.path span{font:400 13px/1.5 var(--sans);color:var(--ink-2)}
/* connect a cloud: one row per provider under the endpoint list; the key forms fold inside the row */
.clouds{display:grid}
.cloud{display:grid;gap:var(--s2);align-content:start;min-width:0}
.cloud-h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.cloud-h b{font:500 14px/1.3 var(--sans)}
.cloud-h .mark-p{margin-right:0}
.cloud .actions .help{flex:1 1 160px;min-width:0}
.csteps{margin:0;padding-left:var(--s5);display:grid;gap:var(--s1);font:400 13px/1.5 var(--sans);color:var(--ink-2);max-width:72ch}
.csteps a{color:var(--blue)}
.keyrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);align-items:start}
.keyrow input{font:400 14px/1.4 var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 var(--s3);height:38px;min-width:0;width:100%}
.keyrow textarea{font:400 14px/1.4 var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);grid-column:1/-1;height:84px;padding:var(--s2) var(--s3);min-width:0;width:100%;resize:vertical}
.keyrow input::placeholder,.keyrow textarea::placeholder{color:var(--ink-3)}
.keyrow--tall .btn{grid-column:2;justify-self:end}
.keyrow--pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
@media (max-width:560px){.keyrow--pair{grid-template-columns:minmax(0,1fr)}.keyrow--pair .btn{justify-self:start}}
.cloud select{font:400 14px var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);height:38px;padding:0 var(--s2);min-width:0;max-width:100%}
/* a notice strip for what Stripe or Google sent the browser back with */
.notice{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;padding:var(--s3) var(--s4);border:1px solid var(--ok);border-radius:var(--r-md);background:var(--ok-wash);color:var(--ink)}
.notice .notice-t{display:grid;gap:2px;flex:1 1 240px;min-width:0}
.notice b{font:500 14px/1.4 var(--sans)}
.notice span{font:400 13px/1.45 var(--sans);color:var(--ink-2)}
.notice .btn{margin-left:auto}
.notice--bad{border-color:var(--bad);background:var(--bad-wash)}
.notice--bad .ok-pop{background:var(--bad)}
.notice--gift{display:grid;gap:var(--s1);margin-bottom:var(--s4)}
.notice--gift p{margin:0;font:400 14px/1.45 var(--sans)}
.notice--gift a{color:inherit;text-decoration:none}
.ep-gift p{margin:0;padding:var(--s2) var(--s3);border:1px solid var(--ok);border-radius:var(--r-md);background:var(--ok-wash);font:400 13px/1.45 var(--sans)}
.card--gift{display:grid;gap:var(--s3);margin-bottom:var(--s4);border-color:var(--ok)}
.gift-agents h3{margin:0 0 var(--s2)}
.gift-agents p{margin:0 0 var(--s2)}
.gift-timer{display:grid;gap:var(--s1);padding-top:var(--s3);border-top:1px solid var(--line)}
.gift-timer b{font:500 24px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.gift-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);align-items:end}
.gift-form label{display:grid;gap:var(--s1);font:500 13px/1.4 var(--sans)}
.gift-form .help,.gift-form .msg,.gift-form .btn{grid-column:1/-1;justify-self:start}
.gift-suggest{display:flex;flex-wrap:wrap;gap:var(--s1)}
.gift-table{width:100%;border-collapse:collapse;margin-top:var(--s4);font:400 13px/1.45 var(--sans)}
.gift-table th,.gift-table td{padding:var(--s2);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.gift-table td.actions{display:flex;flex-wrap:wrap;gap:var(--s1)}
.gift-table .dim{color:var(--ink-2)}
@media (max-width:720px){.gift-table thead{display:none}.gift-table tr{display:grid;padding:var(--s2) 0;border-bottom:1px solid var(--line)}.gift-table td{border:0;padding:2px 0}}

/* hosted (unlinked shell) */
.bal{display:grid;gap:var(--s1)}
.bal b{font:500 28px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bal span{font:400 14px var(--sans);color:var(--ink-2)}
.fb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center}

/* icons: one inline SVG set from console.js, sized by context, coloured by the pill or text around it */
.ico{width:16px;height:16px;flex:none;vertical-align:-3px;display:inline-block}
.ico-spinner{animation:vb-spin .9s linear infinite}
.ok-pop .ico{width:13px;height:13px}
.pill .ico{width:13px;height:13px}
.ok-pop{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ok);color:var(--bg);font-size:13px;animation:vb-pop .5s cubic-bezier(.2,.9,.3,1.3)}
/* provider marks: the provider's real logo (assets/brand/logos) on a 24px white tile; the AWS wordmark is wide, so its tile grows */
.mark-p{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;padding:2px;border-radius:var(--r-sm);background:var(--mark-tile);border:1px solid var(--line);vertical-align:-6px;margin-right:var(--s2)}
.mark-p img{display:block;width:100%;height:100%;object-fit:contain}
.mark-p.aws{width:auto;padding:2px 4px}
.mark-p.aws img{width:28px}
.mark-p.velobyte{width:22px;height:22px;padding:0;background:none;border:0;vertical-align:-5px}
/* account menu on the sidebar avatar */
.who-wrap{position:relative}
.who{display:flex;align-items:center;gap:var(--s2);width:calc(100% + var(--s4));margin:0 calc(-1 * var(--s2));padding:var(--s1) var(--s2);border:0;border-radius:var(--r-sm);background:none;font:400 14px var(--sans);color:var(--ink-2);text-align:left;cursor:pointer;min-width:0}
.who:hover,.who[aria-expanded="true"]{background:var(--bg-3);color:var(--ink)}
.who-text{display:grid;min-width:0;line-height:1.3}
.who-text>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-bal{font:400 13px var(--mono);color:var(--ink-2)}
.who-bal:empty{display:none}
.menu{position:absolute;left:0;right:0;bottom:calc(100% + var(--s1));background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:var(--s1);display:grid;z-index:6}
.menu a,.menu button{display:flex;align-items:center;gap:var(--s2);width:100%;padding:var(--s2) var(--s3);border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:400 14px var(--sans);text-decoration:none;text-align:left;cursor:pointer}
.menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:var(--bg-3)}
.menu .sep{height:1px;background:var(--line);margin:var(--s1) 0}

/* motion: spinners and the pulse on a transitional dot may loop; everything else plays once */
@keyframes vb-spin{to{transform:rotate(360deg)}}
@keyframes vb-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}}
@keyframes vb-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 0%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 22%,transparent)}}
@keyframes vb-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes vb-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vb-slide{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.btn.is-busy::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;color:var(--bg);animation:vb-spin .8s linear infinite}
.btn:not(.btn--primary).is-busy::after{color:var(--ink)}
.btn.is-ready{animation:vb-glow 1.4s ease-out 1}

/* responsive: 1024 two columns to one, 900 sidebar to top bar, 520 phone */
.cols--new{align-items:stretch}
.cols--new>.cols--side{align-content:start}
#provision-card{position:sticky;top:var(--s4);max-height:calc(100vh - 2 * var(--s4));overflow:auto}
@media (max-width:1024px){
  #provision-card{position:static;max-height:none;overflow:visible}
  .cols--connect,.cols--new,.cols--launch,.cols--dash,.cols--hosted,.c-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .app{display:block}
  .side{position:static;height:auto;padding:var(--s3) var(--s4);gap:var(--s3);border-right:0;border-bottom:1px solid var(--line)}
  .side nav{display:flex;overflow-x:auto;gap:var(--s1);padding-bottom:2px}
  .side nav a{white-space:nowrap;gap:var(--s1)}
  .side nav .sep{display:none}
  .side .foot{margin-top:0;padding:0;display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;align-items:center}
  .who{width:auto;margin:0}
  .menu{left:auto;right:0;bottom:auto;top:calc(100% + var(--s1));min-width:180px}
  .topbar{padding:var(--s2) var(--s4)}
  .content{padding:var(--s4);gap:var(--s4)}
  .stepper,.cancan,.connect-row,.search,.hdr,.fb,.adv-two,.result-grid{grid-template-columns:minmax(0,1fr)}
  .live-values{display:none}
  .kv .row{grid-template-columns:minmax(0,1fr)}
  .kv .row .k{order:-1}
  .mrow{grid-template-columns:minmax(0,1fr)}
  .mrow .st{justify-self:start}
  .mrow.pair .st{flex-direction:row;align-items:center;flex-wrap:wrap}
  .live-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gate{padding:var(--s5) var(--s4)}
  .gate .card{padding:var(--s5)}
}
@media (max-width:520px){
  .card{padding:var(--s4)}
  .stats,.stats--2,.stats--3{grid-template-columns:minmax(0,1fr)}
  .page-h .actions{width:100%}
  .page-h .actions .btn{flex:1}
  .actions .btn{width:100%;white-space:normal;height:auto}
  .seg{display:grid;grid-template-columns:1fr 1fr 1fr}
  .seg span,.seg--buttons button{justify-content:center;width:100%;padding:0 var(--s2)}
  .opt{grid-template-columns:auto minmax(0,1fr)}
  .opt .p{grid-column:2}
  .live-tiles{grid-template-columns:minmax(0,1fr)}
  #live-range{width:100%}
  #live-range .btn{flex:1;width:auto}
  .trec .mx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ep-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eps{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* two pages: Models (pick) hands off to New endpoint (hardware, launch); the launch page folds the picker into one strip */
.cols--one{grid-template-columns:minmax(0,1fr);max-width:840px}
.model-strip{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.model-strip b{font:500 15px/1.4 var(--sans);min-width:0;overflow-wrap:anywhere}
.model-strip .btn{margin-left:auto}
body[data-page="new"] #model-card>.head,body[data-page="new"] #model-card>.badges,body[data-page="new"] #model-card>.dl{display:none}
.model-bar{display:grid;gap:var(--s3)}
body[data-page="new"] #model-card{border-top:0;padding-top:0}
.model-bar .msg:empty,.model-bar #model-card:not(:has(#token-field:not([hidden]),#verify-out:not(:empty),#runtime-build:not([hidden]))){display:none}
#go-btn{max-width:100%;white-space:normal;padding-top:var(--s2);padding-bottom:var(--s2)}
.model-bar>.msg:empty{display:none}
.model-strip .caption{flex:1 1 200px;min-width:0}
.hwq{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:var(--s2) var(--s2);border-top:1px solid var(--line);font-size:14px}
details.hwq{display:block}
.hwq>summary{padding:0;color:var(--ink)}
.hwq b{font:500 14px/1.4 var(--sans)}
.hwq .mark-p{margin-right:0}
.hwq-go{margin-left:var(--s1)}
.hwq--connect+.actions{padding:0 var(--s2) var(--s3) calc(var(--s2) + 28px)}
.hw-go{display:flex;gap:var(--s2) var(--s3);align-items:center;flex-wrap:wrap;padding:var(--s3) var(--s2) var(--s3) calc(var(--s2) + 16px + var(--s3))}
.hw-go .help{flex:1 1 200px;min-width:0}
.hw-go .help:empty{display:none}
.hw-go .btn{max-width:100%;white-space:normal}
details.hwq[open] .hwq-go{display:none}

/* models catalog + wizard */
.cols--models{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.cols--models.cols--solo{grid-template-columns:minmax(0,1fr);max-width:840px}
.catalog{display:grid;gap:var(--s5)}
.cat-sec{display:grid}
.cat-h{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;padding-bottom:var(--s2)}
.cat-h .help{flex:1;min-width:0}
.mcard{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1);width:100%;min-width:0;text-align:left;cursor:pointer;font:inherit;color:inherit;background:none;border:0;border-top:1px solid var(--line)}
.mcard:hover{background:var(--bg-2)}
.mcard-h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.model-modalities{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);color:var(--ink-2);font:400 12px/1.5 var(--sans);min-width:0}
.modality-set{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--s2)}
.modality-type{display:inline-flex;align-items:center;gap:4px}
.model-modalities svg{flex:none}
.model-modalities--unknown{color:var(--ink-3)}
.model-name{display:flex;align-items:center;gap:var(--s2);min-width:0}
.model-brand{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:var(--r-sm);background:var(--mark-tile)}
.model-brand img{display:block;width:24px;height:24px;object-fit:contain}
.runs{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;font:400 12.5px/1.4 var(--sans);color:var(--ink-2)}
.runs b{font-weight:600;color:var(--ink);margin-right:2px}
.runs i{font-style:normal;border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;background:var(--bg);white-space:nowrap}
.runs i.dim{opacity:.45}
.runs i small{color:var(--ink-2);font-size:11.5px}
.opt[disabled]{cursor:not-allowed}
.mcard .t{font:600 15px/1.3 var(--sans);overflow-wrap:anywhere}
.mcard .spec{font:400 13px/1.5 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.mcard .s{font:400 14px/1.5 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.mcard .facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font:400 13px/1.5 var(--mono);color:var(--ink-2)}
.mcard .facts span{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.mcard .caption{color:var(--gold)}
.wizard-col{position:sticky;top:var(--s4);max-height:calc(100vh - var(--s6));overflow:auto}
.wizard{background:var(--gold-wash);border-color:var(--line-2)}
.wizard .head .caption{color:var(--gold)}
.wizard-lede{font:400 14px/1.5 var(--sans);color:var(--ink);max-width:48ch}
.wizard .chip{background:var(--bg)}
.wizard .mrow{grid-template-columns:minmax(0,1fr)}
.wizard .mrow:hover{background:var(--bg)}
.wizard .mrow .st{justify-self:start}
.wizard .mrow.pair .st{flex-direction:row;align-items:center;flex-wrap:wrap}
.wizard-foot{border-top:1px solid var(--line-2);padding-top:var(--s3)}
@media (max-width:1024px){
  .cols--models{grid-template-columns:minmax(0,1fr)}
  .wizard-col{position:static;max-height:none;overflow:visible}
  .cols--models.has-discovery .wizard-col{order:-1}
}
/* results + tuned recipe cards */
/* one tuned recipe card: compact as a .row on Models and New endpoint (two or three abreast), full as a .card on Results.
   Model name, then "N× GPU · $/h · workload", the headline output tok/s with first token and per-user beside it,
   one sentence, the measured gain as a gold pill plus text, the measurement as a mono caption, and Launch this. */
.tuned{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 var(--s4)}
.tuned .trec.on+.trec{border-top-color:var(--line)}
.trecs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s4);align-items:start}
.trec{gap:var(--s3)}
.trec-h{display:grid;gap:var(--s1);justify-content:start}
.trec .t{font:600 14px/1.4 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.trec .l{font:400 14px/1.5 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.trec .l b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.trec-k{display:flex;gap:var(--s3) var(--s5);flex-wrap:wrap;align-items:flex-end}
.kpi{display:grid;gap:var(--s1);min-width:0}
.kpi .v{font:500 20px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;display:flex;align-items:baseline;gap:var(--s1)}
.kpi .v small{font:400 13px var(--sans);color:var(--ink-2);letter-spacing:0}
.kpi--sm .v{font:500 14px/1.4 var(--mono);letter-spacing:0}
.failbox{border-color:var(--bad,#b3261e);display:grid;gap:var(--s3)}
.failbox ul{margin:0;padding-left:var(--s5)}
.trec-k--four{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:var(--s3) var(--s4);align-items:end}
.trec-k--four .kpi .v{font-size:clamp(20px,2.4vw,28px);white-space:normal;flex-wrap:wrap}
.trec-k--four .kpi .v--top{color:var(--gold)}
@media (max-width:640px){.trec-k--four{grid-template-columns:repeat(2,minmax(0,1fr))}.trec-k--four .kpi .v{font-size:22px}}
.trec-g{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.trec-x{font:600 22px/1 var(--mono);letter-spacing:-.02em;color:var(--ink-2);margin-right:var(--s2)}
.trec-x--top{color:var(--gold);font-size:28px}
.trec-g .g{font:500 14px/1.5 var(--sans);color:var(--gold);overflow-wrap:anywhere}
.trec-f{display:flex;justify-content:space-between;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap}
.trec-f .caption{flex:1 1 200px;min-width:0}
.trec-f .btn{flex:none}
/* the full variant is a card on the page: no hairline, no pointer on the body, the stat at the h1 size */
.trec.card{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);gap:var(--s4);cursor:default;background:var(--bg)}
.trec.card:hover{background:var(--bg)}
.trec.card .t{font:600 16px/1.4 var(--sans)}
.trec.card .kpi .v{font-size:28px}
/* the results page: two headed sections and the fold; the best-run table */
.sec{display:grid;gap:var(--s4);min-width:0}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.fold{min-width:0}
.best{min-width:960px}
.best td.m{white-space:normal;min-width:200px}
.best td .caption{display:block;margin-top:var(--s1)}
.best td.n .caption{text-align:right}
@media (max-width:520px){
  .tuned,.trecs{grid-template-columns:minmax(0,1fr)}
  .trec.card{padding:var(--s4)}
  .trec-f .btn{width:100%}
}

/* use with Claude Code or Codex */
.usewith .usewith-pick{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.usewith .usewith-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--gold-wash);color:var(--gold)}
.usewith select{font:400 14px var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);height:38px;padding:0 10px;min-width:0;max-width:100%}
.usewith pre{margin:0;max-width:100%;overflow-x:auto}
.usewith>div,.usewith>p,.usewith>pre{margin-top:var(--s3)}
.usewith .swarm-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:start}
.usewith .swarm-tool{display:grid;gap:var(--s3);min-width:0;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-sm)}
.usewith .swarm-tool-heading{display:flex;gap:var(--s2);align-items:flex-start}
.usewith .swarm-tool-icon{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;color:var(--ink-2)}
.usewith .swarm-tool-icon svg{width:18px;height:18px}
.usewith .swarm-tool p{margin:0;max-width:70ch}
.usewith .swarm-tool h4{margin:0}
.usewith .swarm-tool ul{margin-bottom:0;padding-left:1.2em}
.usewith .swarm-tool .fold{border-top:1px solid var(--line);padding-top:var(--s3)}
.usewith .swarm-tool .fold>*+*{margin-top:var(--s3)}
.usewith .tool-tradeoffs{display:grid;gap:var(--s2);margin:0}
.usewith .tool-tradeoffs dt{font-weight:600;color:var(--ink)}
.usewith .tool-tradeoffs dd{margin:0}
.usewith .tool-tradeoffs ul{margin:0;padding-left:1.2em;display:grid;gap:var(--s1)}
.usewith .tool-claim-basis{display:block;color:var(--ink-2);font-size:.85em}
.usewith .tool-status{margin:0 0 var(--s1);color:var(--ink-2)}
.usewith .tool-status-label{display:inline-block;margin-right:var(--s1);padding:0 var(--s2);border:1px solid currentColor;border-radius:var(--r-pill);font-size:.8em;font-weight:600;color:var(--ink)}
.usewith .tool-status--development .tool-status-label{color:var(--ink-2);border-style:dashed}
@media (max-width:900px){.usewith .swarm-tools{grid-template-columns:minmax(0,1fr)}}

/* pickers, see-more, icons */
/* section rhythm on Models, New endpoint and Endpoints: --s6 between sections, 20px section titles */
body[data-page="models"] .content,body[data-page="new"] .content,body[data-page="endpoints"] .content{gap:var(--s6)}
body[data-page="models"] .cols,body[data-page="new"] .cols,body[data-page="models"] .cols--side,body[data-page="new"] .cols--side,body[data-page="endpoints"] .eps-wrap{gap:var(--s6)}
body[data-page="models"] .card>.head>h3,body[data-page="new"] .card>.head>h3,body[data-page="endpoints"] .card>.head>h3{font:600 20px/1.3 var(--sans);letter-spacing:-.01em}
/* provider marks are smaller on a card's hardware line */
.ep-name small .mark-p{width:18px;height:18px;padding:1px;vertical-align:-5px;margin-right:var(--s1)}
.ep-name small .mark-p.aws{width:auto;padding:1px 3px}
.ep-name small .mark-p.aws img{width:22px}
.ep-name small .mark-p.velobyte{width:18px;height:18px;padding:0}
.cloud{padding:var(--s4) var(--s2)}
.cloud-h b{font-size:15px}
/* hardware picker: one group per provider with mark, name and state; the best three options, then a fold with the rest */
.hwlist{gap:var(--s5)}
.hwg-h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding-bottom:var(--s2)}
.hwg-h .mark-p{margin-right:0}
.hwg-h h4{font:600 16px/1.4 var(--sans);min-width:0;overflow-wrap:anywhere}
.hwg-h .caption{margin-left:auto}
.hwp-list{display:grid;min-width:0}
.hwp-list>.btn{justify-self:start;margin:var(--s2) 0}
.hw-ask{margin:0 0 var(--s2);padding-left:calc(var(--s2) + 16px + var(--s3))}
.hwg>.hw-ask{margin-top:var(--s3)}
.hwg>.caption{margin-top:var(--s3)}
.opt{grid-template-columns:auto minmax(0,1fr);align-items:start;padding:var(--s3) var(--s2)}
.opt .radio{margin-top:3px}
.opt-b{display:grid;gap:var(--s1);min-width:0}
.opt .t{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);font:500 14px/1.5 var(--sans);min-width:0}
.opt .t>*+*::before{content:"·";margin-right:var(--s2);color:var(--ink-2);font-weight:400}
.opt .t .pill::before{content:none}
.opt .t .p{font:500 14px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.opt .t .caption{font-weight:400}
.hwp-more{min-width:0}
.hwp-more>summary{border-top:1px solid var(--line);padding:var(--s3) var(--s2)}
.hwp-more>:not(summary){margin-top:0}
.hwp-more[open]>summary .more-l,.hwp-more:not([open])>summary .less-l{display:none}
/* models catalog: chip navigation, a headed section per category with its glyph, six cards then "See all N" */
.catalog{gap:var(--s6)}
.cat-nav{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cat-nav .chip{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--ink-2);min-height:32px}
.cat-nav .chip svg{width:14px;height:14px;flex:none}
.cat-nav .chip .n{font:400 12px var(--mono);color:var(--ink-2)}
.cat-nav .chip:hover,.cat-nav .chip:hover .n{color:var(--ink)}
.cat-sec{scroll-margin-top:var(--s4)}
.cat-h{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--s2) var(--s3);align-items:center;padding-bottom:var(--s3)}
.cat-i{width:36px;height:36px;border-radius:var(--r-sm);background:var(--gold-wash);color:var(--gold);display:grid;place-items:center}
.cat-i svg{width:20px;height:20px}
.cat-t{display:grid;gap:2px;min-width:0}
.cat-h h3{font:600 20px/1.3 var(--sans);letter-spacing:-.01em;overflow-wrap:anywhere}
.cat-h .caption{white-space:nowrap}
.mcards{display:grid}
.mcard{padding:var(--s4) var(--s2)}
.cat-f{display:flex;padding-top:var(--s2)}
@media (max-width:520px){
  .opt{grid-template-columns:auto minmax(0,1fr)}
  .cat-h{grid-template-columns:36px minmax(0,1fr)}
  .cat-h>.caption{grid-column:2}
}
.stepbtn{cursor:pointer;padding:0;background:transparent}
.stepbtn:hover{border-color:var(--ink)}
.stepbtn.done{background:var(--ink)}

/* hardware that does not fit stays visible, dimmed, last, with a red dot */
.opt--unfit{opacity:.55}
.opt--unfit .t>span:first-child::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);margin-right:6px;vertical-align:1px}
.opt--unfit:hover{opacity:.8}

/* yc, credits, quota */
/* the YC code form sits on the page by itself, one field wide */
.yc{max-width:480px}
/* the credit walkthrough on Account: one row per cloud (mark, program, state, amount), its steps as a checklist; the link opens where the step happens */
.cloud-h .caption{min-width:0;overflow-wrap:anywhere}
.credit-steps{display:grid;gap:var(--s3);padding-top:var(--s2)}
.credit-step{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s1) var(--s2);align-items:start}
.credit-step input{width:16px;height:16px;accent-color:var(--ink);margin:var(--s1) 0 0}
.credit-step label{font:500 14px/1.5 var(--sans);color:var(--ink);cursor:pointer}
.credit-step.done label{color:var(--ink-2)}
.credit-step .help{grid-column:2}
.deal:empty{display:none}
.deal .fold>summary{display:grid;grid-template-columns:12px minmax(0,1fr);gap:0 var(--s2);padding:0}
.deal .fold>summary .caption{grid-column:2}
.clouds--compact .cloud:not(.open)>:not(.cloud-h):not(.deal){display:none}
.prompt{white-space:pre-wrap;overflow-wrap:anywhere;max-width:88ch}
#mcp-hand .dl .row{align-items:center;flex-wrap:nowrap}
#mcp-hand .dl .row .k{flex:none;min-width:150px}
#mcp-hand .dl .row .v{flex:1 1 auto;min-width:0;text-align:left;font-weight:400;font-size:13px}
.yc-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding:var(--s4) var(--s5)}
.yc-strip .keyrow{flex:0 1 340px}
.yc-strip .help{flex:1 1 260px;margin:0}
.yc-strip .msg{flex:1 1 100%}
@media (max-width:720px){
  .yc-strip .keyrow{flex-basis:100%}
  #mcp-hand .dl .row{flex-wrap:wrap}
  #mcp-hand .dl .row .v{flex-basis:100%;order:3}
}

#codex-card{padding:var(--s3) var(--s4)}
#codex-card .head{margin:0}
#codex-card .head h3{font-size:16px}
#codex-card>.small{margin:var(--s1) 0 0;font-size:13px}
#codex-card .folds{display:flex;flex-wrap:wrap;gap:0 var(--s4);margin-top:var(--s1)}
#codex-card .folds>details{margin:0}
#codex-card .folds>details[open]{flex-basis:100%}
#codex-card .folds>details>summary{font-size:13px;padding:var(--s1) 0}
/* the optimization panel: the one loud block on the launching page and the endpoint page */
.optimize{display:block}
.optimize-d>summary{list-style:none;display:inline-flex;cursor:pointer}
.optimize-d>summary::-webkit-details-marker{display:none}
.optimize-body{display:grid;gap:var(--s3);margin-top:var(--s3);padding:var(--s4);border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-2)}
.optimize[hidden]{display:none}
.optimize-h{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.optimize-h h2{margin:0;font:600 22px/1.2 var(--sans)}
.optimize-p{margin:0;max-width:68ch;font:400 15px/1.5 var(--sans);color:var(--ink)}
.optimize-note{font:400 13px/1.45 var(--sans);color:var(--ink-2)}
.optimize-warn{margin:0;max-width:68ch;padding:var(--s3) var(--s4);border:1px solid var(--warn);border-radius:var(--r-sm);background:var(--warn-wash);font:400 14px/1.5 var(--sans)}
.optimize-go{display:flex;gap:var(--s3) var(--s4);align-items:center;flex-wrap:wrap}
.btn--lg{min-height:52px;padding:0 var(--s6,28px);font-size:17px;font-weight:600}
.cap-state{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink-2)} .cap-state b{color:var(--ink);font-weight:600} .cap-state--hot{color:var(--ink)}
.cap-nodes{margin:0;padding-left:18px;font:400 13px/1.6 var(--sans);color:var(--ink-2)}
.optimize-slo{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;margin:0}
.optimize-slo b{font:600 14px/1.3 var(--sans);flex-basis:100%}
.optimize-slo label{display:inline-flex;align-items:center;flex-wrap:wrap;max-width:100%;min-width:0;gap:var(--s2);font:400 13px/1.3 var(--sans);color:var(--ink-2)}
.optimize-slo input{width:9ch;padding:4px 6px;font:500 13px var(--mono)}
.optimize-slo select{max-width:100%;min-width:0;padding:4px 6px;font:400 13px var(--sans)}
.optimize-slo .optimize-note{flex-basis:100%}
.optimize-slo .optimize-consent{flex-basis:100%;flex-wrap:nowrap;align-items:flex-start}
.optimize-slo .optimize-consent input{width:auto;flex-shrink:0;margin-top:2px}
.optimize-body,.optimize-slo{min-width:0}
.optimize-slo .btn{max-width:100%;white-space:normal;height:auto;padding-top:var(--s2);padding-bottom:var(--s2)}
.optimize-stmt{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3)}
.optimize-stmt div{display:grid;gap:2px;align-content:start;padding:var(--s3) var(--s4);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg)}
.optimize-stmt b{font:600 17px/1.2 var(--mono);letter-spacing:-.01em}
.optimize-stmt span{font:400 12.5px/1.45 var(--sans);color:var(--ink-2)}
.trec-h .avatar-m{width:22px;height:22px;margin-right:0}
.optimize-goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3)}
.optimize-goal{display:grid;gap:var(--s2);align-content:start;justify-items:start;padding:var(--s3) var(--s4);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg)}
.optimize-goal b{font:600 14px/1.3 var(--sans)}
.optimize-goal span:not(.pill){font:400 13px/1.45 var(--sans);color:var(--ink-2)}
.reserve{display:grid;gap:var(--s3);max-width:720px}
.reserve p{margin:0}

/* a catalog entry's serving note: what we measured about running it on the engine the console launches */
.mcard .serving-broken{color:var(--bad,#b42318)}
.mcard .serving-unverified{color:var(--muted,#6b7280)}
.mcard .serving-measured{color:var(--ok,#067647)}

.ak-form{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s3);align-items:end}
.ak-form .actions{padding-bottom:2px}
.ak-made{display:grid;gap:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--ok);border-radius:var(--r-md);background:var(--ok-wash)}
.ak-made-row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.ak-made code{font:500 13px/1.4 var(--mono);overflow-wrap:anywhere;min-width:0;flex:1 1 240px;padding:var(--s2) var(--s3);background:var(--bg)}
.ak-table .sub{display:block;font-size:12px;color:var(--ink-3)}
.ak-table td:last-child{text-align:right}
#ak-use .csteps{gap:var(--s4)}
#ak-use pre{margin-top:var(--s2);white-space:pre}
@media (max-width:720px){.ak-form{grid-template-columns:minmax(0,1fr)}.ak-form .actions .btn{width:100%}}

/* optimized endpoints: a short catalog of cards, each a link to its page */
.opt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)}
.opt-group-title{grid-column:1/-1;margin:var(--s3) 0 0;font:500 17px/1.4 var(--sans);color:var(--ink)}
.opt-group-title:first-child{margin-top:0}
.opt-card{display:flex;flex-direction:column;gap:var(--s2);color:var(--ink);text-decoration:none}
.opt-card:hover{border-color:var(--line-2);background:var(--bg-2)}
.opt-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.opt-card .model-name{overflow-wrap:anywhere}
.opt-card-main{display:flex;flex-direction:column;gap:var(--s2);flex:1;color:inherit;text-decoration:none;min-width:0}
.opt-card-main:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.opt-card>.actions{margin-top:var(--s3)}
.opt-card>.actions .btn{white-space:normal;text-align:center}
.opt-card-n{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;font:400 14px var(--sans);margin-top:auto;padding-top:var(--s2)}
.opt-card-n b{font:500 20px var(--mono);font-variant-numeric:tabular-nums}
.opt-price{font:400 14px var(--mono)}
.opt-hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s5)}
.opt-hero-l{display:grid;gap:var(--s2);min-width:0}
.opt-hero-price{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;font:400 16px var(--mono)}
.opt-hero-price b{font:500 34px/1 var(--mono);letter-spacing:-.02em}
.opt-hero .help{max-width:62ch;margin:0;font-size:14px}
.opt-hero-r{display:grid;gap:var(--s2);justify-items:end}
.opt-hero-r .msg{margin:0;text-align:right;max-width:32ch}
.opt-stats{margin:var(--s2) 0}
.opt-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);counter-reset:step}
.opt-steps li{counter-increment:step;display:grid;gap:var(--s1);align-content:start;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);min-width:0}
.opt-steps b{font:600 14px/1.3 var(--sans)}
.opt-steps b::before{content:counter(step) ". ";color:var(--ink-2);font-weight:500}
.opt-steps span{font:400 13px/1.45 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.opt-ref h4{margin:var(--s4) 0 var(--s1);font:600 14px/1.3 var(--sans)}
.opt-ref>p{margin:0 0 var(--s2);max-width:80ch}
.opt-mlist{display:grid}
.opt-m{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s4);padding:var(--s3) 0;border-top:1px solid var(--line)}
.opt-m:first-child{border-top:0}
.opt-m-k{font:500 14px/1.4 var(--sans)}
.opt-m-v{font:500 14px var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.opt-note{grid-column:1/-1;font:400 12.5px/1.45 var(--sans);color:var(--ink-2);max-width:80ch}
@media (max-width:720px){.opt-hero{grid-template-columns:minmax(0,1fr)}.opt-hero-r{justify-items:start}.opt-hero-r .msg{text-align:left}.opt-steps{grid-template-columns:minmax(0,1fr)}}
.opt-session .head{gap:var(--s3);flex-wrap:wrap}
.opt-price s{color:var(--ink-3);margin-left:var(--s1)}
#opt-admin>summary{list-style:none;justify-self:start}
.opt-prov[open]{gap:var(--s5)}
.opt-prov>summary{justify-self:start}
.opt-byo,.opt-adm{display:grid;gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.opt-byo h4,.opt-adm h4{margin:0;font:600 15px/1.3 var(--sans)}
.opt-byo .help,.opt-adm .help{margin:0;max-width:72ch}
.byo-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);counter-reset:byo}
.byo-steps>li{counter-increment:byo;display:grid;gap:var(--s2);justify-items:start;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);min-width:0}
.byo-steps>li>b{font:600 14px/1.3 var(--sans)}
.byo-steps>li>b::before{content:counter(byo) ". ";color:var(--ink-2);font-weight:500}
.byo-steps .caption,.byo-steps .help{margin:0}
.byo-steps form,.byo-token-new{justify-self:stretch}
.byo-token-new{display:grid;gap:var(--s2)}
.byo-token-new[hidden]{display:none}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.beta-list{list-style:none;margin:0;padding:0;display:grid}
.beta-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);font:400 14px var(--mono);overflow-wrap:anywhere}
.beta-list li:first-child{border-top:0}
.opt-errors td,.opt-errors th{white-space:normal;vertical-align:top}
.opt-errors td:nth-child(2){overflow-wrap:anywhere;max-width:22ch}
.opt-errors td:nth-child(3){min-width:24ch;font-family:var(--sans)}

/* Model discovery: task evidence and published facts, before hardware sizing. */
.discovery-search{display:flex;align-items:stretch;gap:8px}
.discovery-search input{min-width:0;min-height:42px;flex:1}.discovery-search .btn{flex:none;white-space:nowrap}
.discovery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;font:400 12px/1.4 var(--sans);color:var(--ink-2)}
.discovery-toolbar label{display:flex;align-items:center;gap:6px}.discovery-toolbar select{font:inherit;padding:5px 8px;max-width:160px}
.discovery-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:12px;min-width:0}
.discovery-card-head{display:flex;align-items:flex-start;gap:10px}.discovery-card h4{font:600 15px/1.45 var(--sans);margin:0;overflow-wrap:anywhere}.discovery-card h4 a{color:var(--ink);text-decoration:none}.discovery-card h4 a:hover{text-decoration:underline}
.discovery-card-head p{font:400 12px/1.5 var(--sans);color:var(--ink-2);margin:3px 0 0}.discovery-avatar{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);font:600 14px var(--sans)}
.discovery-match{font:400 13px/1.5 var(--sans);margin:12px 0;color:var(--ink-2)}
.discovery-stats{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 12px/1.6 var(--sans);color:var(--ink-2)}.discovery-stats b{font-weight:600;color:var(--ink)}
.discovery-eval-count{font:500 12px/1.5 var(--sans);color:var(--blue);margin:8px 0}
.discovery-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.discovery-actions .btn{font-size:11.5px;padding:7px 9px;min-height:34px}.discovery-actions [aria-pressed=true]{border-color:var(--blue);color:var(--blue)}
.discovery-runtime,.discovery-muted{font:400 11.5px/1.6 var(--sans);color:var(--ink-2);margin:10px 0 0}
.discovery-details{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;min-width:0}.discovery-details h4{margin:18px 0 10px}
.discovery-facts{display:grid;gap:8px;font:400 12px/1.5 var(--sans)}.discovery-facts>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px}.discovery-facts dt{color:var(--ink-2)}.discovery-facts dd{margin:0;overflow-wrap:anywhere}
.discovery-table{overflow:auto;max-width:100%;margin:10px 0}.discovery-table table{width:100%;border-collapse:collapse;font:400 12px/1.5 var(--sans)}.discovery-table th,.discovery-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;min-width:80px;max-width:260px;overflow-wrap:anywhere}.discovery-table th{font-weight:600}.discovery-table small{display:block;font:400 10.5px/1.5 var(--sans);color:var(--ink-2);margin-top:3px}.discovery-score{font:500 13px/1.5 var(--mono)}
.discovery-evidence,.discovery-published{font:400 12px/1.6 var(--sans);margin-top:12px}.discovery-evidence summary,.discovery-details summary{cursor:pointer;color:var(--ink-2)}.discovery-evidence p{border-left:2px solid var(--line);padding-left:10px;color:var(--ink-2)}
.discovery-readme{white-space:pre-wrap;overflow-wrap:anywhere;max-height:380px;overflow:auto;font:400 12px/1.65 var(--mono);padding:12px;background:var(--bg-2);border-radius:8px;margin-top:10px}
.discovery-links{display:grid;gap:7px;overflow-wrap:anywhere;font:400 11.5px/1.5 var(--sans);margin-top:14px}
.discovery-comparison{background:var(--bg);border:1px solid var(--line);border-radius:12px;margin-top:18px;padding:16px;min-width:0}.discovery-comparison .head h4{font:600 15px var(--sans);margin:0}.discovery-comparison th{min-width:130px}.discovery-comparison th button{display:block;font-size:10px;padding:4px 0}
.discovery-loading{display:flex;align-items:center;gap:10px;padding:24px 0;font:400 13px var(--sans);color:var(--ink-2)}.discovery-loading span{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:discovery-spin .8s linear infinite}
@keyframes discovery-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.discovery-loading span{animation:none}}
@media(max-width:600px){.discovery-search{flex-direction:column}.discovery-search .btn{align-self:flex-start}.discovery-card{padding:14px}.discovery-facts>div{grid-template-columns:90px minmax(0,1fr)}.discovery-toolbar{align-items:flex-start;flex-direction:column}}

/* Keep discovery in the wizard beside the catalog. */
.wizard .discovery-card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:14px 0;margin:0}
.wizard .discovery-card h4{font-size:13px}.wizard .discovery-avatar{width:26px;height:26px;border-radius:6px;font-size:12px}
.wizard .discovery-match{display:none}.wizard .discovery-stats{font-size:11px;gap:4px 10px;margin-top:8px}.wizard .discovery-actions{margin-top:8px}
.wizard .discovery-runtime{font-size:10px;margin-top:7px}.wizard .discovery-evidence{font-size:11px;margin-top:7px}.wizard .discovery-toolbar{flex-wrap:wrap;font-size:11px;gap:8px}
.wizard .discovery-eval-count{font-size:11px;margin:7px 0}.wizard .discovery-facts>div{grid-template-columns:90px minmax(0,1fr)}

/* Workload-aware hardware: one recommendation, expandable alternatives. */
.hardware-targets>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 13px var(--sans)}
.hardware-targets>.adv-two{margin-top:16px}
.hardware-targets input{max-width:100%}
.hardware-providers>summary{font:500 14px var(--sans)}
.hardware-providers[open]>summary{margin-bottom:20px}
.hardware-best{display:grid;gap:14px;padding:20px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);min-width:0}
.hardware-best-head,.hardware-best-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hardware-best-title b{font:500 19px/1.35 var(--sans)}
.hardware-best-title strong{font:500 19px var(--mono);white-space:nowrap}
.hardware-best>.caption{display:flex;gap:8px;align-items:center;margin:0}
.hardware-best-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hardware-best-stats>div{display:grid;gap:5px;align-content:start;min-width:0}
.hardware-best-stats b{font:500 16px/1.4 var(--mono);font-variant-numeric:tabular-nums}
.hardware-best-stats span{font:400 12px/1.5 var(--sans);color:var(--ink-2)}
.hardware-best>.btn{justify-self:start;max-width:100%;white-space:normal}
.hwq>summary{flex-wrap:wrap}.hwq>summary>b,.hwq>summary>.caption{flex-shrink:0}
@media(max-width:600px){.hardware-best{padding:16px}.hardware-best-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hardware-best-stats>div:first-child{grid-column:1/-1}.hardware-best-stats>div:first-child b{font-size:20px}}
.offer{display:grid;gap:var(--s2);min-width:0}
.offer-h{margin:0}
.offer-ramp{width:100%;border-collapse:collapse;font:400 13px var(--sans);display:block;overflow-x:auto}
.offer-ramp caption{text-align:left;color:var(--ink-2);padding-bottom:var(--s1)}
.offer-ramp th,.offer-ramp td{padding:var(--s1) var(--s2);text-align:right;white-space:nowrap;border-top:1px solid var(--line)}
.offer-ramp tr.on td{font-weight:600}
.offer-use{display:grid;gap:var(--s2);min-width:0}
.offer-use pre{overflow-x:auto}
.agent-prompt{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);color:var(--ink);box-shadow:var(--shadow-2);padding:var(--s7) var(--s6) var(--s6);width:min(440px,calc(100vw - 32px));text-align:center}
.agent-prompt::backdrop{background:rgb(0 0 0 / .45)}
.agent-prompt h2{margin:0 0 var(--s6);font:600 24px/1.25 var(--sans)}
.agent-prompt__copy{width:100%;justify-content:center;padding:var(--s4) var(--s5);font-size:18px}
.agent-prompt__close{position:absolute;top:var(--s2);right:var(--s3);border:0;background:none;color:var(--ink-2);font-size:22px;line-height:1;cursor:pointer;padding:var(--s2)}
.agent-prompt__close:hover{color:var(--ink)}
.agent-setup{text-align:left;width:min(560px,calc(100vw - 32px))}
.agent-setup h2{font-size:20px}
.agent-setup__choice{border-top:1px solid var(--line);padding:var(--s4) 0}
.agent-setup__choice h3{margin:0 0 var(--s2);font:600 15px/1.3 var(--sans)}
.agent-setup__choice select,.agent-setup__choice textarea{width:100%;margin-bottom:var(--s2)}
.box-agents{margin:0 0 var(--s4);font-weight:600}