/* Tunet design system ("Lit Ledger"): every design token, one type scale, one label style,
   one set of buttons, surfaces, statuses, forms, the section pill and code windows.
   Load order (base.html): tailwind, fonts, page CSS, brand, interior, system, chrome, effects.
   system.css comes after page CSS and Tailwind utilities, so its type roles win; chrome.css and
   effects.css (navigation, motion) come after it. Colours stay page specific through --accent:
   never declare a derived accent token on :root, write color-mix() where it is used. */
:root {
  /* ---- Families ---- */
  --font-sans: Inter, 'Inter Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter Display', 'Inter Display Fallback', Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (sizes) ---- */
  --fs-display: clamp(2.375rem, 1.4rem + 3.8vw, 4.5rem); /* interior/product h1: 38 / 61 / 72px at 390/1024/1440 */
  --fs-hub: clamp(2.375rem, 10.5cqi, 4.5rem);           /* hub + enquiry h1 inside a container column: ~69.6px in 663px */
  --fs-document: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);   /* papers, posts, legal: 32 / 47 / 56px */
  --fs-section: clamp(1.6875rem, 1.15rem + 2.2vw, 3rem); /* h2 .section-title: 27 / 41 / 48px */
  --fs-statement: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); /* one per page max: 28 / 42.6 / 52px */
  --fs-subsection: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); /* prose/paper/legal/form h2: 22 / 26.6 / 30px */
  --fs-card: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);  /* h3 .card-title: 18 / 20.6 / 22px */
  --fs-h4: 1.0625rem;
  --fs-tagline: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); /* 19 / 22 / 24px */
  --fs-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17 / 18.6 / 19px */
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-ui: 0.875rem;      /* nav, tabs, buttons-sm, field labels, breadcrumbs */
  --fs-meta: 0.8125rem;   /* eyebrows, captions, tags, dt */
  --fs-micro: 0.75rem;    /* status pills, footnotes. Floor for any words. */
  --fs-code: 0.8125rem;

  /* ---- Type scale (line height, tracking) ---- */
  --lh-display: 1.04;
  --lh-document: 1.08;
  --lh-section: 1.1;
  --lh-heading: 1.2;
  --lh-card: 1.3;
  --lh-tagline: 1.35;
  --lh-ui: 1.4;
  --lh-lead: 1.6;
  --lh-body: 1.65;
  --lh-code: 1.65;
  --tr-display: -0.024em;
  --tr-section: -0.02em;
  --tr-card: -0.014em;
  --tr-body: -0.011em;
  --tr-ui: -0.006em;
  --tr-mono: 0.02em;

  /* ---- Canvas and surfaces (elevation ladder) ---- */
  --canvas: #090909;     /* body, footer, default sections */
  --band: #0d0e10;       /* alternating chapter bands */
  --well: #060607;       /* inset wells: code output, install chips */
  --surface-1: #0f1012;  /* wells on canvas, list rows, figure plates */
  --surface-2: #121315;  /* cards */
  --surface-3: #17181b;  /* raised: forms, code windows */
  --surface-4: #1c1d21;  /* overlays: menus, dropdowns, cookie banner */
  --field: #0d0e10;
  --field-line: #6b6b74;        /* 3.66:1 on --field, 3.36:1 on --surface-3 */
  --field-line-hover: #8a8992;

  /* ---- Ink ---- */
  --ink-1: #f7f4ec;      /* headings, values */
  --ink-2: #d6d3cc;      /* labels, emphasis, status text */
  --ink-3: #a1a1aa;      /* body, leads */
  --ink-4: #8a8992;      /* captions, meta: 5.76 canvas, 5.38 surface-2, 4.87 surface-4 */
  --ink-prose: #bdbdc3;  /* long-form body: 10.65:1 */
  --ink-decor: #71717a;  /* non-text only (separators, glyph decoration) */

  /* ---- Lines ---- */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.16);
  --line: var(--line-2);          /* legacy alias */
  --line-strong: var(--line-3);   /* legacy alias */

  /* ---- Brand ---- */
  --brand-accent: #f5b544;
  --brand-hover: #ffd078;
  --brand-active: #eaa531;
  --brand-ink: #17130b;           /* 10.2 on accent, 12.8 on hover, 8.7 on active */
  --brand-paper: #f7f4ec;
  --brand-rgb: 245, 181, 68;      /* legacy, used by rgba() in collection-pages.css */
  --accent: var(--brand-accent);  /* re-assigned per page on <body> and per section */

  /* ---- Pillar and venture accents (400-level, one palette) ---- */
  --pillar-ventures: #60a5fa;
  --pillar-micro: #f472b6;
  --pillar-engineering: #c084fc;
  --pillar-cognition: #34d399;
  --pillar-sprint: #fb923c;
  --venture-safety-az: #22d3ee;
  --venture-coded-x: #818cf8;

  /* ---- Status ---- */
  --status-live: #34d399;      /* live, service */
  --status-pilot: #f5b544;     /* pilot, beta, alpha */
  --status-dev: #38bdf8;       /* building, in_development, development, soon */
  --status-research: #a78bfa;  /* research, prototype */
  --status-planned: #a1a1aa;   /* planned */

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.8);
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 64px -24px rgba(0, 0, 0, 0.9);
  --shadow-overlay: 0 24px 48px -12px rgba(0, 0, 0, 0.85);
  --shadow-float: 0 10px 30px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glow-primary: 0 12px 32px -14px rgba(245, 181, 68, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --glow-primary-hover: 0 16px 36px -14px rgba(245, 181, 68, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --glow-primary-active: 0 6px 16px -10px rgba(245, 181, 68, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* ---- Radii ---- */
  --radius-xs: 6px;    /* checkbox, inline code */
  --radius-sm: 8px;    /* buttons, inputs, selects, tabs, chips that act like buttons */
  --radius-md: 12px;   /* cards, code windows, result panels, nav pill, section pill */
  --radius-lg: 16px;   /* panels, forms, CTA panel, figure plates */
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container: 80rem;
  --container-padded: 84rem;   /* 80rem + 2 x 2rem, for wrappers that pad inside their max-width */
  --gutter: 1rem;              /* 1.5rem from 640px, 2rem from 1024px */
  --grid-gap: 1rem;            /* 1.5rem from 1024px */
  --space-section: clamp(3.5rem, 2.25rem + 3.5vw, 5.5rem);   /* 56 / 72 / 86 / 88px */
  --space-section-lg: clamp(4.5rem, 3rem + 5vw, 7.5rem);     /* set pieces only */
  --space-head: clamp(2rem, 1.25rem + 2.5vw, 3rem);          /* heading block to content */
  --measure: 68ch;
  --measure-lead: 38rem;
  --measure-head: 46rem;
  --nav-top: 0.75rem;
  --nav-height: 4rem;
  --nav-bottom: 4.875rem;      /* 78px: top 12 + 64 + 2 borders */
  --subnav-top: 5.25rem;       /* 84px */
  --subnav-height: 3rem;
  --anchor-offset: 5.5rem;     /* default; effects.css raises it to 9.5rem on pages with a section pill */

  /* ---- Motion ---- */
  --dur-press: 90ms;
  --dur-fast: 160ms;       /* colour, border, focus, arrows, tabs */
  --dur-base: 240ms;       /* menus, nav state, indicators, card edge */
  --dur-reveal: 480ms;
  --dur-entrance: 560ms;
  --dur-draw: 700ms;       /* diagram strokes and rules */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances, reveals, draws */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);    /* state changes */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* exits (60% of entry duration) */
  --motion-ease: var(--ease-out);                 /* legacy alias, do not use in new code */
  --stagger: 50ms;         /* max 5 steps */
  --rise-entrance: 8px;
  --rise-reveal: 12px;
  --lift-button: -1px;
  --lift-card: -2px;
  --press-scale: 0.98;

  /* ---- Z-index ---- */
  --z-raised: 1;
  --z-sticky: 30;     /* section pill */
  --z-menu: 40;       /* mobile sheet */
  --z-nav: 50;
  --z-cookie: 60;
  --z-skip: 100;
}
@media (max-width: 639px) { :root { --tr-display: -0.02em; --tr-section: -0.016em; } }
@media (min-width: 640px) { :root { --gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 2rem; --grid-gap: 1.5rem; } }

/* ==========================================================================
   Type (section 2.4). Inter Display 600 for headlines, Inter for everything
   read or operated, JetBrains Mono only for code, indices, versions, files.
   Page CSS sets layout only; it never sets size, weight or tracking on headings.
   ========================================================================== */

/* Display: interior and product heroes. */
main .hero-title,
main .interior-hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-synthesis-weight: none;
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
    color: var(--ink-1);
    max-width: 20ch;
    margin: 0 0 1.5rem;
    text-wrap: balance;
    overflow-wrap: break-word;
}
main .hero-title > span,
main .interior-hero h1 > span,
main .hub-hero h1 > span { font-size: inherit; line-height: inherit; }

