body{margin:0;padding:0;background-color:var(--bg);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--bg: #000000;--surface-1: #0a0a0a;--surface-2: #141414;--surface-3: #1f1f1f;--border-subtle: #1f1f1f;--border-default: #333333;--border-strong: #6b6b6b;--text-primary: #e8e8e8;--text-secondary: #a8a8a8;--text-muted: #8c8c8c;--text-disabled: #5c5c5c;--text-on-select: #ffffff;--on-role: #000000;--select: #ffffff;--select-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--select);--focus-ring: var(--select-ring);--role-root: #f07878;--role-third: #a0c4ff;--role-fifth: #80f5c8;--role-extension: #b084dc;--role-target: #e0d840;--role-scale: transparent;--role-scale-edge: var(--text-muted);--color-error: #ff8a80;--color-warning: #ffc266;--color-success: #6fdc8c;--color-info: var(--text-secondary);--seq-kick: #f79009;--seq-snare: #2e90fa;--seq-hat: #bdc7de;--seq-chords: #ffb782;--seq-bass: #32d583;--seq-rim: #f79009;--seq-crash: #bdc7de;--assistant-from: #6e3fa3;--assistant-from-hover: #7b4bb0;--assistant-to: var(--bg);--assistant-text: var(--text-on-select);--assistant-border: #a77bd8;--key-white: #cfcfcf;--key-black: #1a1a1a;--key-edge: #000000;--key-name-on-white: #555555;--key-name-on-black: var(--text-muted);--fret-wire: var(--border-strong);--string: #8c8c8c;--fret-inlay: #333333;--font-display: "Orbitron", "Hanken Grotesk", sans-serif;--font-body: "Hanken Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--ui-scale: 1.25;--fs-label: calc(12px * var(--ui-scale));--fs-body: calc(14px * var(--ui-scale));--fs-emph: calc(16px * var(--ui-scale));--fs-title: calc(20px * var(--ui-scale));--fs-heading: calc(26px * var(--ui-scale));--fs-display: calc(36px * var(--ui-scale));--hit-min: 44px;--fs-read: max(18px, var(--fs-emph));--fs-read-title: max(20px, var(--fs-emph));--hit-comfort: max(48px, var(--hit-min));--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--transition-fast: .15s ease;--transition-normal: .22s ease;--transition-slow: .35s ease;--color-bg-app: var(--bg);--lg-bg: var(--bg);--lg-panel-bg: transparent;--lg-panel-bg-elevated: var(--surface-1);--lg-border: 1px solid var(--border-default);--border-muted: var(--border-default);--border-dim: var(--border-strong);--lg-accent: var(--select);--lg-accent-glow: transparent;--active-color: var(--select);--active-glow: transparent;--accent: var(--select);--accent-dim: var(--surface-3);--accent-glow: transparent;--theme-primary: var(--select);--theme-primary-dim: var(--surface-3);--text-tertiary: var(--text-muted);--text-faint: var(--text-muted);--text-dim: var(--text-disabled);--text-bright: var(--text-on-select);--led-cyan: var(--select);--lcd-amber: var(--color-warning);--lg-accent-pink: var(--role-target);--bg-deep: var(--bg);--bg-base: var(--surface-1);--bg-surface-lighter: var(--surface-2);--surface-sunken: var(--bg);--color-bg-darker: var(--bg);--color-border: var(--border-default);--color-text-muted: var(--text-muted);--color-alert-warning: var(--color-warning);--color-alert-error: var(--color-error);--color-mode-active: var(--surface-3);--color-mode-active-border: var(--select);--color-mode-active-glow: transparent;--glass-shadow: none;--lg-shadow: none;--glass-bg: var(--surface-2);--glass-bg-hover: var(--surface-3);--glass-border: var(--border-default);--glass-blur: 0px;--bg-surface: var(--surface-1);--bg-raised: var(--surface-2);--bg-panel: var(--surface-1);--bg-overlay: var(--surface-2);--color-secondary: var(--text-secondary);--root-color: var(--role-root);--minor-color: var(--role-third);--major-color: var(--role-third);--fifth-color: var(--role-fifth);--tension-color: var(--role-extension);--dominant-color: var(--role-extension);--major7-color: var(--role-extension);--ext-color: var(--role-extension)}@media(min-width:768px){:root{--ui-scale: 1.125}}@media(min-width:1920px){:root{--ui-scale: 1.25}}@media(min-width:2560px){:root{--ui-scale: 1.375}}@media(min-width:3840px){:root{--ui-scale: 1.5;--hit-min: 48px}}body{background:var(--bg);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-body)}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:none;box-shadow:var(--focus-ring)}.app-loading-fallback{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--color-bg-app);color:var(--text-muted);font-family:var(--font-body);font-size:.9rem;letter-spacing:.05em}