.app-topbar{z-index:20;margin-top:-2.5rem;position:sticky;top:0}@media (max-width:640px){.app-topbar{margin-top:-1.25rem}}.app-topbar-breakout{background:var(--bg);border-bottom:1px solid var(--border);width:100vw;position:relative;left:50%;transform:translate(-50%)}.app-topbar-inner{justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.5rem;display:flex}.app-topbar-title{color:inherit;text-decoration:none}.app-topbar-actions{align-items:center;gap:.5rem;display:flex}.app-topbar h1{border-bottom:none;margin:0;padding-bottom:0;font-size:1.3rem}.app-topbar-actions button{color:var(--text-dim);background:0 0;border:1px solid #0000;border-radius:4px;padding:.35rem .6rem;font-size:.85rem;font-weight:400}.app-topbar-actions button:hover:not(:disabled){background:var(--bg-alt);color:var(--text)}.app-topbar-sound-toggle:before,.app-topbar-midi-toggle:before{content:"";vertical-align:.1em;background:var(--text-dim);border-radius:50%;width:6px;height:6px;margin-right:.45rem;display:inline-block}.app-topbar-sound-toggle.active{color:var(--text)}.app-topbar-sound-toggle.active:before{background:var(--accent-2);box-shadow:0 0 0 3px var(--status-halo)}@keyframes midi-pulse{0%,to{opacity:1}50%{opacity:.35}}.app-topbar-midi-toggle:before{background:var(--midi-disconnected);animation:2s ease-in-out infinite midi-pulse}.app-topbar-midi-toggle.connected{color:var(--text)}.app-topbar-midi-toggle.connected:before{background:var(--midi-connected);box-shadow:0 0 0 3px var(--status-halo);animation:none}
:root{--bg:#17130e;--bg-alt:#221b14;--border:#372c20;--text:#f0e7d6;--text-dim:#a08f77;--code-bg:#0e0b08;--bg-elevated:#2b2219;--key-hue:25;--accent-2:#7fb069;--text-on-accent:#17130e;--warn:#c8912f;--danger:#d4574c;--danger-muted:#c76a60;--danger-hover-bg:#d4574c1f;--midi-connected:#7fb069;--midi-disconnected:#d4574c;--white:#fff;--black:#000;--paper:#f5f0e4;--overlay-bg:#0e0b08b8;--hover-bg:#f0e7d60f;--shadow:#00000080;--shadow-soft:#00000059;--shadow-raised:#0009;--shadow-lifted:#000000bf;--shadow-overlay:#000c;--shadow-inset:#00000073;--status-halo:#7fb0692e;--key-white-border:#c9bfa9;--key-white-top:#fbf7ec;--key-white-mid:#efe8d8;--key-white-bottom:#dcd3c0;--key-black:#12100c;--key-black-top:#2a241c;--key-label:#a89982;--key-preview:#e7be6c;--key-preview-dark:#b07f22;--key-played:#7fb069;--key-played-dark:#4f7a3d;--practice-ground:#1c1710;--practice-rule:#2c231a;--font-sans:var(--font-archivo), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;--font-serif:var(--font-spectral), ui-serif, Georgia, "Times New Roman", serif}*,:before,:after{--accent:oklch(.72 .115 var(--key-hue));--accent-deep:oklch(.5 .12 var(--key-hue));--accent-soft:oklch(.25 .045 var(--key-hue));--accent-translucent:oklch(.72 .115 var(--key-hue) / .5)}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);max-width:900px;min-height:100vh;margin:0 auto;padding:2.5rem 1.5rem 5rem;line-height:1.6;overflow-x:clip}h1{font-family:var(--font-serif);border-bottom:1px solid var(--border);margin-bottom:.25rem;padding-bottom:.75rem;font-size:1.8rem;font-weight:600}p{margin:.75rem 0}a{color:var(--accent)}label{color:var(--text-dim);flex-direction:column;gap:.35rem;width:100%;max-width:320px;font-size:.9rem;display:flex}input,textarea,select{background:var(--code-bg);width:100%;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.55rem .7rem;font-family:inherit;font-size:.95rem}input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}textarea{resize:vertical;min-height:6rem}button{background:var(--accent);color:var(--text-on-accent);cursor:pointer;border:none;border-radius:6px;padding:.55rem 1.2rem;font-family:inherit;font-size:.9rem;font-weight:600}button:hover{opacity:.9}button:disabled{opacity:.5;cursor:not-allowed}[role=alert]{color:var(--danger);font-size:.9rem}@media (max-width:640px){body{padding:1.25rem 1rem 3rem}h1{font-size:1.4rem}p{font-size:.94rem}}