/* Generated from design/tokens.json by `make design`. Do not edit this file:
   change design/tokens.json and run `make design` again.
   Sizes are iOS points at the default text size; colours follow light and dark mode
   (or data-theme="light" / "dark" on the html element). */

:root {
  color-scheme: light dark;
  --color-accent: #0A6E94;
  --color-text-on-fill: #FFFFFF;
  --color-puzzle-equation: #34C759;
  --color-puzzle-target: #FF9500;
  --color-puzzle-cages: #007AFF;
  --color-puzzle-sums: #AF52DE;
  --color-wheel-selection: #E65100;
  --color-wheel-ripple: rgba(230, 81, 0, 0.6);
  --color-streak-freeze: #1E8FC4;
  --color-plus-mark: #A66A00;
  --color-backdrop-top: #61CAF2;
  --color-backdrop-bottom: #00C0E8;
  --color-backdrop-ink: #06364A;
  --color-backdrop-ink-soft: #08445C;
  --color-brand-mark: rgba(255, 255, 255, 0.16);
  --color-glass-top: #FFFFFF;
  --color-glass-bottom: #EEF9FD;
  --color-glass-ink: #06364A;
  --color-glass-ink-soft: #4A6878;
  --color-glass-highlight: #FFFFFF;
  --color-glass-lowlight: rgba(159, 214, 234, 0.6);
  --color-glass-shadow: rgba(5, 96, 127, 0.26);
  --color-badge-top: #F4FBFE;
  --color-badge-bottom: #E1F3FA;
  --color-chip-fill: #E3F4FA;
  --color-brand-accent: #0A6E94;
  --color-pill-top: #0E77A0;
  --color-pill-bottom: #0A5F80;
  --color-pill-ink: #FFFFFF;
  --color-pill-highlight: rgba(255, 255, 255, 0.45);
  --color-pill-lowlight: rgba(4, 40, 56, 0.5);
  --color-logo-top: #FFFFFF;
  --color-logo-bottom: #E3F4FA;
  --color-logo-on-glass-top: #61CAF2;
  --color-logo-on-glass-bottom: #00C0E8;
  --color-launch-background: #61CAF2;
  --color-logo-shadow: rgba(5, 96, 127, 0.35);
  --color-brand-decode: #1F8A5B;
  --color-brand-target: #D96B12;
  --color-brand-cages: #0A6E94;
  --color-brand-cross: #7A4FD0;
  --color-glass-solved: #1A7A50;
  --color-brand-flame: #F08A24;
  --color-board-correct: #1F8A5B;
  --color-board-present: #B87A0A;
  --color-board-absent: #5E7C8C;
  --color-glass-key-tint-top: #E6F6FC;
  --color-glass-key-tint-bottom: #CFECF7;
  --color-glass-key-tint-ink: #0A5F80;
  --color-glass-key-hint-top: #FFF7DE;
  --color-glass-key-hint-bottom: #F7E5AE;
  --color-glass-key-hint-ink: #6B4A00;
  --color-glass-key-danger-top: #CF3F2E;
  --color-glass-key-danger-bottom: #B3301F;
  --color-glass-key-danger-ink: #FFFFFF;
  --color-glass-colour-highlight: rgba(255, 255, 255, 0.35);
  --color-glass-colour-lowlight: rgba(0, 0, 0, 0.15);
  --color-glass-colour-sheen: rgba(255, 255, 255, 0.22);
  --color-board-empty: rgba(255, 255, 255, 0.22);
  --color-board-empty-edge: rgba(255, 255, 255, 0.5);
  --color-board-active-edge: rgba(255, 255, 255, 0.95);
  --color-board-ink: #06364A;
  --color-wheel-plate-top: #FFFFFF;
  --color-wheel-plate-bottom: #E4F4FB;
  --color-wheel-chosen-edge: rgba(138, 46, 0, 0.14);
  --color-wheel-solved-edge: rgba(11, 77, 48, 0.08);
  --color-wheel-plate-edge: #FFFFFF;
  --color-wheel-sign-ink: #0A5F80;
  --color-board-square: #FFFFFF;
  --color-board-square-line: #CFE6EF;
  --color-board-cage-edge: #06364A;
  --color-board-selected: #A8E2F7;
  --color-board-peer: #E6F6FC;
  --color-board-clue-ink: #06364A;
  --color-board-note-ink: #3D5866;
  --color-board-hinted: #0A5F80;
  --color-board-mistake: #C62828;
  --color-board-block: #0E4A63;
  --color-board-block-ink: #FFFFFF;
  --color-board-block-mistake: #FF9E9E;
  --color-board-block-diagonal: rgba(255, 255, 255, 0.4);
  --color-board-block-line: rgba(255, 255, 255, 0.18);
  --color-calendar-ring: #0A6E94;
  --color-calendar-ring-track: #9FCFE2;
  --color-calendar-day-full: #DDF3FB;
  --color-calendar-day-faded: #9DB4BF;
  --color-calendar-plus-badge: #0A5F80;
  --color-calendar-plus-badge-ink: #FFFFFF;
  --color-stats-freeze: #1E8FC4;
  --color-chart-bar-soft: #A9D8C1;
  --color-settings-toggle: #1F8A5B;
  --color-glass-danger: #C62828;
  --color-glass-divider: #DCEEF5;
  --color-plan-selected: #0A5F80;
  --color-plan-radio: #9FCFE2;
  --text-small-icon: 400 11px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --text-card-icon: 400 22px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --text-key-icon: 400 22px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --text-mark-symbol: 700 9px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --text-wheel-tile-share: 0.46;
  --text-wheel-bulb-share: 0.2;
  --text-grid-mark-share: 0.2;
  --text-wordmark-share: 1;
  --text-brand-title: 800 34px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-tagline: 600 17px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-card-title: 700 20px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-card-detail: 500 15px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-pill: 800 16px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-key: 700 28px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-key-label: 700 17px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-nav-title: 800 17px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-nav-subtitle: 600 13px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-stat-value: 800 22px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-stat-label: 600 12px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-chevron: 700 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --text-brand-heading: 700 20px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-subheading: 500 15px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-status: 700 15px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-chip: 700 16px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-notice: 700 15px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-tile: 800 22px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-running-total: 700 16px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-nav-icon: 700 17px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --text-brand-key-note: 700 20px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-board-grid-digit-share: 0.5;
  --text-board-cages-clue-share: 0.22;
  --text-board-grid-note-share: 0.2;
  --text-board-cross-clue-share: 0.25;
  --text-brand-goal: 900 46px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-result-headline: 800 28px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-result-detail: 600 16px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-weekday: 700 12px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-calendar-day: 600 17px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-calendar-today: 800 17px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-plus-badge: 900 11px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-legend: 600 15px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-note: 500 15px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-chart-title: 700 13px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-chart-number: 700 15px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-chart-count: 700 13px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-section: 700 13px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-row: 600 17px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-row-value: 700 16px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-link: 700 15px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-list-row: 600 16px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-plus-tag: 800 28px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-plan-name: 800 17px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-plan-detail: 600 13px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-legal: 500 11px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-sheet-title: 800 22px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-sheet-lead: 800 20px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --text-brand-body: 500 16px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --spacing-xxs: 2px;
  --spacing-xs: 6px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --layout-screen-margin: 16px;
  --layout-section-gap: 12px;
  --layout-tile-gap: 6px;
  --layout-key-gap: 8px;
  --layout-message-height: 44px;
  --layout-min-key-height: 44px;
  --layout-max-key-height: 76px;
  --layout-roomy-key-height: 60px;
  --layout-min-tile: 28px;
  --layout-max-tile: 64px;
  --layout-value-height: 30px;
  --layout-panel-height: 92px;
  --layout-goal-height: 56px;
  --layout-top-gap-share: 0.1px;
  --layout-wheel-gap-share: 0.55px;
  --layout-expression-gap: 22px;
  --layout-grid-top-gap-share: 0.2px;
  --layout-goal-gap: 8px;
  --layout-expression-gap-share: 0.25px;
  --layout-min-slot: 28px;
  --layout-max-slot: 48px;
  --layout-min-wheel: 200px;
  --layout-max-wheel: 440px;
  --layout-min-grid: 220px;
  --layout-max-grid: 520px;
  --layout-deck-block-gap: 16px;
  --radius-card: 24px;
  --radius-glass-key: 16px;
  --radius-icon-badge: 14px;
  --radius-board-tile: 10px;
  --radius-board-slot: 12px;
  --radius-board-grid: 14px;
  --radius-result-card: 30px;
  --radius-stat-box: 16px;
  --radius-chart-bar: 6px;
  --radius-plus-badge: 8px;
  --radius-plan-card: 20px;
  --radius-value-chip: 10px;
  --radius-sheet: 34px;
  --size-card-icon: 44px;
  --size-calendar-day: 46px;
  --size-legend-tile: 40px;
  --size-help-grid: 192px;
  --size-answer-row: 300px;
  --size-mark-symbol-inset: 3px;
  --size-loading: 200px;
  --size-shake-distance: 10px;
  --size-clue-inset: 3px;
  --size-note-inset: 3px;
  --size-sums-clue-inset: 4px;
  --size-stats-chart-label: 28px;
  --size-tip-width: 260px;
  --size-wordmark-large: 34px;
  --size-wordmark-small: 24px;
  --size-brand-mark-plus: 420px;
  --size-brand-mark-times: 330px;
  --size-glass-shadow-radius: 9px;
  --size-glass-shadow-drop: 8px;
  --size-key-shadow-radius: 6px;
  --size-key-shadow-drop: 5px;
  --size-logo-shadow-radius: 2px;
  --size-logo-shadow-drop: 3px;
  --size-message-close: 30px;
  --size-nav-button: 44px;
  --size-calendar-circle: 42px;
  --size-calendar-plus-badge: 15px;
  --size-legend-mark: 14px;
  --size-launch-logo: 120px;
  --size-plus-badge: 26px;
  --size-plan-radio: 22px;
  --size-sheet-close: 36px;
  --size-settings-row: 52px;
  --size-chart-bar: 18px;
  --stroke-ripple: 3px;
  --stroke-glass-edge: 1.5px;
  --stroke-board-edge: 1.5px;
  --stroke-board-strong-edge: 2px;
  --stroke-board-cage-edge: 2.5px;
  --stroke-board-grid-line: 1px;
  --stroke-board-block-diagonal: 1px;
  --stroke-wheel-plate-edge: 2px;
  --stroke-brand-calendar-ring: 2.5px;
  --stroke-plan-radio: 2px;
  --stroke-plan-radio-on: 7px;
  --stroke-plan-selected: 2.5px;
  --stroke-glass-divider: 1px;
  --effect-unavailable: 0.4;
  --effect-pressed-opacity: 0.6;
  --effect-pressed-scale: 0.95;
  --effect-wheel-line: 0.22;
  --effect-wheel-line-opacity: 0.8;
  --effect-ripple-scale: 1.5;
  --effect-cages-digit-drop: 0.1;
  --effect-key-unavailable: 0.4;
  --effect-stat-shrink: 0.6;
  --effect-wordmark-logo: 1.5;
  --effect-glass-edge-fade: 0.2;
  --effect-brand-mark-overhang: 0.36;
  --effect-wheel-hint-opacity: 0.28;
  --effect-board-hint-square: 0.5;
  --motion-tile-half-flip: 0.2s;
  --motion-tile-flip-step: 0.15s;
  --motion-message-fade: 0.2s;
  --motion-hint-fade: 0.3s;
  --motion-tile-select: 0.15s;
  --motion-hint-line-draw: 0.45s;
  --motion-hint-ripple: 0.6s;
  --motion-result-appear: 0.3s;
  --motion-shake-step: 0.06s;
  --motion-wrong-try-hold: 0.6s;
  --motion-review-prompt-delay: 1.5s;
  --motion-arrow-keys-switch: 0.35s;
  --motion-tip-delay: 0.6s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-accent: #61CAF2;
    --color-text-on-fill: #FFFFFF;
    --color-puzzle-equation: #30D158;
    --color-puzzle-target: #FF9F0A;
    --color-puzzle-cages: #0A84FF;
    --color-puzzle-sums: #BF5AF2;
    --color-wheel-selection: #E65100;
    --color-wheel-ripple: rgba(230, 81, 0, 0.6);
    --color-streak-freeze: #64D2FF;
    --color-plus-mark: #F2C14E;
    --color-backdrop-top: #242426;
    --color-backdrop-bottom: #141415;
    --color-backdrop-ink: #EDEDED;
    --color-backdrop-ink-soft: #9A9A9F;
    --color-brand-mark: rgba(255, 255, 255, 0.07);
    --color-glass-top: #2F2F32;
    --color-glass-bottom: #252527;
    --color-glass-ink: #EDEDED;
    --color-glass-ink-soft: #9A9A9F;
    --color-glass-highlight: rgba(255, 255, 255, 0.1);
    --color-glass-lowlight: rgba(0, 0, 0, 0);
    --color-glass-shadow: rgba(0, 0, 0, 0.5);
    --color-badge-top: #38383B;
    --color-badge-bottom: #2C2C2F;
    --color-chip-fill: rgba(255, 255, 255, 0.06);
    --color-brand-accent: #61CAF2;
    --color-pill-top: #61CAF2;
    --color-pill-bottom: #00C0E8;
    --color-pill-ink: #04212C;
    --color-pill-highlight: rgba(255, 255, 255, 0.7);
    --color-pill-lowlight: rgba(10, 95, 128, 0.6);
    --color-logo-top: #61CAF2;
    --color-logo-bottom: #00C0E8;
    --color-logo-on-glass-top: #61CAF2;
    --color-logo-on-glass-bottom: #00C0E8;
    --color-launch-background: #242426;
    --color-logo-shadow: rgba(0, 0, 0, 0.6);
    --color-brand-decode: #4CD08A;
    --color-brand-target: #FF9F43;
    --color-brand-cages: #61CAF2;
    --color-brand-cross: #B48CFF;
    --color-glass-solved: #4CD08A;
    --color-brand-flame: #FF9F43;
    --color-board-correct: #2E8B57;
    --color-board-present: #B8860B;
    --color-board-absent: #48484A;
    --color-glass-key-tint-top: #24414E;
    --color-glass-key-tint-bottom: #1B323D;
    --color-glass-key-tint-ink: #61CAF2;
    --color-glass-key-hint-top: #4A3F1F;
    --color-glass-key-hint-bottom: #3A3118;
    --color-glass-key-hint-ink: #F2C14E;
    --color-glass-key-danger-top: #CF3F2E;
    --color-glass-key-danger-bottom: #B3301F;
    --color-glass-key-danger-ink: #FFFFFF;
    --color-glass-colour-highlight: rgba(255, 255, 255, 0.2);
    --color-glass-colour-lowlight: rgba(0, 0, 0, 0.15);
    --color-glass-colour-sheen: rgba(255, 255, 255, 0.14);
    --color-board-empty: rgba(255, 255, 255, 0.03);
    --color-board-empty-edge: rgba(255, 255, 255, 0.12);
    --color-board-active-edge: rgba(97, 202, 242, 0.55);
    --color-board-ink: #EDEDED;
    --color-wheel-plate-top: #2F2F32;
    --color-wheel-plate-bottom: #232325;
    --color-wheel-chosen-edge: rgba(255, 255, 255, 0.3);
    --color-wheel-solved-edge: rgba(255, 255, 255, 0.25);
    --color-wheel-plate-edge: #2C2C2F;
    --color-wheel-sign-ink: #61CAF2;
    --color-board-square: #1E1E20;
    --color-board-square-line: #3A3A3D;
    --color-board-cage-edge: #D8D8DC;
    --color-board-selected: #365C6C;
    --color-board-peer: #242E33;
    --color-board-clue-ink: #CFCFD4;
    --color-board-note-ink: #ADADB2;
    --color-board-hinted: #61CAF2;
    --color-board-mistake: #FF8A80;
    --color-board-block: #3A3A3C;
    --color-board-block-ink: #FFFFFF;
    --color-board-block-mistake: #FF9E9E;
    --color-board-block-diagonal: rgba(255, 255, 255, 0.32);
    --color-board-block-line: rgba(255, 255, 255, 0.1);
    --color-calendar-ring: #61CAF2;
    --color-calendar-ring-track: #3E6A7C;
    --color-calendar-day-full: rgba(97, 202, 242, 0.16);
    --color-calendar-day-faded: #5A5A5E;
    --color-calendar-plus-badge: #61CAF2;
    --color-calendar-plus-badge-ink: #04212C;
    --color-stats-freeze: #64D2FF;
    --color-chart-bar-soft: #2D5B44;
    --color-settings-toggle: #30A46C;
    --color-glass-danger: #FF6B6B;
    --color-glass-divider: rgba(255, 255, 255, 0.08);
    --color-plan-selected: #61CAF2;
    --color-plan-radio: #5A5A5E;
  }
}

