/* T3 Design System v2.0, generated from tokens.json for app use. Light by default, dark on [data-theme="dark"] and,
   without a data-theme choice, on a dark device (prefers-color-scheme), also without JavaScript. Font paths are relative to this file. */
:root, [data-theme="light"] {
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f5f5f6;
  --primary-soft: #fff1e6;
  --line: #e3e3e6;
  --line-strong: #7a7a82;
  --ink: #151517;
  --ink-muted: #55555c;
  --primary: #ff7a1a;
  --primary-hover: #e8640a;
  --on-primary: #1a0e05;
  --primary-text: #8f3900;
  --rank-high: #151517;
  --on-rank-high: #ffffff;
  --rank-mid: #3d3d43;
  --on-rank-mid: #ffffff;
  --rank-low: #ececef;
  --deep: #151517;
  --on-deep: #ffffff;
  --on-deep-muted: #c9c9cf;
  --band: #1d1d21;
  --on-band: #ffffff;
  --on-band-muted: #d4d4d8;
  --band-line-faint: rgba(255,255,255,0.45);
  --band-deep: #151517;
  --court-line: #ffffff;
  --toggle-knob: #ffffff;
  --on-toggle-knob: #e8640a;
  --toggle-knob-ring: #ff7a1a;
  --ball: #ff7a1a;
  --on-ball: #1a0e05;
  --win: #0f7a52;
  --loss: #c23a1d;
  --focus: #b84a00;
  --success: #1d7a46;
  --success-soft: #e3f4ea;
  --warning: #7a6200;
  --warning-soft: #fdf6d8;
  --danger: #b3261e;
  --danger-soft: #fbe7e5;
  --ink-disabled: #8e8e96;
  --fill-disabled: #f1f1f3;
  --scroll-thumb: #c4c4ca;
  --scroll-thumb-hover: #7a7a82;
  --viz-rest: #c9c9cf;
  --viz-1: #2a78d6;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --viz-4: #6250d6;
  --viz-ord-1: #86b6ef;
  --viz-ord-2: #3987e5;
  --viz-ord-3: #184f95;
  --shadow-raised: 0 1px 2px rgba(21,21,23,0.08), 0 4px 12px rgba(21,21,23,0.06);
  --shadow-popup: 0 8px 24px rgba(21,21,23,0.18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --surface: #111112;
  --surface-raised: #1a1a1c;
  --surface-sunken: #151516;
  --primary-soft: #3a2414;
  --line: #2a2a2e;
  --line-strong: #6c6c73;
  --ink: #ededef;
  --ink-muted: #a3a3aa;
  --primary: #ff8c3a;
  --primary-hover: #ffa361;
  --on-primary: #1a0e05;
  --primary-text: #ff8c3a;
  --rank-high: #ededef;
  --on-rank-high: #151517;
  --rank-mid: #3d3d43;
  --on-rank-mid: #ffffff;
  --rank-low: #2a2a2e;
  --deep: #0b0b0c;
  --on-deep: #ffffff;
  --on-deep-muted: #c9c9cf;
  --band: #1a1a1c;
  --on-band: #ffffff;
  --on-band-muted: #c9c9cf;
  --band-line-faint: rgba(255,255,255,0.14);
  --band-deep: #111112;
  --court-line: #ffffff;
  --toggle-knob: #ff8c3a;
  --on-toggle-knob: #1a0e05;
  --toggle-knob-ring: rgba(255,140,58,0);
  --ball: #ff8c3a;
  --on-ball: #1a0e05;
  --win: #4fd19a;
  --loss: #ff8a70;
  --focus: #ffa361;
  --success: #5ccf8a;
  --success-soft: #14301f;
  --warning: #f2d04a;
  --warning-soft: #2e2a10;
  --danger: #ff8a80;
  --danger-soft: #3a1714;
  --ink-disabled: #66666d;
  --fill-disabled: #1f1f22;
  --scroll-thumb: #3e3e44;
  --scroll-thumb-hover: #6c6c73;
  --viz-rest: #4a4a52;
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #9085e9;
  --viz-ord-1: #9ec5f4;
  --viz-ord-2: #3987e5;
  --viz-ord-3: #1c5cab;
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-popup: 0 8px 24px rgba(0,0,0,0.5);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --surface: #111112;
  --surface-raised: #1a1a1c;
  --surface-sunken: #151516;
  --primary-soft: #3a2414;
  --line: #2a2a2e;
  --line-strong: #6c6c73;
  --ink: #ededef;
  --ink-muted: #a3a3aa;
  --primary: #ff8c3a;
  --primary-hover: #ffa361;
  --on-primary: #1a0e05;
  --primary-text: #ff8c3a;
  --rank-high: #ededef;
  --on-rank-high: #151517;
  --rank-mid: #3d3d43;
  --on-rank-mid: #ffffff;
  --rank-low: #2a2a2e;
  --deep: #0b0b0c;
  --on-deep: #ffffff;
  --on-deep-muted: #c9c9cf;
  --band: #1a1a1c;
  --on-band: #ffffff;
  --on-band-muted: #c9c9cf;
  --band-line-faint: rgba(255,255,255,0.14);
  --band-deep: #111112;
  --court-line: #ffffff;
  --toggle-knob: #ff8c3a;
  --on-toggle-knob: #1a0e05;
  --toggle-knob-ring: rgba(255,140,58,0);
  --ball: #ff8c3a;
  --on-ball: #1a0e05;
  --win: #4fd19a;
  --loss: #ff8a70;
  --focus: #ffa361;
  --success: #5ccf8a;
  --success-soft: #14301f;
  --warning: #f2d04a;
  --warning-soft: #2e2a10;
  --danger: #ff8a80;
  --danger-soft: #3a1714;
  --ink-disabled: #66666d;
  --fill-disabled: #1f1f22;
  --scroll-thumb: #3e3e44;
  --scroll-thumb-hover: #6c6c73;
  --viz-rest: #4a4a52;
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #9085e9;
  --viz-ord-1: #9ec5f4;
  --viz-ord-2: #3987e5;
  --viz-ord-3: #1c5cab;
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-popup: 0 8px 24px rgba(0,0,0,0.5);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-18: 72px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-ball: 999px;
  --font-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --font-sans: "Funnel Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@font-face { font-family: 'Funnel Sans'; src: url('fonts/FunnelSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('fonts/FunnelSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('fonts/FunnelSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('fonts/FunnelSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('fonts/FunnelDisplay-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('fonts/FunnelDisplay-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('fonts/FunnelDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('fonts/FunnelDisplay-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }