@import "https://fonts.googleapis.com/css2?family=DM+Mono&family=Syne:wght@500;700;800&display=swap";:root{color:#f3f1ea;background:#0d0e0d;font-family:DM Mono,monospace}*{box-sizing:border-box}body{background:#0d0e0d;margin:0}button,select,input{font:inherit}.app{min-height:100vh}.topbar{z-index:5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0d0e0df0;border-bottom:1px solid #30312e;align-items:center;gap:24px;height:72px;padding:0 24px;display:flex;position:sticky;top:0}.brand{color:#f3f1ea;letter-spacing:-.08em;font:800 1.4rem Syne,sans-serif;text-decoration:none}.brand span{color:#c7ff64}.topbar p{color:#888a82;margin:0 auto;font-size:.68rem}.midi{color:#f3f1ea;cursor:pointer;background:#252722;border:0;padding:12px 15px;font-weight:700}.dot{background:#555;border-radius:50%;width:7px;height:7px;display:inline-block}.dot.online{background:#c7ff64;box-shadow:0 0 8px #c7ff64}.decks{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;display:grid}.deck{border-right:1px solid #30312e;min-width:0;padding:22px}.deck:last-child{border-right:0}.deck-header{border-bottom:1px solid #30312e;justify-content:space-between;align-items:center;gap:16px;min-height:86px;display:flex}.deck-header>div:first-child{gap:5px;display:grid}.deck-header span{color:#c7ff64;letter-spacing:.12em;font-size:.62rem}.deck-header strong{font:700 clamp(1rem,2vw,1.5rem) Syne,sans-serif}.pad-modes{border:1px solid #363832;display:flex}.pad-modes button{color:#777971;cursor:pointer;background:#171815;border:0;border-right:1px solid #363832;padding:9px 10px;font-size:.58rem;font-weight:700}.pad-modes button:last-child{border-right:0}.pad-modes button.active{color:#c7ff64;background:#26331d}.deck-library{min-width:0;display:flex}.deck-library button,.deck-library select{color:#f3f1ea;background:#171815;border:1px solid #3a3c36;padding:10px}.deck-library button{color:#c7ff64;cursor:pointer}.deck-library button:disabled{opacity:.3;cursor:not-allowed}.deck-library select{min-width:0;max-width:150px}.deck-transport{border-bottom:1px solid #30312e;align-items:center;gap:12px;min-height:66px;display:flex}.transport{border:1px solid #363832;display:flex}.transport button{color:#f3f1ea;cursor:pointer;background:#1a1b18;border:0;border-right:1px solid #363832;min-width:42px;padding:10px 12px}.transport button:last-child{border-right:0}.transport button:hover:not(:disabled){color:#c7ff64}.transport .play{color:#10110f;background:#c7ff64}.transport button:disabled{opacity:.3;cursor:not-allowed}.deck-transport>span{color:#b5b7ae;font-size:.68rem}.deck-transport>small{color:#777971;text-align:right;margin-left:auto;font-size:.6rem}.bpm{color:#777971;align-items:center;gap:5px;font-size:.55rem;display:flex}.bpm input{color:#f3f1ea;text-align:center;background:#171815;border:1px solid #363832;width:48px;padding:8px 4px}.mode{color:#777971;cursor:pointer;background:#171815;border:1px solid #363832;min-width:38px;padding:9px 7px;font-size:.6rem;font-weight:700}.mode.active{color:#c7ff64;background:#26331d;border-color:#c7ff64}.fx-strip{border-bottom:1px solid #30312e;align-items:center;gap:6px;min-height:42px;padding:6px 0;display:flex}.fx-strip>span{color:#777971;letter-spacing:.08em;font-size:.55rem}.fx-strip button{color:#777971;cursor:pointer;background:#171815;border:1px solid #363832;padding:7px 9px;font-size:.55rem}.fx-strip button.active{color:#8bdcff;background:#172932;border-color:#8bdcff}.fx-depth{background:#282a26;flex:1;min-width:50px;max-width:130px;height:4px;margin-left:auto;overflow:hidden}.fx-depth i{background:#8bdcff;height:100%;transition:width 30ms linear;display:block;box-shadow:0 0 8px #8bdcff}.deck-pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:16px;display:grid}.track{border:1px solid color-mix(in srgb, var(--pad-color) 55%, #353731);background:linear-gradient(115deg, color-mix(in srgb, var(--pad-color) 12%, #1a1b18), #1a1b18 60%);color:#f3f1ea;min-width:0;min-height:96px;box-shadow:inset 3px 0 0 var(--pad-color);position:relative;overflow:hidden}.track:hover{border-color:var(--pad-color)}.track-toggle{width:100%;min-height:66px;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:28px minmax(64px,100px) 1fr 40px;align-items:center;gap:8px;padding:10px;display:grid}.track strong{text-overflow:ellipsis;white-space:nowrap;font:700 .76rem Syne,sans-serif;overflow:hidden}.track small,.pad-number{letter-spacing:.08em;font-size:.55rem}.track small{color:var(--pad-color);text-align:right}.track.muted{color:#6d6f69;background:#121311}.track.muted small{color:#ff785a}.track.empty{color:color-mix(in srgb, var(--pad-color) 62%, #777);background:color-mix(in srgb, var(--pad-color) 7%, #11120f);border-style:dashed;grid-template-columns:28px 1fr 1fr 30px;align-items:center;gap:8px;padding:12px;display:grid}.track.empty strong{font-size:.68rem}.jump-pad{border:1px solid color-mix(in srgb, var(--pad-color) 62%, #353731);background:linear-gradient(135deg, color-mix(in srgb, var(--pad-color) 17%, #151613), #151613 70%);color:#f3f1ea;text-align:left;cursor:pointer;min-height:96px;box-shadow:inset 3px 0 0 var(--pad-color);grid-template-rows:auto 1fr;grid-template-columns:1fr auto;padding:12px;display:grid}.jump-pad:hover:not(:disabled){border-color:var(--pad-color);background:color-mix(in srgb, var(--pad-color) 20%, #151613)}.jump-pad:disabled{opacity:.35;cursor:not-allowed}.jump-pad span,.jump-pad small{color:#777971;letter-spacing:.08em;font-size:.55rem}.jump-pad small{text-align:right}.jump-pad strong{color:var(--pad-color);grid-column:1/-1;align-self:end;font:700 1.6rem Syne,sans-serif}.empty-wave{background:#292a27;height:1px}.waveform{height:34px;position:relative;overflow:hidden}.waveform svg{width:100%;height:100%;display:block}.waveform path{fill:none;stroke-width:.8px}.waveform-base{stroke:#5b5e56}.waveform-progress{stroke:var(--pad-color)}.waveform-progress.muted{stroke:#ff785a}.waveform .playhead{stroke:#fff;stroke-width:.35px}.volume{border-top:1px solid #2f302c;align-items:center;gap:8px;height:28px;padding:0 10px;display:flex}.volume span{color:#777971;font-size:.52rem}.volume input{width:100%;height:3px;accent-color:var(--pad-color);cursor:pointer}.track.midi-pressed,.jump-pad.midi-pressed{z-index:1;background:color-mix(in srgb, var(--pad-color) 55%, #171815);box-shadow:0 0 0 2px var(--pad-color), 0 0 24px color-mix(in srgb, var(--pad-color) 75%, transparent), inset 0 0 22px color-mix(in srgb, var(--pad-color) 35%, transparent);border-color:#fff;animation:.18s ease-out midi-pad-press}.midi-pressed:not(.track):not(.jump-pad){outline-offset:2px;outline:2px solid #fff;animation:.18s ease-out midi-control-press}@keyframes midi-pad-press{0%{filter:brightness(1.8);transform:scale(.95)}45%{transform:scale(1.025)}to{filter:brightness();transform:scale(1)}}@keyframes midi-control-press{0%{filter:brightness(2);transform:scale(.92)}to{filter:brightness();transform:scale(1)}}@media (width<=1150px){.decks{grid-template-columns:1fr}.deck{border-bottom:1px solid #30312e;border-right:0}.deck-pads{grid-template-columns:repeat(4,minmax(0,1fr))}.track-toggle{grid-template-rows:auto 30px;grid-template-columns:24px 1fr}.track-toggle .waveform{grid-column:1/-1}.track-toggle small{display:none}}@media (width<=700px){.topbar{flex-wrap:wrap;height:auto;min-height:68px;padding:12px 16px}.topbar p{display:none}.midi{margin-left:auto}.deck{padding:14px}.deck-header{flex-direction:column;align-items:flex-start;padding-bottom:12px}.deck-library{width:100%}.deck-library select{flex:1;max-width:none}.deck-pads{grid-template-columns:repeat(2,minmax(0,1fr))}.deck-transport{flex-wrap:wrap;padding:10px 0}.deck-transport>small{text-align:left;width:100%}}