/* Design tokens (WAV-3245). Three tiers, all here:
   1. Palette: raw scales. Only the semantic tier below reads them; components never do
      (tests/test_web_design_tokens.py fails on var(--zinc-…) and friends elsewhere).
   2. Semantic: the roles components use, named exactly as the polish mocks (wm.css):
      surfaces --surface-base/l1/l2/l3/elevated/invert and --bubble; text --fg-1…4 and
      --fg-invert; alpha ink --border-1/2/3 (7/11/20 %), --hover/--press (4.5/8 %) and
      --track (5 %); --shadow-pop/--shadow-raise; status --ok/--warn/--bad/--info with
      -bg tints and --hatch (Unknown is hatched, never green); --accent; type --text-13…24
      and --text-display, --weight-regular/--weight-strong; radii --radius-sm 10,
      --radius 16, --radius-xl 24, --radius-pill. Themes and grounds swap values only.
   3. Component knobs, only where a component needs its own (--composer-*, --field-border).
   The v3 names further down are aliases onto the semantic tier: do not use them in new code. */
/* Primitives API (for surface lanes). Motion: --dur-1/2/3, --ease-standard/out/in; .feather-y,
   .feather-x, .shimmer-text, .breathe, .develop; motion.js reducedMotion(), viewTransition(),
   routeEnter(). Theme: data-theme/data-ground on <html>; appearance.js applyAppearance(),
   setAppearance(), appearanceCommands(). Overlays (overlays.css, overlays.js): .menu +
   .menu-item(.ic .t .d .ok) + .menu-sep with [role=menu] or [data-menu] keyboard model, menuItem(),
   placeMenu(); openDialog(), confirmDestructive()/confirmTrash()/confirmDelete() with .impact-rows,
   dialogs become bottom sheets at <=600px; toast(message,{kind,action,thumbnail,persist}),
   receipt(), notice() (ui.js); [data-tooltip] or icon-only aria-label tooltips; dangerBlock();
   kbdFooter() / .kbd-footer. States (ui.js, below): segmented(), statusChip(), skeleton(),
   emptyState(), errorState(), validateOnBlur(). */
