/* Desert Ant Labs — Webfonts
 *
 * Three families, loaded from the Google Fonts CDN (all open-licensed):
 *   - Instrument Serif  → editorial display ("the manifesto voice")
 *   - Hanken Grotesk    → UI + body (warm neutral grotesque)
 *   - JetBrains Mono    → technical / "coordinate" labels, data, code
 *
 * NOTE: These are CDN-hosted rather than bundled binaries. They are the
 * intended brand faces (not substitutes). If you need self-hosted woff2
 * files for offline/production, drop them in assets/fonts/ and replace the
 * @import below with local @font-face rules.
 */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Desert Ant Labs — Color
 * -------------------------------------------------------------------------
 * Built on the Saharan silver ant (Cataglyphis bombycina): a mirror-silver
 * insect that forages at lethal midday heat and navigates by the POLARIZED
 * pattern of blue skylight. So the system is cool chrome — silver / pewter /
 * obsidian neutrals — with a single chromatic accent: polarized-sky cobalt.
 * Deliberately cool. No warm terracotta, no brass-gold.
 * ------------------------------------------------------------------------- */

:root {
  /* ---- Base ramp · cool silver / pewter → obsidian ------------------- */
  --sand-50:  #F4F5F5;
  --sand-100: #E8EAEB;
  --sand-200: #D7DBDC;
  --sand-300: #BEC4C6;
  --sand-400: #9DA4A8;
  --sand-500: #7A8286;
  --sand-600: #5A6266;
  --sand-700: #41484C;
  --sand-800: #2C3134;
  --sand-900: #1A1E20;
  --sand-950: #0E1113;

  /* ---- Primary · polarized-sky COBALT (navigation by skylight) ------- */
  --sky-50:  #ECF0FC;
  --sky-100: #D6DFFA;
  --sky-200: #AFC1F3;
  --sky-300: #839DEB;
  --sky-400: #5675DC;
  --sky-500: #2D52C8;
  --sky-600: #2241A8;
  --sky-700: #1C3585;
  --sky-800: #182A63;
  --sky-900: #131F45;

  /* ---- Secondary · SILVER-STEEL (the ant's reflective coat) ---------- */
  --steel-50:  #EEF1F2;
  --steel-100: #DCE2E4;
  --steel-200: #BDC9CD;
  --steel-300: #97A8AD;
  --steel-400: #71868C;
  --steel-500: #566D73;
  --steel-600: #42565B;
  --steel-700: #324246;
  --steel-800: #232F32;
  --steel-900: #161E20;

  /* ---- Signals · cool, distinct from the cobalt accent --------------- */
  --moss-500:   #3C8A52;   /* success (cool green) */
  --moss-50:    #E5F1E8;
  --amber-500:  #C2691A;   /* warning (warm orange — the one warm note) */
  --amber-50:   #FAEBD8;
  --oxide-500:  #BE3A2E;   /* danger  */
  --oxide-50:   #FAE6E3;
  --teal-500:   #1E8C8C;   /* info (heat-shimmer teal) */
  --teal-50:    #DEF1F1;

  /* ---- Pure ----------------------------------------------------------- */
  --paper:  #FBFCFC;       /* cool white card surface */
  --black:  #090B0C;
  --white:  #FFFFFF;

  /* =====================================================================
   * Semantic aliases · LIGHT (default)
   * ===================================================================== */
  --bg-canvas:    var(--sand-50);
  --bg-surface:   var(--paper);
  --bg-raised:    var(--white);
  --bg-sunken:    var(--sand-100);
  --bg-inset:     var(--sand-200);
  --bg-inverse:   var(--sand-950);
  --bg-accent:    var(--sky-500);
  --bg-accent-soft: var(--sky-50);

  --text-primary:   var(--sand-950);
  --text-secondary: var(--sand-700);
  --text-muted:     var(--sand-500);
  --text-faint:     var(--sand-400);
  --text-inverse:   var(--sand-50);
  --text-accent:    var(--sky-600);
  --text-on-accent: var(--white);

  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--sand-400);
  --border-inverse: var(--sand-800);
  --border-accent:  var(--sky-500);

  --accent:         var(--sky-500);
  --accent-hover:   var(--sky-600);
  --accent-press:   var(--sky-700);
  --accent-contrast: var(--white);

  --focus-ring:     var(--sky-500);
  --selection-bg:   var(--sky-200);
  --selection-fg:   var(--sand-950);

  --success: var(--moss-500);
  --warning: var(--amber-500);
  --danger:  var(--oxide-500);
  --info:    var(--teal-500);
}

