/* ==========================================================
   IROZON BRANDING SITE — styles
   Design tokens are loaded first via <link> from
   packages/design-tokens/src/*.css (see site/index.html). This file:
     1. legacy variable aliases, so the component rules below (written
        before the token package existed) don't need to change;
     2. the site's @font-face for self-hosted Manrope;
     3. every page/component-specific rule.
   ========================================================== */

:root {
  /* ---- Legacy names — kept so this stylesheet's existing component
     rules don't need to change. Each one is a pointer onto a semantic
     token from packages/design-tokens, so overriding those tokens for
     dark mode (see themes.css) is enough to retheme every rule below
     automatically. ---- */
  --green: var(--color-action-primary);
  --lime: var(--irozon-lime);
  --ink: var(--irozon-ink);
  --canvas: var(--color-canvas);
  --subtle-bg: var(--color-surface-subtle);
  --elevated-bg: var(--color-surface-elevated);
  --text-primary: var(--color-text-primary);
  --text-body: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --error: var(--color-error);
  --success: var(--color-success);

  /* Illustrative legacy color (Do/Don't section only — not a token) */
  --legacy-blue: #2f80ed;

  --masthead-bg: rgba(255, 255, 255, 0.85);
}

:root[data-theme="dark"] {
  --masthead-bg: rgba(7, 26, 33, 0.85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --masthead-bg: rgba(7, 26, 33, 0.85);
  }
}

/* Utility to preview the dark token set inside a light-mode page
   (Design Tokens / Product UI Examples sections) — same technique as
   the real dark theme, scoped to one element instead of :root. */
.theme-preview-dark {
  --color-canvas: #071a21;
  --color-surface: #0e2731;
  --color-surface-elevated: #15323d;
  --color-surface-subtle: #0a2028;
  --color-border: #1e3e49;
  --color-border-strong: #2a4e59;
  --color-text-primary: #f3f6f5;
  --color-text-secondary: #c4cdd1;
  --color-text-muted: #8fa0a6;
  --color-action-primary: var(--irozon-green);
  --color-action-primary-hover: #1fdc9c;
  --color-action-primary-active: #00b378;
  --color-on-action-primary: var(--irozon-ink);
  --color-link: var(--irozon-lime);
  --color-link-decoration: var(--irozon-lime);
  --color-warning: #ffc670;
  --color-error: #ff8562;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.35);

  /* Re-point the legacy aliases (see :root above) at these same local
     --color-* overrides. Without this, a rule that consumes a legacy
     alias instead of the real token — e.g. site.css's own global
     `h1,h2,h3{color:var(--text-primary)}`, or `.caption` — resolves
     that alias's value once at :root (the page's real theme) and
     simply inherits that frozen result, never re-evaluating it inside
     this scope. That's what made card titles, table/tab text, etc.
     go dark-on-dark here even though the underlying --color-* tokens
     were already correctly overridden above. Canonical component CSS
     (.iz-card, .iz-table, .iz-tab…) never uses these legacy names —
     this fix is purely for site.css/doc-page rules still written
     against them inside a preview box. */
  --canvas: var(--color-canvas);
  --subtle-bg: var(--color-surface-subtle);
  --elevated-bg: var(--color-surface-elevated);
  --text-primary: var(--color-text-primary);
  --text-body: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --error: var(--color-error);

  background: var(--canvas);
  color: var(--text-body);
  border-radius: var(--r-lg);
  padding: 32px;
  border: 1px solid var(--border);
}

