:root,[data-theme=dark]{--surface-canvas: #050505;--surface-app: #080908;--surface-subtle: #111111;--surface-card: #111111;--surface-card-muted: #0d100d;--surface-card-hover: #1a1a1a;--surface-elevated: #1a1a1a;--surface-inverse: #111510;--surface-panel-strong: #0a0c0a;--surface-panel: #0d100d;--surface-panel-muted: #101410;--surface-panel-translucent: rgba(5, 6, 5, .72);--surface-floating: #121612;--text-strong: #ffffff;--text-default: #ffffff;--text-secondary: rgba(255, 255, 255, .68);--text-muted: rgba(255, 255, 255, .55);--text-disabled: rgba(255, 255, 255, .36);--text-inverse: #050505;--text-on-inverse: #f4f6f0;--text-on-inverse-muted: rgba(244, 246, 240, .68);--accent-fill: #ffc83d;--accent-fill-hover: #ffdc76;--accent-fill-pressed: #d99a00;--accent-ink: #82b8e8;--accent-soft: rgba(60, 127, 188, .14);--success-soft: rgba(0, 216, 121, .12);--warning-soft: rgba(255, 122, 53, .14);--danger-soft: rgba(255, 77, 77, .12);--info-soft: rgba(0, 217, 255, .12);--xp-soft: rgba(211, 60, 255, .12);--success-fill: #00d879;--warning-fill: #ff7a35;--danger-fill: #ff4d4d;--info-fill: #00d9ff;--xp-fill: #d33cff;--on-success: #050505;--on-warning: #050505;--on-danger: #ffffff;--on-info: #050505;--on-xp: #ffffff;--on-accent: #050505;--on-accent-muted: rgba(5, 5, 5, .72);--border-subtle: rgba(255, 255, 255, .12);--border-default: rgba(255, 255, 255, .2);--border-strong: rgba(255, 255, 255, .36);--border-interactive: rgba(60, 127, 188, .62);--border-accent: #3c7fbc;--focus-ring: #82b8e8;--focus-ring-offset: #050505;--control-bg: #111111;--control-hover: #1a1a1a;--control-active: #ffc83d;--control-disabled: #242424;--placeholder: rgba(255, 255, 255, .45);--caret: #82b8e8;--nav-bg: #0b0d0b;--nav-border: rgba(255, 255, 255, .12);--nav-active-bg: rgba(60, 127, 188, .16);--nav-active-text: #82b8e8;--nav-overlay: rgba(0, 0, 0, .72);--scrim: rgba(0, 0, 0, .62);--scrim-strong: rgba(0, 0, 0, .78);--shadow-card: 0 12px 30px rgba(0, 0, 0, .24);--shadow-elevated: 0 24px 70px rgba(0, 0, 0, .48);--shadow-press: 4px 4px 0 rgba(0, 0, 0, .65);--shadow-accent-button: 0 6px 0 #a87400;--shadow-accent-button-hover: 0 4px 0 #a87400;--shadow-control-raised: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -4px 8px rgba(0, 0, 0, .2), 0 5px 0 rgba(0, 0, 0, .52), 0 10px 18px rgba(0, 0, 0, .18);--shadow-control-hover: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -3px 7px rgba(0, 0, 0, .18), 0 4px 0 rgba(0, 0, 0, .52), 0 9px 16px rgba(0, 0, 0, .2);--shadow-control-pressed: inset 0 2px 6px rgba(0, 0, 0, .28), 0 1px 0 rgba(0, 0, 0, .58);--shadow-accent-card: 8px 8px 0 #3c7fbc;--shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, .06);--panel-highlight: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .08));--panel-border: rgba(255, 255, 255, .12);--panel-shadow: 0 10px 28px rgba(0, 0, 0, .2);--accent-glow: 0 0 18px rgba(60, 127, 188, .24);--accent-glow-color: rgba(60, 127, 188, .26);--grid-line: rgba(255, 255, 255, .16);--rank-bronze: #cd7f32;--rank-silver: #cbd5e1;--rank-gold: #ff9f43;--rank-diamond: #b9f2ff;--rank-officer: #ff7777;--rank-admiral: #d77bff;--gradient-canvas: linear-gradient(180deg, #121412 0%, #080908 56%, #050605 100%);--gradient-card: linear-gradient(145deg, #171b17, #0b0d0b);--gradient-control: linear-gradient(180deg, #1c211c 0%, #121612 52%, #090b09 100%);--gradient-control-hover: linear-gradient(180deg, #242b24 0%, #171c17 52%, #0d100d 100%);--gradient-accent: linear-gradient(135deg, #ffdc76, #ffc83d);--gradient-accent-card: radial-gradient(circle at 30% 0%, rgba(60, 127, 188, .2), transparent 36%), linear-gradient(145deg, #0b0d0b, #050605);--gradient-success: linear-gradient(90deg, #00d879, #00b765);--chart-grid: rgba(255, 255, 255, .12);--chart-track: #242824;--chart-primary: #3c7fbc;--chart-primary-glow: rgba(60, 127, 188, .24);--chart-secondary: #00d9ff;--chart-label: rgba(255, 255, 255, .68);--code-bg: #050505;--code-text: #b8ddff;--code-border: rgba(255, 255, 255, .16);--selection-bg: #ffc83d;--selection-text: #050505;--scrollbar-track: #080908;--scrollbar-thumb: #343a34;--scrollbar-thumb-hover: #3c7fbc;--browser-theme-color: #050505;--success-ink: #00d879;--warning-ink: #ff9b63;--danger-ink: #ff7777;--info-ink: #00d9ff;--xp-ink: #d33cff;--play-sky: #31d7ff;--play-purple: #d77bff;--play-coral: #ff7777;--play-gold: #ff8a4c;--exercise-canvas: radial-gradient(circle at 12% 8%, rgba(60, 127, 188, .14), transparent 28%), radial-gradient(circle at 88% 12%, rgba(49, 215, 255, .1), transparent 26%), var(--surface-app);--exercise-panel: #0d110c;--exercise-panel-raised: #141a12;--exercise-option: #171d15;--exercise-option-hover: #20291d;--exercise-option-border: #35402f;--exercise-option-shadow: 0 4px 0 #050705;--exercise-option-shadow-hover: 0 2px 0 #050705;--exercise-correct-surface: #10331f;--exercise-correct-border: #25db76;--exercise-correct-ink: #82f3ad;--exercise-correct-shadow: 0 4px 0 #075529;--exercise-wrong-surface: #3a1718;--exercise-wrong-border: #ff6b6b;--exercise-wrong-ink: #ffaaaa;--exercise-wrong-shadow: 0 4px 0 #6e1d21;--exercise-progress-track: #252d22;--exercise-progress-glow: 0 0 16px rgba(60, 127, 188, .3);--exercise-scrim: rgba(0, 0, 0, .58);--exercise-celebration-surface: #111710;--exercise-celebration-shadow: 0 24px 60px rgba(0, 0, 0, .48);--journey-stage-1: #3c7fbc;--journey-stage-2: #31d7ff;--journey-stage-3: #d77bff;--journey-stage-4: #ff8a4c;--journey-stage-5: #ff7777;--journey-stage-6: #55e6b5;--journey-stage-7: #ff9f43;--journey-stage-8: #8ea6ff}[data-theme=light]{--surface-canvas: #f4f6f0;--surface-app: #f4f6f0;--surface-subtle: #e9ede6;--surface-card: #ffffff;--surface-card-muted: #f0f4ec;--surface-card-hover: #f0f4ec;--surface-elevated: #ffffff;--surface-inverse: #111510;--surface-panel-strong: #ffffff;--surface-panel: #ffffff;--surface-panel-muted: #f0f4ec;--surface-panel-translucent: rgba(255, 255, 255, .9);--surface-floating: #ffffff;--text-strong: #111510;--text-default: #182018;--text-secondary: #465145;--text-muted: #667064;--text-disabled: #899286;--text-inverse: #f4f6f0;--text-on-inverse: #f4f6f0;--text-on-inverse-muted: #bdc8bc;--accent-fill: #ffc83d;--accent-fill-hover: #ffdc76;--accent-fill-pressed: #d99a00;--accent-ink: #17345c;--accent-soft: #eaf4ff;--success-soft: #e4f5eb;--warning-soft: #f5e9e3;--danger-soft: #fde8e6;--info-soft: #e3f4f8;--xp-soft: #f3e8fa;--success-fill: #087a4a;--warning-fill: #d85b2a;--danger-fill: #b42318;--info-fill: #00677b;--xp-fill: #70249b;--on-success: #ffffff;--on-warning: #0a0c08;--on-danger: #ffffff;--on-info: #ffffff;--on-xp: #ffffff;--on-accent: #0a0c08;--on-accent-muted: rgba(10, 12, 8, .72);--border-subtle: #c9d1c6;--border-default: #aeb9aa;--border-strong: #7a8878;--border-interactive: #3c7fbc;--border-accent: #3c7fbc;--focus-ring: #3c7fbc;--focus-ring-offset: #f4f6f0;--control-bg: #ffffff;--control-hover: #f0f4ec;--control-active: #ffc83d;--control-disabled: #e1e6de;--placeholder: #667064;--caret: #17345c;--nav-bg: #ffffff;--nav-border: #c9d1c6;--nav-active-bg: #eaf4ff;--nav-active-text: #17345c;--nav-overlay: rgba(17, 21, 16, .36);--scrim: rgba(17, 21, 16, .42);--scrim-strong: rgba(17, 21, 16, .64);--shadow-card: 0 8px 24px rgba(33, 48, 33, .12);--shadow-elevated: 0 20px 50px rgba(33, 48, 33, .2);--shadow-press: 4px 4px 0 rgba(23, 52, 92, .22);--shadow-accent-button: 0 6px 0 #b98200;--shadow-accent-button-hover: 0 4px 0 #b98200;--shadow-control-raised: inset 0 1px 0 rgba(255, 255, 255, .94), inset 0 -4px 8px rgba(23, 52, 92, .07), 0 5px 0 #bdc7b9, 0 10px 18px rgba(33, 48, 33, .13);--shadow-control-hover: inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -3px 7px rgba(23, 52, 92, .08), 0 4px 0 #aebaa9, 0 9px 16px rgba(33, 48, 33, .15);--shadow-control-pressed: inset 0 2px 6px rgba(23, 52, 92, .14), 0 1px 0 #aebaa9;--shadow-accent-card: 8px 8px 0 #3c7fbc;--shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, .8);--panel-highlight: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(23, 52, 92, .025));--panel-border: #c9d1c6;--panel-shadow: 0 10px 28px rgba(33, 48, 33, .12);--accent-glow: 0 0 18px rgba(60, 127, 188, .18);--accent-glow-color: rgba(60, 127, 188, .22);--grid-line: rgba(60, 127, 188, .14);--rank-bronze: #8a4f22;--rank-silver: #596475;--rank-gold: #87501f;--rank-diamond: #087fa3;--rank-officer: #b93838;--rank-admiral: #7b46c5;--gradient-canvas: linear-gradient(180deg, #f8faf5 0%, #f4f6f0 58%, #edf2e9 100%);--gradient-card: linear-gradient(145deg, #ffffff, #f0f4ec);--gradient-control: linear-gradient(180deg, #ffffff 0%, #f3f7f0 52%, #e4ebe1 100%);--gradient-control-hover: linear-gradient(180deg, #ffffff 0%, #f7faf4 52%, #eaf1e7 100%);--gradient-accent: linear-gradient(135deg, #ffdc76, #ffc83d);--gradient-accent-card: radial-gradient(circle at 30% 0%, var(--accent-soft), transparent 36%), linear-gradient(145deg, #ffffff, #f0f4ec);--gradient-success: linear-gradient(90deg, #0b9b60, #087a4a);--chart-grid: #d5ddd1;--chart-track: #dfe6dc;--chart-primary: #3c7fbc;--chart-primary-glow: rgba(60, 127, 188, .18);--chart-secondary: #00677b;--chart-label: #465145;--code-bg: #e9ede6;--code-text: #244000;--code-border: #c9d1c6;--selection-bg: #ffc83d;--selection-text: #0a0c08;--scrollbar-track: #e9ede6;--scrollbar-thumb: #aeb9aa;--scrollbar-thumb-hover: #3c7fbc;--browser-theme-color: #f4f6f0;--success-ink: #087a4a;--warning-ink: #923f1e;--danger-ink: #b42318;--info-ink: #00677b;--xp-ink: #70249b;--play-sky: #087fa3;--play-purple: #7b46c5;--play-coral: #c73d3d;--play-gold: #a64b18;--exercise-canvas: radial-gradient(circle at 12% 8%, #e7f7ec, transparent 30%), radial-gradient(circle at 88% 12%, #dff8ff, transparent 28%), linear-gradient(180deg, #fbfdf8 0%, #f4f8ef 100%);--exercise-panel: #ffffff;--exercise-panel-raised: #ffffff;--exercise-option: #ffffff;--exercise-option-hover: #f5faef;--exercise-option-border: #cbd8c4;--exercise-option-shadow: 0 4px 0 #aebea6;--exercise-option-shadow-hover: 0 2px 0 #aebea6;--exercise-correct-surface: #e4f7de;--exercise-correct-border: #399b23;--exercise-correct-ink: #246d16;--exercise-correct-shadow: 0 4px 0 #77b768;--exercise-wrong-surface: #ffe8e5;--exercise-wrong-border: #ce4b46;--exercise-wrong-ink: #9c2e2a;--exercise-wrong-shadow: 0 4px 0 #d58c87;--exercise-progress-track: #dfe9da;--exercise-progress-glow: 0 0 16px rgba(60, 127, 188, .2);--exercise-scrim: rgba(18, 30, 16, .42);--exercise-celebration-surface: #ffffff;--exercise-celebration-shadow: 0 24px 60px rgba(33, 48, 33, .24);--journey-stage-1: #3c7fbc;--journey-stage-2: #087fa3;--journey-stage-3: #7b46c5;--journey-stage-4: #a64b18;--journey-stage-5: #b93838;--journey-stage-6: #087a5b;--journey-stage-7: #a85400;--journey-stage-8: #4059a8;--color-bg-primary: var(--surface-canvas);--color-bg-secondary: var(--surface-card);--color-bg-tertiary: var(--surface-subtle);--color-primary: var(--accent-ink);--color-primary-hover: var(--accent-fill-hover);--color-text-primary: var(--text-strong);--color-text-secondary: var(--text-secondary);--color-text-muted: var(--text-muted);--color-text-inverse: var(--on-accent);--color-border: var(--border-subtle);--color-border-active: var(--border-accent);--color-border-subtle-active: var(--border-interactive);--color-border-hover: var(--border-strong);--color-success: var(--success-ink, #087a4a);--color-warning: var(--warning-ink, #923f1e);--color-danger: var(--danger-ink, #b42318);--color-error: var(--danger-ink, #b42318);--color-info: var(--info-ink, #00677b);--color-xp: var(--xp-ink, #70249b);--bg-primary: var(--surface-canvas);--bg-secondary: var(--surface-card);--bg-tertiary: var(--surface-subtle);--bg-card: var(--surface-card);--bg-elevated: var(--surface-elevated);--bg-hover: var(--surface-card-hover);--text-primary: var(--text-strong);--text-tertiary: var(--text-muted);--border: var(--border-subtle);--border-color: var(--border-subtle);--primary: var(--accent-ink);--primary-light: var(--accent-fill-hover);--success: var(--success-ink, #087a4a);--warning: var(--warning-ink, #923f1e);--error: var(--danger-ink, #b42318);--danger: var(--danger-ink, #b42318);--color-primary-rgb: 182, 255, 0;--color-text: var(--text-default);--color-text-on-primary: var(--on-accent);--text-light: var(--text-inverse);--font-size-md: 1rem;--shadow-xl: var(--shadow-elevated)}html,body{background-color:var(--surface-app)}html{color-scheme:dark}[data-theme=light]{color-scheme:light}