/* AI Compute landing hero board (Oct 17 2026). Markup from scripts/ac_board.py, behaviour in ai-compute-board.js.
   Solid blocks, 2px rules, one flat offset. Every selector is .acb-; the tokens fall back to the section's values. */
.acb{
  --acb-dark:var(--ac-dark,#0f172a); --acb-dark-2:var(--ac-dark-2,#1c2740); --acb-accent:var(--ac-accent,#1f5eff);
  --acb-ink:var(--ac-ink,#0b1220); --acb-ink-3:#5b6678; --acb-paper:var(--ac-paper,#ffffff); --acb-bg:var(--ac-bg,#f3f5f9);
  --acb-line:var(--ac-line,#d6dce6); --acb-r:8px;
  --acb-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --acb-display:"Archivo",Helvetica,Arial,sans-serif;
  --acb-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  container-type:inline-size;
  box-sizing:border-box; max-width:640px; margin:0 6px 6px 0;
  background:var(--acb-paper); color:var(--acb-ink); font-family:var(--acb-sans);
  border:2px solid var(--acb-ink); border-radius:var(--acb-r); box-shadow:6px 6px 0 var(--acb-accent); overflow:hidden;
}
.acb *,.acb *::before,.acb *::after{box-sizing:border-box}

/* Tabs: a five-part segmented control; links until the script makes them buttons. */
.acb-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:2px solid var(--acb-ink);background:var(--acb-paper)}
.acb .acb-tab{
  appearance:none; -webkit-appearance:none; margin:0; border:0; border-right:2px solid var(--acb-line); border-radius:0;
  display:flex; align-items:center; justify-content:center; min-height:46px; padding:10px 4px;
  background:var(--acb-paper); color:var(--acb-ink); font:600 14px/1.1 var(--acb-sans); text-align:center;
  text-decoration:none; white-space:nowrap; cursor:pointer;
}
.acb .acb-tab:last-child{border-right:0}
.acb .acb-tab:hover{background:var(--acb-bg);color:var(--acb-ink)}
.acb .acb-tab.acb-on,.acb .acb-tab[aria-pressed="true"]{background:var(--acb-accent);color:#fff;border-right-color:var(--acb-accent)}
.acb .acb-tab:focus{outline:none}
.acb .acb-tab:focus-visible{outline:3px solid var(--acb-ink);outline-offset:-5px}
.acb .acb-tab.acb-on:focus-visible,.acb .acb-tab[aria-pressed="true"]:focus-visible{outline-color:#fff}

/* The board: a navy slab drawn in plan view. */
.acb-svg{display:block;width:100%;height:auto;background:var(--acb-dark)}
.acb-slab{fill:var(--acb-dark)}
.acb-dot{fill:var(--acb-dark-2)}
.acb-hole{fill:var(--acb-dark);stroke:var(--acb-dark-2);stroke-width:2}
.acb-chip{fill:var(--acb-paper)}
.acb-bar{fill:var(--acb-accent)}
.acb-trace{stroke:var(--acb-accent);stroke-width:3;stroke-linecap:butt}
.acb-svg text{font-family:var(--acb-sans)}
.acb .acb-s-maker,.acb .acb-s-mpn,.acb .acb-s-ff{font:600 11px var(--acb-mono);letter-spacing:.06em;fill:#8fa0c0}
.acb .acb-s-maker{text-transform:uppercase;letter-spacing:.1em;fill:#c9d4ea}
.acb .acb-s-name{font:600 19px var(--acb-sans);fill:#fff}
.acb .acb-s-bar{font:600 16px var(--acb-sans);fill:#fff;dominant-baseline:central}
.acb .acb-s-bard{font:500 12px var(--acb-mono);fill:#e3eaff;dominant-baseline:central}
.acb .acb-s-chip,.acb .acb-s-idx{font:600 11px var(--acb-mono);fill:var(--acb-ink-3)}
.acb .acb-s-mem{font:800 28px var(--acb-display);fill:var(--acb-ink);letter-spacing:-.01em;dominant-baseline:central}
.acb .acb-s-type{font:500 11px var(--acb-mono);fill:var(--acb-ink-3)}

/* Readout. */
.acb-read{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);border-top:2px solid var(--acb-ink)}
.acb-cell{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:0;padding:14px 16px;border-right:2px solid var(--acb-line)}
.acb-cell:nth-child(3){border-right:0}
.acb-k{font:600 11px/1.2 var(--acb-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acb-ink-3)}
.acb-v{font:600 17px/1.25 var(--acb-sans);color:var(--acb-ink)}
.acb-big{font:800 44px/1 var(--acb-display);letter-spacing:-.02em;color:var(--acb-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.acb-big-u{font-size:.55em;letter-spacing:0}
.acb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.acb-buy{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--acb-bg);border-top:2px solid var(--acb-line)}
.acb-price{font:500 16px/1.3 var(--acb-sans);color:var(--acb-ink)}
.acb-price b{font:800 22px/1 var(--acb-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.acb-price [hidden]{display:none}
.acb .acb-go{
  flex:none; display:inline-flex; align-items:center; min-height:44px; padding:10px 16px;
  background:var(--acb-ink); color:#fff; border:2px solid var(--acb-ink); border-radius:var(--acb-r);
  font:600 15px/1 var(--acb-sans); text-decoration:none; white-space:nowrap;
}
.acb .acb-go:hover{background:var(--acb-accent);border-color:var(--acb-accent);color:#fff}
.acb .acb-go:focus{outline:none}
.acb .acb-go:focus-visible{outline:3px solid var(--acb-accent);outline-offset:3px}

/* Motion: the tiles load in sequence once (about 0.8s), swaps cross-fade over 250ms. */
@keyframes acb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.acb-tile{animation:acb-in .32s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0) * 68ms)}
.acb-f{transition:opacity 125ms linear}
.acb-out .acb-f{opacity:0}
@media (prefers-reduced-motion:reduce){
  .acb-tile{animation:none}
  .acb-f{transition:none}
  .acb-out .acb-f{opacity:1}
}

/* Narrow: the drawing keeps the tile and bar text only, larger; readouts stack. */
@container (max-width:479px){
  .acb .acb-s-sm{display:none}
  .acb .acb-s-name{font-size:30px}
  .acb .acb-s-mem{font-size:30px}
  .acb .acb-s-bar{font-size:28px}
  .acb .acb-tab{font-size:13px;min-height:44px;padding:8px 2px}
  .acb-read{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .acb-cell-big{grid-column:1/-1;border-right:0;border-bottom:2px solid var(--acb-line)}
  .acb-cell:nth-child(2){border-right:2px solid var(--acb-line)}
  .acb-big{font-size:40px}
  .acb-v{font-size:15px}
  .acb-buy{flex-direction:column;align-items:stretch}
  .acb .acb-go{justify-content:center}
}
@container (max-width:339px){
  .acb-read{grid-template-columns:minmax(0,1fr)}
  .acb-cell:nth-child(2){border-right:0;border-bottom:2px solid var(--acb-line)}
  .acb .acb-tab{font-size:12px}
}