/* ==========================================================================
   apple-multipage-site · dark only
   1 tokens · 2 base + type · 3 layout · 4 chrome · 5 components · 6 motion
   Copied into every site by scripts/build.py. Change tokens, not components.
   ========================================================================== */

/* 1 ── tokens ------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --bg: #000;
  --surface: #161617;
  --surface-2: #1d1d1f;
  --surface-3: #2c2c2e;
  --ink: #f5f5f7;
  --ink-2: #d2d2d7;
  --muted: #86868b;
  --line: rgba(255, 255, 255, 0.12);

  /* Both nav bars are the same dark frosted glass (same opacity, same blur).
     The global nav is tinted one shade of grey lighter than the section nav
     under it, so the two read as separate layers. */
  --glass: 0.72;
  --nav-bg: rgba(44, 44, 46, var(--glass));
  --lnav-bg: rgba(0, 0, 0, var(--glass));
  --nav-solid: #1f1f21;
  --nav-ink: #f5f5f7;
  --nav-ink-2: rgba(245, 245, 247, 0.72);

  /* One accent per site. Override with "accent" in site.json. */
  --accent: #2997ff;
  --accent-fill: color-mix(in srgb, var(--accent) 80%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type: every size scales with the viewport between a phone floor
     and a desktop ceiling, so there are no breakpoint jumps. */
  --t-hero: clamp(2.75rem, 1.35rem + 6.6vw, 6rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
  --t-h2: clamp(1.9rem, 1.4rem + 2.3vw, 3.5rem);
  --t-h3: clamp(1.3rem, 1.18rem + 0.55vw, 1.75rem);
  --t-lede: clamp(1.19rem, 1.04rem + 0.7vw, 1.75rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --wrap: 1024px;
  --measure: 38rem;
  --gutter: clamp(22px, 5.5vw, 64px);
  --space: clamp(72px, 11vw, 150px);
  --gap: clamp(12px, 1.6vw, 20px);
  --r-lg: clamp(22px, 2.6vw, 30px);
  --r-md: 18px;
  --nav-h: 48px;

  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2 ── base + type -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 64px);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body) / 1.47 var(--font);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first;
}

main { flex: 1; }

h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }

h1, h2, h3 {
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); line-height: 1.17; letter-spacing: -0.012em; }

p, li, dd { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
/* Plain links in body copy. :where() keeps specificity near zero so any
   component below can restyle its own links without a fight. */
:where(main) a:where(:not([class])) { color: var(--accent); }
:where(main) a:where(:not([class])):hover { text-decoration: underline; text-underline-offset: 0.18em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }

img, svg, video { max-width: 100%; height: auto; display: block; }

abbr[title] { text-decoration: none; }

.skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 980px;
  background: var(--ink);
  color: #000;
  font-size: var(--t-small);
}
.skip:focus { top: 8px; }

/* 3 ── layout ------------------------------------------------------------- */
/* Every direct <section> of <main> is a full-bleed band; its children sit in
   the centred wrap. Fragments never need their own wrapper divs. */
main > section {
  container-type: inline-size;
  padding-block: calc(var(--space) / 2);
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}
main > section > * {
  max-width: var(--wrap);
  margin-inline: auto;
}
main > section > * + * { margin-top: clamp(28px, 4vw, 52px); }

