/* The site's own layout, on ui.css's tokens (loaded before this): the bar,
   a tab's parts, prose, promises and their proof, the edges between
   Features and Why, the home page and the demos. Components keep ui.css's
   look; what's here places them and draws what only this site has. */
@layer reset, tokens, base, layout, components, motion;

/* ui.css declares these too; the editor's page canvas loads this file alone. */
@font-face { font-family: "Geist"; src: url(/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }


@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ol, ul, dl, dd, figure, pre { margin: 0; }
  ol, ul { padding: 0; }
  img, svg { display: block; max-width: 100%; }
  /* This file's layers outrank ui.css's, so element rules here leave ui's
     components (every class ui-*) alone. */
  :is(input, button):not([class*="ui-"]) { font: inherit; color: inherit; }
}

@layer tokens {
  :root {
    /* The site's own, beside ui.css's. */
    --brand-2: var(--line-piccadilly);
    --faint: color-mix(in srgb, var(--muted-foreground) 72%, var(--background));
    --deep-shadow: light-dark(oklch(0% 0 0 / .12), oklch(0% 0 0 / .6));
    --wrap: min(76rem, 100% - 32px);
    --read: min(44rem, 100% - 32px);
    --r: var(--radius, .625rem);
    --ease: cubic-bezier(.2, .7, .1, 1);
    --glow: color-mix(in srgb, var(--brand) 30%, transparent);
    /* The names the editor's page canvas still reads, for a page that loads
       this file without ui.css; each falls back to its old value. */
    --bg: var(--background, light-dark(oklch(98.6% 0.004 250), oklch(14.2% 0.012 258)));
    --bg-2: var(--muted, light-dark(oklch(96.2% 0.006 250), oklch(18.2% 0.014 258)));
    --bg-3: var(--accent, light-dark(oklch(93% 0.008 250), oklch(22% 0.016 258)));
    --fg: var(--foreground, light-dark(oklch(21% 0.02 258), oklch(95.5% 0.006 250)));
    --dim: var(--muted-foreground, light-dark(oklch(46% 0.02 258), oklch(73% 0.014 250)));
    --line: var(--border, light-dark(oklch(90% 0.008 250), oklch(26% 0.016 258)));
    --warn: light-dark(oklch(58% 0.14 70), oklch(82% 0.14 75));
    --sans: var(--font-sans, "Geist", ui-sans-serif, system-ui, sans-serif);
    --mono: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
  html, body { overflow-x: clip; }
  body {
    background: var(--background); color: var(--foreground);
    font: 400 16px/1.7 var(--font-sans); font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  ::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }
  a:not([class*="ui-"]) { color: var(--foreground); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--foreground) 30%, transparent); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color .15s; }
  a:not([class*="ui-"]):hover { text-decoration-color: currentColor; }
  h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.025em; line-height: 1.15; font-weight: 600; scroll-margin-top: 5rem; }
  p, li { text-wrap: pretty; }
  code, .mono { font-family: var(--font-mono); font-size: .875em; font-variant-ligatures: none; }
  :not(pre) > code { background: var(--muted); padding: .15em .38em; border-radius: calc(var(--radius) - 6px); font-size: .85em; }
  .skip { position: absolute; left: -999px; }
  .skip:focus { left: 16px; top: 12px; z-index: 10; background: var(--background); padding: .4rem .8rem; border-radius: var(--radius); }
  .sects, .home-sects, .head-text, .hero-text { display: contents; }
  .ui-button svg, .eyebrow svg, .pager svg { width: 1rem; height: 1rem; }
}