/* Hub display: hub heroes and enquiry pages, sized by their column. */
main .hub-hero-copy,
main .enquiry-intro { container-type: inline-size; }
main .hub-hero h1,
main .enquiry-intro h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-synthesis-weight: none;
    font-size: var(--fs-hub);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
    color: var(--ink-1);
    margin: 0 0 1.5rem;
    text-wrap: balance;
    overflow-wrap: break-word;
}
main .hub-hero h1 > span,
main .enquiry-intro h1 > span { display: block; text-wrap: balance; }

/* Accent parts of a title are solid colour, never gradient text. */
main .hero-title-accent,
main .hub-hero h1 > span,
main .enquiry-intro h1 span { color: var(--accent); }

/* Document: papers, posts, legal and package stubs. Comes after display (same specificity). */
main .interior-document-hero h1,
main .interior-package h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-synthesis-weight: none;
    font-size: var(--fs-document);
    line-height: var(--lh-document);
    letter-spacing: -0.02em;
    max-width: 28ch;
}

/* Section titles. */
main .section-title,
main .principles-decisions h2,
main .principles-closing h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-synthesis-weight: none;
    font-size: var(--fs-section);
    line-height: var(--lh-section);
    letter-spacing: var(--tr-section);
    color: var(--ink-1);
    margin: 0 0 1rem;
    text-wrap: balance;
}
main .section-title.text-center { margin-inline: auto; }