:root[data-theme="dark"] {
  --color-accent: #61CAF2;
  --color-text-on-fill: #FFFFFF;
  --color-puzzle-equation: #30D158;
  --color-puzzle-target: #FF9F0A;
  --color-puzzle-cages: #0A84FF;
  --color-puzzle-sums: #BF5AF2;
  --color-wheel-selection: #E65100;
  --color-wheel-ripple: rgba(230, 81, 0, 0.6);
  --color-streak-freeze: #64D2FF;
  --color-plus-mark: #F2C14E;
  --color-backdrop-top: #242426;
  --color-backdrop-bottom: #141415;
  --color-backdrop-ink: #EDEDED;
  --color-backdrop-ink-soft: #9A9A9F;
  --color-brand-mark: rgba(255, 255, 255, 0.07);
  --color-glass-top: #2F2F32;
  --color-glass-bottom: #252527;
  --color-glass-ink: #EDEDED;
  --color-glass-ink-soft: #9A9A9F;
  --color-glass-highlight: rgba(255, 255, 255, 0.1);
  --color-glass-lowlight: rgba(0, 0, 0, 0);
  --color-glass-shadow: rgba(0, 0, 0, 0.5);
  --color-badge-top: #38383B;
  --color-badge-bottom: #2C2C2F;
  --color-chip-fill: rgba(255, 255, 255, 0.06);
  --color-brand-accent: #61CAF2;
  --color-pill-top: #61CAF2;
  --color-pill-bottom: #00C0E8;
  --color-pill-ink: #04212C;
  --color-pill-highlight: rgba(255, 255, 255, 0.7);
  --color-pill-lowlight: rgba(10, 95, 128, 0.6);
  --color-logo-top: #61CAF2;
  --color-logo-bottom: #00C0E8;
  --color-logo-on-glass-top: #61CAF2;
  --color-logo-on-glass-bottom: #00C0E8;
  --color-launch-background: #242426;
  --color-logo-shadow: rgba(0, 0, 0, 0.6);
  --color-brand-decode: #4CD08A;
  --color-brand-target: #FF9F43;
  --color-brand-cages: #61CAF2;
  --color-brand-cross: #B48CFF;
  --color-glass-solved: #4CD08A;
  --color-brand-flame: #FF9F43;
  --color-board-correct: #2E8B57;
  --color-board-present: #B8860B;
  --color-board-absent: #48484A;
  --color-glass-key-tint-top: #24414E;
  --color-glass-key-tint-bottom: #1B323D;
  --color-glass-key-tint-ink: #61CAF2;
  --color-glass-key-hint-top: #4A3F1F;
  --color-glass-key-hint-bottom: #3A3118;
  --color-glass-key-hint-ink: #F2C14E;
  --color-glass-key-danger-top: #CF3F2E;
  --color-glass-key-danger-bottom: #B3301F;
  --color-glass-key-danger-ink: #FFFFFF;
  --color-glass-colour-highlight: rgba(255, 255, 255, 0.2);
  --color-glass-colour-lowlight: rgba(0, 0, 0, 0.15);
  --color-glass-colour-sheen: rgba(255, 255, 255, 0.14);
  --color-board-empty: rgba(255, 255, 255, 0.03);
  --color-board-empty-edge: rgba(255, 255, 255, 0.12);
  --color-board-active-edge: rgba(97, 202, 242, 0.55);
  --color-board-ink: #EDEDED;
  --color-wheel-plate-top: #2F2F32;
  --color-wheel-plate-bottom: #232325;
  --color-wheel-chosen-edge: rgba(255, 255, 255, 0.3);
  --color-wheel-solved-edge: rgba(255, 255, 255, 0.25);
  --color-wheel-plate-edge: #2C2C2F;
  --color-wheel-sign-ink: #61CAF2;
  --color-board-square: #1E1E20;
  --color-board-square-line: #3A3A3D;
  --color-board-cage-edge: #D8D8DC;
  --color-board-selected: #365C6C;
  --color-board-peer: #242E33;
  --color-board-clue-ink: #CFCFD4;
  --color-board-note-ink: #ADADB2;
  --color-board-hinted: #61CAF2;
  --color-board-mistake: #FF8A80;
  --color-board-block: #3A3A3C;
  --color-board-block-ink: #FFFFFF;
  --color-board-block-mistake: #FF9E9E;
  --color-board-block-diagonal: rgba(255, 255, 255, 0.32);
  --color-board-block-line: rgba(255, 255, 255, 0.1);
  --color-calendar-ring: #61CAF2;
  --color-calendar-ring-track: #3E6A7C;
  --color-calendar-day-full: rgba(97, 202, 242, 0.16);
  --color-calendar-day-faded: #5A5A5E;
  --color-calendar-plus-badge: #61CAF2;
  --color-calendar-plus-badge-ink: #04212C;
  --color-stats-freeze: #64D2FF;
  --color-chart-bar-soft: #2D5B44;
  --color-settings-toggle: #30A46C;
  --color-glass-danger: #FF6B6B;
  --color-glass-divider: rgba(255, 255, 255, 0.08);
  --color-plan-selected: #61CAF2;
  --color-plan-radio: #5A5A5E;
}