@layer layout {
  /* The bar */
  .bar {
    position: sticky; top: 0; z-index: 20; view-transition-name: bar; transition: translate .25s var(--ease);
    background: color-mix(in srgb, var(--background) 80%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .bar-inner { width: var(--wrap); margin-inline: auto; height: 3.5rem; display: flex; align-items: center; gap: 1.5rem; }
  .brand { display: flex; align-items: center; gap: .5rem; color: var(--foreground); text-decoration: none; font-weight: 600; letter-spacing: -.02em; }
  .brand svg { width: 1.3rem; height: 1.3rem; color: var(--brand); }
  .brand b { font-weight: 600; color: var(--muted-foreground); }
  .links { display: flex; gap: 1.5rem; }
  .links a { color: var(--muted-foreground); text-decoration: none; font-size: .875rem; font-weight: 500; transition: color .15s; }
  .links a:hover, .links a[aria-current="page"] { color: var(--foreground); }
  .bar-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
  .links-end { color: var(--muted-foreground); text-decoration: none; font-size: .875rem; font-weight: 500; margin-right: .5rem; transition: color .15s; }
  .links-end:hover, .links-end[aria-current="page"] { color: var(--foreground); }
  .menu-btn { display: none; }
  .try-btn { text-decoration: none; margin-left: .25rem; }
  .src-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--muted-foreground); cursor: help; }
  .src-btn svg { width: 1.1rem; height: 1.1rem; }
  /* The theme button shows the theme you're in. */
  .theme-btn .moon { display: none; }
  :root[data-theme="dark"] .theme-btn .sun { display: none; }
  :root[data-theme="dark"] .theme-btn .moon { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn .sun { display: none; }
    :root:not([data-theme="light"]) .theme-btn .moon { display: block; }
  }
  #theme { inset: 3.75rem 16px auto auto; margin: 0; width: 9rem; }
  #theme:popover-open { display: grid; }
  #theme .ui-menu-item { width: 100%; background: none; border: 0; color: var(--foreground); text-align: left; cursor: pointer; }
  #theme .ui-menu-item:hover, #theme .ui-menu-item:focus-visible { background: var(--accent); }
  #theme .ui-menu-item[aria-checked="true"] { font-weight: 600; }
  #theme .ui-menu-item[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--muted-foreground); }

  #menu {
    inset: 3.75rem 16px auto auto; margin: 0; width: min(16rem, calc(100vw - 32px)); max-height: none;
    opacity: 0; translate: 0 -4px; transition: opacity .15s, translate .15s var(--ease), display .15s allow-discrete, overlay .15s allow-discrete;
  }
  #menu:popover-open { display: grid; opacity: 1; translate: 0 0; }
  @starting-style { #menu:popover-open { opacity: 0; translate: 0 -4px; } }
  #menu .ui-menu-item { color: var(--foreground); text-decoration: none; padding: .5rem .625rem; font-size: .9375rem; }
  #menu .ui-menu-item:hover, #menu .ui-menu-item:focus-visible { background: var(--accent); }
  #menu .ui-menu-item[aria-current="page"] { font-weight: 600; }

  @media (max-width: 820px) {
    .links, .md, .links-end, .src-btn { display: none; }
    .menu-btn { display: inline-flex; }
  }

  /* Footer */
  /* One quiet row: the mark, what it is, and the two doors for agents. */
  .foot { margin-top: 8rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .8125rem; }
  .foot-inner { width: var(--wrap); margin-inline: auto; padding-block: 1.5rem 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
  .foot-brand { display: flex; align-items: center; gap: .45rem; color: var(--foreground); font-weight: 600; text-decoration: none; }
  .foot-brand svg { width: 1rem; height: 1rem; color: var(--brand); }
  .foot-brand b { font-weight: 600; color: var(--muted-foreground); }
  .foot-links { display: flex; gap: 1.25rem; margin-left: auto; }
  .foot a:not(.foot-brand) { color: var(--muted-foreground); text-decoration: none; transition: color .15s; }
  .foot a:not(.foot-brand):hover { color: var(--foreground); }
  @media (max-width: 600px) { .foot-links { margin-left: 0; width: 100%; } }

  /* Doc pages */
  .page { width: var(--wrap); margin-inline: auto; }
  .page-head { padding: clamp(2.5rem, 7vw, 4.5rem) 0 2rem; max-width: 48rem; }
  .page-head h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; view-transition-name: title; }
  .page-head .lede, .page-head p { margin-top: 1rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted-foreground); max-width: 40rem; line-height: 1.55; }
  .page-head .eyebrow { margin: 0 0 1rem; }
  .page-body { display: grid; grid-template-columns: minmax(0, 44rem) 1fr; gap: 4rem; border-top: 1px solid var(--border); padding-top: 2.5rem; }
  .toc { position: sticky; top: 5.5rem; align-self: start; justify-self: end; width: 14rem; font-size: .8125rem; }
  .toc p { color: var(--foreground); font-weight: 500; font-size: .875rem; margin-bottom: .75rem; }
  .toc ol { list-style: none; display: grid; gap: .1rem; }
  .toc a { display: block; padding: .2rem 0; color: var(--muted-foreground); text-decoration: none; line-height: 1.4; transition: color .15s; }
  .toc a:hover { color: var(--foreground); }
  @media (max-width: 1080px) { .page-body { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }

  /* Design's sidebar: shadcn's, pages down the left in their groups, fixed
     to the window with a scrollbar of its own; its grid column only keeps
     the room. On Design's pages the bar slides away on the way down and
     back on the way up (site.js), and what's pinned below it follows --top. */
  :root { --top: 3.5rem; --sb-w: 14rem; --sb-gap: 3rem; --sb-wrap: min(88rem, 100% - 32px); }
  :root[data-bar-hidden]:has(.with-sidebar) { --top: 0rem; }
  :root[data-bar-hidden]:has(.with-sidebar) .bar { translate: 0 -100%; }
  .page.with-sidebar { width: var(--sb-wrap); display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); gap: 0 var(--sb-gap); transition: grid-template-columns .2s var(--ease), gap .2s var(--ease); }
  .with-sidebar .page-main { grid-column: 2; }
  :root[data-sidebar-shut] .page.with-sidebar { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
  :root[data-sidebar-shut] .sidebar { visibility: hidden; padding: 0; border: 0; }
  .sidebar {
    position: fixed; top: var(--top); bottom: 0; left: 0; width: calc(var(--sb-w) + (100% - var(--sb-wrap)) / 2); z-index: 5;
    overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin;
    display: grid; align-content: start; gap: 1rem; padding: 1.75rem .75rem 2rem calc((100% - var(--sb-wrap)) / 2); border-right: 1px solid var(--border); background: var(--background);
    transition: top .25s var(--ease);
  }
  .crumbs-bar {
    position: sticky; top: var(--top); z-index: 10; display: flex; align-items: center; gap: .5rem; height: 3rem;
    background: color-mix(in srgb, var(--background) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border); transition: top .25s var(--ease);
  }
  .crumbs-bar .ui-separator { height: 1rem; align-self: center; }
  .with-sidebar .toc { top: calc(var(--top) + 5rem); transition: top .25s var(--ease); }
  .sb-trigger { margin-left: -.5rem; }
  .crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .875rem; color: var(--muted-foreground); }
  .crumbs li { display: inline-flex; align-items: center; gap: .375rem; }
  .crumbs svg { width: .875rem; height: .875rem; }
  .crumbs a { color: var(--muted-foreground); text-decoration: none; transition: color .15s; }
  .crumbs a:hover, .crumbs [aria-current] { color: var(--foreground); }
  .with-sidebar .page-head { padding-top: clamp(1.75rem, 4vw, 3rem); }
  /* The design's own host has no bar: what's pinned starts at the top, and
     a quiet badge at the right leads back to the public site. */
  :root:has(body.system) { --top: 0rem; }
  .sys-end { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
  body.system #theme { inset: 3rem 16px auto auto; }
  .sys-badge {
    display: inline-flex; align-items: center; gap: .375rem; height: 1.75rem; padding: 0 .625rem;
    border: 1px solid var(--border); border-radius: 999px; font-size: .8125rem; font-weight: 600; letter-spacing: -.02em;
    color: var(--muted-foreground); text-decoration: none; transition: color .15s, background-color .15s;
  }
  .sys-badge:hover { color: var(--foreground); background: var(--accent); }
  .sys-badge svg { width: .95rem; height: .95rem; color: var(--brand); }
  .sys-badge b { font-weight: 600; }
  .sys-top { display: flex; height: 3rem; align-items: center; }
  /* The footer starts where the page does, clear of the fixed sidebar. */
  body:has(.with-sidebar) .foot-inner { width: var(--sb-wrap); padding-left: calc(var(--sb-w) + var(--sb-gap)); }
  :root[data-sidebar-shut] body:has(.with-sidebar) .foot-inner { padding-left: 0; }
  .sb-label { display: flex; align-items: center; height: 2rem; padding: 0 .5rem; font-size: .75rem; font-weight: 500; color: var(--muted-foreground); }
  .sb-menu { list-style: none; display: grid; gap: .125rem; }
  .sb-item {
    display: flex; align-items: center; height: 2rem; padding: 0 .5rem; border-radius: calc(var(--radius) - 2px);
    font-size: .875rem; color: var(--foreground); text-decoration: none; transition: background-color .15s;
  }
  .sb-item:hover { background: var(--accent); }
  .sb-item[aria-current] { background: var(--accent); font-weight: 500; }
  @media (max-width: 1240px) { .with-sidebar .page-body { grid-template-columns: minmax(0, 1fr); } .with-sidebar .toc { display: none; } }
  @media (max-width: 800px) {
    .page.with-sidebar { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; width: auto; min-height: 0; max-height: none; border-right: 0; padding: 1rem 0 0; display: flex; gap: .125rem; overflow-x: auto; scrollbar-width: none; }
    body:has(.with-sidebar) .foot-inner { padding-left: 0; }
    .with-sidebar .page-main { display: contents; grid-column: auto; }
    .with-sidebar .crumbs-bar { order: -1; }
    .with-sidebar .page-main > :not(.crumbs-bar) { order: 1; }
    :root[data-sidebar-shut] .sidebar { display: none; }
    .sb-group, .sb-menu, .sb-menu li { display: contents; }
    .sb-label { display: none; }
    .sb-item { flex: none; }
  }
}