/* Self-hosted Manrope, mirroring the production @font-face in
   src/index.css. Variable font, weight axis 200–800. */
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
      }

      body {
        margin: 0;
        background: var(--canvas);
        color: var(--text-body);
        font-family: var(--font-body);
        font-size: var(--fs-body);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        transition:
          background var(--dur-standard) var(--ease-standard),
          color var(--dur-standard) var(--ease-standard);
      }
      @media (prefers-reduced-motion: reduce) {
        body {
          transition: none;
        }
      }
      body.force-reduced-motion {
        transition: none !important;
      }

      /* body gets this class via the reduced-motion demo toggle (JS) */
      body.force-reduced-motion .respects-motion {
        transition: none !important;
        animation: none !important;
      }

      h1,
      h2,
      h3 {
        font-family: var(--font-display);
        color: var(--text-primary);
        margin: 0;
        letter-spacing: -0.02em;
        font-weight: 700;
      }
      h1 {
        font-size: var(--fs-h1);
        line-height: 1.08;
      }
      h2 {
        font-size: var(--fs-h2);
        line-height: 1.15;
      }
      h3 {
        font-size: var(--fs-h3);
        line-height: 1.25;
        letter-spacing: -0.01em;
      }
      p {
        margin: 0 0 1em;
        color: var(--text-body);
      }
      p:last-child {
        margin-bottom: 0;
      }
      code,
      .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.85em;
      }

      a {
        color: inherit;
      }

      .wrap {
        max-width: var(--content-max);
        margin: 0 auto;
        padding-inline: 32px;
      }
      @media (max-width: 640px) {
        .wrap {
          padding-inline: var(--space-4);
        }
      }

      .eyebrow {
        font-family: var(--font-label);
        font-size: var(--fs-label);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--green);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
      }
      .eyebrow::before {
        content: "";
        width: 18px;
        height: 2px;
        background: var(--green);
        display: inline-block;
        border-radius: 2px;
      }

      section.doc-section {
        padding: 96px 0;
        border-top: 1px solid var(--border);
      }
      section.doc-section:first-of-type {
        border-top: none;
      }
      @media (max-width: 640px) {
        section.doc-section {
          padding: 64px 0;
        }
      }

      .section-head {
        max-width: 760px;
        margin-bottom: 56px;
      }
      .section-head p {
        font-size: var(--fs-body-lg);
        color: var(--text-muted);
        margin-top: 14px;
      }

      /* ---------- Masthead + jump nav ---------- */
      .masthead {
        position: sticky;
        top: 0;
        z-index: 40;
        background: var(--masthead-bg);
        backdrop-filter: blur(10px);
        transition: background var(--dur-standard) var(--ease-standard);
        border-bottom: 1px solid var(--border);
      }
      .masthead-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        /* block-only — .masthead-row is also .wrap (see markup), so the
           shared .wrap padding-inline (the page's one responsive outer
           gutter) supplies the horizontal space. A `padding: 14px 0`
           shorthand here would silently reset padding-inline to 0 and
           override .wrap's, since this rule comes later in the
           cascade at equal specificity — that was the actual bug
           behind the header sitting flush against the viewport edge
           on mobile while the page content correctly had a gutter. */
        padding-block: 14px;
      }
      .masthead-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }
      .masthead-right {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: none;
      }
      .masthead-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-label);
        font-size: var(--fs-label);
        color: var(--text-muted);
        text-decoration: none;
        min-width: 0;
      }
      .masthead-brand img {
        height: 22px;
        width: auto;
        display: block;
        flex: none;
      }
      .masthead-brand strong {
        color: var(--text-primary);
        font-weight: 700;
      }
      .masthead-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .masthead-version {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--text-muted);
        white-space: nowrap;
      }
      .nav-trigger {
        display: none;
        flex: none;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border-radius: var(--r-sm);
        border: 1px solid var(--border);
        background: var(--subtle-bg);
        color: var(--text-primary);
        cursor: pointer;
        transition:
          background var(--dur-instant) var(--ease-standard),
          border-color var(--dur-instant) var(--ease-standard),
          transform var(--motion-duration-instant) var(--motion-ease-standard);
      }
      .nav-trigger:hover {
        background: var(--border);
      }
      .nav-trigger:active {
        transform: scale(0.94);
      }
      .nav-trigger:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }
      @media (prefers-reduced-motion: reduce) {
        .nav-trigger {
          transition: none;
        }
        .nav-trigger:active {
          transform: none;
        }
      }
      body.force-reduced-motion .nav-trigger {
        transition: none !important;
      }
      body.force-reduced-motion .nav-trigger:active {
        transform: none !important;
      }
      .nav-trigger svg {
        width: 18px;
        height: 18px;
      }

      /* Sections can be deep-linked from the jump nav or a direct #hash —
         reserve room under the sticky masthead so headings never land
         underneath it. */
      .doc-section {
        scroll-margin-top: 84px;
      }

      /* ---------- Theme toggle ---------- */
      .theme-toggle {
        position: relative;
        flex: none;
        width: 56px;
        height: 30px;
        border-radius: var(--r-pill);
        border: 1px solid var(--border);
        background: var(--subtle-bg);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 6px;
        transition:
          background var(--dur-standard) var(--ease-standard),
          border-color var(--dur-standard) var(--ease-standard);
      }
      .theme-toggle:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 3px;
      }
      .theme-toggle-icon {
        width: 14px;
        height: 14px;
        color: var(--text-muted);
        display: flex;
        position: relative;
        z-index: 1;
        transition: color var(--dur-standard) var(--ease-standard);
      }
      .theme-toggle[aria-pressed="true"] .theme-toggle-icon.sun {
        color: var(--text-muted);
      }
      .theme-toggle[aria-pressed="true"] .theme-toggle-icon.moon {
        color: var(--irozon-white);
      }
      .theme-toggle-thumb {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--ink);
        transition:
          transform var(--dur-standard) var(--ease-standard),
          background var(--dur-standard) var(--ease-standard);
      }
      .theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
        transform: translateX(26px);
        background: var(--green);
      }
      @media (prefers-reduced-motion: reduce) {
        .theme-toggle,
        .theme-toggle-thumb,
        .theme-toggle-icon {
          transition: none;
        }
      }
      body.force-reduced-motion .theme-toggle,
      body.force-reduced-motion .theme-toggle-thumb,
      body.force-reduced-motion .theme-toggle-icon {
        transition: none !important;
      }

      @media (max-width: 480px) {
        .masthead-brand span,
        .masthead-version {
          display: none;
        }
      }


      /* Smooth in-page scrolling only when the visitor hasn't asked for
         reduced motion — otherwise anchor jumps are instant. */
      @media (prefers-reduced-motion: no-preference) {
        html {
          scroll-behavior: smooth;
        }
      }

      /* ---------- Documentation shell (sidebar + content) ---------- */
      .shell {
        display: flex;
        /* stretch (default), not flex-start: the sidebar's subtle
           background/border need to span the full row height — which is
           set by shell-main, the taller sibling on every real page — not
           just the sidebar's own (much shorter) nav-link content. */
      }
      .sidebar-backdrop {
        display: none;
      }
      .sidebar {
        flex: 0 0 252px;
        width: 252px;
        padding: 40px 12px 40px 32px;
        box-sizing: border-box;
        /* A subtly distinct surface from the main canvas, not just a
           border, is what actually separates the docs nav from content.
           Lives on this full-stretch-height element, not on the sticky
           scrolling .side-nav below — a fixed max-height here (matched
           to one viewport) was what previously cut the background off
           partway down any page taller than the screen. */
        background: var(--subtle-bg);
        border-right: 1px solid var(--border);
      }
      @media (max-width: 640px) {
        .sidebar {
          padding-left: var(--space-4);
        }
      }
      .side-nav {
        display: flex;
        flex-direction: column;
        /* The nav links themselves stay pinned near the top and, only if
           they're taller than the viewport has room for, scroll inside
           their own box — independent of .sidebar's height, which is
           free to stretch with the page. */
        position: sticky;
        top: calc(var(--header-h, 65px) + 40px);
        max-height: calc(100vh - var(--header-h, 65px) - 80px);
        overflow-y: auto;
      }
      /* Active navigation marker: a straight vertical bar on the outer
         edge of the item, separate from the label and any icon slot.
         Hover never moves the item itself. Left padding is constant
         across every state so the marker fading in/out never shifts the
         label. */
      .side-link {
        position: relative;
        display: block;
        padding: 7px 12px 7px 18px;
        margin: 1px 0;
        border-radius: var(--r-xs);
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        color: var(--text-body);
        text-decoration: none;
        transition:
          background var(--motion-duration-fast) var(--motion-ease-standard),
          color var(--motion-duration-fast) var(--motion-ease-standard);
      }
      .side-link::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        width: 3px;
        height: 14px;
        border-radius: 0;
        background: var(--green);
        opacity: 0;
        transform: translateY(-50%) scaleY(0.4);
        transition:
          opacity var(--motion-duration-fast) var(--motion-ease-standard),
          transform var(--motion-duration-fast) var(--motion-ease-standard);
      }
      .side-link:hover {
        /* One step up from the sidebar's own --subtle-bg, so hover/active
           actually read as raised instead of matching the sidebar around
           them. */
        background: var(--elevated-bg);
        color: var(--text-primary);
      }
      .side-link:active {
        transform: scale(0.99);
      }
      .side-link:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }
      .side-link.is-active {
        background: var(--elevated-bg);
        color: var(--text-primary);
      }
      .side-link.is-active::before {
        opacity: 1;
        transform: translateY(-50%) scaleY(1);
      }
      .side-group {
        margin-top: 18px;
      }
      .side-group-label {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-muted);
        opacity: 0.75;
        padding: 8px 12px 6px;
      }
      @media (prefers-reduced-motion: reduce) {
        .side-link,
        .side-link::before {
          transition: none;
        }
        .side-link:active {
          transform: none;
        }
        .side-link::before,
        .side-link.is-active::before {
          /* keep the centering translateY, drop only the scale-in */
          transform: translateY(-50%);
        }
      }
      body.force-reduced-motion .side-link,
      body.force-reduced-motion .side-link::before {
        transition: none !important;
      }
      body.force-reduced-motion .side-link:active {
        transform: none !important;
      }
      body.force-reduced-motion .side-link::before,
      body.force-reduced-motion .side-link.is-active::before {
        transform: translateY(-50%) !important;
      }

      /* Nested page sections — shown only under the current page's own
         sidebar item, as a quiet subordinate tree. Deliberately lighter
         than the parent's Inset Marker: smaller text, muted by default,
         a hairline branch instead of a filled surface, a small point
         instead of a rounded bar for the active child. Two levels
         sharing one navigation system, not two competing ones. */
      .side-children {
        display: flex;
        flex-direction: column;
        margin: 2px 0 8px 21px;
        padding-left: 12px;
        border-left: 1px solid var(--border);
      }
      .side-child {
        position: relative;
        padding: 4px 8px;
        margin: 1px 0;
        border-radius: var(--r-xs);
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        line-height: 1.5;
        color: var(--text-muted);
        text-decoration: none;
        transition:
          background var(--motion-duration-fast) var(--motion-ease-standard),
          color var(--motion-duration-fast) var(--motion-ease-standard);
      }
      .side-child:hover {
        background: var(--elevated-bg);
        color: var(--text-primary);
      }
      .side-child:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }
      .side-child.is-active {
        color: var(--text-primary);
      }
      .side-child.is-active::before {
        content: "";
        position: absolute;
        left: -15px;
        top: 50%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--green);
        transform: translateY(-50%);
      }
      @media (prefers-reduced-motion: reduce) {
        .side-child {
          transition: none;
        }
      }
      body.force-reduced-motion .side-child {
        transition: none !important;
      }

      .shell-main {
        flex: 1 1 auto;
        min-width: 0;
        padding: 8px 0 40px;
      }

      .content-prose {
        max-width: 720px;
        margin: 0 auto;
        padding-inline: 32px;
      }
      .content-wide {
        max-width: 1100px;
        margin: 0 auto;
        padding-inline: 32px;
      }
      @media (max-width: 640px) {
        .content-prose,
        .content-wide {
          padding-inline: var(--space-4);
        }
      }

      @media (max-width: 959px) {
        .nav-trigger {
          display: inline-flex;
        }
        .shell {
          display: block;
        }
        .sidebar {
          position: fixed;
          inset: 0 auto 0 0;
          height: 100vh;
          width: min(84vw, 300px);
          background: var(--canvas);
          border-right: 1px solid var(--border);
          box-shadow: var(--shadow-lg);
          z-index: 60;
          padding: 24px 20px 32px;
          max-height: none;
          overflow-y: auto;
          transform: translateX(-100%);
          transition: transform var(--dur-standard) var(--ease-standard);
        }
        /* The drawer itself is the full-height scroll region here (it's
           already the whole 100vh box, not a taller page beside it), so
           the desktop rule's nested sticky/max-height on .side-nav — sized
           for "stay pinned while a much taller page scrolls past it" —
           has nothing to do in a drawer that never scrolls past its own
           nav. */
        .side-nav {
          position: static;
          max-height: none;
          overflow-y: visible;
        }
        .sidebar.is-open {
          transform: translateX(0);
        }
        .sidebar-backdrop {
          display: block;
          position: fixed;
          inset: 0;
          background: rgba(3, 10, 13, 0.45);
          opacity: 0;
          visibility: hidden;
          z-index: 50;
          transition:
            opacity var(--dur-standard) var(--ease-standard),
            visibility var(--dur-standard) var(--ease-standard);
        }
        .sidebar-backdrop.is-visible {
          opacity: 1;
          visibility: visible;
        }
        .shell-main {
          padding-top: 32px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .sidebar,
        .sidebar-backdrop {
          transition: none;
        }
      }
      body.force-reduced-motion .sidebar,
      body.force-reduced-motion .sidebar-backdrop {
        transition: none !important;
      }

      /* Forces the LIGHT token values inside one element, mirroring
         .theme-preview-dark — used where both themes must be shown at
         once regardless of the page's current theme (e.g. the homepage
         light/dark preview). */
      .theme-preview-light {
        --color-canvas: #ffffff;
        --color-surface: #ffffff;
        --color-surface-elevated: #ffffff;
        --color-surface-subtle: #f7f8f7;
        --color-border: #e5e8e7;
        --color-border-strong: #c8d0cd;
        --color-text-primary: #1d2226;
        --color-text-secondary: #33383f;
        --color-text-muted: #6f777d;
        --color-action-primary: var(--irozon-ink);
        --color-action-primary-hover: color-mix(in srgb, var(--irozon-ink) 88%, white 12%);
        --color-action-primary-active: color-mix(in srgb, var(--irozon-ink) 88%, black 12%);
        --color-on-action-primary: var(--irozon-white);
        --color-link: color-mix(in srgb, var(--irozon-green) 55%, var(--irozon-ink) 45%);
        --color-link-decoration: var(--irozon-green);
        --color-warning: #e2a63b;
        --color-error: #ff6b4a;
        --shadow-sm: 0 1px 2px rgba(8, 42, 56, 0.05), 0 1px 1px rgba(8, 42, 56, 0.03);
        --shadow-md: 0 6px 16px rgba(8, 42, 56, 0.07), 0 2px 5px rgba(8, 42, 56, 0.04);
        --shadow-lg: 0 16px 40px rgba(8, 42, 56, 0.1), 0 4px 10px rgba(8, 42, 56, 0.05);
        background: var(--canvas);
        color: var(--text-body);
        border-radius: var(--r-lg);
        padding: 32px;
        border: 1px solid var(--border);
      }

      /* ---------- Homepage overview links (quiet, editorial — not cards) ---------- */
      .overview-list {
        border-top: 1px solid var(--border);
      }
      .overview-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 24px;
        padding: 24px 4px;
        border-bottom: 1px solid var(--border);
        text-decoration: none;
        color: inherit;
        transition: background var(--dur-instant) var(--ease-standard);
      }
      .overview-row:hover {
        background: var(--subtle-bg);
      }
      .overview-row:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: -2px;
      }
      .overview-row-text h3 {
        margin-bottom: 6px;
      }
      .overview-row-text p {
        color: var(--text-muted);
        font-size: var(--fs-body-sm);
        max-width: 56ch;
      }
      .overview-row-arrow {
        flex: none;
        color: var(--text-muted);
        transition: transform var(--dur-instant) var(--ease-standard);
      }
      .overview-row:hover .overview-row-arrow {
        transform: translateX(3px);
        color: var(--green);
      }
      @media (prefers-reduced-motion: reduce) {
        .overview-row,
        .overview-row-arrow {
          transition: none;
        }
        .overview-row:hover .overview-row-arrow {
          transform: none;
        }
      }
      body.force-reduced-motion .overview-row,
      body.force-reduced-motion .overview-row-arrow {
        transition: none !important;
      }
      @media (max-width: 560px) {
        .overview-row {
          flex-direction: column;
          gap: 8px;
        }
      }

      .documentation-flag {
        background: var(--ink);
        color: #fff;
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: center;
        padding: 8px 12px;
      }
      .documentation-flag strong {
        color: var(--lime);
      }

      /* ---------- Hero / overview ---------- */
      .hero {
        padding: 96px 0 72px;
      }
      .hero .kicker {
        font-family: var(--font-label);
        font-size: var(--fs-label);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        margin-bottom: 20px;
      }
      .hero h1 {
        font-size: var(--fs-display-xl);
        max-width: 16ch;
      }
      .hero .lede {
        font-size: var(--fs-body-lg);
        color: var(--text-muted);
        max-width: 56ch;
        margin-top: 24px;
      }
      .principle-strip {
        margin-top: 56px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: hidden;
      }
      @media (max-width: 720px) {
        .principle-strip {
          grid-template-columns: 1fr;
        }
      }
      .principle-strip blockquote {
        margin: 0;
        padding: 28px 28px;
        background: var(--canvas);
        font-family: var(--font-display);
        font-size: 1.15rem;
        line-height: 1.4;
        color: var(--text-primary);
        letter-spacing: -0.01em;
      }
      .principle-strip blockquote::before {
        content: "\201C";
        color: var(--green);
      }
      .principle-strip blockquote::after {
        content: "\201D";
        color: var(--green);
      }

      .recipe-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
      }
      @media (max-width: 900px) {
        .recipe-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ---------- Logo ---------- */
      .logo-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      @media (max-width: 900px) {
        .logo-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 560px) {
        .logo-grid {
          grid-template-columns: 1fr;
        }
      }
      .logo-tile {
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: hidden;
        background: var(--canvas);
      }
      .logo-tile figure {
        margin: 0;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px;
      }
      .logo-tile figure img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
      .logo-tile.on-canvas figure {
        background: var(--canvas);
      }
      .logo-tile.on-subtle figure {
        background: var(--subtle-bg);
      }
      .logo-tile.on-ink figure {
        background: var(--ink);
      }
      .logo-tile.missing figure {
        background: repeating-linear-gradient(45deg, var(--subtle-bg) 0 10px, #eef0ef 10px 20px);
        color: var(--text-muted);
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        text-align: center;
        letter-spacing: 0.02em;
      }
      .logo-tile-meta {
        padding: 16px 18px;
        border-top: 1px solid var(--border);
      }
      .logo-tile-meta .name {
        font-family: var(--font-label);
        font-weight: 600;
        font-size: var(--fs-body-sm);
        color: var(--text-primary);
      }
      .logo-tile-meta .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        font-family: var(--font-label);
        font-size: var(--fs-caption);
      }
      .status.ok {
        color: var(--green);
      }
      .status.needed {
        color: var(--error);
      }
      .status .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        display: inline-block;
      }

      /* ---------- Color ---------- */
      .swatch-group {
        margin-bottom: 40px;
      }
      .swatch-group:last-child {
        margin-bottom: 0;
      }
      .swatch-group h3 {
        margin-bottom: 16px;
      }
      .swatch-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
      }
      .swatch {
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        overflow: hidden;
        background: var(--canvas);
        cursor: pointer;
        text-align: left;
        font: inherit;
        padding: 0;
        transition:
          transform var(--motion-duration-fast) var(--motion-ease-standard),
          border-color var(--motion-duration-fast) var(--motion-ease-standard),
          box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
      }
      /* A color swatch is a demo object, not passive structure — it
         rewards exploration with a small lift + firmer edge + a touch of
         shadow. Kept deliberately restrained (2px, one shadow tier) so it
         reads as responsive rather than the generic "every card floats"
         SaaS hover. */
      .swatch:hover {
        transform: translateY(-2px);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-md);
      }
      .swatch:active {
        transform: translateY(-1px);
      }
      .swatch:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 2px;
      }
      @media (prefers-reduced-motion: reduce) {
        .swatch {
          transition:
            border-color var(--motion-duration-fast) linear,
            box-shadow var(--motion-duration-fast) linear;
        }
        .swatch:hover,
        .swatch:active {
          transform: none;
        }
      }
      body.force-reduced-motion .swatch {
        transition:
          border-color var(--motion-duration-fast) linear,
          box-shadow var(--motion-duration-fast) linear !important;
      }
      body.force-reduced-motion .swatch:hover,
      body.force-reduced-motion .swatch:active {
        transform: none !important;
      }
      .swatch .fill {
        height: 84px;
        display: block;
      }
      .swatch .meta {
        padding: 12px 14px;
        display: block;
      }
      .swatch .meta .label {
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        font-weight: 600;
        color: var(--text-primary);
        display: block;
      }
      .swatch .meta .hex {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: var(--fs-caption);
        color: var(--text-muted);
        margin-top: 2px;
        display: block;
      }
      .swatch .meta .hex.copied {
        color: var(--green);
      }

      .gradient-card {
        border-radius: var(--r-lg);
        padding: 40px;
        background: var(--gradient-brand);
        color: var(--ink);
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 32px;
      }
      .gradient-card .label {
        font-family: var(--font-label);
        font-size: var(--fs-label);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .gradient-card code {
        background: rgba(8, 42, 56, 0.12);
        padding: 4px 8px;
        border-radius: 6px;
        width: fit-content;
      }

      .color-note {
        margin-top: 32px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 20px 24px;
        background: var(--subtle-bg);
      }
      .color-note h4 {
        margin: 0 0 8px;
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        color: var(--text-primary);
      }
      .color-note ul {
        margin: 0;
        padding-left: 18px;
      }
      .color-note li {
        margin-bottom: 6px;
        font-size: var(--fs-body-sm);
        color: var(--text-muted);
      }

      .ratio-bar {
        display: flex;
        width: 100%;
        height: 40px;
        border-radius: var(--r-sm);
        overflow: hidden;
        border: 1px solid var(--border);
      }
      .ratio-bar .seg {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
      }

      /* ---------- Typography ---------- */
      .type-scale-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 28px 0;
        border-top: 1px solid var(--border);
      }
      .type-scale-row:first-of-type {
        border-top: none;
        padding-top: 0;
      }
      .type-scale-meta {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--text-muted);
        gap: 16px;
        flex-wrap: wrap;
      }
      .type-sample {
        color: var(--text-primary);
      }
      .ts-display-xl {
        font-family: var(--font-display);
        font-size: var(--fs-display-xl);
        font-weight: 700;
        letter-spacing: -0.035em;
        line-height: 1;
      }
      .ts-display-l {
        font-family: var(--font-display);
        font-size: var(--fs-display-l);
        font-weight: 700;
        letter-spacing: -0.035em;
        line-height: 1.03;
      }
      .ts-h1 {
        font-family: var(--font-display);
        font-size: var(--fs-h1);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.05;
      }
      .ts-h2 {
        font-family: var(--font-display);
        font-size: var(--fs-h2);
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 1.1;
      }
      .ts-h3 {
        font-family: var(--font-display);
        font-size: var(--fs-h3);
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.25;
      }
      .ts-body-lg {
        font-family: var(--font-body);
        font-size: var(--fs-body-lg);
        font-weight: 400;
        line-height: 1.55;
      }
      .ts-body {
        font-family: var(--font-body);
        font-size: var(--fs-body);
        font-weight: 400;
        line-height: 1.65;
      }
      .ts-body-sm {
        font-family: var(--font-body);
        font-size: var(--fs-body-sm);
        font-weight: 400;
        line-height: 1.6;
        color: var(--text-muted);
      }
      .ts-label {
        font-family: var(--font-label);
        font-size: var(--fs-label);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-primary);
      }
      .ts-caption {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        font-weight: 500;
        letter-spacing: 0.03em;
        color: var(--text-muted);
      }

      /* ---------- Buttons ---------- */
      .btn-stage {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        align-items: flex-start;
        padding: 40px;
        border-radius: var(--r-lg);
        background: var(--ink);
        margin-bottom: 20px;
      }
      .btn-stage-label {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: rgba(255, 255, 255, 0.55);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 14px;
        display: block;
      }
      .btn-col {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .btn {
        font-family: var(--font-label);
        font-weight: 600;
        font-size: var(--fs-body-sm);
        border: none;
        cursor: pointer;
        border-radius: var(--r-sm);
        height: 48px;
        padding: 0 22px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        letter-spacing: 0.01em;
        transition: transform var(--motion-duration-instant) var(--motion-ease-standard);
      }
      .btn:active {
        transform: scale(0.97);
      }
      @media (prefers-reduced-motion: reduce) {
        .btn {
          transition: none;
        }
      }
      body.force-reduced-motion .btn {
        transition: none !important;
      }
      .btn:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 3px;
      }

      /* Irozon Signature CTA — reproduction of PrimaryButton.tsx, restored to
     the original SlidingButton.tsx architecture (git history, commit
     3a129ae), recolored to the brand. One full-width base layer (the text)
     fills the button; at rest it sits at x:0, Ink background, white text.
     On hover/focus it slides right by the original 4.1rem slide distance
     and recolors to Green with Ink text. A separate w-12 left panel (the
     dot mark) is hidden at rest (x:-100%, opacity:0) and slides in to
     x:0, opacity:1 on hover/focus — constant Ink background, white dots.
     No merging, no DOM reordering — a slide + reveal, like the original. */
      .btn-primary {
        position: relative;
        height: 48px;
        width: 216px;
        padding: 0;
        overflow: hidden;
      }
      .btn-primary .base {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--ink);
        color: #fff;
        border-radius: var(--r-sm);
        transition:
          transform var(--dur-standard) var(--ease-signature),
          background var(--dur-standard) var(--ease-signature),
          color var(--dur-standard) var(--ease-signature);
      }
      .btn-primary .panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--r-sm);
        background: var(--ink);
        color: #fff;
        transform: translateX(-100%);
        opacity: 0;
        transition:
          transform var(--dur-standard) var(--ease-signature),
          opacity var(--dur-standard) var(--ease-signature);
      }
      .btn-primary:hover .base,
      .btn-primary:focus-visible .base {
        transform: translateX(4.1rem);
        background: var(--lime);
        color: var(--ink);
      }
      .btn-primary:hover .panel,
      .btn-primary:focus-visible .panel {
        transform: translateX(0);
        opacity: 1;
      }
      .btn-primary .dots {
        display: grid;
        /* Creates a tiny grid: 2 columns wide, 3 rows tall */
        grid-template-columns: 4px 4px;
        grid-template-rows: 4px 4px 4px;
        /* 2px gap between rows, 3px gap between columns */
        gap: 2px 3px;
        align-items: center;
      }

      .btn-primary .dots span {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        display: block;
      }

      /* 1. Top dot */
      .btn-primary .dots span:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
      }

      /* 2. Middle dot (the point of the arrow) */
      .btn-primary .dots span:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
      }

      /* 3. Bottom dot */
      .btn-primary .dots span:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
      }
      .btn-primary .dots span {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        display: block;
      }

      @media (prefers-reduced-motion: reduce) {
        .btn-primary .base,
        .btn-primary .panel {
          transition: none;
        }
      }
      body.force-reduced-motion .btn-primary .base,
      body.force-reduced-motion .btn-primary .panel {
        transition: none !important;
      }

      .btn-secondary {
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.35);
        transition:
          background var(--dur-standard) var(--ease-standard),
          border-color var(--dur-standard) var(--ease-standard);
      }
      .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.6);
      }

      .btn-tertiary {
        background: none;
        color: var(--lime);
        padding: 0;
        height: auto;
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-color: rgba(155, 225, 93, 0.5);
        transition: text-decoration-color var(--dur-instant) var(--ease-standard);
      }
      .btn-tertiary:hover {
        text-decoration-color: var(--lime);
      }

      .btn-disabled {
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.4);
        cursor: not-allowed;
      }
      .btn-disabled:active {
        transform: none;
      }

      .btn-caption {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: rgba(255, 255, 255, 0.5);
        display: block;
      }

      .btn-light-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 24px;
        align-items: center;
      }
      .btn-secondary-light {
        background: transparent;
        color: var(--text-primary);
        border: 1px solid var(--border);
        transition:
          background var(--dur-standard) var(--ease-standard),
          border-color var(--dur-standard) var(--ease-standard);
      }
      .btn-secondary-light:hover {
        background: var(--subtle-bg);
        border-color: #d3d8d6;
      }
      .btn-secondary-light:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 3px;
      }

      /* Filter / Chip — quiet toggle control, not a CTA. No PrimaryButton motion. */
      .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
      .chip {
        font-family: var(--font-label);
        font-weight: 500;
        font-size: var(--fs-body-sm);
        border: 1px solid var(--border);
        cursor: pointer;
        border-radius: var(--r-sm);
        padding: 10px 20px;
        background: var(--subtle-bg);
        color: var(--ink);
        outline: none;
        transition:
          background var(--dur-instant) var(--ease-standard),
          border-color var(--dur-instant) var(--ease-standard);
      }
      .chip:hover {
        background: rgba(2, 198, 133, 0.08);
      }
      .chip:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }
      .chip-active,
      .chip-active:hover {
        background: var(--ink);
        color: #fff;
        border-color: var(--ink);
      }

      /* ---------- Buttons v1 / Loader v1 ----------
         The canonical implementations now live in
         packages/design-system/src/components/{button,loader}.css
         (synced copies at site/css/components/, loaded by buttons.html
         and loaders.html) — not here. .btn-primary below is the
         unrelated Signature CTA, a one-off hero interaction, and stays
         as-is. This one override stays site-only on purpose — it wires
         the documentation site's "simulate reduced motion" toggle
         (body.force-reduced-motion) into the canonical, framework-
         neutral .iz-loader, which only knows prefers-reduced-motion. */
      body.force-reduced-motion .iz-loader {
        animation: none !important;
      }
      /* Same simulation wiring for Badges & Status' live-pulse dot. */
      body.force-reduced-motion .iz-status__indicator {
        animation: none !important;
      }
      /* ---------- Spacing ---------- */
      .space-ruler {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 20px;
      }
      .space-tick {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .space-tick .bar {
        background: var(--green);
        width: 14px;
        border-radius: 3px 3px 0 0;
      }
      .space-tick .val {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }

      .grid-demo {
        margin-top: 40px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 24px;
        background: var(--subtle-bg);
      }
      .grid-demo .row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 8px;
      }
      .grid-demo .col {
        background: rgba(2, 198, 133, 0.14);
        border: 1px dashed rgba(2, 198, 133, 0.4);
        border-radius: 6px;
        height: 28px;
      }

      /* ---------- Surfaces ---------- */
      .surface-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      @media (max-width: 820px) {
        .surface-grid {
          grid-template-columns: 1fr;
        }
      }
      .states-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
        text-align: center;
      }
      @media (max-width: 720px) {
        .states-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .surface-card {
        border-radius: var(--r-lg);
        border: 1px solid var(--border);
        background: var(--canvas);
        padding: 28px;
        box-shadow: var(--shadow-sm);
      }
      .surface-card h4 {
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        color: var(--text-primary);
        margin: 0 0 8px;
      }
      .surface-card p {
        font-size: var(--fs-body-sm);
        color: var(--text-muted);
      }

      /* A specification/comparison list — a hairline-divided row instead
         of a card grid. Prefer this over .surface-card wherever the
         content is a plain list of names + values + a description; a
         card earns its border only when it needs real enclosure. */
      .spec-list {
        border-top: 1px solid var(--border);
      }
      .spec-row {
        display: grid;
        grid-template-columns: minmax(160px, 220px) 1fr;
        gap: 24px;
        padding: 18px 0;
        border-bottom: 1px solid var(--border);
      }
      @media (max-width: 640px) {
        .spec-row {
          grid-template-columns: 1fr;
          gap: 6px;
        }
      }
      .spec-row .name {
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        font-weight: 600;
        color: var(--text-primary);
      }
      .spec-row .desc {
        font-size: var(--fs-body-sm);
        color: var(--text-muted);
      }

      .radius-row,
      .shadow-row {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 20px;
      }
      .radius-chip,
      .shadow-chip {
        width: 120px;
        height: 96px;
        background: var(--canvas);
        border: 1px solid var(--border);
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 10px;
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }
      .r-xs {
        border-radius: var(--r-xs);
      }
      .r-sm {
        border-radius: var(--r-sm);
      }
      .r-md {
        border-radius: var(--r-md);
      }
      .r-lg {
        border-radius: var(--r-lg);
      }
      .r-pill {
        border-radius: var(--r-pill);
      }
      .shadow-chip.sm {
        box-shadow: var(--shadow-sm);
        border-radius: var(--r-md);
      }
      .shadow-chip.md {
        box-shadow: var(--shadow-md);
        border-radius: var(--r-md);
      }
      .shadow-chip.lg {
        box-shadow: var(--shadow-lg);
        border-radius: var(--r-md);
      }

      .subtle-demo {
        margin-top: 20px;
        background: var(--subtle-bg);
        border-radius: var(--r-lg);
        padding: 40px;
      }
      .subtle-demo .inner {
        background: var(--canvas);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 24px;
        max-width: 420px;
      }

      /* ---------- Motion & Interaction ---------- */

      /* Principles — plain, not boxed; a hairline top rule per item is
         enough rhythm without turning five sentences into five cards. */
      .principle-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 40px;
        margin-top: 8px;
      }
      @media (max-width: 720px) {
        .principle-grid {
          grid-template-columns: 1fr;
        }
      }
      .principle-item {
        padding-top: 16px;
        border-top: 1px solid var(--border);
      }
      .principle-item h3 {
        font-size: var(--fs-body-lg);
        margin-bottom: 8px;
      }
      .principle-item p {
        font-size: var(--fs-body-sm);
        color: var(--text-muted);
      }

      /* Shared demo stage — every live example sits on this same quiet
         subtle-background block so the page doesn't turn into a stack of
         bordered white cards. */
      .demo-block {
        margin-top: 56px;
      }
      .demo-block > h3 {
        font-size: var(--fs-body-lg);
        margin-bottom: 6px;
      }
      .demo-block > .demo-desc {
        font-size: var(--fs-body-sm);
        color: var(--text-muted);
        max-width: 68ch;
        margin-bottom: 20px;
      }
      .demo-stage {
        background: var(--subtle-bg);
        border-radius: var(--r-lg);
        padding: 32px;
      }
      .demo-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 28px;
      }
      .demo-row-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .demo-row-item .caption {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }

      /* Timing scale */
      .motion-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      @media (max-width: 980px) {
        .motion-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 520px) {
        .motion-grid {
          grid-template-columns: 1fr;
        }
      }
      .motion-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 20px;
        background: var(--canvas);
      }
      .motion-card .tier {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--green);
        margin-bottom: 6px;
      }
      .motion-card .ms {
        font-family: var(--font-display);
        font-size: 1.3rem;
        color: var(--text-primary);
        margin-bottom: 4px;
      }
      .motion-card .use {
        font-size: var(--fs-caption);
        color: var(--text-muted);
        margin-bottom: 16px;
      }
      .motion-stage {
        margin-top: auto;
        height: 56px;
        border-radius: var(--r-md);
        background: var(--subtle-bg);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 0 14px;
      }
      .motion-puck {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--gradient-brand);
        flex: none;
      }
      .m-instant .motion-puck {
        transition: transform var(--motion-duration-instant) var(--motion-ease-standard);
      }
      .m-fast .motion-puck {
        transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
      }
      .m-standard .motion-puck {
        transition: transform var(--motion-duration-standard) var(--motion-ease-standard);
      }
      .m-deliberate .motion-puck {
        transition: transform var(--motion-duration-deliberate) var(--motion-ease-standard);
      }
      .motion-card:hover .motion-puck,
      .motion-card:focus-within .motion-puck {
        transform: translateX(calc(100% + 90px));
      }
      @media (prefers-reduced-motion: reduce) {
        .motion-puck {
          transition: none !important;
        }
      }
      body.force-reduced-motion .motion-puck {
        transition: none !important;
      }

      /* Easing comparison — one shared trigger moves all four pucks at
         once, each on its own curve, so the shapes are directly
         comparable rather than eyeballed one at a time. */
      .easing-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: 20px;
      }
      @media (max-width: 980px) {
        .easing-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 520px) {
        .easing-grid {
          grid-template-columns: 1fr;
        }
      }
      .easing-card {
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 18px;
        background: var(--canvas);
      }
      .easing-card .name {
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        font-weight: 600;
        color: var(--text-primary);
      }
      .easing-card .curve {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.72rem;
        color: var(--text-muted);
        display: block;
        margin-bottom: 14px;
        word-break: break-all;
      }
      .easing-stage {
        height: 40px;
        border-radius: var(--r-md);
        background: var(--subtle-bg);
        position: relative;
        overflow: hidden;
      }
      .easing-puck {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--ink);
      }
      :root[data-theme="dark"] .easing-puck {
        background: var(--text-primary);
      }
      .ee-standard .easing-puck {
        transition: transform var(--motion-duration-deliberate) var(--motion-ease-standard);
      }
      .ee-enter .easing-puck {
        transition: transform var(--motion-duration-deliberate) var(--motion-ease-enter);
      }
      .ee-exit .easing-puck {
        transition: transform var(--motion-duration-deliberate) var(--motion-ease-exit);
      }
      .ee-emphasized .easing-puck {
        transition: transform var(--motion-duration-deliberate) var(--motion-ease-emphasized);
      }
      .easing-compare.at-end .easing-puck {
        transform: translateX(calc(100% * 3));
      }
      @media (max-width: 980px) {
        .easing-compare.at-end .easing-puck {
          transform: translateX(180%);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .easing-puck {
          transition: none !important;
        }
      }
      body.force-reduced-motion .easing-puck {
        transition: none !important;
      }
      .replay-btn {
        margin-top: 20px;
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        font-weight: 600;
        color: var(--text-primary);
        background: var(--canvas);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        padding: 9px 18px;
        cursor: pointer;
        transition:
          background var(--motion-duration-fast) var(--motion-ease-standard),
          border-color var(--motion-duration-fast) var(--motion-ease-standard);
      }
      .replay-btn:hover {
        background: var(--subtle-bg);
        border-color: var(--border-strong);
      }
      .replay-btn:active {
        transform: scale(0.97);
      }
      .replay-btn:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }
      @media (prefers-reduced-motion: reduce) {
        .replay-btn {
          transition: none;
        }
        .replay-btn:active {
          transform: none;
        }
      }
      body.force-reduced-motion .replay-btn {
        transition: none !important;
      }
      body.force-reduced-motion .replay-btn:active {
        transform: none !important;
      }

      /* Hover — nav link, button, card. Only the card's border tints;
         nothing lifts or gains a shadow just because it can. */
      .demo-nav-link {
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        padding-bottom: 3px;
        border-bottom: 2px solid transparent;
        transition:
          color var(--motion-duration-fast) var(--motion-ease-standard),
          border-color var(--motion-duration-fast) var(--motion-ease-standard);
      }
      .demo-nav-link:hover {
        color: var(--text-primary);
        border-bottom-color: var(--green);
      }
      .demo-nav-link:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 4px;
      }
      .demo-btn {
        position: relative;
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        font-weight: 600;
        color: var(--text-primary);
        background: var(--canvas);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        padding: 11px 20px;
        cursor: pointer;
        transition:
          background var(--motion-duration-fast) var(--motion-ease-standard),
          border-color var(--motion-duration-fast) var(--motion-ease-standard),
          transform var(--motion-duration-instant) var(--motion-ease-standard);
      }
      /* Async/busy action: geometry stays fixed — the label is hidden
         (visibility, not removed/retexted) so it keeps holding the
         button's width, matching the .iz-button[aria-busy] recipe in
         packages/design-system/src/components/button.css. */
      .demo-btn[aria-busy="true"] {
        cursor: default;
      }
      .demo-btn[aria-busy="true"] .label {
        visibility: hidden;
      }
      .demo-btn[aria-busy="true"] .loading-spinner {
        position: absolute;
        inset: 0;
        margin: auto;
      }
      .demo-btn:hover {
        background: var(--subtle-bg);
        border-color: var(--border-strong);
      }
      .demo-btn:active {
        transform: scale(0.97);
      }
      .demo-btn:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }
      .demo-btn.is-primary {
        background: var(--color-action-primary);
        border-color: var(--color-action-primary);
        color: var(--color-on-action-primary);
      }
      .demo-btn.is-primary:hover {
        background: var(--color-action-primary-hover);
        border-color: var(--color-action-primary-hover);
      }
      @media (prefers-reduced-motion: reduce) {
        .demo-nav-link,
        .demo-btn {
          transition: none;
        }
        .demo-btn:active {
          transform: none;
        }
      }
      body.force-reduced-motion .demo-nav-link,
      body.force-reduced-motion .demo-btn {
        transition: none !important;
      }
      body.force-reduced-motion .demo-btn:active {
        transform: none !important;
      }

      .demo-card {
        box-sizing: border-box;
        width: 200px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--canvas);
        padding: 18px;
        cursor: default;
        transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
        /* reset when rendered as a <button> for the interactive variant */
        font: inherit;
        text-align: left;
        display: block;
      }
      .demo-card.is-interactive {
        cursor: pointer;
      }
      .demo-card h4 {
        font-size: var(--fs-body-sm);
        color: var(--text-primary);
        margin-bottom: 4px;
      }
      .demo-card p {
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }
      .demo-card.is-interactive:hover,
      .demo-card.is-interactive:focus-visible {
        border-color: var(--green);
      }
      .demo-card.is-interactive:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }
      .demo-card.is-interactive:active {
        transform: scale(0.99);
      }
      @media (prefers-reduced-motion: reduce) {
        .demo-card {
          transition: none;
        }
        .demo-card.is-interactive:active {
          transform: none;
        }
      }
      body.force-reduced-motion .demo-card {
        transition: none !important;
      }
      body.force-reduced-motion .demo-card.is-interactive:active {
        transform: none !important;
      }

      /* Focus — the outline is the whole demonstration; nothing else
         about the element should change to draw the eye. */
      .demo-focusable {
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        color: var(--text-primary);
        background: var(--canvas);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        padding: 10px 18px;
        cursor: pointer;
      }
      .demo-focusable:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }

      /* Selection — a segmented control with a sliding indicator layer,
         not per-button background swaps, so the eye tracks one moving
         shape instead of two things changing color independently. */
      .segmented {
        position: relative;
        display: inline-flex;
        padding: 3px;
        background: var(--canvas);
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
        gap: 2px;
      }
      .segmented-indicator {
        position: absolute;
        top: 3px;
        left: 3px;
        height: calc(100% - 6px);
        width: var(--seg-w, 33.33%);
        background: var(--ink);
        border-radius: var(--r-pill);
        transition: transform var(--motion-duration-standard) var(--motion-ease-standard);
        z-index: 0;
      }
      .segmented button {
        position: relative;
        z-index: 1;
        border: none;
        background: none;
        cursor: pointer;
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        font-weight: 600;
        color: var(--text-muted);
        padding: 9px 20px;
        border-radius: var(--r-pill);
        transition: color var(--motion-duration-standard) var(--motion-ease-standard);
      }
      .segmented button[aria-pressed="true"] {
        color: #fff;
      }
      .segmented button:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }
      @media (prefers-reduced-motion: reduce) {
        .segmented-indicator,
        .segmented button {
          transition: none;
        }
      }
      body.force-reduced-motion .segmented-indicator,
      body.force-reduced-motion .segmented button {
        transition: none !important;
      }

      /* Enter / exit — a popover. Entry settles in with --motion-ease-enter
         over the standard duration; exit is quicker and uses
         --motion-ease-exit, so dismissal reads as faster than arrival. */
      .popover-demo {
        position: relative;
        display: inline-block;
      }
      .popover-panel {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        min-width: 220px;
        background: var(--canvas);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-md);
        padding: 16px;
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
        transform-origin: top left;
        pointer-events: none;
        transition:
          opacity var(--motion-duration-fast) var(--motion-ease-exit),
          transform var(--motion-duration-fast) var(--motion-ease-exit);
        z-index: 5;
      }
      .popover-panel.is-open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition:
          opacity var(--motion-duration-standard) var(--motion-ease-enter),
          transform var(--motion-duration-standard) var(--motion-ease-enter);
      }
      .popover-panel p {
        font-size: var(--fs-body-sm);
        color: var(--text-muted);
      }
      @media (prefers-reduced-motion: reduce) {
        .popover-panel,
        .popover-panel.is-open {
          transition: opacity var(--motion-duration-fast) linear;
          transform: none;
        }
      }
      body.force-reduced-motion .popover-panel,
      body.force-reduced-motion .popover-panel.is-open {
        transition: opacity var(--motion-duration-fast) linear !important;
        transform: none !important;
      }

      /* Drawer — the largest spatial movement on this page: deliberate
         duration, emphasized easing, a dimming backdrop. Bounded to a
         demo stage rather than the viewport. */
      .drawer-demo-stage {
        position: relative;
        height: 260px;
        border-radius: var(--r-lg);
        background: var(--canvas);
        border: 1px solid var(--border);
        overflow: hidden;
      }
      .drawer-demo-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(3, 10, 13, 0.4);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity var(--motion-duration-deliberate) var(--motion-ease-emphasized),
          visibility var(--motion-duration-deliberate) var(--motion-ease-emphasized);
      }
      .drawer-demo-backdrop.is-open {
        opacity: 1;
        visibility: visible;
      }
      .drawer-demo-panel {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(70%, 260px);
        background: var(--color-surface);
        border-left: 1px solid var(--border);
        padding: 20px;
        transform: translateX(100%);
        transition: transform var(--motion-duration-deliberate) var(--motion-ease-emphasized);
      }
      .drawer-demo-panel.is-open {
        transform: translateX(0);
      }
      .drawer-demo-panel h4 {
        font-size: var(--fs-body-sm);
        margin-bottom: 8px;
      }
      .drawer-demo-panel p {
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }
      @media (prefers-reduced-motion: reduce) {
        .drawer-demo-backdrop {
          transition: opacity var(--motion-duration-fast) linear, visibility var(--motion-duration-fast) linear;
        }
        .drawer-demo-panel {
          transition: opacity var(--motion-duration-fast) linear;
          transform: none;
          opacity: 0;
          pointer-events: none;
        }
        .drawer-demo-panel.is-open {
          opacity: 1;
          pointer-events: auto;
        }
      }
      body.force-reduced-motion .drawer-demo-backdrop {
        transition: opacity var(--motion-duration-fast) linear, visibility var(--motion-duration-fast) linear !important;
      }
      body.force-reduced-motion .drawer-demo-panel {
        transition: opacity var(--motion-duration-fast) linear !important;
        transform: none !important;
        opacity: 0;
        pointer-events: none;
      }
      body.force-reduced-motion .drawer-demo-panel.is-open {
        opacity: 1 !important;
        pointer-events: auto !important;
      }

      /* Status / state change — the label and dot cross-fade; nothing
         bounces, scales up, or throws confetti to mark completion. */
      .status-demo-badge {
        transition: background var(--motion-duration-standard) var(--motion-ease-standard),
          color var(--motion-duration-standard) var(--motion-ease-standard);
      }
      .status-demo-badge .label {
        display: inline-block;
      }
      @media (prefers-reduced-motion: reduce) {
        .status-demo-badge {
          transition: none;
        }
      }
      body.force-reduced-motion .status-demo-badge {
        transition: none !important;
      }

      /* Loading — a button spinner for a committed action; a skeleton
         surface (not a spinner) for content that's still arriving. */
      .loading-spinner {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid currentColor;
        border-top-color: transparent;
        opacity: 0.7;
        animation: irozon-spin 700ms linear infinite;
      }
      @keyframes irozon-spin {
        to {
          transform: rotate(360deg);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .loading-spinner {
          animation-duration: 1400ms;
        }
      }

      /* Icon state change — Copy → Check. Fixed square cell, both icons
         stacked in the same position; only opacity + a very small scale
         crossfade, no rotation/bounce. The recipe from the irozon.se
         Contact page, promoted here as the canonical pattern. */
      .icon-swap-cell {
        position: relative;
        display: inline-flex;
        width: 16px;
        height: 16px;
      }
      .icon-swap-cell svg {
        position: absolute;
        inset: 0;
        width: 16px;
        height: 16px;
        transition:
          opacity var(--motion-duration-instant) var(--motion-ease-standard),
          transform var(--motion-duration-instant) var(--motion-ease-standard);
      }
      .icon-swap-cell .icon-check {
        opacity: 0;
        transform: scale(0.9);
      }
      .icon-swap-btn.is-copied .icon-swap-cell .icon-copy {
        opacity: 0;
        transform: scale(0.9);
      }
      .icon-swap-btn.is-copied .icon-swap-cell .icon-check {
        opacity: 1;
        transform: scale(1);
      }
      @media (prefers-reduced-motion: reduce) {
        .icon-swap-cell svg {
          transition: none;
        }
      }
      body.force-reduced-motion .icon-swap-cell svg {
        transition: none !important;
      }

      /* Visually hidden but present for assistive tech — used for the
         aria-live announcement that accompanies the Copy → Check swap. */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .skeleton-card {
        width: 100%;
        max-width: 260px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 16px;
        background: var(--canvas);
      }
      .skeleton-line {
        height: 10px;
        border-radius: var(--r-sm);
        background: var(--subtle-bg);
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
      }
      .skeleton-line::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent,
          var(--border-strong),
          transparent
        );
        transform: translateX(-100%);
        animation: irozon-shimmer 1600ms ease-in-out infinite;
      }
      .skeleton-line.w-60 {
        width: 60%;
      }
      .skeleton-line.w-80 {
        width: 80%;
      }
      .skeleton-line.w-40 {
        width: 40%;
        margin-bottom: 0;
      }
      @keyframes irozon-shimmer {
        to {
          transform: translateX(100%);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .skeleton-line::after {
          animation: none;
          opacity: 0.5;
        }
      }
      body.force-reduced-motion .skeleton-line::after {
        animation: none !important;
        opacity: 0.5;
      }
      .skeleton-swap {
        display: grid;
      }
      .skeleton-swap > * {
        grid-area: 1 / 1;
      }
      .skeleton-swap .real {
        opacity: 0;
        transition: opacity var(--motion-duration-standard) var(--motion-ease-enter);
      }
      .skeleton-swap.is-loaded .real {
        opacity: 1;
      }
      .skeleton-swap.is-loaded .skeleton-card {
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--motion-duration-fast) var(--motion-ease-exit);
      }
      @media (prefers-reduced-motion: reduce) {
        .skeleton-swap .real,
        .skeleton-swap.is-loaded .skeleton-card {
          transition: opacity var(--motion-duration-fast) linear;
        }
      }
      body.force-reduced-motion .skeleton-swap .real,
      body.force-reduced-motion .skeleton-swap.is-loaded .skeleton-card {
        transition: opacity var(--motion-duration-fast) linear !important;
      }

      .motion-toggle {
        margin-top: 32px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--subtle-bg);
        width: fit-content;
      }
      .motion-toggle label {
        font-family: var(--font-label);
        font-size: var(--fs-body-sm);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
      }

      /* ---------- Imagery ---------- */
      .imagery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 36px;
      }
      @media (max-width: 900px) {
        .imagery-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .imagery-tile {
        border-radius: var(--r-md);
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--subtle-bg);
      }
      .imagery-tile .frame {
        aspect-ratio: 4/3;
        overflow: hidden;
      }
      .imagery-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .imagery-tile .cap {
        padding: 10px 14px;
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }

      .principle-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 32px;
      }
      @media (max-width: 640px) {
        .principle-list {
          grid-template-columns: 1fr;
        }
      }
      .principle-list li {
        font-size: var(--fs-body-sm);
        color: var(--text-body);
      }

      /* ---------- Iconography ---------- */
      .icon-stage {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      @media (max-width: 720px) {
        .icon-stage {
          grid-template-columns: 1fr;
        }
      }
      .icon-tile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 24px;
        background: var(--canvas);
      }
      .icon-demo {
        width: 24px;
        height: 24px;
        color: var(--ink);
      }
      .icon-tile-label {
        font-family: var(--font-label);
        font-weight: 600;
        font-size: var(--fs-body-sm);
        color: var(--text-primary);
      }
      .icon-tile-use {
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }

      /* ---------- Icons foundation ---------- */
      .icon-reference-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 20px;
        border: 1px solid rgba(2, 198, 133, 0.28);
        border-radius: var(--r-md);
        background: rgba(2, 198, 133, 0.06);
      }
      .icon-reference-banner strong {
        color: var(--text-primary);
      }
      .icon-reference-banner p {
        margin: 4px 0 0;
        font-size: var(--fs-body-sm);
        color: var(--text-muted);
      }
      .icon-reference-banner code {
        white-space: nowrap;
      }
      @media (max-width: 560px) {
        .icon-reference-banner {
          align-items: flex-start;
          flex-direction: column;
          gap: 12px;
        }
      }
      .icon-gallery {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        background: var(--border);
      }
      .icon-gallery-item {
        display: flex;
        min-width: 0;
        min-height: 128px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 20px;
        background: var(--canvas);
        color: var(--text-primary);
      }
      .icon-gallery-item svg {
        width: 24px;
        height: 24px;
        flex: none;
      }
      .icon-gallery-item span {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }
      @media (max-width: 720px) {
        .icon-gallery {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @media (max-width: 480px) {
        .icon-gallery {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      .icon-example-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }
      @media (max-width: 760px) {
        .icon-example-grid {
          grid-template-columns: 1fr;
        }
      }
      .icon-example {
        min-width: 0;
      }
      .icon-example h3 {
        margin-bottom: 10px;
      }
      .icon-example > p {
        margin-bottom: 16px;
        font-size: var(--fs-body-sm);
        color: var(--text-muted);
      }
      .icon-example-preview {
        display: flex;
        align-items: center;
        min-height: 84px;
        gap: 10px;
        margin-bottom: 12px;
        padding: 20px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--subtle-bg);
      }
      .icon-example-preview svg,
      .icon-nav-preview svg {
        flex: none;
      }
      .icon-nav-preview {
        display: block;
        width: min(100%, 240px);
      }
      .icon-code {
        min-width: 0;
        overflow-x: auto;
      }
      .icon-code code {
        display: block;
        min-width: max-content;
      }

      /* ---------- Accessibility ---------- */
      .contrast-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 8px;
      }
      .contrast-table th,
      .contrast-table td {
        text-align: left;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        font-size: var(--fs-body-sm);
      }
      .contrast-table th {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
      }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: var(--r-pill);
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        font-weight: 600;
      }
      .pill.pass {
        background: rgba(2, 198, 133, 0.12);
        color: #037a52;
      }
      .pill.limited {
        background: rgba(255, 107, 74, 0.12);
        color: #c24a2f;
      }
      /* ---------- Status badges ---------- */
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: var(--r-pill);
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        font-weight: 600;
      }
      .badge .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        display: inline-block;
        flex: none;
      }
      .badge-success {
        background: color-mix(in srgb, var(--color-success) 16%, transparent);
        color: var(--color-success);
      }
      .badge-warning {
        background: color-mix(in srgb, var(--color-warning) 18%, transparent);
        color: var(--color-warning);
      }
      .badge-error {
        background: color-mix(in srgb, var(--color-error) 16%, transparent);
        color: var(--color-error);
      }
      .badge-info {
        background: var(--subtle-bg);
        color: var(--text-muted);
        border: 1px solid var(--border);
      }

      .a11y-swatch {
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 4px;
        margin-right: 8px;
        vertical-align: -2px;
        border: 1px solid rgba(0, 0, 0, 0.08);
      }

      /* ---------- Do / Don't ---------- */
      .dodont-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
      @media (max-width: 720px) {
        .dodont-grid {
          grid-template-columns: 1fr;
        }
      }
      .dodont-card {
        border-radius: var(--r-lg);
        padding: 28px;
        border: 1px solid var(--border);
      }
      .dodont-card.do {
        background: rgba(2, 198, 133, 0.05);
        border-color: rgba(2, 198, 133, 0.25);
      }
      .dodont-card.dont {
        background: rgba(255, 107, 74, 0.05);
        border-color: rgba(255, 107, 74, 0.25);
      }
      .dodont-tag {
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 700;
        margin-bottom: 14px;
        display: block;
      }
      .dodont-card.do .dodont-tag {
        color: #037a52;
      }
      .dodont-card.dont .dodont-tag {
        color: #c24a2f;
      }
      .dodont-card .demo {
        border-radius: var(--r-md);
        padding: 20px;
        margin-bottom: 14px;
      }
      .dodont-card p {
        font-size: var(--fs-body-sm);
      }

      /* ---------- Checklist ---------- */
      .checklist {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .checklist li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 4px;
        border-top: 1px solid var(--border);
        font-size: var(--fs-body-sm);
        color: var(--text-body);
      }
      .checklist li:first-child {
        border-top: none;
      }
      .checklist .box {
        flex: none;
        width: 18px;
        height: 18px;
        margin-top: 2px;
        border-radius: 5px;
        border: 2px solid var(--border);
      }

      /* ---------- Principles (closing) ---------- */
      .principles-closing {
        background: var(--ink);
        border-radius: var(--r-lg);
        padding: 64px 48px;
      }
      @media (max-width: 640px) {
        .principles-closing {
          padding: 40px 24px;
        }
      }
      .principles-closing .eyebrow {
        color: var(--lime);
      }
      .principles-closing .eyebrow::before {
        background: var(--lime);
      }
      .principles-closing blockquote {
        font-family: var(--font-display);
        color: #fff;
        font-size: var(--fs-display-l);
        line-height: 1.15;
        letter-spacing: -0.02em;
        margin: 0 0 28px;
        max-width: 18ch;
      }
      .principles-closing blockquote:last-of-type {
        margin-bottom: 0;
      }
      .principles-closing blockquote span {
        color: var(--green);
      }

      footer.doc-footer {
        padding: 48px 0 80px;
        text-align: center;
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--text-muted);
      }
      .back-to-top {
        display: inline-block;
        margin-bottom: 16px;
        font-family: var(--font-label);
        font-size: var(--fs-caption);
        color: var(--ink);
        text-decoration: none;
        padding: 6px 14px;
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
        transition: background var(--dur-instant) var(--ease-standard);
      }
      .back-to-top:hover {
        background: var(--subtle-bg);
      }
      .back-to-top:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
      }