@layer reset, dev, base, components, utilities, native, platform;
/* ^ the cascade. Line 1, always — reset.css loaded first mentioning only `reset`;
   this declaration appends the rest in order.

   `dev` is the one layer no production document ever writes into: it belongs to
   app/assets/stylesheets/dev/, which only the /design_system catalogue loads.
   It is named HERE because layer order is decided in exactly one place, and a
   layer's position is fixed by where it is first declared — the catalogue sheet
   loads after this file, so it could not put itself anywhere but last. Second
   from the bottom is the point: a dev tool must never be able to out-style the
   components it exists to display truthfully, and it sits above `reset` only
   because overriding a normalisation is what any real rule does too. */

/* Exhale Vault — design tokens. v2 foundation, Slice 1.
   Palette P1 · Type T2 Instrument Serif + Figtree · warm paper ground,
   deep-sea ink, clay action, brass celebration.

   TOKENS ARE UNLAYERED. Rules go in layers; tokens do not — an unlayered declaration
   is what lets themes.css win on specificity alone. Put a token in a layer and dark
   mode stops working with no error.

   Two tiers:
   · tier one — raw OKLCH triplets (bare L C H, reusable with alpha:
     oklch(var(--lch-ink) / 12%)) plus the shadow/scrim alpha components.
     themes.css overrides TIER ONE ONLY.
   · tier two — semantic roles (--color-*, --elev-*). Components consume only tier two
     and never need a dark-mode rule. */