/* Statement: one per page at most, combined with .section-title. Must follow the section rule. */
main .statement {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-statement);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 24ch;
}

/* Subsection: prose, paper, legal and form h2. */
main .subsection-title,
main .interior-reading h2,
main .enquiry-form > h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-synthesis-weight: none;
    font-size: var(--fs-subsection);
    line-height: var(--lh-heading);
    letter-spacing: -0.016em;
    color: var(--ink-1);
    text-wrap: balance;
}
/* Default spacing only; page CSS may set its own. */
main :where(.subsection-title) { margin: 0 0 0.75rem; }
main .interior-reading h2 { margin: 2.5em 0 0.75em; }
main .interior-reading > h2:first-child { margin-top: 0; }
main .enquiry-form > h2 { margin: 0 0 0.5rem; }

/* Card titles: every card h3. */
main .card-title,
main .principle-panel h2,
main .micro-product-card h3,
main .micro-mindset-track .micro-mindset-slide h3 {
    font: 600 var(--fs-card)/var(--lh-card) var(--font-sans);
    letter-spacing: var(--tr-card);
    color: var(--ink-1);
    margin: 0 0 0.75rem;
}
main .card-title.text-center { margin-inline: auto; }

/* H4 and strong labels in step lists. */
main h4,
main .enquiry-next strong,
main .hub-route strong {
    font: 600 var(--fs-h4)/var(--lh-ui) var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--ink-1);
}

/* Tagline, lead and body copy. */
main .hero-tagline {
    font: 500 var(--fs-tagline)/var(--lh-tagline) var(--font-sans);
    letter-spacing: -0.014em;
    color: var(--ink-1);
    max-width: 34rem;
    margin-bottom: 1rem;
    text-wrap: balance;
}
main .lead,
main .hero-lead,
main .hub-intro,
main .enquiry-intro > p:not(.eyebrow):not(.brand-eyebrow) {
    font: 400 var(--fs-lead)/var(--lh-lead) var(--font-sans);
    letter-spacing: var(--tr-body);
    color: var(--ink-3);
    max-width: var(--measure-lead);
    text-wrap: pretty;
}
main .hero-lead { margin-bottom: 2rem; }
main .section-title + .lead,
main .section-title + p { margin-top: 0.25rem; }

/* Long-form prose (interior reading pages; papers use .paper-prose in reading.css). */
main .interior-reading { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-prose); }
main .interior-reading h3 {
    font: 600 1.25rem/1.3 var(--font-sans);
    letter-spacing: -0.012em;
    color: var(--ink-1);
    margin: 1.75em 0 0.5em;
}

/* Wrapping. */
main :is(h1, h2, h3, h4, .card-title, .hero-tagline, summary, figcaption) { text-wrap: balance; }
main h1 { overflow-wrap: break-word; }
main :is(p, li, dd, blockquote) { text-wrap: pretty; }

/* Measure. The 72ch default has zero class weight so any class or utility can change it;
   flex rows and captions are layout, not prose, so they are left alone. */
main :where(p:not([class*="max-w"], [class*="flex"], [class*="caption"])) { max-width: 72ch; }
main :is(.text-center, .cta-panel) > p { margin-inline: auto; }
main .interior-reading > :is(p, ul, ol, h2, h3, h4, blockquote) { max-width: var(--measure); }
main :is(.mission-card, .privacy-copy, .interior-package-details) p,
main ol li .group > p { max-width: 66ch; }
/* 37rem at 18px is about 72 characters per line (Inter runs about 0.46em per character, not 1ch). */
main .rnd-section-copy { max-width: 37rem; font-size: 1.125rem; line-height: 1.7; }

/* Numerals line up. */
main :is(.index, .meta, .hero-stat, .sa-facts dd, time, td.num, .pillar-carousel-status, [data-numeric]) { font-variant-numeric: tabular-nums; }

/* Code: no programming ligatures. */
.code-window :is(pre, code),
main :not(pre) > code { font-variant-ligatures: none; font-feature-settings: 'calt' 0; }
main :where(:not(pre) > code) {
    font-family: var(--font-mono);
    font-size: var(--fs-code);
    font-weight: 400;
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.06);
}

