/* DG-UI-001: a performance instrument, with the existing audio engine underneath. */
:root {
  --bg0: #090a0b; --bg1: #101113; --bg2: #17191c; --bg3: #23262a;
  --line: #34373b; --line-lo: #222529; --txt: #d3d5d7; --txt-dim: #878c91;
  --a: #59b3ff; --a-dim: #295172; --b: #67d9dc; --b-dim: #2b6161;
  --green: #80e5a3; --amber: #eebd61; --info: #a3bacc;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font-mono: var(--mono);
}
body { background: radial-gradient(ellipse at 50% 0, #242628 0, #121315 35%, #090a0b 80%); }
#app { max-width: 1900px; margin: auto; padding: 10px 20px; gap: 0; }
button, a, summary, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, .knob:focus-visible {
  outline: 2px solid var(--a); outline-offset: 3px;
}
button, .lib-btn { transition: color .12s, border-color .12s, box-shadow .12s, background .12s; }
button:disabled { cursor: wait; opacity: .45; }
#topbar { border: 0; border-bottom: 1px solid #34373a; border-radius: 0; background: transparent; padding: 9px 0 14px; gap: 24px; }
.logo { gap: 8px; flex-shrink: 0; }
.logo-mark { width: 27px; height: 27px; opacity: .85; }
.logo-text { font-size: 19px; letter-spacing: -.5px; font-weight: 800; line-height: 1; }
.logo-text span { color: #d3d5d7; font-weight: 500; }
.logo-sub { font-size: 6px; letter-spacing: 2.1px; margin-top: 6px; }
.workspace-nav { display: flex; gap: 3px; padding: 3px; border: 1px solid #303337; border-radius: 5px; background: #0d0e10; }
.workspace-tab { border: 0; border-radius: 3px; padding: 8px 12px; background: transparent; color: #858a90; font-size: 9px; font-weight: 750; letter-spacing: .9px; white-space: nowrap; }
.workspace-tab.active { color: #e4e7e8; background: linear-gradient(#373b40,#282b2e); box-shadow: inset 0 1px #53575a, 0 1px 3px #000; }
.top-status { gap: 19px; margin-left: auto; }
.status-label { font-size: 7px; letter-spacing: 1.1px; }
.status-value { font-size: 13px; color: #c3cecc; margin-top: 3px; }
#master-safety { color: #86c49b; font-size: 11px; }
.top-actions { display: flex; gap: 5px; }
.top-btn { font-size: 8px; letter-spacing: .5px; padding: 8px 9px; background: linear-gradient(#24272a,#17191c); border: 1px solid #373a3e; border-radius: 3px; color: #a8adb2; white-space: nowrap; box-shadow: inset 0 1px #ffffff08; }
.top-btn:hover { color: #fff; border-color: #747b83; }
.top-btn.on { color: var(--green); border-color: #5e8a6b; background: #183027; }
.automix-btn { border-color: #59634e; color: #c3d9a7; }
.automix-btn.on { background: #a2c87c; color: #111a0b; border-color: #bfdca3; }
.help-btn { display: grid; place-items: center; text-decoration: none; min-width: 24px; }
.fullscreen-btn { font-size: 17px; padding: 0 7px; }
.session-bar { display: flex; align-items: center; gap: 20px; height: 39px; color: #70777c; font: 8px var(--mono); letter-spacing: 1.1px; }
.session-name { display: flex; align-items: center; gap: 7px; }
.session-name i, .engine-state i, .status-led { width: 4px; height: 4px; border-radius: 50%; background: #6e9b80; box-shadow: 0 0 6px #6e9b8040; }
.session-name b { color: #b1b6b9; font-weight: 400; }
.session-tag { font-size: 7px; }
.session-tag span { margin: 0 6px; color: #42474d; }
.engine-state { margin-left: auto; display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #939b96; font: 8px var(--mono); letter-spacing: 1px; }
.engine-state i { background: #62666b; box-shadow: none; }
.engine-state.running i { background: var(--green); box-shadow: 0 0 7px #80e5a370; }

/* A single chassis. The center faceplate is deliberately metal, not another card. */
#console { grid-template-columns: minmax(0,1fr) 364px minmax(0,1fr); gap: 14px; align-items: stretch; min-height: 685px; }
.deck { --deck-color: var(--a); --deck-dim: var(--a-dim); position: relative; padding: 12px 15px 8px; gap: 0; border: 1px solid #45494c; border-top: 1px solid #6c7176 !important; border-radius: 7px;
  background: linear-gradient(120deg,#25282a99,transparent 35%), repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 3px), linear-gradient(#202225,#111315 62%,#1b1d1f);
  box-shadow: inset 0 0 0 3px #101112, inset 0 5px 5px #ffffff08, 0 6px 18px #0009; overflow: visible; min-width: 0;
}
#deck-B { --deck-color: var(--b); --deck-dim: var(--b-dim); }
.deck::before, .deck::after, .mixer-faceplate::before, .mixer-faceplate::after, .fx-pedal::before, .fx-pedal::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(35deg,transparent 43%,#08090a 44% 57%,transparent 58%), radial-gradient(circle at 35% 30%,#96999b,#363a3c 70%); box-shadow: 0 1px 2px #000; pointer-events: none; }
.deck::before { left: 7px; top: 8px; }.deck::after { right: 7px; bottom: 8px; }
.deck-rail { height: 35px; display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 0 3px; }
.rail-number { font: 20px var(--mono); font-weight: 300; color: #e0e2e3; }
.rail-name { font-size: 10px; font-weight: 900; letter-spacing: -.1px; color: #b7babe; }
.rail-name span { font-weight: 400; color: #777e85; }
.rail-caption { font-size: 6px; color: #696f75; letter-spacing: 1.3px; margin-left: 3px; }
.deck-load { margin-left: auto; border: 1px solid #454b50; color: #c5cbd0; font: 8px var(--mono); padding: 6px 9px; background: linear-gradient(#35393d,#23272b); border-radius: 3px; box-shadow: inset 0 1px #ffffff0a, 0 1px 2px #0008; }
.deck-load span { margin-left: 10px; color: var(--deck-color); }
.deck-load:hover { border-color: var(--deck-color); }
.screen-bezel { padding: 8px 9px 4px; background: #080b0f; border: 1px solid #050609; border-top-color: #050609; border-bottom-color: #626870; border-radius: 4px; box-shadow: 0 0 0 3px #131619, 0 0 0 4px #34393e, inset 0 2px 8px #000; }
.screen-topline { display: flex; justify-content: space-between; font: 6px var(--mono); letter-spacing: 1.1px; color: #65727e; padding-bottom: 7px; }
.screen-mode { display: flex; align-items: center; gap: 6px; }
.screen-mode i { width: 3px; height: 3px; background: #86ada1; }
.deck-header { gap: 8px; margin-bottom: 8px; }
.deck-badge { background: #14212b; color: var(--deck-color); border: 1px solid var(--deck-dim); border-radius: 2px; width: 25px; height: 30px; font: 13px var(--mono); }
.deck-badge.b { background: #102b29; color: var(--b); }
.track-title { color: #e2e9ef; font-size: 12px; font-weight: 600; letter-spacing: .2px; }
.track-sub { gap: 7px; margin-top: 3px; }
.key-chip,.bpm-chip { padding: 0; border: 0; background: transparent; font-size: 8px; color: #8c9bab; }
.key-chip { color: var(--deck-color); }
.bpm-chip::before { content: '/'; margin-right: 7px; color: #3f4c5b; }
.eject-btn { font-size: 12px; border: 0; background: transparent; color: #687b8b; padding: 4px; }
.wave-zoom,.wave-over { border: 0; border-radius: 0; background: #080b0f; }
.wave-zoom { height: 92px; }
.wave-over { height: 29px; margin-top: 9px; border-top: 1px solid #1f2a34; }
.screen-readouts { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; padding: 6px 0 1px; border-top: 1px solid #202b36; align-items: start; }
.screen-readouts small { font: 6px var(--mono); letter-spacing: .6px; color: #6d7d8d; display: block; margin-bottom: 3px; }
.time-display { text-align: left; position: relative; }
.time-elapsed { font: 25px/.95 var(--mono); font-weight: 300; letter-spacing: -1.4px; color: #d9e4ed; }
.time-remain { display: inline-block; margin-top: 4px; font: 8px var(--mono); color: #7e8f9e; }
.pitch-readout { text-align: right; }
.pitch-readout strong { font: 18px var(--mono); color: #bdcedc; letter-spacing: -.8px; }
.eff-bpm { font-family: var(--mono); line-height: .95; text-align: right; }
.eff-bpm span { font-size: 28px; font-weight: 400; letter-spacing: -1.6px; color: var(--deck-color); }
.eff-bpm small { margin: 0 0 4px; font-size: 6px; }
.screen-footer { display: flex; justify-content: space-between; font: 5px var(--mono); letter-spacing: .6px; color: #586c7c; padding-top: 4px; }
.pad-bank { margin-top: 16px; padding: 0 2px; }
.panel-legend { display: flex; justify-content: space-between; font-size: 6px; color: #888d91; letter-spacing: 1.2px; margin-bottom: 5px; }
.panel-legend span:last-child { font: 5px var(--mono); color: #595e63; }
.hotcue-grid { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 5px; }
.hotcue { position: relative; height: 28px; border-radius: 2px; border-color: #07090a; border-top-color: #3b4045; background: linear-gradient(#26292d,#111416); box-shadow: inset 0 -2px 0 #080a0c, 0 0 0 1px #33383d, 0 2px 3px #0005; color: #a5aab0; font: 8px var(--mono); }
.hotcue::before { content: ''; display: block; position: absolute; left: 7px; right: 7px; top: 4px; height: 2px; opacity: .5; background: var(--pad-color,#617d8f); }
.hotcue.set { color: #10171c; background: linear-gradient(#ffffff28,#0002), var(--pad-color)!important; box-shadow: inset 0 0 6px #ffffff22, 0 0 8px color-mix(in srgb,var(--pad-color) 20%,transparent); }
.hotcue.set::before { background: #ffffffb0; opacity: .65; }
.hotcue:active { transform: translateY(1px); }
.deck-body { grid-template-columns: 56px minmax(0,1fr) 46px; gap: 7px; align-items: center; flex: 1; padding-top: 12px; }
.ctrl-col { gap: 10px; align-self: stretch; padding-top: 12px; }
.control-legend { color: #888f96; font: 6px var(--mono); letter-spacing: .9px; text-align: center; }
.loop-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.loop-btn { min-width: 0; height: 22px; flex: none; font-size: 7px; border-radius: 2px; background: linear-gradient(#30343a,#1c2024); border: 1px solid #111416; border-top-color: #4b525a; box-shadow: 0 1px 2px #0007; color: #a5abb1; }
.loop-btn.auto { color: #99b59d; }.loop-btn.auto.active { background: #668a58; color: #f5ffed; border-color: #91bd7b; }
.loop-btn.active { color: #c5edb8; }
.loop-btn:nth-last-child(-n+2) { color: #b8c7d3; }
.loop-caption { font: 5px/1.8 var(--mono); color: #515a62; text-align: center; letter-spacing: .4px; margin-top: auto; padding-bottom: 14px; }
.jog-col { width: 100%; gap: 5px; }
.jog-housing { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#151719 60%,#060708 65%,#373b3e 66%,#08090a 68%,#2b3034 69%,#090a0c 71%); box-shadow: 0 9px 16px #0005; }
.jog { width: 100%; height: 100%; aspect-ratio: 1; }
.jog-caption { width: 100%; display: flex; justify-content: center; gap: 12px; color: #535d66; font: 5px var(--mono); letter-spacing: 1px; white-space: nowrap; }
.pitch-col { align-self: stretch; padding-top: 12px; gap: 7px; }
.pitch-label { font-size: 6px; letter-spacing: 1px; color: #a2a7ac; }
.pitch-track { position: relative; flex: 1; display: flex; align-items: stretch; justify-content: center; min-height: 160px; max-height: 230px; width: 100%; padding-left: 8px; background: repeating-linear-gradient(to bottom,transparent 0 9px,#68717b 9px 10px,transparent 10px 20px) left 12px / 7px calc(100% - 24px) no-repeat; }
.pitch-ticks { position: absolute; top: 3px; bottom: 3px; right: 0; color: #8d959d; font: 7px/1 var(--mono); display: flex; align-items: center; white-space: pre-line; }
.pitch-fader { width: 30px; height: 100%; min-height: 160px; writing-mode: vertical-lr; direction: rtl; margin: 0; }
.pitch-fader::-webkit-slider-runnable-track { width: 5px; background: #060809; border: 1px solid #000; border-radius: 0; box-shadow: 1px 0 #5d656d; }
.pitch-fader::-webkit-slider-thumb { width: 30px; height: 22px; margin-left: -13px; border-radius: 2px; border: 1px solid #050607; background: linear-gradient(#636a70,#343a40 35%,#111518 40% 46%,#abb5bd 47% 52%,#20262c 53% 80%,#42484d); box-shadow: 0 3px 4px #000a, inset 0 1px #b7bdc2; }
.pitch-fader::-moz-range-track { width: 5px; background: #060809; border: 1px solid #000; border-radius: 0; }
.pitch-fader::-moz-range-thumb { width: 30px; height: 22px; border-radius: 2px; border: 1px solid #050607; background: linear-gradient(#636a70,#343a40 35%,#111518 40% 46%,#abb5bd 47% 52%,#20262c 53% 80%,#42484d); }
.pitch-range-btn,.keylock-btn { width: 100%; font-size: 6px; padding: 4px 1px; background: #171c20; color: #9aa7b1; border: 1px solid #434c55; border-radius: 2px; }
.keylock-btn.on { color: #a9dfb0; border-color: #67866a; background: #1a2f20; }
.keyshift { gap: 1px; }.keyshift-btn { min-width: 14px; font-size: 8px; background: #171c20; border-color: #343c43; }
.keyshift-val { font-size: 7px; min-width: 12px; }
.transport { display: flex; grid-template-columns: none; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px 10px; }
.transport-main { display: flex; gap: 13px; align-items: center; }
.t-btn { flex: none; }
.t-btn.cue,.t-btn.play { border-radius: 50%; width: 49px; height: 49px; font-size: 10px; letter-spacing: .3px; background: radial-gradient(circle at 40% 30%,#4a4e50 0,#2e3236 35%,#15191c 70%); border: 2px solid #d7ad5d; box-shadow: 0 0 0 3px #080a0b, 0 0 0 4px #3d403e, inset 0 2px 4px #ffffff33, 0 4px 4px #0007; color: #e5d0aa; }
.t-btn.play { border-color: #74b58b; font-size: 16px; color: #cadccf; }
.t-btn.play.on { color: #aff7c3; background: radial-gradient(circle at 40% 30%,#4f5d55,#1c3022 70%); box-shadow: 0 0 0 3px #080a0b, 0 0 0 4px #3d5544, 0 0 16px #75d39b33, inset 0 2px 4px #ffffff22; border-color: #9bffc0; }
.t-btn.cue:active,.t-btn.play:active { transform: translateY(1px); }
.t-btn.sync { height: 27px; padding: 0 12px; font: 7px var(--mono); border-radius: 2px; color: #899ba8; border: 1px solid #4a5863; background: linear-gradient(#252d34,#171d22); }
.t-btn.sync.on { color: #091a22; background: var(--deck-color); border-color: var(--deck-color); }
.beat-clock { display: flex; gap: 5px; margin-left: auto; }
.beat-clock i { width: 4px; height: 4px; background: #313b42; border-radius: 1px; }
.beat-clock i.active { background: var(--deck-color); box-shadow: 0 0 6px var(--deck-color); }
.deck-editor { border-top: 1px solid #353b40; border-bottom: 1px solid #0b0d0e; }
.deck-editor summary { padding: 8px 4px; color: #89969e; font: 6px var(--mono); letter-spacing: 1px; cursor: pointer; list-style-position: inside; }
.deck-editor summary span { float: right; color: #59636b; font-family: sans-serif; letter-spacing: 0; }
.deck-editor-body { padding: 8px; background: #0e1418; border-radius: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deck-editor-body .grid-nudge { max-width: none; grid-row: span 2; }.deck-editor-body .bpm-rescale { grid-column: span 2; justify-content: center; }
.deck-editor-body .grid-beat-edit { grid-template-columns: 1fr 1fr; }
.deck-footer { padding: 8px 2px 1px; display: flex; justify-content: space-between; font: 5px var(--mono); letter-spacing: 1.4px; color: #4f585e; }
.deck-footer b { color: #818990; font-weight: 400; }.deck-state { color: #738893; }

/* Two genuine effect / monitoring units, not decorative dummy controls. */
#mixer { display: flex; flex-direction: column; border: 0; background: transparent; padding: 0; gap: 12px; min-width: 0; box-shadow: none; }
.fx-rack { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-pedal { position: relative; border: 1px solid #65686b; border-radius: 4px; min-width: 0; padding: 12px 10px 8px; box-shadow: inset 0 0 0 2px #ffffff0c, 0 3px 7px #0008; }
.fx-pedal::before { top: 5px; left: 5px; }.fx-pedal::after { right: 5px; bottom: 5px; }
.fx-panel { gap: 7px; background: repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),linear-gradient(115deg,#8a8d8a,#4f5555 35%,#727773 80%,#4f5753); color: #141a17; }
.monitor-pedal { display: flex; flex-direction: column; gap: 8px; background: repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 3px),linear-gradient(115deg,#689eaa,#367180 50%,#467c88); border-color: #76a1a8; }
.pedal-lcd { position: relative; border: 2px solid #202a26; border-bottom-color: #b1b6aa; border-radius: 2px; padding: 5px 6px; background: linear-gradient(#071a12,#07100d); box-shadow: inset 0 1px 3px #000; color: #85e3a2; font-family: var(--mono); }
.pedal-lcd > span,.fx-selector small { font: 5px var(--mono); letter-spacing: 1px; display: block; color: #578967; }
.pedal-lcd strong { font: 15px/1.2 var(--mono); font-weight: 600; letter-spacing: -.3px; }
.pedal-lcd strong small { font: 6px var(--mono); color: #5c9870; }
.fx-selector { position: relative; }
.fx-selector summary { list-style: none; cursor: pointer; display: block; }
.fx-selector summary::-webkit-details-marker { display: none; }
.fx-selector summary::after { content: '⌄'; position: absolute; right: 6px; top: 9px; color: #7ba98a; font-size: 13px; }
.fx-types { position: absolute; top: calc(100% + 5px); left: -3px; width: 252px; padding: 9px; border: 1px solid #747d79; border-radius: 3px; background: #161b19; grid-template-columns: repeat(2,1fr); gap: 5px; z-index: 30; box-shadow: 0 8px 25px #000a; }
.fx-type-btn { padding: 8px; background: #282e2a; font: 9px var(--mono); color: #b4bfb9; border-color: #404b44; }
.fx-type-btn.active { background: #8cb89a; border-color: #b2d1bd; color: #0b1d11; }
.fx-beats { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 2px; }
.fx-beat-btn { font: 5px var(--mono); padding: 4px 0; border-radius: 1px; border-color: #242c27; color: #b5c5b8; background: #303c33; }
.fx-beat-btn.active { background: #c3d4ae; color: #20381c; border-color: #e1ebd3; }
.fx-assigns { gap: 3px; }
.fx-assign-btn { padding: 4px 0; font: 6px var(--mono); background: #252d28; border-color: #212a24; color: #b7c4ba; }
.fx-assign-btn.active { background: #d1c68b; color: #332b0b; border-color: #e2d6a3; }
.fx-knobs,.pedal-knobs { display: flex; justify-content: space-around; gap: 8px; margin-top: 3px; }
.fx-pedal .knob-label { color: #0b211a; font-size: 5px; text-shadow: 0 1px #ffffff22; }
.fx-pedal .knob-wrap::before { opacity: .6; }
.fx-on-btn { height: 21px; width: 62px; margin: auto auto 0; color: #d2dfd4; font-size: 6px; letter-spacing: 1px; background: linear-gradient(#313b33,#1d271f); border: 1px solid #26322a; border-radius: 2px; box-shadow: inset 0 1px #b4cdb35c, 0 1px 2px #0007; }
.fx-on-btn.on { background: #759c69; border-color: #c0dda8; color: #f1ffe8; box-shadow: 0 0 8px #c0dda840; }
.fx-display-meta { display: flex; justify-content: space-between; font: 5px var(--mono); color: #608e6d; padding-top: 2px; }
.pedal-brand { margin-top: auto; text-align: center; font-size: 12px; letter-spacing: -1px; font-weight: 900; font-style: italic; color: #173e46; text-shadow: 0 1px #a5c1be55; }
.pedal-brand span { display: block; font: 5px var(--mono); letter-spacing: 2px; margin-top: 2px; }
.cue-monitor { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 4px; margin: 0; }
.cue-mon-btn { font: 5px var(--mono); letter-spacing: 1px; padding: 5px; background: #214a55; border-color: #153640; color: #adc8c8; border-radius: 2px; }
.cue-mon-btn.on { color: #0f342b; background: #b6d7b8; border-color: #d2efc5; }
#cue-device { width: 100%; max-width: none; font: 6px var(--mono); background: #20434b; color: #c2dddf; border: 1px solid #38606b; min-height: 20px; padding: 2px; }

/* Machined central faceplate. */
.mixer-faceplate { position: relative; flex: 1; display: flex; flex-direction: column; padding: 13px 17px 9px; border-radius: 4px; border: 1px solid #aeb2b5; border-bottom-color: #575c60; color: #242b2f;
  background: repeating-linear-gradient(0deg,#ffffff0b 0 1px,#00000003 1px 2px,transparent 2px 4px),linear-gradient(110deg,#bcc0c2,#9fa6a9 35%,#b2b8bb 60%,#90989d);
  box-shadow: inset 0 1px #f1f4f5, inset 0 0 0 3px #636c7030, 0 6px 14px #0009;
}
.mixer-faceplate::before { left: 6px; top: 6px; }.mixer-faceplate::after { right: 6px; bottom: 6px; }
.mixer-brand { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 1px 9px; border-bottom: 1px solid #697277; margin-bottom: 9px; }
.mixer-brand > span { font-size: 13px; font-weight: 950; letter-spacing: 1.4px; color: #243036; }
.mixer-brand strong { font: italic 18px/1 var(--mono); font-weight: 900; color: #3b494e; }
.mixer-brand small { grid-column: span 2; color: #576268; font: 5px var(--mono); letter-spacing: 1.5px; margin-top: 4px; }
.mixer-strips { grid-template-columns: minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr); gap: 8px; }
.strip { gap: 8px; padding: 0 5px; }
.strip-id { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 4px 0 7px; margin-bottom: 1px; font: 7px var(--mono); color: #263b47; border-bottom: 1px solid #6a757c; }
.strip-id b { font-weight: 800; font-size: 11px; }.strip-id i { width: 4px; height: 4px; border-radius: 50%; background: #325b7d; }
#strip-B .strip-id i { background: #2b7272; }
.strip-center { border-color: #78848b; padding: 0 7px; align-items: center; }
.knob-wrap { position: relative; flex: none; gap: 3px; padding-top: 4px; min-width: 44px; }
.knob-wrap::before { content: ''; position: absolute; width: 48px; height: 48px; left: 50%; top: -1px; transform: translateX(-50%); border-radius: 50%; background: repeating-conic-gradient(from 225deg,#35434b 0 2deg,transparent 2deg 27deg); mask: radial-gradient(transparent 61%,#000 62% 67%,transparent 68%),conic-gradient(from 225deg,#000 0 270deg,transparent 270deg); mask-composite: intersect; pointer-events: none; }
.knob { width: 35px; height: 35px; border: 1px solid #11181d; background: radial-gradient(circle at 35% 25%,#505c64 0,#333c44 35%,#10191f 75%,#242d34); box-shadow: 0 2px 3px #0007, 0 0 0 2px #aab2b6, 0 0 0 3px #3c474c, inset 0 1px #a3aeb7; }
.knob::before { content: ''; position: absolute; inset: 2px; border: 1px dashed #68747d50; border-radius: 50%; pointer-events: none; }
.knob .pointer { width: 2px; height: 11px; margin-left: -1px; top: 3px; transform-origin: 50% 14px; border-radius: 0; background: #d4e2e5; box-shadow: 0 0 1px #000; }
.knob.small { width: 27px; height: 27px; }.knob.small .pointer { height: 8px; top: 3px; transform-origin: 50% 10px; }
.knob-wrap:has(.small)::before { width: 39px; height: 39px; top: -2px; }
.knob.accent { background: radial-gradient(circle at 35% 25%,#637078,#2a3740 50%,#111e26 80%); box-shadow: 0 2px 3px #0007,0 0 0 2px #b4b9bb,0 0 0 3px #4f6776,inset 0 1px #a3b0b9; }
.knob.accent .pointer { background: #9cc7dd; }
.knob-label { font: 5.5px var(--mono); letter-spacing: 1px; color: #34434c; font-weight: 800; line-height: 1; }
.knob-value { display: none; position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); z-index: 5; background: #10191f; border: 1px solid #6b8391; color: #c2e5ff; font: 8px var(--mono); padding: 3px 5px; white-space: nowrap; border-radius: 2px; box-shadow: 0 2px 5px #0005; }
.knob-wrap:hover .knob-value,.knob-wrap:focus-within .knob-value,.knob-wrap.adjusting .knob-value { display: block; }
.strip .knob-wrap[data-control=color] { margin-top: 5px; padding-bottom: 7px; border-bottom: 1px solid #879196; }
.mixer-lcd { width: 100%; background: #14201d; padding: 6px 4px; color: #90b7a4; border: 1px solid #58665f; border-top-color: #1d2a23; box-shadow: inset 0 1px 4px #0005; border-radius: 2px; text-align: center; margin: 6px 0 12px; }
.mixer-lcd small { display: block; font: 5px var(--mono); letter-spacing: .5px; color: #618477; }
.mixer-lcd strong { font: 17px var(--mono); letter-spacing: -.9px; display: block; padding: 3px 0; }
.mixer-lcd > span { display: block; font: 4px var(--mono); letter-spacing: .5px; color: #678d7c; }
.master-vu-block { margin: 0; padding: 0; gap: 6px; }
.master-vu-label { font: 5px var(--mono); font-weight: 700; letter-spacing: .2px; color: #3d4b53; }
.master-meter-scale { display: flex; align-items: stretch; gap: 5px; height: 174px; }
.master-meter-scale > span { display: flex; flex-direction: column; justify-content: space-around; white-space: pre-line; text-align: right; font: 5px/21.5px var(--mono); color: #4d6069; }
#master-vu { height: 174px; width: 15px; background: #263332; border: 1px solid #52615f; border-radius: 1px; box-shadow: 1px 1px #d4d9d5; }
.mixer-signal { font: 5px var(--mono); letter-spacing: .6px; margin-top: 13px; color: #3b5154; display: flex; gap: 4px; align-items: center; }
.mixer-signal i { width: 4px; height: 4px; border-radius: 50%; background: #304b3b; }.mixer-signal i.on { background: #77ff9d; box-shadow: 0 0 7px #77ff9d; }
.mixer-bus-label { text-align: center; margin-top: auto; font: 5px/1.6 var(--mono); color: #526169; letter-spacing: .7px; }
.mixer-bus-label strong { display: block; font: italic 9px var(--mono); font-weight: 800; margin-top: 3px; color: #3f4e58; }.mixer-bus-label span { display: block; font-size: 3.5px; margin-top: 5px; }
.fader-vu { position: relative; padding: 0 9px; height: 139px; gap: 7px; margin-top: 3px; background: repeating-linear-gradient(to bottom,transparent 0 12px,#5d6c75 12px 13px,transparent 13px 26px) left 9px / 9px calc(100% - 18px) no-repeat; }
.ch-fader { width: 28px; height: 139px; }
.ch-fader::-webkit-slider-runnable-track { width: 5px; border-radius: 0; border: 1px solid #13222c; background: #1c2a33; box-shadow: 1px 0 #c8d0d3; }
.ch-fader::-webkit-slider-thumb { width: 30px; height: 18px; margin-left: -13px; border-radius: 1px; border: 1px solid #172731; background: linear-gradient(#5c6d78,#2b3c48 32%,#182631 36% 46%,#bacdd5 47% 53%,#182631 54% 65%,#3f515c); box-shadow: 0 2px 3px #0008,inset 0 1px #8b9ba5; }
.ch-fader::-moz-range-track { width: 5px; border-radius: 0; background: #1c2a33; }.ch-fader::-moz-range-thumb { width: 30px; height: 18px; border-radius: 1px; border: 1px solid #172731; background: linear-gradient(#5c6d78,#2b3c48 32%,#182631 36% 46%,#bacdd5 47% 53%,#182631 54% 65%,#3f515c); }
.vu { width: 6px; height: 130px; border: 0; border-radius: 0; box-shadow: 0 0 0 1px #607575,1px 1px #d1d9d6; position: relative; }
.vu::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to top,transparent 0 4px,#9aa6aa 4px 6px); }
.pfl-btn { width: 47px; height: 20px; border-radius: 2px; font: 6px var(--mono); border: 1px solid #4b5d64; color: #3a4c55; background: linear-gradient(#b9c2c6,#8c9aa2); box-shadow: 0 1px 2px #0005,inset 0 1px #d5dee2; }
.pfl-btn.on { background: #edcd83; border-color: #8c7429; color: #4a3a14; }
.xfader-label { font: 5px var(--mono); letter-spacing: .5px; color: #3f515e; display: flex; justify-content: space-between; margin: 13px 8px 2px; padding-top: 7px; border-top: 1px solid #7c8a91; }.xfader-label span { color: #657681; font-size: 4px; }
.xfader-row { padding: 0 5px; gap: 10px; height: 27px; }
.xf-label { font: 8px var(--mono); color: #3b4e5c; }
#xfader { height: 25px; }
#xfader::-webkit-slider-runnable-track { background: #1b2a35; border-color: #142431; border-radius: 0; height: 5px; box-shadow: 0 1px #d9e1e5; }
#xfader::-webkit-slider-thumb { width: 19px; height: 27px; margin-top: -12px; border-radius: 1px; background: linear-gradient(90deg,#526877,#192b39 35% 46%,#cedee6 47% 54%,#1c3040 55%,#526a7a); border: 1px solid #142837; box-shadow: 1px 2px 3px #0007; }
#xfader::-moz-range-track { background: #1b2a35; height: 5px; border-radius: 0; }#xfader::-moz-range-thumb { width: 19px; height: 27px; border-radius: 1px; background: linear-gradient(90deg,#526877,#192b39 35% 46%,#cedee6 47% 54%,#1c3040 55%,#526a7a); border: 1px solid #142837; }
.mixer-footer { display: flex; justify-content: space-between; margin-top: 7px; font: 4px var(--mono); letter-spacing: .7px; color: #5d6c74; }

/* Collection and lab remain full working views, without covering the decks. */
body:not([data-view=perform]) #console,body:not([data-view=perform]) .console-tabs,body:not([data-view=perform]) #session-shelf { display: none; }
body:not([data-view=library]) #browser { display: none; }
body:not([data-view=lab]) #ghost-panels,body:not([data-view=lab]) .panel-tabs { display: none; }
#session-shelf { display: flex; align-items: center; gap: 17px; margin-top: 15px; min-height: 64px; border: 1px solid #353a40; border-radius: 4px; padding: 9px 12px; background: linear-gradient(#1e2226,#15191d); }
.collection-shortcut { display: flex; align-items: center; gap: 11px; padding-right: 20px; border: 0; border-right: 1px solid #41484e; color: #c2ccd4; background: transparent; font: 8px var(--mono); letter-spacing: 1px; text-align: left; }
.collection-shortcut small { display: block; font: 6px var(--mono); color: #788791; margin-top: 5px; letter-spacing: .5px; }
.crate-icon { font-size: 22px; color: #6f818e; }.shortcut-arrow { font: 15px var(--mono); color: #6c7d8b; margin-left: 13px; }
.shelf-hint { color: #9dabb5; font: 7px var(--mono); letter-spacing: 1px; }.shelf-hint > span { display: block; color: #62717d; font: 8px sans-serif; letter-spacing: 0; margin-top: 5px; }
#btn-quick-open { margin-left: auto; }.demo-set-btn { background: linear-gradient(#b6cbb5,#8ba58d); border: 1px solid #c3d9c1; color: #1f3325; box-shadow: 0 1px 2px #0008; }.demo-set-btn span { margin-left: 10px; }
.lib-btn { border-radius: 3px; font-size: 9px; padding: 8px 13px; }
#browser { min-height: calc(100dvh - 180px); padding: 25px; margin: 4px 0 15px; background: #13181c; border-color: #343d44; border-radius: 4px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.section-eyebrow { font: 6px var(--mono); letter-spacing: 2px; color: #5e7483; }
.section-heading h1 { font-size: 27px; font-weight: 400; color: #d4e0e9; margin-top: 5px; letter-spacing: -.6px; }
.section-heading h1 span { margin-left: 15px; color: #718390; font: 8px var(--mono); letter-spacing: 1px; }
#library-search { width: min(35%,320px); padding: 11px 12px; background: #0b1014; border: 1px solid #3c4c58; border-radius: 3px; color: #c4d7e5; font: 10px var(--mono); user-select: text; -webkit-user-select: text; }
.browser-toolbar { flex-wrap: wrap; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid #2b3842; margin-bottom: 16px; }.browser-title { display: none; }
.browser-panes { grid-template-columns: minmax(0,1fr) 280px; gap: 18px; }.track-table-wrap { max-height: 62dvh; min-height: 280px; border: 0; border-radius: 0; }
#track-table th { font-size: 7px; padding: 12px 9px; background: #18232c; color: #8ba1b0; border-color: #3b4b56; }
#track-table td { font-size: 10px; padding: 12px 9px; border-color: #24323d; color: #92a6b5; }#track-table td:nth-child(2) { color: #ccdbe7; }
.row-btn { padding: 5px 8px; }.empty-collection { padding: 70px 20px!important; text-align: center; color: #678192!important; font-size: 12px!important; }
.queue-pane { max-height: 62dvh; padding: 17px; border: 1px solid #334550; border-radius: 3px; background: #101a21; }.queue-title { font-size: 7px; letter-spacing: 1px; padding-bottom: 12px; border-bottom: 1px solid #30414c; }
#queue-list { font-size: 10px; }#queue-list li { padding: 9px 0; }
#ghost-panels { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 8px 0 16px; }.ghost-panel { min-height: 295px; max-height: 430px; border-color: #3c4b56; border-radius: 4px; padding: 18px; background: #171f25; }.ghost-title { color: #adbecb; }
#statusbar { display: flex; align-items: center; gap: 8px; padding: 11px 2px 2px; border: 0; background: transparent; color: #657581; font: 7px var(--mono); min-width: 0; }
.status-led { flex: none; width: 3px; height: 3px; background: #6e889a; box-shadow: none; }
#status-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-help { margin-left: auto; white-space: nowrap; color: #53626e; font: 5px var(--mono); letter-spacing: .7px; display: flex; gap: 4px; align-items: center; }.shortcut-help > span { margin: 0 4px; }kbd { font: inherit; color: #8695a0; padding: 1px 3px; border: 1px solid #3e4a54; border-radius: 2px; }
.task-progress { top: 80px; border-radius: 4px; background: #14202af5; border-color: #476076; }.task-progress-fill { border-radius: 1px; }

@media (min-width:1600px) { #console { grid-template-columns: minmax(0,1fr) 390px minmax(0,1fr); gap: 18px; }.deck { padding-inline: 21px; }.wave-zoom { height: 107px; }.deck-body { grid-template-columns: 64px minmax(0,1fr) 50px; gap: 12px; }.track-title { font-size: 14px; }.screen-topline { font-size: 7px; }.time-elapsed { font-size: 29px; }.eff-bpm span { font-size: 32px; }.hotcue { position: relative; height: 31px; }.loop-btn { height: 26px; }.mixer-faceplate { padding-inline: 22px; } }
@media (max-width:1300px) and (min-width:1101px) { #app { padding-inline: 12px; }#console { grid-template-columns: minmax(0,1fr) 326px minmax(0,1fr); gap: 10px; }#topbar { gap: 12px; }.top-status { gap: 11px; }.workspace-tab { padding: 7px 8px; font-size: 7px; }.top-btn { padding-inline: 6px; font-size: 7px; }.rail-caption { display: none; }.deck { padding-inline: 10px; }.screen-readouts { gap: 8px; }.time-elapsed { font-size: 21px; }.eff-bpm span { font-size: 24px; }.pitch-readout strong { font-size: 15px; }.jog-caption { font-size: 4px; gap: 5px; }.fx-pedal { padding-inline: 8px; }.mixer-faceplate { padding-inline: 12px; }.mixer-brand > span { font-size: 11px; }.mixer-brand strong { font-size: 14px; }.mixer-strips { gap: 4px; }.strip { padding-inline: 2px; } }
@media (max-width:1100px) {
  #topbar { flex-wrap: wrap; gap: 12px; }.logo { flex: 1; }.workspace-nav { order: 3; }.top-status { margin-left: 0; }.top-actions { margin-left: auto; }.session-bar { height: 35px; }
  .console-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 auto 10px; width: 100%; max-width: 680px; background: #141a20; border: 1px solid #3e4e59; border-radius: 4px; }
  .mobile-tab { flex: 1; padding: 8px 9px; font: 9px var(--mono); border: 1px solid transparent; background: transparent; color: #8196a5; border-radius: 2px; }
  .mobile-tab.active { background: #26343e; border-color: #4d6678; color: #c0d9ec; }
  #console { display: grid; grid-template-columns: minmax(0,1fr); min-height: 0; width: 100%; max-width: 680px; margin: auto; }
  #console > :not(.mobile-active) { display: none; }#console > .mobile-active { width: 100%; }
  .deck { min-height: 680px; }.jog-housing { max-width: 335px; }.deck-body { grid-template-columns: 70px minmax(0,1fr) 54px; gap: 15px; }.loop-btn { height: 27px; }
  #mixer.mobile-active { max-width: 470px; margin: auto; }.fx-pedal { padding-inline: 17px; }.mixer-faceplate { padding-inline: 33px; }.mixer-brand { padding-bottom: 15px; }.strip { gap: 10px; }.knob { width: 38px; height: 38px; }.knob .pointer { transform-origin: 50% 15.5px; top: 3px; }.knob.small { width: 27px; height: 27px; }.knob.small .pointer { transform-origin: 50% 10px; }.fader-vu,.ch-fader { height: 170px; }.vu { height: 160px; }
  #session-shelf { flex-wrap: wrap; }.shelf-hint { flex: 1; }#btn-quick-open { margin-left: auto; }.browser-panes { grid-template-columns: minmax(0,1fr); }.queue-pane { max-height: 230px; }.track-table-wrap { max-height: 55dvh; }#ghost-panels { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  #app { padding: 6px 8px; }#topbar { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 2px 12px; }.logo { width: auto; }.logo-mark { width: 24px; height: 24px; }.logo-text { font-size: 18px; }.logo-sub { font-size: 5px; letter-spacing: 1.5px; }.top-status { display: flex; width: auto; gap: 13px; }.status-block { text-align: right; }.status-label { font-size: 5px; letter-spacing: .5px; }.status-value { font-size: 11px; }#master-safety { font-size: 9px; }
  .workspace-nav { order: initial; grid-column: span 2; display: grid; grid-template-columns: .8fr 1fr 1.5fr; }.workspace-tab { padding: 8px 3px; font-size: 7px; letter-spacing: .5px; }.top-actions { grid-column: span 2; display: grid; grid-template-columns: repeat(4,1fr) 25px 25px; width: 100%; margin: 0; gap: 4px; }.top-btn { height: 27px; padding: 0 3px; font-size: 6.5px; }.fullscreen-btn { font-size: 15px; }.session-bar { gap: 10px; font-size: 6px; }.session-tag { font-size: 5px; }.engine-state { font-size: 6px; }
  .deck { padding: 9px 10px 7px; min-height: 600px; }.deck-rail { height: 30px; }.rail-number { font-size: 16px; }.rail-name { font-size: 9px; }.rail-caption { display: none; }.deck-load { font-size: 7px; }.screen-bezel { padding-inline: 7px; }.wave-zoom { height: 78px; }.time-elapsed { font-size: 22px; }.eff-bpm span { font-size: 25px; }.pitch-readout strong { font-size: 15px; }.screen-readouts { gap: 9px; }.screen-mode { font-size: 5px; }.screen-footer { font-size: 4px; }.hotcue-grid { gap: 4px; }.hotcue { position: relative; height: 30px; }
  .deck-body { grid-template-columns: 48px minmax(0,1fr) 39px; gap: 6px; }.jog-housing { max-width: 290px; }.jog-caption { font-size: 4px; letter-spacing: .3px; gap: 5px; }.control-legend { font-size: 5px; }.loop-btn { height: 23px; font-size: 6px; }.loop-caption { font-size: 4px; }.pitch-track,.pitch-fader { min-height: 148px; }.pitch-label,.pitch-range-btn,.keylock-btn { font-size: 5px; }.pitch-fader::-webkit-slider-thumb { width: 28px; margin-left: -12px; }.transport { padding-top: 15px; }.t-btn.cue,.t-btn.play { width: 45px; height: 45px; }.t-btn.sync { font-size: 6px; padding-inline: 8px; }.beat-clock { gap: 4px; }.beat-clock i { width: 3px; height: 3px; }
  #session-shelf { gap: 10px; padding: 12px 10px; }.collection-shortcut { flex: 1; border-right: 0; padding-right: 0; }.shelf-hint { display: none; }#btn-quick-open { margin: 0; font-size: 7px; padding-inline: 8px; }.demo-set-btn { width: 100%; font-size: 8px; }.shortcut-help { display: none; }#statusbar { font-size: 6px; padding-top: 10px; }
  #browser { padding: 16px 10px; min-height: 70dvh; }.section-heading { flex-wrap: wrap; gap: 15px; }.section-heading h1 { font-size: 24px; }#library-search { width: 100%; }.browser-toolbar .lib-btn { font-size: 8px; padding: 7px 8px; }.sample-select { width: 100%; max-width: none; font-size: 10px; }.track-table-wrap { overflow-x: auto; }#track-table { min-width: 660px; }.drop-hint { display: none; }
  body[data-view=lab] .panel-tabs { display: flex; margin-bottom: 10px; background: #131b22; border-color: #3b5060; }.panel-tabs .mobile-tab { flex: none; min-width: 65px; font-size: 7px; }#ghost-panels { display: block; padding-top: 0; }.ghost-panel { min-height: 330px; max-height: none; padding: 18px; }
  .task-progress { top: auto; bottom: 14px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { button,.lib-btn { transition: none; }.task-progress-fill { animation: none; } }

.library-empty { text-align: center; padding: 52px 16px !important; color: #899ba7; font-size: 12px; }

/* Preserve the full console on typical laptop displays; extra-wide displays keep the large platters. */
@media (min-width: 1101px) and (max-height: 1050px) {
  #topbar { padding-block: 6px 10px; }
  .session-bar { height: 31px; }
  #console { min-height: 680px; }
  .deck-rail { height: 28px; margin-bottom: 6px; }
  .screen-topline { padding-bottom: 4px; }
  .deck-header { margin-bottom: 5px; }
  .wave-zoom { height: 76px; }
  .wave-over { height: 25px; margin-top: 5px; }
  .screen-readouts { padding-top: 5px; }
  .time-elapsed { font-size: 23px; }
  .pad-bank { margin-top: 13px; }
  .jog-housing { max-width: clamp(230px,calc(100dvh - 650px),300px); }
  .pitch-track { max-height: 192px; }
  .deck-editor summary { padding-block: 6px; }
  #session-shelf { margin-top: 12px; padding-block: 12px; }
  .fx-pedal { padding: 9px 8px 6px; }
  .fx-panel,.monitor-pedal { gap: 5px; }
  .pedal-lcd { padding: 4px 5px; }
  .fx-knobs { margin-top: 0; }
  .fx-on-btn { height: 20px; }
  .mixer-faceplate { padding: 10px 13px 7px; }
  .mixer-brand { padding-bottom: 7px; margin-bottom: 6px; }
  .strip { gap: 6px; }
  .strip-id { padding: 3px 0 5px; }
  .knob { width: 32px; height: 32px; }
  .knob .pointer { height: 10px; transform-origin: 50% 12.5px; }
  .knob.small { width: 25px; height: 25px; }
  .knob.small .pointer { transform-origin: 50% 9px; }
  .knob-wrap::before { width: 45px; height: 45px; }
  .knob-wrap:has(.small)::before { width: 36px; height: 36px; }
  .fader-vu,.ch-fader { height: 114px; }
  .vu { height: 106px; }
  .master-meter-scale,#master-vu { height: 144px; }
  .master-meter-scale > span { line-height: 17.5px; }
  .xfader-label { margin-top: 10px; }
}