/* ==========================================================================
   ByteShape design system: site.css
   --------------------------------------------------------------------------
   Dark, single theme, no dependencies. A terminal and instrumentation look:
   generous whitespace in layout, tight density in data components, mono
   numerals wherever a measurement appears.

   IMPORTANT. This sheet loads ALONGSIDE the legacy css/styles.css on blog,
   demo and run-hf-model pages. styles.css comes first, site.css second.
   Therefore:
     * no bare element selectors, except :root and the global a11y rules;
     * page-level base styles are scoped to `body.bs-page`;
     * .site-header / .site-nav / .site-footer set EVERY layout-relevant
       property explicitly (position, display, background, padding, margin,
       z-index, box-sizing, color), so a legacy `nav {}` / `footer {}` /
       `a {}` / `h1,h2,h3 {}` rule cannot bleed through.

   How to edit this sheet
     * Edit the rule that is already here. Never append a second copy of it.
     * One rule per selector per media context.
     * A rule that belongs to one page lives in that page's section.
     * Reduced-motion and print opt-outs live in the last section, and only
       there. They win because they come last, so they are never repeated.
     * Say why a rule exists, not when it was added. Git history holds dates.
     * Verify a change with the Python checkers in scripts/ and with a render
       comparison. Nothing on any page should move by a pixel.

   Table of contents
     1   Tokens
     2   Base and accessibility
     3   Layout primitives
     4   Type helpers
     5   Buttons and links
     6   Site header and nav
     7   Site footer
     8   Cards and generic components
     9   Data components
     10  Home hero
     11  Home sections
     12  Technology page
     13  Optimize page
     14  Company page
     15  Models catalog
     16  Model finder
     17  Legacy page overrides
     18  Motion and print opt-outs
   ========================================================================== */

/* ==========================================================================
   TOKENS
   --------------------------------------------------------------------------
   Every custom property the sheet reads. `:root` holds the defaults; a page
   shell redeclares only the few that change for it.
   ========================================================================== */

/* The shared bar is 60px tall. --bs-header-h carries that number, so anchor
   scrolling and the blog contents rail keep their offsets. */
:root {
  /* --- surface ramp: deep black base, blue-tinted elevation -------------- */
  --bs-bg: #000000;
  --bs-bg-raise: #0a0c10;
  --bs-surface: #0d1016;
  --bs-surface-2: #11151c;
  --bs-surface-3: #161b24;
  --bs-line: rgba(255, 255, 255, 0.12);
  --bs-line-strong: rgba(255, 255, 255, 0.20);
  /* --- text: all four pass WCAG AA on --bs-bg ---------------------------- */
  --bs-text: #e9edf4; /* 16.4:1 */
  --bs-text-2: #a5adbb; /*  8.7:1 */
  --bs-text-3: #79828f; /*  5.0:1 */
  --bs-text-on-accent: #100a04; /*  6.1:1 on --bs-accent */
  /* --- brand accent: from images/logo.svg (#F06400) ---------------------- */
  --bs-accent: #f06400; /* fills, bars, buttons; 6.1:1 on --bs-bg */
  --bs-accent-bright: #ff8c3a; /* accent text and links; 8.5:1 on --bs-bg */
  --bs-accent-deep: #c85000; /* pressed / hover on filled surfaces      */
  --bs-accent-soft: rgba(240, 100, 0, 0.13);
  --bs-accent-line: rgba(240, 100, 0, 0.38);
  /* --- data colours: gray = original/BF16, accent = ByteShape ------------ */
  --bs-data-base: #5a6371;
  --bs-data-base-2: #6d7684;
  --bs-data-accent: var(--bs-accent);
  --bs-data-tick: rgba(255, 255, 255, 0.42);
  /* --- type -------------------------------------------------------------- */
  --bs-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --bs-fs-display: clamp(2.3rem, 1.35rem + 4.1vw, 3.95rem);
  --bs-fs-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem);
  --bs-fs-h3: clamp(1.08rem, 1rem + 0.42vw, 1.32rem);
  --bs-fs-lead: clamp(1.03rem, 0.97rem + 0.42vw, 1.22rem);
  --bs-fs-body: 1rem;
  --bs-fs-sm: 0.875rem;
  --bs-fs-xs: 0.785rem;
  --bs-fs-eyebrow: 0.72rem;
  --bs-lh-tight: 1.06;
  --bs-lh-head: 1.18;
  --bs-lh-body: 1.62;
  /* --- space / shape ----------------------------------------------------- */
  --bs-container: 1140px;
  --bs-gutter: clamp(20px, 4vw, 40px);
  --bs-section-y: clamp(60px, 7.5vw, 108px);
  /* One prose measure for the whole site. 680px is ~68ch at the 16px base
     size and ~55ch at the lead size, so headings, leads, section subs and
     body prose all break on the same right edge. Never set a measure in
     `ch`: `ch` resolves against the element's own font-size, so 62ch on a
     19.5px lead and 60ch on a 16px wrapper produced two different widths,
     which is what made stacked blocks look unaligned. */
  --bs-measure: 42.5rem;
  /* Vertical rhythm. One unit between blocks, two units between groups. */
  --bs-flow: clamp(16px, 1.4vw, 18px);
  --bs-radius-sm: 5px;
  --bs-radius: 10px;
  --bs-radius-lg: 14px;
  /* every interactive control (buttons, chips, tags, pagers) is a full pill */
  --bs-radius-pill: 999px;
  --bs-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
  --bs-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.48);
  --bs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bs-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bs-header-h: 60px;
  /* --- motion: one vocabulary for every animation on the site ----------- */
  --bs-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* entrances: quick start, long soft landing */
  --bs-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* pops that overshoot a touch */
  --bs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moves between two resting points */
  --bs-dur-micro: 180ms; /* hovers and presses */
  --bs-dur-enter: 760ms; /* elements arriving on screen */
  --bs-stagger: 80ms; /* the gap between siblings in one entrance */
}

.bs-editorial, .site-header, .site-footer {
  --bs-bg: #000000;
  --bs-bg-raise: #0d1016;
  --bs-surface: #0d1016;
  --bs-surface-2: #11151c;
  --bs-surface-3: #161b24;
  --bs-text: #ffffff;
  --bs-text-2: #a5adbb;
  --bs-text-3: #909aaa;
  --bs-text-on-accent: #000000;
  --bs-accent: #f06400;
  --bs-accent-bright: #ff8c3a;
  --bs-accent-soft: rgba(240, 100, 0, .13);
  --bs-accent-line: rgba(240, 100, 0, .38);
}

/* Readable supporting text, with a clearer hierarchy across the main pages. */
.bs-editorial {
  --bs-container: 1200px;
  --bs-fs-display: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --bs-radius: 5px;
  --bs-radius-lg: 5px;
  --bs-fs-xs: .875rem;
  --bs-fs-sm: .9375rem;
  --bs-fs-eyebrow: .875rem;
  --bs-text-2: #b8c0cc;
  --bs-text-3: #a5adbb;
}

@media (min-width: 1440px) {
  :root { --bs-container: 1180px; }
}

/* ==========================================================================
   BASE AND ACCESSIBILITY
   --------------------------------------------------------------------------
   Page-level base styles, scoped to `body.bs-page` so a legacy page keeps its
   own. The focus ring and the skip link are global on purpose.
   ========================================================================== */

body.bs-page {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--bs-bg);
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-body);
  line-height: var(--bs-lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.bs-page *, body.bs-page *::before, body.bs-page *::after { box-sizing: border-box; }

/* The base element rules below are wrapped in :where(), which contributes zero
   specificity. They therefore resolve at plain element specificity (0,0,1) and
   every component class in this sheet overrides them without !important or
   selector inflation. They still only ever match inside `body.bs-page`. */
:where(body.bs-page) h1,
:where(body.bs-page) h2,
:where(body.bs-page) h3,
:where(body.bs-page) h4,
:where(body.bs-page) h5,
:where(body.bs-page) h6 {
  margin: 0;
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  font-weight: 600;
  letter-spacing: -0.017em;
  line-height: var(--bs-lh-head);
  text-wrap: balance;
}

:where(body.bs-page) p,
:where(body.bs-page) ul,
:where(body.bs-page) ol,
:where(body.bs-page) dl,
:where(body.bs-page) figure,
:where(body.bs-page) dd {
  margin: 0;
}

:where(body.bs-page) ul, :where(body.bs-page) ol {
  padding: 0;
  list-style: none;
}

:where(body.bs-page) a {
  color: var(--bs-accent-bright);
  text-decoration: none;
}

:where(body.bs-page) a:hover {
  color: var(--bs-accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(body.bs-page) img, :where(body.bs-page) svg { max-width: 100%; }
:where(body.bs-page) img { height: auto; }

:where(body.bs-page) code,
:where(body.bs-page) kbd,
:where(body.bs-page) samp,
:where(body.bs-page) pre {
  font-family: var(--bs-font-mono);
  font-size: 0.92em;
}

:where(body.bs-page) button,
:where(body.bs-page) input,
:where(body.bs-page) select,
:where(body.bs-page) textarea {
  font: inherit;
  color: inherit;
}

:where(body.bs-page) main:focus { outline: none; }

:where(body.bs-page) strong, :where(body.bs-page) b {
  color: var(--bs-text);
  font-weight: 600;
}

html:has(> body.bs-page) { scroll-padding-top: calc(var(--bs-header-h) + 20px); }

/* --- skip link --------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -140%);
  display: inline-block;
  margin: 0;
  padding: 12px 22px;
  border: 1px solid var(--bs-accent);
  border-top: 0;
  border-radius: 0 0 var(--bs-radius) var(--bs-radius);
  background: var(--bs-accent);
  color: var(--bs-text-on-accent);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s var(--bs-ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--bs-text-on-accent);
  text-decoration: none;
}

/* --- focus rings (global on purpose: strictly an a11y improvement) --------
   No border-radius here: this sheet loads after styles.css, so a radius set
   on :focus-visible (same specificity as a class) would flatten every pill
   control the moment it took focus. The outline follows the element's own
   radius instead. */
:focus-visible {
  outline: 2px solid var(--bs-accent-bright);
  outline-offset: 3px;
}

.bs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* progressive-enhancement reveal: JS adds `.is-in` when the block scrolls in.
   Without JS the element is simply visible. `.reveal` alone hides nothing.
   Only the arrival carries a transition, so a block hides at once when the
   script starts and never fades out in front of the visitor. --reveal-i
   staggers siblings that arrive together. The transition replaces the block's
   own, so a reveal unit should not carry one. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--bs-dur-enter) var(--bs-ease-out-expo) calc(var(--reveal-i, 0) * var(--bs-stagger)),
    transform var(--bs-dur-enter) var(--bs-ease-out-expo) calc(var(--reveal-i, 0) * var(--bs-stagger));
}

@media (max-width: 620px) {
  .js-reveal .reveal { transform: translateY(12px); }
}

/* Once-on-entry data reveals keep final measurements available to assistive tools. */
.bs-page .b4-tech-stat > [data-motion-number] {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.bs-page :is(strong, span).bs-motion-number > .bs-motion-final,
.bs-page :is(strong, span).bs-motion-number > .bs-motion-current {
  display: block;
  grid-area: 1 / 1;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.bs-page .bs-motion-final { opacity: 0; }
.bs-page .bs-motion-current { pointer-events: none; }

.bs-page :is(strong, span)[data-motion-number].bs-motion-number {
  display: inline-grid;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   --------------------------------------------------------------------------
   Page frame, section rhythm, opening block and the generic grids.
   ========================================================================== */

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--bs-container) + 2 * var(--bs-gutter));
  margin-inline: auto;
  padding-inline: var(--bs-gutter);
}

.section {
  box-sizing: border-box;
  display: block;
  position: relative;
  padding-block: var(--bs-section-y);
  background: transparent;
}

.section--tight { padding-block: clamp(44px, 5vw, 72px); }

.section--raised {
  background: var(--bs-bg-raise);
  border-block: 1px solid var(--bs-line);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--bs-measure);
  margin-bottom: calc(var(--bs-flow) * 2);
}

.section-title {
  font-size: var(--bs-fs-h2);
  font-weight: 600;
}

.section-sub {
  max-width: var(--bs-measure);
  color: var(--bs-text-2);
  font-size: var(--bs-fs-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- eyebrow: mono, uppercase, accent rule ----------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--bs-accent);
}

/* --- generic responsive grids ------------------------------------------ */
.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hero {
  box-sizing: border-box;
  position: relative;
  display: block;
  padding-block: clamp(48px, 6.5vw, 96px) clamp(40px, 5vw, 72px);
  background: radial-gradient(900px 460px at 12% -10%, rgba(240, 100, 0, 0.075), transparent 62%), var(--bs-bg);
  border-bottom: 1px solid var(--bs-line);
  overflow: hidden;
}

/* faint instrumentation grid: pure CSS, no assets, no animation */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(760px 420px at 20% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(760px 420px at 20% 0%, #000 0%, transparent 78%);
}

.hero-title {
  max-width: 17ch;
  font-size: var(--bs-fs-display);
  font-weight: 700;
  letter-spacing: -0.031em;
  line-height: var(--bs-lh-tight);
}

/* --- vertical rhythm helper -------------------------------------------- */
/* `:where(body.bs-page) p { margin: 0 }` means prose blocks need an explicit
   gap owner. `.stack` is that owner; nest it freely. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--bs-flow));
  min-width: 0;
}

.stack--sm { --stack-gap: calc(var(--bs-flow) * 0.55); }

/* --- asymmetric two-column: main argument + supporting panel ----------- */
/* `minmax(0, …)` on purpose: a bare `1fr` floors the track at its min-content
   width, so one nowrap `.spec dd` would push the whole page wide at 375px. */
.grid--aside {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* Stacked state: both blocks keep the page measure, so the panel never runs
   wider than the prose it supports. */
.grid--aside > * { max-width: var(--bs-measure); }

/* `.card` is `height: 100%` so cards in a `.grid--3` row match each other.
   In a `.grid--aside` that fights `align-items: start`: the card stretched to
   the prose column's height and read as a long half-empty box. Here the card
   is a panel, not a row member, so it hugs its own content. */
.grid--aside > .card, .grid--aside > .stack > .card { height: auto; }

.bs-editorial .hero-title {
  max-width: 19ch;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.05em;
}

.bs-editorial .section-title { font-weight: 500; letter-spacing: -.035em; }
.bs-editorial .section { padding-block: clamp(56px, 6.5vw, 92px); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1150px) {

  /* The prose track is the measure itself, not a fraction of the container, so
     the left column lands on exactly the same right edge as `.section-head`,
     `.lead` and `.section-sub` above it. The aside takes what is left.
     Two columns start at 1150px, the width where the measure plus a 350px+
     aside both fit. Below that the blocks stack, which reads better than a
     680px column next to a 290px one. */
  .grid--aside {
    grid-template-columns: minmax(0, var(--bs-measure)) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
  }

  .grid--aside > * { max-width: none; }
}

@media (min-width: 901px) {

  /* Balanced wrapping produces even line lengths without the exaggerated word
     spacing of full justification. Use it for short marketing copy; article
     paragraphs remain natural, left-aligned reading text. */
  .section-sub {
    text-align-last: left;
    text-justify: inter-word;
    text-align: left;
    text-wrap: balance;
    hyphens: none;
  }

  .bs-editorial .hero-title { max-width: 22ch; }
  .bs-editorial .section > .container > .stack > .lead { max-width: 630px; }
}

/* ==========================================================================
   TYPE HELPERS
   --------------------------------------------------------------------------
   Measure, colour and size helpers for prose.
   ========================================================================== */

.lead {
  max-width: var(--bs-measure);
  color: var(--bs-text-2);
  font-size: var(--bs-fs-lead);
  line-height: 1.58;
}

.mono {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.accent { color: var(--bs-accent-bright); }
.text-dim { color: var(--bs-text-3); }

.note {
  max-width: var(--bs-measure);
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.55;
}

/* Inside a card, panel or figure the container already sets the measure. */
.card .note, .chart-figure .note, .spec-list + .note { max-width: none; }

/* Same two steps for a block that is not inside a `.stack`. Use these instead
   of an inline `margin-top`, so every gap on the page comes from one scale. */
.flow-t { margin-top: var(--bs-flow); }

.lead, .note { text-wrap: pretty; }
.bs-editorial .lead { max-width: 640px; line-height: 1.65; }

/* Inline links remain identifiable without relying on their color. */
.bs-page .note a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 901px) {

  .lead {
    text-align-last: left;
    text-justify: inter-word;
    text-align: left;
    text-wrap: balance;
    hyphens: none;
  }
}

/* ==========================================================================
   BUTTONS AND LINKS
   --------------------------------------------------------------------------
   Every clickable shape: the two system buttons, the editorial button and
   the inline links.
   ========================================================================== */

.btn-primary, .btn-secondary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 13px 26px;
  border-radius: var(--bs-radius-pill);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--bs-ease), border-color 0.18s var(--bs-ease), color 0.18s var(--bs-ease), transform 0.18s var(--bs-ease);
}

.btn-primary {
  border: 1px solid var(--bs-accent);
  background: var(--bs-accent);
  color: var(--bs-text-on-accent);
}

.btn-primary:hover {
  border-color: var(--bs-accent-deep);
  background: var(--bs-accent-deep);
  color: var(--bs-text-on-accent);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-secondary {
  border: 1px solid var(--bs-line-strong);
  background: transparent;
  color: var(--bs-text);
}

.btn-secondary:hover {
  border-color: var(--bs-accent-line);
  background: var(--bs-accent-soft);
  color: var(--bs-text);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- inline "read more" link ------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bs-accent-bright);
  font-size: var(--bs-fs-sm);
  font-weight: 500;
  text-decoration: none;
}

.link-arrow::after {
  content: "\2192";
  font-family: var(--bs-font-mono);
  transition: transform 0.18s var(--bs-ease);
}

.link-arrow:hover {
  color: var(--bs-accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-arrow:hover::after { transform: translateX(3px); }

.link-quiet {
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  text-decoration: none;
}

.link-quiet:hover {
  color: var(--bs-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bs-form-actions .btn-primary { flex: none; }

.person-card .link-arrow {
  margin-top: auto;
  padding-top: 4px;
}

.bs-editorial .btn-primary, .bs-editorial .btn-secondary { border-radius: 4px; }

.b3-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 15px 20px;
  border: 1px solid #f37936;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.b3-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  color: #ffffff;
}

.bs-editorial .btn-primary, .b3-button {
  background: #f06400;
  border-color: #f06400;
  color: #000000;
}

.bs-editorial .btn-primary:hover, .b3-button:hover {
  background: #ff8c3a;
  border-color: #ff8c3a;
  color: #000000;
}

.b3-text-link:hover { color: #ff8c3a; }

/* The arrow leans 2px toward where the link goes, on hover and keyboard focus. */
.b3-button > span[aria-hidden="true"], .b3-text-link > span[aria-hidden="true"] {
  transition: translate var(--bs-dur-micro) var(--bs-ease-out-expo);
}

.b3-button:is(:hover, :focus-visible) > span[aria-hidden="true"],
.b3-text-link:is(:hover, :focus-visible) > span[aria-hidden="true"] {
  translate: 2px -2px;
}

@media (min-width: 900px) {
  .cta-band .btn-row { flex: none; }
}

@media (hover: none) {

  /* kill sticky hover states on touch devices */
  .btn-primary:hover, .btn-secondary:hover { transform: none; }
}

/* ==========================================================================
   SITE HEADER AND NAV
   --------------------------------------------------------------------------
   The sticky bar, the brand mark, the link row and the mobile panel.
   ========================================================================== */

/* One bar for every page: 60px tall, a translucent blurred background so the
   page shows through as it scrolls under it, and a hairline under it. Legacy
   pages set their own `body { font-family: Roboto }`, which the bar would
   otherwise inherit, so the family is named here too. */
.site-header {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  --bs-fs-sm: .9375rem;
  line-height: var(--bs-lh-body);
  background: rgba(0, 0, 0, .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

.site-header-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-inline: auto;
  min-height: 60px;
  padding-block: 6px;
  gap: 24px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
}

.site-brand:hover { text-decoration: none; }
.site-brand-mark { display: block; height: auto; max-width: none; width: 128px; }

.site-nav {
  box-sizing: border-box;
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  transform: none;
}

.site-nav-list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-item {
  margin: 0;
  padding: 0;
}

/* The same line box on legacy articles and on design-system pages, so the bar
   is one height everywhere. */
.site-nav-link {
  display: inline-block;
  padding: 5px 0;
  border: 0;
  background: none;
  color: var(--bs-text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s var(--bs-ease);
}

.site-nav-link:hover {
  color: var(--bs-text);
  text-decoration: none;
}

.site-nav-link[aria-current="page"] {
  color: var(--bs-text);
  box-shadow: inset 0 -2px 0 var(--bs-accent);
}

.nav-cta:hover { text-decoration: none; background: #ff8c3a; border-color: #ff8c3a; color: #000000; }

/* --- hamburger (distinct class name: legacy .nav-toggle is still live) ---
   Three bars and nothing else. The 42px box is the touch target, not a
   control, so it draws no border and no fill. The radius is left for the
   focus ring. */
.site-nav-toggle {
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  order: 2;
  width: 42px;
  height: 42px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--bs-radius-pill);
  background: none;
  color: var(--bs-text);
  cursor: pointer;
}

.site-nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--bs-accent);
  transition: transform 0.22s var(--bs-ease), opacity 0.14s linear;
}

.site-header.is-nav-open .site-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-nav-open .site-nav-toggle-bar:nth-child(2) { opacity: 0; }

.site-header.is-nav-open .site-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header .container { max-width: 1280px; }

.nav-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0;
  border: 1px solid #f06400;
  font-size: var(--bs-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s var(--bs-ease), border-color 0.18s var(--bs-ease);
  background: #f06400;
  color: #000000;
  box-shadow: none;
}

.site-header .nav-cta > span { display: inline-block; flex: 0 0 14px; width: 14px; text-align: center; }

/* An opaque bar over the moving field on the pages that keep
   the legacy shell. The editorial shell keeps the blur. */
.bs-network-page .site-header { background-color: #000; }

.bs-page .site-header { background-color: rgba(0, 0, 0, .74); }

/* fixed CTA geometry and accessible contact states. */
.site-header .nav-cta {
  box-sizing: border-box;
  justify-content: center;
  font-family: var(--bs-font-sans);
  font-weight: 600;
  min-width: 0;
  min-height: 36px;
  padding: 7px 15px 7px 16px;
  gap: 10px;
  border-radius: var(--bs-radius-pill);
  font-size: 13px;
}

/* The panel drops in from under the bar, so it reads as the bar opening
   rather than a second surface appearing. */
@keyframes bs-nav-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- the 900px panel ------------------------------------------------------
   Every desktop rule for these selectors is above, so this block is the last
   word on each of them. The `.site-header` prefix is what makes it win: the
   nav, the links and the CTA all have unprefixed base rules, and an
   unprefixed copy here would only tie with them. */
@media (max-width: 900px) {
  .site-brand-mark { width: 120px; }

  .site-nav-toggle { display: flex; }

  .site-header-inner { flex-wrap: wrap; min-height: 56px; padding-block: 4px; }

  /* The panel is the header sheet continued, so it takes no background and no
     border of its own. The bar's blurred black runs straight through it. */
  .site-header .site-nav {
    display: none;
    /* order must beat the toggle's, or the panel wraps above the button */
    order: 3;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 6px 0 18px;
  }

  /* One soft shadow lifts the open sheet off the page, in place of the
     hairlines it used to draw around every link. */
  .site-header.is-nav-open { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }

  .site-header.is-nav-open .site-nav {
    display: flex;
    animation: bs-nav-open .22s var(--bs-ease) both;
  }

  .site-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Reading size, not bar size: the panel is the whole screen, so the links
     get the room the bar cannot give them. */
  .site-header .site-nav-link {
    display: block;
    padding: 12px 0;
    color: var(--bs-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Both carry .site-header for the same reason: their desktop rules tie with
     the plain rule above, which comes later and would otherwise win. */
  .site-header .site-nav-link:hover { color: #ffffff; }

  .site-header .site-nav-link[aria-current="page"] {
    box-shadow: none;
    color: var(--bs-accent-bright);
  }

  .site-header .nav-cta {
    width: 100%;
    margin-top: 12px;
    min-height: 46px;
    font-size: 15px;
  }

  /* Without the script the panel is the only nav there is, so it stays open. */
  .site-header:not(.has-nav-js) .site-nav { display: flex; }
  .site-header:not(.has-nav-js) .site-nav-toggle { display: none; }

  /* Reserve the collapsed mobile header while its script is loading. */
  .site-header:not(.has-nav-js):not(.has-nav-fallback) .site-nav { display: none; }
}

/* ==========================================================================
   SITE FOOTER
   --------------------------------------------------------------------------
   The five-column footer and its social marks.
   ========================================================================== */

.site-footer-logo img {
  display: block;
  width: 150px;
  height: auto;
  max-width: none;
}

.site-footer {
  box-sizing: border-box;
  display: block;
  position: static;
  width: 100%;
  margin: 0;
  /* all four sides, explicitly: legacy `footer { padding: 40px 20px 20px }`
     would otherwise supply the inline padding and shift the container. */
  padding: clamp(48px, 6vw, 76px) 0 0;
  border-top: 1px solid var(--bs-line);
  color: var(--bs-text-2);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-sm);
  line-height: 1.6;
  text-align: left;
  background: #000000;
}

.site-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 52px);
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 34ch;
}

.site-footer-logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
}

.site-footer-tagline {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-sm);
  line-height: 1.6;
  text-wrap: pretty;
}

.site-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}

.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.site-footer-heading {
  margin: 0;
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-footer-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-list li {
  margin: 0;
  padding: 0;
}

.site-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 3px;
  box-shadow: none;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.16s var(--bs-ease);
}

.site-footer-link:hover {
  background: none;
  box-shadow: none;
  transform: none;
  color: var(--bs-accent-bright);
  text-decoration: none;
}

.social-icon-img, .social-icon-svg {
  flex: none;
  display: block;
  width: 18px;
  height: 18px;
}

.social-icon-svg {
  color: var(--bs-text-3);
  transition: color 0.16s var(--bs-ease);
}

/* knock-outs inside a solid glyph take the surface colour they sit on */
.social-icon-svg .icon-knockout { fill: var(--bs-bg-raise); }

.social-icon-svg .icon-knockout-stroke {
  fill: none;
  stroke: var(--bs-bg-raise);
}

.site-footer-link:hover .social-icon-svg { color: var(--bs-accent-bright); }

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 18px 22px;
  border-top: 1px solid var(--bs-line);
}

.site-footer-copy, .site-footer-meta {
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0.02em;
}

.bs-home .site-footer { background: transparent; }
.bs-network-page > .site-footer { background-color: transparent; }

@media (min-width: 1000px) {
  .site-footer-top { align-items: start; grid-template-columns: minmax(0, 0.72fr) minmax(0, 2.28fr); }
}

@media (min-width: 720px) {

  /* Five link columns: Products, Technology, Resources, Company and the
     Connect/social list. The base grid builds four, so step the column count and
     give the link area more of the row. */
  .site-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {

  .site-footer-cols {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 30px);
  }
}

@media screen {
  .bs-network-page:not(.bs-home) > .site-footer { padding-bottom: 84px; }
}

/* ==========================================================================
   CARDS AND GENERIC COMPONENTS
   --------------------------------------------------------------------------
   Surfaces that hold content: cards, panels, the contact form, the modals,
   people and investor cards, social chips.
   ========================================================================== */

.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
  color: var(--bs-text);
}

