.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-alt);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-sound-toggle{border:1px solid var(--border);color:var(--text-dim);background:0 0}.app-topbar-sound-toggle.active{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}@keyframes midi-pulse{0%,to{color:var(--text-dim);background:0 0}50%{background:var(--midi-disconnected);color:var(--white)}}.app-topbar-midi-toggle{border:1px solid var(--border);animation:2s ease-in-out infinite midi-pulse}.app-topbar-midi-toggle.connected{background:var(--midi-connected);border-color:var(--midi-connected);color:var(--white);transition:background .6s,border-color .6s,color .3s;animation:none}
:root{--bg:#0d1117;--bg-alt:#161b22;--border:#30363d;--text:#e6edf3;--text-dim:#8b949e;--accent:#58a6ff;--accent-2:#3fb950;--code-bg:#010409;--warn:#d29922;--danger:#f85149;--text-on-accent:#04121f;--midi-connected:#43a047;--midi-disconnected:#e53935;--white:#fff;--black:#000;--bg-elevated:#21262d;--overlay-bg:#010409b3;--hover-bg:#ffffff0f;--danger-hover-bg:#f851491f;--danger-muted:#e55;--shadow:#00000080;--shadow-soft:#00000059;--accent-translucent:#58a6ff80;--key-white-border:#444;--key-black:#1a1a1a;--key-label:#666;--key-preview:#fde047;--key-preview-dark:#ca8a04;--key-played:#4ade80;--key-played-dark:#16a34a}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);max-width:900px;min-height:100vh;margin:0 auto;padding:2.5rem 1.5rem 5rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;line-height:1.6}h1{border-bottom:1px solid var(--border);margin-bottom:.25rem;padding-bottom:.75rem;font-size:1.8rem}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}}