/* CJK: no negative tracking, taller lines, local system faces only. */
:is(:lang(ja), :lang(ko), :lang(zh)) main :is(h1, h2, h3, .hero-title, .section-title) { letter-spacing: 0; line-height: 1.25; }
:is(:lang(ja), :lang(ko), :lang(zh)) :is(.eyebrow, .meta, .field-label, .section-index) { letter-spacing: 0.02em; }
:lang(ko) { word-break: keep-all; }
html:is(:lang(ja), :lang(ko), :lang(zh)) {
    --font-sans: Inter, 'Inter Fallback', 'Hiragino Sans', 'Noto Sans JP', 'Apple SD Gothic Neo', 'Noto Sans KR', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
}

/* ==========================================================================
   Labels (A4): sentence case Inter, accent coloured; mono only for indices.
   ========================================================================== */
main .eyebrow,
main .brand-eyebrow,
main .section-eyebrow,
main .micro-product-category {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font: 500 var(--fs-meta)/1.4 var(--font-sans);
    letter-spacing: -0.003em;
    text-transform: none;
    color: var(--accent);
    margin: 0 0 0.875rem;
}
main .eyebrow--muted { color: var(--ink-3); }
main .eyebrow + h1, main .eyebrow + h2, main .eyebrow + h3, main .eyebrow + p { display: block; }

/* Page badge: a status dot and a plain label. */
main .hero-badge,
main .hub-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font: 500 var(--fs-ui)/1.4 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
    margin: 0 0 1.5rem;
}
main .hero-badge > span:last-child { color: inherit; }
main .hero-badge-dot,
main .hub-eyebrow > span {
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pillar-accent, var(--accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--pillar-accent, var(--accent)) 55%, transparent);
}

/* Section index: "01  The platform" over a 1px rule that spans the container. */
.section-index {
    position: relative;
    display: flex;
    max-width: none;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    padding-top: 0.875rem;
    font: 500 var(--fs-ui)/1.4 var(--font-sans);
    letter-spacing: 0;
    color: var(--ink-2);
}
.section-index::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--line-2);
    transform-origin: left center;
}
.index {
    font: 500 0.75rem/1 var(--font-mono);
    letter-spacing: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* Meta: captions, versions, counters. */
main .meta,
main .pillar-carousel-status,
main .micro-product-stage,
main .micro-carousel-controls p,
main .hub-route-label {
    font: 500 0.75rem/1.4 var(--font-mono);
    letter-spacing: var(--tr-mono);
    text-transform: none;
    color: var(--ink-4);
}
main .hero-stat + .meta { margin-top: 0.4rem; }

main .field-label {
    display: block;
    margin: 0 0 0.5rem;
    font: 500 var(--fs-ui)/1.4 var(--font-sans);
    letter-spacing: var(--tr-ui);
    text-transform: none;
    color: var(--ink-2);
}

main .interior-breadcrumb {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin: 0 0 1rem;
    font: 500 var(--fs-ui)/1.4 var(--font-sans);
    color: var(--ink-3);
    text-decoration: none;
}
main .interior-breadcrumb:hover { color: var(--ink-1); }
main .interior-breadcrumb + br { display: none; }

/* Hero tags and chips: the tag look in real casing. */
main .hero-tags > span,
main .hero-chips > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.75rem;
    padding: 0 0.625rem;
    border: 1px solid var(--line-3);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.03);
    font: 500 var(--fs-meta)/1 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
}
main .hero-chips > span > span:first-child { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--accent); }
main .hero-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
main .hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }

/* ==========================================================================
   Contrast and legacy-label bridges (A5). They keep legacy utilities compliant
   until templates are cleaned.
   ========================================================================== */
:is(main, footer) :is(.text-zinc-500, .text-zinc-600) { color: var(--ink-4); }
main :is(.text-\[10px\], .text-\[11px\]) { font-size: 0.75rem; line-height: 1.125rem; }
main .font-mono.uppercase:not(pre *, code, kbd, samp, [data-keep-mono]) {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: -0.003em;
    font-weight: 500;
}
/* :is() takes its most specific argument, so the dummy class lifts this to (0,1,3) and beats placeholder-zinc-* utilities */
main form :is(input, textarea, .placeholder-guard)::placeholder { color: var(--field-line-hover); }

/* ==========================================================================
   Heroes and sections (A6)
   ========================================================================== */
main .interior-hero {
    display: block;
    min-height: 0;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
    text-align: left;
    border-bottom: 1px solid var(--line-2);
}
main .interior-hero > .relative { width: 100%; max-width: var(--container); margin-inline: auto; }
/* Containers that pad themselves: 80rem of content plus 2 x 2rem, so copy sits on the shared edge.
   Comes after the hero rule above (same specificity). */
main .max-w-7xl.lg\:px-8 { max-width: var(--container-padded); }

main .hero-identity { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
main .hero-identity .hero-badge { margin-bottom: 0; }
main .hero-logo {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px -14px var(--accent);
    color: var(--accent);
    font: 600 1.5rem/1 var(--font-display);
}

main .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 2.5rem; }
main .hero-actions > a { width: auto; }
main .hero-meta { padding-top: 1.75rem; border-top: 1px solid var(--line-2); }
main .hero-meta > .meta { margin: 0 0 1rem; }
main .hero-stats { display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; }
main .hero-stat {
    font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--accent);
}