/* =======================================================================
 * Semantic aliases · DARK  (apply via <html data-theme="dark"> or .dark)
 * Cool obsidian, silver text, the cobalt accent lifted for contrast.
 * ===================================================================== */
[data-theme="dark"],
.dark {
  --bg-canvas:    #0E1113;
  --bg-surface:   #15181B;
  --bg-raised:    #1C2023;
  --bg-sunken:    #090B0C;
  --bg-inset:     #242A2D;
  --bg-inverse:   var(--sand-50);
  --bg-accent:    var(--sky-400);
  --bg-accent-soft: #15203A;

  --text-primary:   var(--sand-50);
  --text-secondary: var(--sand-300);
  --text-muted:     var(--sand-500);
  --text-faint:     var(--sand-600);
  --text-inverse:   var(--sand-950);
  --text-accent:    var(--sky-300);
  --text-on-accent: var(--white);

  --border-subtle:  #262C30;
  --border-default: #353C40;
  --border-strong:  #49514F;
  --border-inverse: var(--sand-200);
  --border-accent:  var(--sky-400);

  --accent:         var(--sky-400);
  --accent-hover:   var(--sky-300);
  --accent-press:   var(--sky-200);
  --accent-contrast: var(--sand-950);

  --focus-ring:     var(--sky-300);
  --selection-bg:   var(--sky-700);
  --selection-fg:   var(--sand-50);

  --success: #5EA873;
  --warning: #D88B3A;
  --danger:  #D55546;
  --info:    #3FA8A8;
}

/* Desert Ant Labs — Typography
 * -------------------------------------------------------------------------
 * Display  → Instrument Serif   editorial, intellectual, the manifesto voice
 * Sans     → Hanken Grotesk     warm neutral grotesque, UI + body workhorse
 * Mono     → JetBrains Mono     technical "coordinate" labels, data, code
 * ------------------------------------------------------------------------- */

:root {
  /* ---- Families ------------------------------------------------------- */
  --font-display: "Instrument Serif", "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Liberation Mono", Menlo, monospace;

  /* ---- Weights (Hanken Grotesk) --------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---- Type scale ·  rem (16px root) ---------------------------------- */
  --text-2xs:  0.6875rem;  /* 11px — mono micro-labels */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px — UI default */
  --text-md:   1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  4rem;       /* 64px */
  --text-6xl:  5.5rem;     /* 88px  — display */
  --text-7xl:  7.5rem;     /* 120px — hero display */

  /* ---- Line height ---------------------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.06;   /* display headlines */
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.62;   /* long-form body */

  /* ---- Tracking ------------------------------------------------------- */
  --tracking-tighter: -0.03em;  /* big serif display */
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;    /* mono uppercase eyebrows */
  --tracking-widest:  0.18em;

  /* ---- Reusable role shorthands --------------------------------------- */
  --type-display: var(--weight-regular) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-eyebrow: var(--weight-500) var(--text-2xs)/1 var(--font-mono);
}

/* Desert Ant Labs — Spacing & Sizing
 * 4px base grid. Named on a t-shirt scale; raw --space-N also available.
 */

:root {
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-7:  1.75rem;   /* 28 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-14: 3.5rem;    /* 56 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */
  --space-40: 10rem;     /* 160 */
  --space-48: 12rem;     /* 192 */

  /* ---- Layout ---------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  820px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1480px;
  --gutter:        clamp(1.25rem, 5vw, 4rem); /* @kind spacing */

  /* ---- Control heights (buttons / inputs) ----------------------------- */
  --control-sm: 2rem;     /* 32 */
  --control-md: 2.5rem;   /* 40 */
  --control-lg: 3rem;     /* 48 */
}

