@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-base: #0a0a0a;--bg-raised: #111111;--bg-surface: #151515;--bg-border: #1a1a1a;--bg-hover: #282828;--text-primary: #ffffff;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-disabled: #52525b;--accent: #3b82f6;--accent-dark: #2563eb;--accent-light: #60a5fa;--success: #22c55e;--error: #ef4444;--warning: #eab308;--player-1: #3b82f6;--player-2: #a855f7;--player-3: #f97316;--player-4: #14b8a6;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--space-xs: 2px;--space-sm: 4px;--space-md: 8px;--space-lg: 12px;--space-xl: 16px;--space-2xl: 20px;--space-3xl: 24px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 10px;--radius-pill: 16px;--radius-full: 50%;--transition-fast: .15s ease-out;--transition-instant: 50ms ease-out;--sidebar-width: 56px;--sidebar-width-collapsed: 48px;--piano-height: 80px;--bottom-bar-height: 44px;--header-height: 52px}.light-theme{--bg-base: #f5f5f5;--bg-raised: #ffffff;--bg-surface: #e5e5e5;--bg-border: #d4d4d4;--bg-hover: #e0e0e0;--text-primary: #171717;--text-secondary: #525252;--text-muted: #737373;--text-disabled: #a3a3a3}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;height:100%;overflow:hidden}body{height:100%;overflow:hidden;font-family:var(--font-family);font-size:13px;background:var(--bg-base);color:var(--text-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}:focus:not(:focus-visible){outline:none}a{color:var(--accent);text-decoration:none;transition:color .15s ease-out}a:hover{color:var(--accent-light)}button{cursor:pointer;font-family:var(--font-family)}::selection{background:#3b82f64d;color:var(--text-primary)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}@media (orientation: portrait) and (max-width: 1023px){.app-layout{display:none!important}body:before{content:"\1f4f1  Rotate your device to landscape mode";display:flex;align-items:center;justify-content:center;flex-direction:column;height:100vh;width:100vw;background:var(--bg-base);color:var(--text-muted);font-size:18px;padding:24px;text-align:center}body:after{content:"\1f504";display:block;position:fixed;top:55%;left:50%;transform:translate(-50%);font-size:48px;animation:rotate-hint 2s ease-in-out infinite}@keyframes rotate-hint{0%,to{transform:translate(-50%) rotate(0)}50%{transform:translate(-50%) rotate(90deg)}}}@media (max-width: 1023px) and (orientation: landscape){.app-layout{display:flex!important}}