main .hub-hero {
    --accent: var(--pillar-accent, var(--brand-accent));
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

main .interior-section { padding-block: var(--space-section); }
.section-pad { padding-block: var(--space-section); }

/* The only centred block on a page. One width everywhere (64rem, the max-w-5xl wrappers), so the
   closing block matches between a hub and its product pages; every panel sits in a block wrapper. */
main .cta-panel {
    max-width: 64rem;
    margin-inline: auto;
    border: 1px solid var(--line-2);
    border-top-color: color-mix(in srgb, var(--accent) 45%, var(--line-2));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
        var(--surface-2);
    box-shadow: var(--shadow-card);
    padding: clamp(2rem, 5vw, 3rem);
    text-align: center;
}
main .cta-panel .section-title { margin-inline: auto; }
main .cta-panel > p:not(.eyebrow) { max-width: 40rem; }
main .cta-panel .eyebrow { justify-content: center; }
main .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin-top: 2rem; }

/* ==========================================================================
   Surfaces (A7): a four-step elevation ladder with a brighter top edge.
   Static surfaces never move or glow; link cards get their edge from effects.css.
   ========================================================================== */
.surface {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-top-color: var(--line-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.surface--raised { background: var(--surface-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); }
.surface--well { background: var(--surface-1); border-color: var(--line-1); border-top-color: var(--line-1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.surface--overlay { background: var(--surface-4); border-color: var(--line-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }
.surface--accent {
    background:
        radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
        var(--surface-2);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line-2));
    border-top-color: color-mix(in srgb, var(--accent) 55%, var(--line-2));
}

/* Chapter bands and seams. */
.band {
    background:
        radial-gradient(60% 7.5rem at 50% 0, color-mix(in srgb, var(--accent) 6%, transparent), transparent),
        var(--band);
}
.seam, .seam--accent { position: relative; }
.seam::before,
.seam--accent::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--line-3) 20%, var(--line-3) 80%, transparent);
}
.seam--accent::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 50%, transparent); }

/* Transitional: legacy Tailwind cards adopt the card surface. */
main [class*="rounded-"][class*="bg-zinc-900/"] { background-color: var(--surface-2); border-color: var(--line-2); }

/* Figure plate: a labelled diagram ("Fig. 1", title, "Diagram" tag, caption). */
.figure-plate {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: 1.25rem;
    background: var(--surface-1);
    border: 1px solid var(--line-2);
    border-top-color: var(--line-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised);
}
.figure-plate::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1.4px);
    background-size: 24px 24px;
    opacity: 0.06;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 75%);
}
.figure-plate-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.25rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line-1);
}
.figure-plate-head .meta { flex: none; white-space: nowrap; color: var(--accent); }
.figure-plate-title { font: 500 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-2); }
.figure-plate-tag {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border: 1px dashed var(--line-3);
    border-radius: var(--radius-pill);
    font: 500 var(--fs-micro)/1.4 var(--font-sans);
    color: var(--ink-3);
}
.figure-plate figcaption {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-1);
    font: 400 var(--fs-meta)/1.55 var(--font-sans);
    color: var(--ink-4);
}

/* ==========================================================================
   Buttons and links (A8). Body-scoped so the same buttons work in the nav,
   the mobile menu, the cookie banner and main. The landing page keeps its original buttons, so these
   skip .home-classic (a zero-specificity :where(), so nothing else changes).
   ========================================================================== */