@layer components {
  /* Prose */
  .prose { min-width: 0; font-size: 1rem; }
  .prose .sect + .sect { margin-top: 3rem; }
  .prose h2 { font-size: 1.625rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); position: relative; }
  .prose h3 { font-size: 1.25rem; margin: 2.25rem 0 .6rem; }
  .prose h4 { font-size: 1.0625rem; margin: 1.8rem 0 .4rem; line-height: 1.35; letter-spacing: -.01em; }
  .prose h3 + h4, .prose h2 + h4 { margin-top: 1rem; }
  .prose p, .prose ul, .prose ol, .prose table, .prose pre, .prose .notice, .prose .install { margin-bottom: 1.15rem; }
  .prose p, .prose li { color: color-mix(in srgb, var(--foreground) 88%, var(--muted-foreground)); }
  .prose li { margin: .4rem 0 .4rem 1.25rem; padding-left: .2rem; }
  .prose li::marker { color: var(--faint); }
  /* Design's link lists, drawn as cards (build.mjs, cards). */
  /* System's diagram: drawn on the theme's tokens, so it follows light and dark. */
  .prose .sysmap-wrap { overflow-x: auto; margin-block: 1.5rem; }
  .prose .sysmap { width: 100%; min-width: 36rem; height: auto; font-family: var(--font-sans); }
  .sysmap a { text-decoration: none; }
  .sysmap .edge { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 6 5; }
  .sysmap .edge-label { fill: var(--muted-foreground); font: 500 12px var(--font-mono); }
  .sysmap .part { fill: var(--card); stroke: var(--foreground); stroke-width: 1.2; }
  .sysmap a:hover .part { fill: var(--accent); }
  .sysmap .inner { fill: var(--muted); stroke: var(--border); }
  .sysmap .actor { fill: none; stroke: var(--muted-foreground); stroke-dasharray: 3 3; }
  .sysmap .name { fill: var(--foreground); font-size: 14px; font-weight: 500; }
  .sysmap .note { fill: var(--muted-foreground); font-size: 11px; }
  .sysmap .if { fill: var(--brand); font: 500 11px var(--font-mono); }
  .sysmap .link { stroke: var(--brand); stroke-width: 1.5; }
  .sysmap .session { stroke-dasharray: 5 4; }
  .sysmap .out { stroke: var(--muted-foreground); stroke-width: 1; }
  .prose .link-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .5rem; counter-reset: card; }
  .prose .link-cards li { margin: 0; padding: 0; counter-increment: card; }
  .prose .link-cards a {
    display: flex; gap: .6rem; align-items: baseline; height: 100%; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
    background: var(--card); box-shadow: var(--shadow-xs); color: var(--foreground); font-size: .9375rem; font-weight: 500; line-height: 1.4; text-decoration: none;
    transition: background-color .15s, box-shadow .15s;
  }
  .prose .link-cards a:hover { background: color-mix(in srgb, var(--accent) 60%, var(--card)); box-shadow: var(--shadow-sm); }
  .prose ol.link-cards a::before { content: counter(card); font: 500 .75rem var(--font-mono); color: var(--muted-foreground); }
  .prose strong { color: var(--foreground); font-weight: 600; }
  .prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: 0; display: flex; gap: .7rem; align-items: baseline; }
  .prose input[type="checkbox"] {
    appearance: none; flex: none; width: 1rem; height: 1rem; border-radius: 4px; border: 1px solid var(--input); box-shadow: var(--shadow-xs); translate: 0 .15rem;
    display: grid; place-items: center;
  }
  .prose input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
  .prose input[type="checkbox"]:checked::after { content: ""; width: .5rem; height: .28rem; border: 2px solid var(--primary-foreground); border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -.06rem; }
  .prose li:has(> input:not(:checked)) { color: var(--muted-foreground); }
  .anchor { position: absolute; left: -1.1em; color: var(--faint); text-decoration: none; opacity: 0; transition: opacity .15s; font-weight: 400; }
  h2:hover > .anchor, h3:hover > .anchor, h4:hover > .anchor { opacity: 1; }
  .prose table { width: 100%; border-collapse: collapse; font-size: .875rem; display: block; overflow-x: auto; }
  .prose th, .prose td { text-align: left; vertical-align: top; padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--border); }
  .prose th { font-weight: 500; color: var(--foreground); }
  .prose td:first-child { white-space: nowrap; }
  .prose pre { background: var(--code-bg); border: 1px solid var(--border); padding: 1rem 1.15rem; border-radius: var(--radius); overflow-x: auto; font-size: .8125rem; line-height: 1.65; }
  .prose pre code { background: none; padding: 0; font-size: inherit; }
  .prose img { max-width: 100%; height: auto; margin: 1rem 0 1.5rem; border-radius: var(--radius); }
  .prose .proof { font-size: .9375rem; color: var(--muted-foreground); border-left: 2px solid var(--border); padding-left: .85rem; }
  .prose .proof b { color: var(--foreground); font-weight: 600; margin-right: .25rem; }
  /* What an item derives from: a quiet row of badges under its heading. */
  .prose .from { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; font-size: .8125rem; }
  .prose .from-label { color: var(--muted-foreground); margin-right: .15rem; }
  .prose .from .ui-badge { white-space: normal; text-decoration: none; font-weight: 500; }
  .prose .from .ui-badge:hover { border-color: var(--foreground); }
  /* A draft that needs the maker's review: a box, so it stands apart. */
  .prose .draft-box { margin: 1.5rem 0; padding: .25rem 1.15rem .1rem; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); background: color-mix(in srgb, var(--warning) 6%, var(--card)); border-radius: var(--radius); }
  .prose .draft-box > :first-child + * { margin-top: .4rem; }
  .prose .draft-label { margin: .75rem 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--warning); }
  .prose .draft-box h3:first-of-type, .prose .draft-box h4:first-of-type { margin-top: .5rem; }

  .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; }
  .pager a {
    display: grid; gap: .2rem; padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs);
    color: var(--foreground); text-decoration: none; font-weight: 500; font-size: .9375rem; transition: background-color .15s, border-color .15s;
  }
  .pager a:hover { background: var(--accent); }
  .pager small { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted-foreground); font-size: .8125rem; font-weight: 400; }
  .pager .next { text-align: right; grid-column: 2; }
  .pager .next small { justify-content: flex-end; }
  .pager .prev small svg { margin-left: -.25rem; }
  .pager .next small svg { margin-right: -.25rem; }

  /* Tutorial: each h2 is a numbered step on a line. */
  .tutorial .prose { counter-reset: step; }
  .tutorial .sect { position: relative; padding-left: 3.25rem; padding-bottom: .5rem; }
  .tutorial .sect::before { content: ""; position: absolute; left: .95rem; top: 2.4rem; bottom: -2.5rem; width: 1px; background: linear-gradient(var(--border), transparent); }
  .tutorial .sect:last-of-type::before { display: none; }
  .tutorial .sect h2 { counter-increment: step; border: 0; }
  .tutorial .sect h2::before {
    content: counter(step); position: absolute; left: -3.25rem; top: -.1rem;
    width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    font: 600 .8125rem var(--font-mono); color: var(--foreground); background: var(--muted); border: 1px solid var(--border);
  }
  .tutorial .sect .anchor { display: none; }

  .notice { display: flex; gap: .75rem; align-items: baseline; border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); background: color-mix(in srgb, var(--warning) 6%, var(--card)); }
  .notice .ui-alert-description { color: var(--foreground); font-size: .9375rem; }
  .notice-dot { translate: 0 -.05rem; }

  .install { margin-bottom: 1.15rem; }
  .install code::before { content: "$ "; color: var(--faint); }
  .install .copy { flex: none; }

  /* A tab's parts: Overview, then a row per group, its name in the margin,
     its parts a tab list. */
  .subtabs { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .5rem 1rem; padding-top: 1.75rem; }
  .subtabs .tg { display: contents; }
  .subtabs small { grid-column: 1; text-align: right; font-size: .75rem; font-weight: 500; color: var(--muted-foreground); }
  .subtabs .ui-tabs-list { grid-column: 2; justify-self: start; max-width: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .subtabs .ui-tabs-trigger { flex: none; text-decoration: none; padding: .25rem .65rem; }
  .subtabs + .page-head { padding-top: clamp(2rem, 5vw, 3rem); }
  /* A phone has room for one row: every tab in it, scrolling sideways,
     the groups' names dropped and the page's own tab scrolled into view. */
  @media (max-width: 640px) {
    .subtabs {
      display: flex; gap: 0; padding: 3px; margin-top: 1.25rem; overflow-x: auto; scrollbar-width: none;
      background: var(--muted); border-radius: var(--radius);
    }
    .subtabs small { display: none; }
    .subtabs .ui-tabs-list { display: contents; }
  }

  /* A promise or a story: the reading line holds only it and why it
     matters; its proof is one press away, in a popover. */
  .eyebrow { display: flex; align-items: center; gap: .25rem; font-size: .875rem; color: var(--muted-foreground); }
  .eyebrow svg { width: .875rem; height: .875rem; }
  .prose .promise, .prose .story, .prose .kept { position: relative; display: flex; align-items: baseline; gap: 1rem; }
  .prose .promise .anchor, .prose .story .anchor, .prose .kept .anchor { position: absolute; left: -1.1em; margin: 0; }
  .prose .story { font-size: 1.125rem; }
  .h-text { flex: 1; min-width: 0; }
  .ui-button.trail { flex: none; height: 1.6rem; padding: 0 .55rem; font: 500 .6875rem/1 var(--font-mono); letter-spacing: .02em; color: var(--muted-foreground); box-shadow: none; translate: 0 -.1em; }
  .ui-button.trail:hover, .ui-button.trail:focus-visible { color: var(--foreground); }

  /* The popover behind a promise's proof, beside it where the browser can
     anchor it, otherwise centred. */
  .pop.ui-popover { width: min(28rem, calc(100vw - 32px)); max-height: min(70vh, 32rem); overflow: auto; padding: .9rem 1rem; font-size: .875rem; line-height: 1.5; }
  .prose .pop > * { margin: 0; }
  .prose .pop > * + * { margin-top: .6rem; }
  .prose .pop li { margin: 0; padding-left: 0; }
  @supports (position-area: bottom) {
    .pop { inset: auto; margin: 6px 0; position-area: bottom span-left; position-try-fallbacks: top span-left, bottom span-right, top span-right; }
  }
  .pop-shown, .prose .pop .pop-shown { color: var(--foreground); }
  .pop-sum, .prose .pop .pop-sum, .trace-links { color: var(--muted-foreground); }
  .lbl { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); margin-right: .4rem; }
  .evidence, .served { list-style: none; padding: 0; }
  .evidence li, .served li { padding: .35rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
  .evidence li:last-child, .served li:last-child { border-bottom: 0; }
  .evidence code { font-size: .75rem; color: var(--muted-foreground); background: none; padding: 0; }
  .ui-badge.ev-what { min-width: 4.4rem; margin-right: .35rem; font-size: .6875rem; vertical-align: .05em; }
  .ev-run, .prose .pop .ev-run { font-size: .8rem; color: var(--faint); }

  /* Edges: a line off the margin for each link between Features and Why,
     up (left) from a part of Features, down (right) from a story. Following
     one lands on the same line at its other end. */
  .prose h2, .prose h3, .prose h4 { position: relative; }
  .edges { position: absolute; top: calc(.62em - 40px); width: 100vw; height: 80px; z-index: 2; pointer-events: none; }
  .edges-up { right: calc(100% + 8px); }
  .edges-down { left: calc(100% + 8px); }
  .prose h2 .edges { top: calc(.62em - 40px); }
  .edge { position: absolute; inset: 0; color: color-mix(in srgb, var(--muted-foreground) 55%, transparent); outline: 0; }
  .edge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; max-width: none; }
  .edges-up svg { scale: -1 1; }
  .edge-line { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; pointer-events: none; }
  .edge-hit { fill: none; stroke: transparent; stroke-width: 11; pointer-events: stroke; cursor: pointer; }
  .edge:hover, .edge:focus-visible { color: var(--brand); z-index: 1; }
  .edge:hover .edge-line, .edge:focus-visible .edge-line { stroke-width: 1.7; }
  .edge:focus-visible svg { outline: 0; }
  .arrive { position: absolute; top: 0; pointer-events: none; }
  .edges-up .arrive { right: 0; } .edges-down .arrive { left: 0; }
  /* Arriving by a line: it is the one you followed, still flowing in. */
  .edge:has(.arrive:target) { color: var(--warning); }
  .edge:has(.arrive:target) .edge-line { stroke-width: 1.7; stroke-dasharray: 9 0; animation: flow-in 1.8s ease-out .2s both; }
  @keyframes flow-in { from { stroke-dasharray: 14 6; stroke-dashoffset: -400; } to { stroke-dasharray: 14 0; stroke-dashoffset: 0; } }
  .edge-note {
    position: absolute; top: 50px; width: max-content; max-width: min(24rem, 80vw); padding: .5rem .7rem;
    background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-md);
    font: 400 .8125rem/1.45 var(--font-sans); letter-spacing: 0; text-wrap: pretty;
    opacity: 0; translate: 0 -3px; pointer-events: none; transition: opacity .12s, translate .12s;
  }
  .edges-up .edge-note { left: calc(100% + 8px); }
  .edges-down .edge-note { right: calc(100% + 8px); }
  .edge:hover .edge-note, .edge:focus-visible .edge-note { opacity: 1; translate: 0; }
  .edge-to { display: block; font-size: .75rem; font-weight: 600; color: var(--brand-text); }
  :is(h2, h3, h4):has(.edges-up) > .anchor { display: none; }

  /* Compare */
  .ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0 1.5rem; }
  .ways .ui-card { padding: 1.1rem 0; gap: 0; }
  .ways .ui-card-header { padding: 0 1.1rem; gap: .5rem; }
  .ways .ui-card-description { line-height: 1.6; }
  .matrix-wrap { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .prose .matrix { display: table; margin: 0; font-size: .8125rem; }
  .prose .matrix th, .prose .matrix td { padding: .45rem .5rem; text-align: center; border-bottom: 0; }
  .prose .matrix tbody th { text-align: left; white-space: nowrap; font-weight: 500; color: var(--foreground); padding-left: .85rem; }
  .prose .matrix tbody th a { text-decoration: none; }
  .prose .matrix tbody th small { color: var(--muted-foreground); font-weight: 400; }
  .prose .matrix thead th { vertical-align: bottom; height: 9.5em; font-weight: 500; color: var(--muted-foreground); }
  .matrix thead th span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .prose .matrix thead th:first-child { text-align: left; padding-left: .85rem; }
  .matrix .ours { background: color-mix(in srgb, var(--brand) 7%, transparent); }
  .matrix .ours:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
  .v-yes { color: var(--success); } .v-partly { color: var(--warning); } .v-no { color: var(--faint); } .v-plan { color: var(--brand-2); }
  .prose .legend { font-size: .8125rem; color: var(--muted-foreground); display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .75rem; }
  .vmark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; vertical-align: -1px; background: none; }
  .v-yes .vmark { background: currentColor; }
  .v-partly .vmark { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
  .v-plan .vmark { border-style: dashed; }
  .tool.ui-card { margin-top: 1.25rem; gap: 1rem; padding: 1.25rem 0; }
  .tool .ui-card-header, .tool .ui-card-content { padding: 0 1.25rem; }
  .prose .tool h3.ui-card-title { margin: 0; font-size: 1.0625rem; line-height: 1.3; position: relative; }
  .prose .tool .ui-card-content > p { margin-bottom: .6rem; font-size: .9375rem; }
  .prose .kind { color: var(--muted-foreground); font-size: .875rem; margin: .1rem 0 .6rem; }
  .prose .tool .kind { margin: 0; }
  .prose .has { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: .3rem 1rem; font-size: .8125rem; margin: .9rem 0; }
  .prose .has li { margin: 0; padding: 0; color: var(--foreground); }
  .has li > span { margin-right: .3rem; }
  .prose .has li.v-no { color: var(--faint); }
  .has small { display: block; margin-left: 1.4em; color: var(--muted-foreground); }
  .prose .src { font-size: .8125rem; color: var(--faint); margin: 0; }
  .needs { display: grid; gap: 0; }
  .need { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
  .need:last-child { border-bottom: 0; }
  .prose .need h3 { margin-top: 0; font-size: 1.0625rem; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  @media (max-width: 640px) {
    .ways { grid-template-columns: 1fr; }
    .anchor { display: none; }
    /* Room in the margin for a page's lines to show before they leave it. */
    .page:has(.edges-up) .prose { padding-left: 20px; }
    .page:has(.edges-down) .prose { padding-right: 20px; }
    .edges-up { right: calc(100% + 4px); } .edges-down { left: calc(100% + 4px); }
    .edge-note { max-width: calc(100vw - 72px); }
    .pager { grid-template-columns: minmax(0, 1fr); }
    .pager .next { grid-column: 1; }
  }

  /* The overview's cards, one per part */
  .parts { display: grid; gap: 2rem; margin: 1rem 0 2.5rem; }
  .prose .parts .pg { font-size: .875rem; font-weight: 500; color: var(--muted-foreground); margin: 0 0 .75rem; letter-spacing: 0; }
  .parts ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem; margin: 0; }
  .prose .parts li { margin: 0; padding: 0; }
  .parts a { display: block; height: 100%; text-decoration: none; color: inherit; border-radius: calc(var(--radius) + 4px); }
  .parts .ui-card { height: 100%; padding: 1.1rem 0; gap: 0; box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s, background-color .15s; }
  .parts .ui-card-header { padding: 0 1.1rem; gap: .5rem; }
  .parts .ui-card-title { font-size: .9375rem; }
  .parts .ui-card-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
  .parts .ui-card-description code { font-size: .8em; }
  .parts a:hover .ui-card { background: color-mix(in srgb, var(--accent) 60%, var(--card)); box-shadow: var(--shadow-sm); }

  /* ---------- Home ---------- */
  /* The first screen is the drums turning to "Your OS" in the middle and
     the title in the bottom left, and nothing else. */
  .hero {
    position: relative; isolation: isolate; overflow: clip;
    margin-top: -3.5rem; padding: 3.5rem 0 clamp(2rem, 5vw, 3.5rem); min-height: 100svh;
    display: flex; flex-direction: column; gap: 1rem;
    color: var(--foreground); border-bottom: 1px solid var(--border);
  }
  .intro { flex: 1; display: grid; place-items: center; }
  /* Everything is placed here, nothing measured: a drum is as wide as its
     widest word (.cr-size stacks them all, unseen), its radius is a face's
     height over 2·tan(9°), and each drum looks from the gap between them,
     so the two share one vanishing point. carousel.tsx only sets --a. */
  .cr-line {
    --fs: clamp(1.6rem, 4.6vw, 3.5rem); --h: calc(var(--fs) * 1.2); --gap: .3em;
    --r: calc(var(--h) * 3.1569);
    font-size: var(--fs); font-weight: 750; letter-spacing: -.045em; line-height: 1;
    display: flex; justify-content: center; gap: var(--gap);
  }
  .cr-cyl { position: relative; height: calc(var(--h) * 5.2); perspective: calc(var(--fs) * 18); }
  .cr-left { perspective-origin: calc(100% + var(--gap) / 2) 50%; }
  .cr-right { perspective-origin: calc(var(--gap) / -2) 50%; }
  .cr-size { display: grid; height: 0; overflow: hidden; visibility: hidden; }
  .cr-size > * { grid-area: 1 / 1; white-space: nowrap; }
  .cr-drum { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transform: translateZ(calc(var(--r) * -1)) rotateX(calc(var(--a, 0) * 18deg)); }
  /* Without the outline and contain, a turned face drew a grey line along its bottom edge. */
  .cr-face {
    position: absolute; inset: 50% 0 auto; height: var(--h); margin-top: calc(var(--h) / -2);
    display: flex; align-items: center; white-space: nowrap; color: var(--foreground);
    transform: rotateX(calc(var(--i) * -18deg)) translateZ(var(--r));
    backface-visibility: hidden; outline: 1px solid transparent; contain: paint;
  }
  .cr-face.hl { color: var(--brand); }
  .cr-left .cr-face { justify-content: flex-end; }

  .hero-inner { width: var(--wrap); margin-inline: auto; }
  .hero h1 {
    max-width: 15ch; font-size: clamp(2.25rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -.05em; font-weight: 700;
    padding-bottom: .08em; view-transition-name: title;
  }
  .home .sect { width: var(--wrap); margin-inline: auto; padding-top: clamp(5rem, 12vw, 8rem); }
  .home .sect > h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; max-width: 18ch; margin-bottom: 1.25rem; }
  .home .sect > p { font-size: clamp(1.05rem, 1.4vw, 1.175rem); color: var(--muted-foreground); max-width: 38rem; line-height: 1.6; }
  .home .sect > p + p { margin-top: 1rem; }
  .home .sect > .install { max-width: 44rem; margin-top: 1.5rem; }
  .home .anchor { display: none; }

  /* See it: a stand-in for a recording, panes tiled like i3. */
  .ws { margin-top: 2.5rem; }
  .ws-frame { background: var(--night); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); padding: .5rem; box-shadow: 0 30px 80px -40px var(--deep-shadow); }
  .ws-bar { display: flex; align-items: center; gap: .35rem; padding: .1rem .25rem .5rem; font-size: .75rem; }
  .ws-tag { min-width: 1.4rem; text-align: center; border-radius: 4px; padding: .05rem .35rem; color: var(--muted-foreground); background: var(--muted); }
  .ws-tag[data-on] { background: var(--brand); color: var(--brand-foreground); }
  .ws-clock { margin-left: auto; color: var(--faint); }
  .ws-tiles { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: .5rem; }
  .ws-tiles > :first-child { grid-row: span 2; }
  .ws-tiles > :last-child { grid-column: 1 / -1; }
  .ws-pane { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); min-width: 0; }
  .ws-pane:first-child { border-color: var(--brand); }
  .ws-title { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-bottom: 1px solid var(--border); font-size: .8125rem; }
  /* Each machine is a line: its colour as a bar before the pane's name. */
  .ws-title::before { content: ""; width: .9rem; height: .3rem; border-radius: 99px; background: var(--line); flex: none; }
  .ws-pane.planned .ws-title::before { opacity: .45; }

  /* Isn't this just …? The heading's name turns; the marks below light in step. */
  .home .sect > h2 .rv-name { display: inline-block; }
  .rv-name.shine-a { animation: shine-a 1.1s var(--ease); }
  .rv-name.shine-b { animation: shine-b 1.1s var(--ease); }
  .rv-name.shine-a, .rv-name.shine-b {
    background: linear-gradient(100deg, var(--foreground) 35%, var(--brand) 50%, var(--foreground) 65%) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  @keyframes shine-a { from { background-position: 100% 0; opacity: 0; translate: 0 .15em; } 25% { opacity: 1; translate: 0 0; } to { background-position: 0 0; } }
  @keyframes shine-b { from { background-position: 100% 0; opacity: 0; translate: 0 .15em; } 25% { opacity: 1; translate: 0 0; } to { background-position: 0 0; } }
  .rivals { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: 2rem 0 1.5rem; padding: 0; }
  .rivals li { color: var(--muted-foreground); opacity: .45; transition: opacity .4s, color .4s; }
  .rivals li.on { opacity: 1; color: var(--foreground); }
  .rivals svg { width: 1.9rem; height: 1.9rem; }
  .ws-on { color: var(--muted-foreground); }
  .ws-on::before { content: "on "; color: var(--faint); }
  .ws-title .ui-badge { margin-left: auto; }
  .ws-body { margin: 0; padding: .7rem; font-size: .8125rem; line-height: 1.6; color: var(--foreground); white-space: pre-wrap; min-height: 6.5rem; }
  .ws-pane.planned { background: transparent; border-style: dashed; }
  .ws-pane.planned .ws-body, .ws-pane.planned b { color: var(--faint); }
  .ws figcaption { margin-top: .9rem; font-size: .875rem; color: var(--muted-foreground); }
  @media (max-width: 640px) {
    .ws-tiles { grid-template-columns: minmax(0, 1fr); }
    .ws-tiles > :first-child { grid-row: auto; }
  }

  /* What we won't claim */
  #s-what-we-wont-claim ul { list-style: none; margin-top: 2rem; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); overflow: hidden; }
  #s-what-we-wont-claim li { background: var(--card); padding: 1.1rem 1.4rem 1.1rem 3.2rem; margin: 0; position: relative; color: var(--muted-foreground); }
  #s-what-we-wont-claim li::before { content: "✕"; position: absolute; left: 1.4rem; top: 1.1rem; color: var(--faint); font-size: .875rem; }
  #s-what-we-wont-claim li strong { color: var(--foreground); font-weight: 600; }

  /* Metro: the overview as a map, wider than the text, and scrolled sideways on a phone. */
  .metro-figure { position: relative; margin: 2.5rem 0 3rem; display: grid; gap: .75rem; }
  .page .metro-figure { margin-right: calc(-1 * min(16rem, 25vw)); }
  @media (max-width: 1080px) { .page .metro-figure { margin-right: 0; } }
  .metro-sheet { overflow-x: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); background: var(--background); }
  .metro-map { display: block; width: 100%; min-width: 680px; height: auto;
    --l-br: var(--line-piccadilly); --l-sh: var(--line-district); --l-ph: var(--line-overground); --l-ag: var(--line-elizabeth); --l-sy: var(--muted-foreground); }
  .metro-figure figcaption { color: var(--muted-foreground); font-size: .875rem; }
  .metro-map text { fill: var(--foreground); font-family: var(--font-sans); font-size: 13px; }
  .metro-map .t { font-weight: 600; font-size: 14px; }
  .metro-map .s { fill: var(--muted-foreground); font-size: 12px; }
  .metro-map .zone2 { fill: var(--muted); }
  .metro-map .zname { font: 500 13px var(--font-mono); letter-spacing: .14em; fill: var(--muted-foreground); }
  .metro-map .cas { fill: none; stroke: var(--background); stroke-linejoin: round; stroke-linecap: round; }
  .metro-map .cas.thk { stroke-width: 11; } .metro-map .cas.thn { stroke-width: 6; }
  .metro-map .ln2 { fill: none; stroke-linejoin: round; stroke-linecap: round; }
  .metro-map .ln2.thk { stroke-width: 7; } .metro-map .ln2.thn { stroke-width: 2.5; }
  .metro-map .ln2.l-br, .metro-map .tick.l-br { stroke: var(--l-br); } .metro-map .pill.l-br { fill: var(--l-br); }
  .metro-map .ln2.l-sh { stroke: var(--l-sh); } .metro-map .pill.l-sh { fill: var(--l-sh); }
  .metro-map .ln2.l-ph { stroke: var(--l-ph); } .metro-map .pill.l-ph { fill: var(--l-ph); }
  .metro-map .ln2.l-ag, .metro-map .tick.l-ag { stroke: var(--l-ag); } .metro-map .pill.l-ag { fill: var(--l-ag); }
  .metro-map .ln2.l-sy { stroke: var(--l-sy); }
  .metro-map .soon { opacity: .42; }
  .metro-map .tick { fill: none; stroke-width: 5; stroke-linecap: butt; }
  .metro-map .ringst { fill: var(--card); stroke: var(--foreground); stroke-width: 3.5; }
  .metro-map .mainstn { fill: none; stroke: var(--foreground); stroke-width: 3.5; }
  .metro-map .mainhalo { fill: none; stroke: var(--background); stroke-width: 9; }
  .metro-map .ic { fill: none; stroke: var(--foreground); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .metro-map .st { font: 500 14px var(--font-sans); fill: var(--foreground); }
  .metro-map .pillt { font: 600 13px var(--font-sans); fill: #fff; }
  .metro-map .kb { fill: var(--card); stroke: var(--border); stroke-width: 1; }
  .metro-map .hitline { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; }
  .metro-map .cas, .metro-map .ln2, .metro-map .mainhalo, .metro-map .zname { pointer-events: none; }
  .metro-map [tabindex] { cursor: pointer; outline: none; }
  .metro-map [tabindex] :is(.mainstn, .ringst, .tick) { pointer-events: all; }
  .metro-map [tabindex]:is(:hover, .on, :focus-visible) .st { fill: var(--brand); text-decoration: underline; }
  .metro-map [tabindex]:is(:hover, .on, :focus-visible) :is(.mainstn, .ringst) { stroke: var(--brand); }
  .metro-map [tabindex]:is(:hover, .on, :focus-visible) .pill { stroke: var(--foreground); stroke-width: 2; }
  .metro-map [tabindex]:is(:hover, .on, :focus-visible) .hitline { stroke: color-mix(in srgb, var(--brand) 22%, transparent); }
  .metro-map [tabindex]:is(:hover, .on, :focus-visible) .zone2 { fill: color-mix(in srgb, var(--brand) 12%, var(--muted)); }
  .metro-pop { position: absolute; z-index: 5; width: min(19rem, calc(100% - 1rem)); display: grid; gap: .4rem; padding: .75rem 2.2rem .75rem .9rem;
    background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: .875rem; line-height: 1.45; }
  .metro-pop[hidden] { display: none; }
  .metro-pop h4 { margin: 0; font-size: .95rem; font-weight: 600; }
  .metro-more { font-weight: 500; justify-self: start; }
  .metro-x { position: absolute; top: .4rem; right: .4rem; width: 1.6rem; height: 1.6rem; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--muted-foreground); font-size: 1.1rem; line-height: 1; cursor: pointer; }
  .metro-x:is(:hover, :focus-visible) { background: var(--accent); color: var(--foreground); }
  .metro-soon { font: 600 .625rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 99px; padding: 2px 6px; vertical-align: 2px; white-space: nowrap; }
  .metro-who { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 4px 0 0; }
  .metro-who dt { font-weight: 600; } .metro-who dd { margin: 0; color: var(--muted-foreground); }

  /* Journey: a sticky stage, beats scroll past it. */
  .journey { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; margin: 2.5rem 0 4rem; view-timeline: --journey block; }
  .page .journey { margin-right: calc(-1 * min(16rem, 25vw)); }
  .j-stage {
    position: sticky; top: 7rem; align-self: start; height: 15rem; border-radius: calc(var(--radius) + 6px);
    background: var(--muted); border: 1px solid var(--border); overflow: hidden;
    background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--foreground) 12%, transparent) 1px, transparent 0); background-size: 18px 18px;
  }
  .j-node { position: absolute; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: calc(var(--radius) + 6px);
    background: var(--card); border: 1px solid var(--border); z-index: 1; box-shadow: var(--shadow-md); }
  .j-node span { position: absolute; top: calc(100% + .5rem); white-space: nowrap; font-size: .75rem; font-weight: 500; color: var(--muted-foreground); }
  .j-node::before { content: ""; width: 1.6rem; height: 1.6rem; border-radius: 6px; border: 1.5px solid var(--muted-foreground); }
  .j-tab { left: 14%; } .j-relay { left: 50%; } .j-laptop { left: 86%; }
  .j-relay::before { border-radius: 50%; border-color: var(--brand-2); border-style: dashed; }
  .j-laptop::before { border-radius: 4px; width: 2rem; height: 1.3rem; border-color: var(--brand); }
  .j-wire { position: absolute; top: 50%; left: 14%; right: 14%; height: 1px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px); }
  .j-packet { position: absolute; top: calc(50% - 2.6rem); left: 14%; translate: -50% 0; z-index: 2; height: 1.6rem; display: grid; }
  .j-packet > span { grid-area: 1 / 1; padding: .15rem .55rem; border-radius: 6px; font-size: .75rem; white-space: nowrap; }
  .j-plain { background: var(--brand); color: var(--brand-foreground); }
  .j-sealed { background: var(--brand-2); color: var(--background); opacity: 0; }
  .j-beats { list-style: none; counter-reset: beat; display: grid; gap: 0; }
  .prose .j-beats li { counter-increment: beat; min-height: 34vh; padding: 1rem 0; margin: 0; color: var(--muted-foreground); font-size: 1.0625rem; }
  .j-beats li::before { content: "0" counter(beat); display: block; font: 500 .75rem var(--font-mono); color: var(--brand-text); margin-bottom: .5rem; }
  .j-beats b { display: block; color: var(--foreground); font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .3rem; font-weight: 600; }
  @media (max-width: 1080px) { .page .journey { margin-right: 0; } }
  @media (max-width: 760px) {
    .journey { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .j-stage { top: 4.4rem; height: 11rem; z-index: 1; }
    .j-node { width: 3.8rem; height: 3.8rem; }
    .prose .j-beats li { min-height: 46vh; }
  }
}