:root {
  /* ---- safe areas — the only four env() in the system. Components consume
     var(--safe-*), never env() directly (the preview injects the same variables). ---- */
  --safe-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
  --safe-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
  --safe-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));

  /* ---- brand — the logo's construction. The mark is sparse, so its box is drawn larger
     than the wordmark to carry equal weight; 7 of its 48 units are padding each side, so
     clear space is measured from the visible mark, never the box. ---- */
  --logo-size: 44px;
  --logo-min-wordmark: 20px;
  --logo-mark-scale: 1.32;
  --logo-mark-visible: .708;
  --logo-gap: .14em;
  --logo-clear: .5;
  --logo-stacked-mark-scale: 2.16;
  --logo-stacked-gap: .12em;
  --logo-compact-mark-scale: 2.82;
  --logo-compact-leading: 1.08;

  /* ---- the Exhale Vault — one vault, the product's namesake ---- */
  --exhale-vault-column-min: 320px;
  --exhale-vault-words-lines: 2;
  --exhale-vault-course-alpha: 28%;
  --exhale-vault-quiet-alpha: 76%;
  --exhale-vault-rule-alpha: 16%;
  --exhale-vault-hover-alpha: 8%;

  /* ---- the Shell — the Stage, the Dock, the icons they carry ---- */
  --viewport-block-size: 100dvh;
  --viewport-inline-size: 100vw;
  --length-zero: 0px;
  --fluid-switch: 1000;
  --track-fill: 1fr;
  --opacity-none: 0;
  --opacity-full: 1;
  --dock-slot-max: 96px;
  --dock-icon-size: 20px;
  --dock-block-size: calc(var(--tap-min) + var(--space-3) + var(--space-2) + var(--border-width));
  --scrollbar-size: 6px;
  --size-fill: 100%;
  --icon-size: 1em;

  /* ---- z-axis — the only z-index values. Overlays over scrolling content take a
     level; a component that raises one of its own parts isolates itself. ---- */
  --z-raised: 1;
  --z-sticky: 2;
  --z-sheet: 3;
  --z-chrome: 4;
  --z-modal: 5;

  /* ---- reset — the normalisation's own values ---- */
  --reset-text-size-adjust: 100%;
  --reset-media-max-inline-size: 100%;
  --reset-textarea-min-block-size: 6em;
  --reset-target-scroll-margin: 2ex;
  --reset-motion-duration: 0.01ms;
  --reset-motion-iterations: 1;

  /* ---- the Conversation View — Participants, the Progress Summary, the Item Index ---- */
  --participant-size: 48px;
  --participant-pair-size: 30px;
  --participant-slot: 72px;
  --participant-mark-size: 40px;
  --participant-icon-size: 20px;
  --participant-halo-scale: 1.17;
  --participant-ripple-scale: 1.45;
  --clamp-lines: 3;
  --item-marker-size: 22px;
  --item-check-size: 14px;
  --item-started-fill: 50%;
  --todo-marker-size: 14px;
  --todo-check-size: 10px;
  --check-pip-size: 8px;
  --check-pip-size-small: 6px;
  --check-pip-offset: -4px;
  --check-pip-ring: 2px;
  --avatar-size-large: 80px;
  --participant-breathe-scale: 1.06;
  --participant-pulse-scale: 1.12;
  --participant-ripple-fade: 0;
  --participant-spin: 1turn;
  --speaking-ring-width: 2px;
  --speaking-ring-reach: 12px;
  --activity-shimmer: linear-gradient(90deg, var(--color-ink-faint) 40%, var(--color-ink) 50%, var(--color-ink-faint) 60%);
  --activity-shimmer-size: 300%;
  --activity-shimmer-start: 100%;
  --activity-shimmer-end: 0%;
  --talk-device-dot-size: 12px;
  --talk-device-dot-inset: -1px;
  --thread-inline-size: 480px;
  --sign-in-inline-size: 400px;
  --sign-in-logo-size: 25px;
  --composer-max-block-size: 132px;
  --composer-send-size: 28px;
  --composer-send-icon-size: 16px;
  --composer-field-padding-block: calc((var(--composer-send-size) - 1lh) / 2);
  --message-bubble-max: 85%;
  --message-avatar-track: 16px;
  --message-typing-dot-size: 6px;
  --message-typing-dot-rest: .35;
  --message-typing-dot-peak: 1;
  --message-typing-dot-lift: -3px;
  --message-typing-dot-stagger: 160ms;
  --avatar-size: 28px;
  --conversation-status-mark-size: 24px;
  --row-icon-size: 36px;
  --guest-link-code-size: 232px;

  /* ---- marketing — the signed-out site: its hero, its sections, its plans ---- */
  --site-window-inline-size: 460px;
  --site-window-block-size: 420px;
  --site-vault-inline-size: 340px;
  --site-form-inline-size: 480px;
  --site-sticky-top: 160px;
  --site-mark-size: 480px;
  --site-call-mark-size: 96px;
  --site-demo-screen-inline-size: 393px;
  --site-demo-screen-block-size: 852px;
  --site-demo-chrome-top: 103px;
  --site-demo-chrome-bottom: 83px;
  --site-demo-frame-inline-size: 419px;
  --site-demo-frame-block-size: 878px;
  --site-demo-scale: .78;
  --site-demo-scale-max: .86;
  --site-demo-ring-pad: 6px;
  --site-demo-ring-reach: 7px;
  --site-demo-halo-alpha: 22%;
  --site-demo-callout-inline-size: 300px;
  --site-demo-callout-gap: 56px;
  --site-demo-callout-pop: .94;
  --site-demo-step-inline-size: 44px;
  --site-demo-step-block-size: 3px;
  --site-demo-interval: 5200ms;
  --site-demo-fill-start: 0 1;
  --site-breath-scale: 1.1;
  --site-breath-turn: 45deg;
  --site-reveal-offset: 24px;
  --site-question-rest: .22;
  --site-stage-mark-alpha: 7%;
  --site-stage-muted-alpha: 70%;
  --site-stage-rule-alpha: 16%;
  --site-stage-hover-alpha: 10%;
  --site-glow-reach: 70%;
  --site-loop-step-block-size: 88svh;
  --measure-site: 34ch;
  --measure-site-lead: 52ch;
  --ease-site: cubic-bezier(0, 0, .5, 1);
  --dur-site-reveal: 700ms;
  --type-site-hero: 400 54px/1 var(--font-display);
  --type-site-hero-lg: 400 108px/.96 var(--font-display);
  --type-site-headline: 400 42px/1.04 var(--font-display);
  --type-site-headline-lg: 400 72px/1 var(--font-display);
  --type-site-statement: 400 64px/.98 var(--font-display);
  --type-site-statement-lg: 400 128px/.92 var(--font-display);
  --type-site-question: 400 32px/1.16 var(--font-display);
  --type-site-question-lg: 400 52px/1.1 var(--font-display);
  --type-site-door: 400 30px/1.12 var(--font-display);
  --type-site-door-lg: 400 44px/1.08 var(--font-display);
  --type-site-numeral: 400 64px/1 var(--font-display);
  --type-site-numeral-lg: 400 96px/1 var(--font-display);
  --type-site-lead: 400 19px/1.5 var(--font-body);
  --type-site-lead-lg: 400 22px/1.45 var(--font-body);
  /* the long read — Our story */
  --measure-read: 36em;
  --measure-read-quote: 20ch;
  --site-read-figure-inline-size: 340px;
  --type-site-read: 400 18px/1.7 var(--font-body);
  --type-site-read-lg: 400 20px/1.7 var(--font-body);
  --type-site-read-lede: 400 27px/1.32 var(--font-display);
  --type-site-read-lede-lg: 400 36px/1.26 var(--font-display);
  --type-site-fact: 400 96px/.9 var(--font-display);
  --type-site-fact-lg: 400 168px/.86 var(--font-display);
  --type-site-quote: italic 400 38px/1.14 var(--font-display);
  --type-site-quote-lg: italic 400 64px/1.06 var(--font-display);
  --type-site-belief: 400 28px/1.15 var(--font-display);
  --type-site-belief-lg: 400 36px/1.1 var(--font-display);

  /* ---- components — the Glass, the Sheet, the Button, the Input, the Modal ---- */
  --sheet-grabber-inline-size: 72px;
  --sheet-grabber-block-size: 5px;
  --sheet-collapsed-block-size: calc(var(--space-3) + var(--sheet-grabber-block-size) + var(--space-3) + var(--tap-min) + var(--space-4) + var(--border-width));
  --button-size-large: 72px;
  --button-icon-size: 20px;
  --button-icon-size-large: 28px;
  --input-icon-size: 20px;
  --modal-inline-size: 440px;
  --modal-block-size: 956px;
  --modal-inset: clamp(var(--length-zero), (var(--viewport-inline-size) - var(--modal-inline-size)) * var(--fluid-switch), var(--gutter-desktop));
  --modal-radius: clamp(var(--length-zero), (var(--viewport-inline-size) - var(--modal-inline-size)) * var(--fluid-switch), var(--radius-xl));
  --modal-enter-offset: 24px;
  --entrance-offset: 8px;

  /* ---- type — T2. The serif carries the feeling, the sans does the work.
     Instrument Serif has ONE weight (400); never synthesise bold.
     12px is the floor for every text style. Never override a font-size below it —
     if something feels too big at 12px, remove it instead of shrinking it. ---- */
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-display-1: 400 48px/1.02 var(--font-display);
  --type-display-2: 400 38px/1.06 var(--font-display);
  --type-title-1: 400 30px/1.15 var(--font-display);
  --type-title-2: 400 23px/1.24 var(--font-display);
  --type-quote: italic 400 23px/1.38 var(--font-display);
  --type-body-lg: 400 18px/1.55 var(--font-body);
  --type-caption-reading: 400 18px/1.4 var(--font-body);
  --type-body: 400 16px/1.55 var(--font-body);
  --type-body-sm: 400 14.5px/1.50 var(--font-body);
  --type-heading: 600 16px/1.30 var(--font-body);
  --type-label: 600 13px/1.30 var(--font-body);
  --type-caption: 400 12px/1.40 var(--font-body);
  --type-overline: 700 12px/1 var(--font-body);
  --type-button: 600 15px/1 var(--font-body);
  --type-mono: 400 13px/1.45 var(--font-mono);
  --type-code: 500 28px/1.2 var(--font-body);
  --type-dock: 600 12px/1 var(--font-body);
  --type-initials: 600 17px/1 var(--font-body);
  --type-initials-pair: 600 12px/1 var(--font-body);
  --type-message: 400 14px/1.30 var(--font-body);
  --type-message-author: 600 12px/1.50 var(--font-body);
  --type-message-meta: 400 12px/1.50 var(--font-body);
  --type-avatar: 600 12px/1 var(--font-body);
  /* desktop steps up display sizes only — body text never grows */
  --type-display-1-lg: 400 66px/1 var(--font-display);
  --type-display-2-lg: 400 48px/1.04 var(--font-display);

  --tracking-display: -.01em; /* Instrument Serif is already tight; no further */
  --tracking-tight: -.005em;
  --tracking-normal: 0;
  --tracking-caps: .13em;
  --tracking-overline: .16em;
  --tracking-code: .32em;

  /* ---- space — 4-based, generous jumps at the top: one-thing-at-a-time layouts
     need air more than density. NOTE: --space-3/--space-4 keep their names per the
     contract but carry designed values (6px/8px), not the placeholder round numbers. ---- */
  --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px;
  --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px;
  --space-10: 40px; --space-11: 56px; --space-12: 72px; --space-13: 96px;
  --tile-size: calc(var(--space-13) + var(--space-8));

  --gutter-mobile: 20px;
  --gutter-desktop: 40px;
  --gutter-fluid: clamp(var(--space-5), 4vw, var(--gutter-desktop));
  --measure: 64ch;
  --measure-tight: 46ch; /* a guided step */
  --tap-min: 44px;
  --max-content: 1240px;
  --rail-width: 264px;

  /* ---- shape — soft but not bubbly ---- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px;
  --radius-xl: 26px; --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-button: 12px;
  --radius-field: 12px;
  --radius-sheet: 26px;
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --btn-pad-sm: 9px 14px;
  --btn-pad-md: 14px 20px;
  --btn-pad-lg: 17px 26px;

  /* ---- motion — spring for anything the user did, calm for anything the app did ---- */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-spring-soft: cubic-bezier(.22,1.2,.36,1);
  --ease-calm: cubic-bezier(.4,0,.2,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  --ease-breath: cubic-bezier(.37,0,.63,1);
  --dur-instant: 90ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 340ms;
  --dur-sheet: 420ms;
  --dur-celebrate: 720ms; /* arrival of the session-end mark — the one true celebration */
  --dur-breath: 5200ms;
  --dur-highlight: 2400ms;
  --dur-activity: 2000ms;
  --dur-speaking: 1100ms;
  --dur-thinking: 1600ms;
  --dur-typing: 1200ms;
  --press-scale: .975; /* shrink, never colour-flash */
  --hover-lift: -1px;
  --hover-scale: 1.015;
  --stagger-arc: 90ms;

  /* ================= tier one — OKLCH triplets (light) =================
     Bare L C H components, never colours. themes.css swaps THESE and only these. */
  --lch-canvas: 97.71% 0.0074 80.72; /* oat-100 #FAF7F2 */
  --lch-surface: 100.00% 0 0; /* white #FFFFFF */
  --lch-surface-sunken: 94.53% 0.0136 78.26; /* oat-200 #F2ECE3 */
  --lch-surface-raised: 100.00% 0 0; /* white #FFFFFF */
  --lch-surface-inverse: 31.09% 0.0625 251.22; /* sea-800 #16324F */
  --lch-chip: 94.53% 0.0136 78.26; /* oat-200 #F2ECE3 */
  --lch-ink: 30.73% 0.0120 78.13; /* stone-800 #332F29 */
  --lch-ink-display: 31.09% 0.0625 251.22; /* sea-800 #16324F */
  --lch-ink-muted: 39.58% 0.0127 81.76; /* stone-700 #4A463F */
  --lch-ink-faint: 52.83% 0.0114 87.52; /* stone-600 — the last AA text step #6E6B64 */
  --lch-ink-on-accent: 100.00% 0 0; /* white on clay-500 · 5.46:1 #FFFFFF */
  --lch-ink-on-inverse: 97.71% 0.0074 80.72; /* oat-100 #FAF7F2 */
  --lch-border: 90.67% 0.0184 78.24; /* oat-300 #E7DFD3 */
  --lch-border-strong: 85.01% 0.0279 78.17; /* oat-400 #D8CCBA */
  --lch-edge: 85.01% 0.0279 78.17; /* oat-400 — the edge of a control on any surface #D8CCBA */
  --lch-accent: 53.30% 0.1149 44.69; /* clay-500 — do not lighten #A2542F */
  --lch-accent-hover: 47.60% 0.1033 45.06; /* clay-600 #8B4726 */
  --lch-accent-press: 41.74% 0.0926 42.97; /* clay-700 #75391F */
  --lch-accent-ink: 41.74% 0.0926 42.97; /* clay-700 — clay when it paints TYPE #75391F */
  --lch-link: 50.82% 0.0755 244.75; /* steel-600 #3E6A8E */
  --lch-celebrate: 68.47% 0.1242 81.71; /* brass-500 — fills and strokes, NEVER type #C0912F */
  --lch-celebrate-ink: 52.73% 0.1002 78.70; /* brass-700 — brass on type, 5.07:1 on oat #8A6318 */
  --lch-celebrate-soft: 88.99% 0.0419 83.86; /* brass-200 #E8D9BC */
  --lch-done: 49.41% 0.0496 152.59; /* sage-600 #4C6A54 */
  --lch-done-soft: 90.88% 0.0213 147.62; /* sage-200 #D8E5D9 */
  --lch-info: 50.82% 0.0755 244.75; /* steel-600 #3E6A8E */
  --lch-info-soft: 93.04% 0.0168 236.70; /* steel-100 #DEEAF2 */
  --lch-caution: 58.92% 0.1063 79.89; /* brass-600 #9E7526 */
  --lch-caution-soft: 88.99% 0.0419 83.86; /* brass-200 #E8D9BC */
  --lch-danger: 44.53% 0.1298 26.73; /* rust-600 #8E2F2A */
  --lch-danger-soft: 88.96% 0.0333 29.38; /* rust-200 #F0D3CE */
  --lch-stage: 24.60% 0.0560 251.50; /* sea-900 — the site's deep ground, dark in both themes #0D2640 */
  --lch-stage-ink: 97.71% 0.0074 80.72; /* oat-100 on sea-900 #FAF7F2 */
  --lch-stage-glow: 40.20% 0.0760 246.00; /* sea-600 — the light behind the product on the stage #2B5276 */
  --lch-shadow: 31.47% 0.0483 70.60; /* warm brown — shadows are never grey #412D14 */
  --lch-inset: 100.00% 0 0; /* white #FFFFFF */
  --lch-scrim: 31.09% 0.0625 251.22; /* sea-800 #16324F */
  /* alpha components — tier one; themed with the triplets */
  --shadow-alpha-1: 5%;
  --shadow-alpha-2a: 5%;
  --shadow-alpha-2b: 10%;
  --shadow-alpha-3a: 6%;
  --shadow-alpha-3b: 16%;
  --shadow-alpha-4a: 7%;
  --shadow-alpha-4b: 22%;
  --inset-alpha: 60%;
  --scrim-alpha: 32%;
  --chrome-alpha: 82%;
  --scrollbar-alpha: 24%;
  --participant-halo-alpha: 28%;
  --speaking-alpha: 60%;

  /* ================= tier two — semantic roles =================
     Components consume only these. No component ever needs a dark-mode rule.
     Rules that never bend:
     · brass never paints type — --color-celebrate is fills/strokes; type gets
       --color-celebrate-ink.
     · clay as type is --color-accent-ink, never --color-accent. */
  --color-bg: oklch(var(--lch-canvas));
  --color-surface: oklch(var(--lch-surface));
  --color-surface-sunken: oklch(var(--lch-surface-sunken));
  --color-surface-raised: oklch(var(--lch-surface-raised));
  --color-surface-inverse: oklch(var(--lch-surface-inverse));
  --color-chip: oklch(var(--lch-chip));
  --color-ink: oklch(var(--lch-ink));
  --color-ink-display: oklch(var(--lch-ink-display));
  --color-ink-muted: oklch(var(--lch-ink-muted));
  --color-ink-faint: oklch(var(--lch-ink-faint));
  --color-ink-on-accent: oklch(var(--lch-ink-on-accent));
  --color-ink-on-danger: oklch(var(--lch-ink-on-accent));
  --color-ink-on-inverse: oklch(var(--lch-ink-on-inverse));
  --color-border: oklch(var(--lch-border));
  --color-border-strong: oklch(var(--lch-border-strong));
  --color-edge: oklch(var(--lch-edge));
  --color-accent: oklch(var(--lch-accent));
  --color-accent-hover: oklch(var(--lch-accent-hover));
  --color-accent-press: oklch(var(--lch-accent-press));
  --color-accent-ink: oklch(var(--lch-accent-ink));
  --color-link: oklch(var(--lch-link));
  --color-celebrate: oklch(var(--lch-celebrate));
  --color-celebrate-ink: oklch(var(--lch-celebrate-ink));
  --color-celebrate-soft: oklch(var(--lch-celebrate-soft));
  --color-done: oklch(var(--lch-done));
  --color-done-soft: oklch(var(--lch-done-soft));
  --color-info: oklch(var(--lch-info));
  --color-info-soft: oklch(var(--lch-info-soft));
  --color-caution: oklch(var(--lch-caution));
  --color-caution-soft: oklch(var(--lch-caution-soft));
  --color-danger: oklch(var(--lch-danger));
  --color-danger-soft: oklch(var(--lch-danger-soft));
  --color-scrim: oklch(var(--lch-scrim) / var(--scrim-alpha));
  --color-chrome: oklch(var(--lch-canvas) / var(--chrome-alpha));
  --color-scrollbar: oklch(var(--lch-ink) / var(--scrollbar-alpha));
  --color-participant: oklch(var(--lch-info-soft));
  --color-participant-ink: oklch(var(--lch-info));
  --color-message: oklch(var(--lch-chip));
  --color-message-me: oklch(var(--lch-info-soft));
  --color-guide: oklch(var(--lch-surface-inverse));
  --color-guide-ink: oklch(var(--lch-ink-on-inverse));
  --color-guide-halo: oklch(var(--lch-surface-inverse) / var(--participant-halo-alpha));
  --color-speaking: oklch(var(--lch-accent) / var(--speaking-alpha));
  --color-highlight: oklch(var(--lch-celebrate-soft));
  --color-stage: oklch(var(--lch-stage));
  --color-stage-ink: oklch(var(--lch-stage-ink));
  --color-stage-muted: oklch(var(--lch-stage-ink) / var(--site-stage-muted-alpha));
  --color-stage-rule: oklch(var(--lch-stage-ink) / var(--site-stage-rule-alpha));
  --color-stage-mark: oklch(var(--lch-stage-ink) / var(--site-stage-mark-alpha));
  --color-stage-glow: oklch(var(--lch-stage-glow));
  --color-stage-hover: oklch(var(--lch-stage-ink) / var(--site-stage-hover-alpha));
  --color-demo-halo: oklch(var(--lch-accent) / var(--site-demo-halo-alpha));

  /* elevation — warm-tinted, two layers: tight contact + wide soft spread */
  --elev-0: none;
  --elev-1: 0 1px 2px oklch(var(--lch-shadow) / var(--shadow-alpha-1));
  --elev-2: 0 2px 4px oklch(var(--lch-shadow) / var(--shadow-alpha-2a)),
            0 12px 26px -8px oklch(var(--lch-shadow) / var(--shadow-alpha-2b));
  --elev-3: 0 3px 6px oklch(var(--lch-shadow) / var(--shadow-alpha-3a)),
            0 22px 44px -12px oklch(var(--lch-shadow) / var(--shadow-alpha-3b));
  --elev-4: 0 4px 8px oklch(var(--lch-shadow) / var(--shadow-alpha-4a)),
            0 40px 72px -20px oklch(var(--lch-shadow) / var(--shadow-alpha-4b));
  --elev-inset: inset 0 1px 0 oklch(var(--lch-inset) / var(--inset-alpha));
  /* a shadow that follows a drawn shape (the vault's arch) rather than its box */
  --elev-drop: drop-shadow(0 4px 8px oklch(var(--lch-shadow) / var(--shadow-alpha-4a))) drop-shadow(0 28px 36px oklch(var(--lch-shadow) / var(--shadow-alpha-3b)));
  --chrome-backdrop: blur(20px) saturate(1.5);
  --speaking-ring: 0 0 0 var(--speaking-ring-width) var(--color-speaking);
  --speaking-ring-faded: 0 0 0 var(--speaking-ring-reach) transparent;
  --speaking-ring-start: 0 0 0 0 var(--color-speaking);
}

/* reduced motion collapses every duration and removes all scaling */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms;
    --dur-sheet: 1ms; --dur-celebrate: 1ms; --dur-breath: 0ms;
    --dur-highlight: 1ms; --dur-activity: 1ms; --dur-speaking: 1ms; --dur-thinking: 1ms; --dur-typing: 1ms;
    --press-scale: 1; --hover-scale: 1; --hover-lift: 0; --stagger-arc: 0ms;
  }
}