/* ==========================================================================
   Larsa — design tokens
   GENERATED FILE. Edit build/theme.py and re-run it; edits here are lost.

   Three theme blocks are emitted from one palette:
     :root                                     light, the base definition
     @media (prefers-color-scheme: dark)       the OS setting, guarded so an
                                               explicit light choice still wins
     :root[data-theme="dark"]                  the in-app toggle

   No colour is ever defined only inside a media query, so a browser that
   reports no preference still gets a complete palette.
   ========================================================================== */

/* ── Faces ────────────────────────────────────────────────────────────────
   Three families, each loading only the scripts it actually covers. Latin
   text in Vazirmatn is legible but characterless, and Persian text in Inter
   does not exist at all, so the stacks are ordered per script rather than
   one list for everything. CJK and Indic fall through to the platform's own
   fonts -- bundling Noto for them would cost more than this whole panel.
   unicode-range keeps a Persian reader from downloading Inter and a Spanish
   reader from downloading Vazirmatn.
   ──────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-greek-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
                 U+03A3-03FF;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+200C-200D, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FEFF, U+0660-0669, U+06F0-06F9;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Scale, rhythm, motion ────────────────────────────────────────────── */

:root {
  /* Type. Inter first for Latin, Vazirmatn first for Arabic script; the
     unicode-range split above means the browser picks per character, so one
     stack serves both and a mixed-script line stays consistent. */
  --font-sans: "Inter", "Vazirmatn", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
               "Noto Sans Arabic", "Noto Sans SC", "Noto Sans JP",
               "Noto Sans Devanagari", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-arabic: "Vazirmatn", "Noto Naskh Arabic", "Noto Sans Arabic",
                 "Segoe UI", Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono",
               Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-display: var(--font-sans);

  /* A modular scale at roughly 1.2, snapped to whole pixels at 16px root so
     nothing lands on a half-pixel and blurs. */
  --fs-3xs: 0.6875rem; /* 11 */
  --fs-2xs: 0.75rem;   /* 12 */
  --fs-xs:  0.8125rem; /* 13 */
  --fs-sm:  0.875rem;  /* 14 */
  --fs-md:  0.9375rem; /* 15 — UI body */
  --fs-base:1rem;      /* 16 — prose body */
  --fs-lg:  1.125rem;  /* 18 */
  --fs-xl:  1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36 */
  --fs-4xl: 2.875rem;  /* 46 */
  --fs-5xl: 3.75rem;   /* 60 */
  --fs-6xl: 4.75rem;   /* 76 */

  /* Arabic-script text needs more leading than Latin at the same size, and
     more still when it carries diacritics. --lh-body is the floor for prose;
     [dir="rtl"] raises the whole set (see base.css). */
  --lh-none: 1; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5;
  --lh-body: 1.65; --lh-loose: 1.85;

  --fw-light: 300; --fw-reg: 400; --fw-med: 500;
  --fw-semi: 600; --fw-bold: 700; --fw-black: 800;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;

  /* Space — 4px base, named by step not by pixel so a density change is one
     edit rather than a search-and-replace. */
  --s-0: 0; --s-px: 1px;
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-7: 2rem;    --s-8: 2.5rem;
  --s-9: 3rem;    --s-10: 4rem;   --s-11: 5rem;   --s-12: 6rem;
  --s-13: 8rem;   --s-14: 10rem;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 24px; --r-full: 999px;

  /* Controls. One height per density so a button, an input and a select on
     the same row line up without per-component nudging. */
  --h-xs: 1.625rem;  /* 26 */
  --h-sm: 2rem;      /* 32 */
  --h-md: 2.375rem;  /* 38 */
  --h-lg: 2.75rem;   /* 44 */
  --h-xl: 3.25rem;   /* 52 */

  --content-narrow: 44rem;
  --content-prose: 52rem;
  --content: 68rem;
  --content-wide: 82rem;
  --content-full: 96rem;

  --sidebar-w: 15.5rem;
  --sidebar-w-collapsed: 3.75rem;
  --topbar-h: 3.5rem;
  --docs-nav-w: 16rem;
  --docs-toc-w: 14rem;

  /* Motion. Durations are short on purpose: an interface that acknowledges a
     click in 120ms feels built, one that takes 400ms feels animated. */
  --dur-instant: 60ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --dur-slower: 420ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  --z-base: 0; --z-sticky: 100; --z-nav: 200; --z-dropdown: 300;
  --z-overlay: 400; --z-dialog: 410; --z-toast: 500; --z-tooltip: 600;
}

