/*
 * Generated by Style Dictionary 5.5.0.
 * Source: design-tokens.tokens.json
 * Do not edit this file directly; run `npm run build:tokens`.
 */
:root {
  color-scheme: dark;
  --accent: #a8b4ff;
  --accent-line: rgba(168,180,255,.32);
  --accent-soft: rgba(168,180,255,.08);
  --accent-soft-2: rgba(168,180,255,.14);
  --app-nav-width: 208px;
  --app-shell-gutter: 22px;
  --app-shell-max: 1320px;
  --atelier-action: #f5f5f7;
  --atelier-action-line: rgba(245,245,247,.42);
  --atelier-action-soft: rgba(245,245,247,.06);
  --atelier-action-soft-2: rgba(245,245,247,.10);
  --atelier-bg: #0b0b0c;
  --atelier-border: #38383a;
  --atelier-border-strong: #6e6e73;
  --atelier-control-target: 32px;
  --atelier-control-target-mobile: 44px;
  --atelier-datum-width: 4px;
  --atelier-ease-standard: cubic-bezier(.2,0,0,1);
  --atelier-error: #f5f5f7;
  --atelier-evidence: #dadadf;
  --atelier-evidence-line: rgba(218,218,223,.42);
  --atelier-evidence-soft: rgba(218,218,223,.08);
  --atelier-focus-ring: 2px;
  --atelier-fs-section-title: 20px;
  --atelier-fs-view-title: 48px;
  --atelier-fs-view-title-mobile: 36px;
  --atelier-heat-0: #1c1c1e;
  --atelier-heat-1: #38383a;
  --atelier-heat-2: #636366;
  --atelier-heat-3: #aeaeb2;
  --atelier-heat-4: #e5e5ea;
  --atelier-ink: #f5f5f7;
  --atelier-ink-faint: #aeaeb2;
  --atelier-ink-muted: #d1d1d6;
  --atelier-lh-view-title: 1.04;
  --atelier-mono: "JetBrains Mono";
  --atelier-motion-base: 180ms;
  --atelier-motion-fast: 120ms;
  --atelier-motion-slow: 280ms;
  --atelier-nav-width: 224px;
  --atelier-on-action: #111113;
  --atelier-overlay: rgba(11,11,12,.82);
  --atelier-radius: 4px;
  --atelier-radius-lg: 4px;
  --atelier-radius-md: 3px;
  --atelier-radius-sm: 2px;
  --atelier-role-accent: #e8e8eb;
  --atelier-role-developing: #ccccd0;
  --atelier-role-good: #dadadf;
  --atelier-role-graduated: #dadadf;
  --atelier-role-mastered: #f5f5f7;
  --atelier-role-mature: #bebec2;
  --atelier-role-route: #b0b0b4;
  --atelier-role-sub: #96969a;
  --atelier-role-untouched: #a2a2a6;
  --atelier-route: #b0b0b4;
  --atelier-route-line: rgba(176,176,180,.50);
  --atelier-route-soft: rgba(176,176,180,.08);
  --atelier-shadow: none;
  --atelier-shell-gutter: 24px;
  --atelier-shell-max: 1440px;
  --atelier-surface: #111113;
  --atelier-surface-hover: #2c2c2e;
  --atelier-surface-raised: #1c1c1e;
  --atelier-track: #2c2c2e;
  --atelier-ui: "Atkinson Hyperlegible Next";
  --bg: #0b0e14;
  --border: #252d3a;
  --border-strong: #3d4757;
  --chroma-accent: #a8b4ff;
  --chroma-accent-line: rgba(168,180,255,.32);
  --chroma-accent-soft: rgba(168,180,255,.08);
  --chroma-accent-soft-2: rgba(168,180,255,.14);
  --chroma-bg: #0b0e14;
  --chroma-border: #1e2531;
  --chroma-border-strong: #3d4757;
  --chroma-heat-0: #161b23;
  --chroma-heat-1: #213a33;
  --chroma-heat-2: #2d6a55;
  --chroma-heat-3: #429d7d;
  --chroma-heat-4: #6cbfa0;
  --chroma-ink: #eceef4;
  --chroma-ink-faint: #97a0b1;
  --chroma-ink-muted: #a6afbf;
  --chroma-nav-h: 103px;
  --chroma-on-accent: #0b0e14;
  --chroma-overlay: rgba(8,10,14,.72);
  --chroma-radius: 18px;
  --chroma-radius-hair: 2px;
  --chroma-radius-lg: 18px;
  --chroma-radius-md: 12px;
  --chroma-radius-pill: 999px;
  --chroma-radius-seg: 3px;
  --chroma-radius-sm: 8px;
  --chroma-role-accent: #a8b4ff;
  --chroma-role-developing: #4fb0e8;
  --chroma-role-developing-soft: rgba(79,176,232,.14);
  --chroma-role-good: #5bb583;
  --chroma-role-good-soft: rgba(91,181,131,.14);
  --chroma-role-graduated: #5bb583;
  --chroma-role-mastered: #cf86c9;
  --chroma-role-mastered-soft: rgba(207,134,201,.14);
  --chroma-role-mature: #34c0c0;
  --chroma-role-mature-soft: rgba(52,192,192,.14);
  --chroma-role-route: #96a0b0;
  --chroma-role-sub: #9aa3b2;
  --chroma-role-untouched: #96a0b0;
  --chroma-shadow: 0 16px 40px -26px rgba(5,7,11,.5);
  --chroma-shadow-lg: 0 28px 68px -36px rgba(5,7,11,.55);
  --chroma-status-error: #e58a9b;
  --chroma-status-good: #6cbfa0;
  --chroma-status-good-line: rgba(108,191,160,.25);
  --chroma-status-good-soft: rgba(108,191,160,.14);
  --chroma-status-route: #96a0b0;
  --chroma-surface: #12161f;
  --chroma-surface-hover: #232b38;
  --chroma-surface-raised: #191f2a;
  --chroma-track: #1e2531;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --fs-body: 14px;
  --fs-display: 36px;
  --fs-headline: 18px;
  --fs-hero: 44px;
  --fs-label: 12px;
  --fs-stat: 26px;
  --fs-title: 16px;
  --heat-0: #161b23;
  --heat-1: #213a33;
  --heat-2: #2d6a55;
  --heat-3: #429d7d;
  --heat-4: #6cbfa0;
  --ink: #eceef4;
  --ink-faint: #97a0b1;
  --ink-muted: #a6afbf;
  --lh-body: 1.55;
  --lh-snug: 1.25;
  --lh-tight: 1.2;
  --ls-label: .4px;
  --mono: "JetBrains Mono";
  --motion-base: 180ms;
  --motion-fast: 120ms;
  --motion-slow: 280ms;
  --on-accent: #0b0e14;
  --overlay: rgba(8,10,14,.72);
  --radius: 18px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --role-accent: #a8b4ff;
  --role-developing: #4fb0e8;
  --role-good: #5bb583;
  --role-graduated: #5bb583;
  --role-mastered: #cf86c9;
  --role-mature: #34c0c0;
  --role-route: #96a0b0;
  --role-sub: #9aa3b2;
  --role-untouched: #96a0b0;
  --shadow: 0 16px 40px -26px rgba(5,7,11,.5);
  --shadow-lg: 0 28px 68px -36px rgba(5,7,11,.55);
  --space-2xl: 2.5rem;
  --space-2xs: .25rem;
  --space-3xl: 3rem;
  --space-3xs: .125rem;
  --space-lg: 1.5rem;
  --space-md: 1rem;
  --space-sm: .75rem;
  --space-xl: 2rem;
  --space-xs: .5rem;
  --status-error: #e58a9b;
  --status-good: #6cbfa0;
  --status-good-line: rgba(108,191,160,.25);
  --status-good-soft: rgba(108,191,160,.14);
  --status-route: #96a0b0;
  --surface: #12161f;
  --surface-hover: #232b38;
  --surface-raised: #191f2a;
  --track: #1e2531;
  --ui: "Atkinson Hyperlegible Next";
}
:root[data-theme="light"] {
  color-scheme: light;
  --accent: #493f96;
  --accent-line: rgba(73,63,150,.30);
  --accent-soft: rgba(73,63,150,.10);
  --accent-soft-2: rgba(73,63,150,.18);
  --atelier-action: #3a3a3c;
  --atelier-action-line: rgba(58,58,60,.56);
  --atelier-action-soft: rgba(58,58,60,.08);
  --atelier-action-soft-2: rgba(58,58,60,.14);
  --atelier-bg: #ffffff;
  --atelier-border: #e3e3e5;
  --atelier-border-strong: #8e8e93;
  --atelier-error: #111113;
  --atelier-evidence: #252529;
  --atelier-evidence-line: rgba(37,37,41,.54);
  --atelier-evidence-soft: rgba(37,37,41,.08);
  --atelier-heat-0: #f2f2f4;
  --atelier-heat-1: #d1d1d6;
  --atelier-heat-2: #aeaeb2;
  --atelier-heat-3: #636366;
  --atelier-heat-4: #2c2c2e;
  --atelier-ink: #111113;
  --atelier-ink-faint: #545457;
  --atelier-ink-muted: #3a3a3c;
  --atelier-on-action: #ffffff;
  --atelier-overlay: rgba(17,17,19,.64);
  --atelier-role-accent: #1b1b1f;
  --atelier-role-developing: #303034;
  --atelier-role-good: #252529;
  --atelier-role-graduated: #252529;
  --atelier-role-mastered: #111113;
  --atelier-role-mature: #3b3b3f;
  --atelier-role-route: #47474b;
  --atelier-role-sub: #5e5e62;
  --atelier-role-untouched: #525256;
  --atelier-route: #47474b;
  --atelier-route-line: rgba(71,71,75,.60);
  --atelier-route-soft: rgba(71,71,75,.08);
  --atelier-surface: #ffffff;
  --atelier-surface-hover: #efeff1;
  --atelier-surface-raised: #f7f7f8;
  --atelier-track: #e3e3e5;
  --bg: #f7f8fa;
  --border: #e3e7ee;
  --border-strong: #c5ccd8;
  --chroma-accent: #493f96;
  --chroma-accent-line: rgba(73,63,150,.30);
  --chroma-accent-soft: rgba(73,63,150,.10);
  --chroma-accent-soft-2: rgba(73,63,150,.18);
  --chroma-bg: #f7f7f8;
  --chroma-border: #e3e3e5;
  --chroma-border-strong: #8e8e93;
  --chroma-heat-0: #eef0f5;
  --chroma-heat-1: #cce5d8;
  --chroma-heat-2: #99cfb3;
  --chroma-heat-3: #5fb18e;
  --chroma-heat-4: #3f9a78;
  --chroma-ink: #111113;
  --chroma-ink-faint: #545457;
  --chroma-ink-muted: #3a3a3c;
  --chroma-nav-h: 103px;
  --chroma-on-accent: #ffffff;
  --chroma-overlay: rgba(20,24,33,.45);
  --chroma-radius: 18px;
  --chroma-radius-hair: 2px;
  --chroma-radius-lg: 18px;
  --chroma-radius-md: 12px;
  --chroma-radius-pill: 999px;
  --chroma-radius-seg: 3px;
  --chroma-radius-sm: 8px;
  --chroma-role-accent: #493f96;
  --chroma-role-developing: #075d99;
  --chroma-role-developing-soft: rgba(7,93,153,.10);
  --chroma-role-good: #246448;
  --chroma-role-good-soft: rgba(36,100,72,.10);
  --chroma-role-graduated: #246448;
  --chroma-role-mastered: #8a2f83;
  --chroma-role-mastered-soft: rgba(138,47,131,.10);
  --chroma-role-mature: #0b6873;
  --chroma-role-mature-soft: rgba(11,104,115,.10);
  --chroma-role-route: #586170;
  --chroma-role-sub: #586170;
  --chroma-role-untouched: #536070;
  --chroma-shadow: 0 16px 40px -26px rgba(5,7,11,.5);
  --chroma-shadow-lg: 0 28px 68px -36px rgba(5,7,11,.55);
  --chroma-status-error: #a43f56;
  --chroma-status-good: #246448;
  --chroma-status-good-line: rgba(36,100,72,.25);
  --chroma-status-good-soft: rgba(36,100,72,.14);
  --chroma-status-route: #586170;
  --chroma-surface: #ffffff;
  --chroma-surface-hover: #efeff1;
  --chroma-surface-raised: #f7f7f8;
  --chroma-track: #e3e3e5;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --heat-0: #eef0f5;
  --heat-1: #cce5d8;
  --heat-2: #99cfb3;
  --heat-3: #5fb18e;
  --heat-4: #3f9a78;
  --ink: #1b2027;
  --ink-faint: #58616e;
  --ink-muted: #4c5563;
  --motion-base: 180ms;
  --motion-fast: 120ms;
  --motion-slow: 280ms;
  --on-accent: #ffffff;
  --overlay: rgba(20,24,33,.45);
  --role-accent: #493f96;
  --role-developing: #075d99;
  --role-good: #246448;
  --role-graduated: #246448;
  --role-mastered: #8a2f83;
  --role-mature: #0b6873;
  --role-route: #586170;
  --role-sub: #586170;
  --role-untouched: #536070;
  --status-error: #a43f56;
  --status-good: #246448;
  --status-good-line: rgba(36,100,72,.25);
  --status-good-soft: rgba(36,100,72,.14);
  --status-route: #586170;
  --surface: #ffffff;
  --surface-hover: #e7eaf1;
  --surface-raised: #eff1f5;
  --track: #e9ecf2;
}
.dashboard-app.chroma {
  --accent: #a8b4ff;
  --accent-line: rgba(168,180,255,.32);
  --accent-soft: rgba(168,180,255,.08);
  --accent-soft-2: rgba(168,180,255,.14);
  --bg: #0b0e14;
  --border: #1e2531;
  --border-strong: #3d4757;
  --heat-0: #161b23;
  --heat-1: #213a33;
  --heat-2: #2d6a55;
  --heat-3: #429d7d;
  --heat-4: #6cbfa0;
  --ink: #eceef4;
  --ink-faint: #97a0b1;
  --ink-muted: #a6afbf;
  --nav-h: 103px;
  --on-accent: #0b0e14;
  --overlay: rgba(8,10,14,.72);
  --radius: 18px;
  --radius-hair: 2px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --radius-seg: 3px;
  --radius-sm: 8px;
  --role-accent: #a8b4ff;
  --role-developing: #4fb0e8;
  --role-developing-soft: rgba(79,176,232,.14);
  --role-good: #5bb583;
  --role-good-soft: rgba(91,181,131,.14);
  --role-graduated: #5bb583;
  --role-mastered: #cf86c9;
  --role-mastered-soft: rgba(207,134,201,.14);
  --role-mature: #34c0c0;
  --role-mature-soft: rgba(52,192,192,.14);
  --role-route: #96a0b0;
  --role-sub: #9aa3b2;
  --role-untouched: #96a0b0;
  --shadow: 0 16px 40px -26px rgba(5,7,11,.5);
  --shadow-lg: 0 28px 68px -36px rgba(5,7,11,.55);
  --status-error: #e58a9b;
  --status-good: #6cbfa0;
  --status-good-line: rgba(108,191,160,.25);
  --status-good-soft: rgba(108,191,160,.14);
  --status-route: #96a0b0;
  --surface: #12161f;
  --surface-hover: #232b38;
  --surface-raised: #191f2a;
  --track: #1e2531;
}
.dashboard-app {
  --accent: #f5f5f7;
  --accent-line: rgba(245,245,247,.42);
  --accent-soft: rgba(245,245,247,.06);
  --accent-soft-2: rgba(245,245,247,.10);
  --app-nav-width: 224px;
  --app-shell-gutter: 24px;
  --app-shell-max: 1440px;
  --bg: #0b0b0c;
  --border: #38383a;
  --border-strong: #6e6e73;
  --control-target: 32px;
  --control-target-mobile: 44px;
  --datum-width: 4px;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --evidence: #dadadf;
  --focus-ring: 2px;
  --fs-section-title: 20px;
  --fs-view-title: 48px;
  --fs-view-title-mobile: 36px;
  --heat-0: #1c1c1e;
  --heat-1: #38383a;
  --heat-2: #636366;
  --heat-3: #aeaeb2;
  --heat-4: #e5e5ea;
  --ink: #f5f5f7;
  --ink-faint: #aeaeb2;
  --ink-muted: #d1d1d6;
  --lh-view-title: 1.04;
  --mono: "JetBrains Mono";
  --motion-base: 180ms;
  --motion-fast: 120ms;
  --motion-slow: 280ms;
  --on-accent: #111113;
  --overlay: rgba(11,11,12,.82);
  --radius: 4px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --role-accent: #e8e8eb;
  --role-developing: #ccccd0;
  --role-good: #dadadf;
  --role-graduated: #dadadf;
  --role-mastered: #f5f5f7;
  --role-mature: #bebec2;
  --role-route: #b0b0b4;
  --role-sub: #96969a;
  --role-untouched: #a2a2a6;
  --route: #b0b0b4;
  --route-line: rgba(176,176,180,.50);
  --route-soft: rgba(176,176,180,.08);
  --shadow: none;
  --shadow-lg: none;
  --status-error: #f5f5f7;
  --status-good: #dadadf;
  --status-good-line: rgba(218,218,223,.42);
  --status-good-soft: rgba(218,218,223,.08);
  --status-route: #b0b0b4;
  --surface: #111113;
  --surface-hover: #2c2c2e;
  --surface-raised: #1c1c1e;
  --track: #2c2c2e;
  --ui: "Atkinson Hyperlegible Next";
}
body.lesson-page {
  --accent: #f5f5f7;
  --accent-line: rgba(245,245,247,.42);
  --accent-soft: rgba(245,245,247,.06);
  --accent-soft-2: rgba(245,245,247,.10);
  --bg: #0b0b0c;
  --border: #38383a;
  --border-strong: #6e6e73;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --evidence: #dadadf;
  --heat-0: #1c1c1e;
  --heat-1: #38383a;
  --heat-2: #636366;
  --heat-3: #aeaeb2;
  --heat-4: #e5e5ea;
  --ink: #f5f5f7;
  --ink-faint: #aeaeb2;
  --ink-muted: #d1d1d6;
  --motion-base: 180ms;
  --motion-fast: 120ms;
  --motion-slow: 280ms;
  --on-accent: #111113;
  --overlay: rgba(11,11,12,.82);
  --role-accent: #e8e8eb;
  --role-developing: #ccccd0;
  --role-good: #dadadf;
  --role-graduated: #dadadf;
  --role-mastered: #f5f5f7;
  --role-mature: #bebec2;
  --role-route: #b0b0b4;
  --role-sub: #96969a;
  --role-untouched: #a2a2a6;
  --route: #b0b0b4;
  --route-line: rgba(176,176,180,.50);
  --route-soft: rgba(176,176,180,.08);
  --shadow: 0 16px 40px -26px rgba(5,7,11,.5);
  --shadow-lg: 0 28px 68px -36px rgba(5,7,11,.55);
  --status-error: #f5f5f7;
  --status-good: #dadadf;
  --status-good-line: rgba(218,218,223,.42);
  --status-good-soft: rgba(218,218,223,.08);
  --status-route: #b0b0b4;
  --surface: #111113;
  --surface-hover: #2c2c2e;
  --surface-raised: #1c1c1e;
  --track: #2c2c2e;
}
:root[data-theme="light"] .dashboard-app.chroma {
  --accent: #493f96;
  --accent-line: rgba(73,63,150,.30);
  --accent-soft: rgba(73,63,150,.10);
  --accent-soft-2: rgba(73,63,150,.18);
  --bg: #f7f7f8;
  --border: #e3e3e5;
  --border-strong: #8e8e93;
  --heat-0: #eef0f5;
  --heat-1: #cce5d8;
  --heat-2: #99cfb3;
  --heat-3: #5fb18e;
  --heat-4: #3f9a78;
  --ink: #111113;
  --ink-faint: #545457;
  --ink-muted: #3a3a3c;
  --nav-h: 103px;
  --on-accent: #ffffff;
  --overlay: rgba(20,24,33,.45);
  --radius: 18px;
  --radius-hair: 2px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --radius-seg: 3px;
  --radius-sm: 8px;
  --role-accent: #493f96;
  --role-developing: #075d99;
  --role-developing-soft: rgba(7,93,153,.10);
  --role-good: #246448;
  --role-good-soft: rgba(36,100,72,.10);
  --role-graduated: #246448;
  --role-mastered: #8a2f83;
  --role-mastered-soft: rgba(138,47,131,.10);
  --role-mature: #0b6873;
  --role-mature-soft: rgba(11,104,115,.10);
  --role-route: #586170;
  --role-sub: #586170;
  --role-untouched: #536070;
  --shadow: 0 16px 40px -26px rgba(5,7,11,.5);
  --shadow-lg: 0 28px 68px -36px rgba(5,7,11,.55);
  --status-error: #a43f56;
  --status-good: #246448;
  --status-good-line: rgba(36,100,72,.25);
  --status-good-soft: rgba(36,100,72,.14);
  --status-route: #586170;
  --surface: #ffffff;
  --surface-hover: #efeff1;
  --surface-raised: #f7f7f8;
  --track: #e3e3e5;
}
:root[data-theme="light"] .dashboard-app {
  --accent: #3a3a3c;
  --accent-line: rgba(58,58,60,.56);
  --accent-soft: rgba(58,58,60,.08);
  --accent-soft-2: rgba(58,58,60,.14);
  --app-nav-width: 224px;
  --app-shell-gutter: 24px;
  --app-shell-max: 1440px;
  --bg: #ffffff;
  --border: #e3e3e5;
  --border-strong: #8e8e93;
  --control-target: 32px;
  --control-target-mobile: 44px;
  --datum-width: 4px;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --evidence: #252529;
  --focus-ring: 2px;
  --fs-section-title: 20px;
  --fs-view-title: 48px;
  --fs-view-title-mobile: 36px;
  --heat-0: #f2f2f4;
  --heat-1: #d1d1d6;
  --heat-2: #aeaeb2;
  --heat-3: #636366;
  --heat-4: #2c2c2e;
  --ink: #111113;
  --ink-faint: #545457;
  --ink-muted: #3a3a3c;
  --lh-view-title: 1.04;
  --mono: "JetBrains Mono";
  --motion-base: 180ms;
  --motion-fast: 120ms;
  --motion-slow: 280ms;
  --on-accent: #ffffff;
  --overlay: rgba(17,17,19,.64);
  --radius: 4px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --role-accent: #1b1b1f;
  --role-developing: #303034;
  --role-good: #252529;
  --role-graduated: #252529;
  --role-mastered: #111113;
  --role-mature: #3b3b3f;
  --role-route: #47474b;
  --role-sub: #5e5e62;
  --role-untouched: #525256;
  --route: #47474b;
  --route-line: rgba(71,71,75,.60);
  --route-soft: rgba(71,71,75,.08);
  --shadow: none;
  --shadow-lg: none;
  --status-error: #111113;
  --status-good: #252529;
  --status-good-line: rgba(37,37,41,.54);
  --status-good-soft: rgba(37,37,41,.08);
  --status-route: #47474b;
  --surface: #ffffff;
  --surface-hover: #efeff1;
  --surface-raised: #f7f7f8;
  --track: #e3e3e5;
  --ui: "Atkinson Hyperlegible Next";
}
:root[data-theme="light"] body.lesson-page {
  --accent: #3a3a3c;
  --accent-line: rgba(58,58,60,.56);
  --accent-soft: rgba(58,58,60,.08);
  --accent-soft-2: rgba(58,58,60,.14);
  --bg: #ffffff;
  --border: #e3e3e5;
  --border-strong: #8e8e93;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --evidence: #252529;
  --heat-0: #f2f2f4;
  --heat-1: #d1d1d6;
  --heat-2: #aeaeb2;
  --heat-3: #636366;
  --heat-4: #2c2c2e;
  --ink: #111113;
  --ink-faint: #545457;
  --ink-muted: #3a3a3c;
  --motion-base: 180ms;
  --motion-fast: 120ms;
  --motion-slow: 280ms;
  --on-accent: #ffffff;
  --overlay: rgba(17,17,19,.64);
  --role-accent: #1b1b1f;
  --role-developing: #303034;
  --role-good: #252529;
  --role-graduated: #252529;
  --role-mastered: #111113;
  --role-mature: #3b3b3f;
  --role-route: #47474b;
  --role-sub: #5e5e62;
  --role-untouched: #525256;
  --route: #47474b;
  --route-line: rgba(71,71,75,.60);
  --route-soft: rgba(71,71,75,.08);
  --shadow: 0 16px 40px -26px rgba(5,7,11,.5);
  --shadow-lg: 0 28px 68px -36px rgba(5,7,11,.55);
  --status-error: #111113;
  --status-good: #252529;
  --status-good-line: rgba(37,37,41,.54);
  --status-good-soft: rgba(37,37,41,.08);
  --status-route: #47474b;
  --surface: #ffffff;
  --surface-hover: #efeff1;
  --surface-raised: #f7f7f8;
  --track: #e3e3e5;
}