/* =====================================================================
   Neuridion — one design for the whole site.

   Everything here is shared by index.html, roadmap.html, legal.html,
   privacy.html *and* the forum (community/assets/style.css imports the
   tokens from this file). One place decides what a card looks like.

   No external requests: no web font, no CDN, no analytics. The system
   font stack is what a Mac product should use anyway, and it means the
   site needs no cookie banner.
   ===================================================================== */

:root {
  --ink: #0b0d12; --paper: #ffffff; --soft: #f5f6f9; --line: #e1e4ec;
  --dim: #5b6170; --accent: #2f6bff; --accent-soft: #eaf0ff;
  --amber: #b87d00; --amber-soft: #fff5dd; --teal: #12907f; --rose: #c0392b;
  --green: #12905a;
  --code-bg: #0e1117; --code-line: #1e2430;
  --chrome: #eceef3; --chrome-line: #d7dae3;
  --glow-a: rgba(47,107,255,.30); --glow-b: rgba(23,168,152,.24);
  --radius: 18px;
  --shadow: 0 16px 40px rgba(0,0,0,.10);
}

/* The complete palette is defined on bare :root above, so a colour never
   has its only definition inside a media query. These two blocks redefine
   the same names — nothing else. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eceef4; --paper: #090b10; --soft: #12151d; --line: #232936;
    --dim: #99a1b3; --accent: #6d9bff; --accent-soft: #14203a;
    --amber: #f0b93a; --amber-soft: #2a2113; --teal: #3fd0bd; --rose: #ff8172;
    --green: #43c98d;
    --code-bg: #0d1016; --code-line: #1c222d;
    --chrome: #171b24; --chrome-line: #262c38;
    --glow-a: rgba(60,120,255,.34); --glow-b: rgba(30,200,180,.22);
    --shadow: 0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --ink: #eceef4; --paper: #090b10; --soft: #12151d; --line: #232936;
  --dim: #99a1b3; --accent: #6d9bff; --accent-soft: #14203a;
  --amber: #f0b93a; --amber-soft: #2a2113; --teal: #3fd0bd; --rose: #ff8172;
  --green: #43c98d;
  --code-bg: #0d1016; --code-line: #1c222d;
  --chrome: #171b24; --chrome-line: #262c38;
  --glow-a: rgba(60,120,255,.34); --glow-b: rgba(30,200,180,.22);
  --shadow: 0 16px 40px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 17px/1.62 -apple-system, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; transition: background .35s ease, color .35s ease;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
a { color: inherit; }
code { font: 0.88em ui-monospace, "SF Mono", Menlo, monospace;
       background: var(--soft); padding: 1px 6px; border-radius: 5px; }

/* ── The bar at the top, identical on every page ──────────────────── */
nav.site { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(180%) blur(18px);
      background: color-mix(in srgb, var(--paper) 78%, transparent); border-bottom: 1px solid var(--line); }
nav.site .wrap { display: flex; align-items: center; gap: 13px; height: 62px; }
nav.site img { width: 30px; height: 30px; border-radius: 7px; }
nav.site b { font-size: 16px; letter-spacing: -0.01em; }
nav.site a.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
/* The version chip is a link to whatsnew.html since 2026-08-20 — the shortest route from
   "which version am I looking at" to "what changed in it". It must not wear an underline
   or it reads as a stray link beside the wordmark. */
nav.site .ver { font-size: 12px; color: var(--dim); border: 1px solid var(--line);
                padding: 2px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
                text-decoration: none; transition: color .2s ease, border-color .2s ease; }