.text-small-icon {
  font: var(--text-small-icon);
}

.text-card-icon {
  font: var(--text-card-icon);
}

.text-key-icon {
  font: var(--text-key-icon);
}

.text-mark-symbol {
  font: var(--text-mark-symbol);
}

.text-wheel-tile {
  font-weight: 700;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  font-size: calc(var(--element-size, 40px) * var(--text-wheel-tile-share));
  font-variant-numeric: tabular-nums;
}

.text-wheel-bulb {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: calc(var(--element-size, 40px) * var(--text-wheel-bulb-share));
}

.text-grid-mark {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: calc(var(--element-size, 40px) * var(--text-grid-mark-share));
}

.text-wordmark {
  font-weight: 800;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  font-size: calc(var(--element-size, 40px) * var(--text-wordmark-share));
}

.text-brand-title {
  font: var(--text-brand-title);
}

.text-brand-tagline {
  font: var(--text-brand-tagline);
}

.text-brand-card-title {
  font: var(--text-brand-card-title);
}

.text-brand-card-detail {
  font: var(--text-brand-card-detail);
  color: var(--color-glass-ink-soft);
}

.text-brand-pill {
  font: var(--text-brand-pill);
}

.text-brand-key {
  font: var(--text-brand-key);
  font-variant-numeric: tabular-nums;
}

.text-brand-key-label {
  font: var(--text-brand-key-label);
}

.text-brand-nav-title {
  font: var(--text-brand-nav-title);
}

.text-brand-nav-subtitle {
  font: var(--text-brand-nav-subtitle);
  color: var(--color-backdrop-ink-soft);
}

.text-brand-stat-value {
  font: var(--text-brand-stat-value);
  font-variant-numeric: tabular-nums;
}

.text-brand-stat-label {
  font: var(--text-brand-stat-label);
  color: var(--color-glass-ink-soft);
}

.text-brand-chevron {
  font: var(--text-brand-chevron);
}

.text-brand-heading {
  font: var(--text-brand-heading);
  color: var(--color-backdrop-ink);
}

.text-brand-subheading {
  font: var(--text-brand-subheading);
  color: var(--color-backdrop-ink-soft);
}

.text-brand-status {
  font: var(--text-brand-status);
}

.text-brand-chip {
  font: var(--text-brand-chip);
  font-variant-numeric: tabular-nums;
}

.text-brand-notice {
  font: var(--text-brand-notice);
}

.text-brand-tile {
  font: var(--text-brand-tile);
  font-variant-numeric: tabular-nums;
}

.text-brand-running-total {
  font: var(--text-brand-running-total);
  font-variant-numeric: tabular-nums;
  color: var(--color-backdrop-ink-soft);
}