/* 4 ── chrome: global nav ------------------------------------------------- */
.gnav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  /* The blur must sit on the bar itself. On a child or pseudo-element it sees
     nothing: view-transition-name isolates the bar, so anything inside it can
     only blur what is inside it. */
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background 0.3s var(--ease);
  view-transition-name: gnav;
}
.gnav-in, .lnav-in, .foot-in {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}
.gnav-in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}
.brand {
  flex: none;
  color: var(--nav-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  padding-block: 12px;
}
.gnav-menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 32px);
  margin-left: auto;
  margin-right: 8px;
}
.gnav-menu ul {
  display: flex;
  gap: inherit;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gnav-menu a {
  font-size: 0.8125rem;
  color: var(--nav-ink-2);
  transition: color 0.25s var(--ease);
}
.gnav-menu a:hover, .gnav-menu a[aria-current] { color: var(--nav-ink); }
.gnav-cta {
  padding: 5px 13px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff !important;
}
.gnav-cta:hover { background: var(--accent-fill); }

.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(245, 245, 247, 0.8);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { color: #fff; }
.gnav-search { margin-right: -12px; }
.gnav-toggle { display: none; margin-right: -12px; }
.gnav-toggle span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.35s var(--ease), top 0.35s var(--ease);
}
.gnav-toggle span:nth-child(1) { top: 18px; }
.gnav-toggle span:nth-child(2) { top: 25px; }
.gnav-toggle[aria-expanded="true"] span { top: 21.5px; }
.gnav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.gnav-toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

@media (max-width: 800px) {
  .gnav-search { margin-left: auto; margin-right: 0; }
  .gnav-toggle { display: grid; }
  /* Absolute, not fixed: the bar's backdrop-filter makes it the containing
     block, and since the bar is stuck to the top this fills the screen below it. */
  .gnav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--nav-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 18px max(var(--gutter), env(safe-area-inset-right))
      calc(36px + env(safe-area-inset-bottom))
      max(var(--gutter), env(safe-area-inset-left));
    background: var(--nav-solid);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--ease), visibility 0s 0.3s;
  }
  .gnav-menu ul { flex-direction: column; gap: 0; }
  .gnav-menu ul a {
    display: block;
    padding: 11px 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--nav-ink);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .gnav-menu ul a[aria-current] { color: var(--accent); }
  .gnav-cta {
    align-self: flex-start;
    margin-top: 22px;
    padding: 11px 22px;
    font-size: 1.0625rem !important;
  }
  .menu-open .gnav { background: var(--nav-solid); }
  .menu-open .gnav-menu {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .menu-open .gnav-menu ul a {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 45ms + 90ms);
  }
  html.menu-open, .menu-open body { overflow: hidden; }
}

