:root,:root[data-theme=dark]{--bg-primary: #0a0a0f;--bg-secondary: #121216;--surface: #111116;--surface-raised: #111827;--surface-muted: #1a1a24;--surface-strong: #0f172a;--surface-control: #222;--surface-control-strong: #333;--surface-selected: rgba(59, 130, 246, .14);--surface-success: #14532d;--surface-success-soft: rgba(34, 197, 94, .14);--surface-warning-soft: rgba(245, 158, 11, .14);--surface-error-soft: rgba(239, 68, 68, .14);--border: #333;--border-strong: #334155;--border-muted: #444;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--text-subtle: #64748b;--text-disabled: #888;--text-inverse: #111827;--text-on-accent: #ffffff;--brand: #3b82f6;--brand-soft: rgba(59, 130, 246, .14);--color-success: #4ade80;--color-success-strong: #22c55e;--color-warning: #fbbf24;--color-error: #f87171;--shadow-color: rgba(0,0,0,.5);--notation-bg: #0f172a;--notation-staff: #cbd5e1;--notation-skipped: #94a3b8;--chart-bg: #08111f;--breath-inhale: #38bdf8;--breath-exhale: #22c55e;--breath-inhale-gradient: radial-gradient(circle at 35% 30%, #bae6fd, #38bdf8 45%, #0e7490);--breath-exhale-gradient: radial-gradient(circle at 35% 30%, #bbf7d0, #22c55e 45%, #166534);--breath-inhale-glow: rgba(56, 189, 248, .42);--breath-exhale-glow: rgba(34, 197, 94, .42);--font-family: "Inter", system-ui, sans-serif}:root[data-theme=light]{--bg-primary: #f5f7f2;--bg-secondary: #eef3ea;--surface: #ffffff;--surface-raised: #ffffff;--surface-muted: #f7faf4;--surface-strong: #edf5e8;--surface-control: #f9fbf7;--surface-control-strong: #e7eee1;--surface-selected: #e8f3e3;--surface-success: #dcfce7;--surface-success-soft: #e8f8ed;--surface-warning-soft: #fff4d6;--surface-error-soft: #ffe7e7;--border: #d9e2d2;--border-strong: #aebfa5;--border-muted: #c6d2bf;--text-primary: #172112;--text-secondary: #273623;--text-muted: #45543f;--text-subtle: #65735f;--text-disabled: #93a08d;--text-inverse: #ffffff;--text-on-accent: #ffffff;--brand: #1d5fd3;--brand-soft: #e6efff;--color-success: #16733a;--color-success-strong: #16a34a;--color-warning: #a15c07;--color-error: #c62828;--shadow-color: rgba(23, 33, 18, .15);--notation-bg: #fbfdf8;--notation-staff: #111111;--notation-skipped: #64748b;--chart-bg: #fbfdf8;--breath-inhale: #0369a1;--breath-exhale: #15803d;--breath-inhale-gradient: radial-gradient(circle at 35% 30%, #e0f2fe, #38bdf8 42%, #0369a1);--breath-exhale-gradient: radial-gradient(circle at 35% 30%, #dcfce7, #22c55e 42%, #15803d);--breath-inhale-glow: rgba(3, 105, 161, .24);--breath-exhale-glow: rgba(21, 128, 61, .24)}body{margin:0;padding:0;background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}button,input,select,textarea{font:inherit}input,select,textarea{background-color:var(--surface-control);color:var(--text-primary);border-color:var(--border-muted)}input::placeholder,textarea::placeholder{color:var(--text-subtle)}#root{min-height:100vh;display:flex;flex-direction:column}.app-container{display:flex;min-height:100vh;background:var(--bg-primary);color:var(--text-primary);font-family:Inter,system-ui,sans-serif}.app-sidebar{width:280px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:transform .3s ease;z-index:100;overflow-y:auto}.app-main-content{flex:1;padding:3rem 4rem;overflow-y:auto;position:relative}.hamburger-btn{display:none;background:transparent;border:none;color:var(--text-primary);cursor:pointer;padding:1rem;position:absolute;top:0;left:0;z-index:110}.overlay{display:none}@media(max-width:768px){.app-container{flex-direction:column}.hamburger-btn{display:block;position:fixed}.app-sidebar{position:fixed;top:0;left:0;height:100vh;transform:translate(-100%);box-shadow:2px 0 10px var(--shadow-color)}.app-sidebar.open{transform:translate(0)}.app-main-content{padding:4rem 1rem 1rem;width:100vw}.overlay.open{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;z-index:90}}.responsive-grid{display:grid;grid-template-columns:minmax(300px,1fr) 2fr;gap:2rem;margin-top:2rem}@media(max-width:1024px){.responsive-grid{grid-template-columns:1fr}}