nav.site a.ver:hover { color: var(--ink); border-color: var(--accent); }
/* ── The menu, since 2026-08-21 ────────────────────────────────────────
   It was seven anchors, four of which scrolled to a heading further down
   the same page. That is a table of contents wearing a menu's clothes:
   the back button does not work, nothing can be linked to on its own, and
   the page it belongs to had grown to eleven hundred lines. Each section
   is a page now, and the bar groups them — which is why it needs to open.

   Hover opens it on a mouse; click opens it everywhere, including on a
   trackpad and by keyboard. Both, because hover alone strands a touch
   device and click alone makes a mouse work for a menu it is already
   pointing at. Escape and a click outside close it, and every panel is
   plain markup — a menu that needs JavaScript to be readable is a menu
   that vanishes when a script fails. */
nav.site .links { margin-left: auto; display: flex; align-items: center; gap: 4px;
                  font-size: 14.5px; color: var(--dim); }
nav.site .links > a, nav.site .menu > button {
  text-decoration: none; position: relative; white-space: nowrap; color: inherit;
  font: inherit; background: none; border: 0; cursor: pointer;
  padding: 8px 11px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; }
nav.site .links > a::after { content: ""; position: absolute; left: 11px; right: 100%; bottom: 3px;
  height: 2px; background: var(--accent); border-radius: 2px; transition: right .25s ease; }
nav.site .links > a:hover, nav.site .links > a[aria-current="page"] { color: var(--ink); }
nav.site .links > a:hover::after, nav.site .links > a[aria-current="page"]::after { right: 11px; }

nav.site .menu { position: relative; }
nav.site .menu > button > i { width: 7px; height: 7px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .2s ease; opacity: .7; }
nav.site .menu > button:hover, nav.site .menu > button[aria-expanded="true"],
nav.site .menu.current > button { color: var(--ink); }
nav.site .menu > button[aria-expanded="true"] { background: var(--soft); }
nav.site .menu > button[aria-expanded="true"] > i { transform: rotate(-135deg) translate(-3px,-3px); }
/* The current section is marked on the closed button too, or a reader three pages deep
   has nothing on screen telling them where they are. */
nav.site .menu.current > button::after { content: ""; position: absolute; left: 11px; right: 11px;
  bottom: 3px; height: 2px; background: var(--accent); border-radius: 2px; }

nav.site .drop { position: absolute; top: calc(100% + 9px); left: -8px; min-width: 322px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 15px;
  box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; }
nav.site .menu:hover > .drop, nav.site .menu > button[aria-expanded="true"] + .drop {
  opacity: 1; visibility: visible; transform: none; }
/* The gap between the button and the panel would drop the hover halfway across it. */
nav.site .menu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 11px; }
nav.site .drop a { display: block; text-decoration: none; padding: 9px 11px; border-radius: 10px;
  color: var(--dim); transition: background .15s ease, color .15s ease; }
nav.site .drop a b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.01em; }
nav.site .drop a span { display: block; font-size: 12.5px; line-height: 1.45; margin-top: 1px; }
nav.site .drop a:hover { background: var(--soft); }
nav.site .drop a[aria-current="page"] { background: var(--accent-soft); }
nav.site .drop a[aria-current="page"] b { color: var(--accent); }
nav.site .drop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 9px; }

nav.site .themeSwitch { margin-left: 16px; }

/* The hamburger, and the same markup unfolded underneath the bar. No second copy of the
   menu: the wide bar and the narrow sheet are one list, laid out twice. */
nav.site .burger { display: none; margin-left: auto; width: 38px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--soft); color: var(--ink); cursor: pointer;
  padding: 0; place-items: center; }
nav.site .burger span, nav.site .burger span::before, nav.site .burger span::after {
  display: block; width: 16px; height: 1.7px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease; }
nav.site .burger span::before, nav.site .burger span::after { content: ""; position: relative; }
nav.site .burger span::before { top: -5px; } nav.site .burger span::after { top: 3.3px; }
nav.site .burger[aria-expanded="true"] span { background: transparent; }
nav.site .burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
nav.site .burger[aria-expanded="true"] span::after { transform: translateY(-3.3px) rotate(-45deg); }