/* ── Ramps ────────────────────────────────────────────────────────────────── */

:root {
  --w-0: #FFFFFF;
  --w-25: #FDFDFB;
  --w-50: #F8F7F4;
  --w-100: #F1EFEA;
  --w-150: #E9E6E0;
  --w-200: #DEDAD2;
  --w-300: #C6C1B6;
  --w-400: #A7A196;
  --w-500: #827C71;
  --w-600: #635E55;
  --w-700: #4A463F;
  --w-800: #33302B;
  --w-850: #262421;
  --w-900: #1B1A18;
  --w-950: #121211;
  --w-1000: #0A0A09;
  --c-0: #FFFFFF;
  --c-25: #FAFAFA;
  --c-50: #F4F4F3;
  --c-100: #EBEBEA;
  --c-150: #E1E1DF;
  --c-200: #D3D3D0;
  --c-300: #B6B6B2;
  --c-400: #93938E;
  --c-500: #71716C;
  --c-600: #565651;
  --c-700: #3F3F3B;
  --c-800: #2B2B28;
  --c-850: #212120;
  --c-900: #171716;
  --c-950: #0F0F0E;
  --c-1000: #080808;
  --clay-50: #FEF5EF;
  --clay-100: #FCE7D8;
  --clay-200: #F8CCAF;
  --clay-300: #F2A87C;
  --clay-400: #EA8248;
  --clay-500: #DB6224;
  --clay-600: #BE4A13;
  --clay-700: #9C3A12;
  --clay-800: #7B2F14;
  --clay-900: #652913;
  --clay-950: #37130A;
  --lapis-50: #EEF3FF;
  --lapis-100: #DBE5FF;
  --lapis-200: #BFD0FF;
  --lapis-300: #94B0FF;
  --lapis-400: #6588FB;
  --lapis-500: #3F63F0;
  --lapis-600: #2A48D6;
  --lapis-700: #2338AC;
  --lapis-800: #22328A;
  --lapis-900: #22306D;
  --lapis-950: #171E42;
  --green-50: #EDF8F0;
  --green-100: #D3EEDB;
  --green-200: #A8DDB9;
  --green-300: #71C48F;
  --green-400: #42A468;
  --green-500: #268650;
  --green-600: #186B40;
  --green-700: #155636;
  --green-800: #14442C;
  --green-900: #123826;
  --green-950: #081E14;
  --gold-50: #FDF6E3;
  --gold-100: #F9E7B8;
  --gold-200: #F2CE73;
  --gold-300: #E7B032;
  --gold-400: #CE9310;
  --gold-500: #AA760A;
  --gold-600: #875C0B;
  --gold-700: #6D4A0E;
  --gold-800: #5A3D11;
  --gold-900: #4C3410;
  --gold-950: #291B06;
  --red-50: #FEF2F2;
  --red-100: #FCDFDF;
  --red-200: #F8C0C0;
  --red-300: #F09393;
  --red-400: #E36262;
  --red-500: #D03B3B;
  --red-600: #B02525;
  --red-700: #911F1F;
  --red-800: #771E1E;
  --red-900: #631D1D;
  --red-950: #360C0C;
  --violet-300: #C4A2F5;
  --violet-400: #A87BEC;
  --violet-500: #8B55DD;
  --violet-600: #7340C0;
  --teal-300: #6FD3CB;
  --teal-400: #35B5AC;
  --teal-500: #199490;
  --teal-600: #137774;
}

/* ── Light: the base definition of every role ────────────────────────────── */