/* Desert Ant Labs — Radius, Borders, Shadow, Blur
 * -------------------------------------------------------------------------
 * The brand reads as precise and built: crisp, small radii and hairline
 * borders carry most of the structure. Shadows are warm-tinted and soft,
 * used sparingly — paper lifting off a table, never a floating glow.
 * ------------------------------------------------------------------------- */

:root {
  /* ---- Radius --------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;    /* default control radius */
  --radius-lg:   8px;    /* default card radius */
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ---- Border widths -------------------------------------------------- */
  --border-hair: 1px;
  --border-thin: 1.5px;
  --border-thick: 2px;

  /* ---- Shadow · warm ink, low + soft ---------------------------------- */
  --shadow-xs:  0 1px 2px rgba(40, 30, 15, 0.06);
  --shadow-sm:  0 1px 2px rgba(40, 30, 15, 0.06), 0 2px 4px rgba(40, 30, 15, 0.05);
  --shadow-md:  0 2px 4px rgba(40, 30, 15, 0.05), 0 6px 14px -3px rgba(40, 30, 15, 0.10);
  --shadow-lg:  0 8px 24px -6px rgba(40, 30, 15, 0.14), 0 2px 6px -2px rgba(40, 30, 15, 0.08);
  --shadow-xl:  0 24px 56px -16px rgba(40, 30, 15, 0.22), 0 4px 12px -4px rgba(40, 30, 15, 0.10);

  /* inner well — for inputs / sunken surfaces */
  --shadow-inset: inset 0 1px 2px rgba(40, 30, 15, 0.07);

  /* focus ring — layered: bone gap + cobalt halo */
  --ring-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus-ring);
  --ring-accent: 0 0 0 3px rgba(45, 82, 200, 0.22);

  /* ---- Blur (frosted overlays, sticky nav) ---------------------------- */
  --blur-sm: 6px;
  --blur-md: 14px;
  --blur-lg: 28px;
}

/* Desert Ant Labs — Motion
 * -------------------------------------------------------------------------
 * Movement is purposeful and quick, like an ant correcting course: short
 * durations, decisive easing, no bounce or overshoot. Fades and small
 * translations (4–12px). Decorative loops are avoided.
 * ------------------------------------------------------------------------- */

:root {
  /* ---- Duration ---------------------------------------- @kind other --- */
  --duration-instant: 80ms;  /* @kind other */
  --duration-fast:    140ms; /* @kind other */
  --duration-base:    220ms; /* @kind other */
  --duration-slow:    340ms; /* @kind other */
  --duration-slower:  520ms; /* @kind other */

  /* ---- Easing ------------------------------------------ @kind other --- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in:       cubic-bezier(0.5, 0, 0.9, 0.2); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-linear:   linear;                         /* @kind other */

  /* ---- Composed shorthands ------------------------------------------- */
  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-all: all var(--duration-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; /* @kind other */
    --duration-fast:    0ms; /* @kind other */
    --duration-base:    0ms; /* @kind other */
    --duration-slow:    0ms; /* @kind other */
    --duration-slower:  0ms; /* @kind other */
  }
}

/* Desert Ant Labs — Base / element defaults
 * A light reset that wires the tokens onto bare HTML so specimens, cards,
 * and UI kits share a consistent foundation. Not a heavy framework reset.
 */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Display headings default to the serif voice */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

p { text-wrap: pretty; }

a {
  color: var(--text-accent);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: var(--transition-colors);
}
a:hover { text-decoration: underline; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

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

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}


/* Desert Ant Labs typography roles.
 *
 * Opinionated CSS classes for the recurring editorial roles in the brand:
 * eyebrow coordinate label, big serif display headlines with italic cobalt
 * accents, and the lead body paragraph that sits below them.
 *
 * Consumers can override per context (e.g. tighter hero gap, narrower
 * lead) by re-declaring on a more specific selector.
 */