@layer motion {
  @keyframes rise { from { opacity: 0; translate: 0 18px; filter: blur(6px); } }

  @keyframes j-travel {
    0%, 6% { left: 14%; } 40%, 46% { left: 50%; } 72%, 78% { left: 86%; } 100% { left: 14%; }
  }
  @keyframes j-plain { 0%, 8% { opacity: 1; } 12%, 70% { opacity: 0; } 74%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }
  @keyframes j-sealed { 0%, 8% { opacity: 0; } 12%, 70% { opacity: 1; } 74%, 78% { opacity: 0; } 82%, 100% { opacity: 1; } }
  @keyframes j-relay { 0%, 34%, 52%, 100% { box-shadow: var(--shadow-md); } 40%, 46% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-2) 20%, transparent), 0 0 40px color-mix(in srgb, var(--brand-2) 40%, transparent); } }
  @keyframes j-laptop { 0%, 66%, 84%, 100% { box-shadow: var(--shadow-md); } 72%, 78% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 20%, transparent), 0 0 40px var(--glow); } }
  @keyframes beat { from, to { opacity: .3; } 40%, 60% { opacity: 1; } }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

    .page-head > :not(.head-text), .head-text > * { animation: rise .7s var(--ease) both; }

    /* Fallback: the journey loops in time. */
    .j-packet { animation: j-travel 7s var(--ease) infinite; }
    .j-plain { animation: j-plain 7s linear infinite; }
    .j-sealed { animation: j-sealed 7s linear infinite; }
    .j-relay { animation: j-relay 7s linear infinite; }
    .j-laptop { animation: j-laptop 7s linear infinite; }

    @supports (animation-timeline: view()) {
      /* Sections arrive as they scroll in. */
      .home .sect > *, .prose .sect {
        animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
      }
      /* The journey is driven by the scroll, not the clock. */
      .j-packet, .j-plain, .j-sealed, .j-relay, .j-laptop {
        animation-duration: auto; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: both;
        animation-timeline: --journey; animation-range: contain 0% contain 100%;
      }
      .j-beats li { animation: beat linear both; animation-timeline: view(); animation-range: cover 20% cover 80%; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .edge-line { animation: none !important; }
  }
}