body :is(.tunet-primary, .tunet-secondary, .hub-secondary):where(:not(.home-classic *)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: 600 0.9375rem/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-standard),
        border-color var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard),
        translate var(--dur-fast) var(--ease-standard),
        scale var(--dur-press) var(--ease-standard);
}
body .tunet-primary:where(:not(.home-classic *)) { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-ink); box-shadow: var(--glow-primary); }
body :is(.tunet-secondary, .hub-secondary):where(:not(.home-classic *)) { background: transparent; border-color: var(--line-3); color: var(--ink-1); }
/* Element-qualified so page link rules (".privacy-copy a", ".prose a") cannot recolour or underline buttons. */
body :is(a, button).tunet-primary:where(:not(.home-classic *)) { color: var(--brand-ink); text-decoration: none; }
body :is(a, button):is(.tunet-secondary, .hub-secondary):where(:not(.home-classic *)) { color: var(--ink-1); text-decoration: none; }
@media (hover: hover) {
    body .tunet-primary:where(:not(.home-classic *)):hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink); box-shadow: var(--glow-primary-hover); }
    body :is(.tunet-secondary, .hub-secondary):where(:not(.home-classic *)):hover { border-color: var(--ink-4); background: rgba(255, 255, 255, 0.04); color: var(--ink-1); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body :is(.tunet-primary, .tunet-secondary, .hub-secondary):where(:not(.home-classic *)):hover { translate: 0 var(--lift-button); }
}
body .tunet-primary:where(:not(.home-classic *)):active { background: var(--brand-active); border-color: var(--brand-active); box-shadow: var(--glow-primary-active); translate: 0 0; transition-duration: var(--dur-press); }
body :is(.tunet-secondary, .hub-secondary):where(:not(.home-classic *)):active { background: rgba(255, 255, 255, 0.07); translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
    body :is(.tunet-primary, .tunet-secondary, .hub-secondary):where(:not(.home-classic *)):active { scale: var(--press-scale); }
}
body :is(.tunet-primary, .tunet-secondary, .hub-secondary):where(:not(.home-classic *)):is(:disabled, [aria-disabled="true"]),
form[aria-busy="true"] button[type="submit"] { opacity: 0.6; cursor: progress; box-shadow: none; translate: none; scale: none; }
body .btn-sm { min-height: 2.5rem; padding: 0 1rem; font-size: var(--fs-ui); }
@media (max-width: 639px) {
    /* A label that cannot fit wraps inside its button instead of spilling out of it. */
    body :is(.tunet-primary, .tunet-secondary, .hub-secondary):where(:not(.home-classic *)) { white-space: normal; text-align: center; text-wrap: balance; }
}
body :is(.tunet-primary, .tunet-secondary, .hub-secondary):where(:not(.home-classic *)) > svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
body :is(.tunet-primary, .tunet-secondary, .hub-secondary):where(:not(.home-classic *)) > .mr-4 { margin-right: 0; }
body :is(.tunet-secondary, .hub-secondary):where(:not(.home-classic *)) > span { color: inherit; font: inherit; }

body .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    font: 600 0.9375rem/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--ink-1);
    text-decoration: none;
}
body .text-link > span[aria-hidden] { color: var(--accent); }
body .text-link:hover { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.25em; }
/* Stretched link: the whole positioned card is the hit area. */
.card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }

/* ==========================================================================
   Status, tags, accent helpers, install chip (A9)
   ========================================================================== */
.status {
    --s: var(--status-planned);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.5rem;
    padding: 0 0.625rem 0 0.5rem;
    border: 1px solid color-mix(in srgb, var(--s) 30%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--s) 8%, transparent);
    font: 500 var(--fs-micro)/1 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
    white-space: nowrap;
}
.status::before { content: ''; width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: 50%; background: var(--s); }
.status:is([data-status="live"], [data-status="service"]) { --s: var(--status-live); }
.status:is([data-status="pilot"], [data-status="beta"], [data-status="alpha"]) { --s: var(--status-pilot); }
.status:is([data-status="building"], [data-status="in_development"], [data-status="development"], [data-status="soon"]) { --s: var(--status-dev); }
.status:is([data-status="research"], [data-status="prototype"]) { --s: var(--status-research); }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
    padding: 0 0.625rem;
    border: 1px solid var(--line-3);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.03);
    font: 500 var(--fs-meta)/1 var(--font-sans);
    color: var(--ink-2);
}
.tag--dot::before { content: ''; width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.accent-text { color: var(--accent); }
.accent-chip { color: var(--ink-1); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.accent-wash { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%); }

.install-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    margin: 0;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-sm);
    background: var(--well);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.install-chip code {
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0;
    border-radius: 0;
    background: none;
    font: 500 var(--fs-meta)/1.4 var(--font-mono);
    color: #a7f3d0;
    scrollbar-width: none;
}
@media (max-width: 479px) {
    .install-chip code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
}
.copy-button {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 2.75rem;
    min-height: 2.25rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    font: 500 var(--fs-micro)/1 var(--font-sans);
    color: var(--ink-3);
    cursor: pointer;
    align-content: center;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
/* Reserves the width of the confirmation label (data-copied-label, translated) in a zero-height second
   row, so the button and the links beside it do not move while "Copied" shows. */
.copy-button::after { content: attr(data-copied-label); height: 0; overflow: hidden; visibility: hidden; }
.copy-button:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.06); }
.copy-button[data-state="copied"] { color: var(--status-live); }

/* ==========================================================================
   Forms (A10). Text inputs are 16px so iOS never zooms.
   ========================================================================== */
main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-sm);
    background-color: var(--field);
    color: var(--ink-1);
    font: 400 1rem/1.5 var(--font-sans);
    letter-spacing: 0;
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):hover { border-color: var(--field-line-hover); }
/* The outline stays transparent rather than none so forced-colors mode still shows focus. */
main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(245, 181, 68, 0.28);
}
/* Refinements carry the field rule's weight plus one element (":is(field):is(select)") so they win over it. */
main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):is(textarea) { min-height: 8rem; resize: vertical; }
main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):is(select) {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f7f4ec'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}
main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):is(select):has(option[value=""]:checked) { color: var(--field-line-hover); }
main form select option { background: var(--surface-3); color: var(--ink-1); }
main form input[type="checkbox"] {
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 1.5px solid var(--field-line-hover);
    border-radius: var(--radius-xs);
    background: var(--field);
    cursor: pointer;
}
main form input[type="checkbox"]:checked {
    background: var(--brand-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317130b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
    border-color: var(--brand-accent);
}
@media (forced-colors: active) {
    main form input[type="checkbox"] { appearance: auto; }
}
main form input:-webkit-autofill { -webkit-text-fill-color: var(--ink-1); box-shadow: 0 0 0 1000px var(--field) inset; caret-color: var(--ink-1); }
main form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--field) inset, 0 0 0 3px rgba(245, 181, 68, 0.28); }

