/* Generated by scripts/site-tokens.mjs from src/styles/tokens.css — do not edit.
   Run `npm run site:tokens`; `tests/site.mjs` fails when this is stale.

   The page and a screenshot of the program have to agree, in both faces and in
   how everything moves, so the values are the app's own and are copied rather
   than restated. The glass family lives on `body` in the app because a material
   is swapped there; the site has one material, so it is all one face here. */
:root {
  --update-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .4 11.4 6H8.2v3H3.8V6H.6z'/%3E%3Crect x='.8' y='10' width='10.4' height='1.8' rx='.9'/%3E%3C/svg%3E");
  --bg: #f5f4f1;
  --surface: #ffffff;
  --surface-alt: #eeece6;
  --surface-raised: #ffffff;
  --border: #dedad0;
  --border-soft: #e8e5dd;
  --text: #1c2024;
  --text-muted: color-mix(in srgb, var(--text) 80%, var(--bg));
  --text-faint: color-mix(in srgb, var(--text) 55%, var(--bg));
  --accent: #2b4a6f;
  --accent-hover: #213a58;
  --accent-soft: #e2eaf3;
  --accent-contrast: #f7fafc;
  --math-accent: #3f7a6b;
  --math-soft: #e3efec;
  --danger: #a4453a;
  --ok: #3f7a52;
  --warn: #b4842b;
  --chrome-top: 96px;
  --chrome-row: 48px;
  --chrome-sub: rgba(0, 0, 0, 0.13);
  --chrome-sub-cast: inset 0 7px 9px -7px rgba(0, 0, 0, 0.45);
  --tab-bar-h: 33px;
  --rail-top: calc(var(--chrome-top) + 8px);
  --panel-top: var(--chrome-top);
  --chrome-bottom: 28px;
  --shadow-sm: 0 1px 2px rgba(28, 32, 36, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 32, 36, 0.08);
  --shadow-lg: 0 8px 24px rgba(28, 32, 36, 0.1), 0 32px 64px -16px rgba(28, 32, 36, 0.22);
  --paper: #ffffff;
  --paper-edge: rgba(28, 32, 36, 0.08);
  --page-h: 1123px;
  --page-rule: rgba(28, 32, 36, 0.1);
  --page-gutter-shade: rgba(28, 32, 36, 0.2);
  --page-gutter-line: rgba(28, 32, 36, 0.12);
  --scrollbar: rgba(28, 32, 36, 0.16);
  --scrollbar-hover: rgba(28, 32, 36, 0.3);
  --selection: color-mix(in srgb, #2b4a6f 22%, transparent);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-control: var(--radius-sm);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --radius-lg: 14px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Heebo, Assistant, "Noto Sans Hebrew", Arial, sans-serif;
  --font-body-en: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body-he: "Frank Ruhl Libre", "Frank Ruehl CLM", "Noto Serif Hebrew", "David CLM", David, "New Peninim MT", "Arial Hebrew", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --dur-instant: 0.09s;
  --dur-fast: 0.14s;
  --dur-base: 0.19s;
  --dur-slow: 0.26s;
  --dur-fold: 0.56s;
  --ease-out: cubic-bezier(0.22, 0.7, 0.3, 1);
  --ease-in: cubic-bezier(0.45, 0, 0.9, 0.55);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-move: 0.24s;
  --ease-spring: cubic-bezier(0.32, 1.12, 0.34, 1);
  --rv-x: -9999px;
  --rv-y: -9999px;
  --rv-attach: scroll;
  --rv-a: 0;
  --reveal-edge-span: 200px;
  --reveal-glow-span: 180px;
  --reveal-ring: 1px;
  --rv-ring-r: calc(var(--radius-control) + var(--reveal-ring));
  --glass: color-mix(in srgb, var(--surface-raised) 86%, var(--accent));
  --glass-blur: 14px;
  --glass-saturate: 140%;
  --glass-rim: color-mix(in srgb, #fff 30%, transparent);
  --glass-lip: color-mix(in srgb, #fff 45%, transparent);
  --glass-foot: color-mix(in srgb, var(--text) 6%, transparent);
  --glass-sheen: linear-gradient( to bottom, color-mix(in srgb, #fff 9%, transparent) 0%, transparent 42% );
  --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  --glass-shadow: 0 1px 2px rgba(28, 32, 36, 0.06), 0 24px 52px rgba(28, 32, 36, 0.18);
  --chrome-cast: 0 1px 0 var(--border), 0 6px 16px -10px rgba(0, 0, 0, 0.35);
  --glass-hover: color-mix(in srgb, var(--text) 8%, transparent);
  --rv-tint: var(--accent);
  --rv-edge-s: 1.5;
  --rv-glow-s: 3.2;
  --reveal-edge: color-mix(in srgb, var(--rv-tint) calc(1% * 42 * var(--rv-edge-s)), transparent);
  --reveal-glow: color-mix(in srgb, var(--rv-tint) calc(1% * 6 * var(--rv-glow-s)), transparent);
  --field-inset: inset 0 0.5px 1px -0.5px color-mix(in srgb, var(--text) 9%, transparent);
  --control-lift: 0 2px 4px -2px color-mix(in srgb, var(--text) 18%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
  --rv-ring-img: radial-gradient(circle closest-side, var(--reveal-edge) 0%, color-mix(in srgb, var(--reveal-edge) 60%, transparent) 12%, color-mix(in srgb, var(--reveal-edge) 32%, transparent) 30%, color-mix(in srgb, var(--reveal-edge) 16%, transparent) 55%, color-mix(in srgb, var(--reveal-edge) 6%, transparent) 80%, transparent 100%);
  --rv-glow-img: radial-gradient(circle closest-side, var(--reveal-glow) 0%, color-mix(in srgb, var(--reveal-glow) 72%, transparent) 18%, color-mix(in srgb, var(--reveal-glow) 40%, transparent) 42%, color-mix(in srgb, var(--reveal-glow) 16%, transparent) 70%, transparent 100%);
  --rv-glow-white: radial-gradient(circle closest-side, color-mix(in srgb, #fff 11%, transparent) 0%, color-mix(in srgb, #fff 8%, transparent) 18%, color-mix(in srgb, #fff 4.5%, transparent) 42%, color-mix(in srgb, #fff 1.8%, transparent) 70%, transparent 100%);
  --panel-solid: color-mix(in srgb, var(--glass) 90%, var(--bg));
  --glass-on: color-mix(in srgb, var(--accent) 13%, transparent);
  --glass-edge: color-mix(in srgb, var(--text) 10%, transparent);
  --control-hover: color-mix(in srgb, var(--text) 4%, transparent);
  --control-hover-strong: var(--glass-on);
  --field-bg: color-mix(in srgb, var(--text) 5%, transparent);
  --field-edge: color-mix(in srgb, var(--text) 11%, transparent);
  --glass-body: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 22%, transparent), color-mix(in srgb, var(--glass) 13%, transparent) );
  --glass-body-chrome: linear-gradient( to bottom, color-mix(in srgb, color-mix(in srgb, var(--glass) 44%, var(--paper)) 94%, transparent), color-mix(in srgb, color-mix(in srgb, var(--glass) 33%, var(--paper)) 86%, transparent) );
  --glass-body-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 80%, var(--paper)), color-mix(in srgb, var(--glass) 70%, var(--paper)) );
  --glass-body-reading: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 80%, transparent), color-mix(in srgb, var(--glass) 70%, transparent) );
  --glass-body-chrome-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 86%, var(--paper)), color-mix(in srgb, var(--glass) 78%, var(--paper)) );
  --glass-body-reading-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 90%, var(--paper)), color-mix(in srgb, var(--glass) 82%, var(--paper)) );
  /* The site's own, which the app has no need of: the measure of a column of
     prose, and the face the front page sets its paragraphs in. */
  --wrap: 1080px;
  --font-body: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* **The face the reader chose, and the one their system asks for.** The button
   stamps `data-theme`; with nothing stamped the system decides, which is the
   three-state rule every page in this project follows. */