/* Following a line between Features and Why moves the view as if the two
   pages lay side by side: in from the side its line went off, and up or
   down by how far apart its two ends are; any other way between pages is
   the usual fade. */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    html { --vx: 0; --vy: 0; }
    html:has(.edges-down .arrive:target) { --vx: -45%; }
    html:has(.edges-up .arrive:target) { --vx: 45%; }
    html:has(.arrive.v-down-1:target) { --vy: 20vh; } html:has(.arrive.v-up-1:target) { --vy: -20vh; }
    html:has(.arrive.v-down-2:target) { --vy: 40vh; } html:has(.arrive.v-up-2:target) { --vy: -40vh; }
    html:has(.arrive.v-down-3:target) { --vy: 65vh; } html:has(.arrive.v-up-3:target) { --vy: -65vh; }
    html:has(.edges .arrive:target)::view-transition-old(root) { animation: .6s cubic-bezier(.3, .7, .2, 1) both pan-out; }
    html:has(.edges .arrive:target)::view-transition-new(root) { animation: .6s cubic-bezier(.3, .7, .2, 1) both pan-in; }
    @keyframes pan-out { to { translate: calc(var(--vx) * -1) calc(var(--vy) * -1); opacity: 0; } }
    @keyframes pan-in { from { translate: var(--vx) var(--vy); opacity: 0; } }
  }
}