.check-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    font: 400 var(--fs-ui)/1.4 var(--font-sans);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-standard);
}
.check-row:hover { border-color: var(--line-3); }
.check-row:has(:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.field-legend { margin: 0 0 1.25rem; font: 400 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-3); }
.field-required { color: var(--accent); margin-left: 0.125rem; }

/* Result panels after a submit (the partials carry the heading the script focuses). */
.form-result {
    margin: 1rem 0;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line-2));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.form-result--error { border-color: rgba(248, 113, 113, 0.35); background: color-mix(in srgb, #f87171 8%, var(--surface-2)); }
.form-result h3 { font: 600 var(--fs-h4)/1.4 var(--font-sans); color: var(--ink-1); margin: 0 0 0.25rem; }
.form-result h3:focus { outline: none; }
.form-result h3:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }

/* ==========================================================================
   Code blocks scroll inside their box instead of widening the page
   ========================================================================== */
main pre { max-width: 100%; overflow-x: auto; }
main :not(pre) > code { overflow-wrap: anywhere; }

/* ==========================================================================
   Section pill (A11): a second floating pill under the nav with a sliding
   accent indicator. effects.js sets aria-current, --indicator-x and --indicator-w.
   ========================================================================== */
main .section-nav {
    position: sticky;
    top: var(--subnav-top);
    z-index: var(--z-sticky);
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto;
    padding: 0.3125rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background: #0c0c0b; /* opaque: headings scrolling under the stuck pill never ghost through */
    /* First shadow: a zero-blur canvas copy of the pill, raised by the gap between the nav bottom (78px)
       and the stuck pill (84px), so content scrolling under the 6px slit never shows between the bars. */
    box-shadow: 0 calc(var(--nav-bottom) - var(--subnav-top)) 0 0 var(--canvas), var(--shadow-float);
}
main .section-nav[data-section-nav="desktop"] { display: none; }
@media (min-width: 1024px) {
    main .section-nav[data-section-nav="desktop"] { display: block; }
}
main .section-nav-track {
    position: relative;
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}
main .section-nav-track::-webkit-scrollbar { display: none; }
main .section-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: var(--radius-sm);
    font: 500 var(--fs-meta)/1 var(--font-sans);
    color: var(--ink-3);
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: center;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
main .section-nav a:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.04); }
main .section-nav a[aria-current="true"] { color: var(--ink-1); }
main .section-nav a:focus-visible { outline-offset: -2px; }
main .section-nav-track::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 2px;
    border-radius: 0; /* a radius on the 1px box would be scaled into long tapers by scaleX() */
    background: var(--accent);
    transform-origin: left center;
    transform: translateX(var(--indicator-x, 0px)) scaleX(var(--indicator-w, 0));
    transition: transform var(--dur-base) var(--ease-out);
    pointer-events: none;
}
@media (pointer: coarse) {
    main .section-nav a { min-height: 2.75rem; }
}
/* Narrow screens: the track scrolls, so its edges fade where more pills sit off-screen. The base
   fades the right edge only. With scroll timelines, the fades follow the track's own scroll
   position (pill-edges keyframes in effects.css): no left fade at the start, a fade on both edges
   mid-track, no right fade at the end. It is scroll-bound state, not motion, so reduced motion keeps it. */
@property --fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* initial-value must be computationally independent, so px (40px = the 2.5rem base fade), not rem. */
@property --fr { syntax: '<length>'; inherits: false; initial-value: 40px; }
@media (max-width: 1023px) {
    main .section-nav-track {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    }
    @supports (animation-timeline: scroll()) {
        main .section-nav-track {
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
            animation: pill-edges linear both;
            animation-timeline: scroll(self inline);
        }
    }
}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 639px) {
    main .hero-stats { gap: 1rem 2rem; }
    /* Actions: the first spans the row, the rest pair up; a last one left alone spans too. */
    main .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    main .hero-actions > :first-child,
    main .hero-actions > :last-child:nth-child(even) { grid-column: 1 / -1; }
    main .hero-actions > a,
    main .hero-actions > * { width: 100%; }
    /* Closing actions stack at one shared width, so a label that wraps does not leave a ragged column. */
    main .cta-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    main .cta-actions > * { width: 100%; }
}

/* ==========================================================================
   Code windows (A12): real snippets and their real output (tools/showcase)
   ========================================================================== */