:root {
  color-scheme: light;
  --bg: var(--w-25);
  --bg-subtle: var(--w-50);
  --bg-sunk: var(--w-100);
  --surface: var(--w-0);
  --surface-2: var(--w-0);
  --surface-3: var(--w-0);
  --surface-hover: var(--w-50);
  --surface-active: var(--w-100);
  --overlay: rgba(27, 26, 24, 0.42);
  --border: var(--w-150);
  --border-soft: var(--w-100);
  --border-strong: var(--w-200);
  --border-hover: var(--w-300);
  --text: var(--w-900);
  --text-strong: var(--w-1000);
  --text-muted: var(--w-600);
  --text-subtle: var(--w-500);
  --text-faint: var(--w-400);
  --text-invert: var(--w-0);
  --text-on-accent: #FFFFFF;
  --accent: var(--clay-600);
  --accent-hover: var(--clay-700);
  --accent-active: var(--clay-800);
  --accent-soft: var(--clay-50);
  --accent-soft-hover: var(--clay-100);
  --accent-soft-fg: var(--clay-700);
  --accent-border: var(--clay-200);
  --accent-line: var(--clay-600);
  --link: var(--clay-700);
  --link-hover: var(--clay-800);
  --link-visited: var(--clay-800);
  --success: var(--green-600);
  --success-fg: #FFFFFF;
  --success-soft: var(--green-50);
  --success-soft-fg: var(--green-700);
  --success-border: var(--green-200);
  --warning: var(--gold-500);
  --warning-fg: #FFFFFF;
  --warning-soft: var(--gold-50);
  --warning-soft-fg: var(--gold-700);
  --warning-border: var(--gold-200);
  --danger: var(--red-600);
  --danger-fg: #FFFFFF;
  --danger-soft: var(--red-50);
  --danger-soft-fg: var(--red-700);
  --danger-border: var(--red-200);
  --info: var(--lapis-600);
  --info-fg: #FFFFFF;
  --info-soft: var(--lapis-50);
  --info-soft-fg: var(--lapis-700);
  --info-border: var(--lapis-200);
  --focus: var(--clay-500);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--clay-500) 32%, transparent);
  --shadow-xs: 0 1px 2px rgba(27, 26, 24, 0.06);
  --shadow-sm: 0 1px 3px rgba(27, 26, 24, 0.07), 0 1px 2px rgba(27, 26, 24, 0.05);
  --shadow-md: 0 4px 12px rgba(27, 26, 24, 0.08), 0 1px 3px rgba(27, 26, 24, 0.05);
  --shadow-lg: 0 12px 32px rgba(27, 26, 24, 0.11), 0 2px 8px rgba(27, 26, 24, 0.06);
  --shadow-xl: 0 24px 64px rgba(27, 26, 24, 0.14), 0 4px 12px rgba(27, 26, 24, 0.07);
  --code-bg: var(--w-950);
  --code-bg-inline: var(--w-100);
  --code-fg: #E8E6E1;
  --code-line: rgba(255,255,255,0.07);
  --code-gutter: rgba(255,255,255,0.30);
  --code-hl: rgba(234,130,72,0.13);
  --syn-key: #F2A87C;
  --syn-str: #8FD3A6;
  --syn-num: #E7B032;
  --syn-com: #7E7A72;
  --syn-fn: #94B0FF;
  --syn-var: #E8E6E1;
  --syn-type: #C4A2F5;
  --syn-punc: #A7A196;
  --syn-attr: #6FD3CB;
  --series-1: var(--clay-500);
  --series-2: var(--lapis-500);
  --series-3: var(--gold-400);
  --series-4: var(--teal-500);
  --series-5: var(--violet-500);
  --series-6: var(--green-500);
  --sun-1: var(--gold-300);
  --sun-2: var(--clay-500);
  --sun-3: var(--clay-800);
  --scrollbar: var(--w-300);
  --scrollbar-hover: var(--w-400);
  --selection: color-mix(in srgb, var(--clay-300) 45%, transparent);
}