/* chrome: local (section) nav -------------------------------------------- */
.lnav {
  position: relative;
  z-index: 90;
  background: var(--lnav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  view-transition-name: lnav;
}
@media (min-width: 801px) {
  .lnav { position: sticky; top: var(--nav-h); }
}
.lnav-in {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
}
.lnav-title {
  flex: none;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.lnav ul {
  position: relative; /* so site.js can measure the current item against the row */
  display: flex;
  gap: 2px;
  margin: 0 -16px 0 auto;
  padding: 0 16px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.lnav ul::-webkit-scrollbar { display: none; }
.lnav li a {
  display: block;
  padding: 7px 12px;
  border-radius: 980px;
  font-size: 0.8125rem;
  white-space: nowrap;
  color: rgba(245, 245, 247, 0.72);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.lnav li a:hover { color: #fff; }
.lnav li a[aria-current="page"] { color: #fff; background: var(--surface-3); }

/* chrome: footer --------------------------------------------------------- */
.foot {
  margin-top: calc(var(--space) / 2);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--t-micro);
  line-height: 1.5;
}
.foot-in { padding-block: 22px calc(30px + env(safe-area-inset-bottom)); }
.foot a { transition: color 0.2s var(--ease); }
.foot a:hover { color: var(--ink); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 18px;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.crumbs li + li::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin: 0 0.9em 0.1em 0.7em;
  border: solid currentColor;
  border-width: 1px 1px 0 0;
  rotate: 45deg;
  opacity: 0.7;
}
.crumbs [aria-current] { color: var(--ink-2); }
.sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 26px 20px;
  padding-block: 26px;
}
.sitemap h2 {
  margin-bottom: 8px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink);
}
.sitemap ul { margin: 0; padding: 0; list-style: none; }
.sitemap li a { display: block; padding-block: 4px; }
.fine {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
}

/* chrome: page jumper (⌘K) ----------------------------------------------- */
.palette {
  width: min(620px, calc(100vw - 24px));
  max-height: min(70dvh, 540px);
  margin: clamp(12px, 12vh, 120px) auto auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(29, 29, 31, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; animation: pop 0.28s var(--ease-out); }
.palette::backdrop { background: rgba(0, 0, 0, 0.55); }
.palette input {
  flex: none;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.1875rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.palette input::placeholder { color: var(--muted); }
.palette ul {
  flex: 1;
  margin: 0;
  padding: 8px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.palette li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  border-radius: 12px;
}
.palette li a span { flex: none; font-size: var(--t-small); color: var(--muted); }
.palette li[aria-selected="true"] a { background: var(--accent-fill); }
.palette li[aria-selected="true"] a span { color: rgba(255, 255, 255, 0.8); }
.palette .empty { padding: 20px 12px; color: var(--muted); }
.palette-hint {
  flex: none;
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  color: var(--muted);
}
@media (hover: none) { .palette-hint { display: none; } }
kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-3);
  font: 500 0.6875rem var(--font);
  text-align: center;
  color: var(--ink-2);
}

/* 5 ── components --------------------------------------------------------- */

/* hero: one per page, first thing in the fragment */
.hero {
  text-align: center;
  padding-block: clamp(64px, 11vw, 140px) clamp(36px, 6vw, 80px);
}
.hero > * + * { margin-top: clamp(14px, 1.9vw, 22px); }
.hero + section { padding-top: clamp(20px, 3vw, 44px); }
.hero h1 { max-width: 17ch; }
.hero.grand {
  background: radial-gradient(70% 60% at 50% 0%, var(--accent-soft), transparent 72%);
}
.hero.grand h1 {
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.032em;
  max-width: 14ch;
}
.eyebrow {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.lede {
  max-width: 41rem;
  font-size: var(--t-lede);
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  text-wrap: balance;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  padding-top: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 980px;
  background: var(--accent-fill);
  color: #fff;
  font-size: var(--t-body);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: var(--accent); }
.btn:active { transform: scale(0.97); }
.link { color: var(--accent); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem); }
.link::after, .list a::after, .pager b::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.4em;
  border: solid currentColor;
  border-width: 0.1em 0.1em 0 0;
  rotate: 45deg;
  translate: 0 -0.12em;
  transition: translate 0.3s var(--ease-out);
}
.link:hover::after { translate: 0.2em -0.12em; }

/* head: opens a section */
.head > * + * { margin-top: 12px; }
.head h2 { max-width: 20ch; }
.head p:not(.eyebrow) { max-width: var(--measure); font-size: var(--t-lede); line-height: 1.38; color: var(--muted); }
.head .eyebrow { font-size: 1.0625rem; }

/* statement: the grey paragraph with white emphasis */
.statement {
  font-size: clamp(1.6rem, 1.1rem + 2.3vw, 3rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--muted);
  text-wrap: balance;
}
.statement em, .statement strong, .statement a {
  color: var(--ink);
  font-style: normal;
  font-weight: inherit;
}

/* prose: short running text */
.prose > * { max-width: var(--measure); }
.prose > * + * { margin-top: 1.05em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

/* tiles: the main way to link onward. Flex, so a short last row stretches. */
.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: 0;
  list-style: none;
}
.tile {
  position: relative;
  isolation: isolate;
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: clamp(190px, 21vw, 250px);
  padding: clamp(24px, 3vw, 34px);
  padding-bottom: 76px;
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: background 0.4s var(--ease), transform 0.6s var(--ease-out);
}
.tiles:has(> :nth-child(4):last-child) > * { flex-basis: max(280px, 34%); }
.tile.wide { flex-basis: 100%; min-height: 0; }
.tile.feature {
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 26%, var(--surface)), var(--surface) 62%);
}
.tile h3 { max-width: 16ch; }
.tile p { max-width: 34ch; color: var(--muted); }
.kicker {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2) !important;
}
/* pointer glow */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
/* round arrow, bottom right */
.tile::after {
  content: "";
  position: absolute;
  right: clamp(20px, 2.4vw, 28px);
  bottom: clamp(20px, 2.4vw, 28px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 12.5 21 18l-5.5 5.5'/%3E%3C/svg%3E")
    center / 36px no-repeat;
  transition: background-color 0.3s var(--ease), transform 0.5s var(--ease-out);
}
@media (hover: hover) {
  .tile:hover { background: var(--surface-2); transform: scale(1.012); }
  .tile:hover::before { opacity: 1; }
  .tile:hover::after { background-color: var(--accent-fill); transform: translateX(3px); }
}
.tile:active { transform: scale(0.985); }

/* list: compact rows of links */
.list {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.list a {
  color: inherit;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 28px;
  padding: 20px 2px;
  border-bottom: 1px solid var(--line);
  transition: padding 0.4s var(--ease-out);
}
.list b { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.012em; }
.list span { color: var(--muted); }
.list a::after { color: var(--muted); margin: 0; }
.list a:hover { text-decoration: none; }
@media (hover: hover) {
  .list a:hover { padding-inline: 12px 0; }
  .list a:hover::after { color: var(--accent); translate: 0.2em -0.12em; }
}
@container (max-width: 620px) {
  .list a { grid-template-columns: minmax(0, 1fr) auto; }
  .list span { grid-column: 1; grid-row: 2; }
  .list a::after { grid-row: 1 / span 2; align-self: center; }
}

/* stats: big figures. Real numbers only. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 36px var(--gap);
  padding: 0;
  list-style: none;
}
.stats b {
  display: block;
  font-size: clamp(3rem, 2rem + 4.6vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 20%, #8e8e93);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats span { display: block; max-width: 15em; margin-top: 10px; color: var(--muted); }

/* split: text beside a panel/spec/figure; stacks when narrow */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.split > * { container-type: inline-size; min-width: 0; }
.split.middle { align-items: center; }

/* flow: a pipeline of stages; sideways when wide, downwards when narrow.
   Long pipelines (5+ stages) turn downwards sooner so labels never squeeze. */
.flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 30px;
  padding: 0;
  list-style: none;
}
.flow > li {
  position: relative;
  min-width: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  transition: background 0.3s var(--ease);
}
.flow > li, .flow > li > a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
}
.flow > li:has(> a) { padding: 0; }
.flow > li > a { flex: 1; border-radius: inherit; color: inherit; }
.flow > li > a:hover { text-decoration: none; }
.flow > li:has(> a):hover { background: var(--surface-2); }
.flow b { font-weight: 600; letter-spacing: -0.01em; }
.flow span { font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
.flow > li + li::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: solid var(--muted);
  border-width: 1.5px 1.5px 0 0;
  rotate: 45deg;
  translate: 0 -50%;
}
@container (max-width: 620px) {
  .flow { grid-auto-flow: row; }
  .flow > li + li::before { left: 50%; top: -19px; rotate: 135deg; translate: -50% 0; }
}
@container (max-width: 940px) {
  .flow:has(> :nth-child(5)) { grid-auto-flow: row; }
  .flow:has(> :nth-child(5)) > li + li::before { left: 50%; top: -19px; rotate: 135deg; translate: -50% 0; }
}

