@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap";:root{--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--indigo-600:#4f46e5;--indigo-500:#6366f1;--slate-950:#020617;--slate-925:#0b1120;--slate-900:#0f172a;--slate-850:#111827;--slate-800:#1e293b;--slate-750:#1f2933;--slate-700:#334155;--slate-650:#374151;--slate-600:#475569;--slate-500:#64748b;--slate-400:#94a3b8;--slate-450:#9ca3af;--slate-300:#cbd5e1;--slate-250:#d1d5db;--slate-200:#e2e8f0;--slate-150:#e5e7eb;--slate-100:#f3f4f6;--slate-75:#f5f7fa;--slate-50:#f9fafb;--white:#fff;--black:#000;--green-500:#22c55e;--emerald-500:#10b981;--emerald-600:#059669;--green-700:#166534;--green-bg:#ecfdf3;--green-bg-strong:#dcfce7;--green-bg-soft:#d1fae5;--green-ink-deep:#065f46;--red-600:#dc2626;--red-700:#b91c1c;--red-500:#ef4444;--red-400:#f87171;--red-900:#7f1d1d;--red-950:#450a0a;--amber-bg:#fef3c7;--amber-ink:#92400e;--surface-app:var(--slate-100);--surface-card:var(--white);--surface-well:var(--slate-50);--surface-dark:var(--slate-900);--surface-dark-raised:var(--slate-800);--surface-dark-deep:var(--slate-950);--surface-projection:var(--black);--text-strong:var(--slate-850);--text-body:#111827;--text-muted:var(--slate-450);--text-on-dark:#e5e7eb;--text-on-dark-strong:#f9fafb;--text-on-dark-muted:var(--slate-400);--text-inverse:var(--white);--accent:var(--blue-500);--accent-hover:var(--blue-600);--accent-soft:#3b82f633;--focus-ring:0 0 0 3px #3b82f633;--border-light:var(--slate-250);--border-divider:var(--slate-150);--border-dark:var(--slate-650);--border-dark-soft:var(--slate-700);--status-connected-bg:var(--green-bg);--status-connected-ink:var(--green-700);--status-connecting-bg:var(--amber-bg);--status-connecting-ink:var(--amber-ink);--chord:var(--emerald-600);--scrollbar-thumb:var(--blue-500);--scrollbar-track:#0f172a99;--font-ui:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-sans:"Open Sans", system-ui, sans-serif;--font-display:"Montserrat", system-ui, sans-serif;--font-condensed:"Bebas Neue", "Arial Narrow", sans-serif;--font-serif:"Times New Roman", Times, serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--text-2xs:.7rem;--text-xs:.75rem;--text-sm:.85rem;--text-base:.9rem;--text-md:1rem;--text-lg:1.1rem;--text-xl:1.3rem;--text-2xl:1.5rem;--lyrics-size:4.4vw;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.7;--tracking-label:.08em;--space-0:0;--space-1:.25rem;--space-2:.4rem;--space-3:.5rem;--space-4:.75rem;--space-5:1rem;--space-6:1.25rem;--space-7:1.5rem;--space-8:2rem;--pad-input:.4rem .6rem;--pad-button:.5rem 1.2rem;--pad-button-sm:.25rem .7rem;--pad-card:1.25rem 1.5rem;--pad-pill:.15rem .5rem;--sidebar-width:220px;--presenter-sidebar-width:330px;--radius-xs:.25rem;--radius-sm:.3rem;--radius-md:.375rem;--radius-lg:.4rem;--radius-xl:.5rem;--radius-2xl:.6rem;--radius-3xl:.75rem;--radius-4xl:1rem;--radius-pill:999px;--shadow-card:0 1px 3px #0f172a14;--shadow-card-strong:0 1px 3px #0f172a1a;--shadow-panel:0 10px 25px #0f172a59;--shadow-modal:0 20px 60px #0f172a4d;--shadow-modal-dark:0 25px 60px #0009;--shadow-popover:0 8px 24px #0006;--shadow-popover-light:0 4px 12px #0000001a;--shadow-fab:0 4px 10px #0f172a66;--ease:ease;--transition-bg:background .15s ease;--transition-color:color .15s ease, border-color .15s ease;--transition-transform:transform .1s ease;--transition-progress:width .2s ease-out;--scale-active:1.02}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}:root{--accent:#e0685a;--accent-hover:#c0594d;--accent-soft:#e0685a29;--cover-grad:linear-gradient(150deg, #ec9a8e 0%, #e0685a 55%, #aa4f44 100%)}body{font-family:var(--font-ui,system-ui, -apple-system, sans-serif)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#94a3b880;border-radius:999px}::-webkit-scrollbar-track{background:0 0}@keyframes hpFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes hpSpin{to{transform:rotate(360deg)}}.hp-fade{animation:.28s both hpFade}