.text-brand-nav-icon {
  font: var(--text-brand-nav-icon);
}

.text-brand-key-note {
  font: var(--text-brand-key-note);
  font-variant-numeric: tabular-nums;
}

.text-board-grid-digit {
  font-weight: 700;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  font-size: calc(var(--element-size, 40px) * var(--text-board-grid-digit-share));
  font-variant-numeric: tabular-nums;
}

.text-board-cages-clue {
  font-weight: 800;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  font-size: calc(var(--element-size, 40px) * var(--text-board-cages-clue-share));
  font-variant-numeric: tabular-nums;
}

.text-board-grid-note {
  font-weight: 700;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  font-size: calc(var(--element-size, 40px) * var(--text-board-grid-note-share));
  font-variant-numeric: tabular-nums;
}

.text-board-cross-clue {
  font-weight: 800;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  font-size: calc(var(--element-size, 40px) * var(--text-board-cross-clue-share));
  font-variant-numeric: tabular-nums;
}

.text-brand-goal {
  font: var(--text-brand-goal);
  font-variant-numeric: tabular-nums;
  color: var(--color-backdrop-ink);
}

.text-brand-result-headline {
  font: var(--text-brand-result-headline);
}

.text-brand-result-detail {
  font: var(--text-brand-result-detail);
  color: var(--color-glass-ink-soft);
}

