/* LineAstra's skin. Every colour, size, shadow and motion on every page is one of these variables, and
   components.css is the only file that uses them. A redesign edits this file. The layout, type and components are
   decision 0022 (Geist, white cards with hairlines, spec 0021 A1); the colours are decision 0027: ink, one star blue
   highlight, blues and amber for charts (spec 0024). */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable-1.8.2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable-1.8.2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* The palette (decision 0027). Ink is for text and buttons. Star blue is the one highlight, for fills only: it is
     2.9:1 on white, so never text and never the only sign of a state, and anything written on it is ink. Small blue
     text is link blue. The blues, amber and the rest are for charts and the ways of working. */
  --ink-900: #0f2747;
  --star-500: #3d9bff;
  /* Star blue for text, marks and links on the dark set and over the board (6:1 or more on their surfaces). */
  --star-300: #7fbfff;
  --star-soft: color-mix(in srgb, var(--star-500) 13%, white);
  --star-tint: color-mix(in srgb, var(--star-500) 55%, white);
  --link-600: #1d5fd0;
  --blue-500: #2f7fe6;
  --blue-700: #1b4f9c;
  --blue-300: #a8d4ff;
  --amber-400: #f5a524;
  --brown-700: #9a5b13;
  --rose-500: #e8618c;
  --teal-600: #177e89;
  --cyan-300: #8fd3e8;
  /* The dark of the marketing site's sections and the home screen icon */
  --night-950: #081a31;
  --night-800: #14335c;

  /* Neutrals */
  --ink-2: #344054;
  --ink-muted: #667085;
  --ink-faint: #98a2b3;
  --line: #e4eaf3;
  --line-strong: #d0d5dd;
  --chip: #f2f4f7;
  --page: #f5f8fc;
  --card: #ffffff;
  --table-head: #fcfcfd;

  /* Status: never a chart or way-of-working colour, and always with a word or an icon */
  --status-success: #12b76a;
  --status-success-soft: #e7f8ef;
  --status-success-text: #027a48;
  --status-warning-text: #b54708;
  --status-warning-soft: #fef6e7;
  --status-danger: #d92d20;
  --status-danger-soft: #fef3f2;
  --status-danger-text: #b42318;

  /* Ways of working, as tags and chart series, in this order; each tag carries its word too. The set passes the dataviz
     validator against its neighbours (light, on white). */
  --way-coaching: var(--star-500);
  --way-organisations: var(--amber-400);
  --way-supervision: var(--ink-900);
  --way-parts: var(--cyan-300);
  --way-family: var(--rose-500);
  --way-groups: var(--brown-700);
  --way-intention: var(--teal-600);
  --way-free: var(--ink-faint);

  /* Charts */
  --chart-now: var(--blue-500);
  --chart-before: var(--blue-300);
  /* Amber, not the star blue of the screen's highlight, which would vanish among blue bars. Always with a word. */
  --chart-highlight: var(--amber-400);
  /* The heatmap's one-hue ramp, light to dark. Passes the dataviz validator's ordinal checks on white (and the dark
     set's on its surface). */
  --heat-1: color-mix(in srgb, var(--blue-500) 72%, white);
  --heat-2: var(--blue-500);
  --heat-3: color-mix(in srgb, var(--blue-500) 50%, var(--blue-700));
  --heat-4: var(--blue-700);
  --heat-5: color-mix(in srgb, var(--blue-700) 60%, var(--ink-900));

  /* The neutral palette before decision 0022, still used by the board's own colours and the dark set */
  --gray-0: #ffffff;
  --gray-25: #fbfbfc;
  --gray-50: #f6f7f9;
  --gray-100: #eef0f3;
  --gray-200: #e2e5ea;
  --gray-300: #cdd2da;
  --gray-400: #9aa2b0;
  --gray-500: #5c6476;
  --gray-600: #4d5466;
  --gray-700: #363c4b;
  --gray-800: #232733;
  --gray-850: #1a1d27;
  --gray-900: #13151d;
  --gray-950: #0c0d13;

  --green-50: #ecfaf2;
  --green-500: #1f9d61;
  --green-600: #147a49;
  --amber-50: #fff7e8;
  --amber-500: #c98208;
  --amber-600: #946004;
  --red-50: #fdf0f0;
  --red-500: #d9434b;
  --red-600: #bb323a;
  --red-700: #a12a31;

  /* What each colour is for */
  --color-bg: var(--page);
  --color-surface: var(--card);
  --color-surface-raised: var(--card);
  --color-surface-sunken: var(--chip);
  --color-surface-hover: var(--chip);
  --color-surface-selected: var(--star-soft);
  --color-surface-header: var(--table-head);
  --color-border: var(--line);
  --color-border-strong: var(--line-strong);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-2);
  /* Still at least 4.5:1 on white, so it stays readable as text; --ink-faint is for marks, never words. */
  --color-text-subtle: var(--ink-muted);
  --color-text-faint: var(--ink-faint);
  --color-text-inverse: var(--card);
  --color-accent: var(--ink-900);
  /* A chosen tile or card: the accent's border over a light tint of it, one look for every choice. */
  --color-choice-selected: color-mix(in srgb, var(--ink-900) 6%, var(--card));
  --color-accent-hover: color-mix(in srgb, var(--ink-900) 82%, var(--night-950));
  --color-accent-text: var(--ink-900);
  --color-accent-soft: var(--star-soft);
  --color-on-accent: var(--card);
  --color-highlight: var(--star-500);
  --color-highlight-soft: var(--star-soft);
  --color-highlight-tint: var(--star-tint);
  /* The highlight as words or a number: star blue itself is too light to read. */
  --color-highlight-text: var(--link-600);
  --color-success: var(--status-success-text);
  --color-success-mark: var(--status-success);
  --color-success-soft: var(--status-success-soft);
  --color-warning: var(--status-warning-text);
  --color-warning-soft: var(--status-warning-soft);
  --color-danger: var(--status-danger);
  --color-danger-hover: color-mix(in srgb, var(--status-danger) 85%, black);
  --color-danger-soft: var(--status-danger-soft);
  /* Danger as text on its soft background, 4.5:1 or more. */
  --color-danger-text: var(--status-danger-text);
  --color-info: var(--blue-500);
  --color-info-soft: color-mix(in srgb, var(--blue-300) 35%, var(--card));
  /* Chart blue, not star blue, so the ring passes 3:1 on the page as well as on cards (WCAG 1.4.11). */
  --color-focus: var(--blue-500);
  --color-backdrop: rgba(12, 13, 19, 0.45);
  --color-qr-paper: #ffffff;

  /* Over the 3D board: night glass on a dark scene, in both colour schemes (spec 0025 item 25, the UI/UX session's
     values of 2026-11-13). The strong glass holds cards, sheets and anything longer than a line. */
  --board-glass: color-mix(in srgb, var(--night-950) 78%, transparent);
  --board-glass-strong: color-mix(in srgb, var(--night-950) 94%, transparent);
  /* Lighter glass for names over the board and the list of who's here, and fainter for names held back. */
  --board-glass-label: color-mix(in srgb, var(--night-950) 62%, transparent);
  --board-glass-faint: color-mix(in srgb, var(--night-950) 42%, transparent);
  /* The night's channels, only for names drawn onto a picture by script (board-overlay.js), which can't read a mix. */
  --board-glass-rgb: 8, 26, 49;
  --board-blur: blur(16px) saturate(140%);
  --board-highlight: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 6%, transparent);
  --board-shadow: 0 18px 48px color-mix(in srgb, var(--night-950) 55%, transparent);
  /* The loading screen: its bar's glow, and the ring round the step it is on. */
  --board-bar-glow: 0 0 12px color-mix(in srgb, var(--board-fill) 60%, transparent);
  --board-step-ring: 0 0 0 3px var(--board-chosen);
  /* Each family of feelings has its light, matched by the board's (Figure.cs). */
  --feel-ease-rgb: 255, 204, 128;
  --feel-pull-rgb: 128, 235, 217;
  --feel-low-rgb: 128, 168, 255;
  --feel-fear-rgb: 219, 194, 255;
  --feel-anger-rgb: 255, 102, 56;
  --feel-withdrawn-rgb: 184, 189, 204;
  --feel-unsure-rgb: 217, 209, 242;
  --board-text: #f4f7fb;
  --board-text-muted: color-mix(in srgb, var(--board-text) 72%, transparent);
  /* Placeholders and what can't be used now; never the only way something is said. */
  --board-text-faint: color-mix(in srgb, var(--board-text) 58%, transparent);
  --board-line: color-mix(in srgb, var(--gray-0) 10%, transparent);
  --board-line-strong: color-mix(in srgb, var(--gray-0) 20%, transparent);
  --board-line-bright: color-mix(in srgb, var(--gray-0) 50%, transparent);
  /* Wells (inputs), a control pointed at, and one pressed or open. */
  --board-sunk: color-mix(in srgb, var(--gray-0) 5%, transparent);
  --board-hover: color-mix(in srgb, var(--gray-0) 9%, transparent);
  --board-press: color-mix(in srgb, var(--gray-0) 13%, transparent);
  /* Star blue only for the one filled action on a surface and for what's switched on, with ink words on it. What's on
     but isn't the main action is a soft star fill with light star words. */
  --board-fill: var(--star-500);
  --board-fill-hover: color-mix(in srgb, var(--star-500) 86%, var(--gray-0));
  --board-on-fill: var(--ink-900);
  --board-chosen: color-mix(in srgb, var(--star-500) 18%, transparent);
  --board-focus: var(--star-300);
  /* Words over a picture, such as a world's name on its card. */
  --board-picture-shade: linear-gradient(to top, var(--board-glass-strong) 0%, transparent 60%);
  --board-picture-text-shadow: 0 1px 3px color-mix(in srgb, var(--night-950) 80%, transparent);
  --board-accent: var(--star-300);
  --board-scene: var(--night-950);
  /* The sky each world's board clears to (BoardThemes.cs), behind the canvas and the cover that hides it at first. */
  --scene-universe: #170f2b;
  --scene-relief: #0d1726;
  --scene-forest: #051214;
  --scene-aurora: #050814;
  --scene-sea: #08141a;
  --scene-autumn: #140d05;
  --scene-study: #0a0a14;
  --board-portrait-size: 136px;
  /* How far a feeling's light reaches in from the screen's edges when seen from inside a figure. */
  --feel-edge-reach: 200px;
  --feel-edge-spread: 56px;
  /* The room's row along the top (spec 0025): its distance from the edges, and the space it keeps above the rest. */
  --room-edge: 0.75rem;
  --room-top-space: 4rem;
  --room-top-name: 18rem;
  /* The host's bar at the bottom centre (spec 0025 step 2), and the space it keeps below what sits above it. */
  --room-bar-space: 5rem;
  /* The room's controls are a step larger than the app's, for hands on a board (and 44px to hit on touch). */
  --room-control-height: 2.5rem;
  /* The arrows on the pad for walking in a figure's eyes. */
  --room-pad-arrow: 1.625rem;
  /* Counts on the bar and the chat's button sit in small fixed pills, so their words keep a fixed size too. */
  --room-badge-text: 10px;
  --room-count-text: 11px;
  --room-badge-pad: 4px;
  /* How far a docked panel and the view tools beside it reach in from the right edge. */
  --room-panel-reach: 27.5rem;
  /* The view tools' column at the right edge, which what's centred at the bottom keeps clear of on both sides. */
  --room-tools-reach: 5.25rem;
  --board-danger: rgba(200, 60, 80, 0.55);
  /* Danger as words over the board's dark glass, such as Remove from board. */
  --board-danger-text: #f58389;

  /* Type */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* The device's own fonts, which the room page keeps until spec 0020 step 9 designs it onto the look above. */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-system-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* The scale: 11, 12, 13, 14 (body), 16 (card titles), 18, 22 (figures in strips), 26 (key numbers), 28 (page titles) */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-kpi: 1.625rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-code: 0.18em;

  /* Space, on a 4px grid */
  --space-0: 0;
  --space-0-5: 0.125rem;
  --space-0-75: 0.1875rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shapes */
  /* 6 for tags, chips and status pills; 8 for nav items and segmented tabs; 10 for buttons, inputs and icon buttons;
     12 for the board's picture and inner panels; 16 for cards */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-control: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --halo-width: 3px;
  --highlight-edge: 3px;
  --stripe-width: 4px;
  --board-rim: 1.5px;
  --row-actions: 7rem;
  --chart-line: 2px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent);

  /* Depth: cards have none, only menus, popovers, dialogs and toasts */
  --shadow-xs: 0 1px 2px rgba(16, 18, 27, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 18, 27, 0.08), 0 1px 2px rgba(16, 18, 27, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(16, 18, 27, 0.25), 0 4px 10px rgba(16, 18, 27, 0.06);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --duration-spin: 0.7s;
  --duration-shimmer: 1.4s;
  /* The room's slow motions: a feeling's light easing in, and the two breaths. */
  --duration-feel-fade: 1.2s;
  --duration-feel-breathe: 6s;
  --duration-message-breathe: 3.2s;
  /* The cross-fade Reduce motion gives a change of view in place of travel (to-do 4m), so it is never zeroed. */
  --duration-view-cut: 200ms;
  /* What Reduce motion leaves of an animation, so its end still fires. */
  --duration-instant: 0.01ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);

  /* Layout */
  --sidebar-width: 14.25rem;
  --palette-width: 36rem;
  --sidebar-width-narrow: 12.25rem;
  --page-pad-top: 1.375rem;
  --page-pad-side: 1.75rem;
  --topbar-height: 3.5rem;
  --content-max: 68rem;
  --content-narrow: 40rem;
  --auth-card-width: 25rem;
  --auth-card-width-wide: 40rem;
  --control-height: 2.25rem;
  --control-height-sm: 2rem;
  --control-height-lg: 3rem;
  /* The least a finger can hit reliably (spec 0025 item 24). */
  --touch-target: 2.75rem;
  --qr-size: 180px;
  /* The wordmark's height: its letters read as 23px type in the app, larger on the guest page and the guide. */
  --logo-height: 1.6875rem;
  --logo-height-lg: 2.3125rem;

  /* Layers */
  --z-sticky: 10;
  --z-nav: 20;
  --z-overlay: 40;
  --z-toast: 50;
}