.code-window {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    border-top-color: var(--line-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
}
/* The bar wraps: when dots, file name and version do not fit, the version (margin-left: auto) takes a
   second, right-aligned line so the file name is never cut. Nothing wraps from 768px up. */
.code-window-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: 2.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--line-1); background: rgba(255, 255, 255, 0.025); }
.code-window-dots { display: inline-flex; gap: 0.375rem; }
.code-window-dots i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.code-window-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--fs-code)/1.4 var(--font-mono); color: var(--ink-2); }
.code-window-meta { margin-left: auto; white-space: nowrap; font: 500 0.75rem/1 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--ink-3); }
.code-window pre {
    margin: 0;
    overflow-x: auto;
    font: 400 var(--fs-code)/var(--lh-code) var(--font-mono);
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.code-window-code { padding: 1.125rem 1.25rem; color: #e4e4e7; }
.code-window-run { border-top: 1px solid var(--line-1); background: var(--well); }
.code-window-prompt { margin: 0; padding: 0.875rem 1.25rem 0; font: 500 0.75rem/1 var(--font-mono); color: var(--ink-4); }
.code-window-prompt span { color: var(--status-live); }
.code-window-output { padding: 0.625rem 1.25rem 1.125rem; color: #d4f5e4; }
/* Output wraps so nothing real is hidden off-screen; column-aligned tables keep their layout and scroll. */
.code-window-output samp { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-window-output--table samp { white-space: pre; overflow-wrap: normal; }
.code-window pre:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
.code-window-caption { padding: 0.75rem 1.25rem; border-top: 1px solid var(--line-1); font: 400 0.75rem/1.5 var(--font-sans); color: var(--ink-4); }
/* Bare window: illustrative code, no traffic-light dots; the bar carries a plain label. */
.code-window--bare .code-window-dots { display: none; }
/* Bare labels are prose ("Planned endpoint shape (illustrative)"): they wrap, so the qualifier is never cut. */
.code-window--bare .code-window-file { font: 500 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-3); white-space: normal; overflow: visible; text-overflow: clip; }
.code-window--bare .code-window-code { padding: 1.25rem; white-space: pre; }
@media (max-width: 639px) {
    .code-window pre,
    main :where(:not(pre) > code) { font-size: 0.78125rem; }
}
.code-window .pg-k, .code-window .pg-kn, .code-window .pg-kd, .code-window .pg-ow, .code-window .pg-kc { color: #c4b5fd; }
.code-window .pg-s, .code-window .pg-s1, .code-window .pg-s2, .code-window .pg-sa, .code-window .pg-sd, .code-window .pg-si, .code-window .pg-se, .code-window .pg-sb { color: #86efac; }
.code-window .pg-mi, .code-window .pg-mf, .code-window .pg-mh, .code-window .pg-kt { color: #fcd34d; }
.code-window .pg-c, .code-window .pg-c1, .code-window .pg-ch, .code-window .pg-cm { color: #8b8b95; font-style: italic; }
.code-window .pg-nf, .code-window .pg-fm { color: #7dd3fc; }
.code-window .pg-nc, .code-window .pg-ne { color: #fde68a; }
.code-window .pg-nb, .code-window .pg-bp { color: #f9a8d4; }
.code-window .pg-nn { color: #e4e4e7; }
.code-window .pg-o, .code-window .pg-p { color: #a1a1aa; }

/* Code tabs: a segmented control. Without JavaScript every panel simply shows. */
.code-tabs-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 100%;
    margin-bottom: 1rem;
    padding: 0.25rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background: var(--surface-1);
}
.code-tabs-list button {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 0.875rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font: 500 var(--fs-ui)/1 var(--font-sans);
    color: var(--ink-3);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.code-tabs-list button:hover { color: var(--ink-1); }
/* The 70% border is the state indicator that reaches 3:1 against the track for every page accent. */
.code-tabs-list button[aria-selected="true"] {
    color: var(--ink-1);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
@media (pointer: coarse) {
    .code-tabs-list button { min-height: 2.75rem; }
}
.code-tabs, .code-tabs-panel { min-width: 0; }
.code-tabs-panel[hidden] { display: none; }

/* Package pages: the non-hero "Run it" section. */
main .package-run { padding: var(--space-section) var(--gutter); border-bottom: 1px solid var(--line-2); background: var(--band); }
main .package-run .lead { margin-bottom: 1.5rem; }
main .package-run-inner { max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
main .package-run .eyebrow { color: var(--status-live); }
main .package-run-install code {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-sm);
    background: var(--well);
    font: 500 var(--fs-meta)/1.4 var(--font-mono);
    color: #a7f3d0;
}
@media (max-width: 1023px) {
    main .package-run-inner { grid-template-columns: minmax(0, 1fr); }
}

/* The hidden attribute always wins over the display values set above (effects.js hides copy
   buttons when the clipboard API is missing). Kept last so it also beats the media-query variants. */
body :is(.tunet-primary, .tunet-secondary, .hub-secondary, .text-link, .copy-button, .install-chip, .status, .tag, .check-row, .section-nav, .section-index, .figure-plate, .surface)[hidden] { display: none; }