:root {
  /* 1. Palette — never referenced outside this file. */
  --white:#ffffff;--black:#000000;
  --zinc-50:#fafafa;--zinc-100:#f4f4f5;--zinc-125:#f1f1f2;--zinc-150:#e9e9ec;--zinc-200:#e4e4e7;--zinc-300:#d4d4d8;
  --zinc-350:#b4b4bc;--zinc-400:#a1a1aa;--zinc-450:#8d8d96;--zinc-500:#6b6b74;--zinc-550:#5d5d66;--zinc-600:#4b4b53;
  --zinc-700:#3f3f46;--zinc-800:#27272a;--zinc-810:#26262b;--zinc-820:#212125;--zinc-850:#1d1d21;--zinc-860:#1b1b1f;
  --zinc-900:#131316;--zinc-925:#0b0b0d;--zinc-950:#09090b;
  --stone-50:#f9f8f7;--stone-100:#f2f1ef;--stone-110:#f0efed;--stone-150:#e7e5e2;--stone-350:#bab4ae;--stone-400:#a8a29e;
  --stone-450:#938d87;--stone-500:#6f6a65;--stone-600:#4f4b47;--stone-800:#2d2a28;--stone-820:#272421;--stone-850:#24221f;
  --stone-860:#22201e;--stone-900:#1a1918;--stone-925:#121110;--stone-950:#1c1917;
  --spark-1:#ff9b73;--spark-2:#f2609e;--spark-3:#9b5cf6;--spark-4:#5468ff;
  --red-400:#f87171;--red-600:#dc2626;--red-700:#b91c1c;--amber-400:#fbbf24;--amber-600:#d97706;--amber-800:#92400e;
  --green-400:#4ade80;--green-600:#16a34a;--green-800:#166534;
  --violet-300:#c4b5fd;--indigo-200:#c7d2fe;--indigo-300:#a5b4fc;--indigo-600:#4f46e5;--indigo-700:#4338ca;--indigo-800:#3730a3;
  /* 2. Semantic — light, zinc ground. */
  --surface-base:var(--zinc-50);--surface-l1:var(--white);--surface-l2:var(--zinc-100);--surface-l3:var(--zinc-150);
  --surface-elevated:var(--white);--surface-invert:var(--zinc-950);--bubble:var(--zinc-125);
  --fg-1:var(--zinc-950);--fg-2:var(--zinc-600);--fg-3:var(--zinc-500);--fg-4:var(--zinc-400);--fg-invert:var(--zinc-50);
  --ink-rgb:9 9 11;
  --border-1:rgb(var(--ink-rgb) / .07);--border-2:rgb(var(--ink-rgb) / .11);--border-3:rgb(var(--ink-rgb) / .2);
  --hover:rgb(var(--ink-rgb) / .045);--press:rgb(var(--ink-rgb) / .08);--track:rgb(var(--ink-rgb) / .05);
  --shadow-pop:0 0 0 1px var(--border-1),0 14px 36px -10px rgb(9 9 11 / .18),0 2px 6px -2px rgb(9 9 11 / .06);
  --shadow-raise:0 1px 2px rgb(9 9 11 / .06),0 0 0 1px var(--border-1);
  /* Status text sits on its own -bg at >= 4.5:1; the mock hues (#16a34a …) fail that in light, so light uses darker steps for text and the mock hues for the -bg tints. */
  --ok:var(--green-800);--warn:var(--amber-800);--bad:var(--red-700);--info:var(--indigo-600);
  --ok-bg:color-mix(in srgb,var(--green-600) 12%,transparent);--warn-bg:color-mix(in srgb,var(--amber-600) 14%,transparent);
  --bad-bg:color-mix(in srgb,var(--red-600) 11%,transparent);--info-bg:color-mix(in srgb,var(--info) 11%,transparent);
  --hatch:repeating-linear-gradient(135deg,var(--border-3) 0 2px,transparent 2px 6px);
  --accent:var(--indigo-600);--accent-strong:var(--indigo-700);--accent-press:var(--indigo-800);
  --accent-soft:color-mix(in srgb,var(--accent) 9%,var(--surface-l1));
  --scrim:rgb(9 9 11 / .28);
  --spark:linear-gradient(120deg,var(--spark-1) 0%,var(--spark-2) 38%,var(--spark-3) 70%,var(--spark-4) 100%);
  --spark-soft:linear-gradient(120deg,color-mix(in srgb,var(--spark-1) 15%,transparent),color-mix(in srgb,var(--spark-2) 15%,transparent) 38%,color-mix(in srgb,var(--spark-3) 15%,transparent) 70%,color-mix(in srgb,var(--spark-4) 15%,transparent));
  --spark-ring:0 0 0 1px color-mix(in srgb,var(--spark-3) 25%,transparent),0 0 0 5px color-mix(in srgb,var(--spark-3) 8%,transparent),0 8px 30px -6px color-mix(in srgb,var(--spark-2) 20%,transparent);
  --spark-glow:.22;--on-media:var(--white);--on-spark:var(--on-media);
  /* The media stage is dark in every theme. */
  --stage:var(--night-base);--stage-raised:var(--zinc-850);
  /* Night: always-dark panels in every theme (code blocks, dark marketing bands, media chrome). */
  --night-base:var(--zinc-950);--night-l1:var(--zinc-900);--night-l2:var(--zinc-850);--night-line:var(--zinc-800);
  --night-fg-1:var(--white);--night-fg-2:var(--zinc-200);--night-fg-3:var(--zinc-400);--night-fg-4:var(--zinc-500);
  --night-accent:var(--violet-300);
  --text-13:13px;--text-14:14px;--text-15:15px;--text-16:16px;--text-24:24px;--text-display:30px;
  /* Public page titles at their boards' sizes, reached by 1400px: --text-hero 76 (MkHome H1),
     --text-title-xl 56 (Blog, Download, Docs), -l 52 (Help), -m 48 (MkHome H2s), --text-title 44
     (Status, Policies). */
  --text-hero:clamp(46px,5.43vw,76px);--text-title-xl:clamp(36px,4vw,56px);--text-title-l:clamp(36px,3.72vw,52px);
  --text-title-m:clamp(34px,3.43vw,48px);--text-title:clamp(32px,3.15vw,44px);
  --leading-body:1.55;
  /* 550 needs a variable Inter face; the bundled faces are static (400/500/600), where 550 renders as 600.
     --weight-strong moves to 550 when the variable face lands (fonts ticket). */
  --weight-regular:400;--weight-strong:500;
  --radius-sm:10px;--radius:16px;--radius-xl:24px;--radius-pill:999px;
  /* 3. Component knobs. */
  --composer-surface:var(--surface-l1);--composer-border:var(--border-2);--segment-selected:var(--surface-l1);
  --field-border:rgb(var(--ink-rgb) / .45);
  --primary-hover:color-mix(in srgb,var(--surface-invert) 88%,var(--surface-l1));
  --primary-press:color-mix(in srgb,var(--surface-invert) 78%,var(--surface-l1));
  /* v3 aliases — do not use in new code; delete each when its last use is gone. */
  --canvas:var(--surface-l1);--surface:var(--surface-l1);--surface-raised:var(--surface-l2);--soft:var(--surface-l2);
  --app-bg:var(--surface-base);--rail-surface:var(--surface-base);--rail-hover:var(--hover);
  --surface-hover:var(--hover);--surface-pressed:var(--press);
  --ink:var(--fg-1);--brand-ink:var(--fg-1);--muted:var(--fg-2);--subtle:var(--fg-3);
  --line:var(--border-2);--line-hover:var(--border-3);--line-strong:var(--field-border);
  --blue:var(--accent);--blue-dark:var(--accent-strong);--blue-pressed:var(--accent-press);
  --coral:var(--spark-1);--coral-hover:color-mix(in srgb,var(--spark-1) 80%,var(--white));--coral-pressed:color-mix(in srgb,var(--spark-1) 90%,var(--black));
  --success:var(--ok);--success-bg:var(--ok-bg);--warning:var(--warn);--warning-bg:var(--warn-bg);
  --error:var(--bad);--error-bg:var(--bad-bg);--overlay:rgb(9 9 11 / .62);
  --ink-hover:var(--primary-hover);--ink-pressed:var(--primary-press);
  --radius-lg:18px; /* panels; owner to confirm 18 vs 20 */
  --text-body:var(--text-16);--text-label:var(--text-14);--text-meta:var(--text-13);
  --text-h1:clamp(22px,2.2vw,28px);--text-h3:1.125rem;--text-h2:var(--text-24);
  /* Layout and rhythm. */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  --control-height:40px;
  --rail-width:244px;--rail-collapsed:76px;--header-height:66px;--content-width:1600px;--public-width:1320px;
  --rail-inset:.9rem;--rail-top:1.1rem;--rail-brand-width:120px;--rail-brand-gap:.75rem;
  --rail-icon:18px;--rail-action-height:44px;--rail-link-gap:.7rem;--rail-row-gap:.2rem;--header-inset:2.25rem;
  --font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:var(--font);
  --shadow:0 12px 40px -8px rgb(9 9 11 / .14);
  --shadow-sm:0 1px 2px rgb(9 9 11 / .06);--shadow-md:0 6px 20px -4px rgb(9 9 11 / .1),0 1px 3px rgb(9 9 11 / .06);
  --shadow-lg:0 28px 70px -16px rgb(9 9 11 / .3),0 0 0 1px rgb(9 9 11 / .05);
  /* Motion (WAV-3252): colour/opacity state, popover enter, panels and docking. */
  --dur-1:100ms;--dur-2:160ms;--dur-3:240ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.4,0,1,1);
  --motion-fast:var(--dur-1);--motion-ease:var(--ease-standard);--motion-base:var(--dur-2);--motion-ease-out:var(--ease-out);
  font-family:var(--font);font-size:16px;color:var(--fg-1);background:var(--surface-l1);color-scheme:light;
}
/* Warm ground: paper-toned neutrals; ink, spark and media are unchanged. */
:root[data-ground=warm] {
  --surface-base:var(--stone-50);--surface-l2:var(--stone-100);--surface-l3:var(--stone-150);--bubble:var(--stone-110);
  --fg-2:var(--stone-600);--fg-3:var(--stone-500);--fg-4:var(--stone-400);
  --ink-rgb:28 25 23;
}
/* Dark tier (WAV-3258): the same semantic names, dark values. Defined for the system
   preference (unless the page is forced light) and for an explicit data-theme=dark. */