/* The platform's pages are light only until dark is designed (spec 0021 A1). The room page still uses this set: it
   sets data-theme="dark" from the device's setting (room-controls.js) until spec 0020 step 9. */
:root[data-theme="dark"] {
  --heat-1: color-mix(in srgb, var(--blue-500) 55%, var(--gray-900));
  --heat-2: color-mix(in srgb, var(--blue-500) 77.5%, var(--gray-900));
  --heat-3: var(--blue-500);
  --heat-4: color-mix(in srgb, var(--blue-300) 50%, var(--blue-500));
  --heat-5: var(--blue-300);
  color-scheme: dark;
  --color-bg: var(--gray-950);
  --color-surface: var(--gray-900);
  --color-surface-raised: var(--gray-850);
  --color-surface-sunken: #090a0f;
  --color-surface-hover: var(--gray-850);
  --color-surface-selected: color-mix(in srgb, var(--star-500) 16%, transparent);
  --color-border: var(--gray-800);
  --color-border-strong: var(--gray-700);
  --color-text: #eceef3;
  --color-text-muted: #a9b0bf;
  --color-text-subtle: #8a92a3;
  --color-text-inverse: var(--gray-950);
  /* Star blue: white on it fails, so what's written on it is night. */
  --color-accent: var(--star-500);
  --color-choice-selected: color-mix(in srgb, var(--star-500) 14%, var(--gray-900));
  --color-accent-hover: var(--star-300);
  --color-accent-text: var(--star-300);
  --color-accent-soft: color-mix(in srgb, var(--star-500) 16%, transparent);
  --color-on-accent: var(--night-950);
  --color-highlight-text: var(--star-300);
  --color-focus: var(--star-500);
  --color-success: #3fc488;
  --color-success-soft: rgba(31, 157, 97, 0.16);
  --color-warning: #f0b03f;
  --color-warning-soft: rgba(201, 130, 8, 0.16);
  --color-danger: #f0646b;
  --color-danger-hover: #f58389;
  --color-danger-soft: rgba(217, 67, 75, 0.16);
  --color-danger-text: #f0646b;
  --color-backdrop: rgba(0, 0, 0, 0.6);
  --color-surface-header: var(--gray-850);
  --color-text-faint: var(--gray-500);
  --color-highlight-soft: color-mix(in srgb, var(--star-500) 18%, var(--gray-900));
  --color-highlight-tint: color-mix(in srgb, var(--star-500) 45%, var(--gray-900));
  --color-info: var(--blue-300);
  --color-info-soft: color-mix(in srgb, var(--blue-300) 18%, var(--gray-900));
  --color-success-mark: #3fc488;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.7);
}