/* ── Dark: OS preference. Guarded so an explicit light choice wins ────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--c-1000);
    --bg-subtle: var(--c-950);
    --bg-sunk: #050505;
    --surface: var(--c-950);
    --surface-2: var(--c-900);
    --surface-3: var(--c-850);
    --surface-hover: var(--c-900);
    --surface-active: var(--c-850);
    --overlay: rgba(0, 0, 0, 0.66);
    --border: #262624;
    --border-soft: #1C1C1B;
    --border-strong: #33332F;
    --border-hover: #454541;
    --text: #EDEDEA;
    --text-strong: #FFFFFF;
    --text-muted: #A5A59F;
    --text-subtle: #82827C;
    --text-faint: #5F5F5A;
    --text-invert: var(--c-1000);
    --text-on-accent: #1B0D05;
    --accent: var(--clay-400);
    --accent-hover: var(--clay-300);
    --accent-active: var(--clay-200);
    --accent-soft: color-mix(in srgb, var(--clay-500) 15%, var(--c-950));
    --accent-soft-hover: color-mix(in srgb, var(--clay-500) 24%, var(--c-950));
    --accent-soft-fg: var(--clay-300);
    --accent-border: color-mix(in srgb, var(--clay-500) 38%, var(--c-950));
    --accent-line: var(--clay-400);
    --link: var(--clay-300);
    --link-hover: var(--clay-200);
    --link-visited: var(--clay-300);
    --success: var(--green-300);
    --success-fg: #04160C;
    --success-soft: color-mix(in srgb, var(--green-500) 18%, var(--c-950));
    --success-soft-fg: var(--green-200);
    --success-border: color-mix(in srgb, var(--green-500) 40%, var(--c-950));
    --warning: var(--gold-300);
    --warning-fg: #1A1102;
    --warning-soft: color-mix(in srgb, var(--gold-500) 20%, var(--c-950));
    --warning-soft-fg: var(--gold-200);
    --warning-border: color-mix(in srgb, var(--gold-500) 42%, var(--c-950));
    --danger: var(--red-400);
    --danger-fg: #1B0505;
    --danger-soft: color-mix(in srgb, var(--red-500) 18%, var(--c-950));
    --danger-soft-fg: var(--red-200);
    --danger-border: color-mix(in srgb, var(--red-500) 40%, var(--c-950));
    --info: var(--lapis-300);
    --info-fg: #050B22;
    --info-soft: color-mix(in srgb, var(--lapis-500) 20%, var(--c-950));
    --info-soft-fg: var(--lapis-200);
    --info-border: color-mix(in srgb, var(--lapis-500) 42%, var(--c-950));
    --focus: var(--clay-400);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--clay-400) 38%, transparent);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.55);
    --shadow-md: 0 6px 16px rgba(0,0,0,0.6);
    --shadow-lg: 0 16px 40px rgba(0,0,0,0.68);
    --shadow-xl: 0 28px 72px rgba(0,0,0,0.75);
    --code-bg: #0C0C0B;
    --code-bg-inline: #1E1E1C;
    --code-fg: #E4E2DD;
    --code-line: rgba(255,255,255,0.06);
    --code-gutter: rgba(255,255,255,0.26);
    --code-hl: rgba(234,130,72,0.11);
    --syn-key: #F2A87C;
    --syn-str: #8FD3A6;
    --syn-num: #E7B032;
    --syn-com: #6E6A63;
    --syn-fn: #94B0FF;
    --syn-var: #E4E2DD;
    --syn-type: #C4A2F5;
    --syn-punc: #93938E;
    --syn-attr: #6FD3CB;
    --series-1: var(--clay-400);
    --series-2: var(--lapis-400);
    --series-3: var(--gold-300);
    --series-4: var(--teal-400);
    --series-5: var(--violet-400);
    --series-6: var(--green-300);
    --sun-1: var(--gold-400);
    --sun-2: var(--clay-500);
    --sun-3: var(--clay-900);
    --scrollbar: #3A3A36;
    --scrollbar-hover: #4E4E49;
    --selection: color-mix(in srgb, var(--clay-500) 40%, transparent);
  }
}

/* ── Dark: in-app toggle. Same values, higher specificity ────────────── */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--c-1000);
  --bg-subtle: var(--c-950);
  --bg-sunk: #050505;
  --surface: var(--c-950);
  --surface-2: var(--c-900);
  --surface-3: var(--c-850);
  --surface-hover: var(--c-900);
  --surface-active: var(--c-850);
  --overlay: rgba(0, 0, 0, 0.66);
  --border: #262624;
  --border-soft: #1C1C1B;
  --border-strong: #33332F;
  --border-hover: #454541;
  --text: #EDEDEA;
  --text-strong: #FFFFFF;
  --text-muted: #A5A59F;
  --text-subtle: #82827C;
  --text-faint: #5F5F5A;
  --text-invert: var(--c-1000);
  --text-on-accent: #1B0D05;
  --accent: var(--clay-400);
  --accent-hover: var(--clay-300);
  --accent-active: var(--clay-200);
  --accent-soft: color-mix(in srgb, var(--clay-500) 15%, var(--c-950));
  --accent-soft-hover: color-mix(in srgb, var(--clay-500) 24%, var(--c-950));
  --accent-soft-fg: var(--clay-300);
  --accent-border: color-mix(in srgb, var(--clay-500) 38%, var(--c-950));
  --accent-line: var(--clay-400);
  --link: var(--clay-300);
  --link-hover: var(--clay-200);
  --link-visited: var(--clay-300);
  --success: var(--green-300);
  --success-fg: #04160C;
  --success-soft: color-mix(in srgb, var(--green-500) 18%, var(--c-950));
  --success-soft-fg: var(--green-200);
  --success-border: color-mix(in srgb, var(--green-500) 40%, var(--c-950));
  --warning: var(--gold-300);
  --warning-fg: #1A1102;
  --warning-soft: color-mix(in srgb, var(--gold-500) 20%, var(--c-950));
  --warning-soft-fg: var(--gold-200);
  --warning-border: color-mix(in srgb, var(--gold-500) 42%, var(--c-950));
  --danger: var(--red-400);
  --danger-fg: #1B0505;
  --danger-soft: color-mix(in srgb, var(--red-500) 18%, var(--c-950));
  --danger-soft-fg: var(--red-200);
  --danger-border: color-mix(in srgb, var(--red-500) 40%, var(--c-950));
  --info: var(--lapis-300);
  --info-fg: #050B22;
  --info-soft: color-mix(in srgb, var(--lapis-500) 20%, var(--c-950));
  --info-soft-fg: var(--lapis-200);
  --info-border: color-mix(in srgb, var(--lapis-500) 42%, var(--c-950));
  --focus: var(--clay-400);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--clay-400) 38%, transparent);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.55);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.68);
  --shadow-xl: 0 28px 72px rgba(0,0,0,0.75);
  --code-bg: #0C0C0B;
  --code-bg-inline: #1E1E1C;
  --code-fg: #E4E2DD;
  --code-line: rgba(255,255,255,0.06);
  --code-gutter: rgba(255,255,255,0.26);
  --code-hl: rgba(234,130,72,0.11);
  --syn-key: #F2A87C;
  --syn-str: #8FD3A6;
  --syn-num: #E7B032;
  --syn-com: #6E6A63;
  --syn-fn: #94B0FF;
  --syn-var: #E4E2DD;
  --syn-type: #C4A2F5;
  --syn-punc: #93938E;
  --syn-attr: #6FD3CB;
  --series-1: var(--clay-400);
  --series-2: var(--lapis-400);
  --series-3: var(--gold-300);
  --series-4: var(--teal-400);
  --series-5: var(--violet-400);
  --series-6: var(--green-300);
  --sun-1: var(--gold-400);
  --sun-2: var(--clay-500);
  --sun-3: var(--clay-900);
  --scrollbar: #3A3A36;
  --scrollbar-hover: #4E4E49;
  --selection: color-mix(in srgb, var(--clay-500) 40%, transparent);
}

/* Density. A table-heavy console reads better tight; the marketing site and
   the docs never opt in. Set on a container, not globally. */
[data-density="compact"] {
  --h-md: 2.125rem; --h-lg: 2.5rem;
  --s-4: 0.875rem; --s-5: 1rem; --s-6: 1.25rem; --s-7: 1.5rem;
}

/* Honour the OS request to stop moving. Durations go to ~0 rather than to
   exactly 0: a zero-length transition never fires transitionend, and a few
   components wait on it before removing themselves from the DOM. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms;
    --dur-slow: 1ms; --dur-slower: 1ms;
  }
}