@media (max-width: 1060px) {
  nav.site .burger { display: grid; }
  nav.site .themeSwitch { margin-left: 12px; }
  nav.site .links { position: absolute; top: 62px; left: 0; right: 0; margin: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 10px 20px 20px; max-height: calc(100vh - 62px);
    overflow-y: auto; }
  nav.site .links.open { display: flex; }
  nav.site .menu::after { display: none; }
  nav.site .menu > button { width: 100%; justify-content: space-between; padding: 11px 4px;
    font-weight: 600; color: var(--ink); }
  nav.site .menu.current > button::after { display: none; }
  nav.site .drop { position: static; opacity: 1; visibility: visible; transform: none;
    display: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 8px 4px;
    min-width: 0; background: transparent; }
  nav.site .menu:hover > .drop { display: none; }
  nav.site .menu > button[aria-expanded="true"] + .drop { display: grid; }
  nav.site .links > a { padding: 11px 4px; font-weight: 600; color: var(--ink); }
  nav.site .links > a::after { display: none; }
}

.themeSwitch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line);
               border-radius: 999px; background: var(--soft); }
.themeSwitch button { border: 0; background: transparent; color: var(--dim); cursor: pointer;
  width: 30px; height: 26px; border-radius: 999px; font-size: 13px; display: grid; place-items: center;
  transition: background .2s ease, color .2s ease; font-family: inherit; }
.themeSwitch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.16); }

/* ── Sections, headings, the common furniture ─────────────────────── */
section { padding: 84px 0; border-top: 1px solid var(--line); }
h1 { letter-spacing: -0.035em; }
h2 { font-size: clamp(27px, 3.1vw, 39px); letter-spacing: -0.028em; margin: 0 0 14px; line-height: 1.13; }
h3 { font-size: 18px; margin: 0 0 6px; letter-spacing: -0.01em; }
.sub { color: var(--dim); font-size: 18px; margin: 0 0 40px; max-width: 44em; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }

.button { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 14px 25px; border-radius: 13px; font-weight: 640; font-size: 16px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 20%, transparent); }
.button:hover { transform: translateY(-2px); box-shadow: 0 16px 38px color-mix(in srgb, var(--ink) 26%, transparent); }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.button.ghost:hover { border-color: var(--accent); color: var(--accent); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }
.meta { font-size: 13.5px; color: var(--dim); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.card { position: relative; padding: 25px 23px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper); overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card::before { content: ""; position: absolute; inset: -1px; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(240px 160px at var(--mx,50%) var(--my,0%),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events: none; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
              box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card p { margin: 0; color: var(--dim); font-size: 15px; }
.card .ic { font-size: 21px; margin-bottom: 11px; display: block; }

/* ── Questions that fold open ─────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); max-width: 56em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-size: 18px; font-weight: 620; letter-spacing: -0.012em;
  transition: color .18s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  font-size: 24px; font-weight: 400; color: var(--dim); line-height: 1;
  transition: rotate .25s ease, color .18s ease; }
.faq details[open] summary::after { rotate: 45deg; color: var(--accent); }
.faq details p { margin: 0 0 22px; color: var(--dim); font-size: 16px; max-width: 52em; }
.faq details b { color: var(--ink); font-weight: 620; }

.notice { margin-top: 32px; padding: 18px 22px; border-radius: 14px; font-size: 15px;
  border: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 9%, transparent); }

/* ── The foot, identical on every page ────────────────────────────── */
footer.site { padding: 44px 0 70px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
footer.site .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
footer.site a { text-decoration: none; } footer.site a:hover { text-decoration: underline; color: var(--accent); }
footer.site .legal { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Long-form pages: legal, privacy ──────────────────────────────── */
.doc { max-width: 46em; margin: 0 auto; padding: 60px 28px 90px; }
.doc h1 { font-size: clamp(32px, 4.4vw, 46px); margin: 0 0 10px; line-height: 1.1; }
.doc h2 { font-size: 22px; margin: 44px 0 10px; letter-spacing: -0.015em; }
.doc h3 { font-size: 17px; margin: 26px 0 6px; }
.doc p, .doc li { color: var(--dim); font-size: 16px; }
.doc strong, .doc b { color: var(--ink); font-weight: 620; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 5px 0; }
.doc a { color: var(--accent); }
.doc .lead { font-size: 18px; color: var(--dim); margin: 0 0 6px; }
.doc address { font-style: normal; color: var(--ink); line-height: 1.75; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.doc th { color: var(--ink); font-weight: 620; font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; }
.doc td { color: var(--dim); }
.doc .box { border: 1px solid var(--line); background: var(--soft); border-radius: 14px;
            padding: 18px 22px; margin: 22px 0; }
.doc .box p:last-child { margin-bottom: 0; }
.doc .en { border-left: 3px solid var(--accent); background: var(--accent-soft);
           border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 0 0 34px; }
.doc .en p { margin: 0; color: var(--ink); font-size: 15px; }
.doc .updated { font-size: 13.5px; color: var(--dim); margin-top: 44px;
                padding-top: 16px; border-top: 1px solid var(--line); }

/* ── Motion, and the switch that turns all of it off ──────────────── */
.reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1); }
.reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Bilder: klein zeigen, groß ansehen ──────────────────────────────────────
   Der Entwickler wollte kleine Bilder, die sich auf Klick öffnen. Zwei Gründe,
   warum das besser ist als große: eine Seite mit sechs 1600er-Aufnahmen ist eine
   Seite, die scrollt statt zu erklären — und wer ein Detail wirklich sehen will,
   will es *ganz* sehen, nicht in Spaltenbreite. Alles eigenhändig, kein Fremdcode:
   die Seite kommt ohne einen einzigen externen Aufruf aus, und das bleibt so. */
figure.shot img, .gallery img { cursor: zoom-in; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
           gap: 14px; margin: 22px 0; }
.gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 12px;
                  overflow: hidden; background: var(--soft); }
.gallery img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10;
               object-fit: cover; object-position: top left; transition: transform .35s ease; }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption { font-size: 13px; padding: 9px 11px; opacity: .78; line-height: 1.4; }
.gallery figcaption b { display: block; opacity: 1; font-size: 13.5px; margin-bottom: 1px; }

.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center;
            justify-content: center; padding: 32px; background: rgba(0,0,0,.86);
            backdrop-filter: blur(6px); }
.lightbox.on { display: flex; animation: lbIn .18s ease; }
@keyframes lbIn { from { opacity: 0 } to { opacity: 1 } }
.lightbox img { max-width: 100%; max-height: calc(100vh - 130px); border-radius: 10px;
                box-shadow: 0 30px 90px -20px rgba(0,0,0,.8); cursor: zoom-out; }
.lightbox .cap { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
                 color: #fff; font-size: 14px; opacity: .85; padding: 0 32px; }
.lightbox .close { position: absolute; top: 18px; right: 22px; width: 38px; height: 38px;
                   border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
                   background: rgba(255,255,255,.08); color: #fff; font-size: 19px;
                   cursor: pointer; line-height: 1; }
.lightbox .close:hover { background: rgba(255,255,255,.18); }


/* =====================================================================
   The parts a *page* is built from.
   ---------------------------------------------------------------------
   These lived in two <style> blocks inside index.html until 2026-08-21,
   which was fine while there was one page. There are nine now, and the
   hero, the cards, the console and the benchmark tables are used by
   several of them — so they moved here, where one place decides what
   each looks like. Nothing was changed on the way; it is the same CSS,
   read by every page instead of one.
   ===================================================================== */
  /* Only what this page alone needs. Everything shared lives in site.css. */

  /* ── Hero ───────────────────────────────────────────── */
  header.hero { position: relative; overflow: hidden; padding: 92px 0 76px; }
  .aurora { position: absolute; inset: -45% -25% auto -25%; height: 150%; pointer-events: none;
    background: radial-gradient(620px 320px at 20% 22%, var(--glow-a), transparent 68%),
                radial-gradient(520px 300px at 78% 10%, var(--glow-b), transparent 68%),
                radial-gradient(460px 280px at 55% 60%, var(--glow-a), transparent 70%);
    filter: blur(6px); animation: drift 22s ease-in-out infinite alternate; }
  @keyframes drift { 0% { transform: translate3d(-2%,0,0) scale(1); }
                     50% { transform: translate3d(3%,-3%,0) scale(1.08); }
                     100% { transform: translate3d(-3%,2%,0) scale(1.02); } }
  .grid-lines { position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(720px 400px at 50% 0%, #000, transparent 74%);
    -webkit-mask-image: radial-gradient(720px 400px at 50% 0%, #000, transparent 74%); }
  .hero .wrap { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; gap: 46px; align-items: center; }
  @media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; } }
  .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650;
    letter-spacing: .04em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
  .badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.2s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
  h1 { font-size: clamp(37px, 5.2vw, 60px); line-height: 1.05; margin: 20px 0 0; font-weight: 700; }
  h1 em { font-style: normal; background: linear-gradient(100deg, var(--accent), var(--teal), var(--accent));
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 9s linear infinite; }
  @keyframes shimmer { to { background-position: 220% 0; } }
  .lede { font-size: 20px; color: var(--dim); margin: 20px 0 0; max-width: 31em; }
  .heroArt { display: flex; justify-content: center; }
  .heroArt img { width: min(290px, 72vw); border-radius: 24%;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.38)); animation: float 7.5s ease-in-out infinite; }
  @keyframes float { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-15px) rotate(1.2deg); } }

  /* ── The beta warning ───────────────────────────────── */
  .warnBand { background: var(--amber-soft); border-top: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
              border-bottom: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); padding: 26px 0; }
  .warnBand .wrap { display: flex; gap: 18px; align-items: flex-start; }
  .warnBand .sign { font-size: 26px; line-height: 1; }
  .warnBand h3 { margin: 0 0 6px; font-size: 17px; }
  .warnBand p { margin: 0; font-size: 15.5px; color: var(--dim); max-width: 62em; }
  .warnBand b { color: var(--ink); }

  /* ── Steps and figures ──────────────────────────────── */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
  @media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
  .step { position: relative; padding: 24px 22px; border-radius: var(--radius); background: var(--soft);
          border: 1px solid var(--line); overflow: hidden; }
  .step::before { counter-increment: s; content: counter(s); display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--paper);
    font-size: 14px; font-weight: 700; margin-bottom: 14px; }
  .step::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width .6s ease .2s; }
  .step.on::after { width: 100%; }
  .step p { margin: 0; color: var(--dim); font-size: 15px; }

  .figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .figure { padding: 22px; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); }
  .figure b { display: block; font-size: 31px; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .figure span { color: var(--dim); font-size: 14px; }

  pre { margin: 0; padding: 21px 23px; border-radius: var(--radius); overflow-x: auto;
    background: var(--code-bg); color: #d6dbe6; border: 1px solid var(--code-line);
    font: 13.5px/1.72 ui-monospace, "SF Mono", Menlo, monospace; }
  pre code { background: none; padding: 0; }
  pre .c { color: #6b7484; } pre .k { color: #7aa2ff; } pre .s { color: #7ddba0; } pre .n { color: #f0b27a; }
  .split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 40px; align-items: center; }
  .split.flip { grid-template-columns: 1.08fr .92fr; }
  @media (max-width: 920px) { .split, .split.flip { grid-template-columns: 1fr; } }

  /* ── The rebuilt windows ────────────────────────────── */
  .shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--chrome-line);
    background: var(--paper); box-shadow: 0 24px 60px rgba(0,0,0,.18); }
  .shot .tb { display: flex; align-items: center; gap: 7px; padding: 9px 12px;
    background: var(--chrome); border-bottom: 1px solid var(--chrome-line); }
  .shot .tb i { width: 10px; height: 10px; border-radius: 50%; background: #cfd3dc; }
  .shot .tb i:nth-child(1) { background: #ec6a5e; } .shot .tb i:nth-child(2) { background: #f4bf4f; }
  .shot .tb i:nth-child(3) { background: #61c554; }
  .shot .tb span { margin-left: 10px; font-size: 12px; color: var(--dim); }
  .shot .body { padding: 16px; font-size: 12.5px; }
  .shotNote { font-size: 12.5px; color: var(--dim); margin-top: 10px; text-align: center; }

  /* ── Photographed windows ───────────────────────────── */
  .shot.photo img { display: block; width: 100%; height: auto; }
  .shot.photo img.dark { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .shot.photo img.light { display: none; }
    :root:not([data-theme="light"]) .shot.photo img.dark { display: block; }
  }
  :root[data-theme="dark"] .shot.photo img.light { display: none; }
  :root[data-theme="dark"] .shot.photo img.dark { display: block; }
  .showcase .shot { max-width: 980px; margin: 0 auto; }



  .paper { background: #fff; color: #1a1a1a; border: 1px solid var(--chrome-line); border-radius: 6px;
           padding: 18px 20px; font-size: 11.5px; }
  .paper h4 { margin: 0 0 2px; font-size: 15px; }
  .paper .band { margin-top: 12px; border-top: 1px solid #e3e3e3; padding-top: 6px; }
  .paper table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .paper td, .paper th { padding: 3px 0; text-align: left; }
  .paper th { color: #666; font-weight: 600; border-bottom: 1px solid #e3e3e3; }
  .paper td.r, .paper th.r { text-align: right; font-variant-numeric: tabular-nums; }
  .paper .sum { border-top: 1px solid #333; font-weight: 700; }
  .paper .grp { background: #f3f3f3; font-weight: 700; }


  /* ── The three kinds of application ─────────────────── */
  .apps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
  @media (max-width: 800px) { .apps { grid-template-columns: 1fr; } }
  .app { text-align: center; padding: 28px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--soft); }
  .app img { width: 104px; height: 104px; border-radius: 24%; filter: drop-shadow(0 14px 26px rgba(0,0,0,.3)); transition: transform .3s ease; }
  .app:hover img { transform: translateY(-6px) scale(1.04); }
  .app h3 { margin: 15px 0 4px; } .app p { margin: 0; font-size: 14.5px; color: var(--dim); }
  .wire { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
  .wire path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
               stroke-dasharray: 7 9; opacity: 0; transition: opacity .5s ease; }
  .wire.on path { opacity: .8; animation: flow 1.1s linear infinite; }
  @media (max-width: 800px) { .wire { display: none; } }
  .plan { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 11.5px;
    font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--amber);
    background: color-mix(in srgb, var(--amber) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); padding: 4px 10px; border-radius: 999px; }

  .download { text-align: center; }
  .download > img { width: 128px; height: 128px; border-radius: 24%; filter: drop-shadow(0 20px 44px rgba(0,0,0,.34)); }
  .req { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 24px; color: var(--dim); font-size: 14.5px; }

  .console { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--code-line);
    background: var(--code-bg); font: 13px/1.9 ui-monospace, "SF Mono", Menlo, monospace; color: #cdd4e0; }
  .console .bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--code-line); }
  .console .bar i { width: 11px; height: 11px; border-radius: 50%; background: #3b4250; }
  .console .bar i:nth-child(1) { background: #ec6a5e; } .console .bar i:nth-child(2) { background: #f4bf4f; }
  .console .bar i:nth-child(3) { background: #61c554; }
  .console .bar span { margin-left: auto; color: #6b7484; font-size: 12px; }
  .console ol { list-style: none; margin: 0; padding: 15px 17px; min-height: 268px; }
  .console li { opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
  .console li.on { opacity: 1; transform: none; }
  .console li::before { content: "✓ "; color: #61c554; }
  .console li.done { color: #7ddba0; font-weight: 600; } .console li.done::before { content: "▸ "; color: #7ddba0; }
  @media (prefers-reduced-motion: reduce) { .console li { opacity: 1; transform: none; }
    .wire path { opacity: .8; } }

  /* Sections added 2026-08-20: the honest speed story, the JIT note, the picker faces. */
  .rail { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:26px 0 }
  .rail .card { margin:0 }
  .tl { margin:26px 0 10px; display:flex; flex-direction:column; gap:10px }
  .tl .row { display:grid; grid-template-columns:150px 1fr auto; gap:14px; align-items:center }
  .tl .who { font-weight:600; font-size:14px; text-align:right; opacity:.8 }
  .tl .track { height:26px; border-radius:8px; background:color-mix(in srgb, var(--ink) 8%, transparent); position:relative; overflow:hidden }
  .tl .track i { position:absolute; inset:0 auto 0 0; border-radius:8px; display:block }
  .tl .track i.us { background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%, transparent)) }
  .tl .track i.them { background:color-mix(in srgb, var(--ink) 26%, transparent) }
  .tl .track i.apple { background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 30%,transparent),color-mix(in srgb,var(--ink) 30%,transparent) 7px,color-mix(in srgb,var(--ink) 18%,transparent) 7px,color-mix(in srgb,var(--ink) 18%,transparent) 14px) }
  .tl .num { font-variant-numeric:tabular-nums; font-weight:700; min-width:5.5em; text-align:right }
  .tl .note { grid-column:2 / -1; font-size:13.5px; opacity:.7; margin:-4px 0 4px }
  .faces { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:24px 0 }
  .face { border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--soft) }
  .face h4 { margin:0 0 4px; font-size:15px }
  .face p { margin:0; font-size:14px; opacity:.78 }
  .face .mock { margin-top:12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); padding:8px 10px; font-size:13px }
  .face .mock .r { padding:3px 6px; border-radius:5px }
  .face .mock .r.hit { background:color-mix(in srgb,var(--accent) 16%, transparent) }
  .face .mock .more { opacity:.55; font-size:12px; padding:3px 6px }
  .tag2 { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:2px 9px; border-radius:20px; vertical-align:2px; margin-left:8px }
  .tag2.soon { background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent) }
  .tag2.now { background:color-mix(in srgb, var(--ink) 10%, transparent); opacity:.75 }
  @media (max-width:720px){ .tl .row{grid-template-columns:96px 1fr auto} .tl .who{font-size:12.5px} }
  /* The JIT pair — cold against warm, the one picture that answers "is it interpreted?" */
  .jit { border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:var(--soft); margin:24px 0 }
  .jitRow { display:grid; grid-template-columns:230px 1fr auto; gap:16px; align-items:center; margin:12px 0 }
  .jitWho { font-size:14.5px; line-height:1.35 }
  .jitWho small { opacity:.6; font-size:12.5px }
  .jitBar { height:30px; border-radius:9px; background:color-mix(in srgb,var(--ink) 8%,transparent); overflow:hidden }
  .jitBar i { display:block; height:100%; border-radius:9px; background:color-mix(in srgb,var(--ink) 28%,transparent) }
  .jitBar i.hot { background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,transparent)) }
  .jitNum { font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; min-width:3.6em; text-align:right }
  .jitNum small { font-size:12.5px; font-weight:600; opacity:.6 }
  .jitNum.hot { color:var(--accent) }
  .jitNote { font-size:14.5px; margin:16px 0 0; opacity:.85; line-height:1.55 }
  .scrollx { overflow-x:auto }
  table.bench { width:100%; border-collapse:collapse; margin:20px 0 8px; font-size:14.5px; min-width:520px }
  table.bench th, table.bench td { border-bottom:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:middle }
  table.bench th { font-size:12px; text-transform:uppercase; letter-spacing:.05em; opacity:.6; font-weight:700 }
  table.bench td.r, table.bench th.r { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap }
  table.bench tr.grp td { background:color-mix(in srgb,var(--ink) 5%,transparent); font-size:12px; text-transform:uppercase;
                          letter-spacing:.05em; font-weight:700; opacity:.7; padding:7px 12px }
  @media (max-width:720px){ .jitRow{grid-template-columns:1fr; gap:6px} .jitNum{text-align:left} }

/* =====================================================================
   The page header, and the way out at the foot — both since 2026-08-21.
   ===================================================================== */

/* Every page except the front one opens with this instead of the hero: the same
   aurora, a quarter of the height, and the section's own heading promoted to an
   `h1`. It has to be an `h1` — nine pages that each began with an `h2` under an
   invisible `h1` is a document outline nobody can navigate, and a screen reader
   announces it exactly as badly as it reads. */
header.pageHead { position: relative; overflow: hidden; padding: 62px 0 42px;
                  border-bottom: 1px solid var(--line); }
header.pageHead .wrap { position: relative; max-width: 62em; }
header.pageHead h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; margin: 6px 0 0;
                     max-width: 20em; }