.card-title {
  font-size: var(--bs-fs-h3);
  font-weight: 600;
}

.card-body {
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  line-height: 1.62;
}

.card--hover {
  transition: border-color 0.2s var(--bs-ease), background-color 0.2s var(--bs-ease), transform 0.2s var(--bs-ease), box-shadow 0.2s var(--bs-ease);
}

.card--hover:hover {
  border-color: var(--bs-line-strong);
  background: var(--bs-surface-2);
  transform: translateY(-3px);
  box-shadow: var(--bs-shadow-lift);
}

/* --- model card -------------------------------------------------------- */
.model-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
  transition: border-color 0.2s var(--bs-ease), background-color 0.2s var(--bs-ease);
}

.model-card:hover {
  border-color: var(--bs-line-strong);
  background: var(--bs-surface-2);
}

.cta-band {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: clamp(28px, 3.6vw, 46px);
  border: 1px solid var(--bs-accent-line);
  border-radius: var(--bs-radius-lg);
  background: radial-gradient(700px 320px at 8% 0%, rgba(240, 100, 0, 0.10), transparent 70%), var(--bs-surface);
}

.cta-band-title {
  max-width: 24ch;
  font-size: var(--bs-fs-h2);
  font-weight: 600;
}

.cta-band-body {
  max-width: var(--bs-measure);
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-lead);
  line-height: 1.55;
}

/* --- static inline SVG comparison chart -------------------------------- */
.chart-figure {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
}

/* --- contact form ------------------------------------------------------ */
.bs-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  min-width: 0;
}

.bs-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.bs-label {
  color: var(--bs-text);
  font-size: var(--bs-fs-sm);
  font-weight: 500;
  line-height: 1.45;
}

.bs-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-sm);
  background: var(--bs-bg);
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  font-size: 0.94rem;
  line-height: 1.5;
  /* Selects ignore line-height, so every control gets the text inputs' height. */
  min-height: calc(1.5em + 24px);
  transition: border-color 0.18s var(--bs-ease), background-color 0.18s var(--bs-ease);
}

.bs-input::placeholder {
  color: var(--bs-text-3);
  opacity: 1;
}

.bs-input:hover { border-color: var(--bs-accent-line); }

.bs-input:focus {
  border-color: var(--bs-accent);
  background: var(--bs-bg-raise);
  outline: none;
}

.bs-input:focus-visible {
  outline: 2px solid var(--bs-accent-bright);
  outline-offset: 2px;
}

.bs-textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.bs-help {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.55;
}

.bs-form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* reCAPTCHA is a fixed 304px frame that fits every layout. Hidden overflow
   clips the widget's invisible helper element, which would otherwise add a
   scroll bar. */
.captcha-container {
  max-width: 100%;
  overflow: hidden;
}

/* --- success / error modals (driven by js/main.js) --------------------- */
/* main.js toggles `display: flex` and animates with the `fadeIn` / `fadeOut`
   keyframes below. Those two names are also defined in the legacy
   css/styles.css with identical bodies, so redefining them is a no-op there. */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 9, 0.74);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0;
  padding: 26px 30px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-lg);
  background: var(--bs-surface-2);
  box-shadow: var(--bs-shadow-lift);
  color: var(--bs-text);
}

.modal-content p {
  margin: 0;
  font-size: var(--bs-fs-sm);
  line-height: 1.6;
}

.modal-content.success { border-color: rgba(76, 175, 80, 0.45); }
.modal-content.success p { color: #7fd18b; }
.modal-content.error { border-color: rgba(244, 67, 54, 0.45); }
.modal-content.error p { color: #f4948c; }

.close {
  position: absolute;
  top: 6px;
  right: 14px;
  color: var(--bs-text-3);
  font-family: var(--bs-font-sans);
  font-size: 26px;
  line-height: 1.2;
  cursor: pointer;
}

.close:hover { color: var(--bs-text); }

@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}

/* --- founder cards (/company/) ----------------------------------------- */
.person-grid > li, .investor-grid > li {
  display: flex;
  min-width: 0;
}

.person-card {
  align-items: flex-start;
  gap: 16px;
}

.person-photo {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px solid var(--bs-line-strong);
  object-fit: cover;
}

.person-role {
  margin: 0;
  color: var(--bs-accent-bright);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0.03em;
  line-height: 1.45;
}

/* --- investor cards (/company/) ---------------------------------------- */
.investor-card {
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-block: clamp(26px, 3vw, 36px);
  color: var(--bs-text);
  text-align: center;
  text-decoration: none;
}

.investor-card:hover, .investor-card:focus-visible {
  color: var(--bs-text);
  text-decoration: none;
}

.investor-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
}

.investor-logo-wrap img {
  width: auto;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

/* UTEST ships a dark-on-white mark; knock it out to white for the dark shell */
.investor-logo--invert { filter: brightness(0) invert(1); }

.investor-name {
  color: var(--bs-text-2);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-transform: uppercase;
}

/* --- social chips (/company/ contact panel) ---------------------------- */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text-2);
  font-size: var(--bs-fs-xs);
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.18s var(--bs-ease), color 0.18s var(--bs-ease);
}

.social-chip:hover {
  border-color: var(--bs-accent-line);
  color: var(--bs-text);
  text-decoration: none;
}

.social-chip img, .social-chip svg {
  flex: none;
  display: block;
}

/* keep the Reddit mark's cut-outs matched to the chip surface */
.social-chip svg .icon-knockout { fill: var(--bs-surface-2); }

.social-chip svg .icon-knockout-stroke { stroke: var(--bs-surface-2); }
.card-body, .cta-band-body { text-wrap: pretty; }
.bs-editorial .card { box-shadow: none; background-image: none; }

.bs-editorial .modal-content.success, .bs-editorial .modal-content.error {
  border-color: var(--bs-accent-line);
}

.bs-editorial .modal-content.success p { color: #ffffff; }
.bs-editorial .modal-content.error p { color: #ff8c3a; }
.bs-page .modal-content { padding-top: 55px; }

.bs-page .modal-content .close {
  display: grid;
  place-items: center;
  top: 5px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: var(--bs-radius-pill);
}

.bs-page .modal-content .close:hover { background: rgba(240,100,0,.13); color: #ff8c3a; }
.bs-page .modal-content .close:focus-visible { outline: 2px solid #ff8c3a; outline-offset: 0; }
.bs-page .bs-form [role="status"] { min-height: 1.6em; color: #fff; font-size: 13px; line-height: 1.6; }
.bs-page .bs-form [aria-invalid="true"] { border-color: #ff8c3a; }
.bs-page .card-body a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 900px) {

  .cta-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
  }

  .cta-band-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
}

@media (hover: none) {
  .card--hover:hover { transform: none; }
}

@media (max-width: 420px) {

  .captcha-container .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
    height: 66px;
  }
}

@media (min-width: 901px) {

  .cta-band-body {
    text-align-last: left;
    text-justify: inter-word;
    text-align: left;
    text-wrap: balance;
    hyphens: none;
  }
}

/* ==========================================================================
   DATA COMPONENTS
   --------------------------------------------------------------------------
   Anything that carries a measurement: tables, spec rows, tags, stat blocks,
   bars and score charts.
   ========================================================================== */

/* --- spec list: mono key/value rows inside data cards ------------------ */
.spec-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-sm);
  background: var(--bs-bg);
  overflow: hidden;
}

.spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--bs-line);
}

.spec:last-child { border-bottom: 0; }

.spec dt {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.35;
}

/* Mono sits tighter than the sans label at the same size, so the row height
   is set by the label and the value can lose the extra leading. */
.spec dd {
  margin: 0;
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.spec dd .unit {
  color: var(--bs-text-3);
  font-weight: 400;
}

/* --- tag / badge ------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-3);
  color: var(--bs-text-2);
  font-family: var(--bs-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 16px;
  border-top: 1px solid var(--bs-line);
  position: relative;
}

.stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--bs-accent);
}

/* --- delta: `46.23 GB -> 15.49 GB` ------------------------------------- */
.delta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
}

.size-bars-caption {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.55;
}

.size-bars-caption a {
  color: var(--bs-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.size-bars-caption a:hover { color: var(--bs-accent-bright); }

/* --- table ------------------------------------------------------------- */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--bs-line-strong) transparent;
}

.data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--bs-fs-sm);
}

.data-table th, .data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bs-line);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td { color: var(--bs-text-2); }