.text-brand-weekday {
  font: var(--text-brand-weekday);
  color: var(--color-glass-ink-soft);
}

.text-brand-calendar-day {
  font: var(--text-brand-calendar-day);
  font-variant-numeric: tabular-nums;
}

.text-brand-calendar-today {
  font: var(--text-brand-calendar-today);
  font-variant-numeric: tabular-nums;
}

.text-brand-plus-badge {
  font: var(--text-brand-plus-badge);
}

.text-brand-legend {
  font: var(--text-brand-legend);
  color: var(--color-backdrop-ink);
}

.text-brand-note {
  font: var(--text-brand-note);
  color: var(--color-backdrop-ink-soft);
}

.text-brand-chart-title {
  font: var(--text-brand-chart-title);
  color: var(--color-glass-ink-soft);
}

.text-brand-chart-number {
  font: var(--text-brand-chart-number);
  font-variant-numeric: tabular-nums;
}

.text-brand-chart-count {
  font: var(--text-brand-chart-count);
  font-variant-numeric: tabular-nums;
  color: var(--color-glass-ink-soft);
}

.text-brand-section {
  font: var(--text-brand-section);
}

.text-brand-row {
  font: var(--text-brand-row);
}

.text-brand-row-value {
  font: var(--text-brand-row-value);
  color: var(--color-brand-accent);
}

.text-brand-link {
  font: var(--text-brand-link);
}

.text-brand-list-row {
  font: var(--text-brand-list-row);
}

.text-brand-plus-tag {
  font: var(--text-brand-plus-tag);
}

.text-brand-plan-name {
  font: var(--text-brand-plan-name);
}

.text-brand-plan-detail {
  font: var(--text-brand-plan-detail);
  color: var(--color-glass-ink-soft);
}

.text-brand-legal {
  font: var(--text-brand-legal);
  color: var(--color-backdrop-ink-soft);
}

.text-brand-sheet-title {
  font: var(--text-brand-sheet-title);
}

.text-brand-sheet-lead {
  font: var(--text-brand-sheet-lead);
  color: var(--color-brand-accent);
}

.text-brand-body {
  font: var(--text-brand-body);
}