[data-theme="dark"] {
  --bg: #14171b;
  --surface: #1b1f24;
  --surface-alt: #20252b;
  --surface-raised: #242a31;
  --border: #2c323a;
  --border-soft: #262c33;
  --text: #e7e7e4;
  --text-muted: color-mix(in srgb, var(--text) 80%, var(--bg));
  --text-faint: color-mix(in srgb, var(--text) 55%, var(--bg));
  --accent: #7ca7d1;
  --accent-hover: #94b9dd;
  --accent-soft: #22344a;
  --accent-contrast: #0e1620;
  --math-accent: #6fbfa9;
  --math-soft: #1c332e;
  --danger: #d98177;
  --ok: #79c396;
  --warn: #d9b271;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  --paper: #1e2329;
  --paper-edge: rgba(255, 255, 255, 0.06);
  --page-rule: rgba(255, 255, 255, 0.09);
  --page-gutter-shade: rgba(0, 0, 0, 0.55);
  --page-gutter-line: rgba(255, 255, 255, 0.07);
  --scrollbar: rgba(255, 255, 255, 0.14);
  --scrollbar-hover: rgba(255, 255, 255, 0.26);
  --selection: color-mix(in srgb, #7ea6d4 30%, transparent);
  --glass: color-mix(in srgb, var(--surface-raised) 88%, var(--accent));
  --glass-rim: color-mix(in srgb, #fff 14%, transparent);
  --glass-lip: color-mix(in srgb, #fff 9%, transparent);
  --glass-foot: rgba(0, 0, 0, 0.35);
  --glass-sheen: linear-gradient(to bottom, color-mix(in srgb, #fff 5%, transparent) 0%, transparent 42%);
  --glass-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
  --glass-hover: color-mix(in srgb, #fff 11%, transparent);
  --rv-tint: var(--accent);
  --rv-edge-s: 1.35;
  --rv-glow-s: 2.6;
  --reveal-edge: color-mix(in srgb, var(--rv-tint) calc(1% * 38 * var(--rv-edge-s)), transparent);
  --reveal-glow: color-mix(in srgb, var(--rv-tint) calc(1% * 7 * var(--rv-glow-s)), transparent);
  --rv-glow-white: radial-gradient(circle closest-side, color-mix(in srgb, #fff 34%, transparent) 0%, color-mix(in srgb, #fff 24%, transparent) 18%, color-mix(in srgb, #fff 13%, transparent) 42%, color-mix(in srgb, #fff 5%, transparent) 70%, transparent 100%);
  --field-inset: inset 0 0.5px 1px -0.5px rgba(0, 0, 0, 0.3);
  --control-lift: 0 2px 5px -2px rgba(0, 0, 0, 0.5), 0 0 10px color-mix(in srgb, var(--accent) 19%, transparent), 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  --control-hover: color-mix(in srgb, #fff 5%, transparent);
  --panel-solid: color-mix(in srgb, var(--glass) 86%, var(--bg));
  --glass-on: color-mix(in srgb, var(--accent) 24%, transparent);
  --field-bg: color-mix(in srgb, #fff 6%, transparent);
  --field-edge: color-mix(in srgb, #fff 9%, transparent);
  --glass-edge: color-mix(in srgb, #fff 12%, transparent);
  --glass-body: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 29%, transparent), color-mix(in srgb, var(--glass) 20%, transparent) );
  --glass-body-chrome: linear-gradient( to bottom, color-mix(in srgb, color-mix(in srgb, var(--glass) 50%, var(--paper)) 94%, transparent), color-mix(in srgb, color-mix(in srgb, var(--glass) 38%, var(--paper)) 86%, transparent) );
  --glass-body-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 83%, var(--paper)), color-mix(in srgb, var(--glass) 73%, var(--paper)) );
  --glass-body-reading: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 83%, transparent), color-mix(in srgb, var(--glass) 73%, transparent) );
  --glass-body-chrome-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 89%, var(--paper)), color-mix(in srgb, var(--glass) 81%, var(--paper)) );
  --glass-body-reading-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 93%, var(--paper)), color-mix(in srgb, var(--glass) 85%, var(--paper)) );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b;
    --surface: #1b1f24;
    --surface-alt: #20252b;
    --surface-raised: #242a31;
    --border: #2c323a;
    --border-soft: #262c33;
    --text: #e7e7e4;
    --text-muted: color-mix(in srgb, var(--text) 80%, var(--bg));
    --text-faint: color-mix(in srgb, var(--text) 55%, var(--bg));
    --accent: #7ca7d1;
    --accent-hover: #94b9dd;
    --accent-soft: #22344a;
    --accent-contrast: #0e1620;
    --math-accent: #6fbfa9;
    --math-soft: #1c332e;
    --danger: #d98177;
    --ok: #79c396;
    --warn: #d9b271;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 40px 80px -20px rgba(0, 0, 0, 0.6);
    --paper: #1e2329;
    --paper-edge: rgba(255, 255, 255, 0.06);
    --page-rule: rgba(255, 255, 255, 0.09);
    --page-gutter-shade: rgba(0, 0, 0, 0.55);
    --page-gutter-line: rgba(255, 255, 255, 0.07);
    --scrollbar: rgba(255, 255, 255, 0.14);
    --scrollbar-hover: rgba(255, 255, 255, 0.26);
    --selection: color-mix(in srgb, #7ea6d4 30%, transparent);
    --glass: color-mix(in srgb, var(--surface-raised) 88%, var(--accent));
    --glass-rim: color-mix(in srgb, #fff 14%, transparent);
    --glass-lip: color-mix(in srgb, #fff 9%, transparent);
    --glass-foot: rgba(0, 0, 0, 0.35);
    --glass-sheen: linear-gradient(to bottom, color-mix(in srgb, #fff 5%, transparent) 0%, transparent 42%);
    --glass-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
    --glass-hover: color-mix(in srgb, #fff 11%, transparent);
    --rv-tint: var(--accent);
    --rv-edge-s: 1.35;
    --rv-glow-s: 2.6;
    --reveal-edge: color-mix(in srgb, var(--rv-tint) calc(1% * 38 * var(--rv-edge-s)), transparent);
    --reveal-glow: color-mix(in srgb, var(--rv-tint) calc(1% * 7 * var(--rv-glow-s)), transparent);
    --rv-glow-white: radial-gradient(circle closest-side, color-mix(in srgb, #fff 34%, transparent) 0%, color-mix(in srgb, #fff 24%, transparent) 18%, color-mix(in srgb, #fff 13%, transparent) 42%, color-mix(in srgb, #fff 5%, transparent) 70%, transparent 100%);
    --field-inset: inset 0 0.5px 1px -0.5px rgba(0, 0, 0, 0.3);
    --control-lift: 0 2px 5px -2px rgba(0, 0, 0, 0.5), 0 0 10px color-mix(in srgb, var(--accent) 19%, transparent), 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
    --control-hover: color-mix(in srgb, #fff 5%, transparent);
    --panel-solid: color-mix(in srgb, var(--glass) 86%, var(--bg));
    --glass-on: color-mix(in srgb, var(--accent) 24%, transparent);
    --field-bg: color-mix(in srgb, #fff 6%, transparent);
    --field-edge: color-mix(in srgb, #fff 9%, transparent);
    --glass-edge: color-mix(in srgb, #fff 12%, transparent);
    --glass-body: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 29%, transparent), color-mix(in srgb, var(--glass) 20%, transparent) );
    --glass-body-chrome: linear-gradient( to bottom, color-mix(in srgb, color-mix(in srgb, var(--glass) 50%, var(--paper)) 94%, transparent), color-mix(in srgb, color-mix(in srgb, var(--glass) 38%, var(--paper)) 86%, transparent) );
    --glass-body-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 83%, var(--paper)), color-mix(in srgb, var(--glass) 73%, var(--paper)) );
    --glass-body-reading: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 83%, transparent), color-mix(in srgb, var(--glass) 73%, transparent) );
    --glass-body-chrome-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 89%, var(--paper)), color-mix(in srgb, var(--glass) 81%, var(--paper)) );
    --glass-body-reading-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 93%, var(--paper)), color-mix(in srgb, var(--glass) 85%, var(--paper)) );
  }
}