/* 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-ink:#ffffff; --mark-aws:#ff9900; --mark-aws-ink:#232f3e; --mark-lambda:#7c3aed; --mark-gcp:#4285f4; --mark-azure:#0078d4;
  --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}
.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);background:var(--ink);color:var(--bg);display:grid;place-items:center;font:600 14px var(--sans);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 .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)}
.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{background:var(--ink)}
.toggle[aria-pressed="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;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%;display:grid;gap:var(--s5)}
.gate .card{padding:var(--s6);gap:var(--s5)}
.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:cover;background:var(--bg-3);flex:none;margin-right:var(--s2);vertical-align:middle}
/* 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}
.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)}
.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(4,minmax(0,1fr));gap:var(--s4)}
.tile{display:grid;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)}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.charts:empty{display:none}
.chart{display:grid;gap:var(--s2);min-width:0;position:relative}
.chart-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.chart h4{font-weight:500;color:var(--ink-2)}
.chart .legend{display:flex;gap:var(--s3);font:400 12px var(--mono);color:var(--ink-2)}
.chart .legend i{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:var(--s1)}
.chart .legend .sw1{background:var(--chart-1)}
.chart .legend .sw2{background:var(--chart-2)}
.chart svg{width:100%;height:auto;display:block;overflow:visible;touch-action:none}
.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 .x{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3}
.chart .dot{stroke:var(--bg);stroke-width:2}
.chart .dot.d1{fill:var(--chart-1)}
.chart .dot.d2{fill:var(--chart-2)}
.chart .tip{position:absolute;pointer-events:none;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow-2);padding:var(--s1) var(--s2);font:400 12px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;z-index:2}
.chart .tip b{font-weight:500;display:block;color:var(--ink-2)}
.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{opacity:.6}
.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:100%;max-width:260px;height:28px;display:block;overflow:visible;flex:1 1 auto}
.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}
.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}
.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-h .btn{margin-left:auto}
.cloud .actions .help{flex:1 1 160px;min-width:0}
.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}
.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)}

/* 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)}
.mark-p{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:var(--r-sm);font:600 12px/1 var(--mono);letter-spacing:0;color:var(--mark-ink);vertical-align:-5px;margin-right:var(--s2)}
.mark-p.aws{background:var(--mark-aws);color:var(--mark-aws-ink)}
.mark-p.lambda{background:var(--mark-lambda)}
.mark-p.gcp{background:var(--mark-gcp)}
.mark-p.azure{background:var(--mark-azure)}
.mark-p.velobyte{background:var(--ink);color:var(--bg)}
/* 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 */
@media (max-width:1024px){
  .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,.charts{grid-template-columns:minmax(0,1fr)}
  .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)}
  .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.has-model .ask,body.has-model .seg--source,body.has-model .results-h,body.has-model #results,body.has-model #search-results,body.has-model #search-reading,body.has-model #search-msg,body.has-model #tuned-field{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;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}
.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{white-space:nowrap}
.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}
}
/* 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}
.trec-g{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.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)}

/* 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: the box grows to its text ("aws", "Az"); smaller on a card's hardware line */
.mark-p{width:auto;min-width:22px;padding:0 var(--s1)}
.ep-name small .mark-p{height:18px;min-width:18px;vertical-align:-5px;margin-right:var(--s1)}
.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}
.hwp-list>.btn{justify-self:start;margin:var(--s2) 0}
.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}