/* spec: label → value rows */
.spec { border-top: 1px solid var(--line); }
.spec > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) minmax(0, 2.4fr);
  gap: 4px 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.spec dt { font-size: var(--t-small); line-height: 1.8; color: var(--muted); }
.spec dd { color: var(--ink); }
@container (max-width: 440px) {
  .spec > div { grid-template-columns: 1fr; }
}

/* steps: numbered cards */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps > li {
  flex: 1 1 250px;
  counter-increment: step;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font: 600 var(--t-small) var(--mono);
  color: var(--accent);
}
.steps p { margin-top: 8px; color: var(--muted); }

/* panel: a raised box for a figure, sample or diagram */
.panel {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.panel pre {
  overflow-x: auto;
  font: 400 0.8125rem / 1.65 var(--mono);
  color: var(--ink-2);
  tab-size: 2;
}
.panel figcaption, figure > figcaption {
  margin-top: 14px;
  font-size: var(--t-small);
  color: var(--muted);
}
code { font: 0.92em var(--mono); color: var(--ink); }

/* tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.hero .tags { justify-content: center; }
.tags li {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 980px;
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* generated: related + pager */
.related h2 { font-size: var(--t-h3); letter-spacing: -0.012em; }
.pager-band { padding-bottom: 0; }
.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: background 0.35s var(--ease);
}
.pager a:hover { background: var(--surface-2); }
.pager span { font-size: var(--t-small); color: var(--muted); }
.pager b { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; }
.pager .next { grid-column: 2; text-align: right; }
.pager .next b { color: var(--accent); }
.pager .prev b::after { display: none; }
.pager .next:hover b::after { translate: 0.2em -0.12em; }
@container (max-width: 560px) {
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; grid-row: 1; text-align: left; }
}

/* 6 ── motion ------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* The hero rises on load with CSS alone, so it never waits on JavaScript. */
.hero > * { animation: rise 0.9s var(--ease-out) both; }
.hero > :nth-child(2) { animation-delay: 0.07s; }
.hero > :nth-child(3) { animation-delay: 0.14s; }
.hero > :nth-child(4) { animation-delay: 0.21s; }
.hero > :nth-child(n + 5) { animation-delay: 0.28s; }

/* site.js adds .reveal only to things that start below the fold. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Page-to-page: a soft cross-fade while the nav bars stay put. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.16s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 0.36s var(--ease-out) both; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .gnav, .lnav, .pager-band, .related, .palette, .sitemap { display: none; }
  html, body { background: #fff; color: #000; }
}