.data-table td.num, .data-table th.num {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tr[hidden] { display: none; }

/* `.spec dd` is nowrap by default (right for numbers, wrong for prose values
   like "llama.cpp · ComfyUI · vLLM-Omni"). Opt those lists out. */
.spec-list--wrap .spec dd {
  white-space: normal;
  overflow-wrap: anywhere;
}

.bs-page .table-wrap:focus-visible { outline: 2px solid #ff8c3a; outline-offset: 4px; }

/* Keep accessible link notices inside horizontally scrolling tables. */
.bs-page .table-wrap { position: relative; }

/* ==========================================================================
   HOME HERO
   --------------------------------------------------------------------------
   The opening card deck on Home: two cards, their tab strip, both cartoons
   and the scoreboard they share. The keyframes live with the drawings.
   ========================================================================== */

.b3-hero { padding-top: 72px; }

.b3-hero-grid {
  display: grid;
  grid-template-columns: 1.13fr 1fr;
  gap: 18px;
  align-items: center;
  padding-bottom: 58px;
}

.b3-hero-copy { position: relative; z-index: 1; padding-bottom: 10px; }

/* --- hero entrance ----------------------------------------------------------
   Home opens with one short choreography in CSS alone, so the first painted
   frame is already the first frame of the entrance and nothing flashes. Each
   part holds its start state through its delay (fill backwards) and ends on
   its resting style. Nothing fills forwards, so once the entrance is over no
   animation stays in effect and the settled page renders exactly as it would
   without the entrance.

     t (ms)   what arrives
     80       the kicker rule draws from the left
     120      "Big models." rises out of its line mask
     150      the kicker label fades in
     200      the deck fades up
     240      "Small footprint." rises a touch wide, then settles to its width
     380      the intro fades up
     480      the two actions fade up
     650      the credentials row fades in
     1280     everything is at rest
   ------------------------------------------------------------------------- */
.b3-line, .b3-line-inner { display: block; }

.bs-home .b3-hero-copy > .b3-kicker { animation: bs-text-in 700ms var(--bs-ease-out-expo) 150ms backwards; }
.bs-home .b3-hero-copy > .b3-kicker::before { animation: bs-rule-draw 600ms var(--bs-ease-out-expo) 80ms backwards; }

/* Each headline line is its own mask while it rises. The mask reaches past the
   line box (below for descenders, sideways for the squeeze), and it is a
   clip-path that exists only during the entrance, so it never touches layout
   or the settled glyphs. */
.bs-home .b3-line { animation: bs-line-mask 1300ms linear; }
.bs-home .b3-line-inner { animation: bs-line-rise 900ms var(--bs-ease-out-expo) 120ms backwards; }

/* The second line carries the message: it arrives 8% wide and compresses into
   place just after it lands. */
.bs-home .b3-line + .b3-line > .b3-line-inner {
  transform-origin: 0 100%;
  animation:
    bs-line-rise 900ms var(--bs-ease-out-expo) 240ms backwards,
    bs-line-squeeze 1000ms var(--bs-ease-in-out) 240ms backwards;
}

.bs-home .b3-hero-copy > .b3-intro { --rise: 14px; animation: bs-rise-in 800ms var(--bs-ease-out-expo) 380ms backwards; }
.bs-home .b3-hero-copy > .b3-actions { --rise: 14px; animation: bs-rise-in 800ms var(--bs-ease-out-expo) 480ms backwards; }
.bs-home .b3-hero-stack { --rise: 24px; animation: bs-rise-in 1000ms var(--bs-ease-out-expo) 200ms backwards; }
.bs-home .b3-credentials { animation: bs-fade-in 600ms var(--bs-ease-out-expo) 650ms backwards; }

@keyframes bs-text-in {
from { color: transparent; }
}

@keyframes bs-line-mask {
from, to { clip-path: inset(-.25em -.5em -.14em -.5em); }
}

@keyframes bs-line-rise {
from { translate: 0 110%; }
}

@keyframes bs-line-squeeze {
from { scale: 1.08 1; }
}

@keyframes bs-rise-in {
from { opacity: 0; translate: 0 var(--rise, 14px); }
}

@keyframes bs-fade-in {
from { opacity: 0; }
}

.b3-proof-choice {
  padding: 11px 16px;
  border: 1px solid var(--bs-line-strong);
  border-radius: 3px;
  font-family: var(--bs-font-sans);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  transition: background .2s, color .2s;
  background: transparent;
  color: #ffffff;
}

.b3-proof-choice:hover { border-color: #f06400; }

.b3-proof-choice[aria-pressed="true"] {
  background: #f06400;
  border-color: #f06400;
  color: #000000;
}

.b3-scene-controls .b3-proof-choice { padding: 10px 15px; }

.b3-llm-proof {
  margin: 0;
  min-width: 0;
  background: #0d1016;
  border: 1px solid rgba(255,255,255,.2);
  scroll-margin-top: 100px;
}

.b3-llm-proof [data-llm-controls][hidden] { display: none; }
.b3-llm-method { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; }
.b3-llm-method summary { padding: 13px 0 0; color: #a5adbb; cursor: pointer; }
.b3-llm-method > div { padding-top: 4px; color: #a5adbb; line-height: 1.8; }
.b3-llm-method p { margin: 12px 0 0; }

/* A quiet network behind the opening, with a static no-script fallback. */
/* Let the opening composition fill the screen, with room to grow on small displays. */
.bs-home .b3-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 79px);
}

/* The original precision gives each language-model result a visible baseline. */
.b4-weight-comparison {
  display: grid;
  grid-template-columns: minmax(0,1fr) 112px;
  gap: 28px;
  align-items: center;
  margin: 0 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.b3-page-network {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background-image: url('/images/hero-network.svg?v=3.7');
  background-position: center top;
  background-size: max(100%, 900px) auto;
  background-repeat: repeat-y;
  opacity: .78;
  -webkit-mask-image: radial-gradient(ellipse at 48% 40%, rgba(0,0,0,.32), rgba(0,0,0,.78) 65%, #000);
  mask-image: radial-gradient(ellipse at 48% 40%, rgba(0,0,0,.32), rgba(0,0,0,.78) 65%, #000);
}

.b3-page-network.is-network-ready { background-image: none; }
.b3-page-network-canvas { display: block; width: 100%; height: 100%; }

/* Revision 2: published image proof and a stronger visual opening. */
.bs-home .b3-hero-grid {
  grid-template-columns: .95fr 1.05fr;
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
}

.bs-home .b3-hero > .container:last-child { width: 100%; }

.bs-page :is(.btn-primary, .btn-secondary, .b3-button, .b3-proof-choice, .b3-selector-mode, .fnd-opt, .fnd-alt, .fnd-copy, .cat-chip, .sel-btn) {
  border-radius: var(--bs-radius-pill);
}

/* ==========================================================================
   Hero cartoon: the idea in one throw
   --------------------------------------------------------------------------
   One loop lasts --bs-cartoon-loop (12s), so every keyframe percentage below
   maps to a fixed moment in the story. Only transform and opacity animate.
   Rotations use transform-box: fill-box with an invisible .b3-cartoon-pivot
   rect that puts the pivot on a box anchor.

   The SVG's default state is the FINAL frame (small model out, both javelins
   in the bullseye, learned bars on the screen). Reduced motion, print, and
   a browser without CSS animation therefore show the finished scene.

     t (s)    %        what happens
     0.0      0        scene fades in, big model idles at the left
     0.5      4.167    it crouches, then walks right, arms swinging
     1.8      15       it reaches the scanner, the beam starts
     3.2      26.667   scan ends, screen bar has settled short and orange
     3.8      31.667   small ByteShape model has popped out of the chute
     4.4      36.667   javelins are in both hands, both wind up
     4.8      40       small model releases, its javelin streaks
     5.3      44.167   fast javelin lands with a burst, target wobbles,
                       small model hops with both arms up
     5.6      46.667   the original squints with effort
     6.0      50       the small model looks back and taps its foot
     7.4      61.667   big model releases after a long strain
     7.6      63.333   its slow arc leaves a dotted trail, both watch it
     9.6      80       slow javelin lands in the same bullseye, burst
     10.4     86.667   bullseye glow fades and SAME SPOT reads out
     11.6     96.667   both turn to the viewer
     11.7     97.5     hold ends, scene fades out
     12.0     100      loop restarts

   In the hero deck the scene runs once with no fade-out (bs-deck-scene) and
   the deck hands over 12.6s in (data-deck-duration on the card).
   ========================================================================== */
.b3-hero-cartoon {
  --bs-cartoon-loop: 12s;
  margin: 28px 0 0;
  min-width: 0;
  background: #0d1016;
  border: 1px solid rgba(255,255,255,.2);
}

.b3-cartoon { display: block; width: 100%; height: auto; overflow: hidden; }

.b3-cartoon-caption {
  margin: 0;
  padding: 10px 20px 16px;
  color: #a5adbb;
  font-size: 11px;
  line-height: 1.5;
}

/* --- palette: shaded vector on a lit stage -------------------------------
   Both drawings share one set of gradients, drawn once in the hidden
   .b3-toon-defs sprite above the deck, so the classes below style either
   card. A gradient fill maps to its shape's own box, so it never goes on a
   straight line: a line's box has no height and the stroke would vanish. */
.b3-toon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.b3-cartoon-pivot { fill: none; stroke: none; pointer-events: none; }
.b3-toon-stage { fill: url(#bs-toon-stage); }
.b3-toon-floor { fill: url(#bs-toon-floor); }
.b3-toon-shadow { fill: url(#bs-toon-shadow); }
.b3-cartoon-ground { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1; }

/* The two models: a domed weight block and a small rounded one, both glossy.
   Each wears a chip on its chest with one cell per bit of weight precision:
   4 x 4 on the original, 2 x 2 on ByteShape. */
.b3-cartoon-body-big { fill: url(#bs-toon-big); stroke: #e9edf4; stroke-width: 1.8; }
.b3-cartoon-body-small { fill: url(#bs-toon-small); stroke: #ffffff; stroke-width: 1.8; }
.b3-toon-aura { fill: url(#bs-toon-aura); }
.b3-toon-rim-light { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 2; stroke-linecap: round; }
.b3-toon-shine { fill: rgba(255,255,255,.3); }
.b3-toon-shine--small { fill: rgba(255,255,255,.42); }
.b3-toon-shine-dot { fill: rgba(255,255,255,.62); }
.b3-toon-chip { fill: #1b1f27; stroke: rgba(255,255,255,.35); stroke-width: .8; }
.b3-toon-chip-bits { fill: #b9c0cc; }
.b3-toon-chip.b3-toon-chip--small { fill: #5a2000; stroke: rgba(255,255,255,.6); }
.b3-toon-chip-bits.b3-toon-chip--small { fill: #ffe2c8; }
.b3-toon-cheek { fill: #e2361a; opacity: .42; }

/* Limbs are outlined tubes: a light edge stroke under a body-coloured one.
   A model's two arms are one drawing, mirrored, and both sit behind the body
   like the legs, so its hands always match. */
.b3-toon-limb-edge { fill: none; stroke: #e9edf4; stroke-width: 6.4; stroke-linecap: round; stroke-linejoin: round; }

.b3-cartoon-limb {
  fill: none;
  stroke: #7a8392;
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b3-cartoon-limb.b3-toon-limb--leg { stroke: #5e6674; }
.b3-toon-limb-edge.b3-toon-limb--small-arm, .b3-toon-limb-edge.b3-toon-limb--small-leg { stroke: #ffffff; stroke-width: 4.8; }
.b3-cartoon-limb.b3-toon-limb--small-arm { stroke: #f47416; stroke-width: 2.6; }
.b3-cartoon-limb.b3-toon-limb--small-leg { stroke: #d65c08; stroke-width: 2.6; }
.b3-toon-hand { fill: #8a93a2; stroke: #e9edf4; stroke-width: 1.4; }
.b3-toon-hand--small { fill: #ff9a4c; stroke: #ffffff; stroke-width: 1.1; }
.b3-toon-shoe { fill: #232831; stroke: #e9edf4; stroke-width: 1.3; }
.b3-toon-shoe--small { stroke-width: 1; }

/* Antennas: a grey knob on the original, a glowing bulb on ByteShape. */
.b3-toon-antenna { fill: none; stroke: #e9edf4; stroke-width: 2.2; stroke-linecap: round; }
.b3-toon-antenna--small { stroke: #ffffff; stroke-width: 1.7; }
.b3-toon-knob { fill: url(#bs-toon-knob); stroke: #e9edf4; stroke-width: 1.2; }
.b3-toon-bulb { fill: url(#bs-toon-bulb); stroke: #ffffff; stroke-width: 1; }
.b3-cartoon-eye { fill: #f6f8fb; }
.b3-toon-pupil { fill: #10141b; }
.b3-toon-glint { fill: #ffffff; }
.b3-toon-brow { fill: none; stroke: #10141b; stroke-width: 2.7; stroke-linecap: round; }
.b3-cartoon-mouth { fill: none; stroke: #10141b; stroke-width: 2.2; stroke-linecap: round; }
.b3-cartoon-mouth--small { stroke: #4a1a00; stroke-width: 1.8; }

.b3-cartoon-chip {
  fill: #f6f8fb;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-anchor: middle;
}

.b3-cartoon-label {
  fill: #a5adbb;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-anchor: middle;
}

.b3-cartoon-label--ours {
  fill: #ff8c3a;
  animation: bs-cartoon-tag var(--bs-cartoon-loop) linear infinite;
}

/* ShapeLearn: an intake on the left, a glowing output chute on the right,
   and a screen whose bars learn a precision for each part of the model. */
.b3-cartoon-machine { fill: url(#bs-toon-metal); stroke: #e9edf4; stroke-width: 1.8; }
.b3-cartoon-machine-part { fill: #262d38; stroke: #e9edf4; stroke-width: 1.5; stroke-linejoin: round; }
.b3-toon-rim { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1; stroke-linecap: round; }
.b3-toon-foot { fill: #2a313c; stroke: #e9edf4; stroke-width: 1.3; }
.b3-toon-intake { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1; }
.b3-toon-slot { fill: none; stroke: #ff8c3a; stroke-width: 2.2; stroke-linecap: round; }
.b3-cartoon-screen { fill: url(#bs-toon-screen); stroke: rgba(255,255,255,.22); stroke-width: 1; }
.b3-toon-screen-base { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; }
.b3-toon-screen-bit { fill: url(#bs-toon-bar); transform-box: fill-box; transform-origin: 50% 100%; }
.b3-toon-led { fill: #3a414c; }

/* Every bar starts at the same height (16 bits everywhere) and takes its own
   route to the height it learned: --bs-bar-from and the two stops are ratios
   of that final height. */
.b3-toon-screen-bits > :nth-child(1) { --bs-bar-from: 1.444; --bs-bar-a: .72; --bs-bar-b: 1.12; }
.b3-toon-screen-bits > :nth-child(2) { --bs-bar-from: 2.889; --bs-bar-a: 1.35; --bs-bar-b: .9; animation-delay: .05s; }
.b3-toon-screen-bits > :nth-child(3) { --bs-bar-from: 1.083; --bs-bar-a: .8; --bs-bar-b: 1.08; animation-delay: .1s; }
.b3-toon-screen-bits > :nth-child(4) { --bs-bar-from: 2; --bs-bar-a: 1.3; --bs-bar-b: .92; animation-delay: .15s; }
.b3-toon-screen-bits > :nth-child(5) { --bs-bar-from: 4.333; --bs-bar-a: .55; --bs-bar-b: 1.35; animation-delay: .2s; }
.b3-toon-screen-bits > :nth-child(6) { --bs-bar-from: 1.238; --bs-bar-a: 1.22; --bs-bar-b: .94; animation-delay: .25s; }
.b3-toon-screen-bits > :nth-child(7) { --bs-bar-from: 2.364; --bs-bar-a: .7; --bs-bar-b: 1.16; animation-delay: .3s; }
.b3-toon-screen-bits > :nth-child(8) { --bs-bar-from: 1.625; --bs-bar-a: 1.28; --bs-bar-b: .9; animation-delay: .35s; }
.b3-cartoon-screen-bit { animation: bs-cartoon-screen-bit var(--bs-cartoon-loop) ease-in-out infinite; }

.b3-cartoon-machine-name {
  fill: #fff;
  font-family: var(--bs-font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  text-anchor: middle;
}

.b3-cartoon-vent { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 2; stroke-linecap: round; }
.b3-cartoon-light { fill: #f06400; }
.b3-cartoon-glow { fill: #f06400; opacity: .55; filter: url(#bs-cartoon-glow); }
.b3-cartoon-lamp { opacity: .45; animation: bs-cartoon-lamp var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-beam-group { opacity: 0; animation: bs-cartoon-beam var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-beam { fill: #ffc38f; }
.b3-cartoon-beam-wide { fill: url(#bs-toon-beam); }
.b3-toon-emitter { fill: #ff8c3a; }

.b3-cartoon-strain {
  fill: none;
  stroke: #ff8c3a;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-strain var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-target {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-target var(--bs-cartoon-loop) linear infinite;
}

/* An archery target: white and dark rings around an orange bullseye, shaded
   toward the lower right so it reads as a disc, not a flat circle. */
.b3-cartoon-target-outer { fill: #eef1f6; }
.b3-toon-target-ring { fill: #1c2129; }
.b3-cartoon-target-mid { fill: #eef1f6; }
.b3-cartoon-target-eye { fill: #f06400; }
.b3-toon-target-core { fill: #ffb070; }
.b3-toon-target-shade { fill: url(#bs-toon-shade); }
.b3-cartoon-target-stand { fill: none; stroke: #6d7684; stroke-width: 4; stroke-linecap: round; }

.b3-cartoon-hitglow {
  fill: #f06400;
  opacity: 0;
  filter: url(#bs-cartoon-glow);
  animation: bs-cartoon-hitglow var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-shaft { fill: none; stroke: #eef1f6; stroke-width: 2.2; stroke-linecap: round; }
.b3-cartoon-shaft--small { stroke-width: 1.8; }
.b3-toon-grip { fill: none; stroke: #6d7684; stroke-width: 3.4; stroke-linecap: round; }
.b3-cartoon-tip { fill: #f06400; }
.b3-cartoon-held { opacity: 0; }
.b3-cartoon-flight { transform-box: fill-box; transform-origin: 50% 50%; }

.b3-cartoon-big-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-big-lean var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-big-arm {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-big-arm var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-small-pop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-pop var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-small-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-small-lean var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-small-arm {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-small-arm var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-samespot {
  fill: #ff8c3a;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-anchor: middle;
  animation: bs-cartoon-samespot var(--bs-cartoon-loop) linear infinite;
}

/* --- the characters come alive -------------------------------------------
   Eyes sit in two nested groups: the outer one glances (translate), the inner
   one blinks and squints (scale about the eye line). Each arm is drawn in its
   shoulder's frame around a pivot rect centred on the shoulder, so fill-box's
   50% 50% is the joint whatever the arm holds. */
.b3-cartoon-big-look { animation: bs-cartoon-big-look var(--bs-cartoon-loop) ease-in-out infinite; }
.b3-cartoon-small-look { animation: bs-cartoon-small-look var(--bs-cartoon-loop) ease-in-out infinite; }

.b3-cartoon-big-blink {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-big-blink var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-small-blink {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-small-blink var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-big-arm-back {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-big-arm-back var(--bs-cartoon-loop) ease-in-out infinite;
}

.b3-cartoon-small-arm-l {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-small-arm-l var(--bs-cartoon-loop) ease-in-out infinite;
}

/* The small model is done long before the original, so it taps its foot. */
.b3-cartoon-small-tap { animation: bs-cartoon-small-tap var(--bs-cartoon-loop) linear infinite; }

/* Brows carry the mood. --bs-brow mirrors the right brow, so one positive
   angle lifts both inner ends (worry) and a negative one pulls them down
   (effort). */
.b3-cartoon-brow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-brow var(--bs-cartoon-loop) ease-in-out infinite;
}

.b3-cartoon-brow--left { --bs-brow: -1; }
.b3-cartoon-brow--right { --bs-brow: 1; }

/* Antennas pivot on their base and follow through every move the body makes. */
.b3-cartoon-big-antenna {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-big-antenna var(--bs-cartoon-loop) ease-in-out infinite;
}

.b3-cartoon-small-antenna {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-small-antenna var(--bs-cartoon-loop) ease-in-out infinite;
}

/* The small model's contact shadow appears with it and shrinks as it hops. */
.b3-cartoon-small-shadow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-small-shadow var(--bs-cartoon-loop) linear infinite;
}

/* --- speed, drawn -----------------------------------------------------------
   The fast throw streaks, the slow throw leaves a dotted arc behind it, and
   both hits burst on the target. */
.b3-cartoon-trail {
  fill: none;
  stroke: url(#bs-cartoon-trail);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: bs-cartoon-trail var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-crumb { fill: #a5adbb; opacity: 0; animation: bs-cartoon-crumb var(--bs-cartoon-loop) linear infinite; }

/* Each dot lights up as the slow javelin passes it, and fades in the same order. */
.b3-cartoon-crumb:nth-child(2) { animation-delay: .14s; }
.b3-cartoon-crumb:nth-child(3) { animation-delay: .28s; }
.b3-cartoon-crumb:nth-child(4) { animation-delay: .42s; }
.b3-cartoon-crumb:nth-child(5) { animation-delay: .56s; }
.b3-cartoon-crumb:nth-child(6) { animation-delay: .7s; }
.b3-cartoon-crumb:nth-child(7) { animation-delay: .84s; }
.b3-cartoon-crumb:nth-child(8) { animation-delay: .98s; }
.b3-cartoon-crumb:nth-child(9) { animation-delay: 1.12s; }
.b3-cartoon-crumb:nth-child(10) { animation-delay: 1.26s; }
.b3-cartoon-crumb:nth-child(11) { animation-delay: 1.4s; }
.b3-cartoon-crumb:nth-child(12) { animation-delay: 1.54s; }
.b3-cartoon-crumb:nth-child(13) { animation-delay: 1.68s; }

.b3-cartoon-burst {
  fill: none;
  stroke: #ff8c3a;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-burst var(--bs-cartoon-loop) ease-out infinite;
}

/* The same burst again for the slow javelin, which lands 4.3s after the fast one. */
.b3-cartoon-burst--slow { animation-delay: 4.3s; }

/* --- the loop ---------------------------------------------------------- */
.b3-cartoon-scene { animation: bs-cartoon-scene var(--bs-cartoon-loop) linear infinite; }

.b3-cartoon-big-walk { animation: bs-cartoon-walk var(--bs-cartoon-loop) linear infinite; }

/* Squash and stretch pivot on the feet, which fill-box puts at 50% 100%. */
.b3-cartoon-big-bob {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-bob var(--bs-cartoon-loop) ease-in-out infinite;
}

.b3-cartoon-leg-a { animation: bs-cartoon-leg-a var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-leg-b { animation: bs-cartoon-leg-b var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-small-hop { animation: bs-cartoon-hop var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-held-big { animation: bs-cartoon-held-big var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-held-small { animation: bs-cartoon-held-small var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-javelin-fast { animation: bs-cartoon-javelin-fast var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-javelin-slow { animation: bs-cartoon-javelin-slow var(--bs-cartoon-loop) linear infinite; }

@keyframes bs-cartoon-scene {
0% { opacity: 0; }
2.5%, 97.5% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes bs-cartoon-walk {
0% { transform: translateX(-58px); }
5% { transform: translateX(-58px); animation-timing-function: ease-in-out; }
15%, 100% { transform: translateX(0); }
}

@keyframes bs-cartoon-bob {
0%, 3.75% { transform: translateY(0) scale(1, 1); }
4.3333% { transform: translateY(0) scale(1.04, .95); }
5% { transform: translateY(0) scale(1, 1); }
6.25% { transform: translateY(-3px) scale(.99, 1.015); }
7.5% { transform: translateY(0) scale(1.015, .985); }
8.75% { transform: translateY(-3px) scale(.99, 1.015); }
10% { transform: translateY(0) scale(1.015, .985); }
11.25% { transform: translateY(-3px) scale(.99, 1.015); }
12.5% { transform: translateY(0) scale(1.015, .985); }
13.75% { transform: translateY(-3px) scale(.99, 1.015); }
15%, 100% { transform: translateY(0) scale(1, 1); }
}

@keyframes bs-cartoon-leg-a {
0%, 5% { transform: translate(0, 0); }
6.25% { transform: translate(7px, -2.5px); }
7.5% { transform: translate(0, 0); }
8.75% { transform: translate(-7px, 0); }
10% { transform: translate(0, 0); }
11.25% { transform: translate(7px, -2.5px); }
12.5% { transform: translate(0, 0); }
13.75% { transform: translate(-7px, 0); }
15%, 100% { transform: translate(0, 0); }
}

@keyframes bs-cartoon-leg-b {
0%, 5% { transform: translate(0, 0); }
6.25% { transform: translate(-7px, 0); }
7.5% { transform: translate(0, 0); }
8.75% { transform: translate(7px, -2.5px); }
10% { transform: translate(0, 0); }
11.25% { transform: translate(-7px, 0); }
12.5% { transform: translate(0, 0); }
13.75% { transform: translate(7px, -2.5px); }
15%, 100% { transform: translate(0, 0); }
}

@keyframes bs-cartoon-beam {
0%, 15% { transform: translateX(0); opacity: 0; }
15.6% { transform: translateX(-6px); opacity: 1; }
18.5% { transform: translateX(-102px); opacity: 1; }
21.2% { transform: translateX(0); opacity: 1; }
24.2% { transform: translateX(-102px); opacity: 1; }
26.1% { transform: translateX(-40px); opacity: 1; }
26.667%, 100% { transform: translateX(0); opacity: 0; }
}

@keyframes bs-cartoon-lamp {
0%, 15% { opacity: .45; }
16% { opacity: 1; }
17.6% { opacity: .35; }
19.2% { opacity: 1; }
20.8% { opacity: .35; }
22.4% { opacity: 1; }
24% { opacity: .35; }
25.4% { opacity: 1; }
26.667%, 100% { opacity: .45; }
}

@keyframes bs-cartoon-pop {
0%, 26.667% { transform: translateY(-16px) scale(0); opacity: 0; }
27.2% { transform: translateY(-14px) scale(.25); opacity: 1; }
29.4% { transform: translateY(-5px) scale(1.15); opacity: 1; }
30.8% { transform: translateY(0) scale(.94); opacity: 1; }
31.667%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bs-cartoon-hop {
0%, 44.167% { transform: translateY(0); }
45.4% { transform: translateY(-10px); }
46.7% { transform: translateY(0); }
47.9% { transform: translateY(-5px); }
49.2%, 100% { transform: translateY(0); }
}

@keyframes bs-cartoon-small-lean {
0%, 36.667% { transform: rotate(0); }
39.2% { transform: rotate(-16deg); }
40.3% { transform: rotate(9deg); }
42%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-small-arm {
0%, 36.6667% { transform: rotate(0); }
39.2% { transform: rotate(-118deg); }
40% { transform: rotate(-64deg); }
40.9% { transform: rotate(34deg); }
42.2% { transform: rotate(10deg); }
44%, 44.1667% { transform: rotate(0); }
45.4167% { transform: rotate(-105deg); }
46.8333% { transform: rotate(-80deg); }
48.1667% { transform: rotate(-105deg); }
49.5833%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-big-lean {
0%, 36.667% { transform: rotate(0); }
61.667% { transform: rotate(-13deg); }
63.4% { transform: rotate(10deg); }
66%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-big-arm {
0%, 5% { transform: rotate(0); animation-timing-function: ease-in-out; }
6.25% { transform: rotate(-12deg); animation-timing-function: ease-in-out; }
8.75% { transform: rotate(12deg); animation-timing-function: ease-in-out; }
11.25% { transform: rotate(-12deg); animation-timing-function: ease-in-out; }
13.75% { transform: rotate(12deg); animation-timing-function: ease-in-out; }
15%, 36.6667% { transform: rotate(0); }
40.5% { transform: rotate(-82deg); }
61.6667% { transform: rotate(-145deg); }
62.6% { transform: rotate(-78deg); }
63.4% { transform: rotate(14deg); }
65.2% { transform: rotate(-8deg); }
67%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-strain {
0%, 37.5% { opacity: 0; transform: scale(.5); }
42% { opacity: 1; transform: scale(1); }
48% { opacity: .3; transform: scale(.85); }
52% { opacity: 1; transform: scale(1.06); }
57% { opacity: .35; transform: scale(.9); }
60% { opacity: 1; transform: scale(1.12); }
61.667%, 100% { opacity: 0; transform: scale(.6); }
}

@keyframes bs-cartoon-tag {
0%, 26.667% { opacity: 0; }
31.667%, 100% { opacity: 1; }
}

@keyframes bs-cartoon-held-big {
0%, 31.667% { opacity: 0; }
33.5%, 61.5% { opacity: 1; }
61.667%, 100% { opacity: 0; }
}

@keyframes bs-cartoon-held-small {
0%, 31.667% { opacity: 0; }
33.5%, 39.9% { opacity: 1; }
40%, 100% { opacity: 0; }
}

@keyframes bs-cartoon-javelin-fast {
0%, 39.9% { transform: translate(-148px, 39.3px) rotate(-24deg); opacity: 0; }
40% { transform: translate(-148px, 39.3px) rotate(-24deg); opacity: 1; }
41.5% { transform: translate(-85px, 16.2px) rotate(-15deg); opacity: 1; }
43% { transform: translate(-32px, 4px) rotate(-5deg); opacity: 1; }
44.167%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

@keyframes bs-cartoon-javelin-slow {
0%, 61.5% { transform: translate(-357px, -22px) rotate(-70deg); opacity: 0; }
61.667% { transform: translate(-357px, -22px) rotate(-70deg); opacity: 1; }
65.5% { transform: translate(-278px, -68px) rotate(-58deg); opacity: 1; }
70% { transform: translate(-186px, -90px) rotate(-38deg); opacity: 1; }
75% { transform: translate(-93px, -68px) rotate(-16deg); opacity: 1; }
80%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

@keyframes bs-cartoon-target {
0%, 44.167% { transform: rotate(0); }
45.1% { transform: rotate(3.5deg); }
46.1% { transform: rotate(-2.5deg); }
47.1% { transform: rotate(1.4deg); }
48.2%, 80% { transform: rotate(0); }
80.9% { transform: rotate(-3.5deg); }
81.9% { transform: rotate(2.5deg); }
82.9% { transform: rotate(-1.4deg); }
84%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-hitglow {
0%, 80% { opacity: 0; }
81.5% { opacity: .8; }
84% { opacity: .25; }
86% { opacity: .6; }
91.667%, 100% { opacity: 0; }
}

@keyframes bs-cartoon-samespot {
0%, 80% { opacity: 0; transform: translateY(4px); }
86.667%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes bs-cartoon-big-look {
0%, 3.75% { transform: translate(0, 0); }
5%, 15% { transform: translate(1.6px, 0); }
16.25%, 25.8333% { transform: translate(1.6px, -.5px); }
27.0833%, 39.1667% { transform: translate(1.8px, 0); }
40.4167%, 44.1667% { transform: translate(1.8px, -.3px); }
45.4167%, 60.8333% { transform: translate(1.4px, -.2px); }
62.5% { transform: translate(1.4px, -1.6px); }
70% { transform: translate(1.2px, -1.9px); }
75% { transform: translate(1.8px, -.8px); }
80%, 94.1667% { transform: translate(1.8px, 0); }
96.6667%, 100% { transform: translate(0, 0); }
}

@keyframes bs-cartoon-big-blink {
0% { transform: scale(1, 1); }
10.3333% { transform: scale(1, 1); }
10.8333% { transform: scale(1, .12); }
11.5% { transform: scale(1, 1); }
45% { transform: scale(1, 1); }
46.6667%, 60.8333% { transform: scale(1, .55); }
61.8333% { transform: scale(1.15, 1.15); }
64.1667% { transform: scale(1, 1); }
85.75% { transform: scale(1, 1); }
86.25% { transform: scale(1, .12); }
86.9167% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

@keyframes bs-cartoon-big-arm-back {
0%, 5% { transform: rotate(0); }
6.25% { transform: rotate(12deg); }
8.75% { transform: rotate(-12deg); }
11.25% { transform: rotate(12deg); }
13.75% { transform: rotate(-12deg); }
15%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-small-look {
0%, 32.5% { transform: translate(0, 0); }
33.75%, 39.5833% { transform: translate(1.4px, 0); }
40.4167%, 49.1667% { transform: translate(1.8px, 0); }
50.4167%, 60.8333% { transform: translate(-1.6px, 0); }
62.5% { transform: translate(-1.2px, -1.6px); }
70% { transform: translate(0, -1.9px); }
75% { transform: translate(1.4px, -.8px); }
80%, 94.1667% { transform: translate(1.8px, 0); }
96.6667%, 100% { transform: translate(0, 0); }
}

@keyframes bs-cartoon-small-blink {
0% { transform: scale(1, 1); }
34.5% { transform: scale(1, 1); }
35% { transform: scale(1, .12); }
35.6667% { transform: scale(1, 1); }
54.1667% { transform: scale(1, 1); }
55% { transform: scale(1, .12); }
56.6667% { transform: scale(1, 1); }
87.4167% { transform: scale(1, 1); }
87.9167% { transform: scale(1, .12); }
88.5833% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

@keyframes bs-cartoon-small-arm-l {
0%, 44.1667% { transform: rotate(0); }
45.4167% { transform: rotate(105deg); }
46.8333% { transform: rotate(80deg); }
48.1667% { transform: rotate(105deg); }
49.5833%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-small-tap {
0%, 51.25% { transform: translateY(0); }
51.8333% { transform: translateY(-2.4px); }
52.5% { transform: translateY(0); }
54.75% { transform: translateY(-2.4px); }
55.4167% { transform: translateY(0); }
57.6667% { transform: translateY(-2.4px); }
58.3333% { transform: translateY(0); }
60.5833% { transform: translateY(-2.4px); }
61.25%, 100% { transform: translateY(0); }
}

@keyframes bs-cartoon-trail {
0%, 40% { opacity: 0; transform: scaleX(.4); }
40.25% { opacity: .85; transform: scaleX(1); }
42.6667% { opacity: .7; transform: scaleX(.8); }
44.1667% { opacity: 0; transform: scaleX(.35); }
100% { opacity: 0; transform: scaleX(.4); }
}

@keyframes bs-cartoon-crumb {
0%, 62.6667% { opacity: 0; }
63.1667%, 80% { opacity: .6; }
85%, 100% { opacity: 0; }
}

@keyframes bs-cartoon-burst {
0%, 44% { opacity: 0; transform: scale(.8); }
44.4167% { opacity: 1; transform: scale(.9); }
47.9167% { opacity: 0; transform: scale(1.3); }
100% { opacity: 0; transform: scale(.8); }
}

@keyframes bs-cartoon-screen-bit {
0%, 15.4167% { transform: scaleY(var(--bs-bar-from)); }
19.1667% { transform: scaleY(var(--bs-bar-a)); }
22.9167% { transform: scaleY(var(--bs-bar-b)); }
26.6667%, 100% { transform: scaleY(1); }
}

@keyframes bs-cartoon-brow {
0%, 4.1667% { transform: translateY(0) rotate(0deg); }
5.4167%, 15% { transform: translateY(0) rotate(calc(-5deg * var(--bs-brow))); }
16.25%, 25.8333% { transform: translateY(-1.5px) rotate(0deg); }
27.0833%, 36.6667% { transform: translateY(-1px) rotate(0deg); }
40.4167%, 44.1667% { transform: translateY(-3px) rotate(0deg); }
45.8333%, 60.8333% { transform: translateY(1px) rotate(calc(-18deg * var(--bs-brow))); }
61.8333% { transform: translateY(-3.5px) rotate(0deg); }
64.1667%, 79.1667% { transform: translateY(-2px) rotate(0deg); }
80%, 94.1667% { transform: translateY(-1.5px) rotate(0deg); }
96.6667%, 100% { transform: translateY(0) rotate(0deg); }
}

@keyframes bs-cartoon-small-shadow {
0%, 26.6667% { opacity: 0; transform: scale(.4); }
29.1667%, 44.1667% { opacity: 1; transform: scale(1); }
45.4167% { opacity: .6; transform: scale(.78); }
46.6667% { opacity: 1; transform: scale(1); }
47.9167% { opacity: .8; transform: scale(.9); }
49.1667%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes bs-cartoon-big-antenna {
0%, 3.75% { transform: rotate(0); }
4.3333% { transform: rotate(-6deg); }
5% { transform: rotate(3deg); }
6.25% { transform: rotate(-6deg); }
7.5% { transform: rotate(5deg); }
8.75% { transform: rotate(-6deg); }
10% { transform: rotate(5deg); }
11.25% { transform: rotate(-6deg); }
12.5% { transform: rotate(5deg); }
13.75% { transform: rotate(-6deg); }
15%, 36.6667% { transform: rotate(0); }
40.5% { transform: rotate(7deg); }
46.6667% { transform: rotate(-3deg); }
49.1667% { transform: rotate(3deg); }
51.6667% { transform: rotate(-3deg); }
54.1667% { transform: rotate(3deg); }
56.6667% { transform: rotate(-3deg); }
59.1667% { transform: rotate(3deg); }
60.8333% { transform: rotate(-2deg); }
61.8333% { transform: rotate(-20deg); }
62.9167% { transform: rotate(17deg); }
64.1667% { transform: rotate(-9deg); }
65.4167% { transform: rotate(4deg); }
66.6667%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-small-antenna {
0%, 26.6667% { transform: rotate(0); }
27.5% { transform: rotate(-22deg); }
28.5% { transform: rotate(15deg); }
29.5833% { transform: rotate(-8deg); }
30.6667% { transform: rotate(4deg); }
31.6667%, 36.6667% { transform: rotate(0); }
39.1667% { transform: rotate(-10deg); }
40% { transform: rotate(18deg); }
41.25% { transform: rotate(-10deg); }
42.5% { transform: rotate(4deg); }
44% { transform: rotate(0); }
44.8333% { transform: rotate(-13deg); }
46% { transform: rotate(11deg); }
47.1667% { transform: rotate(-7deg); }
48.3333% { transform: rotate(5deg); }
49.5833%, 51.25% { transform: rotate(0); }
51.8333% { transform: rotate(4deg); }
52.5% { transform: rotate(0); }
54.75% { transform: rotate(4deg); }
55.4167% { transform: rotate(0); }
57.6667% { transform: rotate(4deg); }
58.3333% { transform: rotate(0); }
60.5833% { transform: rotate(4deg); }
61.25%, 100% { transform: rotate(0); }
}

/* The visitor's own pause wins over every part of the loop. */
.b3-hero-cartoon.is-paused .b3-cartoon * { animation-play-state: paused; }

/* ==========================================================================
   Hero stack: the idea above the measured proof
   --------------------------------------------------------------------------
   One card carries the whole opening claim. The cartoon draws the idea, a
   single divider line separates it, and a slim scoreboard measures it. Both
   halves share the same inline padding at every width, so the section labels,
   the numbers and the provenance line stack down one edge. Everything the
   scoreboard does not show sits in the collapsed measurement details.
   ========================================================================== */
/* ==========================================================================
   Hero deck: two cards that play one after the other
   --------------------------------------------------------------------------
   Card 1 answers "does it fit", card 2 answers "how fast". Both sit in one grid
   cell: the front card plays its cartoon once and holds the last frame, then
   the deck hands over at the card's data-deck-duration and the new front card
   starts from its first frame. The back card peeks out below, dimmed, and a
   click brings it forward. At a hand-over the old card recedes into the back
   slot while the new one fades in just above its resting place (is-arriving).

   The outer story figure is only a frame now, so each card carries the surface
   and the shared foot sits under the deck on the card's own inline padding.
   A card animates only while it carries is-playing, so an untouched page, a
   back card and a browser without the controller all show static frames.
   ========================================================================== */
.b3-hero-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  border: 0;
}

/* Both halves give up their own frames: the card is the only surface. */
.b3-hero-stack .b3-hero-cartoon { margin: 0; border: 0; background: transparent; }

.b3-hero-stack .b3-llm-proof { border: 0; border-top: 1px solid rgba(255,255,255,.2); }

/* The taller card keeps its first screen: slightly tighter head, caption and details spacing. */
.b3-hero-stack .b3-cartoon-caption { padding: 8px 24px 12px; }

/* --- score row: three numbers ------------------------------------------ */
/* --- speed against the original BF16 run ----------------------------------
   The speed tile carries one comparison line, so the row hangs its tiles from
   the top rather than stretching the shorter two beside it. The ratio keeps
   the small label's size and leading; only the numeral changes face. */
.b3-score-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 10px 24px 14px;
  align-items: start;
}

.b3-score-stat { position: relative; display: flex; flex-direction: column; min-width: 0; }

.bs-page .b3-score-stat strong {
  color: #ffffff;
  font: 400 clamp(26px, 2.3vw, 34px)/1.15 var(--bs-font-mono);
  letter-spacing: -.05em;
}

.b3-score-stat:first-child strong { color: #f06400; }
.b3-score-stat > span { margin-top: 6px; color: #a5adbb; font-size: 11px; line-height: 1.45; }

/* While a card replays its data, js/hero-cartoon.js lays an aria-hidden copy of
   each number exactly over it. The copy is a strong in the same tile, so the
   rules above give it the same face, size and colour; the published number
   underneath only turns transparent, so assistive technology keeps reading it.
   Tabular numerals keep the moving digits from jittering. */
.b3-hero-card .b3-score-stat .b3-deck-readout {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.b3-hero-card .is-deck-covered { opacity: 0; }

/* --- score foot: one provenance line, one link, the rest folded away --- */
.b3-score-foot { padding: 4px 24px 16px; }

.b3-score-source { margin: 0; color: #a5adbb; font-size: 11.5px; line-height: 1.6; }
.b3-score-source strong { color: #ffffff; font-family: var(--bs-font-mono); font-weight: 400; }

/* Both links read inside their sentence rather than as separate calls to action. */
.b3-score-foot .b3-text-link { gap: 6px; color: #ff8c3a; font-size: 11px; font-weight: 400; }

.b3-score-foot .b3-text-link:hover { color: #ffa565; }
.bs-page .b3-llm-method { font-size: 14px; line-height: 1.7; }
.bs-page .b3-llm-method summary { color: #c7ced9; padding-block: 14px; }
.bs-page .b3-llm-method > div { color: #b8c0cc; }
.bs-page .b4-weight-comparison { grid-template-columns: minmax(0, 1fr) 140px; gap: 24px; }
.bs-page .b3-scene-controls .b3-proof-choice { min-height: 44px; font-size: 14px; }

.bs-page .b3-cartoon-caption, .bs-page .b3-score-source, .bs-page .b3-score-stat > span {
  font-size: 14px;
  line-height: 1.6;
}

.bs-page .b3-score-foot .b3-text-link {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* 2026-09-15: the hero results card leads with one takeaway sentence; the
   parameter row and the bits-per-weight bar moved into Measurement details. */
.b5-takeaway {
  margin: 0;
  padding: 10px 24px 2px;
  color: #ffffff;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  text-wrap: balance;
}

.b5-takeaway strong {
  color: #ff8c3a;
  font-family: var(--bs-font-mono);
  font-weight: 500;
  letter-spacing: -.03em;
}

.b3-llm-method .b5-ratio-note strong {
  font-family: var(--bs-font-mono);
  font-weight: 500;
  color: #ffffff;
}

/* --- hero compression bars and same-GPU speed line ------------------------
   Two tracks share one width, so the ByteShape fill reads against the full
   BF16 track. Each time a card comes to the front, js/hero-cartoon.js moves
   its fills by scaleX from the left edge only, so --bar-width, which
   js/llm-proof.js writes, always holds the published width. */
.b5-compress { display: grid; gap: 9px; padding: 10px 24px 0; }

.b5-compress-row { display: grid; gap: 4px; min-width: 0; }

.b5-compress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
  margin: 0;
  color: #a5adbb;
  font-size: 11.5px;
  line-height: 1.4;
}

.b5-compress-name {
  color: #ffffff;
  font: 500 10px/1.5 var(--bs-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.b5-compress-row--byteshape .b5-compress-name { color: #ff8c3a; }

.b5-compress-spec strong, .b5-compress-spec span[data-llm] {
  color: #ffffff;
  font-family: var(--bs-font-mono);
  font-weight: 500;
}

.b5-compress-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,.08);
}

.b5-compress-fill {
  display: block;
  flex: 0 0 var(--bar-width, 100%);
  height: 100%;
  background: rgba(255,255,255,.42);
  transform-origin: 0 50%;
}

.b5-compress-row--byteshape .b5-compress-fill { position: relative; overflow: hidden; background: #f06400; }

/* A band of light that crosses the ByteShape bar on its story beat. At rest it
   waits past the bar's left edge, where the fill clips it. */
.b5-compress-row--byteshape .b5-compress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  transform: translateX(-100%);
}

/* The bits the precision bar sheds from its moving edge as it compresses. The
   controller places each one, drops and fades it, then removes it. */
.b3-deck-bit {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  background: #f06400;
  pointer-events: none;
}

.b3-score-foot .b3-llm-method { margin-top: 10px; }

.b3-hero-stack .b3-llm-proof--story {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
}

.b3-llm-proof--story > .b3-score-foot { border-top: 0; }
.b3-hero-deck { display: grid; padding-bottom: 20px; }

/* Both cards open with their drawing on the same line: no label row, no margin
   and no card padding above the svg, so the ground line never jumps when the
   deck hands over. Any spare height in the grid cell falls to the bottom of the
   shorter card instead of moving its drawing. */
.b3-hero-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0d1016;
  border: 1px solid rgba(255,255,255,.2);
  transition: transform .64s cubic-bezier(.2,.7,.2,1), opacity .42s ease, filter .64s ease;
  will-change: transform;
  padding-top: 0;
}

.b3-hero-card.is-front { transform: none; opacity: 1; z-index: 2; }

.b3-hero-card.is-back {
  transform: translateY(20px) scale(.965);
  opacity: .75;
  filter: brightness(.55);
  z-index: 1;
  cursor: pointer;
}

/* The card coming forward starts a touch below its place and fades in over the
   receding one. Its end state equals is-front, so nothing jumps when the
   controller drops the class after the swap. */
.b3-hero-card.is-arriving { animation: bs-deck-arrive .6s cubic-bezier(.2,.7,.2,1) both; }

@keyframes bs-deck-arrive {
from { opacity: 0; transform: translateY(14px) scale(.985); filter: brightness(.8); }
to { opacity: 1; transform: none; filter: none; }
}

/* Only the playing card runs its loop; every other state shows the static frame. */
.b3-hero-card:not(.is-playing) .b3-cartoon * { animation-name: none; }

.b3-hero-card.is-back .b3-cartoon *,
.b3-hero-card.is-back .b3-score-stat [data-llm],
.b3-hero-card.is-back .b5-compress-fill::after {
  animation-play-state: paused !important;
}

.b3-hero-deck.is-paused .b3-cartoon *,
.b3-hero-deck.is-paused .b3-score-stat [data-llm],
.b3-hero-deck.is-paused .b5-compress-fill::after {
  animation-play-state: paused !important;
}

/* In the deck a cartoon plays once and keeps its last frame during the hold. */
.b3-hero-deck .b3-cartoon * { animation-iteration-count: 1; animation-fill-mode: forwards; }

.b3-hero-deck .b3-cartoon-scene { animation-name: bs-deck-scene; }

@keyframes bs-deck-scene {
0% { opacity: 0; }
2.5%, 100% { opacity: 1; }
}

/* --- the tab strip: two folder tabs on the front card ---------------------
   The tabs sit on the card's top edge like the tabs of a folder. The strip
   overlaps the card's top border by 1px: the active tab shares the card's
   surface and border and has no bottom edge, so it reads as part of the sheet
   in front, while the other tab is 2px shorter, darker and closed at the
   bottom, so it reads as the sheet behind. The active tab's 2px bar along its
   top edge fills over that card's hand-over time (data-deck-duration), which
   shows how long the story still has to run and doubles as the hand-off cue. */
/* Titles differ in length and wrap at different widths, so both tabs stretch
   to the taller one and the inactive tab sits 2px lower: whatever wraps, the
   active tab stays the tallest. */
.b3-hero-tabs {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: stretch;
  margin-bottom: -1px;
  padding: 0;
}

/* A grid keeps the number on the title's first baseline and centres a short
   title in a tab stretched by a longer one. */
.b3-hero-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  align-content: center;
  gap: 8px;
  min-width: 0;
  margin: 2px 0 0;
  padding: 8px 12px 11px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom-color: rgba(255,255,255,.2);
  border-radius: 6px 6px 0 0;
  background: #080a0e;
  color: #8d95a3;
  font-family: var(--bs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.45;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Card titles read at a glance: 12px mono, larger than the 9px section labels.
   Either title may wrap at some widths; the stretched strip above keeps the
   folder shape whichever one does. */
.b3-hero-tab:hover { color: #ffffff; background: #0b0e13; }

.b3-hero-tab.is-active {
  margin-top: 0;
  padding: 10px 12px 12px;
  border-color: rgba(255,255,255,.2);
  border-bottom: 0;
  background: #0d1016;
  color: #ffffff;
  cursor: default;
}

.b3-hero-tab:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 3px; }
.b3-hero-tab-index { color: #79828f; }
.b3-hero-tab.is-active .b3-hero-tab-index { color: #ff8c3a; }
/* A wrapped title splits into even lines instead of leaving one word behind. */
.b3-hero-tab-text { min-width: 0; text-wrap: balance; }

.b3-hero-tab-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #f06400;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.b3-hero-tab.is-active .b3-hero-tab-progress {
  animation: bs-deck-progress var(--bs-deck-duration, 16s) linear forwards;
}

@keyframes bs-deck-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

/* One pause flag on the panel stops the drawings and the tab bar together. */
.b3-llm-proof--story.is-paused .b3-hero-tab-progress { animation-play-state: paused; }

/* --- the numbers answer the story -----------------------------------------
   While a card plays, each measurement lights up on the beat it stands for:
   card 1's ratio as the small model pops out of ShapeLearn (8.7s) and its
   speed as the car launches (11.15s); card 2's ratio as the fast javelin
   lands (5.35s) and its score as the slow one hits the same spot (9.65s).
   The ByteShape bar sweeps with the ratio. The delays are the cartoon beats
   in the timelines above: move one, move both. */
.b3-hero-part--fit.is-playing .b5-compress-row--byteshape .b5-compress-fill::after {
  animation: bs-deck-sweep .9s var(--bs-ease-in-out) 8.6s both;
}

.b3-hero-part--speed.is-playing .b5-compress-row--byteshape .b5-compress-fill::after {
  animation: bs-deck-sweep .9s var(--bs-ease-in-out) 5.3s both;
}

.b3-hero-part--fit.is-playing .b3-score-stat [data-llm="bits-ratio"] { animation: bs-deck-glow 1.1s ease-out 8.7s both; }
.b3-hero-part--fit.is-playing .b3-score-stat [data-llm="speed"] { animation: bs-deck-glow 1.1s ease-out 11.15s both; }
.b3-hero-part--speed.is-playing .b3-score-stat [data-llm="speed-ratio"] { animation: bs-deck-glow 1.1s ease-out 5.35s both; }
.b3-hero-part--speed.is-playing .b3-score-stat [data-llm="quality"] { animation: bs-deck-glow 1.1s ease-out 9.65s both; }

@keyframes bs-deck-sweep {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}

@keyframes bs-deck-glow {
0%, 100% { transform: none; text-shadow: 0 0 0 rgba(255,140,58,0); }
16% { transform: scale(1.06); text-shadow: 0 0 18px rgba(255,140,58,.8); }
}

.b3-hero-card .b3-hero-cartoon { margin: 0; padding: 0; }
.b3-hero-card .b3-cartoon { display: block; width: 100%; height: auto; }
.b3-hero-part .b3-cartoon-caption { padding-bottom: 10px; }

/* Two numbers per card, each with room to read. */
.b3-score-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   Hero cartoon, card 1: the GPU that was never going to fit
   --------------------------------------------------------------------------
   One showing lasts --bs-car-loop (17.1s) and runs once, so every keyframe
   percentage below maps to a fixed moment in the story. The deck hands over
   13.4s in (data-deck-duration on the card), 1.3s after the car has left, so
   the tail of the timeline never shows. Only transform and
   opacity animate. The "car" in the names below is the GPU racer. Rotations use
   transform-box: fill-box with an invisible .b3-cartoon-pivot rect that puts
   the pivot on a box anchor.

   This cartoon shares no animated class with the javelin cartoon: every moving
   part is b3-car-* driven by a bs-car-* keyframe, so the two loops can never
   pull on the same element.

   The SVG's default state is the settled scene (original at the left, machine
   landed with its learned bars, the small ByteShape model already driving the
   GPU with four of its five memory chips lit, BYTESHAPE under it). Reduced
   motion, print, a back card and a browser without CSS animation therefore
   show the point of the story.

     t (s)    %         what happens
     0.0      0         scene fades in: the original, the car, no machine yet
     0.5      2.924     the original crouches, then walks right, arms swinging
     2.4      14.0351   it reaches the car and leans in, one arm pushing
     2.75     16.0819   the car squashes and rocks, the original bounces off
     2.8      16.3743   TOO BIG pops in over its head
     3.4      19.8830   disappointment: mouth down, eyes droop, it deflates
     4.4      25.7310   the ShapeLearn machine drops in, the original looks up
     5.0      29.2398   it lands with a squash, dust and a jolt of the scene;
                        the original jumps, wide-eyed; the lamp flashes
     5.4      31.5789   the original walks back left, mouth neutral again
     7.0      40.9357   the scan starts: the machine hums, the bar shrinks,
                        five bits fly from the original into the intake
     8.6      50.2924   scan ends, the small ByteShape model pops out in a burst
     9.2      53.8012   it hops right, arms flapping, its label hopping along
     10.4     60.8187   it boards; the label moves to the car
     10.9     63.7427   the driver appears, the car dips under it
     11.1     64.9123   wheels spin in place, dust, the nose lifts, it launches
     11.2     65.4971   the original smiles and waves it off
     12.1     70.7602   the car has left the frame
     13.4     78.3626   the deck hands over while the original still waves
   ========================================================================== */
.b3-hero-cartoon--car { --bs-car-loop: 17.1s; }

/* --- flat vector palette, the javelin scene's colours ------------------ */
.b3-car-glow { fill: #f06400; opacity: .55; filter: url(#bs-car-glow); }

.b3-car-lamp { opacity: .45; animation: bs-car-lamp var(--bs-car-loop) linear infinite; }
.b3-car-beam-group { opacity: 0; animation: bs-car-beam var(--bs-car-loop) linear infinite; }

.b3-car-screen-bit { animation: bs-car-screen-bit var(--bs-car-loop) ease-in-out infinite; }

.b3-car-strain {
  fill: none;
  stroke: #ff8c3a;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-strain var(--bs-car-loop) linear infinite;
}

.b3-car-mouth-sad { opacity: 0; animation: bs-car-mouth-sad var(--bs-car-loop) linear infinite; }
/* --- your GPU: a graphics card built into a racer ---------------------------
   Its two fans are the wheels, the I/O bracket is the rear spoiler, and the
   PCIe contacts run along the bottom edge. The memory chips on top flash when
   the original leans in and light up one by one as ByteShape loads. */
.b3-gpu-shroud { fill: url(#bs-toon-metal); stroke: #e9edf4; stroke-width: 1.8; }
.b3-gpu-bracket { fill: url(#bs-toon-bracket); stroke: #e9edf4; stroke-width: 1.2; stroke-linejoin: round; }
.b3-gpu-bracket-vent { fill: none; stroke: #2a303a; stroke-width: 1.6; stroke-linecap: round; }
.b3-gpu-cockpit { fill: #07090c; stroke: rgba(255,255,255,.35); stroke-width: 1; }
.b3-gpu-stripe { fill: #f06400; }
.b3-gpu-fingers { fill: none; stroke: #ffb070; stroke-width: 1.5; stroke-linecap: round; }
.b3-gpu-shield { fill: rgba(165,173,187,.16); stroke: rgba(255,255,255,.6); stroke-width: 1.2; stroke-linecap: round; }
.b3-gpu-fan-ring { fill: url(#bs-toon-fan); stroke: #e9edf4; stroke-width: 1.8; }
.b3-gpu-fan-blades { fill: #6d7684; }
.b3-gpu-fan-hub { fill: #c4cad4; stroke: #0b0e13; stroke-width: 1; }
.b3-gpu-vram > * { fill: #262c36; stroke: rgba(255,255,255,.45); stroke-width: .8; }
.b3-car-light { fill: #f06400; }

/* The lit chips rest at --bs-lit: four of five, a model that fits. */
.b3-gpu-vram-lit > * {
  fill: #ff8c3a;
  stroke: #ffd2ad;
  stroke-width: .8;
  opacity: var(--bs-lit, 1);
  animation: bs-car-vram var(--bs-car-loop) linear infinite;
}

.b3-gpu-vram-lit > :nth-child(2) { animation-delay: .1s; }
.b3-gpu-vram-lit > :nth-child(3) { animation-delay: .2s; }
.b3-gpu-vram-lit > :nth-child(4) { animation-delay: .3s; }
.b3-gpu-vram-lit > :nth-child(5) { --bs-lit: 0; animation-delay: .4s; }

.b3-car-wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-wheel var(--bs-car-loop) linear infinite;
}

.b3-car-speedlines { opacity: 0; animation: bs-car-speedlines var(--bs-car-loop) linear infinite; }
.b3-car-speedline { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; }

.b3-car-squash {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-squash var(--bs-car-loop) linear infinite;
}

.b3-car-big-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-big-lean var(--bs-car-loop) linear infinite;
}

.b3-car-small-pop {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-pop var(--bs-car-loop) linear infinite;
}

.b3-car-small-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-small-lean var(--bs-car-loop) linear infinite;
}

.b3-car-label--ours { fill: #ff8c3a; }
.b3-car-tag-hop { opacity: 0; animation: bs-car-tag-hop var(--bs-car-loop) linear infinite; }

.b3-car-callout {
  fill: #ff8c3a;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-anchor: middle;
}

.b3-car-callout--gpu { fill: #a5adbb; }

.b3-car-toobig {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-toobig var(--bs-car-loop) linear infinite;
}

/* --- the characters come alive -------------------------------------------
   The same nesting as the javelin scene, with b3-car-* names so the two loops
   never drive each other's drawing: glance groups translate, blink groups
   scale about the eye line, arms swing about a pivot rect on the shoulder. */
.b3-car-big-look { animation: bs-car-big-look var(--bs-car-loop) ease-in-out infinite; }
.b3-car-small-look { animation: bs-car-small-look var(--bs-car-loop) ease-in-out infinite; }

.b3-car-big-blink {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-big-blink var(--bs-car-loop) linear infinite;
}

.b3-car-small-blink {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-small-blink var(--bs-car-loop) linear infinite;
}

.b3-car-arm-back {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-arm-back var(--bs-car-loop) ease-in-out infinite;
}

.b3-car-arm-wave {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-arm-wave var(--bs-car-loop) ease-in-out infinite;
}

/* The same brows and mirrored angles as the javelin scene. */
.b3-car-brow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-brow var(--bs-car-loop) ease-in-out infinite;
}

.b3-car-brow--left { --bs-brow: -1; }
.b3-car-brow--right { --bs-brow: 1; }

/* Antennas pivot on their base: they sway with the walk, whip at the bump,
   droop with the disappointment and lag behind every hop. The driver's is
   thrown back as the GPU launches. */
.b3-car-big-antenna {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-big-antenna var(--bs-car-loop) ease-in-out infinite;
}

.b3-car-small-antenna {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-small-antenna var(--bs-car-loop) ease-in-out infinite;
}

.b3-car-driver-antenna {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-driver-antenna var(--bs-car-loop) ease-in-out infinite;
}

/* Contact shadows answer the jumps: they shrink and fade while a body is in
   the air. The small model's shadow only exists while the model does, and the
   machine's grows as it falls. */
.b3-car-big-shadow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-big-shadow var(--bs-car-loop) linear infinite;
}

.b3-car-small-shadow {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-small-shadow var(--bs-car-loop) linear infinite;
}

.b3-car-machine-shadow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-machine-shadow var(--bs-car-loop) ease-in infinite;
}

/* Both small arms share one flap; --bs-arm mirrors the right one. */
.b3-car-small-arm {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-small-arms var(--bs-car-loop) ease-in-out infinite;
}

.b3-car-small-arm--left { --bs-arm: 1; }
.b3-car-small-arm--right { --bs-arm: -1; }
.b3-car-mouth-happy { opacity: 0; animation: bs-car-mouth-happy var(--bs-car-loop) linear infinite; }

/* --- weight and work --------------------------------------------------------
   The machine lands with a squash, two puffs of dust and a jolt of the whole
   scene, hums while it scans, pulls the original's bits into its intake and
   pops the small model out in a burst. */
.b3-car-machine-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-machine-body var(--bs-car-loop) linear infinite;
}

.b3-car-dust {
  fill: rgba(255,255,255,.42);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-dust var(--bs-car-loop) ease-out infinite;
}

.b3-car-dust--left { --bs-dust-x: -20px; }
.b3-car-dust--right { --bs-dust-x: 20px; }

/* The launch puff reuses the landing timeline, 6s later, behind the car. */
.b3-car-dust--launch { --bs-dust-x: -24px; animation-delay: 6s; }

.b3-car-bit {
  fill: #e9edf4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-bit var(--bs-car-loop) ease-in-out infinite;
}

/* Each bit leaves the original's right side, below its eyes, and arcs into
   the intake port. */
.b3-car-bit:nth-child(1) { --bs-bit-x: -36px; --bs-bit-y: 16px; }
.b3-car-bit:nth-child(2) { --bs-bit-x: -38px; --bs-bit-y: 32px; animation-delay: .2s; }
.b3-car-bit:nth-child(3) { --bs-bit-x: -35px; --bs-bit-y: -4px; animation-delay: .4s; }
.b3-car-bit:nth-child(4) { --bs-bit-x: -37px; --bs-bit-y: 24px; animation-delay: .6s; }
.b3-car-bit:nth-child(5) { --bs-bit-x: -36px; --bs-bit-y: 6px; animation-delay: .8s; }

.b3-car-burst {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-burst var(--bs-car-loop) ease-out infinite;
}

.b3-car-burst-rays { fill: none; stroke: #ff8c3a; stroke-width: 2; stroke-linecap: round; }

/* --- the showing ------------------------------------------------------- */
.b3-car-scene { animation: bs-car-scene var(--bs-car-loop) linear infinite; }

.b3-car-big-move { animation: bs-car-walk var(--bs-car-loop) linear infinite; }

/* Squash and stretch pivot on the feet, which fill-box puts at 50% 100%. */
.b3-car-big-bob {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-bob var(--bs-car-loop) ease-in-out infinite;
}

.b3-car-leg-a { animation: bs-car-leg-a var(--bs-car-loop) linear infinite; }
.b3-car-leg-b { animation: bs-car-leg-b var(--bs-car-loop) linear infinite; }
.b3-car-mouth-flat { animation: bs-car-mouth-flat var(--bs-car-loop) linear infinite; }
.b3-car-machine-drop { animation: bs-car-machine-drop var(--bs-car-loop) linear infinite; }
.b3-car-small-move { animation: bs-car-hop-x var(--bs-car-loop) linear infinite; }
.b3-car-small-hop { animation: bs-car-hop-y var(--bs-car-loop) linear infinite; }
.b3-car-tag-car { animation: bs-car-tag-car var(--bs-car-loop) linear infinite; }
.b3-car-driver { animation: bs-car-driver var(--bs-car-loop) linear infinite; }
.b3-car-drive { animation: bs-car-drive var(--bs-car-loop) linear infinite; }
.b3-car-bounce { animation: bs-car-bounce var(--bs-car-loop) linear infinite; }

@keyframes bs-car-scene {
0% { opacity: 0; transform: translate(0, 0); }
2.3392% { opacity: 1; }
29.2398% { transform: translate(0, 0); }
29.5322% { transform: translate(0, 2.2px); }
29.9415% { transform: translate(0, -1.2px); }
30.4094% { transform: translate(0, .6px); }
30.8772%, 100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes bs-car-walk {
0%, 3.5088% { transform: translateX(0); }
14.0351% { transform: translateX(250px); }
16.0819% { transform: translateX(258px); }
17.5439% { transform: translateX(238px); }
19.883%, 31.5789% { transform: translateX(244px); }
40.9357%, 100% { transform: translateX(0); }
}

@keyframes bs-car-bob {
0%, 2.4561% { transform: translateY(0) scale(1, 1); }
3.0409% { transform: translateY(0) scale(1.04, .95); }
3.5088% { transform: translateY(0) scale(1, 1); }
4.8246% { transform: translateY(-3px) scale(.99, 1.015); }
6.1404% { transform: translateY(0) scale(1.015, .985); }
7.4561% { transform: translateY(-3px) scale(.99, 1.015); }
8.7719% { transform: translateY(0) scale(1.015, .985); }
10.0877% { transform: translateY(-3px) scale(.99, 1.015); }
11.4035% { transform: translateY(0) scale(1.015, .985); }
12.7193% { transform: translateY(-3px) scale(.99, 1.015); }
14.0351%, 20.4678% { transform: translateY(0) scale(1, 1); }
22.807%, 28.9474% { transform: translateY(1px) scale(1.025, .965); }
29.2398% { transform: translateY(0) scale(1, 1); }
29.9415% { transform: translateY(-9px) scale(.96, 1.06); }
30.7602% { transform: translateY(0) scale(1.05, .95); }
31.462% { transform: translateY(0) scale(1, 1); }
32.7485% { transform: translateY(-3px) scale(.99, 1.015); }
33.9181% { transform: translateY(0) scale(1.015, .985); }
35.0877% { transform: translateY(-3px) scale(.99, 1.015); }
36.2573% { transform: translateY(0) scale(1.015, .985); }
37.4269% { transform: translateY(-3px) scale(.99, 1.015); }
38.5965% { transform: translateY(0) scale(1.015, .985); }
39.7661% { transform: translateY(-3px) scale(.99, 1.015); }
40.9357%, 66.0819% { transform: translateY(0) scale(1, 1); }
67.2515% { transform: translateY(-2.5px) scale(.99, 1.015); }
68.4211% { transform: translateY(0) scale(1.01, .99); }
69.5906% { transform: translateY(-2.5px) scale(.99, 1.015); }
70.7602% { transform: translateY(0) scale(1.01, .99); }
71.9298% { transform: translateY(-2.5px) scale(.99, 1.015); }
73.0994% { transform: translateY(0) scale(1.01, .99); }
74.269%, 100% { transform: translateY(0) scale(1, 1); }
}

@keyframes bs-car-leg-a {
0%, 3.5088% { transform: translate(0, 0); }
4.8246% { transform: translate(7px, -2.5px); }
6.1404% { transform: translate(0, 0); }
7.4561% { transform: translate(-7px, 0); }
8.7719% { transform: translate(0, 0); }
10.0877% { transform: translate(7px, -2.5px); }
11.4035% { transform: translate(0, 0); }
12.7193% { transform: translate(-7px, 0); }
14.0351%, 31.5789% { transform: translate(0, 0); }
32.7485% { transform: translate(-7px, -2.5px); }
33.9181% { transform: translate(0, 0); }
35.0877% { transform: translate(7px, 0); }
36.2573% { transform: translate(0, 0); }
37.4269% { transform: translate(-7px, -2.5px); }
38.5965% { transform: translate(0, 0); }
39.7661% { transform: translate(7px, 0); }
40.9357%, 100% { transform: translate(0, 0); }
}

@keyframes bs-car-leg-b {
0%, 3.5088% { transform: translate(0, 0); }
4.8246% { transform: translate(-7px, 0); }
6.1404% { transform: translate(0, 0); }
7.4561% { transform: translate(7px, -2.5px); }
8.7719% { transform: translate(0, 0); }
10.0877% { transform: translate(-7px, 0); }
11.4035% { transform: translate(0, 0); }
12.7193% { transform: translate(7px, -2.5px); }
14.0351%, 31.5789% { transform: translate(0, 0); }
32.7485% { transform: translate(7px, 0); }
33.9181% { transform: translate(0, 0); }
35.0877% { transform: translate(-7px, -2.5px); }
36.2573% { transform: translate(0, 0); }
37.4269% { transform: translate(7px, 0); }
38.5965% { transform: translate(0, 0); }
39.7661% { transform: translate(-7px, -2.5px); }
40.9357%, 100% { transform: translate(0, 0); }
}

@keyframes bs-car-big-lean {
0%, 14.0351% { transform: rotate(0); }
15.7895%, 16.0819% { transform: rotate(12deg); }
17.5439% { transform: rotate(-4deg); }
19.883% { transform: rotate(0); }
22.807%, 31.5789% { transform: rotate(-6deg); }
32.7485%, 100% { transform: rotate(0); }
}

@keyframes bs-car-mouth-flat {
0%, 19.883% { opacity: 1; }
22.807%, 31.5789% { opacity: 0; }
32.7485%, 64.3275% { opacity: 1; }
65.2047%, 90.6433% { opacity: 0; }
91.8129%, 100% { opacity: 1; }
}

@keyframes bs-car-mouth-sad {
0%, 19.883% { opacity: 0; }
22.807%, 31.5789% { opacity: 1; }
32.7485%, 100% { opacity: 0; }
}

@keyframes bs-car-strain {
0%, 14.6199% { opacity: 0; transform: scale(.5); }
15.7895% { opacity: 1; transform: scale(1); }
16.9591% { opacity: .35; transform: scale(.88); }
18.1287% { opacity: 1; transform: scale(1.08); }
19.0058% { opacity: .4; transform: scale(.92); }
19.883%, 100% { opacity: 0; transform: scale(.6); }
}

@keyframes bs-car-toobig {
0%, 16.0819% { opacity: 0; transform: translate(0, 4px) scale(.7); }
16.3743% { opacity: 1; transform: translate(0, 0) scale(1.15); }
16.6667% { opacity: 1; transform: translate(-2px, 0) scale(1); }
16.9591% { opacity: 1; transform: translate(2px, 0) scale(1); }
17.2515% { opacity: 1; transform: translate(-1px, 0) scale(1); }
17.5439%, 24.5614% { opacity: 1; transform: translate(0, 0) scale(1); }
26.9006%, 100% { opacity: 0; transform: translate(0, 4px) scale(.7); }
}

@keyframes bs-car-squash {
0%, 15.7895% { transform: rotate(0) scale(1, 1); }
16.0819% { transform: rotate(-3deg) scale(1.04, .92); }
16.6667% { transform: rotate(1.5deg) scale(.99, 1.02); }
17.2515% { transform: rotate(-1deg) scale(1.01, .99); }
18.1287%, 63.4503% { transform: rotate(0) scale(1, 1); }
63.9181% { transform: rotate(0) scale(1.03, .92); }
64.4444% { transform: rotate(0) scale(.99, 1.03); }
64.9123% { transform: rotate(-2.5deg) scale(1.01, .98); }
66.0819% { transform: rotate(1deg) scale(1, 1); }
66.9591%, 100% { transform: rotate(0) scale(1, 1); }
}

@keyframes bs-car-machine-drop {
0%, 25.731% { transform: translateY(-230px); animation-timing-function: ease-in; }
29.2398% { transform: translateY(0); }
30.117% { transform: translateY(-8px); }
30.9942%, 100% { transform: translateY(0); }
}

@keyframes bs-car-beam {
0%, 40.9357% { transform: translateX(0); opacity: 0; }
41.2281% { transform: translateX(-6px); opacity: 1; }
43.2749% { transform: translateX(-102px); opacity: 1; }
45.3216% { transform: translateX(-6px); opacity: 1; }
47.3684% { transform: translateX(-102px); opacity: 1; }
49.1228% { transform: translateX(-40px); opacity: 1; }
50.2924%, 100% { transform: translateX(0); opacity: 0; }
}

@keyframes bs-car-lamp {
0%, 29% { opacity: .45; }
29.2398% { opacity: 1; }
29.7% { opacity: .45; }
30.117% { opacity: 1; }
30.9942%, 40.9357% { opacity: .45; }
41.7% { opacity: 1; }
42.9% { opacity: .35; }
44.1% { opacity: 1; }
45.3% { opacity: .35; }
46.5% { opacity: 1; }
47.7% { opacity: .35; }
48.9% { opacity: 1; }
50.2924%, 100% { opacity: .45; }
}

@keyframes bs-car-pop {
0%, 50.2924% { transform: translateY(-16px) scale(0); opacity: 0; }
50.5848% { transform: translateY(-14px) scale(.25); opacity: 1; }
52.0468% { transform: translateY(-5px) scale(1.15); opacity: 1; }
52.924% { transform: translateY(0) scale(.94); opacity: 1; }
53.8012%, 60.8187% { transform: translateY(0) scale(1); opacity: 1; }
61.6959% { transform: translateY(0) scale(.8); opacity: 1; }
62.5731% { transform: translateY(0) scale(.35); opacity: 1; }
63.7427%, 100% { transform: translateY(0) scale(0); opacity: 0; }
}

@keyframes bs-car-hop-x {
0%, 53.8012% { transform: translateX(0); }
55.5556% { transform: translateX(29.5px); }
57.3099% { transform: translateX(59px); }
59.0643% { transform: translateX(88.5px); }
60.8187%, 100% { transform: translateX(118px); }
}

@keyframes bs-car-hop-y {
0%, 53.8012% { transform: translateY(0); }
54.6784% { transform: translateY(-10px); }
55.5556% { transform: translateY(0); }
56.4327% { transform: translateY(-10px); }
57.3099% { transform: translateY(0); }
58.1871% { transform: translateY(-10px); }
59.0643% { transform: translateY(0); }
59.9415% { transform: translateY(-10px); }
60.8187% { transform: translateY(0); }
61.6959% { transform: translateY(-22px); }
62.5731% { transform: translateY(-16px); }
63.7427%, 100% { transform: translateY(-10px); }
}

@keyframes bs-car-small-lean {
0%, 53.8012% { transform: rotate(0); }
54.6784% { transform: rotate(6deg); }
55.5556% { transform: rotate(0); }
56.4327% { transform: rotate(6deg); }
57.3099% { transform: rotate(0); }
58.1871% { transform: rotate(6deg); }
59.0643% { transform: rotate(0); }
59.9415% { transform: rotate(6deg); }
60.8187%, 100% { transform: rotate(0); }
}

@keyframes bs-car-tag-hop {
0%, 50.2924% { opacity: 0; }
53.8012%, 60.8187% { opacity: 1; }
63.7427%, 100% { opacity: 0; }
}

@keyframes bs-car-tag-car {
0%, 60.8187% { opacity: 0; }
63.7427%, 100% { opacity: 1; }
}

@keyframes bs-car-driver {
0%, 62.5731% { opacity: 0; }
63.7427%, 100% { opacity: 1; }
}

@keyframes bs-car-drive {
0%, 64.0351% { transform: translateX(0); animation-timing-function: ease-out; }
64.9123% { transform: translateX(-3px); animation-timing-function: ease-in; }
70.7602%, 100% { transform: translateX(440px); }
}

@keyframes bs-car-bounce {
0%, 63.7427% { transform: translateY(0); }
65.4971% { transform: translateY(-2px); }
66.6667% { transform: translateY(0); }
67.2% { transform: translateY(-1.5px); }
67.8363%, 100% { transform: translateY(0); }
}

@keyframes bs-car-wheel {
0%, 64.0351% { transform: rotate(0); }
64.9123% { transform: rotate(300deg); }
70.7602%, 100% { transform: rotate(1500deg); }
}

@keyframes bs-car-speedlines {
0%, 65.2047% { opacity: 0; transform: translateX(-6px); }
66.3743% { opacity: 1; transform: translateX(-10px); }
68.7135% { opacity: 1; transform: translateX(-18px); }
70.1754%, 100% { opacity: 0; transform: translateX(-22px); }
}

@keyframes bs-car-big-look {
0%, 2.924% { transform: translate(0, 0); }
3.8596%, 20.4678% { transform: translate(1.6px, 0); }
21.9298%, 25.731% { transform: translate(.4px, 1.3px); }
26.4327% { transform: translate(-1.2px, -1.5px); }
28.9474% { transform: translate(-1.6px, .2px); }
30.9942%, 40.9357% { transform: translate(-1.6px, 0); }
41.8129%, 49.4152% { transform: translate(1.6px, -.4px); }
50.2924%, 79.5322% { transform: translate(1.8px, 0); }
90.6433%, 100% { transform: translate(0, 0); }
}

@keyframes bs-car-big-blink {
0% { transform: scale(1, 1); }
8.7719% { transform: scale(1, 1); }
9.1228% { transform: scale(1, .12); }
9.5906% { transform: scale(1, 1); }
21.0526% { transform: scale(1, 1); }
22.2222%, 25.731% { transform: scale(1, .7); }
26.3158%, 28.9474% { transform: scale(1.12, 1.12); }
29.5322%, 31.5789% { transform: scale(1.25, 1.25); }
32.7485% { transform: scale(1, 1); }
36.4912% { transform: scale(1, 1); }
36.8421% { transform: scale(1, .12); }
37.3099% { transform: scale(1, 1); }
54.9708% { transform: scale(1, 1); }
55.3216% { transform: scale(1, .12); }
55.7895% { transform: scale(1, 1); }
71.9298% { transform: scale(1, 1); }
72.2807% { transform: scale(1, .12); }
72.7485% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

@keyframes bs-car-arm-back {
0%, 3.5088% { transform: rotate(0); }
4.8246% { transform: rotate(12deg); }
7.4561% { transform: rotate(-12deg); }
10.0877% { transform: rotate(12deg); }
12.7193% { transform: rotate(-12deg); }
14.0351%, 29.2398% { transform: rotate(0); }
29.9415% { transform: rotate(35deg); }
30.9942% { transform: rotate(0); }
32.7485% { transform: rotate(-12deg); }
35.0877% { transform: rotate(12deg); }
37.4269% { transform: rotate(-12deg); }
39.7661% { transform: rotate(12deg); }
40.9357%, 100% { transform: rotate(0); }
}

@keyframes bs-car-arm-wave {
0%, 3.5088% { transform: rotate(0); }
4.8246% { transform: rotate(-12deg); }
7.4561% { transform: rotate(12deg); }
10.0877% { transform: rotate(-12deg); }
12.7193% { transform: rotate(12deg); }
14.0351% { transform: rotate(0); }
15.3216% { transform: rotate(-58deg); }
16.9591% { transform: rotate(-30deg); }
19.2982%, 29.2398% { transform: rotate(0); }
29.9415% { transform: rotate(-35deg); }
30.9942% { transform: rotate(0); }
32.7485% { transform: rotate(12deg); }
35.0877% { transform: rotate(-12deg); }
37.4269% { transform: rotate(12deg); }
39.7661% { transform: rotate(-12deg); }
40.9357%, 65.7895% { transform: rotate(0); }
67.5439% { transform: rotate(-132deg); }
68.7135% { transform: rotate(-108deg); }
69.883% { transform: rotate(-135deg); }
71.0526% { transform: rotate(-108deg); }
72.2222% { transform: rotate(-135deg); }
73.3918% { transform: rotate(-108deg); }
74.5614% { transform: rotate(-135deg); }
75.731%, 79.5322% { transform: rotate(-110deg); }
90.6433%, 100% { transform: rotate(0); }
}

@keyframes bs-car-mouth-happy {
0%, 64.3275% { opacity: 0; }
65.2047%, 90.6433% { opacity: 1; }
91.8129%, 100% { opacity: 0; }
}

@keyframes bs-car-machine-body {
0%, 26.3158% { transform: translateX(0) scale(1, 1); }
28.3626% { transform: translateX(0) scale(.95, 1.07); }
29.2398% { transform: translateX(0) scale(1.12, .84); }
29.9415% { transform: translateX(0) scale(.96, 1.06); }
30.7602% { transform: translateX(0) scale(1.02, .98); }
31.5789%, 41.2281% { transform: translateX(0) scale(1, 1); }
41.8129% { transform: translateX(.8px) scale(1, 1); }
42.3977% { transform: translateX(-.8px) scale(1, 1); }
42.9825% { transform: translateX(.8px) scale(1, 1); }
43.5673% { transform: translateX(-.8px) scale(1, 1); }
44.152% { transform: translateX(.8px) scale(1, 1); }
44.7368% { transform: translateX(-.8px) scale(1, 1); }
45.3216% { transform: translateX(.8px) scale(1, 1); }
45.9064% { transform: translateX(-.8px) scale(1, 1); }
46.4912% { transform: translateX(.8px) scale(1, 1); }
47.076% { transform: translateX(-.8px) scale(1, 1); }
47.6608% { transform: translateX(.8px) scale(1, 1); }
48.2456% { transform: translateX(-.8px) scale(1, 1); }
48.8304% { transform: translateX(.8px) scale(1, 1); }
49.4152% { transform: translateX(-.8px) scale(1, 1); }
49.7076% { transform: translateX(0) scale(1, 1); }
50.2924% { transform: translateX(0) scale(1.04, .96); }
51.1696% { transform: translateX(0) scale(.99, 1.02); }
52.0468%, 100% { transform: translateX(0) scale(1, 1); }
}

@keyframes bs-car-dust {
0%, 29.1228% { opacity: 0; transform: translate(0, 0) scale(.4); }
29.3567% { opacity: .95; transform: translate(0, 0) scale(.6); }
30.4094% { opacity: .8; transform: translate(calc(var(--bs-dust-x) * .6), -5px) scale(1.35); }
33.0409% { opacity: 0; transform: translate(var(--bs-dust-x), -9px) scale(1.8); }
100% { opacity: 0; transform: translate(0, 0) scale(.4); }
}

@keyframes bs-car-bit {
0%, 41.4035% { opacity: 0; transform: translate(var(--bs-bit-x), var(--bs-bit-y)) scale(1); }
41.7544% { opacity: 1; transform: translate(var(--bs-bit-x), var(--bs-bit-y)) scale(1); }
42.6901% { opacity: 1; transform: translate(calc(var(--bs-bit-x) * .5), calc(var(--bs-bit-y) * .5 - 7px)) scale(.85); }
43.6257% { opacity: 1; transform: translate(0, 0) scale(.5); }
43.8596% { opacity: 0; transform: translate(0, 0) scale(.3); }
100% { opacity: 0; transform: translate(var(--bs-bit-x), var(--bs-bit-y)) scale(1); }
}

@keyframes bs-car-burst {
0%, 50% { opacity: 0; transform: scale(.6); }
50.4094% { opacity: 1; transform: scale(.75); }
52.5146% { opacity: 0; transform: scale(1.35); }
100% { opacity: 0; transform: scale(.6); }
}

@keyframes bs-car-small-look {
0%, 53.2164% { transform: translate(0, 0); }
53.9181%, 60.8187% { transform: translate(1.2px, 0); }
61.9883%, 100% { transform: translate(0, 0); }
}

@keyframes bs-car-small-blink {
0% { transform: scale(1, 1); }
52.2807% { transform: scale(1, 1); }
52.6316% { transform: scale(1, .12); }
53.0994% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

@keyframes bs-car-small-arms {
0%, 53.8012% { transform: rotate(0); }
54.6784% { transform: rotate(calc(55deg * var(--bs-arm))); }
55.5556% { transform: rotate(0); }
56.4327% { transform: rotate(calc(55deg * var(--bs-arm))); }
57.3099% { transform: rotate(0); }
58.1871% { transform: rotate(calc(55deg * var(--bs-arm))); }
59.0643% { transform: rotate(0); }
59.9415% { transform: rotate(calc(55deg * var(--bs-arm))); }
60.8187% { transform: rotate(0); }
61.6959% { transform: rotate(calc(80deg * var(--bs-arm))); }
63.7427%, 100% { transform: rotate(0); }
}

@keyframes bs-car-screen-bit {
0%, 29.1228% { opacity: 0; transform: scaleY(var(--bs-bar-from)); }
29.3567% { opacity: 1; }
29.7076% { opacity: .25; }
30.0585% { opacity: 1; }
30.4094% { opacity: .4; }
30.8772%, 41.2281% { opacity: 1; transform: scaleY(var(--bs-bar-from)); }
43.8596% { transform: scaleY(var(--bs-bar-a)); }
46.4912% { transform: scaleY(var(--bs-bar-b)); }
49.1228%, 100% { opacity: 1; transform: scaleY(1); }
}

@keyframes bs-car-vram {
0%, 15.2047% { opacity: 0; }
15.5556% { opacity: 1; }
16.1404% { opacity: .15; }
16.7251% { opacity: 1; }
17.3099% { opacity: .15; }
17.8947% { opacity: 1; }
19.2982%, 61.9883% { opacity: 0; }
62.6901%, 100% { opacity: var(--bs-lit); }
}

@keyframes bs-car-brow {
0%, 2.924% { transform: translateY(0) rotate(0deg); }
4.0936%, 14.0351% { transform: translateY(0) rotate(calc(-6deg * var(--bs-brow))); }
15.3216% { transform: translateY(-3px) rotate(0deg); }
18.1287% { transform: translateY(-2px) rotate(0deg); }
20.7602%, 25.731% { transform: translateY(-.5px) rotate(calc(16deg * var(--bs-brow))); }
26.4327%, 28.9474% { transform: translateY(-3.5px) rotate(0deg); }
29.5322%, 31.5789% { transform: translateY(-4.5px) rotate(0deg); }
33.3333%, 40.9357% { transform: translateY(0) rotate(0deg); }
41.8129%, 49.4152% { transform: translateY(0) rotate(calc(-5deg * var(--bs-brow))); }
50.2924%, 63.7427% { transform: translateY(-1.5px) rotate(0deg); }
64.9123%, 79.5322% { transform: translateY(-2.5px) rotate(0deg); }
90.6433%, 100% { transform: translateY(0) rotate(0deg); }
}

@keyframes bs-car-big-shadow {
0%, 29.2398% { opacity: 1; transform: scale(1); }
29.9415% { opacity: .5; transform: scale(.72); }
30.7602% { opacity: 1; transform: scale(1.06); }
31.462%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes bs-car-small-shadow {
0%, 50.4094% { opacity: 0; transform: scale(.4); }
51.7544%, 53.8012% { opacity: 1; transform: scale(1); }
54.6784% { opacity: .6; transform: scale(.78); }
55.5556% { opacity: 1; transform: scale(1); }
56.4327% { opacity: .6; transform: scale(.78); }
57.3099% { opacity: 1; transform: scale(1); }
58.1871% { opacity: .6; transform: scale(.78); }
59.0643% { opacity: 1; transform: scale(1); }
59.9415% { opacity: .6; transform: scale(.78); }
60.8187% { opacity: 1; transform: scale(1); }
61.6959% { opacity: .35; transform: scale(.55); }
62.8655%, 100% { opacity: 0; transform: scale(.4); }
}

@keyframes bs-car-machine-shadow {
0%, 25.731% { opacity: 0; transform: scale(.3); }
29.2398%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes bs-car-big-antenna {
0%, 2.6316% { transform: rotate(0); }
3.0409% { transform: rotate(-6deg); }
3.5088% { transform: rotate(3deg); }
4.8246% { transform: rotate(-6deg); }
6.1404% { transform: rotate(5deg); }
7.4561% { transform: rotate(-6deg); }
8.7719% { transform: rotate(5deg); }
10.0877% { transform: rotate(-6deg); }
11.4035% { transform: rotate(5deg); }
12.7193% { transform: rotate(-6deg); }
14.0351% { transform: rotate(0); }
15.3216% { transform: rotate(20deg); }
16.3743% { transform: rotate(-15deg); }
17.2515% { transform: rotate(8deg); }
18.1287% { transform: rotate(-4deg); }
19.2982% { transform: rotate(0); }
21.345%, 25.731% { transform: rotate(-30deg); }
26.4327% { transform: rotate(-4deg); }
28.9474%, 29.5322% { transform: rotate(0); }
29.9415% { transform: rotate(16deg); }
30.4094% { transform: rotate(-12deg); }
30.8772% { transform: rotate(8deg); }
31.462% { transform: rotate(-4deg); }
32.1637% { transform: rotate(0); }
32.7485% { transform: rotate(6deg); }
33.9181% { transform: rotate(-5deg); }
35.0877% { transform: rotate(6deg); }
36.2573% { transform: rotate(-5deg); }
37.4269% { transform: rotate(6deg); }
38.5965% { transform: rotate(-5deg); }
39.7661% { transform: rotate(6deg); }
40.9357%, 49.4152% { transform: rotate(0); }
50.2924%, 63.7427% { transform: rotate(7deg); }
64.9123% { transform: rotate(0); }
67.2515% { transform: rotate(11deg); }
68.4211% { transform: rotate(-7deg); }
69.5906% { transform: rotate(11deg); }
70.7602% { transform: rotate(-7deg); }
71.9298% { transform: rotate(11deg); }
73.0994% { transform: rotate(-7deg); }
74.269% { transform: rotate(11deg); }
75.4386%, 100% { transform: rotate(0); }
}

@keyframes bs-car-small-antenna {
0%, 50.2924% { transform: rotate(0); }
50.8772% { transform: rotate(-22deg); }
51.5789% { transform: rotate(15deg); }
52.3392% { transform: rotate(-8deg); }
53.0994% { transform: rotate(4deg); }
53.8012% { transform: rotate(0); }
54.0936% { transform: rotate(-12deg); }
54.9708% { transform: rotate(9deg); }
55.848% { transform: rotate(-12deg); }
56.7251% { transform: rotate(9deg); }
57.6023% { transform: rotate(-12deg); }
58.4795% { transform: rotate(9deg); }
59.3567% { transform: rotate(-12deg); }
60.2339% { transform: rotate(9deg); }
61.1111% { transform: rotate(-16deg); }
61.9883% { transform: rotate(13deg); }
62.8655%, 100% { transform: rotate(0); }
}

@keyframes bs-car-driver-antenna {
0%, 64.0351% { transform: rotate(0); }
64.9123% { transform: rotate(12deg); }
65.7895% { transform: rotate(-28deg); }
67.2515% { transform: rotate(-15deg); }
69.0058% { transform: rotate(-22deg); }
70.7602% { transform: rotate(-18deg); }
78.9474%, 100% { transform: rotate(0); }
}

/* --- justified body copy on Home ------------------------------------------
   Multi-line paragraphs on the homepage fill their measure; the last line stays
   left-aligned. No hyphenation: the user finds broken words unreadable, so the
   spacing absorbs the difference. Headings, labels, lists and blog prose are
   untouched. */
.bs-home .b3-cartoon-caption {
  text-align: justify;
  text-align-last: left;
  text-wrap: wrap;
  hyphens: manual;
  -webkit-hyphens: manual;
}

@media (max-width: 1100px) {
  .b3-hero-grid { gap: 0; }
}

@media (max-width: 900px) {
  .b3-hero { padding-top: 53px; }
  .b3-hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (max-width: 620px) {
  .b3-hero { padding-top: 39px; }
  .b3-hero-grid { grid-template-columns: 1fr; gap: 39px; padding-bottom: 28px; }
  .b3-proof-choice { padding: 10px 14px; text-align: left; font-size: 12px; }
  .b3-proof-choice[aria-pressed="true"]::after { content: '↗'; float: right; }
}

@media (max-width: 900px) {
  .b3-scene-controls .b3-proof-choice { font-size: 10px; padding-inline: 10px; }
}

@media (max-width: 620px) {
  .bs-home .b3-hero-grid { grid-template-columns: 1fr; gap: 35px; }
  .b3-scene-controls .b3-proof-choice { text-align: center; font-size: 10px; padding: 9px 5px; }
  .b3-scene-controls .b3-proof-choice[aria-pressed="true"]::after { content: none; }
}

/* A second rule for this selector on purpose: the narrow-screen
   block above has to lose to it, so the two cannot be merged. */
.bs-home .b3-hero-grid { align-items: center; gap: 54px; }

@media (max-width: 1100px) {
  .bs-home .b3-hero-grid { gap: 30px; }
}

@media (max-width: 900px) {
  .bs-home .b3-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .bs-home .b3-hero-copy { max-width: 650px; }
  .b3-llm-proof { width: 100%; }
}

@media (max-width: 1100px) {
  .b4-weight-comparison { margin-inline: 18px; gap: 20px; grid-template-columns: minmax(0,1fr) 90px; }
}

@media (max-width: 900px) {
  .b4-weight-comparison { margin-inline: 26px; }
}

@media (max-width: 620px) {
  .b4-weight-comparison { margin-inline: 16px; gap: 16px; grid-template-columns: minmax(0,1fr) 78px; }
  .b3-page-network { opacity: .62; }
}

@media (max-width: 900px) {

  .bs-home .b3-hero {
    min-height: calc(100svh - 69px);
  }
}

@media (max-width: 620px) {
  .b3-hero-cartoon { margin-top: 24px; }
  .b3-cartoon-caption { padding: 8px 16px 14px; }

  /* The drawing shrinks with the column, so its labels grow back in user units. */
  .b3-cartoon-label, .b3-cartoon-samespot { font-size: 12px; }

  .b3-cartoon-chip, .b3-cartoon-machine-name { font-size: 12.5px; }
}

/* Inside the details the comparison is a sentence, not a bar chart. */
.b3-score-comparison { display: block; margin: 0; padding: 0; border-bottom: 0; }

@media (max-width: 1100px) {
  .b3-hero-stack .b3-cartoon-caption, .b3-score-row, .b3-score-foot { padding-inline: 18px; }
  .b3-score-row { gap: 14px; }
}

@media (max-width: 900px) {
  .b3-hero-stack { width: 100%; }
  .b3-hero-stack .b3-cartoon-caption, .b3-score-row, .b3-score-foot { padding-inline: 26px; }
  .b3-score-row { gap: 20px; }
}

@media (max-width: 620px) {
  .b3-hero-stack .b3-cartoon-caption, .b3-score-row, .b3-score-foot { padding-inline: 16px; }
  .b3-score-row { gap: 10px; padding-bottom: 12px; }
  .bs-page .b3-score-stat strong { font-size: clamp(21px, 6.4vw, 26px); }
  .b3-score-stat > span { margin-top: 5px; font-size: 10px; }
  .b3-score-source { font-size: 11px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .bs-page .b4-weight-comparison { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .bs-page .b4-weight-comparison { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 1100px) {
  .b5-takeaway { padding-inline: 18px; }
}

@media (max-width: 900px) {
  .b5-takeaway { padding-inline: 26px; }
}

@media (max-width: 620px) {
  .b5-takeaway { padding-inline: 16px; }
}

@media (max-width: 1100px) {
  .b5-compress { padding-inline: 18px; }
}

@media (max-width: 900px) {
  .b5-compress { padding-inline: 26px; }
}

@media (max-width: 620px) {
  .b5-compress { padding-inline: 16px; }
  .b5-compress-head { font-size: 11px; }
  .b3-hero-tabs { gap: 4px; }
  .b3-hero-tab { gap: 6px; padding: 7px 10px 10px; font-size: 10.5px; letter-spacing: .04em; line-height: 1.4; }
  .b3-hero-tab.is-active { padding: 9px 10px 11px; }
}

/* The numbers grow from their left edge when their story beat lights them up. */
.b3-hero-card .b3-score-stat strong { font-size: clamp(32px, 2.9vw, 44px); transform-origin: 0 60%; }

@media (max-width: 620px) {
  .b3-score-row--pair { gap: 12px; }
  .b3-hero-card .b3-score-stat strong { font-size: clamp(24px, 7vw, 30px); }

  /* The drawing shrinks with the column, so its labels grow back in user units. */
  .b3-car-callout { font-size: 12px; }
}

/* ==========================================================================
   HOME SECTIONS
   --------------------------------------------------------------------------
   The rest of the homepage, top to bottom: the kicker, the section headings,
   the proof band, the image workbench, the demos, the people and the
   releases.
   ========================================================================== */

.b3-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 27px;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .13em;
}

/* The same 22px accent rule as .eyebrow on the other pages, so every section
   label on the site opens the same way. It draws from its left end. */
.b3-kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--bs-accent);
  transform-origin: 0 50%;
}

/* A revealed block's kicker rule draws in just after the block starts to rise. */
.js-reveal .reveal.is-in .b3-kicker::before {
  animation: bs-rule-draw 600ms var(--bs-ease-out-expo) calc(var(--reveal-i, 0) * var(--bs-stagger) + 160ms) backwards;
}

@keyframes bs-rule-draw {
from { transform: scaleX(0); }
}


.b3-display {
  margin: 0;
  font-size: clamp(42px, 4.6vw, 69px);
  font-weight: 500;
  line-height: 1.075;
  letter-spacing: -.064em;
}

.b3-intro {
  max-width: 440px;
  margin: 28px 0 30px;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -.012em;
}

.b3-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }

.b3-credentials {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid #30362f;
  padding: 28px 0 35px;
}

.b3-credential-origin { margin: 0; font-size: 11px; line-height: 1.7; }
.b3-credential-origin strong { font-weight: 400; }
.b3-backers { display: flex; align-items: center; gap: 37px; }

.b3-small-label {
  font-family: var(--bs-font-mono);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .09em;
}

.b3-backers img {
  width: 153px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
  display: block;
}

.b3-utest { display: flex; align-items: center; }

/* The UTEST mark is a dark logo file; invert it for the black hero. */
.b3-backers .b3-utest img {
  width: auto;
  height: 32px;
  max-height: none;
  filter: brightness(0) invert(1);
}

.b3-section { padding: 88px 0; }

.b3-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  margin-bottom: 44px;
}

.b3-heading {
  margin: 0;
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.05em;
}

.b3-section-lead { max-width: 365px; margin: 0 0 3px; font-size: 15px; line-height: 1.7; }
.b3-body { margin: 0; font-size: 14px; line-height: 1.8; }

/* The document already reserves space for the sticky header at anchors. */
/* Measured proof remains within the same dark brand palette. */
.b3-proof { padding: 76px 0 37px; scroll-margin-top: 0; background: #0d1016; color: var(--bs-text-2); }

.b3-proof :focus-visible { outline: 2px solid #8a380b; outline-offset: 4px; outline-color: #ff8c3a; }
.b3-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }

/* Siblings that scroll in together arrive one after another. */
.b3-method-grid > .reveal:nth-child(2), .b3-offer-summary.reveal { --reveal-i: 1; }
.b3-method-grid > .reveal:nth-child(3) { --reveal-i: 2; }

/* --icon-delay starts a step icon's animation just after its step starts to rise. */
.b3-method-step {
  --icon-delay: calc(var(--reveal-i, 0) * var(--bs-stagger) + 160ms);
  min-width: 0;
  padding-top: 26px;
  border-top: 1px solid #3c4637;
}

.b3-step-icon {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 56px;
  margin-bottom: 37px;
}

.b3-bracket { --pinch: 14px; font-family: var(--bs-font-mono); font-size: 43px; font-weight: 400; }
.b3-bracket:last-child { --pinch: -14px; }
.b3-input-lines { display: flex; flex-direction: column; gap: 5px; width: 42px; }
.b3-input-lines i { display: block; height: 4px; background: #a5adbb; }
.b3-input-lines i:nth-child(2) { --type-i: 1; width: 64%; }
.b3-input-lines i:nth-child(3) { --type-i: 2; width: 82%; }
.b3-bits { gap: 4px; align-items: flex-end; padding-block: 4px; }
.b3-bits i { width: 7px; height: 36px; }
.b3-bits i:nth-child(3n) { height: 19px; opacity: .65; }
.b3-bits i:nth-child(3n + 1) { height: 48px; opacity: .4; }
.b3-output-icon { font-size: 60px; font-weight: 300; line-height: 1; }

/* --- step icons: each acts out its step once, as the step arrives ---------
   01 DEFINE: the brackets open from a pinch and the three inputs type in.
   02 LEARN: all eight bars start at the 36px of equal precision, then each
   takes its own route to the height ShapeLearn gave it, overshooting once or
   twice. A bar scales from its foot, so every stop is a height over the bar's
   own resting height: the routes below read in pixels.
   03 EVALUATE: the arrow shoots in from the lower left and overshoots a touch.
   Every animation ends on the resting icon above. */
.js-reveal .b3-method-step.is-in .b3-bracket {
  animation: bs-bracket-open 720ms var(--bs-ease-out-expo) var(--icon-delay) backwards;
}

.js-reveal .b3-method-step.is-in .b3-input-lines i {
  transform-origin: 0 50%;
  animation: bs-input-type 460ms var(--bs-ease-out-expo) calc(var(--icon-delay) + 200ms + var(--type-i, 0) * 120ms) backwards;
}

.js-reveal .b3-method-step.is-in .b3-bits i {
  transform-origin: 50% 100%;
  animation: bs-bit-learn 1120ms var(--bs-ease-in-out) calc(var(--icon-delay) + var(--bit-i, 0) * 40ms) backwards;
}

.b3-bits i:nth-child(1) { --bit-i: 0; --bit-from: calc(36 / 48); --bit-a: calc(54 / 48); --bit-b: calc(45 / 48); --bit-c: calc(49 / 48); }
.b3-bits i:nth-child(2) { --bit-i: 1; --bit-from: 1; --bit-a: calc(44 / 36); --bit-b: calc(32 / 36); --bit-c: calc(37 / 36); }
.b3-bits i:nth-child(3) { --bit-i: 2; --bit-from: calc(36 / 19); --bit-a: calc(15 / 19); --bit-b: calc(22 / 19); --bit-c: calc(18 / 19); }
.b3-bits i:nth-child(4) { --bit-i: 3; --bit-from: calc(36 / 48); --bit-a: calc(52 / 48); --bit-b: calc(46 / 48); --bit-c: 1; }
.b3-bits i:nth-child(5) { --bit-i: 4; --bit-from: 1; --bit-a: calc(29 / 36); --bit-b: calc(40 / 36); --bit-c: calc(35 / 36); }
.b3-bits i:nth-child(6) { --bit-i: 5; --bit-from: calc(36 / 19); --bit-a: calc(14 / 19); --bit-b: calc(21 / 19); --bit-c: 1; }
.b3-bits i:nth-child(7) { --bit-i: 6; --bit-from: calc(36 / 48); --bit-a: calc(55 / 48); --bit-b: calc(44 / 48); --bit-c: calc(50 / 48); }
.b3-bits i:nth-child(8) { --bit-i: 7; --bit-from: 1; --bit-a: calc(45 / 36); --bit-b: calc(33 / 36); --bit-c: 1; }

.js-reveal .b3-method-step.is-in .b3-output-icon {
  animation: bs-arrow-shoot 760ms var(--bs-ease-out-back) calc(var(--icon-delay) + 100ms) backwards;
}

@keyframes bs-bracket-open {
from { translate: var(--pinch, 0) 0; }
}

@keyframes bs-input-type {
from { scale: 0 1; }
}

@keyframes bs-bit-learn {
0%, 12% { scale: 1 var(--bit-from, 1); }
38% { scale: 1 var(--bit-a, 1); }
62% { scale: 1 var(--bit-b, 1); }
82% { scale: 1 var(--bit-c, 1); }
}

@keyframes bs-arrow-shoot {
from { opacity: 0; translate: -20px 20px; }
}

.b3-method-step .b3-small-label { margin: 0 0 12px; }

.b3-step-title {
  margin: 0 0 13px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.b3-offer { border-block: 1px solid #303c29; }
.b3-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 115px; }
.b3-offer-intro .b3-body { max-width: 340px; margin: 28px 0; }
.b3-offer-list { border-top: 1px solid #3d4b33; }
.b3-offer-item { padding: 28px 0; border-bottom: 1px solid #3d4b33; }
.b3-offer-item .b3-small-label { display: block; margin-bottom: 10px; }
.b3-offer-item .b3-body { max-width: 410px; font-size: 13px; }
.b3-offer-item .b3-text-link { margin-top: 14px; font-size: 12px; }
.b3-research { border-top: 1px solid #303c29; padding-top: 62px; padding-bottom: 72px; }
.b3-research .b3-section-heading { margin-bottom: 36px; }

/* The three newest releases, side by side. Each card is one link: thumbnail,
   date and kind, title, one sentence, and the invitation. */
/* --- latest releases: the method grid, reused ------------------------------
   Each release is a .b3-method-step link, so section 05 shares section 03's
   rhythm: hairline, a picture where the step icon sits (the full column
   width, 16:9, instead of the 56px icon slot), label, title, body and a read
   link. The picture is the post's own thumbnail, never a copy. */
/* A flex column, so the read links of the three columns sit on one line
   whatever the copy length above them. */
.b3-release-item { display: flex; flex-direction: column; padding-top: 18px; color: inherit; text-decoration: none; }

/* The frame carries the hairline and the rounded corners, so the picture can
   zoom inside it on hover while the frame stays put. Its padding box is the
   exact box the picture used to fill inside its own border. Isolation keeps
   the rounded clip on the zooming picture in engines that composite it apart. */
.b3-release-thumb {
  position: relative;
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--bs-line);
  border-radius: 4px;
}

.b3-release-item:hover { text-decoration: none; }
.b3-release-item:hover .b3-step-title { color: #ff8c3a; }
.b3-release-item:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 4px; }
.b3-release-item .b3-small-label { display: block; margin-bottom: 8px; }
.b3-release-item .b3-step-title { display: block; margin-bottom: 8px; }
/* .bs-page .b3-body sets 16px later in the sheet, so this one carries the page
   class to win. */
.bs-page .b3-release-item .b3-body { display: block; margin-bottom: 10px; font-size: 13px; line-height: 1.7; }

.b3-release-thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 600ms var(--bs-ease-out-expo);
}

.b3-release-item:is(:hover, :focus-visible) .b3-release-thumb img { scale: 1.04; }

.b3-release-more {
  display: inline-flex;
  align-items: baseline;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  color: #ff8c3a;
  font-size: 13px;
  font-weight: 500;
}

.b3-closing { padding: 66px 0; border-top: 1px solid #3a4930; }
.b3-closing-inner { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.b3-closing .b3-kicker { margin-bottom: 15px; }
.b3-closing .b3-heading { font-size: clamp(30px, 3.2vw, 44px); }
.b3-closing .b3-body { margin-top: 20px; font-size: 13px; }

/* Homepage depth: one continuous field, revealed by the black sections. */
.bs-home { background: #000000; position: relative; isolation: isolate; }

.b3-kicker,
.b3-display-muted,
.b3-intro,
.b3-credential-origin,
.b3-small-label,
.b3-muted,
.b3-body {
  color: var(--bs-text-2);
}

.b3-display,
.b3-heading,
.b3-credential-origin strong,
.b3-step-title {
  color: #ffffff;
}

.b3-orange, .b3-step-icon { color: #f06400; }

.b3-credentials,
.b3-method-step,
.b3-offer-list,
.b3-offer-item,
.b3-research {
  border-color: var(--bs-line-strong);
}

.b3-offer, .b3-closing {
  background: #0d1016;
  border-color: var(--bs-line);
}

.b3-input-lines i:nth-child(2),
.b3-bits i,
.b3-bits i:nth-child(3n),
.b3-bits i:nth-child(3n + 1) {
  background: #f06400;
}

.b3-proof .b3-kicker { color: var(--bs-text-2); }
.b3-proof .b3-heading { color: #ffffff; }
.bs-home .b3-display { font-size: clamp(48px, 5.4vw, 80px); line-height: 1.04; }
.bs-home .b3-display-muted { color: var(--bs-accent); }
.bs-home .b3-intro { max-width: 410px; margin-block: 28px; }
.b3-visual-proof .b3-heading { font-size: clamp(36px, 3.9vw, 58px); }
.b3-image-workbench { overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.18); }

.b3-image-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 22px 26px;
}

.b3-image-scene-title { margin: 7px 0 0; color: #fff; font-size: 18px; font-weight: 500; }
.b3-scene-controls { display: flex; gap: 8px; }
.b3-visual-proof [data-image-controls][hidden] { display: none; }

.b3-image-viewer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  --image-split: 50%;
  background: #000;
}

.b3-image-pane { position: relative; min-width: 0; margin: 0; }

.b3-image-pane img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.b3-image-pane figcaption {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 15px;
  background: rgba(0,0,0,.87);
  border-left: 2px solid #a5adbb;
  color: #c7ced9;
  font-size: 10px;
}

.b3-image-pane figcaption strong {
  color: #fff;
  font-family: var(--bs-font-mono);
  font-size: 19px;
  font-weight: 400;
}

.b3-image-pane--optimized figcaption { left: auto; right: 22px; border-left-color: var(--bs-accent); }
.b3-image-pane--optimized figcaption strong { color: var(--bs-accent); }

/* Image comparison pointer gestures retain vertical touch scrolling and pinch zoom. */
.b3-image-viewer.is-comparing {
  display: block;
  aspect-ratio: 2 / 1;
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom;
}

.b3-image-viewer.is-comparing .b3-image-pane {
  position: absolute;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
}

.b3-image-viewer.is-comparing .b3-image-pane img {
  width: 100%;
  height: 100%;
  object-position: center;
  -webkit-user-drag: none;
}

.b3-image-viewer.is-comparing .b3-image-pane--optimized { clip-path: inset(0 0 0 var(--image-split)); }

.b3-image-divider {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--image-split);
  width: 2px;
  transform: translateX(-1px);
  background: #fff;
  pointer-events: none;
}

.b3-image-viewer.is-comparing .b3-image-divider { display: block; }

.b3-image-divider > span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 22px;
  box-shadow: 0 1px 12px rgba(0,0,0,.3);
}

.b3-image-slider { padding: 19px 26px 14px; }

.b3-image-slider label {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
  color: #fff;
  font-family: var(--bs-font-mono);
  font-size: 10px;
}

.b3-image-slider label span { color: var(--bs-text-2); font-family: var(--bs-font-sans); }

.b3-image-slider input {
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  accent-color: var(--bs-accent);
  cursor: ew-resize;
}

.b3-image-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 17px 26px 24px;
}

.b3-image-detail p {
  max-width: 640px;
  min-height: 40px;
  margin: 0;
  color: var(--bs-text-2);
  font-size: 12px;
  line-height: 1.7;
}

.b3-image-detail .b3-text-link { flex-shrink: 0; font-size: 11px; }
.b3-image-method { margin-top: 24px; color: var(--bs-text-2); font-size: 12px; }

.b3-image-method summary {
  width: fit-content;
  padding: 8px 0;
  cursor: pointer;
  color: #e9edf4;
  font-size: 12px;
}

.b3-image-method > div { max-width: 860px; padding: 5px 0 15px; line-height: 1.8; }
.b3-image-method p { margin: 10px 0; }
.b3-image-method .b3-text-link { margin-top: 10px; }
.b3-visual-proof .b3-section-lead strong { color: #fff; font-weight: 500; }
.bs-page .b3-body a { text-decoration: underline; text-underline-offset: 3px; }
.bs-home .b3-proof, .bs-home .b3-offer, .bs-home .b3-closing { background-color: #0d1016; }
.bs-page .b3-credential-origin { color: #b8c0cc; font-size: 14px; line-height: 1.6; }
.bs-page .b3-image-method { font-size: 14px; line-height: 1.7; }
.bs-page .b3-image-method summary { color: #c7ced9; padding-block: 14px; font-size: 14px; }
.bs-page .b3-image-method > div { color: #b8c0cc; }

/* Keep the image task prominent while the selected scene supplies the visual. */
.bs-page .b3-image-toolbar { flex-wrap: wrap; }

.bs-page .b3-image-scene-title { margin: 0; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; }
.bs-page .b3-scene-controls { flex-wrap: wrap; }
.bs-page .b3-image-pane figcaption { font-size: 14px; }
.bs-page .b3-image-slider label, .bs-page .b3-image-slider label > span { font-size: 14px; }
.bs-page .b3-image-detail { justify-content: flex-end; }
.bs-page .b3-offer-grid { align-items: center; }
.bs-page .b3-offer-summary { display: grid; justify-items: start; gap: 26px; }
.bs-page .b3-offer-summary .b3-body { max-width: 38ch; font-size: 18px; }

/* Secondary labels retain the same readable minimum in compact layouts. */
.bs-page .b3-section-lead { font-size: 16px; }

.b5-code-recording { min-width: 0; margin: 0; }

.b5-code-recording video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--bs-line-strong);
  border-radius: 5px;
}

.b5-code-recording figcaption {
  margin-top: 12px;
  color: var(--bs-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.b5-image-heading { margin-bottom: 24px; }
.b5-image-heading .b3-body { max-width: 680px; }

/* Recording controls follow the shared orange, dark surface, and rounded actions. */
.b5-video-player {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bs-line-strong);
  border-radius: 16px;
  background: var(--bs-surface);
}

.b5-code-recording .b5-video-player video { border: 0; border-radius: 0; }
.b5-video-controls { padding: 4px 16px 14px; border-top: 1px solid var(--bs-line-strong); }
.b5-video-actions { display: flex; align-items: center; gap: 12px; }
.b5-video-tools { display: flex; gap: 8px; margin-left: auto; }

.b5-video-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: transparent;
  color: var(--bs-text);
  font: 600 14px/1 var(--bs-font-mono);
  cursor: pointer;
}

.b5-video-button--play, .b5-video-button[aria-pressed="true"] {
  background: var(--bs-accent);
  border-color: var(--bs-accent);
  color: var(--bs-text-on-accent);
}

.b5-video-button:hover { border-color: var(--bs-accent-bright); }
.b5-video-button svg { width: 22px; height: 22px; flex: 0 0 22px; }

.b5-video-time {
  color: var(--bs-text-2);
  font: 14px/1.4 var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.b5-video-start {
  position: absolute;
  top: calc((100% - 92px) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 18px;
  border: 1px solid var(--bs-accent);
  border-radius: 50%;
  background: var(--bs-accent);
  color: var(--bs-text-on-accent);
  cursor: pointer;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .3);
  transition: transform var(--bs-dur-micro) var(--bs-ease-out-expo), background-color var(--bs-dur-micro) var(--bs-ease-out-expo);
}

.b5-video-start svg { width: 30px; height: 30px; }

/* The scale follows the centring translate, so the button grows about its centre. */
.b5-video-start:hover { background: var(--bs-accent-bright); transform: translate(-50%, -50%) scale(1.06); }
.b5-video-player .b5-video-pause-icon { display: none; }
.b5-video-player[data-playing="true"] .b5-video-pause-icon { display: block; }
.b5-video-player[data-playing="true"] .b5-video-play-icon { display: none; }

.b5-video-seek {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  accent-color: var(--bs-accent);
}

.b5-video-seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--bs-accent) 0 var(--video-progress, 0%), #626a78 var(--video-progress, 0%) 100%);
}

.b5-video-seek::-moz-range-track { height: 5px; border-radius: 999px; background: #626a78; }
.b5-video-seek::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--bs-accent); }

.b5-video-seek::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  border: 2px solid var(--bs-accent);
  border-radius: 50%;
  background: var(--bs-accent);
}

.b5-video-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--bs-accent);
  border-radius: 50%;
  background: var(--bs-accent);
}

.b5-video-button:focus-visible, .b5-video-start:focus-visible, .b5-video-seek:focus-visible {
  outline: 2px solid var(--bs-accent-bright);
  outline-offset: 4px;
}

.b5-video-status {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--bs-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.b5-video-status a { color: var(--bs-accent-bright); }
.b5-video-player [hidden] { display: none; }

.b5-video-player:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #000;
}

.b5-video-player:fullscreen video {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

.b5-video-player:fullscreen .b5-video-controls {
  flex: 0 0 auto;
  width: min(100%, 1200px);
  margin-inline: auto;
}

.b5-code-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }

/* --- section 02 demo cards ------------------------------------------------
   The recorded coding demo and the published image pair sit in two matching
   cards: copy on the left, media on the right, one border and one surface, so
   the section reads as two exhibits rather than loose blocks. */
.b5-demo-card {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr);
  gap: 40px;
  align-items: center;
  padding: 32px;
  margin: 0 0 24px;
  border: 1px solid var(--bs-line-strong);
  background: var(--bs-surface);
}

.b5-demo-copy { display: grid; justify-items: start; gap: 18px; }
.b5-demo-copy .b3-kicker { margin: 0; }

/* The two demo labels sit inside section 02, which already opens with the
   accent rule, so they carry none of their own. */
.b5-demo-copy .b3-kicker::before { content: none; }
.b5-demo-copy .b3-body { max-width: 440px; }
.b5-demo-card .b5-image-heading { margin-bottom: 0; }
.b5-demo-media { min-width: 0; }
.b5-demo-card .b5-video-player { border-radius: 6px; }
.b5-demo-card .b5-code-recording figcaption { font-size: 12.5px; }
.b5-demo-card .b3-image-workbench { border-color: var(--bs-line); }
.b5-demo-card .b3-image-toolbar { padding: 16px 20px; }
.b5-demo-card .b3-image-scene-title { margin: 0; font-size: 15px; }
.b5-demo-card .b3-image-slider { padding: 14px 20px 10px; }
.b5-demo-card .b3-image-detail { padding: 12px 20px 18px; }
.b5-demo-card .b3-image-method { margin-top: 12px; }

.bs-home .b3-intro,
.bs-home .b3-section-lead,
.bs-home .b3-body,
.bs-home .b5-code-recording figcaption {
  text-align: justify;
  text-align-last: left;
  text-wrap: wrap;
  hyphens: manual;
  -webkit-hyphens: manual;
}

@media (max-width: 1100px) {
  .b3-display { font-size: clamp(40px, 4.9vw, 60px); }
  .b3-actions { gap: 18px; }
  .b3-intro { font-size: 16px; max-width: 365px; }
  .b3-offer-grid { gap: 70px; }
  .b3-backers { gap: 22px; }
}

@media (max-width: 900px) {
  .b3-display { font-size: clamp(36px, 5vw, 47px); }
  .b3-intro { margin-top: 22px; font-size: 15px; }
  .b3-actions { gap: 17px; align-items: flex-start; flex-direction: column; }
  .b3-credentials { align-items: flex-start; }
  .b3-backers { flex-wrap: wrap; justify-content: flex-end; gap: 15px; }
  .b3-backers > .b3-small-label { width: 100%; text-align: right; }
  .b3-backers img { width: 132px; }
  .b3-section { padding-block: 67px; }
  .b3-section-heading { gap: 30px; }
  .b3-section-lead { max-width: 280px; font-size: 13px; }
  .b3-method-grid { gap: 25px; }
  .b3-method-step .b3-body { font-size: 12px; }
  .b3-step-title { font-size: 18px; }
  .b3-offer-grid { gap: 40px; }
}

@media (max-width: 620px) {
  .b3-kicker { font-size: 9px; margin-bottom: 22px; }
  .b3-display { font-size: clamp(35px, 8.8vw, 54px); letter-spacing: -.058em; }
  .b3-intro { max-width: 420px; margin: 23px 0; font-size: 15px; }
  .b3-actions { flex-direction: row; align-items: center; gap: 17px; }
  .b3-actions .b3-button { font-size: 12px; gap: 20px; padding: 13px 15px; }
  .b3-actions .b3-text-link { font-size: 11px; gap: 9px; }
  .b3-credentials { padding-block: 24px; flex-direction: column; gap: 22px; }
  .b3-credential-origin { font-size: 10px; }
  .b3-backers { width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 23px; }
  .b3-backers > .b3-small-label { width: auto; text-align: left; font-size: 8px; }
  .b3-backers img { width: 127px; }
  .b3-backers .b3-utest img { height: 26px; }
  .b3-section { padding-block: 52px; }

  .b3-section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
    margin-bottom: 32px;
  }

  .b3-heading { font-size: 32px; letter-spacing: -.045em; }
  .b3-section-lead { max-width: 100%; font-size: 13px; }
  .b3-proof { padding: 49px 0 28px; }
  .b3-method-grid { grid-template-columns: 1fr; gap: 30px; }

  .b3-method-step {
    display: grid;
    grid-template-columns: 78px 1fr;
    column-gap: 20px;
    padding-top: 24px;
  }

  .b3-step-icon { grid-column: 1; grid-row: 1 / 4; margin: 0; }

  .b3-method-step .b3-small-label, .b3-method-step .b3-step-title, .b3-method-step .b3-body {
    grid-column: 2;
  }

  .b3-method-step .b3-small-label { font-size: 8px; margin-bottom: 10px; }
  .b3-method-step .b3-body { font-size: 12px; }
  .b3-method-step .b3-step-title { font-size: 17px; }
  .b3-offer-grid { grid-template-columns: 1fr; gap: 34px; }
  .b3-offer-intro .b3-body { font-size: 13px; }
  /* The picture keeps the column width on phones too, so the item stays a
     stack rather than the icon-beside-copy row the method steps use. */
  .b3-release-item { display: block; padding-top: 18px; }
  .b3-release-thumb { margin: 0 0 14px; }
  .b3-closing { padding-block: 47px; }
  .b3-closing-inner { align-items: flex-start; flex-direction: column; gap: 27px; }
  .b3-closing .b3-body { font-size: 12px; }
  .b3-closing .b3-heading { font-size: 31px; }
}

.b3-visual-proof { padding-bottom: 62px; }

@media (max-width: 1100px) {
  .bs-home .b3-display { font-size: clamp(42px,5.3vw,64px); }
  .b3-image-detail { align-items: flex-start; }
}

@media (max-width: 900px) {
  .bs-home .b3-intro { font-size: 15px; max-width: 520px; }
  .b3-image-toolbar { gap: 15px; padding-inline: 18px; }
  .b3-scene-controls { gap: 5px; }
  .b3-image-detail { flex-direction: column; gap: 14px; }
}

@media (max-width: 620px) {
  .bs-home .b3-intro { margin-block: 23px; }
  .b3-visual-proof .b3-heading { font-size: 40px; }
  .b3-image-toolbar { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 15px; }
  .b3-scene-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
  .b3-image-viewer { grid-template-columns: 1fr; }
  .b3-image-viewer.is-comparing { aspect-ratio: 1; }
  .b3-image-pane figcaption { top: 10px; left: 10px; padding: 8px 9px; font-size: 8px; }
  .b3-image-pane figcaption strong { font-size: 14px; }
  .b3-image-pane--optimized figcaption { left: auto; right: 10px; }
  .b3-image-divider > span { width: 31px; height: 31px; font-size: 18px; }
  .b3-image-slider { padding-inline: 15px; }
  .b3-image-slider label { font-size: 8px; gap: 6px; }
  .b3-image-slider label span { font-size: 9px; }
  .b3-image-detail { padding: 10px 15px 20px; }
  .b3-image-detail p { font-size: 11px; }
  .b3-image-method { font-size: 11px; }
}

@media (max-width: 900px) {
  .bs-home .b3-display { font-size: 66px; }
}

@media (max-width: 620px) {
  .bs-home .b3-display { font-size: clamp(42px,12vw,70px); }
  .bs-page .b3-image-slider label { flex-wrap: wrap; gap: 8px; }
  .bs-page .b3-image-slider label > span { order: 1; width: 100%; text-align: center; }
  .bs-page .b3-image-pane figcaption { top: 12px; padding: 8px 10px; font-size: 14px; }
  .bs-page .b3-offer-summary .b3-body { font-size: 16px; }
  .b5-video-controls { padding-inline: 12px; }
  .b5-video-actions { gap: 8px; }
  .b5-video-tools { gap: 4px; }
}

.b5-demo-copy .b3-heading { font-size: clamp(26px, 2.6vw, 36px); }

@media (max-width: 1000px) {
  .b5-demo-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .b5-demo-copy .b3-body { max-width: 620px; }
}

@media (max-width: 620px) {
  .b5-demo-card { padding: 18px 16px; margin-bottom: 16px; }
}

/* ==========================================================================
   TECHNOLOGY PAGE
   --------------------------------------------------------------------------
   /technology/ and the release summary block that its articles reuse.
   ========================================================================== */

/* Technology explanation and concise entry points into flagship articles. */
.b3-tech-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 38px;
  margin-top: 45px;
}

.b3-tech-step { min-width: 0; padding-top: 24px; border-top: 1px solid #41454e; }
.b3-tech-step .card-title { font-size: 20px; }
.b3-tech-step .card-body { margin-top: 18px; color: #a5adbb; }

.b3-release-summary {
  margin: 0 0 32px;
  padding: 24px 28px;
  border: 1px solid #353a44;
  border-top: 2px solid #f06400;
  border-radius: 3px;
  background: #0d1016;
  font-family: var(--bs-font-sans);
}

.b3-release-summary .b3-small-label { color: #ff8c3a; margin: 0 0 10px; font-size: 10px; }

.b3-release-summary h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 500;
}

.b3-release-summary p { color: #c7ced9; margin: 10px 0; font-size: 15px; line-height: 1.75; }
.b3-release-summary strong { color: #fff; }
.b3-release-summary .b3-release-setup { font-size: 12px; color: #a5adbb; }

.b3-release-summary a {
  display: inline-block;
  margin-top: 10px;
  color: #ff8c3a;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* a visual method and a compact path to the evidence. */
.b4-technology .lead, .b4-technology .b3-body { text-align: left; text-wrap: pretty; }

.b4-tech-intro {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  align-items: center;
  gap: 70px;
}

.b4-tech-intro .hero-title { font-size: clamp(42px,5vw,70px); }
.b4-tech-intro .lead { max-width: 520px; font-size: 18px; }
.b4-precision-figure { margin: 0; padding: 28px 0 0; border-top: 1px solid #41454e; }
.b4-precision-figure .b3-small-label { color: #f06400; }

.b4-precision-diagram {
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr);
  align-items: center;
  gap: 15px;
  margin: 32px 0 24px;
}

.b4-precision-label {
  display: block;
  margin-bottom: 20px;
  font-size: 12px;
  font-family: var(--bs-font-mono);
  color: #a5adbb;
}

.b4-precision-rows { display: grid; gap: 9px; }

.b4-precision-rows i {
  display: block;
  height: 17px;
  background: repeating-linear-gradient(90deg,#626a78 0,#626a78 10px,transparent 10px,transparent 13px);
}

.b4-precision-rows--learned i {
  background: repeating-linear-gradient(90deg,#f06400 0,#f06400 10px,transparent 10px,transparent 13px);
}

.b4-precision-rows--learned i:nth-child(1) { width: 74%; }
.b4-precision-rows--learned i:nth-child(2) { width: 38%; }
.b4-precision-rows--learned i:nth-child(3) { width: 55%; }
.b4-precision-rows--learned i:nth-child(4) { width: 87%; }
.b4-precision-rows--learned i:nth-child(5) { width: 38%; }
.b4-precision-rows--learned i:nth-child(6) { width: 64%; }
.b4-precision-arrow { color: #f06400; font-size: 26px; text-align: center; }
.b4-precision-caption { margin: 0 0 16px; font-size: 14px; color: #fff; }
.b4-precision-caption span { color: #a5adbb; font-size: 12px; }
.b4-technology .b3-tech-process { margin-top: 64px; }
.b4-technology .b3-tech-step .card-title { margin-top: 14px; font-size: 19px; }
.b4-technology .b3-tech-step .card-body { margin-top: 12px; font-size: 15px; }

.b4-tech-comparison {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 80px;
}

.b4-tech-stat {
  margin: 4px 0;
  color: #f06400;
  font-family: var(--bs-font-mono);
  font-size: clamp(38px,5vw,58px);
  font-weight: 500;
  line-height: 1.1;
}

.b4-tech-stat span {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-family: var(--bs-font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.b4-tech-chart { margin: 0; }
.b4-tech-chart .size-bars-caption { margin-top: 22px; }
.b4-tech-chart .size-bars-caption a { text-decoration: underline; text-underline-offset: 3px; }

.b4-tech-mtp {
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(0,1.45fr) auto;
  gap: 30px;
  align-items: start;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid #41454e;
}

.b4-tech-mtp .card-title { font-size: 20px; }
.b4-tech-mtp .b3-body { font-size: 14px; }
.b4-tech-mtp .b3-text-link { font-size: 13px; white-space: nowrap; }
.b4-tech-deployment { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 80px; }
.b4-runtime-list { display: grid; gap: 30px; }
.b4-runtime-list article { padding-top: 22px; border-top: 1px solid #41454e; }
.b4-runtime-list .card-title { font-size: 20px; }
.b4-runtime-list .b3-body { margin: 12px 0 14px; }

.b4-tech-direction {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 80px;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid #41454e;
}

.b4-tech-direction .card-title { max-width: 340px; font-size: 22px; }
.b4-tech-research { margin-top: 40px; padding-top: 24px; border-top: 1px solid #41454e; }
.b4-tech-research .b3-small-label { margin: 0 0 10px; color: #a5adbb; }
.b4-tech-research .note { margin-bottom: 10px; }
.b4-research-links { display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 13px; }
.b4-research-links a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.b4-technology .cta-band { align-items: center; }

/* 2026-09-15: articles use the full article width again, as on the original
   blog. The reading-measure caps and the reserved contents rail are lifted;
   the floating contents stays on the right as before, over the page margin. */
#blog-content .blog-body > .b3-release-summary { margin-inline: auto; width: auto; max-width: none; }

.bs-page .b4-precision-figure .b3-small-label { color: #ff8c3a; }

.bs-page .b4-research-links,
.bs-page .b4-precision-label,
.bs-page .b4-precision-caption > span {
  font-size: 14px;
  line-height: 1.6;
}

/* Chart labels stay readable as the plot adapts to narrower columns. */
.b4-score-chart { display: grid; gap: 22px; margin-bottom: 20px; }

.b4-score-baseline { margin: 0; color: var(--bs-text-2); font-size: 14px; text-align: right; }

.b4-score-label {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 8px;
  color: var(--bs-text-2);
  font: 14px/1.6 var(--bs-font-mono);
}

/* Counters sit outside the clipped fill so they remain visible during entry. */
.b4-score-track { border-right: 1px dashed var(--bs-data-tick); position: relative; }

.b4-score-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--score-width);
  height: 34px;
  padding-inline: 10px;
  background: var(--bs-data-base);
  color: var(--bs-text);
  border-radius: 2px;
}

.b4-score-fill--ours { background: var(--bs-accent); color: var(--bs-text-on-accent); }
.bs-page .b4-score-fill > strong { color: inherit; font: 600 16px/1.3 var(--bs-font-mono); }

.bs-page .b4-score-value {
  position: absolute;
  top: 50%;
  left: calc(var(--score-width) + 8px);
  transform: translateY(-50%);
  color: var(--bs-text);
  font: 600 16px/1.3 var(--bs-font-mono);
}

/* Equal cells make every illustrated bit a complete block at every width. */
.b5-bit-row {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: clamp(1px, .25vw, 3px);
  width: 100%;
}

.b5-bit {
  display: block;
  min-width: 0;
  height: 17px;
  background: #626a78;
  transition: opacity 70ms linear;
}

.b4-precision-rows--learned .b5-bit { background: var(--bs-accent); }
.b5-bit--off { opacity: 0; }

/* Tablet columns can also wrap the learned label; align both sets of rows. */
.bs-page .b4-precision-label {
  display: flex;
  align-items: flex-end;
  min-height: 3.2em;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .b3-tech-process { grid-template-columns: minmax(0,1fr); gap: 26px; margin-top: 28px; }
  .b3-tech-step { padding-top: 20px; }
  .b3-release-summary { padding: 20px; }
  .b3-release-summary h2 { font-size: 20px; }
  .b3-release-summary p { font-size: 14px; }
}

@media (max-width: 1000px) {
  .b4-tech-intro { gap: 34px; }
  .b4-tech-comparison, .b4-tech-deployment, .b4-tech-direction { gap: 38px; }
  .b4-tech-mtp { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 20px 30px; }
  .b4-tech-mtp .b3-text-link { grid-column: 2; }
}

@media (max-width: 700px) {

  .b4-tech-intro, .b4-tech-comparison, .b4-tech-deployment, .b4-tech-direction, .b4-tech-mtp {
    grid-template-columns: minmax(0,1fr);
    gap: 30px;
  }

  .b4-tech-intro .hero-title { font-size: clamp(38px,10vw,58px); }
  .b4-tech-intro .lead { font-size: 17px; }
  .b4-precision-figure { margin-top: 14px; }
  .b4-precision-diagram { gap: 10px; }
  .b4-precision-label { font-size: 11px; }
  .b4-technology .b3-tech-process { margin-top: 38px; }
  .b4-tech-mtp .b3-text-link { grid-column: auto; }
  .b4-tech-mtp { gap: 16px; margin-top: 34px; }
  .b4-tech-direction { gap: 16px; margin-top: 36px; }
  .b4-tech-research { margin-top: 30px; }
}

.bs-page .b3-text-link, .bs-page .b3-button { font-size: 15px; }

/* ==========================================================================
   OPTIMIZE PAGE
   --------------------------------------------------------------------------
   /optimize/.
   ========================================================================== */

.b3-optimize-opening .hero-title { font-size: clamp(42px, 4.8vw, 66px); max-width: 16ch; }
.b3-optimize-opening .lead { font-size: 18px; }
.b3-delivery .b3-heading { font-size: clamp(28px, 2.6vw, 37px); line-height: 1.2; margin: 18px 0 22px; }
/* An open block like the Company thesis aside and the method steps: a
   hairline on top, no box, rows split by hairlines, step-title labels. */
.b3-delivery { border-top: 1px solid var(--bs-line-strong); padding-top: 26px; margin-top: 9px; }
.b3-delivery-list { margin: 0; }
.b3-delivery-list > div { border-top: 1px solid var(--bs-line-strong); padding: 18px 0; }
.b3-delivery-list > div:last-child { padding-bottom: 0; }
.b3-delivery-list dt { margin: 0 0 6px; color: #fff; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.b3-delivery-list dd { margin: 0; color: #a5adbb; font-size: 13px; line-height: 1.75; }
.b3-constraint-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.b3-constraint-grid > article { min-width: 0; border-top: 1px solid #3b414c; padding-top: 22px; }
.b3-constraint-grid .b3-step-title { margin-top: 13px; }
.b3-engagement-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3b414c; }

.b3-engagement-list > li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 22px;
  padding: 25px 0;
  border-bottom: 1px solid #3b414c;
}

.b3-engagement-list .b3-small-label { padding-top: 4px; color: #f06400; }
.b3-example-grid .link-arrow { margin-top: 18px; }
.b3-example-grid .b3-body { font-size: 13px; }
.b3-optimize-opening ~ #contact .grid--aside { max-width: 800px; grid-template-columns: minmax(0, 1fr); }

.bs-page .b3-kicker, .bs-page .b3-small-label {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .07em;
  color: #b8c0cc;
}

.bs-page .b3-engagement-list .b3-small-label { color: #ff8c3a; }
.bs-page .b3-delivery-list dd { color: #b8c0cc; font-size: 16px; line-height: 1.7; }
.bs-page .b3-delivery-list dt { font-size: 20px; }

/* ShapeLearn contact: a centered heading and balanced form. */
.b3-optimize-contact .b3-contact-heading {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.b3-optimize-contact .b3-contact-heading .section-sub {
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
  text-align-last: auto;
}

.b3-optimize-contact .b3-contact-panel { width: min(100%, 760px); margin-inline: auto; }

.b3-optimize-contact .b3-contact-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.b3-optimize-contact .bs-form-actions { align-items: center; }
.b3-optimize-contact .captcha-container { display: flex; justify-content: center; }
.b3-optimize-contact .captcha-container .g-recaptcha { flex: 0 0 304px; transform-origin: center top; }
.b3-optimize-contact .bs-help { text-align: center; }

@media (max-width: 900px) {
  .b3-constraint-grid { gap: 24px; }
  .b3-delivery { margin-top: 0; }
}

@media (max-width: 700px) {
  .b3-constraint-grid { grid-template-columns: minmax(0, 1fr); }
  .b3-optimize-opening .hero-title { font-size: clamp(40px, 10vw, 58px); }
  .b3-optimize-opening .lead { font-size: 16px; }
  .b3-engagement-list > li { gap: 15px; }
}

.bs-page .b3-body { color: #b8c0cc; font-size: 16px; line-height: 1.7; }

@media (min-width: 640px) {
  .b3-optimize-contact .b3-contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   COMPANY PAGE
   --------------------------------------------------------------------------
   /company/, its founders, investors and papers.
   ========================================================================== */

/* Company narrative and custom optimization. */
.b3-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 105px);
  align-items: start;
}

.b3-story-grid > * { min-width: 0; }
.b3-company-opening .hero-title { font-size: clamp(42px, 4.8vw, 66px); max-width: 16ch; }
.b3-company-opening .lead { font-size: 18px; }
/* The same hairline every other block on the site opens with; the thesis is
   not a highlighted panel. */
.b3-thesis { border-top: 1px solid var(--bs-line-strong); padding-top: 26px; margin-top: 9px; }
.b3-thesis .b3-heading { font-size: clamp(28px, 2.6vw, 37px); line-height: 1.2; margin: 18px 0 22px; }
.b3-thesis .b3-text-link { margin-top: 24px; }
.b3-evidence-panel { padding-block: 16px 8px; border-top: 1px solid #3b414c; }
.b3-evidence-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }

.b3-evidence-value {
  color: #f06400;
  font-family: var(--bs-font-mono);
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -.055em;
  font-weight: 400;
  margin: 8px 0 10px;
}

.b3-evidence-value span { font-size: 15px; letter-spacing: -.02em; }

.b3-evidence-label {
  color: #fff;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  max-width: 24ch;
}

.b3-paper-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #3b414c; }
.b3-paper-list li { border-bottom: 1px solid #3b414c; }

.b3-paper-list a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
}

.b3-paper-list a:hover { color: #ff8c3a; }

.b3-company-opening ~ .section .person-card {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.b3-company-opening ~ .section .person-card:hover { transform: none; background: transparent; }

.b3-company-opening ~ .section .person-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  border-radius: 3px;
  object-fit: cover;
}

.b3-company-opening ~ .section .person-grid { gap: 28px; }

.b3-company-opening ~ .section .investor-card {
  border-radius: 3px;
  background: #0d1016;
  box-shadow: none;
}

/* Equal partner cards span the company page's content width. */
/* Keep stacked investor cards equal even when their captions wrap differently. */
#investors .investor-grid { align-items: stretch; gap: 24px; grid-auto-rows: 1fr; }

#investors .investor-card { width: 100%; min-height: 214px; padding: 32px; }
#investors .investor-logo-wrap { min-height: 88px; }

#investors .investor-logo-wrap img {
  width: auto;
  height: auto;
  max-width: min(100%, 290px);
  max-height: 72px;
}

#investors .investor-name { max-width: 42ch; }
.bs-page .b3-evidence-label { font-size: 14px; line-height: 1.6; }

/* Founder portraits and contributions have equal space in a two-column layout. */
.bs-page .b5-founder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }

.bs-page .b5-founder-grid .person-card {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 16px 24px;
  height: 100%;
  text-align: left;
  align-items: start;
}

.bs-page .b5-founder-grid .person-photo { grid-row: 1 / 3; width: 144px; height: 144px; margin: 0; }
.bs-page .b5-founder-grid .link-arrow { grid-column: 2; margin-top: 0; justify-self: start; }
/* Bios fill their measure like the homepage copy: justified, last line left,
   never hyphenated. */
.bs-page .b5-founder-grid .card-body {
  font-size: 15px;
  line-height: 1.7;
  text-align: justify;
  text-align-last: left;
  text-wrap: wrap;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.bs-page .b5-founder-grid .person-role { font-size: 14px; line-height: 1.5; }

.b5-paper-list .b5-paper-venue {
  display: block;
  margin-top: 4px;
  color: var(--bs-text-2);
  font-size: 14px;
}

.bs-page .b5-paper-list a { font-size: 15px; }

.b5-paper-disclosure > summary {
  width: fit-content;
  padding-block: 10px;
  font-size: 15px;
  cursor: pointer;
  color: var(--bs-text);
}

.b5-paper-disclosure .b5-paper-list { margin-block: 10px 20px; }

.bs-page .b5-team-grid > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 40px) / 2);
  justify-self: center;
}

.bs-page .b5-team-grid .person-card { scroll-margin-top: 110px; }

@media (max-width: 900px) {
  .b3-story-grid { gap: 36px; }
  .b3-evidence-metrics { grid-template-columns: 1fr; gap: 15px; }
  .b3-evidence-label { max-width: none; }
}

@media (max-width: 700px) {
  .b3-story-grid { grid-template-columns: minmax(0, 1fr); }
  .b3-company-opening .hero-title { font-size: clamp(40px, 10vw, 58px); }
  .b3-company-opening .lead { font-size: 16px; }
  .b3-thesis { margin-top: 0; }
  .b3-evidence-metrics { grid-template-columns: 1fr 1fr; gap: 16px; }
  .b3-evidence-value { font-size: 30px; }
  .b3-company-opening ~ .section .person-grid { gap: 32px 20px; }
}

@media (max-width: 620px) {
  #investors .investor-card { min-height: 200px; padding: 28px 22px; }
  #investors .investor-logo-wrap img { max-width: min(100%, 250px); }
}

@media (max-width: 1000px) {
  .bs-page .b5-founder-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .bs-page .b5-founder-grid .person-card { grid-template-columns: 90px minmax(0, 1fr); gap: 14px 20px; }
  .bs-page .b5-founder-grid .person-photo { width: 90px; height: 90px; }
}

@media (max-width: 1000px) {
  .bs-page .b5-team-grid > li:last-child:nth-child(odd) { width: 100%; }
}

/* Keep the final team card the same width as the preceding pair. */
.bs-page .b5-team-grid.person-grid { gap: 40px; }

/* ==========================================================================
   MODELS CATALOG
   --------------------------------------------------------------------------
   /models/: the filter bar and the catalog table.
   ========================================================================== */

/* --- catalog: filter bar ----------------------------------------------- */
.cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: flex-end;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
}

.cat-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cat-filter-label {
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-chip {
  box-sizing: border-box;
  padding: 7px 15px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text-2);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-xs);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.16s var(--bs-ease), background-color 0.16s var(--bs-ease), color 0.16s var(--bs-ease);
}

.cat-chip:hover { border-color: var(--bs-accent-line); color: var(--bs-text); }

.cat-chip[aria-pressed="true"] {
  border-color: var(--bs-accent);
  background: var(--bs-accent-soft);
  color: var(--bs-text);
}

.cat-mem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-select {
  padding: 7px 14px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
}

.cat-status {
  margin: 0 0 14px;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
}

.cat-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-name strong {
  color: var(--bs-text);
  font-weight: 600;
}

.cat-name span {
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
}

.data-table td .cat-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* Catalog and finder: put the useful choices near the opening. */
.bs-editorial .b3-catalog-section { padding-top: clamp(36px, 4.3vw, 62px); }

.b3-catalog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; }
.b3-catalog-head .section-title { margin-bottom: 16px; font-size: clamp(36px, 4vw, 54px); }
.b3-catalog-head .section-sub { max-width: 640px; margin-bottom: 0; }
.b3-catalog-head .btn-primary { flex-shrink: 0; }

.b3-catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 30px 0 26px;
  padding: 0;
  list-style: none;
  color: #a5adbb;
  font-size: 14px;
}

.b3-catalog-meta strong { color: #ffffff; font-weight: 600; }
.bs-page .cat-filter-label { font-size: 14px; }

/* --- model catalog table --------------------------------------------------
   Seven columns, names on one line with the type as a small tag, build count
   and best score stacked over their detail, mono numbers, even row height and
   a quiet hover. The row attributes the filter and checker read are unchanged. */
#cat-table { min-width: 960px; table-layout: auto; }

#cat-table th {
  padding: 14px 16px 12px;
  background: var(--bs-surface-2);
  border-bottom: 1px solid var(--bs-line-strong);
  color: var(--bs-text-3);
  vertical-align: bottom;
}

#cat-table th .cat-th-sub {
  display: block;
  margin-top: 2px;
  color: var(--bs-text-3);
  font-size: 0.62rem;
  letter-spacing: .08em;
  opacity: .8;
}

#cat-table td {
  padding: 16px 16px;
  vertical-align: middle;
  color: var(--bs-text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

#cat-table tbody tr { transition: background-color .15s ease; }
#cat-table tbody tr:hover { background: var(--bs-surface-2); }
#cat-table th:nth-child(1) { width: 26%; }
#cat-table th:nth-child(2) { width: 14%; }
#cat-table th:nth-child(3) { width: 11%; }
#cat-table th:nth-child(4) { width: 10%; }
#cat-table th:nth-child(5) { width: 11%; }
#cat-table th:nth-child(6) { width: 18%; }
#cat-table th:nth-child(7) { width: 10%; }
#cat-table td:nth-child(2) { white-space: nowrap; }
#cat-table .cat-name { gap: 4px; }
#cat-table .cat-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

#cat-table .cat-name strong {
  color: var(--bs-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

#cat-table .cat-tag {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--bs-line-strong);
  border-radius: 4px;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

#cat-table .cat-creator { color: var(--bs-text-3); font-size: 12px; }
#cat-table td.num { text-align: left; color: var(--bs-text); font-size: 14px; }
#cat-table .cat-stack { white-space: nowrap; }

#cat-table .cat-count {
  display: block;
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  line-height: 1.3;
}

#cat-table .cat-sub {
  display: block;
  margin-top: 2px;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .02em;
}

#cat-table .text-dim {
  display: block;
  margin-top: 2px;
  color: var(--bs-text-3);
  font-size: 11.5px;
  line-height: 1.5;
}

#cat-table td .cat-links { flex-direction: column; gap: 4px; }

#cat-table td .cat-links a, #cat-table td > .link-quiet {
  color: var(--bs-accent-bright);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .b3-catalog-head { align-items: flex-start; flex-direction: column; gap: 22px; }
}

@media (max-width: 620px) {
  .b3-catalog-meta { gap: 10px 18px; font-size: 13px; }
  #cat-table td { padding: 14px 12px; }
}

/* ==========================================================================
   MODEL FINDER
   --------------------------------------------------------------------------
   /model-selector/ and the finder markup that /js/model-finder.js renders.
   Its classes are prefixed `.fnd-`, so they cannot collide with the legacy
   styles.css on blog pages.
   ========================================================================== */

.finder-shell {
  box-sizing: border-box;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  background: var(--bs-surface);
}

#model-finder {
  display: block;
  min-height: 4rem;
}

#model-finder:empty { min-height: 0; }

.finder-fallback {
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
}

/* --- finder: question steps -------------------------------------------- */
.fnd-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnd-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bs-line);
}

.fnd-step:first-child { padding-top: 0; }
.fnd-step:last-child { border-bottom: 0; padding-bottom: 4px; }

.fnd-step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.fnd-step-num {
  flex: none;
  color: var(--bs-accent-bright);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.fnd-step-label {
  margin: 0;
  color: var(--bs-text);
  font-size: var(--bs-fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

.fnd-step-hint {
  margin: 3px 0 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.5;
}

.fnd-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* --- finder: option pills ---------------------------------------------- */
.fnd-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnd-optgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fnd-optgroup-label {
  flex: none;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fnd-opt {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text-2);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s var(--bs-ease), background-color 0.16s var(--bs-ease), color 0.16s var(--bs-ease);
}

.fnd-opt:hover {
  border-color: var(--bs-accent-line);
  color: var(--bs-text);
}

.fnd-opt[aria-pressed="true"] {
  border-color: var(--bs-accent);
  background: var(--bs-accent-soft);
  color: var(--bs-text);
}

.fnd-opt--num {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  padding-inline: 12px;
}

/* --- finder: result panel ---------------------------------------------- */
.fnd-result {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--bs-line);
}

.fnd-rec-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fnd-rec-name {
  margin: 0;
  font-size: var(--bs-fs-h3);
  font-weight: 600;
}

.fnd-rec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0.02em;
}

.fnd-rec-file {
  color: var(--bs-accent-bright);
  overflow-wrap: anywhere;
}

.fnd-rec-body {
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  line-height: 1.6;
}

.fnd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 22px;
  margin: 0;
  padding: 16px 0;
  border-block: 1px solid var(--bs-line);
}

.fnd-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fnd-stat-value {
  margin: 0;
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: 1.32rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.fnd-stat-value--accent { color: var(--bs-accent-bright); }

.fnd-stat-value .unit {
  color: var(--bs-text-3);
  font-size: 0.62em;
  font-weight: 400;
}

.fnd-stat-label {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.45;
}

.fnd-meter {
  width: 100%;
  height: 6px;
  margin-top: 4px;
  border: 1px solid var(--bs-line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.fnd-meter-fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--bs-accent);
}

.fnd-fit {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  line-height: 1.55;
}

.fnd-fit::before {
  content: "\2713";
  flex: none;
  color: var(--bs-accent-bright);
  font-family: var(--bs-font-mono);
}

.fnd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* --- finder: measured-speed list --------------------------------------- */
.fnd-bench {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnd-bench-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
}

.fnd-bench-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.fnd-bench-name {
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fnd-bench-val {
  flex: none;
  color: var(--bs-text-2);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fnd-bench-rail {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.fnd-bench-fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--bs-data-base);
}

.fnd-bench-row--match .fnd-bench-name, .fnd-bench-row--match .fnd-bench-val { color: var(--bs-text); }
.fnd-bench-row--match .fnd-bench-fill { background: var(--bs-accent); }

/* --- finder: alternates ------------------------------------------------ */
.fnd-alts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnd-alt {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s var(--bs-ease), background-color 0.16s var(--bs-ease);
}

.fnd-alt:hover { border-color: var(--bs-accent-line); background: var(--bs-surface-3); }

.fnd-alt[aria-pressed="true"] {
  border-color: var(--bs-accent);
  background: var(--bs-accent-soft);
}

.fnd-alt-label {
  color: var(--bs-text);
  font-size: var(--bs-fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

.fnd-alt-meta {
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  line-height: 1.4;
}

/* --- finder: run block ------------------------------------------------- */
.fnd-run {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--bs-line);
}

.fnd-run-title {
  margin: 0;
  font-size: var(--bs-fs-sm);
  font-weight: 600;
}

.fnd-run-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fnd-run;
}

.fnd-run-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fnd-run-step-label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--bs-text);
  font-size: var(--bs-fs-sm);
  font-weight: 600;
}

.fnd-run-step-label::before {
  counter-increment: fnd-run;
  content: counter(fnd-run);
  flex: none;
  min-width: 20px;
  height: 20px;
  border: 1px solid var(--bs-accent-line);
  border-radius: 50%;
  color: var(--bs-accent-bright);
  font-family: var(--bs-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

.fnd-code {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-sm);
  background: var(--bs-bg);
}

.fnd-code pre {
  margin: 0;
  padding: 14px 54px 14px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fnd-code code {
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: 0.8rem;
  line-height: 1.65;
  white-space: pre;
}

.fnd-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 12px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text-2);
  font-family: var(--bs-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.fnd-copy:hover { border-color: var(--bs-accent-line); color: var(--bs-text); }
.fnd-copy.is-done { border-color: var(--bs-accent); color: var(--bs-accent-bright); }

.fnd-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-sm);
  background: var(--bs-surface-2);
}

.fnd-empty-title {
  margin: 0;
  font-size: var(--bs-fs-h3);
  font-weight: 600;
}

.fnd-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.fnd-loading {
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-sm);
}

/* A grid item's automatic minimum size is its min-content width, so a card
   holding a <pre> with a long unbreakable URL inflates its whole grid column
   past a 375px viewport. These blocks opt out; the <pre> then scrolls inside
   itself. Scoped to the blocks that actually carry code. */
.fnd-result, .fnd-run, .fnd-run-step, .fnd-code, .fnd-code pre {
  min-width: 0;
  max-width: 100%;
}

.bs-editorial .b3-selector-section { padding-top: clamp(36px, 4.3vw, 62px); }
.b3-selector-head { margin-bottom: 25px; }
.b3-selector-head .section-title { font-size: clamp(36px, 4vw, 54px); margin-bottom: 16px; }
.b3-selector-head .section-sub { max-width: 750px; }
.b3-selector-modes { display: flex; gap: 8px; border-bottom: 1px solid #2b303a; margin-bottom: 16px; }

.b3-selector-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  color: #a5adbb;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.b3-selector-mode[aria-current="page"] {
  color: #ffffff;
  background: #0d1016;
  border-bottom-color: #f06400;
}

.b3-selector-mode:hover { color: #ffffff; background: #0d1016; }
.b3-selector-mode:focus-visible { outline: 2px solid #f06400; outline-offset: 4px; }
.b3-selector-context { margin-bottom: 28px; }
.b3-selector-context .note { margin: 0; }
.b3-selector-section .fnd-steps { padding: 0; }

/* Mode links use the same shape as the hardware choices below them. */
.bs-page .b3-selector-modes {
  gap: 8px;
  padding-bottom: 16px;
}

.bs-page .b3-selector-mode { border: 1px solid var(--bs-line-strong); }

.bs-page .b3-selector-mode[aria-current="page"] {
  border-color: var(--bs-accent);
  background: var(--bs-accent-soft);
}

.bs-page .fnd-optgroup-label, .bs-page .fnd-stat-value .unit { font-size: 14px; }

@media (min-width: 720px) {

  .fnd-step {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
    gap: 24px;
    align-items: start;
  }
}

@media (max-width: 560px) {
  .fnd-code code { font-size: 0.74rem; }
}

@media (max-width: 620px) {
  .b3-selector-mode { flex: 1; padding: 12px 8px; font-size: 14px; text-align: center; }
  .b3-selector-modes { gap: 0; }
  .b3-selector-context { margin-bottom: 20px; }
}

/* ==========================================================================
   LEGACY PAGE OVERRIDES
   --------------------------------------------------------------------------
   Pages that keep css/styles.css and their own body: the blog listing, blog
   posts, /demo/ and /run-hf-model/. These rules only ever match there.
   ========================================================================== */

/* Legacy pages adopting the shared shell: the blog listing, blog posts,
   /run-hf-model/ and /demo/. They keep `css/styles.css` and their own `<body>`
   (no `.bs-page`); only the header and footer are new.

   `css/styles.css` pads `#blog-content` / `#blog-listing` down by 120px (90px
   / 80px at the small breakpoints) to clear the OLD `position: fixed` nav. The
   new `.site-header` is sticky and occupies layout space, so that clearance is
   now dead air. Same specificity as the legacy rules, declared later, with no
   `!important`, and it only ever matches on pages that carry those ids. */
#blog-content, #blog-listing { padding-top: clamp(30px, 4vw, 48px); }

.blog-listing-header p,
#blog-content .blog-section > p,
#blog-content .blog-section > .blog-list {
  text-wrap: pretty;
}

.blog-listing-header, .blog-listing-header p {
  width: min(100%, var(--bs-measure));
  max-width: var(--bs-measure);
}

/* Recorded demonstrations: useful before playback or scripting. */
.bs-demos .fade-up { opacity: 1; transform: none; transition: none; }

.bs-demos .demo-hero { padding-top: 90px; }

.bs-demos .demo-hero h1 {
  max-width: 20ch;
  font-family: var(--bs-font-sans);
  font-weight: 500;
  letter-spacing: -.04em;
}

.bs-demos .hero-label {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--bs-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}

.bs-demos .demo-card {
  background: #0d1016;
  border-radius: 3px;
  border-color: #3b414c;
  box-shadow: none;
  transition: none;
}

.bs-demos .demo-card:hover {
  transform: none;
  background: #0d1016;
  box-shadow: none;
  border-color: #3b414c;
}

.bs-demos .demo-card-header { text-align: left; }
.bs-demos .hw-badge { padding: 0; border: 0; border-radius: 0; background: none; }
.bs-demos .compression-note { justify-content: flex-start; padding: 0; background: none; }
.bs-demos .demo-card-video { margin-top: 0; }
.bs-demos .demo-card-video video { border-radius: 0; }
.bs-demos .demo-recording-context { padding: 20px; }

.bs-demos .demo-recording-label {
  margin: 0 0 12px;
  font: 9px/1.7 var(--bs-font-mono);
  color: #a5adbb;
  letter-spacing: .06em;
}

.bs-demos .demo-recording-summary { margin: 0; font: 14px/1.75 var(--bs-font-sans); color: #fff; }

.bs-demos .demo-recording-details {
  margin-top: 16px;
  font: 12px/1.8 var(--bs-font-sans);
  color: #a5adbb;
}

.bs-demos .demo-recording-details summary { padding-block: 6px; color: #fff; cursor: pointer; }
.bs-demos .demo-recording-details p { font-size: 12px; color: #a5adbb; }

.bs-demos .demo-source-link {
  display: inline-block;
  margin-top: 14px;
  font: 13px/1.6 var(--bs-font-sans);
  color: #ff8c3a;
  text-underline-offset: 3px;
}

.bs-demos .demo-source-link:hover { color: #fff; }
.bs-demos .info-content { background: #0d1016; border-radius: 3px; box-shadow: none; }
.bs-demos .demo-group-header .section-subtitle { color: #a5adbb; }
.bs-demos :focus-visible { outline: 2px solid #f06400; outline-offset: 4px; }

/* Keep the article reading column centered while charts and tables stay wide. */
#blog-content .blog-header,
#blog-content .blog-section > h2,
#blog-content .blog-section > h3,
#blog-content .blog-section > h4,
#blog-content .blog-section > p,
#blog-content .blog-section > .blog-list {
  margin-inline: auto;
}

#blog-content .blog-body > .series-nav,
#blog-content .blog-body > .series-pager,
#blog-content .blog-section > .series-nav,
#blog-content .blog-section > .series-pager,
#blog-content .blog-section > .blog-info-box,
#blog-content .blog-section > .part-intro,
#blog-content .blog-section > .disclaimer-box,
#blog-content .blog-section > blockquote {
  margin-inline: auto;
}

/* The evaluation series sets an important shorthand on equations. */
#blog-content .blog-section > .math-display { margin-inline: auto !important; }

#blog-content .blog-table { margin-inline: auto; }

/* Published-result links arrive below the sticky shared header. */
#blog-content .blog-body [id] { scroll-margin-top: 100px; }

.blog-toc-item a:focus-visible,
.blog-toc-toggle:focus-visible,
.blog-toc-close:focus-visible {
  outline: 2px solid var(--bs-accent, #f06400);
  outline-offset: -2px;
}

/* Scale legacy fixed-size embeds to the available article column. */
.blog-with-toc .blog-figure iframe {
  transform: scale(var(--blog-chart-scale, .8));
  margin-block: var(--blog-chart-margin, -80px);
}

/* The legacy heatmap defines an important margin shorthand. */
.blog-with-toc .blog-figure-heatmap iframe { margin-block: var(--blog-chart-margin, -90px) !important; }

.blog-filter-chip,
.blog-empty-reset,
.blog-toc-toggle,
.blog-toc-close,
.model-download-btn,
.qi-cta,
.qi-tab,
.qpt-opt,
.cmd-row .copy-btn {
  border-radius: var(--bs-radius-pill);
}

/* Image explorer choices share the site's action shape. */
.cmp-chip-picks .cmp-pick { border-radius: var(--bs-radius-pill); }

/* One decorative field behind the black sections of every full site page. */
.bs-network-page { position: relative; isolation: isolate; }

.bs-network-page .demo-hero, .bs-network-page .demos-section { background-color: transparent; }

/* Give translucent content panels an opaque backing over the moving field. */
.bs-network-page .legend-wrapper,
.bs-network-page .series-nav,
.bs-network-page .series-pager-link,
.bs-network-page .run-card,
.bs-network-page .cmp-card,
.bs-network-page .cmp-families,
.bs-network-page .arch-node,
.bs-network-page .arch-engines {
  background-color: var(--bs-surface);
}

.bs-network-page .blog-body pre { background-color: var(--bs-surface); }

/* Legacy posts can declare their legend styling after the shared stylesheet. */
.bs-network-page .chart-legend .legend-wrapper { background-color: var(--bs-surface); }

.bs-network-page .cmp-sheet .cmp-card, .bs-network-page .series-pager .series-pager-link {
  background-color: var(--bs-surface);
}

#blog-content .blog-header,
#blog-content .blog-section > h2,
#blog-content .blog-section > h3,
#blog-content .blog-section > h4,
#blog-content .blog-section > p,
#blog-content .blog-section > .blog-list,
#blog-content .blog-body > .series-nav,
#blog-content .blog-body > .series-pager,
#blog-content .blog-section > .series-nav,
#blog-content .blog-section > .series-pager,
#blog-content .blog-section > .blog-info-box,
#blog-content .blog-section > .part-intro,
#blog-content .blog-section > .disclaimer-box,
#blog-content .blog-section > blockquote {
  width: auto;
  max-width: none;
}

@media (min-width: 901px) {

  #blog-content .blog-section > p {
    text-justify: inter-word;
    text-wrap: pretty;
    text-align: left;
    text-align-last: auto;
    hyphens: manual;
  }
}

@media (max-width: 620px) {
  .bs-demos .demo-hero { padding-top: 52px; }
  .bs-demos .demo-hero h1 { font-size: 37px; }
  .bs-demos .info-content { padding: 24px; }
}

@media (min-width: 1200px) {

  .blog-toc.desktop {
    top: calc(var(--bs-header-h, 68px) + 40px);
    max-height: calc(100dvh - var(--bs-header-h, 68px) - 68px);
  }
}

.blog-toc.mobile {
  width: min(340px, calc(100vw - 24px));
  height: 100dvh;
  max-height: 100dvh;
}

@media (min-width: 1200px) {

  .blog-with-toc #blog-content {
    width: auto;
    max-width: calc(var(--bs-container, 1140px) + 2 * var(--bs-gutter, 40px));
    padding-inline: var(--bs-gutter, 40px);
  }
}

/* ==========================================================================
   MOTION AND PRINT OPT-OUTS
   --------------------------------------------------------------------------
   The opt-outs, gathered here so they always win at equal specificity and
   never have to be repeated. Under reduced motion every animation and
   transition is off and the static frame shows. Print drops the decoration
   and lays both hero cards out in flow.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* smooth anchor scrolling only on new pages, and only if motion is welcome */
  html:has(> body.bs-page) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(> body.bs-page) { scroll-behavior: auto; }

  .btn-primary,
  .btn-secondary,
  .card--hover,
  .link-arrow::after,
  .site-nav-toggle-bar,
  .skip-link {
    transition: none !important;
  }

  /* The mobile panel appears in place instead of dropping in. */
  .site-header.is-nav-open .site-nav { animation: none; }

  .btn-primary:hover, .btn-secondary:hover, .card--hover:hover, .link-arrow:hover::after {
    transform: none !important;
  }

  .modal, .bs-input, .social-chip {
    animation: none !important;
    transition: none !important;
  }

  .fnd-opt, .fnd-alt, .cat-chip, .fnd-copy, .fnd-bench-fill, .fnd-meter-fill {
    transition: none !important;
    animation: none !important;
  }

  .b3-button, .b3-proof-choice { transition: none; }

  /* Hovers keep their colour changes; the arrows, the release pictures and the
     play button stay where they are. */
  .b3-button > span[aria-hidden="true"],
  .b3-text-link > span[aria-hidden="true"],
  .b3-release-thumb img,
  .b5-video-start {
    transition: none;
  }

  .b3-button:is(:hover, :focus-visible) > span[aria-hidden="true"],
  .b3-text-link:is(:hover, :focus-visible) > span[aria-hidden="true"] {
    translate: none;
  }

  .b3-release-item:is(:hover, :focus-visible) .b3-release-thumb img { scale: none; }
  .b5-video-start:hover { transform: translate(-50%, -50%); }

  .b3-page-network {
    position: absolute;
    background-image: url('/images/hero-network.svg?v=3.7');
    -webkit-mask-image: none;
    mask-image: none;
    opacity: .34;
  }

  .b3-page-network-canvas { display: none; }

  .blog-toc.desktop, .blog-toc-item {
    animation: none;
    opacity: 1;
  }

  .blog-toc.mobile, .blog-toc-indicator, .blog-toc-item a { transition: none; }

  /* Keep the static fallback visible even while a media-change event is pending. */
  .bs-network-page .b3-page-network { background-image: url('/images/hero-network.svg?v=3.7'); }

  /* The car cartoon, the javelin cartoon and the deck all stop here. One rule
     covers them because this section comes last. */
  .b3-hero-cartoon, .b3-hero-cartoon * { animation: none; }

  /* The tabs still choose a card; only the movement goes away. Both selectors
     match the specificity of the rules they have to beat. */
  .b3-hero-deck .b3-hero-card { transition: none; animation: none; }

  .b3-hero-tab.is-active .b3-hero-tab-progress { animation: none; }
}

@media print {
  .b3-page-network { display: none; }
  .bs-home .b3-hero { min-height: 0; }
  .blog-toc, .blog-toc-toggle, .blog-toc-overlay { display: none !important; }
  .blog-with-toc #blog-content { width: auto; }
  .b3-hero-cartoon, .b3-hero-cartoon * { animation: none; }
  .b3-hero-tabs { display: none; }
  .b3-hero-tab.is-active .b3-hero-tab-progress { animation: none; }
  .b3-hero-deck { display: block; padding-bottom: 0; }

  .b3-hero-deck .b3-hero-card {
    grid-area: auto;
    transform: none;
    opacity: 1;
    filter: none;
    cursor: auto;
    transition: none;
  }

  .b3-hero-deck .b3-hero-card + .b3-hero-card { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce), print {

  /* Scroll reveals, the hero entrance and the step icons show their resting
     frame at once. The selectors repeat the rules they have to beat. */
  .js-reveal .reveal, .js-reveal .reveal.is-in {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .bs-home .b3-hero-copy > .b3-kicker,
  .bs-home .b3-hero-copy > .b3-kicker::before,
  .bs-home .b3-line,
  .bs-home .b3-line-inner,
  .bs-home .b3-line + .b3-line > .b3-line-inner,
  .bs-home .b3-hero-copy > .b3-intro,
  .bs-home .b3-hero-copy > .b3-actions,
  .bs-home .b3-hero-stack,
  .bs-home .b3-credentials,
  .js-reveal .reveal.is-in .b3-kicker::before,
  .js-reveal .b3-method-step.is-in .b3-bracket,
  .js-reveal .b3-method-step.is-in .b3-input-lines i,
  .js-reveal .b3-method-step.is-in .b3-bits i,
  .js-reveal .b3-method-step.is-in .b3-output-icon {
    animation: none;
  }

  .bs-page [data-motion-bar] { clip-path: none !important; }
  .bs-page .bs-motion-final { opacity: 1; }
  .bs-page .bs-motion-current { display: none !important; }
  .b5-bit { transition: none; }

  /* The hero bars and numbers rest on their published values. !important beats
     the controller's inline and animated transforms if a change lands mid-run. */
  .b3-hero-card [data-deck-bar] { transform: none !important; }
  .b3-hero-card .b3-deck-readout, .b3-deck-bit { display: none; }
  .b3-hero-card .is-deck-covered { opacity: 1; }

  /* No story beats either. Both selectors match the specificity of the rules
     they have to beat. */
  .b3-hero-card.is-playing .b3-score-stat [data-llm] { animation: none; }
  .b3-hero-card.is-playing .b5-compress-row--byteshape .b5-compress-fill::after { animation: none; }
}