/* Design's goal cards: the headline and its text, the rest folded. */
.prose .goal { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); padding: 1rem 1.25rem; margin-top: .75rem; }
.prose .goal > h3 { margin-top: 0; }
.prose .goal > p:last-of-type { margin-bottom: 0; }
.prose .goal-more { margin-top: .75rem; }
.prose .goal-more > summary { cursor: pointer; color: var(--dim); font-size: .875rem; }
.prose .goal-more > summary .gap { color: var(--faint); margin-left: .5rem; }
.prose .goal-more[open] > summary { margin-bottom: .5rem; }
.prose .goal-more h4 { font-size: 1rem; margin-top: 1rem; }
.prose .goal-all { font: inherit; font-size: .875rem; color: var(--dim); background: none; border: 1px solid var(--line); border-radius: var(--r); padding: .2rem .7rem; cursor: pointer; }
.prose .goal-all:hover { color: var(--fg); }

/* The usage page (site/usage.js, SYS-32): counts in tables, one chart. */
.prose .usage-table caption { caption-side: top; text-align: left; font-size: .8125rem; color: var(--dim); padding-bottom: .4rem; }
.prose .usage-table .num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 1rem; white-space: nowrap; }
.prose .usage-chart { margin: 0 0 1rem; }
.prose .usage-chart svg { width: 100%; height: auto; overflow: visible; }
.prose .usage-chart path { fill: #e06418; }
.prose .usage-chart .hit { fill: transparent; }
.prose .usage-chart .bar:hover path { opacity: .85; }
.prose .usage-chart .base { stroke: var(--line); stroke-width: 1; }
.prose .usage-chart .tick { fill: var(--dim); font-size: 11px; text-anchor: middle; }
.prose .usage-chart text.tick:first-of-type { text-anchor: start; }
.prose .usage-note { color: var(--warn); }
.prose .usage-table th[scope="row"] { white-space: nowrap; }