/* Stryx Skills: the one token file of the glass world (2026-10-14).
   The site lives in one evening and carries its own ground: text always sits on a glass panel whose fill holds
   4.5 : 1 over the brightest sky behind it. Literal colours live only here. */
@font-face { font-family: "Didot Glass"; src: url("/assets/fonts/glass/didot-m42.woff2?v=20261016") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Didot Glass"; src: url("/assets/fonts/glass/didot-m42-italic.woff2?v=20261016") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Didot Text"; src: url("/assets/fonts/glass/didot-m16.woff2?v=20261016") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Optima Glass"; src: url("/assets/fonts/glass/optima.woff2?v=20261016") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Optima Glass"; src: url("/assets/fonts/glass/optima-italic.woff2?v=20261016") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Optima Glass"; src: url("/assets/fonts/glass/optima-bold.woff2?v=20261016") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* type */
  --font-display: "Didot Glass", "Bodoni MT", Didot, Georgia, serif;
  --font-head: "Didot Text", "Didot Glass", Georgia, serif;
  --font-text: "Optima Glass", Optima, Candara, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* ground and glass */
  --color-ground: #070b17;           /* the lake at night: the page behind the canvas, and the still's frame */
  --color-ground-2: #0d1426;
  --color-panel: rgb(7 11 23 / 0.80);   /* the reading glass */
  --color-panel-strong: rgb(6 9 19 / 0.90);
  --color-panel-soft: rgb(10 15 30 / 0.62);
  --color-panel-smoke: rgb(6 10 21 / 0.86);
  --color-edge-soft: rgb(214 240 236 / 0.10);
  --color-sun-edge-soft: rgb(243 200 136 / 0.12);
  --color-line: rgb(236 232 255 / 0.16);
  --color-line-strong: rgb(236 232 255 / 0.30);
  --color-edge: rgb(214 240 236 / 0.42);  /* the teal of a cut glass edge */
  /* text */
  --color-ink: #f4efe6;
  --color-ink-soft: #ddd8d0;
  --color-ink-mute: #b9bdcb;
  --color-ink-on-light: #0a0e1a;
  /* the page layer over the scene: scrims, halos and control fills */
  --color-shadow-deep: rgb(0 0 0 / 0.65);
  --color-sheen: rgb(255 255 255 / 0.06);
  --color-sun-edge: rgb(243 200 136 / 0.35);
  --color-scrim: rgb(5 8 18 / 0.74);
  --color-scrim-0: rgb(5 8 18 / 0);
  --color-text-halo: rgb(4 6 14 / 0.6);
  --color-text-halo-strong: rgb(4 6 14 / 0.95);
  --color-url: #c6e8ff;
  --color-control: rgb(10 15 30 / 0.55);
  --color-control-hover: rgb(18 26 48 / 0.8);
  --color-sun-light: #ffd9a0;
  --color-sun-wash: rgb(243 200 136 / 0.06);
  --color-field: rgb(3 6 14 / 0.75);
  --color-control-deep: rgb(3 6 14 / 0.6);
  --color-control-on: rgb(16 22 40 / 0.85);
  --color-label: rgb(4 7 16 / 0.72);
  --color-tag: rgb(4 7 16 / 0.86);
  --color-shadow-tag: rgb(0 0 0 / 0.8);
  --color-chip: rgb(255 255 255 / 0.04);
  --color-pause: rgb(4 7 16 / 0.7);
  --color-scrim-phone: rgb(5 8 18 / 0.86);
  --color-topnav: rgb(6 9 19 / 0.58);
  /* the sun */
  --color-sun: #f3c888;
  --color-sun-deep: #e6a65f;
  --color-focus: #ffe2b0;
  /* the eight bands of one light, one per group (plan .. modes: red .. violet) */
  --g0: #ff8a73; --g1: #ffb25c; --g2: #ffdf6b; --g3: #a6e57a; --g4: #5fdcca; --g5: #6fbcff; --g6: #9d97ff; --g7: #de95ff;
  /* the brand gradient: only on the one install button */
  --gradient-brand: linear-gradient(100deg, #4191E1 0%, #41E1B5 55%, #22D3EE 100%);
  /* space, radius, motion */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --r-1: 10px; --r-2: 16px; --r-3: 22px; --r-pill: 999px;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms;
  --topnav-h: 64px;
}