@media (prefers-color-scheme:dark) {
 :root:not([data-theme=light]) {
  --surface-base:var(--zinc-925);--surface-l1:var(--zinc-900);--surface-l2:var(--zinc-860);--surface-l3:var(--zinc-810);
  --surface-elevated:var(--zinc-850);--surface-invert:var(--zinc-50);--bubble:var(--zinc-820);
  --fg-1:var(--zinc-100);--fg-2:var(--zinc-350);--fg-3:var(--zinc-450);--fg-4:var(--zinc-550);--fg-invert:var(--zinc-950);
  --ink-rgb:255 255 255;--hover:rgb(255 255 255 / .05);--press:rgb(255 255 255 / .09);--track:rgb(255 255 255 / .06);
  --shadow-pop:0 0 0 1px var(--border-2),0 18px 44px -10px rgb(0 0 0 / .7);--shadow-raise:0 0 0 1px var(--border-2);
  --shadow:0 12px 40px -8px rgb(0 0 0 / .5);--shadow-sm:0 1px 2px rgb(0 0 0 / .4);--shadow-md:0 6px 20px -4px rgb(0 0 0 / .5),0 0 0 1px var(--border-1);
  --shadow-lg:0 28px 70px -16px rgb(0 0 0 / .7),0 0 0 1px var(--border-2);
  --ok:var(--green-400);--warn:var(--amber-400);--bad:var(--red-400);--info:var(--indigo-300);
  --ok-bg:color-mix(in srgb,var(--ok) 12%,transparent);--warn-bg:color-mix(in srgb,var(--warn) 14%,transparent);--bad-bg:color-mix(in srgb,var(--bad) 11%,transparent);
  --accent:var(--indigo-300);--accent-strong:var(--indigo-200);--accent-press:var(--indigo-200);
  --scrim:rgb(0 0 0 / .55);--overlay:rgb(0 0 0 / .62);--spark-glow:.34;
  --composer-surface:var(--surface-l2);--segment-selected:var(--surface-l3);
  color-scheme:dark;
 }
 :root:not([data-theme=light])[data-ground=warm] {
  --surface-base:var(--stone-925);--surface-l1:var(--stone-900);--surface-l2:var(--stone-860);--surface-l3:var(--stone-800);
  --surface-elevated:var(--stone-850);--bubble:var(--stone-820);--fg-2:var(--stone-350);--fg-3:var(--stone-450);
 }
}
:root[data-theme=dark] {
  --surface-base:var(--zinc-925);--surface-l1:var(--zinc-900);--surface-l2:var(--zinc-860);--surface-l3:var(--zinc-810);
  --surface-elevated:var(--zinc-850);--surface-invert:var(--zinc-50);--bubble:var(--zinc-820);
  --fg-1:var(--zinc-100);--fg-2:var(--zinc-350);--fg-3:var(--zinc-450);--fg-4:var(--zinc-550);--fg-invert:var(--zinc-950);
  --ink-rgb:255 255 255;--hover:rgb(255 255 255 / .05);--press:rgb(255 255 255 / .09);--track:rgb(255 255 255 / .06);
  --shadow-pop:0 0 0 1px var(--border-2),0 18px 44px -10px rgb(0 0 0 / .7);--shadow-raise:0 0 0 1px var(--border-2);
  --shadow:0 12px 40px -8px rgb(0 0 0 / .5);--shadow-sm:0 1px 2px rgb(0 0 0 / .4);--shadow-md:0 6px 20px -4px rgb(0 0 0 / .5),0 0 0 1px var(--border-1);
  --shadow-lg:0 28px 70px -16px rgb(0 0 0 / .7),0 0 0 1px var(--border-2);
  --ok:var(--green-400);--warn:var(--amber-400);--bad:var(--red-400);--info:var(--indigo-300);
  --ok-bg:color-mix(in srgb,var(--ok) 12%,transparent);--warn-bg:color-mix(in srgb,var(--warn) 14%,transparent);--bad-bg:color-mix(in srgb,var(--bad) 11%,transparent);
  --accent:var(--indigo-300);--accent-strong:var(--indigo-200);--accent-press:var(--indigo-200);
  --scrim:rgb(0 0 0 / .55);--overlay:rgb(0 0 0 / .62);--spark-glow:.34;
  --composer-surface:var(--surface-l2);--segment-selected:var(--surface-l3);
  color-scheme:dark;
}
:root[data-theme=dark][data-ground=warm] {
  --surface-base:var(--stone-925);--surface-l1:var(--stone-900);--surface-l2:var(--stone-860);--surface-l3:var(--stone-800);
  --surface-elevated:var(--stone-850);--bubble:var(--stone-820);--fg-2:var(--stone-350);--fg-3:var(--stone-450);
}
:root[data-theme=light] {color-scheme:light}
/* Profile covers (WAV-3282): the four product profile colours, deep enough for white initials in both themes. */
:root {
  --profile-blue:color-mix(in srgb,var(--spark-4) 72%,var(--night-base));--profile-sand:color-mix(in srgb,var(--spark-1) 70%,var(--night-base));
  --profile-lilac:color-mix(in srgb,var(--spark-3) 74%,var(--night-base));--profile-mint:color-mix(in srgb,var(--green-600) 74%,var(--night-base));
}
/* tokens:end — standalone pages (oauth_pages.py) inline everything above this line. */
/* Moved from the retired legacy sheets (WAV-3249): declarations still in effect after the v3 sheets, in their original order. */
html {font-synthesis:none}
body {margin:0}
* {box-sizing:border-box}
button, input, textarea, select {font-family:inherit;font-size:inherit;line-height:inherit}
a {text-decoration-line:none;color:var(--blue)}
a:hover {text-decoration-line:underline}
button {cursor:pointer}
button, .button {display:inline-flex;border:1px solid var(--line);align-items:center;min-height:40px;padding-top:10px;padding-right:17px;padding-bottom:10px;padding-left:17px;justify-content:center;text-decoration-line:none;color:var(--ink);line-height:1.35;border-top-left-radius:9px;border-top-right-radius:9px;border-bottom-left-radius:9px;border-bottom-right-radius:9px;row-gap:8px;column-gap:8px}
button:hover, .button:hover {text-decoration-line:none}
.quiet {color:var(--muted)}
.icon-button {min-width:38px;min-height:38px;padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px}
.icon {flex-shrink:0;width:20px;height:20px}
input, select, textarea {width:100%;min-width:0px;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;padding-top:11px;padding-right:12px;padding-bottom:11px;padding-left:12px;background-color:var(--surface-l1)}
textarea {min-height:100px;line-height:1.6;resize:vertical}
input[type="checkbox"] {accent-color:var(--blue);width:17px}
h1, h2, h3, p {margin-top:0px}
h1 {margin-bottom:12px}
h2 {margin-bottom:12px}
p {line-height:1.6;color:var(--muted)}
pre, code {font-family:ui-monospace, SFMono-Regular, Consolas, monospace}
pre {max-height:430px;overflow-x:auto;overflow-y:auto;padding-top:18px;padding-right:18px;padding-bottom:18px;padding-left:18px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;white-space:pre-wrap;background:var(--soft);font-size:12px;line-height:1.6}
img, video {display:block;max-width:100%}
video {background-color:var(--stage)}
[hidden] {display:none !important}
/* The page container (retired style.css): a centred 1370px measure with reading gutters. Zero
   specificity, so any page's own width or spacing wins; only pages without one take it. */