/* Eyebrow: mono coordinate label with a cobalt marker dot.
 * Default 24 px gap before the headline that follows. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
}
.eyebrow::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--accent);
  flex: 0 0 auto;
}

/* Display headlines: Instrument Serif at regular weight. The serif's
 * natural density does the visual weight; bold is unnecessary. Accents
 * are italic + cobalt, mirroring the Hero kit. */
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(3rem, 9vw, var(--text-7xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.display-md {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2.25rem, 6vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.display-sm {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.75rem, 3.5vw, var(--text-3xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}
.display .accent,
.display-md .accent,
.display-sm .accent {
  font-style: italic;
  color: var(--text-accent);
}
.display .dot,
.display-md .dot,
.display-sm .dot {
  color: var(--text-accent);
  font-style: normal;
}

/* Lead paragraph: sans, larger body, set below a display headline.
 * Default 28 px gap above and 52ch max measure per the website hero. */
.lead {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.6vw, var(--text-xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text-secondary);
  max-width: 52ch;
  margin: var(--space-7) 0 0;
}
.lead .accent {
  color: var(--text-accent);
  font-weight: var(--weight-semibold);
}

/* Two-column editorial grid. Stacks under 760 px. */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
}
@media (min-width: 760px) {
  .cols-2 { grid-template-columns: 1fr 1fr; }
}

/* Desert Ant Labs swarm loader.
 *
 * A circular swarm of obsidian dots converging on a cobalt core. The
 * brand's "ants navigating by skylight" motif, animated. Use anywhere
 * work is happening: model load, inference, network fetch.
 *
 * Markup:
 *   <span class="swarm" id="…" aria-hidden="true">
 *     <svg viewBox="0 0 24 24"></svg>
 *   </span>
 *
 * Call `paintSwarm(svg)` from swarm.js once on init to inject the
 * dots, then toggle the `.visible` class via `setSwarm(el, on)` to
 * show/hide.
 *
 * Default size is 16 px (inline-with-text). Add `.swarm-lg` for the
 * 36 px stage variant. */

.swarm {
  display: none;
  align-items: center;
  justify-content: center;
}
.swarm.visible { display: inline-flex; }
.swarm svg {
  display: block;
  overflow: visible;
  width: 16px;
  height: 16px;
}
.swarm-lg svg { width: 36px; height: 36px; }

.swarm .dot {
  fill: var(--text-primary);
  transform-box: fill-box;
  transform-origin: center;
}
.swarm .core {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: swarm-core 1.6s ease-in-out infinite;
}

@keyframes swarm-core {
  0%, 100% { transform: scale(.82); opacity: .5; }
  50%      { transform: scale(1.16); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .swarm .dot,
  .swarm .core {
    animation: none !important;
    opacity: .7 !important;
    transform: none !important;
  }
}

/* Desert Ant Labs stage primitive.
 *
 * A single drop-zone container that holds the current state of an
 * interactive demo: loading the model, prompting the visitor to drop
 * a file, working on a file, or showing results.
 *
 * Markup:
 *   <label class="stage" id="stage">
 *     <input type="file" hidden />
 *     <div class="stage-inner">
 *       <span class="swarm swarm-lg" aria-hidden="true">
 *         <svg viewBox="0 0 24 24"></svg>
 *       </span>
 *       <span class="stage-lead">Loading model…</span>
 *       <span class="stage-hint">Audio is analyzed locally.</span>
 *     </div>
 *   </label>
 *
 * Toggle `.busy` while work is happening (disables the hover affordance);
 * toggle `.compact` once results are present (collapses to a single-line
 * "drop another" strip). */

.stage {
  position: relative;
  display: block;
  border: var(--border-hair) dashed var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              padding var(--duration-fast) var(--ease-standard);
}
.stage:not(.compact) { padding: var(--space-10) var(--space-6); }
.stage.compact { padding: var(--space-3) var(--space-4); border-style: solid; }
.stage:hover:not(.busy) { border-color: var(--accent); background: var(--bg-raised); }
.stage.drag { border-color: var(--accent); background: var(--bg-raised); }
.stage.busy { cursor: default; }
.stage input[type=file] { display: none; }

.stage-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  flex-wrap: wrap;
}
.stage:not(.compact) .stage-inner {
  flex-direction: column;
  gap: var(--space-2);
}

.stage-lead {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.stage-hint {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.stage.compact .stage-lead { font-size: 0.9rem; font-weight: var(--weight-medium); }
.stage.compact .stage-hint { display: none; }

.stage.err .stage-lead { color: var(--danger); }

/* Desert Ant Labs shared demo visual system.
 *
 * Reusable across product demo pages (uhm-demo, clear-demo, future).
 * Loads lib/ds/styles.css for the brand tokens, then layers demo-specific
 * primitives on top. Classes (not utilities), so a page composes them in
 * markup without a build step.
 */

:root {
  /* Tunable demo-layer aliases on top of the design-system tokens. */
  --pad-page: clamp(1.25rem, 4vw, 4.5rem);
  --gap-card: clamp(3rem, 7vw, 7rem);

  /* Demo display sizes. Large; the brand voice carries. */
  --size-eyebrow: var(--text-2xs);
  --size-meta:    var(--text-2xs);
  --size-body:    var(--text-md);
  --size-lead:    var(--text-xl);
  --size-h3:      var(--text-3xl);
  --size-h2:      var(--text-5xl);
  --size-h1:      var(--text-7xl);
  --size-stat:    var(--text-5xl);

  color-scheme: light;
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─────────── Layout primitives ─────────── */

.page {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--pad-page);
}

.card {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: var(--border-hair) solid var(--border-subtle);
}
.card:last-of-type { border-bottom: 0; }

/* Optional right-aligned variant for eyebrow secondary content. */
.eyebrow .right { margin-left: auto; color: var(--text-muted); }

/* Stat block: big serif number, mono caption. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  border-top: var(--border-hair) solid var(--border-subtle);
  padding-top: 1.5rem;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stat .num {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.stat .num.accent { color: var(--text-accent); font-style: italic; }
.stat .label {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Meta row: small mono labels. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Bar comparator: two stacked rows with rounded bars. */
.bar-compare {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) 1fr auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  margin: 1rem 0;
}
.bar-compare .lbl {
  display: flex; flex-direction: column;
}
.bar-compare .lbl .who { font-weight: var(--weight-semibold); font-size: 1.05rem; }
.bar-compare .lbl .where {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.bar-compare .track {
  height: 14px; border-radius: var(--radius-full); background: var(--bg-sunken);
  overflow: hidden; position: relative;
}
.bar-compare .fill {
  height: 100%; border-radius: var(--radius-full);
  background: var(--text-primary);
}
.bar-compare .fill.accent { background: var(--accent); }
.bar-compare .val {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold); font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}
.bar-compare .val.accent { color: var(--text-accent); }

/* Pill button: file picker, model toggle, etc. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-full);
  border: var(--border-hair) solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-colors);
}
.pill:hover { background: var(--bg-sunken); }
.pill.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.pill.ghost { color: var(--text-muted); }
.pill:disabled { opacity: 0.4; cursor: not-allowed; }

/* Compact app links: shown in the CTA. */
.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.app-link {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-5);
  border: var(--border-hair) solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-colors);
}
.app-link:hover {
  border-color: var(--accent);
  background: var(--bg-raised);
  text-decoration: none;
}
.app-link .name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.app-link .platforms {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Footer: brand and page count. */
.brand-footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: var(--border-hair) solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Credits: sits above the brand footer. */
.credits {
  padding: 1rem 0 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  line-height: 1.7;
}
.credits .credits-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-right: 0.6rem;
  color: var(--text-muted);
}
.credits a {
  color: var(--text-secondary);
  border-bottom: var(--border-hair) solid var(--border-subtle);
}
.credits a:hover {
  color: var(--text-accent);
  border-bottom-color: var(--text-accent);
  text-decoration: none;
}

/* Inline link inside flowing prose. */
.inline-link {
  color: inherit;
  border-bottom: var(--border-hair) solid currentColor;
  text-decoration: none;
}
.inline-link:hover {
  color: var(--text-accent);
  border-bottom-color: var(--text-accent);
  text-decoration: none;
}


/* Page-specific styles for the toxic demo.
 * Built on top of theme.css (which loads lib/ds/styles.css), mirroring the
 * clear-demo / schemer-demo visual system: intro + try-it panel in one
 * card, mono row labels, chip samples, 2px progress, swarm loader. */

.intro-try .cols-2 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.intro-try .cols-2 > * { min-width: 0; }
@media (max-width: 900px) {
  .intro-try .cols-2 { grid-template-columns: 1fr; }
}
.intro .display { font-size: clamp(3rem, 7vw, 6rem); }
.intro .lead { max-width: 40ch; }

.try-label { margin: 0 0 var(--space-3); }

.try-it .panel {
  background: var(--bg-surface);
  border: var(--border-hair) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.try-it .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.try-it .row-label {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Content warning: sits inside the panel, right above the textarea. */
.content-warning {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--amber-50);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.content-warning strong {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--warning);
}
[data-theme="dark"] .content-warning,
.dark .content-warning { background: color-mix(in srgb, var(--warning) 12%, transparent); }

.samples { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.samples .chip {
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  border: var(--border-hair) solid var(--border-subtle);
  background: var(--bg-surface);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-colors);
}
.samples .chip:hover { background: var(--bg-sunken); color: var(--text-primary); }
.samples .chip.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

.input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 7.5rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: var(--border-hair) solid var(--border-default);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.input:focus { border-color: var(--accent); }

.lang-select {
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: var(--border-hair) solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
}

/* Loading states, mirroring schemer: reserved loader slot, one-line
 * status, 2px progress with tabular numbers. */
.status-line {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.toolbar .swarm { display: inline-flex; visibility: hidden; }
.toolbar .swarm.visible { visibility: visible; }

.progress {
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.progress.visible { opacity: 1; }
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 160ms var(--ease-standard);
}

/* Fallback / retry gate (data saver or a failed load). */
.model-gate {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.model-gate[hidden] { display: none; }
.model-gate p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  max-width: 44ch;
}

.btn {
  padding: 0.55rem 1.4rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-colors);
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ─────────── Results ─────────── */

.result { display: block; }
.result:empty::before {
  content: attr(data-placeholder);
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--text-faint);
}

.verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.verdict strong { font-weight: var(--weight-semibold); }
.verdict .verdict-meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.verdict-flagged { background: var(--oxide-50); color: var(--danger); }
.verdict-clear { background: var(--moss-50); color: var(--success); }
[data-theme="dark"] .verdict-flagged,
.dark .verdict-flagged { background: color-mix(in srgb, var(--danger) 14%, transparent); }
[data-theme="dark"] .verdict-clear,
.dark .verdict-clear { background: color-mix(in srgb, var(--success) 12%, transparent); }

.head-chip {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--border-hair) solid currentColor;
  border-radius: var(--radius-full);
  padding: 0.1rem 0.6rem;
}

/* Score rows use table layout: the label and value cells shrink-wrap their
   (nowrap) content, so the numbers can never overflow their column or wrap
   onto a second line at any pane width; the bar takes whatever is left. */
.meters {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--space-2);
  font-size: var(--text-xs);
}

.meter { display: table-row; }

.meter-label {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding-right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.meter-flagged .meter-label,
.meter-flagged .meter-value {
  color: var(--danger);
  font-weight: var(--weight-semibold);
}

.meter-bar {
  display: table-cell;
  width: 98%;
  vertical-align: middle;
}

.meter-track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
}

.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: width var(--duration-fast) var(--ease-out);
}

.meter-flagged .meter-fill { background: var(--danger); }

.meter-tick {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--border-default);
}

.meter-value {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding-left: var(--space-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
}

.targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.target-chip {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  color: var(--danger);
  border: var(--border-hair) solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.75rem;
}

/* Framing card lead: wider measure for the longer prose. */
.framing-lead { max-width: 70ch; font-size: var(--text-lg); }
.framing-lead code { font-size: 0.85em; }