:root{--text:#f5f3ff;--text-muted:#bab3dd;--radius:.5rem;--glass-bg:#ffffff12;--glass-bg-strong:#ffffff29;--glass-border:#fff3;--accent-tonic:#22e0c4;--accent-tonic-dim:#22e0c455;--accent-subdominant:#ffc857;--accent-subdominant-dim:#ffc85755;--accent-dominant:#ff5da2;--accent-dominant-dim:#ff5da255;--accent-color:#9d6bff;--accent-color-dim:#9d6bff55;--focus-ring:#fef08a}*{box-sizing:border-box}button{appearance:none;font:inherit;color:inherit}body{min-height:100vh;color:var(--text);background-color:#0000;background-image:radial-gradient(circle at 12% 18%,#ff5da22e 0%,#0000 42%),radial-gradient(circle at 88% 12%,#22e0c42e 0%,#0000 42%),radial-gradient(circle at 50% 100%,#9d6bff33 0%,#0000 55%),linear-gradient(165deg,#1a1240 0%,#2a1a52 45%,#150f2e 100%);background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;margin:0;font-family:system-ui,Segoe UI,sans-serif;line-height:1.5}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:10;border-bottom:1px solid var(--glass-border);-webkit-backdrop-filter:blur(18px)saturate(160%);background:#150e2e99;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.75rem 1.25rem;display:flex;position:sticky;top:0}.topbar nav{flex:none}.topbar nav a{color:var(--text-muted);font-size:.85rem;text-decoration:none}.topbar nav a:hover{color:var(--accent-tonic);text-decoration:underline}.topbar__title{text-align:center;letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 18px #ff5da255;flex:auto;margin:0;font-size:1rem;font-weight:600}.transport{flex-wrap:wrap;flex:100%;justify-content:center;align-items:center;gap:.5rem;display:flex}.glass-button{background:var(--glass-bg-strong);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px)saturate(160%);color:var(--text);cursor:pointer;border-radius:.6rem;align-items:center;gap:.35rem;padding:.45rem .75rem;font-size:.8rem;font-weight:600;transition:transform .12s,background-color .12s,border-color .12s;display:inline-flex}.glass-button:hover:not(:disabled){background:#ffffff42;border-color:#fff6}.glass-button:active:not(:disabled){transform:scale(.96)}.glass-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.glass-button:disabled{opacity:.4;cursor:not-allowed}.glass-button--danger{border-color:#ff5da266}.glass-button--danger:hover:not(:disabled){background:#ff5da233;border-color:#ff5da2aa}.glass-button--playing{border-color:var(--accent-tonic);background:var(--accent-tonic-dim)}@media (prefers-reduced-motion:no-preference){.glass-button--playing{animation:1.1s ease-in-out infinite button-pulse}}@keyframes button-pulse{0%,to{box-shadow:0 0 0 0 var(--accent-tonic-dim)}50%{box-shadow:0 0 16px 5px var(--accent-tonic-dim)}}.speed-control{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-muted);border-radius:.6rem;align-items:center;gap:.45rem;padding:.4rem .65rem;font-size:.8rem;display:inline-flex}.speed-control input[type=range]{width:5rem;accent-color:var(--accent-subdominant)}.speed-control output{color:var(--text);text-align:right;min-width:2.4rem;font-family:ui-monospace,SF Mono,Cascadia Code,monospace}.instrument-control,.rhythm__control{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.85rem;display:inline-flex}select{font:inherit;color:inherit}.instrument-control select,.rhythm__control select{background:var(--glass-bg-strong);border:1px solid var(--glass-border);color:var(--text);cursor:pointer;border-radius:.5rem;padding:.4rem .6rem}.instrument-control select:focus-visible,.rhythm__control select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}main{flex-direction:column;flex:1;gap:1rem;width:100%;max-width:56rem;margin-inline:auto;padding:1rem 1.25rem 1.5rem;display:flex}.panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:calc(var(--radius) + .25rem);-webkit-backdrop-filter:blur(16px)saturate(150%);padding:1rem;box-shadow:0 8px 32px #0a051e59}.progression{min-height:3.5rem}.pads{flex-direction:column;flex:1;min-height:0;display:flex}.pads__header{justify-content:flex-end;margin-bottom:.75rem;display:flex}.progression__list{flex-wrap:wrap;align-items:center;gap:.5rem;max-height:6.5rem;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.chip{background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;border-radius:.4rem;align-items:center;padding:.35rem .6rem;font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-size:.85rem;transition:transform .1s,border-color .12s,background-color .12s;display:inline-flex}.chip:hover{background:var(--glass-bg-strong)}.chip:active{transform:scale(.96)}.chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.chip--latest{border-color:var(--accent-tonic)}.chip--selected{border-color:var(--accent-color);background:var(--accent-color-dim)}.chip--hint{color:var(--text-muted);cursor:default;border-style:dashed;font-family:inherit;font-style:italic}.pads__grid{flex:1;grid-template-columns:repeat(3,1fr);align-content:center;gap:.85rem;display:grid}.pad{background:var(--glass-bg);min-height:6rem;color:var(--text);border:1px solid var(--pad-accent-dim,var(--glass-border));border-radius:var(--radius);-webkit-backdrop-filter:blur(10px)saturate(160%);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;padding:.75rem;transition:transform .12s,border-color .12s,background-color .12s;display:flex;position:relative}.pad[data-category=tonic]{--pad-accent:var(--accent-tonic);--pad-accent-dim:var(--accent-tonic-dim)}.pad[data-category=subdominant]{--pad-accent:var(--accent-subdominant);--pad-accent-dim:var(--accent-subdominant-dim)}.pad[data-category=dominant]{--pad-accent:var(--accent-dominant);--pad-accent-dim:var(--accent-dominant-dim)}.pad[data-category=color]{--pad-accent:var(--accent-color);--pad-accent-dim:var(--accent-color-dim)}.pad:hover{border-color:var(--pad-accent);background:var(--glass-bg-strong)}.pad:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.pad:active{transform:scale(.97)}.pad__key{width:1.1rem;height:1.1rem;color:var(--text-muted);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:.25rem;justify-content:center;align-items:center;font-family:ui-monospace,monospace;font-size:.7rem;display:flex;position:absolute;top:.4rem;right:.5rem}.pad__name{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-size:1.5rem;font-weight:700}.pad__meta{align-items:center;gap:.35rem;display:flex}.pad__roman{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.pad__tier{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);border:1px solid var(--glass-border);border-radius:1rem;padding:.05rem .35rem;font-size:.6rem;font-weight:600}@media (prefers-reduced-motion:no-preference){.pad--playing{animation:.5s ease-out pad-glow}.chip--latest{animation:.3s ease-out chip-pop}}@media (prefers-reduced-motion:reduce){.pad--playing{box-shadow:0 0 0 3px var(--pad-accent)}}@keyframes pad-glow{0%{box-shadow:0 0 0 0 var(--pad-accent-dim)}60%{box-shadow:0 0 22px 6px var(--pad-accent-dim)}to{box-shadow:0 0 #0000}}@keyframes chip-pop{0%{opacity:.4;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.status__line{color:var(--text-muted);margin:0;padding:0 .25rem;font-family:ui-monospace,monospace;font-size:.8rem}.rhythm-row{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.rhythm{flex-direction:column;gap:.5rem;display:flex}.rhythm__title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0;font-size:.75rem;font-weight:700}.rhythm--bass .rhythm__title{color:var(--accent-subdominant)}.rhythm--drums .rhythm__title{color:var(--accent-dominant)}@media (width<=30rem){.pads__grid{grid-template-columns:repeat(2,1fr)}.pad{min-height:4.5rem}.rhythm-row{grid-template-columns:1fr}.glass-button{padding:.4rem .6rem;font-size:.75rem}}