:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#111315;color:#eeeae2;font-synthesis:none;--muted:#969b9e;--line:#373b3e;--panel:#202326;--accent:#f7b65b;--red:#ff6b65;--green:#a3dab2}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:#292d30;color:inherit;border-radius:6px;padding:9px 12px;font-size:12px;font-weight:600;white-space:nowrap}button:hover:not(:disabled){background:#353b40;border-color:#70787e}button:disabled{cursor:default;opacity:.36}button[aria-pressed=true]{color:var(--accent);border-color:#9e7844;background:#423727}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,select{color:inherit;background:#191c1f;border:1px solid var(--line);border-radius:5px;padding:7px;font-size:12px;min-width:0}select{max-width:100%}input[type=range]{accent-color:#d9d8cf;cursor:pointer;padding:0;border:0;background:transparent;height:24px;min-width:30px}label{font-size:12px}kbd{font:10px ui-monospace,SFMono-Regular,monospace;color:#9aa0a2;font-weight:400;margin-left:7px}h1,h2,h3,p{margin:0}.eyebrow{font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:1.6px;color:var(--muted)}[hidden]{display:none!important}main{max-width:1560px;margin:auto;padding:0 22px 12px}.toolbar{height:76px;display:flex;align-items:center;gap:20px;justify-content:space-between}.brand{display:flex;flex-direction:column;gap:7px}.brand b{font-size:14px;letter-spacing:1px}.brand b span{color:var(--accent)}.transport,nav{display:flex;align-items:center;gap:8px}#run{min-width:146px;padding:12px}#tempo{border:0;background:transparent;display:flex;align-items:center;gap:5px}#tempo strong{font:26px ui-monospace,monospace;letter-spacing:-1px}#tempo small{font-size:9px;color:var(--muted)}#beats{display:flex;gap:4px;margin-left:8px}#beats i{width:4px;height:12px;background:#414648;border-radius:1px}#beats i.on{background:var(--accent)}.sourcebar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0}.source-picker,.source-tools{display:flex;gap:8px;align-items:center}.source-picker label{font:10px ui-monospace,monospace;letter-spacing:1px;color:#bcc1bf}.source-picker select{border:0;background:transparent;font-weight:600;font-size:13px;max-width:150px}.signal-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.signal-flow{font-size:10px;color:#a2a7a7}.signal-flow span{margin:0 8px;color:#5e676a}.source-tools button{padding:7px 9px}.meter{display:inline-block;width:48px;height:4px;background:#414646;overflow:hidden;border-radius:1px}.meter i{display:block;height:100%;width:0;background:var(--green)}.tracks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:16px 0}.track{background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;position:relative;box-shadow:0 4px 12px #0002}.track.selected{border-color:#bc9560;box-shadow:0 0 0 1px #bc956036}.track-head{display:flex;align-items:center;padding:10px 11px;gap:6px;border-bottom:1px solid #34383a}.select-track{background:transparent;border:0;padding:0;display:flex;align-items:center;gap:9px;min-width:0;flex:1;text-align:left}.select-track b{font:24px ui-monospace,monospace;color:#727b7f;font-weight:400}.selected .select-track b{color:var(--accent)}.select-track span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-head select{border:0;font:10px ui-monospace,monospace;padding:3px;max-width:65px}.track-body{height:118px;display:flex;align-items:center;padding:10px 12px;gap:8px}.loop-display{flex:1;position:relative;min-width:0;text-align:center;padding:0;border:0;background:transparent;border-radius:50%;touch-action:manipulation}.loop-display:hover:not(:disabled){background:#ffffff08}.loop-display:active:not(:disabled){background:#f7b65b12}.loop-display .loop-state{pointer-events:none}.loop-ring{width:92px;height:92px;transform:rotate(-90deg)}.loop-ring circle{fill:none;stroke:#393f41;stroke-width:3}.loop-ring .progress{stroke:var(--green);stroke-dasharray:251.33;stroke-dashoffset:251.33;stroke-linecap:round}.loop-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}.loop-state strong{font-size:11px;font-weight:500}.loop-state span{font:9px ui-monospace,monospace;color:var(--muted)}.track[data-mode=empty] .loop-ring{opacity:.4}.track[data-mode=armed] .progress{stroke:var(--accent)}.track[data-mode=recording] .progress,.track[data-mode=overdub] .progress,.track[data-mode=replacing] .progress{stroke:var(--red)}.track[data-mode=recording] .loop-state strong,.track[data-mode=overdub] .loop-state strong,.track[data-mode=replacing] .loop-state strong{color:var(--red)}.channel-fader{display:flex;align-items:center;gap:4px;flex-direction:column;width:29px}.channel-fader input{writing-mode:vertical-lr;direction:rtl;width:22px;height:76px}.channel-fader output{font:9px ui-monospace,monospace;color:#b1b6b5}.track-controls{padding:0 10px 10px;display:grid;gap:6px}.record-button{background:#3a3330;border-color:#675044;display:flex;align-items:center;justify-content:space-between;padding:12px 10px;min-height:44px}.record-button .record-dot{margin-right:6px}.record-button b{font-weight:600;font-size:12px}.record-button kbd{margin:0}.track[data-mode=recording] .record-button,.track[data-mode=overdub] .record-button,.track[data-mode=replacing] .record-button{background:#613431;border-color:var(--red)}.track[data-mode=armed] .record-button{background:#52432b;border-color:var(--accent)}.track-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.track-row button{padding:7px 3px;font-size:10px}.track-row.small button{background:transparent;border-color:transparent;color:#aeb3b1;padding:4px 2px;font-size:10px}.record-dot{display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;vertical-align:middle}.performance-deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:16px;border-top:1px solid var(--line);padding:14px 0}.deck-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.deck-heading h2{font-size:17px;font-weight:500;margin-top:5px}.deck-heading h2 span{font-family:ui-monospace,monospace;color:var(--accent);margin-left:6px}.fx-title{font-size:11px;font-weight:600;letter-spacing:1px}.fx-caption{font-size:9px;color:var(--muted)}.fx-program{width:100%;margin-bottom:7px;padding:5px 7px;font-size:11px;background:#262b2e}.xy{height:144px;position:relative;border:1px solid #454c50;border-radius:6px;touch-action:none;user-select:none;background-color:#1b2227;background-image:linear-gradient(#82969f0d 1px,transparent 1px),linear-gradient(90deg,#82969f0d 1px,transparent 1px);background-size:12.5% 12.5%;overflow:hidden}.xy:before,.xy:after{content:'';position:absolute;pointer-events:none;background:#9aa9ad20}.xy:before{height:1px;top:50%;width:100%}.xy:after{width:1px;left:50%;height:100%}.xy.active{border-color:var(--accent);background-color:#302b23}.xy .puck{position:absolute;width:12px;height:12px;border:1px solid #afbabd;transform:translate(-50%,-50%);border-radius:50%;left:50%;top:50%;box-shadow:0 0 0 6px #adb6b514;pointer-events:none}.xy.active .puck{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 10px #f7b65b15}.xy .pad-note{position:absolute;left:10px;bottom:9px;font:8px ui-monospace,monospace;letter-spacing:1px;color:#748187;pointer-events:none}.fx-bottom{display:flex;align-items:center;gap:7px;padding-top:7px}.fx-bottom button{font-size:10px;padding:6px 8px}.fx-bottom label{display:flex;align-items:center;gap:7px;font-size:9px;color:var(--muted);min-width:0;flex:1}.fx-bottom input{width:100%;height:20px}.chop-deck{padding:0 2px}.segmented{display:flex;border:1px solid var(--line);border-radius:5px;padding:2px}.segmented button{border:0;padding:5px 10px;font-size:10px;background:transparent}.segmented button[aria-pressed=true]{background:#48402e;color:var(--accent)}.slice-caption{display:flex;justify-content:space-between;align-items:center;min-height:31px;gap:6px}.slice-caption span{font-size:10px;color:var(--muted)}.slice-caption button{border:0;background:transparent;padding:5px;font-size:10px;color:var(--accent)}.slice-switches,.slice-pads{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.slice-switches{margin:12px 0 8px}.slice-switches button{height:20px;padding:0;background:#28312c;border-color:#50715a;border-radius:3px}.slice-switches button[aria-pressed=true]{background:#91cba2;border-color:#b6e7c4;color:#233b2b}.slice-switches button[aria-pressed=false]{background:#272c2e;color:#686e70;border-color:#444a4b}.slice-pads button{height:86px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:13px 0 10px;background:#2b3034;touch-action:none;font:19px ui-monospace,monospace;border-radius:5px}.slice-pads kbd{margin:0;font-size:10px}.slice-pads button.active{border-color:var(--accent);background:#57472f;color:var(--accent)}.chop-footer{display:flex;justify-content:space-between;gap:5px;align-items:center;margin-top:12px}.chop-footer span{font-size:9px;color:var(--muted)}.chop-footer button{font-size:9px;padding:5px;border:0;background:transparent}.master-strip{border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;padding-top:12px}.master-strip button{font-size:10px;padding:8px}.master-strip p{flex:1;color:#b2b6b4;font-size:11px;line-height:1.5}.master-label{display:flex;align-items:center;gap:8px;font:9px ui-monospace,monospace;color:var(--muted)}.master-label input{width:90px}.master-strip .meter{width:34px}#tapeTime{font:10px ui-monospace,monospace;color:var(--red)}#tape.recording{border-color:var(--red);background:#512c29}#silence{border-color:#62524c;color:#d2bbb0}#instrument{display:flex;align-items:center;gap:9px;padding:10px 0 0}#instrument label{display:flex;gap:7px;align-items:center;max-width:200px}#keybed{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;flex:1}#keybed button{padding:8px 2px;background:#b9bdb6;color:#182021;border-color:#d4d7cf;touch-action:none}#keybed button.active{background:var(--accent)}#keybed kbd{color:#4c5656;font-size:8px}#drumpads{display:flex;gap:3px}#drumpads button{font-size:9px;padding:8px 5px}#octaveReadout{font-size:10px;white-space:nowrap}#boot{position:fixed;z-index:20;inset:0;background:#16191b;display:grid;place-items:center}.boot-card{width:min(440px,90vw)}.boot-card h1{font-size:48px;font-weight:550;letter-spacing:-2.5px;margin:30px 0 15px}.boot-card h1 span{color:var(--accent)}.boot-card p{color:#b3b7b7;font-size:15px}.boot-lights{display:flex;gap:8px;margin-top:35px}.boot-lights i{width:34px;height:5px;background:#78897f}.boot-lights i:first-child{background:var(--accent)}.primary{background:var(--accent);color:#22221e;border-color:var(--accent)}.primary:hover:not(:disabled){background:#ffd196;color:#22221e}.boot-card button{width:100%;display:flex;justify-content:space-between;margin:40px 0 15px;padding:16px;font-size:14px}.boot-card small{display:block;color:var(--muted);font-size:11px;line-height:1.7}dialog{background:#222629;color:inherit;border:1px solid #596165;border-radius:12px;padding:22px;width:min(820px,calc(100vw - 28px));max-height:85vh;box-shadow:0 28px 100px #0009}dialog::backdrop{background:#080b0ccc;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;margin-bottom:10px;border-bottom:1px solid var(--line)}.dialog-heading h2{font-size:23px;font-weight:500;letter-spacing:-.5px}.dialog-heading button{font-size:21px;border:0;background:transparent;padding:0 8px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}dialog h3{font-size:13px;margin:18px 0 12px}dialog p{color:#abb2b2;font-size:12px;line-height:1.65;margin:12px 0}dialog label{color:#c1c6c3}.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fields label{display:flex;flex-direction:column;gap:7px}.inline-field{display:flex;align-items:center;gap:12px;margin-top:15px}.dialog-bottom{display:flex;gap:15px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:22px;font-size:11px;color:var(--muted)}a{color:#dbbea0;text-decoration:none}.danger{color:#e5a49b}.midi-connect,.session-actions{display:flex;gap:10px;flex-wrap:wrap}#controlSearch{width:100%;margin:6px 0 14px}#controlList{max-height:45vh;overflow:auto}.control-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid #353d40;padding:8px 0}.control-row span{flex:1;font-size:12px}.control-row button{font-size:10px;padding:6px}.control-row small{display:block;color:#a9b4b8;font-size:10px;margin-top:4px}#learnBanner{background:#483a24;border:1px solid #846737;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:12px;border-radius:5px}.learning [data-control]{outline:1px dashed #d9b86b;outline-offset:2px}.learning [data-control].learn-target{outline:3px solid var(--accent)}.take{padding:12px 0;display:flex;gap:14px;align-items:center}.take audio{height:35px;width:75%}.take a{font-size:12px}#bbtour-fab{display:none!important}
@media(min-width:1450px){.track-body{height:155px}.loop-ring{width:120px;height:120px}.channel-fader input{height:103px}.xy{height:190px}.slice-pads button{height:130px}.slice-caption{margin-top:8px}.performance-deck{gap:24px}.track-controls{padding:0 14px 14px}.track-row button{font-size:12px}}
@media(max-width:1080px){main{padding:0 14px 12px}.signal-flow{display:none}.toolbar{gap:8px}.brand b{font-size:12px}.brand .eyebrow{font-size:8px}.toolbar nav{gap:5px}.toolbar nav button{padding:8px}.tracks{gap:7px}.track-head{padding:9px 7px}.select-track{gap:4px}.select-track b{font-size:20px}.select-track span{font-size:10px}.track-body{padding:8px 3px}.loop-ring{width:78px;height:78px}.channel-fader{width:24px}.track-controls{padding:0 7px 8px}.record-button{padding:10px 6px}.record-button b{font-size:10px}.record-button kbd{font-size:9px}.performance-deck{gap:10px;grid-template-columns:1fr 1.5fr 1fr}.fx-bottom{gap:4px}.fx-bottom button{padding:6px 5px}.fx-bottom label{font-size:0}.master-strip{gap:8px}.master-strip p{font-size:10px}.master-label{font-size:0}.master-label input{width:65px}.chop-footer span{max-width:190px;line-height:1.6}.source-tools button{font-size:10px}#instrument{flex-wrap:wrap}#keybed{min-width:330px}.fx-caption{display:none}}
@media(max-width:740px){.toolbar{height:auto;padding:18px 0;flex-wrap:wrap}.brand{flex:1}.transport{order:3;width:100%;justify-content:space-between}.toolbar nav button{font-size:10px}.sourcebar{flex-wrap:wrap}.source-tools{flex:1;justify-content:flex-end}.tracks{grid-template-columns:repeat(2,minmax(0,1fr))}.track:last-child{grid-column:1/-1}.track:last-child .track-body{height:110px}.track:last-child .channel-fader input{writing-mode:horizontal-tb;direction:ltr;width:120px;height:25px}.track:last-child .channel-fader{width:150px}.performance-deck{grid-template-columns:1fr 1fr;gap:18px}.chop-deck{grid-column:1/-1;grid-row:1}.xy{height:150px}.master-strip{flex-wrap:wrap}.master-strip p{order:3;flex-basis:100%}.master-label{margin-left:auto}.settings-grid{grid-template-columns:1fr}.dialog-heading h2{font-size:20px}.dialog-bottom{flex-wrap:wrap}#instrument label{max-width:none}#keybed{min-width:100%}.signal-flow{display:none}.slice-pads button{height:80px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Short laptop displays keep transport, channel actions and master in view. */
@media(min-width:741px) and (max-height:800px){.toolbar{height:62px}.sourcebar{padding:8px 0}.tracks{padding:12px 0}.track-head{padding-top:8px;padding-bottom:8px}.track-body{height:100px}.track-controls{gap:5px}.record-button{min-height:40px;padding-top:10px;padding-bottom:10px}.performance-deck{padding:12px 0}.xy{height:126px}.deck-heading{margin-bottom:8px}.slice-switches{margin:7px 0}.slice-pads button{height:76px}.chop-footer{margin-top:8px}.master-strip{padding-top:9px}.channel-fader input{height:68px}}

.track-row.small{grid-template-columns:1.35fr 1fr .8fr}.track-row.small button[aria-pressed=true]{background:#3e3b2c;border-color:#7d6a43;color:#f7c87f}.fx-caption#fxRouting{font-size:8px;letter-spacing:.3px}@media(max-width:1080px){#fxRouting{display:inline;font-size:8px;max-width:90px;text-align:right}}

.master-strip .record-dot{margin-right:5px}

#fxRouting{white-space:nowrap;max-width:none}

.track[data-mode=recording] .loop-state span{font-size:8px}