/* Generated by scripts/web.mjs from shared/tokens/tokens.json. Do not edit. */

@font-face { font-family: "Barlow-Regular"; src: url("fonts/Barlow-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Barlow-Medium"; src: url("fonts/Barlow-Medium.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Barlow-SemiBold"; src: url("fonts/Barlow-SemiBold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Barlow-Bold"; src: url("fonts/Barlow-Bold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Barlow-ExtraBold"; src: url("fonts/Barlow-ExtraBold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowSemiCondensed-Regular"; src: url("fonts/BarlowSemiCondensed-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowSemiCondensed-BoldItalic"; src: url("fonts/BarlowSemiCondensed-BoldItalic.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowCondensed-SemiBold"; src: url("fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowSemiCondensed-Medium"; src: url("fonts/BarlowSemiCondensed-Medium.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowSemiCondensed-SemiBold"; src: url("fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowSemiCondensed-Bold"; src: url("fonts/BarlowSemiCondensed-Bold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowSemiCondensed-ExtraBold"; src: url("fonts/BarlowSemiCondensed-ExtraBold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowCondensed-Regular"; src: url("fonts/BarlowCondensed-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowCondensed-Bold"; src: url("fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowCondensed-BoldItalic"; src: url("fonts/BarlowCondensed-BoldItalic.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowCondensed-ExtraBoldItalic"; src: url("fonts/BarlowCondensed-ExtraBoldItalic.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "BarlowCondensed-ExtraBold"; src: url("fonts/BarlowCondensed-ExtraBold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "SpaceGroteskTorneito-Bold"; src: url("fonts/SpaceGroteskTorneito-Bold.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "MangoGrotesque-ExtraBold"; src: url("fonts/MangoGrotesque-ExtraBold.otf") format("truetype"); font-display: block; }

/* Dark only for now, like the app (Appearance.lightReady): the light values stay for when it
   comes back, behind data-theme="light". */
:root {
  color-scheme: dark;
  --color-background: #232228;
  --color-surface: #1B1A1F;
  --color-surface-pressed: #2E2D35;
  --color-pill: #2E2D35;
  --color-shelf-edge: rgba(73, 69, 89, 1);
  --color-shelf-lip: rgba(53, 51, 61, 1);
  --color-shelf-post: rgba(35, 34, 40, 1);
  --color-spotlight: rgba(255, 255, 255, 1);
  --color-spotlight-soft: rgba(255, 255, 255, 0.56);
  --color-name-shade: rgba(35, 34, 40, 0.7);
  --color-featured-rim: rgba(255, 255, 255, 0.15);
  --color-pill-on-art: rgba(27, 26, 31, 0.75);
  --color-border: #33313B;
  --color-text: #FFFFFF;
  --color-text-muted: #938DAC;
  --color-text-subtle: #838383;
  --color-text-faint: rgba(147, 141, 172, 0.4);
  --color-accent: #EDBB00;
  --color-accent-text: #EDBB00;
  --color-choice-ring: rgba(147, 141, 172, 0.1);
  --color-glass-edge-lit: rgba(255, 255, 255, 0.55);
  --color-glass-edge: rgba(255, 255, 255, 0.08);
  --color-accent-soft: #3A2E12;
  --color-on-accent: #0F0E11;
  --color-button-primary-face: #EDBB00;
  --color-button-primary-face-pressed: #E2A508;
  --color-button-primary-ring-high: #F4D768;
  --color-button-primary-ring-low: #DB960D;
  --color-button-primary-ring-low-pressed: #6F5000;
  --color-button-primary-bevel-high: #FFFFFF;
  --color-button-primary-bevel-low: #D07F15;
  --color-button-primary-engrave-high: #F5DA00;
  --color-button-primary-engrave-low: #E6A408;
  --color-button-primary-outline: #000000;
  --color-button-secondary-face: #1B1A1F;
  --color-button-secondary-face-pressed: #141318;
  --color-button-secondary-ring-high: #1B1A1F;
  --color-button-secondary-ring-low: #000000;
  --color-button-secondary-ring-low-pressed: #000000;
  --color-button-secondary-bevel-high: rgba(255, 255, 255, 0.2);
  --color-button-secondary-bevel-low: #0F0E11;
  --color-button-secondary-engrave-high: #5C5B5F;
  --color-button-secondary-engrave-low: #000000;
  --color-button-secondary-outline: #000000;
  --color-button-inverse-face: #FFFFFF;
  --color-button-inverse-face-pressed: #F1F0F5;
  --color-button-inverse-ring-high: #FFFFFF;
  --color-button-inverse-ring-low: #CFCBD9;
  --color-button-inverse-ring-low-pressed: #B8B3C4;
  --color-button-inverse-bevel-high: rgba(255, 255, 255, 1);
  --color-button-inverse-bevel-low: #DCD8E4;
  --color-button-inverse-engrave-high: #FFFFFF;
  --color-button-inverse-engrave-low: #DCD8E4;
  --color-button-inverse-outline: #A8A3B5;
  --color-on-inverse: #0F0E11;
  --color-button-pressed-shade: rgba(0, 0, 0, 0.2);
  --color-sticker-edge: #FFFFFF;
  --color-icon-backdrop: #00B4F2;
  --color-inverse: #FBFAFF;
  --color-vote-face: #35333D;
  --color-vote-picked: #EDE9FF;
  --color-on-vote-picked: #1B1A1F;
  --color-on-vote-picked-muted: rgba(0, 0, 0, 0.45);
  --color-side-home: #FF7F99;
  --color-side-draw: #706C82;
  --color-drop-target: rgba(112, 108, 130, 0.5);
  --color-slot-plus: rgba(255, 255, 255, 0.3);
  --color-side-away: #7FE5FF;
  --color-success-soft: #163A12;
  --color-chart-grid: #2E2D35;
  --color-chart-faint: #34323D;
  --color-chart-bar: #3A3843;
  --color-chart-against: #5A566B;
  --color-header-fade: rgba(35, 34, 40, 0.97);
  --color-scrim: rgba(0, 0, 0, 0.7);
  --color-backdrop-dim: rgba(0, 0, 0, 0.35);
  --color-on-scrim: #FFFFFF;
  --color-on-art-muted: rgba(255, 255, 255, 0.6);
  --color-tab-muted: rgba(255, 255, 255, 0.6);
  --color-on-scrim-muted: rgba(255, 255, 255, 0.75);
  --color-tile: #0F0E11;
  --color-on-tile: #FFFFFF;
  --color-on-tile-muted: rgba(255, 255, 255, 0.25);
  --color-flap-shade: rgba(0, 0, 0, 0.45);
  --color-flap-highlight: rgba(255, 255, 255, 0.2);
  --color-flap-edge: #000000;
  --color-board-frame: #1D1D21;
  --color-board-edge: #18181C;
  --color-board-panel: #212027;
  --color-board-strip: #15151A;
  --color-board-banner: #EAEAFF;
  --color-on-board-banner: #16151A;
  --color-live-on-banner: #D70000;
  --color-board-shadow: rgba(0, 0, 0, 0.25);
  --color-medal-gold: #F5C84C;
  --color-medal-silver: #C9CDD6;
  --color-medal-bronze: #E0955A;
  --color-on-medal: #0F0E11;
  --color-medal-lip: rgba(0, 0, 0, 0.4);
  --color-live: #FF8D8D;
  --color-danger: #FF8D8D;
  --color-danger-surface: #2E2326;
  --color-success: #4ADE80;
  --color-sticker-red: #FF4E4E;
  --color-sticker-yellow: #FFB815;
  --color-code: #FFFFFF;
  --color-on-code: #16151A;
  --space-none: calc(var(--pt) * 0);
  --space-xxs: calc(var(--pt) * 2);
  --space-xs: calc(var(--pt) * 4);
  --space-sm: calc(var(--pt) * 8);
  --space-ms: calc(var(--pt) * 12);
  --space-md: calc(var(--pt) * 16);
  --space-ml: calc(var(--pt) * 20);
  --space-lg: calc(var(--pt) * 24);
  --space-xl: calc(var(--pt) * 32);
  --space-xxl: calc(var(--pt) * 48);
  --space-screen-padding: calc(var(--pt) * 16);
  --space-section-gap: calc(var(--pt) * 24);
  --space-card-gutter: calc(var(--pt) * 8);
  --space-card-bleed: calc(var(--pt) * -8);
  --radius-none: calc(var(--pt) * 0);
  --radius-xs: calc(var(--pt) * 4);
  --radius-sm: calc(var(--pt) * 6);
  --radius-md: calc(var(--pt) * 10);
  --radius-lg: calc(var(--pt) * 14);
  --radius-xl: calc(var(--pt) * 20);
  --radius-sheet: calc(var(--pt) * 38);
  --radius-full: calc(var(--pt) * 9999);
  --radius-scan-corner: calc(var(--pt) * 30);
  --radius-code: calc(var(--pt) * 24);
  --radius-value-chip: calc(var(--pt) * 8);
  --radius-featured: calc(var(--pt) * 16);
  --radius-notification: calc(var(--pt) * 24);
  --radius-notification-icon: calc(var(--pt) * 9);
  --size-control: calc(var(--pt) * 56);
  --size-code-box: calc(var(--pt) * 88);
  --size-field: calc(var(--pt) * 66);
  --size-control-sm: calc(var(--pt) * 36);
  --size-control-mini: calc(var(--pt) * 32);
  --size-person-row: calc(var(--pt) * 56);
  --size-beam-blur: calc(var(--pt) * 14);
  --size-welcome-top: calc(var(--pt) * 120);
  --size-notification-icon: calc(var(--pt) * 38);
  --size-welcome-toys: calc(var(--pt) * 260);
  --size-tag-column: calc(var(--pt) * 28);
  --size-pick-mark: calc(var(--pt) * 24);
  --size-pick-ring: calc(var(--pt) * 2);
  --size-check-box: calc(var(--pt) * 22);
  --size-seed-badge: calc(var(--pt) * 22);
  --size-pair-number: calc(var(--pt) * 24);
  --size-pair-pile: calc(var(--pt) * 140);
  --size-sparkle-dot: calc(var(--pt) * 4);
  --size-skeleton-tab: calc(var(--pt) * 88);
  --size-skeleton-tab-height: calc(var(--pt) * 36);
  --size-skeleton-card: calc(var(--pt) * 84);
  --size-patch-strip: calc(var(--pt) * 80);
  --size-profile-crown-width: calc(var(--pt) * 104);
  --size-profile-crown-height: calc(var(--pt) * 96);
  --size-shelf-crown: calc(var(--pt) * 50);
  --size-champion-crown: calc(var(--pt) * 44);
  --size-vitrina-thumb: calc(var(--pt) * 72);
  --size-stat-placeholder-width: calc(var(--pt) * 26);
  --size-button-outline: calc(var(--pt) * 0.5);
  --size-button-ring: calc(var(--pt) * 0.5);
  --size-button-bevel: calc(var(--pt) * 2);
  --size-button-bevel-inset: calc(var(--pt) * 1);
  --size-button-bevel-blur: calc(var(--pt) * 1);
  --size-button-engrave: calc(var(--pt) * 0.5);
  --size-button-face-top: calc(var(--pt) * 14);
  --size-button-face-bottom: calc(var(--pt) * 16);
  --size-button-face-top-sm: calc(var(--pt) * 7);
  --size-button-face-bottom-sm: calc(var(--pt) * 9);
  --size-button-face-top-mini: calc(var(--pt) * 5);
  --size-button-face-bottom-mini: calc(var(--pt) * 7);
  --size-button-face-wide: calc(var(--pt) * 19);
  --size-auth-logo: calc(var(--pt) * 20);
  --size-wordmark-inset: calc(var(--pt) * 32);
  --size-button-rim: calc(var(--pt) * 1);
  --size-kicker-bar: calc(var(--pt) * 12);
  --size-kicker-bar-height: calc(var(--pt) * 3);
  --size-wizard-progress: calc(var(--pt) * 85);
  --size-wizard-progress-height: calc(var(--pt) * 12);
  --size-wizard-progress-start: calc(var(--pt) * 30);
  --size-choice-ring: calc(var(--pt) * 4);
  --size-glass-edge: calc(var(--pt) * 1.5);
  --size-card-tilt-degrees: calc(var(--pt) * 6);
  --size-icon-button: calc(var(--pt) * 36);
  --size-indicator: calc(var(--pt) * 22);
  --size-indicator-dot: calc(var(--pt) * 10);
  --size-value-min-width: calc(var(--pt) * 28);
  --size-cover-thumb-width: calc(var(--pt) * 48);
  --size-cover-thumb-height: calc(var(--pt) * 64);
  --size-cover-row-width: calc(var(--pt) * 76);
  --size-cover-row-height: calc(var(--pt) * 102);
  --size-cover-featured-width: calc(var(--pt) * 46);
  --size-cover-featured-height: calc(var(--pt) * 61);
  --size-header-crown: calc(var(--pt) * 44);
  --size-splash-crown: calc(var(--pt) * 96);
  --size-header-blur: calc(var(--pt) * 12);
  --size-pill-top: calc(var(--pt) * 4);
  --size-pill-bottom: calc(var(--pt) * 6);
  --size-featured-blur: calc(var(--pt) * 50);
  --size-live-dot: calc(var(--pt) * 8);
  --size-live-dot-small: calc(var(--pt) * 6);
  --size-chart-height: calc(var(--pt) * 254);
  --size-chart-bar-radius: calc(var(--pt) * 4);
  --size-page-dot: calc(var(--pt) * 6);
  --size-page-bar: calc(var(--pt) * 18);
  --size-page-dot-gap: calc(var(--pt) * 6);
  --size-split-bar: calc(var(--pt) * 4);
  --size-percent-value: calc(var(--pt) * 38);
  --size-vote-min: calc(var(--pt) * 66);
  --size-stat-row: calc(var(--pt) * 36);
  --size-form-mark: calc(var(--pt) * 18);
  --size-play-icon: calc(var(--pt) * 40);
  --size-pill-icon: calc(var(--pt) * 16);
  --size-clip-thumb-width: calc(var(--pt) * 100);
  --size-clip-thumb-height: calc(var(--pt) * 75);
  --size-score-button: calc(var(--pt) * 40);
  --size-flap-width: calc(var(--pt) * 58);
  --size-flap-half: calc(var(--pt) * 29);
  --size-flap-seam: calc(var(--pt) * 1);
  --size-flap-compact: calc(var(--pt) * 40);
  --size-flap-compact-scale: calc(var(--pt) * 0.678);
  --size-flap-large: calc(var(--pt) * 64);
  --size-flap-large-half: calc(var(--pt) * 35);
  --size-flap-large-seam: calc(var(--pt) * 2);
  --size-flap-large-scale: calc(var(--pt) * 1.2203);
  --size-flap-header: calc(var(--pt) * 36);
  --size-flap-edge: calc(var(--pt) * 1);
  --size-versus-badge: calc(var(--pt) * 40);
  --size-tab-bar: calc(var(--pt) * 3);
  --size-board-edge: calc(var(--pt) * 2);
  --size-board-shadow-offset: calc(var(--pt) * 1);
  --size-board-shadow-blur: calc(var(--pt) * 2);
  --size-rank-badge: calc(var(--pt) * 24);
  --size-medal-lip: calc(var(--pt) * 2);
  --size-table-row: calc(var(--pt) * 48);
  --size-table-column: calc(var(--pt) * 21);
  --size-movement-mark: calc(var(--pt) * 9);
  --size-movement-mark-height: calc(var(--pt) * 4);
  --size-icon: calc(var(--pt) * 24);
  --size-menu-icon: calc(var(--pt) * 20);
  --size-symbol-icon: calc(var(--pt) * 13);
  --size-menu-target: calc(var(--pt) * 44);
  --size-pinned-fade: calc(var(--pt) * 20);
  --size-trophy-art: calc(var(--pt) * 320);
  --size-shelf-medal: calc(var(--pt) * 64);
  --size-floating-tab-bar: calc(var(--pt) * 62);
  --size-achievement-badge: calc(var(--pt) * 52);
  --size-patch-detail: calc(var(--pt) * 340);
  --size-crown-pinned: calc(var(--pt) * 80);
  --size-reaction-button: calc(var(--pt) * 58);
  --size-emoji-cell: calc(var(--pt) * 44);
  --size-reaction-glyph: calc(var(--pt) * 28);
  --size-reaction-particle: calc(var(--pt) * 32);
  --size-progress-bar: calc(var(--pt) * 4);
  --size-backdrop: calc(var(--pt) * 526);
  --size-header-side-room: calc(var(--pt) * 68);
  --size-navigation-bar: calc(var(--pt) * 44);
  --size-backdrop-blur: calc(var(--pt) * 50);
  --size-arrow: calc(var(--pt) * 5);
  --size-broadcast-canvas-width: calc(var(--pt) * 640);
  --size-broadcast-canvas-height: calc(var(--pt) * 360);
  --size-broadcast-flap-scale: calc(var(--pt) * 2.2);
  --size-broadcast-code: calc(var(--pt) * 150);
  --size-broadcast-logo: calc(var(--pt) * 28);
  --size-broadcast-bracket-row: calc(var(--pt) * 36);
  --size-broadcast-bracket-column: calc(var(--pt) * 128);
  --size-broadcast-follow: calc(var(--pt) * 64);
  --size-scan-frame-share: calc(var(--pt) * 0.86);
  --size-scan-frame-height-share: calc(var(--pt) * 0.5);
  --size-scan-corner: calc(var(--pt) * 46);
  --size-scan-corner-stroke: calc(var(--pt) * 3.5);
  --size-qr-card: calc(var(--pt) * 304);
  --size-qr-timer: calc(var(--pt) * 160);
  --size-welcome-badge: calc(var(--pt) * 96);
  --size-welcome-icon: calc(var(--pt) * 48);
  --size-value-chip: calc(var(--pt) * 35);
  --size-flap-countdown: calc(var(--pt) * 72);
  --size-invite-title: calc(var(--pt) * 160);
  --space-none-n: 0;
  --space-xxs-n: 2;
  --space-xs-n: 4;
  --space-sm-n: 8;
  --space-ms-n: 12;
  --space-md-n: 16;
  --space-ml-n: 20;
  --space-lg-n: 24;
  --space-xl-n: 32;
  --space-xxl-n: 48;
  --space-screen-padding-n: 16;
  --space-section-gap-n: 24;
  --space-card-gutter-n: 8;
  --space-card-bleed-n: -8;
  --size-control-n: 56;
  --size-code-box-n: 88;
  --size-field-n: 66;
  --size-control-sm-n: 36;
  --size-control-mini-n: 32;
  --size-person-row-n: 56;
  --size-beam-blur-n: 14;
  --size-welcome-top-n: 120;
  --size-notification-icon-n: 38;
  --size-welcome-toys-n: 260;
  --size-tag-column-n: 28;
  --size-pick-mark-n: 24;
  --size-pick-ring-n: 2;
  --size-check-box-n: 22;
  --size-seed-badge-n: 22;
  --size-pair-number-n: 24;
  --size-pair-pile-n: 140;
  --size-sparkle-dot-n: 4;
  --size-skeleton-tab-n: 88;
  --size-skeleton-tab-height-n: 36;
  --size-skeleton-card-n: 84;
  --size-patch-strip-n: 80;
  --size-profile-crown-width-n: 104;
  --size-profile-crown-height-n: 96;
  --size-shelf-crown-n: 50;
  --size-champion-crown-n: 44;
  --size-vitrina-thumb-n: 72;
  --size-stat-placeholder-width-n: 26;
  --size-button-outline-n: 0.5;
  --size-button-ring-n: 0.5;
  --size-button-bevel-n: 2;
  --size-button-bevel-inset-n: 1;
  --size-button-bevel-blur-n: 1;
  --size-button-engrave-n: 0.5;
  --size-button-face-top-n: 14;
  --size-button-face-bottom-n: 16;
  --size-button-face-top-sm-n: 7;
  --size-button-face-bottom-sm-n: 9;
  --size-button-face-top-mini-n: 5;
  --size-button-face-bottom-mini-n: 7;
  --size-button-face-wide-n: 19;
  --size-auth-logo-n: 20;
  --size-wordmark-inset-n: 32;
  --size-button-rim-n: 1;
  --size-kicker-bar-n: 12;
  --size-kicker-bar-height-n: 3;
  --size-wizard-progress-n: 85;
  --size-wizard-progress-height-n: 12;
  --size-wizard-progress-start-n: 30;
  --size-choice-ring-n: 4;
  --size-glass-edge-n: 1.5;
  --size-card-tilt-degrees-n: 6;
  --size-icon-button-n: 36;
  --size-indicator-n: 22;
  --size-indicator-dot-n: 10;
  --size-value-min-width-n: 28;
  --size-cover-thumb-width-n: 48;
  --size-cover-thumb-height-n: 64;
  --size-cover-row-width-n: 76;
  --size-cover-row-height-n: 102;
  --size-cover-featured-width-n: 46;
  --size-cover-featured-height-n: 61;
  --size-header-crown-n: 44;
  --size-splash-crown-n: 96;
  --size-header-blur-n: 12;
  --size-pill-top-n: 4;
  --size-pill-bottom-n: 6;
  --size-featured-blur-n: 50;
  --size-live-dot-n: 8;
  --size-live-dot-small-n: 6;
  --size-chart-height-n: 254;
  --size-chart-bar-radius-n: 4;
  --size-page-dot-n: 6;
  --size-page-bar-n: 18;
  --size-page-dot-gap-n: 6;
  --size-split-bar-n: 4;
  --size-percent-value-n: 38;
  --size-vote-min-n: 66;
  --size-stat-row-n: 36;
  --size-form-mark-n: 18;
  --size-play-icon-n: 40;
  --size-pill-icon-n: 16;
  --size-clip-thumb-width-n: 100;
  --size-clip-thumb-height-n: 75;
  --size-score-button-n: 40;
  --size-flap-width-n: 58;
  --size-flap-half-n: 29;
  --size-flap-seam-n: 1;
  --size-flap-compact-n: 40;
  --size-flap-compact-scale-n: 0.678;
  --size-flap-large-n: 64;
  --size-flap-large-half-n: 35;
  --size-flap-large-seam-n: 2;
  --size-flap-large-scale-n: 1.2203;
  --size-flap-header-n: 36;
  --size-flap-edge-n: 1;
  --size-versus-badge-n: 40;
  --size-tab-bar-n: 3;
  --size-board-edge-n: 2;
  --size-board-shadow-offset-n: 1;
  --size-board-shadow-blur-n: 2;
  --size-rank-badge-n: 24;
  --size-medal-lip-n: 2;
  --size-table-row-n: 48;
  --size-table-column-n: 21;
  --size-movement-mark-n: 9;
  --size-movement-mark-height-n: 4;
  --size-icon-n: 24;
  --size-menu-icon-n: 20;
  --size-symbol-icon-n: 13;
  --size-menu-target-n: 44;
  --size-pinned-fade-n: 20;
  --size-trophy-art-n: 320;
  --size-shelf-medal-n: 64;
  --size-floating-tab-bar-n: 62;
  --size-achievement-badge-n: 52;
  --size-patch-detail-n: 340;
  --size-crown-pinned-n: 80;
  --size-reaction-button-n: 58;
  --size-emoji-cell-n: 44;
  --size-reaction-glyph-n: 28;
  --size-reaction-particle-n: 32;
  --size-progress-bar-n: 4;
  --size-backdrop-n: 526;
  --size-header-side-room-n: 68;
  --size-navigation-bar-n: 44;
  --size-backdrop-blur-n: 50;
  --size-arrow-n: 5;
  --size-broadcast-canvas-width-n: 640;
  --size-broadcast-canvas-height-n: 360;
  --size-broadcast-flap-scale-n: 2.2;
  --size-broadcast-code-n: 150;
  --size-broadcast-logo-n: 28;
  --size-broadcast-bracket-row-n: 36;
  --size-broadcast-bracket-column-n: 128;
  --size-broadcast-follow-n: 64;
  --size-scan-frame-share-n: 0.86;
  --size-scan-frame-height-share-n: 0.5;
  --size-scan-corner-n: 46;
  --size-scan-corner-stroke-n: 3.5;
  --size-qr-card-n: 304;
  --size-qr-timer-n: 160;
  --size-welcome-badge-n: 96;
  --size-welcome-icon-n: 48;
  --size-value-chip-n: 35;
  --size-flap-countdown-n: 72;
  --size-invite-title-n: 160;
  --radius-none-n: 0;
  --radius-xs-n: 4;
  --radius-sm-n: 6;
  --radius-md-n: 10;
  --radius-lg-n: 14;
  --radius-xl-n: 20;
  --radius-sheet-n: 38;
  --radius-full-n: 9999;
  --radius-scan-corner-n: 30;
  --radius-code-n: 24;
  --radius-value-chip-n: 8;
  --radius-featured-n: 16;
  --radius-notification-n: 24;
  --radius-notification-icon-n: 9;
  --type-marquee-size-n: 150;
  --type-hero-size-n: 140;
  --type-nameplate-size-n: 118;
  --type-display-size-n: 64;
  --type-large-title-size-n: 36;
  --type-title-size-n: 22;
  --type-title-bold-size-n: 22;
  --type-heading-size-n: 18;
  --type-tab-size-n: 18;
  --type-headline-size-n: 18;
  --type-field-size-n: 20;
  --type-body-size-n: 17;
  --type-body-demi-size-n: 17;
  --type-caption-size-n: 16;
  --type-caption-strong-size-n: 16;
  --type-label-size-n: 14;
  --type-footnote-size-n: 12;
  --type-score-size-n: 32;
  --type-score-compact-size-n: 21.6949;
  --type-score-small-size-n: 15;
  --type-score-large-size-n: 39.0508;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --opacity-pressed: 0.7;
  --opacity-disabled: 0.4;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-background: #F1F0F5;
  --color-surface: #FFFFFF;
  --color-surface-pressed: #E6E4EC;
  --color-pill: #E6E4EC;
  --color-shelf-edge: rgba(220, 217, 228, 1);
  --color-shelf-lip: rgba(228, 225, 236, 1);
  --color-shelf-post: rgba(241, 240, 245, 1);
  --color-spotlight: rgba(237, 187, 0, 0.45);
  --color-spotlight-soft: rgba(237, 187, 0, 0.25);
  --color-name-shade: rgba(241, 240, 245, 0.7);
  --color-featured-rim: rgba(255, 255, 255, 0.7);
  --color-pill-on-art: rgba(255, 255, 255, 0.75);
  --color-border: #DCD9E4;
  --color-text: #16151A;
  --color-text-muted: #6B6680;
  --color-text-subtle: #6D6A79;
  --color-text-faint: rgba(107, 102, 128, 0.4);
  --color-accent: #EDBB00;
  --color-accent-text: #8A5A00;
  --color-choice-ring: rgba(107, 102, 128, 0.1);
  --color-glass-edge-lit: rgba(255, 255, 255, 0.9);
  --color-glass-edge: rgba(255, 255, 255, 0.3);
  --color-accent-soft: #FFF0C7;
  --color-on-accent: #16151A;
  --color-button-primary-face: #EDBB00;
  --color-button-primary-face-pressed: #E2A508;
  --color-button-primary-ring-high: #F4D768;
  --color-button-primary-ring-low: #DB960D;
  --color-button-primary-ring-low-pressed: #6F5000;
  --color-button-primary-bevel-high: #FFFFFF;
  --color-button-primary-bevel-low: #D07F15;
  --color-button-primary-engrave-high: #F5DA00;
  --color-button-primary-engrave-low: #E6A408;
  --color-button-primary-outline: #000000;
  --color-button-secondary-face: #FFFFFF;
  --color-button-secondary-face-pressed: #F1F0F5;
  --color-button-secondary-ring-high: #FFFFFF;
  --color-button-secondary-ring-low: #CFCBD9;
  --color-button-secondary-ring-low-pressed: #B8B3C4;
  --color-button-secondary-bevel-high: rgba(255, 255, 255, 1);
  --color-button-secondary-bevel-low: #DCD8E4;
  --color-button-secondary-engrave-high: #FFFFFF;
  --color-button-secondary-engrave-low: #DCD8E4;
  --color-button-secondary-outline: #A8A3B5;
  --color-button-inverse-face: #1B1A1F;
  --color-button-inverse-face-pressed: #141318;
  --color-button-inverse-ring-high: #1B1A1F;
  --color-button-inverse-ring-low: #000000;
  --color-button-inverse-ring-low-pressed: #000000;
  --color-button-inverse-bevel-high: rgba(255, 255, 255, 0.2);
  --color-button-inverse-bevel-low: #0F0E11;
  --color-button-inverse-engrave-high: #5C5B5F;
  --color-button-inverse-engrave-low: #000000;
  --color-button-inverse-outline: #000000;
  --color-on-inverse: #FBFAFF;
  --color-button-pressed-shade: rgba(0, 0, 0, 0.2);
  --color-sticker-edge: #FFFFFF;
  --color-icon-backdrop: #00B4F2;
  --color-inverse: #16151A;
  --color-vote-face: #E4E1EC;
  --color-vote-picked: #16151A;
  --color-on-vote-picked: #FFFFFF;
  --color-on-vote-picked-muted: rgba(255, 255, 255, 0.6);
  --color-side-home: #E0457A;
  --color-side-draw: #B4AFC2;
  --color-drop-target: rgba(180, 175, 194, 0.5);
  --color-slot-plus: rgba(22, 21, 26, 0.3);
  --color-side-away: #1A9EC4;
  --color-success-soft: #DDF6E4;
  --color-chart-grid: #E6E4EC;
  --color-chart-faint: #DAD7E3;
  --color-chart-bar: #D6D3DF;
  --color-chart-against: #A9A4B8;
  --color-header-fade: rgba(241, 240, 245, 0.97);
  --color-scrim: rgba(0, 0, 0, 0.7);
  --color-backdrop-dim: rgba(241, 240, 245, 0.35);
  --color-on-scrim: #FFFFFF;
  --color-on-art-muted: rgba(255, 255, 255, 0.6);
  --color-tab-muted: #6B6680;
  --color-on-scrim-muted: rgba(255, 255, 255, 0.75);
  --color-tile: #ECEAF2;
  --color-on-tile: #0F0E11;
  --color-on-tile-muted: rgba(15, 14, 17, 0.25);
  --color-flap-shade: rgba(15, 14, 17, 0.16);
  --color-flap-highlight: rgba(255, 255, 255, 0.7);
  --color-flap-edge: rgba(15, 14, 17, 0.12);
  --color-board-frame: #E4E2EA;
  --color-board-edge: #D9D6E1;
  --color-board-panel: #FFFFFF;
  --color-board-strip: #ECEAF2;
  --color-board-banner: #16151A;
  --color-on-board-banner: #FBFAFF;
  --color-live-on-banner: #FF8D8D;
  --color-board-shadow: rgba(15, 14, 17, 0.08);
  --color-medal-gold: #E7B423;
  --color-medal-silver: #B4B8C4;
  --color-medal-bronze: #C8743A;
  --color-on-medal: #0F0E11;
  --color-medal-lip: rgba(15, 14, 17, 0.25);
  --color-live: #D41E24;
  --color-danger: #D32222;
  --color-danger-surface: #EFE0E4;
  --color-success: #117D39;
  --color-sticker-red: #FF4E4E;
  --color-sticker-yellow: #FFB815;
  --color-code: #FFFFFF;
  --color-on-code: #16151A;
}

.type-marquee {
  font-family: "BarlowCondensed-ExtraBold";
  font-size: calc(var(--pt) * 150);
  line-height: calc(var(--pt) * 135);
  letter-spacing: calc(var(--pt) * -1.4);
  text-transform: uppercase;
}
.type-hero {
  font-family: "MangoGrotesque-ExtraBold";
  font-size: calc(var(--pt) * 140);
  line-height: calc(var(--pt) * 110);
  letter-spacing: calc(var(--pt) * 0);
  text-transform: uppercase;
}
.type-nameplate {
  font-family: "MangoGrotesque-ExtraBold";
  font-size: calc(var(--pt) * 118);
  line-height: calc(var(--pt) * 100);
  letter-spacing: calc(var(--pt) * 0);
  text-transform: uppercase;
}
.type-display {
  font-family: "BarlowCondensed-ExtraBold";
  font-size: calc(var(--pt) * 64);
  line-height: calc(var(--pt) * 64);
  letter-spacing: calc(var(--pt) * 0);
  text-transform: uppercase;
}
.type-large-title {
  font-family: "BarlowCondensed-ExtraBold";
  font-size: calc(var(--pt) * 36);
  line-height: calc(var(--pt) * 42);
  letter-spacing: calc(var(--pt) * -0.3);
  text-transform: uppercase;
}
.type-title {
  font-family: "BarlowSemiCondensed-ExtraBold";
  font-size: calc(var(--pt) * 22);
  line-height: calc(var(--pt) * 28);
  letter-spacing: calc(var(--pt) * 0);
}
.type-title-bold {
  font-family: "BarlowSemiCondensed-Bold";
  font-size: calc(var(--pt) * 22);
  line-height: calc(var(--pt) * 28);
  letter-spacing: calc(var(--pt) * 0);
}
.type-heading {
  font-family: "BarlowSemiCondensed-ExtraBold";
  font-size: calc(var(--pt) * 18);
  line-height: calc(var(--pt) * 24);
  letter-spacing: calc(var(--pt) * 0);
  text-transform: uppercase;
}
.type-tab {
  font-family: "BarlowCondensed-BoldItalic";
  font-size: calc(var(--pt) * 18);
  line-height: calc(var(--pt) * 24);
  letter-spacing: calc(var(--pt) * -0.2);
  text-transform: uppercase;
}
.type-headline {
  font-family: "Barlow-Medium";
  font-size: calc(var(--pt) * 18);
  line-height: calc(var(--pt) * 24);
  letter-spacing: calc(var(--pt) * -0.2);
}
.type-field {
  font-family: "Barlow-Medium";
  font-size: calc(var(--pt) * 20);
  line-height: calc(var(--pt) * 24);
  letter-spacing: calc(var(--pt) * -0.2);
}
.type-body {
  font-family: "Barlow-Regular";
  font-size: calc(var(--pt) * 17);
  line-height: calc(var(--pt) * 23);
  letter-spacing: calc(var(--pt) * 0);
}
.type-body-demi {
  font-family: "Barlow-SemiBold";
  font-size: calc(var(--pt) * 17);
  line-height: calc(var(--pt) * 23);
  letter-spacing: calc(var(--pt) * 0);
}
.type-caption {
  font-family: "BarlowSemiCondensed-Medium";
  font-size: calc(var(--pt) * 16);
  line-height: calc(var(--pt) * 20);
  letter-spacing: calc(var(--pt) * 0.16);
}
.type-caption-strong {
  font-family: "BarlowSemiCondensed-SemiBold";
  font-size: calc(var(--pt) * 16);
  line-height: calc(var(--pt) * 20);
  letter-spacing: calc(var(--pt) * 0.16);
}
.type-label {
  font-family: "BarlowSemiCondensed-Bold";
  font-size: calc(var(--pt) * 14);
  line-height: calc(var(--pt) * 18);
  letter-spacing: calc(var(--pt) * 0);
  text-transform: uppercase;
}
.type-footnote {
  font-family: "Barlow-Medium";
  font-size: calc(var(--pt) * 12);
  line-height: calc(var(--pt) * 15);
  letter-spacing: calc(var(--pt) * 0);
}
.type-score {
  font-family: "SpaceGroteskTorneito-Bold";
  font-size: calc(var(--pt) * 32);
  line-height: calc(var(--pt) * 38);
  letter-spacing: calc(var(--pt) * 0);
}
.type-score-compact {
  font-family: "SpaceGroteskTorneito-Bold";
  font-size: calc(var(--pt) * 21.6949);
  line-height: calc(var(--pt) * 25.7627);
  letter-spacing: calc(var(--pt) * 0);
}
.type-score-small {
  font-family: "SpaceGroteskTorneito-Bold";
  font-size: calc(var(--pt) * 15);
  line-height: calc(var(--pt) * 18);
  letter-spacing: calc(var(--pt) * 0);
}
.type-score-large {
  font-family: "SpaceGroteskTorneito-Bold";
  font-size: calc(var(--pt) * 39.0508);
  line-height: calc(var(--pt) * 46.3729);
  letter-spacing: calc(var(--pt) * 0);
}