:where(.container) {max-width:1370px;margin-right:auto;margin-left:auto;padding:38px 5.5% 72px}
@media(max-width:760px){:where(.container) {padding:27px 16px 50px}}
.page-heading {display:flex;justify-content:space-between}
.actions {display:flex;align-items:center;flex-wrap:wrap;row-gap:9px;column-gap:9px}
.stack {display:grid;row-gap:18px;column-gap:18px}
.section {margin-top:35px}
.section-title {display:flex;justify-content:space-between;align-items:center;row-gap:16px;column-gap:16px;margin-bottom:15px;margin-top:28px}
.section-title h2 {margin-bottom:0px}
.panel p:last-child {margin-bottom:0px}
.cards {display:grid;row-gap:18px;column-gap:18px;grid-template-columns:repeat(3, minmax(0px, 1fr))}
.badge {display:inline-flex;align-items:center;line-height:1.25;padding-bottom:5px;padding-left:8px;padding-right:8px;padding-top:5px}
.tags {display:flex;flex-wrap:wrap;row-gap:6px;column-gap:6px}
.field {display:grid;row-gap:8px;column-gap:8px}
.field small {font-weight:400}
.check {display:flex;align-items:center;line-height:1.5}
.form-grid {grid-template-columns:1fr 1fr}
.form-grid .full {grid-column-start:1;grid-column-end:-1}
.empty {text-align:center;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-width:1px}
.empty-symbol {display:inline-flex;border-bottom-right-radius:16px;border-top-left-radius:16px;margin-bottom:17px;padding-bottom:15px;padding-left:15px;padding-right:15px;padding-top:15px}
.empty p {max-width:430px;margin-right:auto;margin-left:auto;margin-bottom:22px}
.notice-box {border-top-color:color-mix(in srgb,var(--accent) 25%,transparent);border-right-color:color-mix(in srgb,var(--accent) 25%,transparent);border-bottom-color:color-mix(in srgb,var(--accent) 25%,transparent);border-left-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.notice-box.warning {border-top-color:color-mix(in srgb,var(--warn) 30%,transparent);border-right-color:color-mix(in srgb,var(--warn) 30%,transparent);border-bottom-color:color-mix(in srgb,var(--warn) 30%,transparent);border-left-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.error-page {max-width:680px;margin-right:auto;margin-left:auto;margin-bottom:55px;margin-top:55px}
.table-wrap {border:1px solid var(--line);overflow-x:auto;overflow-y:auto}
table {text-align:left;width:100%;border-collapse:collapse}
th {white-space:nowrap}
th, td {border-bottom:1px solid var(--line)}
tr:last-child td {border-bottom-style:none;border-bottom-color:currentcolor}
.details {border:1px solid var(--line);border-bottom-right-radius:9px;border-top-left-radius:9px;margin-bottom:14px;margin-top:14px;padding-bottom:15px;padding-left:15px;padding-right:15px;padding-top:15px}
.details summary {font-weight:550;cursor:pointer}
.details pre {margin-bottom:0px}
.stat strong {display:block;font-size:31px;letter-spacing:-0.8px;margin-bottom:7px;margin-top:12px}
.stat small {display:block}
.auth-card form {display:grid}
.app-shell {grid-template-columns:238px minmax(0px, 1fr)}
.split {display:grid;row-gap:22px;column-gap:22px;grid-template-columns:1fr 1fr}
dialog {overflow-x:auto;overflow-y:auto;border:1px solid var(--line)}
.sr-only {position:absolute;width:1px;height:1px;overflow-x:hidden;overflow-y:hidden}
.list-row {border-bottom:1px solid var(--line)}
.list-row:last-child {border-bottom-style:none;border-bottom-color:currentcolor}
.quiet-rule {border-top:1px solid var(--line);border-right-style:none;border-bottom-style:none;border-left-style:none;margin-bottom:24px;margin-top:24px}
.full-width {width:100%}
.small {font-size:12px}
@media (max-width: 1100px) {.cards {grid-template-columns:repeat(2, minmax(0px, 1fr))}}
@media (max-width: 760px) {.cards, .cards.two {grid-template-columns:1fr}}
@media (max-width: 760px) {.split {grid-template-columns:1fr}}
@media (max-width: 760px) {.form-grid {grid-template-columns:1fr}}
@media (max-width: 760px) {.stat strong {font-size:25px}}
@media (max-width: 760px) {.page-heading .actions .button {padding-top:9px;padding-bottom:9px;font-size:12px;padding-right:11px;padding-left:11px}}
.sr-only {white-space:nowrap;clip-path:inset(50%);min-width:0px !important;min-height:0px !important;margin-top:-1px !important;margin-right:-1px !important;margin-bottom:-1px !important;margin-left:-1px !important;padding-right:0px !important;padding-left:0px !important;border-top-color:currentcolor !important;border-right-color:currentcolor !important;border-bottom-color:currentcolor !important;border-left-color:currentcolor !important}
p a, .notice-box a {text-decoration-line:underline}
.app-shell {grid-template-columns:clamp(235px, 19.5vw, 295px) minmax(0px, 1fr)}
body {font:400 var(--text-body)/1.55 var(--font);background:var(--canvas);color:var(--ink)}
h1,h2,h3 {font-family:var(--font);color:var(--ink);overflow-wrap:break-word;line-height:1.17;letter-spacing:-.02em}
h1 {font-size:var(--text-h1);font-weight:680}
h2 {font-size:clamp(1.4rem,2vw,1.9rem);font-weight:650} h3 {font-size:1.06rem;font-weight:650}
.page-heading {align-items:flex-start;gap:12px;margin-bottom:16px}
.page-heading h1 {font-family:var(--font-display);font-size:var(--text-h1);font-weight:680;letter-spacing:-.03em;margin:0}
.page-heading p {font-size:.95rem;line-height:1.6;max-width:65ch;margin:8px 0 0}
.page-heading>.actions:empty {display:none}
p,small,.muted {color:var(--muted)} small,.small {font-size:var(--text-meta);line-height:1.45}
button,.button,input,select,textarea {border-radius:var(--radius-sm);min-height:var(--control-height)}
button,.button {font-size:var(--text-label);font-weight:550;line-height:1.4;min-height:44px;gap:var(--space-2);padding:10.4px 16px;border-color:var(--line-strong);color:var(--ink);background:var(--surface);box-shadow:none}
button:hover,.button:hover {background:var(--surface-raised);border-color:var(--line-strong)}
button:active,.button:active {background:var(--accent-soft)}
.primary {background:var(--blue);border-color:var(--blue);color:var(--surface);box-shadow:none;font-weight:650;min-height:44px}
.primary:hover {background:var(--blue-dark);border-color:var(--blue-dark);color:var(--surface)}
.primary:active {background:var(--blue-pressed);border-color:var(--blue-pressed);color:var(--surface)}
.quiet,.icon-button {background:transparent;border-color:transparent}
.danger {color:var(--error);border-color:var(--error)}
button:disabled,.button[aria-disabled=true] {cursor:not-allowed;opacity:.55}
button[aria-busy=true] {cursor:progress}
:focus-visible {outline:3px solid var(--blue);outline-offset:3px}
/* State changes ease in colour only; layout never animates (DESIGN §6). Zero specificity, so component transitions win. */
:where(button,.button,a,summary,input,select,textarea,[role=tab],[role=option]) {transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease)}
input,select,textarea {font-family:var(--font);font-size:var(--text-body);font-weight:400;line-height:1.55;background:var(--surface);color:var(--ink);border-color:var(--line-strong);padding:11.2px 12.8px}
select {line-height:normal}
input::placeholder,textarea::placeholder {color:var(--muted)}
[aria-invalid=true] {border-color:var(--error)}
.field,.check {font-size:var(--text-label);color:var(--ink);gap:8.8px}
.field {font-weight:550;line-height:1.55;align-content:start}
.toggle-row {position:relative;display:flex;align-items:center;justify-content:space-between;gap:17.6px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55;cursor:pointer}
.toggle-row strong {display:block;font-size:14.4px;font-weight:550}
.toggle-row small {display:block;max-width:520px;color:var(--muted);font-size:12.8px;line-height:1.55;margin-top:4px}
.toggle-row input {position:absolute;right:0;width:44px;height:44px;min-height:44px;opacity:0;margin:0;padding:0;cursor:pointer}
.toggle-row .switch {width:40px;height:23px;border-radius:20px;background:var(--line-strong);padding:3px;flex:none;pointer-events:none}
.toggle-row .switch::after {content:'';display:block;width:17px;height:17px;border-radius:50%;background:var(--surface);transition:transform var(--motion-fast) var(--motion-ease)}
.toggle-row input:checked+.switch {background:var(--blue)}
.toggle-row input:checked+.switch::after {transform:translateX(17px)}
.toggle-row input:focus-visible+.switch {outline:3px solid var(--blue);outline-offset:4px}
/* Report dialog (WAV-3943, board ItemDetail): the closed category list as wrapping chips. */
.report-categories {display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.report-categories legend {padding:0;margin-bottom:8px;font-weight:var(--weight-strong);color:var(--fg-1)}
.report-category {position:relative}
.report-category input {position:absolute;inset:0;opacity:0;margin:0}
.report-category span {display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--border-2);border-radius:var(--radius-pill);font-size:var(--text-14);color:var(--fg-1);cursor:pointer}
.report-category input:checked+span {background:var(--surface-invert);border-color:var(--surface-invert);color:var(--fg-invert)}
.report-category input:focus-visible+span {outline:3px solid var(--blue);outline-offset:3px}
[data-moderation-report-form] small {display:block;margin-top:4px;font-size:var(--text-13);color:var(--fg-3)}
.toggle-row input:disabled+.switch {opacity:.55}
.field-error {color:var(--error);font-size:var(--text-label)}
.inline-error {display:flex;align-items:center;gap:6px;margin:6px 0 0}
.inline-error::before {content:'!';display:inline-grid;place-items:center;width:15px;height:15px;flex:none;border-radius:50%;background:var(--error);color:var(--fg-invert);font-size:10px;font-weight:700}
.panel,.card,.media-card {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.panel {padding:var(--space-6)}
.card-body {padding:var(--space-4)}
.card-body p {font-size:var(--text-label)}
.card-body,.card-footer,.media-footer,.page-heading,.list-row {overflow-wrap:anywhere;min-width:0}
.record-list {display:grid;gap:0;min-width:0}
.list-row {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.list-row>div {min-width:0;flex:1}
.list-row strong,.list-row-title {display:block;font-size:var(--text-label);font-weight:550;line-height:1.35;letter-spacing:0;color:var(--ink)}
.list-row-title a {color:var(--ink);font-weight:inherit}
.list-row.is-unread .list-row-title,.list-row.is-unread .list-row-title a {font-weight:650}
.list-row p,.list-row-meta {margin:2px 0 0;font-size:var(--text-meta);line-height:1.45;color:var(--muted)}
.list-row-actions {display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none}
.list-row button,.list-row .button {min-height:32px;padding:4px 10px}
@media (max-width:900px){.list-row button,.list-row .button{min-height:44px}}
.media-card video,.media-card audio {max-width:100%}
.table-wrap {min-width:0;max-width:100%;border-color:var(--line);border-radius:10.4px}
th {font-size:12.8px;font-weight:550;line-height:1.55;letter-spacing:normal;text-transform:none;background:var(--surface);padding:13.6px 16px;border:0}
td {font-size:14px;padding:16.8px 16px;border:0;border-top:1px solid var(--line);vertical-align:middle}
.notice-box {background:var(--accent-soft);color:var(--blue-dark);border-color:var(--line);padding:var(--space-4);border-radius:var(--radius-sm)}
.notice-box.warning,.notice-box.conflict {background:var(--warning-bg);color:var(--warning)}
.notice-box.error,.notice-box.denied {background:var(--error-bg);color:var(--error)}
.notice-box.success {background:var(--success-bg);color:var(--success)}
.badge {font-size:var(--text-meta);background:var(--accent-soft);color:var(--blue-dark);white-space:normal;overflow-wrap:anywhere}
.table-wrap .badge {white-space:nowrap;overflow-wrap:normal;width:max-content}
.badge.green {background:var(--success-bg);color:var(--success)}
.badge.yellow {background:var(--warning-bg);color:var(--warning)}
.badge.red {background:var(--error-bg);color:var(--error)}
.empty {padding:var(--space-12) var(--space-5);border-color:var(--line);background:var(--surface);overflow-wrap:anywhere}
.empty-symbol {background:var(--accent-soft);color:var(--blue)}
.empty h2 {font-size:var(--text-h2)}
.loading {padding:var(--space-12) var(--space-5);color:var(--muted)}
.spinner {border-color:var(--line);border-top-color:var(--blue)}
dialog {color:var(--ink);background:var(--surface);border-color:var(--line);border-radius:var(--radius-lg);padding:0;width:min(580px,calc(100vw - 32px));max-height:90dvh;box-shadow:var(--shadow-lg)}
dialog .dialog-heading {padding:1.2rem 1.5rem;border-bottom:1px solid var(--line);margin:0;gap:var(--space-4)}
dialog .dialog-heading h2 {font-family:var(--font);font-size:1.3rem;font-weight:650;line-height:1.35;letter-spacing:-.035em}
dialog .dialog-heading .icon-button {width:var(--control-height);height:var(--control-height);min-width:var(--control-height);min-height:var(--control-height)}
.dialog-body {padding:1.5rem;min-width:0}
@media(max-width:600px){dialog .dialog-heading,dialog .dialog-body{padding:1rem}}
@media(max-width:600px){.page-heading{margin-bottom:12px}.page-heading p{font-size:14.4px}.page-heading h1{font-size:20px}}
dialog::backdrop {background:var(--overlay);backdrop-filter:blur(3px)}
dialog.sheet {margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:0;width:min(36rem,100%)}
.pager-controls {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pager-pages {display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pager-page,.pager-pages .quiet,.pager-pages .button {
 min-width:44px;min-height:44px;padding:8px 10px;justify-content:center;
 font-variant-numeric:tabular-nums
}
.pager-page[aria-current=page] {
 display:inline-flex;align-items:center;justify-content:center;
 border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--blue-dark);font-weight:650
}
.pager-gap {display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--muted)}
.library-pagination,.discover-pagination,.blog-pagination,[data-collection-next] {
 display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);
 font-size:var(--text-label);color:var(--muted);padding:var(--space-6) 0
}
.primitive-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:var(--space-6)}
/* Keyboard keys, the command palette and the shortcut sheet. */
kbd {display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--surface);color:var(--muted);font:500 11px/1 var(--font);font-variant-numeric:tabular-nums}
dialog.command-palette {top:min(14vh,120px);margin:0 auto;width:min(640px,calc(100vw - 32px));max-height:min(560px,calc(100dvh - 2 * min(14vh,120px)));display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
dialog.command-palette:not([open]) {display:none}
dialog.command-palette::backdrop {background:rgb(16 16 32 / .42);backdrop-filter:blur(2px)}
.command-palette-search {display:flex;align-items:center;gap:12px;padding:6px 16px;border-bottom:1px solid var(--line)}
.command-palette-search>.icon {width:20px;height:20px;color:var(--muted);flex:none}
.command-palette-search input {flex:1;min-width:0;min-height:52px;padding:0;border:0;background:transparent;font-size:16px;box-shadow:none}
.command-palette-search input:focus,.command-palette-search input:focus-visible {outline:none}
.command-palette-list {flex:1;min-height:0;overflow:auto;padding:6px;overscroll-behavior:contain}
.command-palette-group+.command-palette-group {margin-top:4px}
.command-palette-heading {margin:8px 10px 4px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.command-palette-option {display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border-radius:var(--radius-sm);color:var(--ink);cursor:pointer;scroll-margin:6px}
.command-palette-option[aria-selected=true] {background:var(--accent-soft)}
.command-palette-option[aria-selected=true] .command-palette-glyph {color:var(--blue);border-color:color-mix(in srgb,var(--blue) 30%,var(--line))}
.command-palette-glyph {display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted)}
.command-palette-glyph .icon {width:16px;height:16px}
.command-palette-text {display:flex;align-items:baseline;gap:10px;flex:1;min-width:0}
.command-palette-label {font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.command-palette-hint {font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.command-palette-keys {display:flex;gap:3px;flex:none}
.command-palette-status:not(:empty) {padding:28px 16px;text-align:center;font-size:14px;color:var(--muted)}
.command-palette-footer {display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--line);background:var(--surface-raised);font-size:12px;color:var(--muted)}
.command-palette-footer span {display:inline-flex;align-items:center;gap:4px}
@media(max-width:600px){dialog.command-palette{top:12px;max-height:calc(100dvh - 24px)}.command-palette-footer,.command-palette-search kbd,.command-palette-hint{display:none}}
.shortcut-groups {display:grid;gap:20px}
.shortcut-groups h3 {margin:0 0 6px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.shortcut-groups dl {margin:0}
.shortcut-row {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;border-bottom:1px solid var(--line)}
.shortcut-row:last-child {border-bottom:0}
.shortcut-row dt {font-size:14px;color:var(--ink)}
.shortcut-row dd {display:flex;gap:4px;margin:0}
/* Horizontal strips that scroll show a soft edge only on the side with more content.
   The scroll timeline is inactive when nothing overflows, so the strip stays unmasked;
   browsers without scroll timelines keep the plain strip. */
@property --fade-start {syntax:'<length>';inherits:false;initial-value:0px}
@property --fade-end {syntax:'<length>';inherits:false;initial-value:0px}
@keyframes scroll-edge-fade {0% {--fade-start:0px;--fade-end:28px} 6% {--fade-start:28px} 94% {--fade-end:28px} 100% {--fade-start:28px;--fade-end:0px}}
@supports (animation-timeline:scroll(self inline)) {
 :is(.feather-x,.library-views,.discover-nav,.conversation-tabs,.chat-inspector-tabs,.settings-page .settings-nav) {
  mask-image:linear-gradient(to right,transparent,black var(--fade-start),black calc(100% - var(--fade-end)),transparent);
  animation:scroll-edge-fade linear both;animation-timeline:scroll(self inline)
 }
}

/* ── v3 "Studio" primitives (October 8). Calm zinc chrome, Inter, ink primary actions;
   the spark gradient is reserved for generative moments. Later component sheets may
   refine these, but should use the same tokens. ───────────────────────────────── */
body {font-size:15px;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11','ss01'}
h1,h2,h3,h4 {font-weight:600;letter-spacing:-.022em}
h1 {font-weight:600;letter-spacing:-.032em}
.page-heading h1 {font-weight:600;letter-spacing:-.034em;line-height:1.15}
.page-heading p {color:var(--muted);font-size:15px}
button,.button {border-radius:var(--radius-sm);font-weight:500;border-color:var(--line);box-shadow:var(--shadow-sm)}
button:hover,.button:hover {background:var(--surface-hover);border-color:var(--line-hover)}
button:active,.button:active {background:var(--surface-pressed)}
.quiet,.icon-button {box-shadow:none}
.quiet:hover,.icon-button:hover {background:var(--surface-hover);border-color:transparent}
.primary {background:var(--ink);border-color:var(--ink);color:var(--fg-invert);font-weight:550;box-shadow:0 1px 2px rgb(9 9 11 / .2),inset 0 1px 0 rgb(255 255 255 / .08)}
.primary:hover {background:var(--ink-hover);border-color:var(--ink-hover);color:var(--fg-invert)}
.primary:active {background:var(--ink-pressed);border-color:var(--ink-pressed);color:var(--fg-invert)}
.danger {border-color:color-mix(in srgb,var(--error) 45%,var(--line));box-shadow:none}
input,select,textarea {border-radius:var(--radius-sm);border-color:var(--line-strong)}
input:focus-visible,select:focus-visible,textarea:focus-visible {outline:none;border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
:focus-visible {outline:2.5px solid var(--blue);outline-offset:2px}
a {color:var(--blue)}
.panel,.card,.media-card {border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow-sm)}
.table-wrap {border-radius:var(--radius)}
th {font-size:12px;font-weight:500;color:var(--muted);background:var(--surface-raised)}
.badge {border-radius:var(--radius-pill);font-weight:500}
.notice-box {border-radius:var(--radius);color:var(--ink);background:var(--surface-raised);border:1px solid var(--line)}
/* Empty states: a soft spark glow behind the symbol, one line and the next step. */
.empty {position:relative;isolation:isolate;border-radius:var(--radius-lg);border-style:solid;border-color:var(--line);box-shadow:none;overflow:hidden}
.empty-symbol {position:relative;background:var(--surface-l1);color:var(--ink);box-shadow:var(--shadow-md);border:1px solid var(--line)}
.empty-symbol::before {content:'';position:absolute;inset:-28px;z-index:-1;border-radius:50%;background:var(--spark-soft);filter:blur(14px)}
.empty h2 {font-size:18px;font-weight:600;letter-spacing:-.02em}
.spinner {border-top-color:var(--ink)}
dialog {border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border-color:var(--line)}
dialog .dialog-heading h2 {font-weight:600;letter-spacing:-.025em}
dialog::backdrop {background:var(--overlay);backdrop-filter:blur(6px)}
.toggle-row input:checked+.switch {background:var(--ink)}
.pager-page[aria-current=page] {background:var(--ink);color:var(--fg-invert)}
/* Chips: pill filters and choices. Selected is ink, so state never relies on the accent hue. */
.chip {display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:500 13px/1.3 var(--font);box-shadow:none;cursor:pointer}
.chip:hover {border-color:var(--line-hover);background:var(--surface-hover)}
.chip[aria-pressed=true],.chip[aria-current] {background:var(--ink);border-color:var(--ink);color:var(--fg-invert)}
/* The spark: a gradient surface for the one generative action on screen. */
.spark-button {position:relative;isolation:isolate;border:0;color:var(--on-spark);background:var(--spark);box-shadow:0 6px 18px -6px color-mix(in srgb,var(--spark-2) 50%,transparent),inset 0 1px 0 rgb(255 255 255 / .25)}
.spark-button:hover {filter:saturate(1.15) brightness(1.04)}
.spark-button:disabled {background:var(--surface-pressed);color:var(--subtle);box-shadow:none;filter:none}
.spark-text {background:var(--spark);-webkit-background-clip:text;background-clip:text;color:transparent}
.command-palette-option[aria-selected=true] {background:var(--surface-hover)}
.command-palette-option[aria-selected=true] .command-palette-glyph {color:var(--ink);border-color:var(--line-hover)}
dialog.command-palette {border-radius:var(--radius-lg)}
.command-palette-search input:focus-visible {box-shadow:none;border-color:transparent}

/* ── Motion system (WAV-3252). Animate only opacity, transform, filter, colour and
   shadow; layout never animates. Popovers and dialogs enter and leave without JS:
   browsers without @starting-style keep the instant open. ─────────────────── */
:where([popover],dialog) {
 opacity:0;transform:translateY(4px) scale(.98);filter:blur(4px);transform-origin:var(--origin,50% 0);
 /* Enter only: closing is instant, so a closed menu or dialog never lingers on screen
    (and in the accessibility tree) while the next view takes over. */
 transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out);
}
/* Zero specificity: an always-visible [popover] (the desktop public nav) or a component's own motion wins. */
:where([popover]:popover-open,dialog[open]) {opacity:1;transform:none;filter:none}
@starting-style {:where([popover]:popover-open,dialog[open]) {opacity:0;transform:translateY(4px) scale(.98);filter:blur(4px)}}
dialog::backdrop {transition:opacity var(--dur-2) var(--ease-out)}
@starting-style {dialog[open]::backdrop {opacity:0}}
/* View Transitions (motion.js viewTransition): routes cross-fade #content while the rail stays put;
   the composer glides to its dock; a media tile morphs into the viewer (media-hero). Names apply
   only while a transition runs (html.view-transitioning), so they never create stacking contexts
   at rest. */
:root.view-transitioning {view-transition-name:none}
:root.view-transitioning #content {view-transition-name:content}
:root.view-transitioning .app-shell .sidebar {view-transition-name:rail}
:root.view-transitioning .composer-dock>.composer {view-transition-name:composer}
::view-transition-group(rail) {animation:none}
::view-transition-old(content),::view-transition-new(content) {animation-duration:var(--dur-2);animation-timing-function:var(--ease-standard)}
::view-transition-group(composer),::view-transition-group(media-hero) {animation-duration:var(--dur-3);animation-timing-function:var(--ease-out)}
/* Vertical scroll feathering: a scroll-driven mask, only while content overflows. */
@property --feather-top {syntax:'<length>';inherits:false;initial-value:0px}
@property --feather-bottom {syntax:'<length>';inherits:false;initial-value:0px}
@keyframes feather-y {0% {--feather-top:0px;--feather-bottom:16px} 5%,95% {--feather-top:16px;--feather-bottom:16px} 100% {--feather-top:16px;--feather-bottom:0px}}
@supports (animation-timeline:scroll()) {
 :is(.feather-y,.conversation-scroll,.command-palette-list,.composer-add-menu,.account-menu) {mask-image:linear-gradient(to bottom,transparent,black var(--feather-top),black calc(100% - var(--feather-bottom)),transparent);animation:feather-y linear both;animation-timeline:scroll(self)}
}
/* Waiting text shimmers; live dots breathe; newly delivered media develops. */
.shimmer-text {background:linear-gradient(100deg,var(--fg-3) 0 35%,var(--fg-1) 50%,var(--fg-3) 65% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.4s linear infinite}
@keyframes shimmer {from {background-position:100% 0} to {background-position:-150% 0}}
.breathe {animation:breathe 1.8s var(--ease-standard) infinite}
@keyframes breathe {0%,100% {transform:scale(.85);opacity:.65} 50% {transform:scale(1.15);opacity:1}}
.develop {animation:develop 900ms var(--ease-out)}
@keyframes develop {from {opacity:0;filter:blur(12px);transform:scale(1.04)}}

/* The one reduced-motion block. Token-driven motion stops here; JS that starts motion
   asks motion.js reducedMotion(). Component lines below keep a still end state where
   an animation carried one. */
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after,*::backdrop {animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) {animation:none!important}
 :where([popover],dialog) {transform:none!important;filter:none!important}
 .shimmer-text {animation:none;background:none;color:var(--fg-2)}
 :root :is(.feather-y,.feather-x,.conversation-scroll,.command-palette-list,.composer-add-menu,.account-menu,.library-views,.discover-nav,.conversation-tabs,.chat-inspector-tabs,.settings-page .settings-nav) {animation:none;mask-image:none}
 /* :root raises these over the component sheets that load after primitives.css. */
 :root .empty-symbol::before {filter:none}
 :root .skeleton,:root .conversation-plate.is-loading,:root .conversation-thumb.is-loading,:root .status-chip.live .dot {animation:none}
 :root .stream-in {animation:none}
 :root .chat-inspector-reveal {animation:none;outline:3px solid var(--accent);outline-offset:4px}
 :root .home-mosaic-track {animation:none;transform:translateX(-12%)}
 :root .home-mosaic-row[data-row="1"] .home-mosaic-track {transform:translateX(-30%)}
 :root .library-bundle:hover .library-bundle-tile:nth-child(2) {transform:translateY(-7px) scale(.94)}
 :root .library-bundle:hover .library-bundle-tile:nth-child(3) {transform:translateY(-13px) scale(.88)}
 :root :is(.ad-sheet,.ad-sheet::backdrop,.ad-palette,.ad-find,.ad-rail .rail-row,.ad-steps li i,.ad-chip,.ad-tabs button,.ad-table tr) {transition:none}
}
/* Settings › Appearance › Reduce motion (WAV-3324): the same still states on any device.
   Generated from the block above; tests/test_appearance_settings.py keeps the two in step. */
 :root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after,:root[data-motion=reduce] *::backdrop {animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
 :root[data-motion=reduce]::view-transition-group(*),:root[data-motion=reduce]::view-transition-old(*),:root[data-motion=reduce]::view-transition-new(*) {animation:none!important}
 :root[data-motion=reduce] :where([popover],dialog) {transform:none!important;filter:none!important}
 :root[data-motion=reduce] .shimmer-text {animation:none;background:none;color:var(--fg-2)}
 :root[data-motion=reduce] :is(.feather-y,.feather-x,.conversation-scroll,.command-palette-list,.composer-add-menu,.account-menu,.library-views,.discover-nav,.conversation-tabs,.chat-inspector-tabs,.settings-page .settings-nav) {animation:none;mask-image:none}
 :root[data-motion=reduce] .empty-symbol::before {filter:none}
 :root[data-motion=reduce] .skeleton,:root[data-motion=reduce] .conversation-plate.is-loading,:root[data-motion=reduce] .conversation-thumb.is-loading,:root[data-motion=reduce] .status-chip.live .dot {animation:none}
 :root[data-motion=reduce] .stream-in {animation:none}
 :root[data-motion=reduce] .chat-inspector-reveal {animation:none;outline:3px solid var(--accent);outline-offset:4px}
 :root[data-motion=reduce] .home-mosaic-track {animation:none;transform:translateX(-12%)}
 :root[data-motion=reduce] .home-mosaic-row[data-row="1"] .home-mosaic-track {transform:translateX(-30%)}
 :root[data-motion=reduce] .library-bundle:hover .library-bundle-tile:nth-child(2) {transform:translateY(-7px) scale(.94)}
 :root[data-motion=reduce] .library-bundle:hover .library-bundle-tile:nth-child(3) {transform:translateY(-13px) scale(.88)}
 :root[data-motion=reduce] :is(.ad-sheet,.ad-sheet::backdrop,.ad-palette,.ad-find,.ad-rail .rail-row,.ad-steps li i,.ad-chip,.ad-tabs button,.ad-table tr) {transition:none}