/* The device's setting, unless the room's Accessibility settings chose motion (board-settings.js, allow-motion). */
@media (prefers-reduced-motion: reduce) {
  :root:not(.allow-motion) {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* Chosen in a room's Accessibility settings (spec 0014), which otherwise follow the device. */
:root.reduce-motion {
  --duration-fast: 0ms;
  --duration-base: 0ms;
  --duration-slow: 0ms;
}

:root.high-contrast {
  /* The filled action in light star blue, so its ink words reach 7:1. */
  --board-fill: var(--star-300);
  --board-fill-hover: color-mix(in srgb, var(--star-300) 86%, var(--gray-0));
  --board-glass: var(--night-950);
  --board-glass-strong: var(--night-950);
  --board-glass-label: color-mix(in srgb, var(--night-950) 95%, transparent);
  --board-glass-faint: color-mix(in srgb, var(--night-950) 95%, transparent);
  --board-focus: var(--board-accent);
  --board-blur: none;
  --board-highlight: none;
  --board-text: var(--gray-0);
  --board-text-muted: color-mix(in srgb, var(--gray-0) 92%, transparent);
  --board-text-faint: color-mix(in srgb, var(--gray-0) 80%, transparent);
  --board-line: var(--board-line-bright);
  --board-line-strong: var(--board-line-bright);
  --board-accent: #bfe0ff;
}

/* Plain night where glass can't blur, or the person asks for less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --board-glass: var(--night-950);
    --board-glass-strong: var(--night-950);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --board-glass: var(--night-950);
    --board-glass-strong: var(--night-950);
    --board-glass-label: var(--board-glass-strong);
    --board-glass-faint: var(--board-glass-strong);
    --board-blur: none;
  }
}

/* The marketing site's own colours and sizes (spec 0023). */
:root {
  --mint-400: #3ddc97;
  --site-line-strong: #cfd9e6;
  --site-ink-2: #3a4a63;
  --site-ink-3: #55657e;
  --site-on-night: #ffffff;
  --site-on-night-muted: color-mix(in srgb, var(--site-on-night) 80%, transparent);
  --site-night-line: color-mix(in srgb, var(--site-on-night) 22%, transparent);
  --site-device: #0c1a2b;
  --site-device-base: linear-gradient(#d5dde6, #a9b5c3);
  --site-device-notch: #96a3b2;

  /* Type: fluid between a phone and a wide screen */
  --site-display: clamp(2.25rem, 3.75vw, 3.25rem);
  --site-h2: clamp(1.75rem, 3.1vw, 2.625rem);
  --site-h3: 1.25rem;
  --site-lede: clamp(1.03rem, 1.35vw, 1.1875rem);
  --site-body: 1rem;
  --site-small: 0.90625rem;
  --site-fine: 0.8125rem;
  --site-tag: 0.6875rem;
  --leading-display: 1.03;
  --leading-heading: 1.1;
  --tracking-display: -0.035em;
  --tracking-heading: -0.026em;
  --tracking-label: 0.08em;
  --site-measure: 34em;

  /* Space */
  --site-max: 77.5rem;
  --site-gutter: clamp(1rem, 4vw, 3rem);
  --site-gutter-start: max(var(--site-gutter), env(safe-area-inset-left, 0px));
  --site-gutter-end: max(var(--site-gutter), env(safe-area-inset-right, 0px));
  --site-section: clamp(3.5rem, 7vw, 6.5rem);
  --site-gap: clamp(1.5rem, 4vw, 4rem);
  --site-hero-top: clamp(1.25rem, 3.4vw, 3rem);
  --site-hero-bottom: clamp(4.5rem, 8vw, 7rem);
  --site-control: 2.875rem;
  --site-control-sm: 2.375rem;
  --site-touch: 2.75rem;
  --site-code-box: 1.875rem;
  --site-code-box-height: 2.25rem;
  --site-phone-drop: -2.875rem;
  --radius-device: 16px 16px 5px 5px;
  --radius-device-base: 3px 3px 14px 14px;
  --radius-device-notch: 0 0 6px 6px;
  --radius-phone: 28px;
  --radius-phone-screen: 22px;
  --radius-2xs: 1.5px;
  --site-dot: 0.5rem;

  /* The hero's board */
  --site-disc: radial-gradient(ellipse at 38% 24%, color-mix(in srgb, var(--blue-500) 34%, var(--night-950)), color-mix(in srgb, var(--night-950) 82%, transparent) 62%, color-mix(in srgb, var(--night-950) 90%, transparent));
  --site-disc-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--site-on-night) 62%, transparent), inset 0 -14px 34px color-mix(in srgb, var(--blue-300) 16%, transparent), 0 9px 0 0 var(--night-950), 0 10.5px 0 0 color-mix(in srgb, var(--site-on-night) 26%, transparent), 0 34px 60px color-mix(in srgb, var(--night-950) 70%, transparent);
  --site-board-shade: radial-gradient(ellipse at 50% 58%, transparent 28%, color-mix(in srgb, var(--night-950) 55%, transparent) 100%);
  --site-piece-shadow: drop-shadow(0 2px 3px color-mix(in srgb, var(--night-950) 40%, transparent));
  --site-ring: color-mix(in srgb, var(--site-on-night) 26%, transparent);
  --site-ring-fill: radial-gradient(ellipse, color-mix(in srgb, var(--night-950) 55%, transparent), transparent 70%);
  --site-hold-ring: 0 0 0 3px;
  --site-hold-glow: 0 0 22px;
  --site-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--site-on-night) 50%, transparent);
  --site-chip: color-mix(in srgb, var(--night-950) 66%, transparent);
  --site-phone-shadow: 0 34px 60px -24px color-mix(in srgb, var(--ink-900) 55%, transparent);
  --site-blur: 3px;
  --site-night: radial-gradient(120% 140% at 20% 0%, var(--night-800) 0%, var(--night-950) 60%);
}