/* GENERATED by `npm run tokens` (scripts/tokens.mjs) from design/tokens.json — do not edit. */
/* Light on :root; dark follows the system unless the page sets data-theme. */

:root {
  color-scheme: light dark;
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-display-font: var(--font-display);
  --type-display-weight: 700;
  --type-display-size: 28px;
  --type-display-line: 34px;
  --type-display-tracking: -0.6px;
  --type-title-font: var(--font-display);
  --type-title-weight: 700;
  --type-title-size: 24px;
  --type-title-line: 30px;
  --type-title-tracking: -0.5px;
  --type-heading-font: var(--font-display);
  --type-heading-weight: 600;
  --type-heading-size: 19px;
  --type-heading-line: 24px;
  --type-heading-tracking: -0.3px;
  --type-figure-font: var(--font-display);
  --type-figure-weight: 700;
  --type-figure-size: 40px;
  --type-figure-line: 44px;
  --type-figure-tracking: -1px;
  --type-figure-small-font: var(--font-display);
  --type-figure-small-weight: 700;
  --type-figure-small-size: 22px;
  --type-figure-small-line: 26px;
  --type-figure-small-tracking: -0.4px;
  --type-dutch-hero-font: var(--font-body);
  --type-dutch-hero-weight: 800;
  --type-dutch-hero-size: 32px;
  --type-dutch-hero-line: 38px;
  --type-dutch-hero-tracking: -0.6px;
  --type-dutch-large-font: var(--font-body);
  --type-dutch-large-weight: 800;
  --type-dutch-large-size: 22px;
  --type-dutch-large-line: 28px;
  --type-dutch-large-tracking: -0.3px;
  --type-dutch-font: var(--font-body);
  --type-dutch-weight: 700;
  --type-dutch-size: 17px;
  --type-dutch-line: 24px;
  --type-dutch-tracking: 0;
  --type-body-font: var(--font-body);
  --type-body-weight: 500;
  --type-body-size: 17px;
  --type-body-line: 24px;
  --type-body-tracking: 0;
  --type-body-strong-font: var(--font-body);
  --type-body-strong-weight: 700;
  --type-body-strong-size: 17px;
  --type-body-strong-line: 24px;
  --type-body-strong-tracking: 0;
  --type-callout-font: var(--font-body);
  --type-callout-weight: 600;
  --type-callout-size: 15px;
  --type-callout-line: 21px;
  --type-callout-tracking: 0;
  --type-caption-font: var(--font-body);
  --type-caption-weight: 600;
  --type-caption-size: 13px;
  --type-caption-line: 18px;
  --type-caption-tracking: 0;
  --type-eyebrow-font: var(--font-body);
  --type-eyebrow-weight: 700;
  --type-eyebrow-size: 13px;
  --type-eyebrow-line: 18px;
  --type-eyebrow-tracking: 0;
  --type-button-font: var(--font-body);
  --type-button-weight: 800;
  --type-button-size: 19px;
  --type-button-line: 24px;
  --type-button-tracking: 0;
  --type-button-small-font: var(--font-body);
  --type-button-small-weight: 800;
  --type-button-small-size: 15px;
  --type-button-small-line: 20px;
  --type-button-small-tracking: 0;
  --type-tab-font: var(--font-body);
  --type-tab-weight: 800;
  --type-tab-size: 13px;
  --type-tab-line: 16px;
  --type-tab-tracking: 0;
  --type-tag-font: var(--font-body);
  --type-tag-weight: 800;
  --type-tag-size: 11px;
  --type-tag-line: 14px;
  --type-tag-tracking: 0.6px;
  --type-hero-sub-font: var(--font-body);
  --type-hero-sub-weight: 700;
  --type-hero-sub-size: 19px;
  --type-hero-sub-line: 25px;
  --type-hero-sub-tracking: 0;
  --type-tile-title-font: var(--font-body);
  --type-tile-title-weight: 800;
  --type-tile-title-size: 16px;
  --type-tile-title-line: 20px;
  --type-tile-title-tracking: 0;
  --type-unit-kicker-font: var(--font-body);
  --type-unit-kicker-weight: 700;
  --type-unit-kicker-size: 12px;
  --type-unit-kicker-line: 16px;
  --type-unit-kicker-tracking: 0;
  --type-unit-title-font: var(--font-body);
  --type-unit-title-weight: 800;
  --type-unit-title-size: 16px;
  --type-unit-title-line: 21px;
  --type-unit-title-tracking: 0;
  --type-unit-status-font: var(--font-body);
  --type-unit-status-weight: 800;
  --type-unit-status-size: 12px;
  --type-unit-status-line: 16px;
  --type-unit-status-tracking: 0;
  --type-tile-status-font: var(--font-body);
  --type-tile-status-weight: 800;
  --type-tile-status-size: 13px;
  --type-tile-status-line: 16px;
  --type-tile-status-tracking: 0;
  --type-dutch-answer-font: var(--font-body);
  --type-dutch-answer-weight: 800;
  --type-dutch-answer-size: 20px;
  --type-dutch-answer-line: 26px;
  --type-dutch-answer-tracking: 0;
  --type-writing-font: var(--font-body);
  --type-writing-weight: 500;
  --type-writing-size: 17px;
  --type-writing-line: 25px;
  --type-writing-tracking: 0;
  --type-verdict-font: var(--font-display);
  --type-verdict-weight: 700;
  --type-verdict-size: 22px;
  --type-verdict-line: 26px;
  --type-verdict-tracking: -0.4px;
  --type-option-key-font: var(--font-body);
  --type-option-key-weight: 700;
  --type-option-key-size: 12px;
  --type-option-key-line: 14px;
  --type-option-key-tracking: 0;
  --type-interval-font: var(--font-body);
  --type-interval-weight: 700;
  --type-interval-size: 11px;
  --type-interval-line: 14px;
  --type-interval-tracking: 0;
  --type-speaker-initial-font: var(--font-display);
  --type-speaker-initial-weight: 700;
  --type-speaker-initial-size: 22px;
  --type-speaker-initial-line: 22px;
  --type-speaker-initial-tracking: 0;
  --type-speaker-initial-small-font: var(--font-display);
  --type-speaker-initial-small-weight: 700;
  --type-speaker-initial-small-size: 13px;
  --type-speaker-initial-small-line: 13px;
  --type-speaker-initial-small-tracking: 0;
  --type-banner-font: var(--font-body);
  --type-banner-weight: 800;
  --type-banner-size: 11px;
  --type-banner-line: 14px;
  --type-banner-tracking: 0.6px;
  --type-offline-font: var(--font-body);
  --type-offline-weight: 800;
  --type-offline-size: 13px;
  --type-offline-line: 16px;
  --type-offline-tracking: 0;
  --type-score-font: var(--font-display);
  --type-score-weight: 700;
  --type-score-size: 48px;
  --type-score-line: 54px;
  --type-score-tracking: -1.4px;
  --type-score-total-font: var(--font-display);
  --type-score-total-weight: 700;
  --type-score-total-size: 32px;
  --type-score-total-line: 64px;
  --type-score-total-tracking: -2.4px;
  --type-section-font: var(--font-body);
  --type-section-weight: 800;
  --type-section-size: 15px;
  --type-section-line: 20px;
  --type-section-tracking: 0;
  --type-field-label-font: var(--font-body);
  --type-field-label-weight: 800;
  --type-field-label-size: 15px;
  --type-field-label-line: 20px;
  --type-field-label-tracking: 0;
  --type-counter-font: var(--font-body);
  --type-counter-weight: 800;
  --type-counter-size: 14px;
  --type-counter-line: 18px;
  --type-counter-tracking: 0;
  --type-segment-font: var(--font-body);
  --type-segment-weight: 800;
  --type-segment-size: 14px;
  --type-segment-line: 18px;
  --type-segment-tracking: 0;
  --type-percent-font: var(--font-body);
  --type-percent-weight: 800;
  --type-percent-size: 12px;
  --type-percent-line: 16px;
  --type-percent-tracking: 0;
  --type-chip-button-font: var(--font-body);
  --type-chip-button-weight: 800;
  --type-chip-button-size: 14px;
  --type-chip-button-line: 18px;
  --type-chip-button-tracking: 0;
  --type-prompt-pt-font: var(--font-display);
  --type-prompt-pt-weight: 600;
  --type-prompt-pt-size: 22px;
  --type-prompt-pt-line: 29px;
  --type-prompt-pt-tracking: -0.4px;
  --type-feedback-label-font: var(--font-body);
  --type-feedback-label-weight: 800;
  --type-feedback-label-size: 13px;
  --type-feedback-label-line: 18px;
  --type-feedback-label-tracking: 0;
  --type-word-tile-font: var(--font-body);
  --type-word-tile-weight: 800;
  --type-word-tile-size: 17px;
  --type-word-tile-line: 22px;
  --type-word-tile-tracking: 0;
  --type-rec-time-font: var(--font-body);
  --type-rec-time-weight: 800;
  --type-rec-time-size: 15px;
  --type-rec-time-line: 20px;
  --type-rec-time-tracking: 0;
  --type-web-headline-font: var(--font-display);
  --type-web-headline-weight: 700;
  --type-web-headline-size: 40px;
  --type-web-headline-line: 44px;
  --type-web-headline-tracking: -1.2px;
  --type-web-headline-wide-font: var(--font-display);
  --type-web-headline-wide-weight: 700;
  --type-web-headline-wide-size: 64px;
  --type-web-headline-wide-line: 68px;
  --type-web-headline-wide-tracking: -2px;
  --type-web-title-font: var(--font-display);
  --type-web-title-weight: 700;
  --type-web-title-size: 26px;
  --type-web-title-line: 32px;
  --type-web-title-tracking: -0.6px;
  --type-web-title-wide-font: var(--font-display);
  --type-web-title-wide-weight: 700;
  --type-web-title-wide-size: 34px;
  --type-web-title-wide-line: 42px;
  --type-web-title-wide-tracking: -0.8px;
  --type-web-lead-font: var(--font-body);
  --type-web-lead-weight: 500;
  --type-web-lead-size: 18px;
  --type-web-lead-line: 27px;
  --type-web-lead-tracking: 0;
  --type-web-lead-wide-font: var(--font-body);
  --type-web-lead-wide-weight: 500;
  --type-web-lead-wide-size: 21px;
  --type-web-lead-wide-line: 32px;
  --type-web-lead-wide-tracking: 0;
  --type-web-card-title-font: var(--font-display);
  --type-web-card-title-weight: 700;
  --type-web-card-title-size: 22px;
  --type-web-card-title-line: 28px;
  --type-web-card-title-tracking: -0.4px;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-0-5: 2px;
  --space-1-5: 6px;
  --space-2-5: 10px;
  --space-3-5: 14px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-button: 999px;
  --radius-tile: 22px;
  --radius-unit-icon: 18px;
  --radius-full: 999px;
  --radius-checkbox: 7px;
  --radius-segment: 9px;
  --radius-segment-track: 12px;
  --radius-option-key: 8px;
  --radius-record-stop: 7px;
  --radius-button-small: 13px;
  --radius-tile-large: 18px;
  --radius-disc: 14px;
  --radius-disc-hero: 30px;
  --radius-card-result: 30px;
  --radius-not-found-disc: 40px;
  --radius-welcome-panel: 32px;
  --radius-card-doc: 20px;
  --radius-card-audio: 24px;
  --radius-field-large: 20px;
  --radius-option: 18px;
  --radius-grade: 18px;
  --radius-word-tile: 14px;
  --radius-recording-player: 20px;
  --radius-web-phone: 34px;
  --radius-web-phone-screen: 28px;
  --size-touch-min: 44px;
  --size-button-height: 56px;
  --size-button-height-small: 44px;
  --size-option-height: 58px;
  --size-row-min: 58px;
  --size-row-unit: 68px;
  --size-input-height: 56px;
  --size-tile-height: 46px;
  --size-play-button: 44px;
  --size-play-button-large: 64px;
  --size-record-button: 84px;
  --size-icon: 20px;
  --size-icon-small: 16px;
  --size-icon-nav: 22px;
  --size-icon-tile: 44px;
  --size-icon-empty: 40px;
  --size-avatar: 40px;
  --size-header-button: 44px;
  --size-progress-height: 6px;
  --size-meter-height: 6px;
  --size-segment-gap: 4px;
  --size-tabbar-height: 62px;
  --size-tabbar-inset: 20px;
  --size-tabbar-bottom: 12px;
  --size-header-height: 56px;
  --size-chip-height: 28px;
  --size-grabber: 36px;
  --size-chapter-tile-height: 104px;
  --size-illustration-small: 32px;
  --size-illustration-tile: 40px;
  --size-illustration-card: 72px;
  --size-illustration-hero: 104px;
  --size-play-button-card: 56px;
  --size-play-button-hero: 88px;
  --size-icon-play-card: 24px;
  --size-icon-play-large: 30px;
  --size-icon-play-hero: 36px;
  --size-play-ring: 2px;
  --size-play-halo: 6px;
  --size-icon-tile-large: 56px;
  --size-icon-tile-intro: 64px;
  --size-icon-tile-hero: 80px;
  --size-brand-mark: 80px;
  --size-wordmark-width: 214px;
  --size-avatar-large: 60px;
  --size-icon-button-solid: 36px;
  --size-icon-solid: 18px;
  --size-badge-height: 26px;
  --size-tag-height: 18px;
  --size-grabber-height: 5px;
  --size-accent-line: 3px;
  --size-icon-chip: 14px;
  --size-counter-min: 36px;
  --size-result-badge: 84px;
  --size-result-badge-icon: 40px;
  --size-result-badge-icon-notyet: 36px;
  --size-result-badge-halo: 10px;
  --size-hatch-stripe: 4px;
  --size-hatch-gap: 3px;
  --size-answer-input-height: 60px;
  --size-textarea-min: 150px;
  --size-icon-verdict: 22px;
  --size-checkbox: 24px;
  --size-checkbox-border: 1.5px;
  --size-switch-width: 51px;
  --size-switch-height: 31px;
  --size-switch-thumb: 27px;
  --size-segment-height: 38px;
  --size-segment-track-padding: 3px;
  --size-chip-button-height: 36px;
  --size-option-key: 26px;
  --size-tile-lip: 2px;
  --size-answer-line-min: 112px;
  --size-answer-line-rule: 56px;
  --size-answer-line-border: 1.5px;
  --size-cloze-blank: 76px;
  --size-verdict-circle: 32px;
  --size-grade-button-height: 56px;
  --size-play-button-dialogue: 52px;
  --size-icon-play-dialogue: 22px;
  --size-icon-play-recording: 18px;
  --size-audio-track: 4px;
  --size-speaker-avatar: 64px;
  --size-speaker-avatar-small: 34px;
  --size-speaker-ring: 2px;
  --size-speaker-ring-gap: 3px;
  --size-icon-record: 32px;
  --size-record-stop: 26px;
  --size-record-halo-inner: 10px;
  --size-record-halo-outer: 22px;
  --size-level-bar: 4px;
  --size-level-bar-min: 6px;
  --size-level-bar-max: 40px;
  --size-level-meter-height: 44px;
  --size-recording-dot: 10px;
  --size-recording-player-height: 56px;
  --size-criterion-circle: 22px;
  --size-banner-height: 32px;
  --size-offline-height: 34px;
  --size-testmode-stripes: 40px;
  --size-testmode-stripe-band: 6px;
  --size-tab-stroke: 2px;
  --size-tab-stroke-active: 2.4px;
  --size-icon-back: 26px;
  --size-icon-empty-glyph: 30px;
  --size-glass-blur: 24px;
  --size-header-collapse-scroll: 40px;
  --size-welcome-mark: 150px;
  --size-welcome-art: 240px;
  --size-welcome-art-consent: 200px;
  --size-welcome-consent-illustration: 120px;
  --size-welcome-sun: 64px;
  --size-page-dot: 8px;
  --size-page-dot-active: 22px;
  --size-ring: 1.5px;
  --size-ring-strong: 2px;
  --size-ring-gap: 3px;
  --size-illustration-button: 28px;
  --size-tab-item-min: 64px;
  --size-tabbar-padding: 10px;
  --size-chip-padding: 11px;
  --size-hero-min: 168px;
  --size-hero-disc: 46px;
  --size-hero-ill-room: 70px;
  --size-hero-ill-top: -30px;
  --size-hero-ill-right: -8px;
  --size-unit-disc: 52px;
  --size-unit-illustration: 32px;
  --size-unit-check: 28px;
  --size-unit-meter: 120px;
  --size-timeline-node: 16px;
  --size-timeline-node-ring: 3px;
  --size-timeline-line: 2px;
  --size-timeline-line-x: 7px;
  --size-row-tile-min: 76px;
  --size-chapter-illustration: 40px;
  --size-chapter-illustration-current: 80px;
  --size-empty-disc: 88px;
  --size-empty-illustration: 52px;
  --size-sheet-disc: 64px;
  --size-sheet-illustration: 40px;
  --size-result-illustration: 108px;
  --size-progress-illustration: 84px;
  --size-result-dot: 4px;
  --size-field-halo: 5px;
  --size-field-padding: 18px;
  --size-meter-pb: 5px;
  --size-recording-track: 5px;
  --size-not-found-disc: 120px;
  --size-not-found-illustration: 80px;
  --size-waveform-bar: 4px;
  --size-waveform-gap: 3px;
  --size-waveform-min: 8px;
  --size-waveform-max: 40px;
  --size-play-disc-small: 32px;
  --size-web-phone: 196px;
  --size-web-phone-wide: 250px;
  --size-web-phone-bezel: 6px;
  --size-web-phone-drop: 48px;
  --size-web-highlight: 12px;
  --size-web-highlight-wide: 16px;
  --size-web-unit-card-min: 240px;
  --size-web-store-badge: 48px;
  --layout-gutter: 20px;
  --layout-section-gap: 26px;
  --layout-card-gap: 12px;
  --layout-card-padding: 20px;
  --layout-column-max: 560px;
  --layout-column-max-wide: 1120px;
  --layout-sheet-max: 560px;
  --layout-timeline-indent: 26px;
  --layout-dialog-width: 318px;
  --layout-wide-min: 900px;
  --layout-toast-offset: 104px;
  --angle-welcome-mark: -6deg;
  --angle-welcome-card: -2deg;
  --angle-illustration-tilt: 10deg;
  --angle-illustration-tilt-progress: 14deg;
  --angle-web-phone-back: -5deg;
  --angle-web-phone-front: 5deg;
  --bloom-orange-x: -10%;
  --bloom-orange-y: -5%;
  --bloom-orange-radius: 70%;
  --duration-instant: 90ms;
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
  --duration-emphasized: 480ms;
  --duration-pulse: 1400ms;
  --duration-skeleton-pulse: 1400ms;
  --duration-toast: 3000ms;
  --duration-dialogue-line-gap: 400ms;
  --duration-stagger: 40ms;
  --duration-round-advance: 900ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --easing-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-pop: cubic-bezier(0.3, 1.6, 0.5, 1);
  --easing-splash-morph: cubic-bezier(0.55, 0, 0.25, 1);
  --press-scale: 0.97;
  --opacity-disabled: 0.4;
  --opacity-locked: 0.5;
  --opacity-hatch-accent: 0.45;
  --opacity-hatch-warn: 0.4;
  --opacity-badge-halo: 0.5;
  --opacity-dimmed: 0.55;
  --opacity-interval: 0.8;
  --opacity-record-halo-inner: 0.18;
  --opacity-record-halo-outer: 0.08;
  --opacity-skeleton-dim: 0.55;
  --opacity-action-fade: 0.3;
  --opacity-hero-disc: 0.26;
  --opacity-unit-disc: 0.22;
  --opacity-on-unit-muted: 0.9;
  --opacity-locked-surface: 0.6;
  --opacity-result-dot: 0.35;
  --opacity-segment-on-tint: 0.7;
  --opacity-segment-on-tint-dark: 0.14;
  --opacity-waveform-rest: 0.35;
  --color-surface: #f7f8fa;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f0f2f5;
  --color-surface-overlay: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.86);
  --color-surface-pressed: rgba(17, 19, 24, 0.05);
  --color-border-subtle: #eceef2;
  --color-border: rgba(17, 19, 24, 0.14);
  --color-border-strong: #80868f;
  --color-text: #111318;
  --color-text-muted: #5f6571;
  --color-text-subtle: #666c78;
  --color-accent: #f26a1f;
  --color-accent-pressed: #dd5a12;
  --color-accent-strong: #d2420c;
  --color-on-accent: #ffffff;
  --color-accent-fg: #b4410a;
  --color-accent-surface: #ffede2;
  --color-good: #1e9e55;
  --color-good-fg: #137a3e;
  --color-good-surface: #e3f7ea;
  --color-critical: #d5383e;
  --color-critical-fg: #b4232b;
  --color-critical-surface: #ffe9e8;
  --color-on-critical: #ffffff;
  --color-warn: #e8a10c;
  --color-warn-fg: #8a5a00;
  --color-warn-surface: #fff4d6;
  --color-info: #3b7bef;
  --color-info-fg: #1f5fd0;
  --color-info-surface: #e6efff;
  --color-recording: #d5383e;
  --color-on-recording: #ffffff;
  --color-focus: #3b7bef;
  --color-skeleton: #eceef2;
  --color-scrim: rgba(17, 19, 24, 0.32);
  --color-toast-bg: #ffffff;
  --color-toast-fg: #111318;
  --color-tint-red: #ffe1e1;
  --color-tint-red-fg: #a8262d;
  --color-tint-yellow: #fff1c9;
  --color-tint-yellow-fg: #7d5300;
  --color-tint-violet: #ece3ff;
  --color-tint-violet-fg: #5b3fd1;
  --color-tint-blue: #ddebff;
  --color-tint-blue-fg: #1f5fd0;
  --color-tint-green: #ddf5e5;
  --color-tint-green-fg: #137a3e;
  --color-unit-violet: #7452f0;
  --color-unit-green: #15803f;
  --color-unit-blue: #2563eb;
  --color-unit-red: #d23a40;
  --color-on-unit: #ffffff;
  --color-brand-orange: #ff7a2f;
  --color-brand-orange-2: #ff9a55;
  --color-brand-yellow: #ffd23f;
  --color-brand-green: #1fa855;
  --color-brand-green-dark: #16934a;
  --color-brand-amber: #ffb800;
  --color-brand-red: #c8102e;
  --color-brand-white: #ffffff;
  --color-brand-blue: #21468b;
  --color-brand-ink: #111318;
  --color-ambient-orange: rgba(255, 122, 47, 0.07);
  --color-ambient-green: rgba(43, 196, 106, 0);
  --color-sso-bg: #ffffff;
  --color-sso-fg: #111318;
  --color-segment-thumb: #ffffff;
  --color-tabbar-bg: #ffffff;
  --color-tabbar-active: #d2420c;
  --color-tabbar-inactive: #666c78;
  --color-testmode-bg: #fff1c9;
  --color-testmode-fg: #5c3d00;
  --color-testmode-stripe: #f26a1f;
  --color-on-accent-badge: rgba(255, 255, 255, 0.24);
  --color-switch-thumb: #ffffff;
  --color-mark-diff: rgba(242, 165, 0, 0.45);
  --color-google-blue: #4285f4;
  --color-google-green: #34a853;
  --color-google-yellow: #fbbc05;
  --color-google-red: #ea4335;
  --gradient-action: linear-gradient(160deg, #f26a1f, #e85a12);
  --gradient-hero: linear-gradient(135deg, #f26a1f, #e85a12);
  --gradient-result: linear-gradient(160deg, #fff1c9, #ffe1e1);
  --gradient-brand: linear-gradient(135deg, #1fa855, #ffd23f);
  --shadow-card: 0 1px 2px rgba(20, 30, 50, 0.04), 0 10px 26px -14px rgba(20, 40, 80, 0.22);
  --shadow-hero: 0 18px 36px -18px rgba(242, 106, 31, 0.65);
  --shadow-float: 0 12px 30px -10px rgba(20, 40, 80, 0.28), 0 0 0 1px #eceef2;
  --shadow-sheet: 0 -10px 40px rgba(20, 40, 80, 0.16);
  --shadow-tab-active: 0 8px 18px -8px rgba(210, 66, 12, 0.7);
  --shadow-button: 0 10px 22px -10px rgba(242, 106, 31, 0.85);
  --filter-illustration: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.22));
  --shadow-segment: 0 1px 3px rgba(16, 22, 42, 0.14), 0 0 0 0.5px rgba(16, 22, 42, 0.14);
  --shadow-switch-thumb: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-splash: 0 16px 18px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-surface: #0f1218;
    --color-surface-raised: #1a1e27;
    --color-surface-sunken: #232834;
    --color-surface-overlay: #1e232d;
    --color-surface-glass: rgba(26, 30, 39, 0.86);
    --color-surface-pressed: rgba(244, 245, 247, 0.06);
    --color-border-subtle: #272c37;
    --color-border: rgba(244, 245, 247, 0.16);
    --color-border-strong: #6f7686;
    --color-text: #f4f5f7;
    --color-text-muted: #9aa1ae;
    --color-text-subtle: #8e95a3;
    --color-accent: #f26a1f;
    --color-accent-pressed: #dd5a12;
    --color-accent-strong: #d2420c;
    --color-on-accent: #ffffff;
    --color-accent-fg: #ff9a5c;
    --color-accent-surface: #3a2216;
    --color-good: #2bc46a;
    --color-good-fg: #4fd488;
    --color-good-surface: #12301e;
    --color-critical: #ff6b6b;
    --color-critical-fg: #ff8f8c;
    --color-critical-surface: #3b1f22;
    --color-on-critical: #111318;
    --color-warn: #ffc94a;
    --color-warn-fg: #ffd36b;
    --color-warn-surface: #3a3017;
    --color-info: #7fa9ff;
    --color-info-fg: #9dbdff;
    --color-info-surface: #18294a;
    --color-recording: #ff6b6b;
    --color-on-recording: #111318;
    --color-focus: #7fa9ff;
    --color-skeleton: #232834;
    --color-scrim: rgba(0, 0, 0, 0.62);
    --color-toast-bg: #2a303c;
    --color-toast-fg: #f4f5f7;
    --color-tint-red: #3b1f22;
    --color-tint-red-fg: #ff9da0;
    --color-tint-yellow: #3a3017;
    --color-tint-yellow-fg: #ffd36b;
    --color-tint-violet: #2b2442;
    --color-tint-violet-fg: #bba6ff;
    --color-tint-blue: #18294a;
    --color-tint-blue-fg: #8db8ff;
    --color-tint-green: #14301f;
    --color-tint-green-fg: #6fdb9a;
    --color-unit-violet: #7452f0;
    --color-unit-green: #15803f;
    --color-unit-blue: #2563eb;
    --color-unit-red: #d23a40;
    --color-on-unit: #ffffff;
    --color-brand-orange: #ff7a2f;
    --color-brand-orange-2: #ff9a55;
    --color-brand-yellow: #ffd23f;
    --color-brand-green: #1fa855;
    --color-brand-green-dark: #16934a;
    --color-brand-amber: #ffb800;
    --color-brand-red: #c8102e;
    --color-brand-white: #ffffff;
    --color-brand-blue: #21468b;
    --color-brand-ink: #f4f5f7;
    --color-ambient-orange: rgba(255, 122, 47, 0.1);
    --color-ambient-green: rgba(43, 196, 106, 0);
    --color-sso-bg: #ffffff;
    --color-sso-fg: #111318;
    --color-segment-thumb: #353b48;
    --color-tabbar-bg: #1a1e27;
    --color-tabbar-active: #d2420c;
    --color-tabbar-inactive: #8e95a3;
    --color-testmode-bg: #3a3017;
    --color-testmode-fg: #ffe08a;
    --color-testmode-stripe: #f26a1f;
    --color-on-accent-badge: rgba(255, 255, 255, 0.24);
    --color-switch-thumb: #ffffff;
    --color-mark-diff: rgba(255, 194, 61, 0.45);
    --color-google-blue: #4285f4;
    --color-google-green: #34a853;
    --color-google-yellow: #fbbc05;
    --color-google-red: #ea4335;
    --gradient-action: linear-gradient(160deg, #f26a1f, #e85a12);
    --gradient-hero: linear-gradient(135deg, #f26a1f, #e85a12);
    --gradient-result: linear-gradient(160deg, #3a3017, #3b1f22);
    --gradient-brand: linear-gradient(135deg, #1fa855, #ffd23f);
    --shadow-card: 0 0 0 1px rgba(244, 245, 247, 0.05), 0 16px 34px -18px rgba(0, 0, 0, 0.75);
    --shadow-hero: 0 18px 40px -20px rgba(242, 106, 31, 0.55);
    --shadow-float: 0 14px 34px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px #272c37;
    --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.7);
    --shadow-tab-active: 0 8px 18px -8px rgba(210, 66, 12, 0.7);
    --shadow-button: 0 10px 22px -10px rgba(242, 106, 31, 0.7);
    --filter-illustration: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45));
    --shadow-segment: 0 1px 3px rgba(16, 22, 42, 0.14), 0 0 0 0.5px rgba(242, 244, 250, 0.14);
    --shadow-switch-thumb: 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-splash: 0 16px 18px rgba(0, 0, 0, 0.28);
  }
}

[data-theme="light"] {
  color-scheme: light;
  --color-surface: #f7f8fa;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f0f2f5;
  --color-surface-overlay: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.86);
  --color-surface-pressed: rgba(17, 19, 24, 0.05);
  --color-border-subtle: #eceef2;
  --color-border: rgba(17, 19, 24, 0.14);
  --color-border-strong: #80868f;
  --color-text: #111318;
  --color-text-muted: #5f6571;
  --color-text-subtle: #666c78;
  --color-accent: #f26a1f;
  --color-accent-pressed: #dd5a12;
  --color-accent-strong: #d2420c;
  --color-on-accent: #ffffff;
  --color-accent-fg: #b4410a;
  --color-accent-surface: #ffede2;
  --color-good: #1e9e55;
  --color-good-fg: #137a3e;
  --color-good-surface: #e3f7ea;
  --color-critical: #d5383e;
  --color-critical-fg: #b4232b;
  --color-critical-surface: #ffe9e8;
  --color-on-critical: #ffffff;
  --color-warn: #e8a10c;
  --color-warn-fg: #8a5a00;
  --color-warn-surface: #fff4d6;
  --color-info: #3b7bef;
  --color-info-fg: #1f5fd0;
  --color-info-surface: #e6efff;
  --color-recording: #d5383e;
  --color-on-recording: #ffffff;
  --color-focus: #3b7bef;
  --color-skeleton: #eceef2;
  --color-scrim: rgba(17, 19, 24, 0.32);
  --color-toast-bg: #ffffff;
  --color-toast-fg: #111318;
  --color-tint-red: #ffe1e1;
  --color-tint-red-fg: #a8262d;
  --color-tint-yellow: #fff1c9;
  --color-tint-yellow-fg: #7d5300;
  --color-tint-violet: #ece3ff;
  --color-tint-violet-fg: #5b3fd1;
  --color-tint-blue: #ddebff;
  --color-tint-blue-fg: #1f5fd0;
  --color-tint-green: #ddf5e5;
  --color-tint-green-fg: #137a3e;
  --color-unit-violet: #7452f0;
  --color-unit-green: #15803f;
  --color-unit-blue: #2563eb;
  --color-unit-red: #d23a40;
  --color-on-unit: #ffffff;
  --color-brand-orange: #ff7a2f;
  --color-brand-orange-2: #ff9a55;
  --color-brand-yellow: #ffd23f;
  --color-brand-green: #1fa855;
  --color-brand-green-dark: #16934a;
  --color-brand-amber: #ffb800;
  --color-brand-red: #c8102e;
  --color-brand-white: #ffffff;
  --color-brand-blue: #21468b;
  --color-brand-ink: #111318;
  --color-ambient-orange: rgba(255, 122, 47, 0.07);
  --color-ambient-green: rgba(43, 196, 106, 0);
  --color-sso-bg: #ffffff;
  --color-sso-fg: #111318;
  --color-segment-thumb: #ffffff;
  --color-tabbar-bg: #ffffff;
  --color-tabbar-active: #d2420c;
  --color-tabbar-inactive: #666c78;
  --color-testmode-bg: #fff1c9;
  --color-testmode-fg: #5c3d00;
  --color-testmode-stripe: #f26a1f;
  --color-on-accent-badge: rgba(255, 255, 255, 0.24);
  --color-switch-thumb: #ffffff;
  --color-mark-diff: rgba(242, 165, 0, 0.45);
  --color-google-blue: #4285f4;
  --color-google-green: #34a853;
  --color-google-yellow: #fbbc05;
  --color-google-red: #ea4335;
  --gradient-action: linear-gradient(160deg, #f26a1f, #e85a12);
  --gradient-hero: linear-gradient(135deg, #f26a1f, #e85a12);
  --gradient-result: linear-gradient(160deg, #fff1c9, #ffe1e1);
  --gradient-brand: linear-gradient(135deg, #1fa855, #ffd23f);
  --shadow-card: 0 1px 2px rgba(20, 30, 50, 0.04), 0 10px 26px -14px rgba(20, 40, 80, 0.22);
  --shadow-hero: 0 18px 36px -18px rgba(242, 106, 31, 0.65);
  --shadow-float: 0 12px 30px -10px rgba(20, 40, 80, 0.28), 0 0 0 1px #eceef2;
  --shadow-sheet: 0 -10px 40px rgba(20, 40, 80, 0.16);
  --shadow-tab-active: 0 8px 18px -8px rgba(210, 66, 12, 0.7);
  --shadow-button: 0 10px 22px -10px rgba(242, 106, 31, 0.85);
  --filter-illustration: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.22));
  --shadow-segment: 0 1px 3px rgba(16, 22, 42, 0.14), 0 0 0 0.5px rgba(16, 22, 42, 0.14);
  --shadow-switch-thumb: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-splash: 0 16px 18px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-surface: #0f1218;
  --color-surface-raised: #1a1e27;
  --color-surface-sunken: #232834;
  --color-surface-overlay: #1e232d;
  --color-surface-glass: rgba(26, 30, 39, 0.86);
  --color-surface-pressed: rgba(244, 245, 247, 0.06);
  --color-border-subtle: #272c37;
  --color-border: rgba(244, 245, 247, 0.16);
  --color-border-strong: #6f7686;
  --color-text: #f4f5f7;
  --color-text-muted: #9aa1ae;
  --color-text-subtle: #8e95a3;
  --color-accent: #f26a1f;
  --color-accent-pressed: #dd5a12;
  --color-accent-strong: #d2420c;
  --color-on-accent: #ffffff;
  --color-accent-fg: #ff9a5c;
  --color-accent-surface: #3a2216;
  --color-good: #2bc46a;
  --color-good-fg: #4fd488;
  --color-good-surface: #12301e;
  --color-critical: #ff6b6b;
  --color-critical-fg: #ff8f8c;
  --color-critical-surface: #3b1f22;
  --color-on-critical: #111318;
  --color-warn: #ffc94a;
  --color-warn-fg: #ffd36b;
  --color-warn-surface: #3a3017;
  --color-info: #7fa9ff;
  --color-info-fg: #9dbdff;
  --color-info-surface: #18294a;
  --color-recording: #ff6b6b;
  --color-on-recording: #111318;
  --color-focus: #7fa9ff;
  --color-skeleton: #232834;
  --color-scrim: rgba(0, 0, 0, 0.62);
  --color-toast-bg: #2a303c;
  --color-toast-fg: #f4f5f7;
  --color-tint-red: #3b1f22;
  --color-tint-red-fg: #ff9da0;
  --color-tint-yellow: #3a3017;
  --color-tint-yellow-fg: #ffd36b;
  --color-tint-violet: #2b2442;
  --color-tint-violet-fg: #bba6ff;
  --color-tint-blue: #18294a;
  --color-tint-blue-fg: #8db8ff;
  --color-tint-green: #14301f;
  --color-tint-green-fg: #6fdb9a;
  --color-unit-violet: #7452f0;
  --color-unit-green: #15803f;
  --color-unit-blue: #2563eb;
  --color-unit-red: #d23a40;
  --color-on-unit: #ffffff;
  --color-brand-orange: #ff7a2f;
  --color-brand-orange-2: #ff9a55;
  --color-brand-yellow: #ffd23f;
  --color-brand-green: #1fa855;
  --color-brand-green-dark: #16934a;
  --color-brand-amber: #ffb800;
  --color-brand-red: #c8102e;
  --color-brand-white: #ffffff;
  --color-brand-blue: #21468b;
  --color-brand-ink: #f4f5f7;
  --color-ambient-orange: rgba(255, 122, 47, 0.1);
  --color-ambient-green: rgba(43, 196, 106, 0);
  --color-sso-bg: #ffffff;
  --color-sso-fg: #111318;
  --color-segment-thumb: #353b48;
  --color-tabbar-bg: #1a1e27;
  --color-tabbar-active: #d2420c;
  --color-tabbar-inactive: #8e95a3;
  --color-testmode-bg: #3a3017;
  --color-testmode-fg: #ffe08a;
  --color-testmode-stripe: #f26a1f;
  --color-on-accent-badge: rgba(255, 255, 255, 0.24);
  --color-switch-thumb: #ffffff;
  --color-mark-diff: rgba(255, 194, 61, 0.45);
  --color-google-blue: #4285f4;
  --color-google-green: #34a853;
  --color-google-yellow: #fbbc05;
  --color-google-red: #ea4335;
  --gradient-action: linear-gradient(160deg, #f26a1f, #e85a12);
  --gradient-hero: linear-gradient(135deg, #f26a1f, #e85a12);
  --gradient-result: linear-gradient(160deg, #3a3017, #3b1f22);
  --gradient-brand: linear-gradient(135deg, #1fa855, #ffd23f);
  --shadow-card: 0 0 0 1px rgba(244, 245, 247, 0.05), 0 16px 34px -18px rgba(0, 0, 0, 0.75);
  --shadow-hero: 0 18px 40px -20px rgba(242, 106, 31, 0.55);
  --shadow-float: 0 14px 34px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px #272c37;
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.7);
  --shadow-tab-active: 0 8px 18px -8px rgba(210, 66, 12, 0.7);
  --shadow-button: 0 10px 22px -10px rgba(242, 106, 31, 0.7);
  --filter-illustration: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45));
  --shadow-segment: 0 1px 3px rgba(16, 22, 42, 0.14), 0 0 0 0.5px rgba(242, 244, 250, 0.14);
  --shadow-switch-thumb: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-splash: 0 16px 18px rgba(0, 0, 0, 0.28);
}