:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0a0d;--bg-glow:#1a1420;--panel:#131116;--panel-raised:#1c1922;--border:#2c2833;--border-soft:#221f28;--text:#f3f1ec;--text-dim:#9a94a3;--text-faint:#5f5a68;--accent:#ff5a1f;--accent-strong:#ff8248;--accent-ink:#2b0f04;--accent2:#c8ff4d;--accent2-strong:#ddff8a;--accent2-ink:#1a2404;--radius-lg:20px;--radius-md:14px;--radius-sm:9px;--font-display:"Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;--font-mono:ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;--rack-max-width:1240px}*{box-sizing:border-box}html{overflow-x:hidden}body{background:var(--bg);min-height:100dvh;color:var(--text);font-family:var(--font-display);-webkit-tap-highlight-color:transparent;margin:0;line-height:1.4;overflow-x:hidden}button{font:inherit;color:inherit}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}.wordmark{letter-spacing:-.03em;text-align:center;margin:0;font-size:clamp(2.75rem,13vw,6rem);font-weight:900;line-height:1}.wordmark .slash,.brand .slash{color:var(--accent)}.start-screen{z-index:10;background:var(--bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;padding:2rem;display:flex;position:fixed;inset:0;overflow:hidden}.start-glow{background:radial-gradient(circle at 50% 45%, var(--bg-glow) 0%, transparent 60%);pointer-events:none;animation:4s ease-in-out infinite glow-pulse;position:absolute;inset:-20%}@keyframes glow-pulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.start-sub{color:var(--text-dim);margin:0;font-size:clamp(.95rem,2.5vw,1.15rem);position:relative}.start-button{background:var(--accent);color:var(--accent-ink);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;border:none;border-radius:999px;padding:1.1rem 2.4rem;font-size:clamp(1rem,3vw,1.25rem);font-weight:800;transition:transform .15s;animation:2.2s ease-in-out infinite button-pulse;position:relative;box-shadow:0 0 #ff5a1f80}.start-button:hover{transform:translateY(-2px)}.start-button:active{transform:translateY(0)scale(.97)}@keyframes button-pulse{0%,to{box-shadow:0 0 #ff5a1f73}50%{box-shadow:0 0 0 14px #ff5a1f00}}.instrument{max-width:var(--rack-max-width);margin:0 auto;padding:1rem 1rem 2rem}.instrument[hidden]{display:none}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;padding:.75rem .25rem 1.25rem;display:flex}.topbar nav{display:contents}.brand{letter-spacing:-.02em;font-size:1.25rem;font-weight:900}.tagline{color:var(--text-dim);margin:0;font-size:.9rem}.section-label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin:0 0 .75rem;font-size:.75rem;font-weight:600}main{flex-direction:column;gap:1.25rem;display:flex}section{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:1rem 1rem 1.25rem}.pads-grid{grid-template-columns:repeat(3,1fr);gap:.6rem;display:grid}.pad{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel-raised);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;min-height:92px;transition:transform 80ms,background 80ms,border-color 80ms;display:flex;position:relative}.pad:hover{border-color:var(--accent)}.pad:active{transform:scale(.96)}.pad-name{font-size:clamp(.95rem,2.6vw,1.1rem);font-weight:700}.pad-key{font-family:var(--font-mono);color:var(--text-faint);border:1px solid var(--border);border-radius:5px;padding:.05rem .4rem;font-size:.7rem}.pad.is-hit{background:var(--accent);border-color:var(--accent-strong);transform:scale(.96)}.pad.is-hit .pad-name,.pad.is-hit .pad-key{color:var(--accent-ink);border-color:var(--accent-ink)}.transport{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.transport-button{background:var(--accent);color:var(--accent-ink);letter-spacing:.03em;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:.5rem;padding:.6rem 1.3rem;font-weight:800;display:inline-flex}.transport-icon{border:6px solid #0000;border-left:10px solid;border-right-width:0;width:0;height:0}.bpm-control{font-family:var(--font-mono);color:var(--text-dim);align-items:center;gap:.6rem;font-size:.85rem;display:flex}.bpm-control input[type=range]{accent-color:var(--accent2);width:clamp(120px,30vw,220px)}.bpm-control output{min-width:2.4em;color:var(--text);font-weight:700}.clear-button{border:1px solid var(--text-dim);color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.03em;cursor:pointer;background:0 0;border-radius:999px;padding:.45rem 1rem;font-size:.8rem;font-weight:700}.clear-button:hover{border-color:var(--text);color:var(--text)}.preset-group{gap:.35rem;display:inline-flex}.preset-button{border:1px solid var(--text-dim);color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.03em;cursor:pointer;background:0 0;border-radius:999px;padding:.45rem .9rem;font-size:.8rem;font-weight:700}.preset-button:hover{border-color:var(--accent2);color:var(--text)}.sequencer-grid{flex-direction:column;gap:.4rem;display:flex}.sequencer-row{grid-template-columns:2.2rem 1fr;align-items:center;gap:.35rem;display:grid}.row-label{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);font-size:.58rem}.row-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:.28rem;display:grid}.step-group{grid-template-columns:repeat(4,minmax(0,1fr));gap:.14rem;display:grid}.step{aspect-ratio:1;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel-raised);cursor:pointer;touch-action:none;justify-content:center;align-items:center;min-height:14px;padding:.12rem;display:flex;position:relative}.step:before{content:"";background:var(--border);border-radius:50%;width:40%;height:40%;transition:background .1s,transform .1s}.step.is-on:before{background:var(--accent2)}.step.is-current{border-color:var(--accent2-strong)}.step.is-current:before{transform:scale(1.2)}.step.is-on.is-current:before{background:var(--accent2-strong)}.sequencer-grid.is-playing .row-label{color:var(--accent2)}.transport-button[aria-pressed=true]{background:var(--panel-raised);color:var(--text);border:1px solid var(--accent)}.transport-button[aria-pressed=true] .transport-icon{background:currentColor;border-style:none;border-radius:2px;width:10px;height:10px}.bass-row{border-top:1px dashed var(--border-soft);margin-top:.35rem;padding-top:.5rem}.bass-step .note-name{font-family:var(--font-mono);color:var(--accent2-strong);pointer-events:none;font-size:.55rem;font-weight:700;display:none}.bass-step.is-on:before{display:none}.bass-step.is-on .note-name{display:block}.bass-step.is-selected{border-color:var(--accent-strong);background:var(--accent-ink)}.piano-scroll{padding-bottom:.25rem;overflow:auto hidden}.piano{--white-key-width:40px;--black-key-width:26px;width:max-content;height:150px;display:flex;position:relative}.piano .key{touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;border:none;padding:0}.piano .key.white{width:var(--white-key-width);border:1px solid var(--border);background:#ece7e0;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;height:100%;padding-bottom:.4rem;display:flex;position:relative}.piano .key.black{width:var(--black-key-width);z-index:2;background:#14121a;border:1px solid #000;border-radius:0 0 5px 5px;justify-content:center;align-items:flex-end;height:62%;padding-bottom:.35rem;display:flex;position:absolute;top:0}.piano .key.white.is-active{background:var(--accent2);border-color:var(--accent2-strong)}.piano .key.black.is-active{background:var(--accent2-strong);border-color:var(--accent2-strong)}.piano .key.white.is-active .key-label{color:var(--accent2-ink)}.key-label{font-family:var(--font-mono);color:#6b6459;pointer-events:none;font-size:.62rem}.piano .key.black .key-label{color:#8a8a8a}.piano .key.black.is-active .key-label{color:var(--accent2-ink)}@media (width>=900px){.instrument{padding:1.5rem 2rem 3rem}main{grid-template-columns:minmax(280px,380px) 1fr;gap:1.5rem;display:grid}.pads-section{grid-column:1}.sequencer-section{grid-column:2}.piano-section{grid-column:1/-1}.pads-grid{grid-template-columns:repeat(3,1fr);height:100%}.pad{min-height:120px}.piano{--white-key-width:52px;--black-key-width:32px;height:190px}.sequencer-row{grid-template-columns:4rem 1fr;gap:.6rem}.row-label{font-size:.75rem}.row-steps{gap:.6rem}.step-group{gap:.25rem}.step{min-height:32px;padding:.35rem}}