header.pageHead .lede { font-size: 18.5px; line-height: 1.6; color: var(--dim);
                        margin: 18px 0 0; max-width: 44em; }
header.pageHead + section { border-top: 0; padding-top: 56px; }

/* **A card that is a link has to say so.** The cards on the front page and at the foot of
   every other page go somewhere; the ones in the middle of a page do not. Same shape,
   and the difference is a chevron that moves — inventing a second card style for it
   would be two designs for one idea. */
a.card { display: block; text-decoration: none; color: inherit; }
a.card b { display: block; margin-bottom: 6px; }
a.card::after { content: "→"; position: absolute; right: 21px; bottom: 19px; opacity: 0;
                color: var(--accent); font-size: 17px; transform: translateX(-6px);
                transition: opacity .2s ease, transform .2s ease; }
a.card:hover::after { opacity: 1; transform: none; }
a.card:hover b { color: var(--accent); }
a.card p { padding-right: 26px; }

section.nextUp { background: var(--soft); }
section.nextUp h2 { font-size: clamp(22px, 2.6vw, 30px); }

/* The map on the front page: one card per page, in reading order rather than in the
   order the sections happened to be written in. */
.map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.map .n { position: absolute; top: 20px; right: 21px; font-size: 12px; font-weight: 700;
          color: var(--dim); font-variant-numeric: tabular-nums; opacity: .5; }
@media (max-width: 940px) { .map { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .map { grid-template-columns: 1fr; } }

/* The money pair on `whats-in-it.html`: what a float does, against what an integer count
   of minor units does. Two panels rather than a paragraph, because the whole argument is
   a comparison and a comparison wants to be seen side by side. */
.money { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 0; }
@media (max-width: 860px) { .money { grid-template-columns: 1fr; } }
.money > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; }
.moneyBad { border-color: color-mix(in srgb, var(--rose) 40%, var(--line));
            background: color-mix(in srgb, var(--rose) 5%, transparent); }
.moneyGood { border-color: color-mix(in srgb, var(--green) 42%, var(--line));
             background: color-mix(in srgb, var(--green) 5%, transparent); }
.money .tagline { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
                  text-transform: uppercase; }
.moneyBad .tagline { color: var(--rose); }
.moneyGood .tagline { color: var(--green); }
.money pre { margin: 0 0 14px; background: var(--code-bg); border: 1px solid var(--code-line);
             border-radius: 11px; padding: 14px 16px; overflow-x: auto; }
.money pre code { background: none; padding: 0; color: #d7dbe6; font-size: 13px; line-height: 1.6;
                  white-space: pre; }
.money p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.6; }
.money p b { color: var(--ink); }