:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  background: #050608;
  color: #e7edf4;
  --panel: #0b1015;
  --panel-raised: #111820;
  --line: #26313d;
  --line-soft: #18212a;
  --muted: #82909f;
  --cyan: #00bde8;
  --cyan-soft: rgb(0 189 232 / 15%);
  --orange: #ff7138;
  --orange-soft: rgb(255 113 56 / 15%);
  --green: #42d894;
  --yellow: #f2c14e;
  --red: #ff536b;
  --safe-area-top: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-area-bottom: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-area-left: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));
  --safe-area-right: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

html { min-width: 320px; background: #050608; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding-top: var(--safe-area-top);
  padding-right: var(--safe-area-right);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  background: #101113;
}

button,
input,
select { font: inherit; }

button {
  min-height: 34px;
  border: 1px solid #35414f;
  border-radius: 3px;
  padding: 0 12px;
  color: #e7edf4;
  background: linear-gradient(#1a232d, #111820);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .055em;
}

button:hover:not(:disabled) { border-color: #74869a; background: #202b36; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:focus-visible,
input:focus-visible,
select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.seratek-window {
  width: 100%;
  height: max(680px, calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom)));
  display: grid;
  /* Fixed deck/mixer rows must retain their full height before the library. */
  grid-template-rows: auto auto max-content minmax(150px, 1fr) auto;
  grid-template-areas: "bar" "session" "performance" "library" "status";
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  border-inline: 1px solid #222c37;
  background: rgb(7 10 13 / 98%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 55%);
}

.connection { color: var(--muted); white-space: nowrap; }
.connection::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.connection[data-state="ready"] { color: var(--green); }
.connection[data-state="failed"] { color: var(--red); }
.connection[data-state="preview"] { color: var(--yellow); }

.app-bar {
  grid-area: bar;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "modes brand runtime";
  align-items: center;
  gap: 12px;
  padding: 3px 8px;
  border-bottom: 1px solid var(--line);
  background: #0b1015;
}

.app-brand { grid-area: brand; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.app-bar img { width: 44px; height: 32px; object-fit: contain; }
.brand-copy { min-width: 0; display: grid; gap: 1px; }
.brand-copy h1 { margin: 0; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
.brand-copy span { display: none; color: var(--muted); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.display-modes { grid-area: modes; min-width: 0; display: flex; align-items: center; justify-self: start; gap: 3px; }
.display-modes button { min-height: 27px; padding: 0 7px; color: #70808e; background: #090e13; font-size: .47rem; letter-spacing: .045em; }
.display-modes button[aria-pressed="true"] { color: #041014; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 10px rgb(0 189 232 / 20%); }
.runtime-state { grid-area: runtime; min-width: 0; display: grid; justify-items: end; justify-self: end; gap: 3px; font-size: .58rem; }
.master-health { color: #aab6c2; font-size: .65rem; letter-spacing: .04em; }
.health-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.master-health[data-state="connecting"] { color: var(--muted); }
.master-health[data-state="preview"] { color: var(--yellow); }
.master-health[data-state="ready"] { color: var(--green); }
.master-health[data-state="failed"] { color: var(--red); }
.master-audio-toggle {
  min-height: 24px;
  padding: 0 8px;
  border-color: currentColor;
  color: var(--cyan);
  background: #081118;
  font-size: .52rem;
  letter-spacing: .07em;
}
.master-audio-toggle[aria-pressed="true"] { color: var(--green); }
.master-audio-toggle[data-state="blocked"],
.master-audio-toggle[data-state="failed"] { color: var(--yellow); }
.direct-master-audio { display: none; }

.session-handoff {
  grid-area: session;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) minmax(0, 46vw);
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgb(0 189 232 / 8%), #0a1016 36%, rgb(255 113 56 / 6%));
}
.session-handoff[hidden] { display: none; }
.handoff-copy { min-width: 0; display: grid; gap: 1px; overflow: hidden; }
.handoff-copy strong { color: var(--green); font-size: .62rem; letter-spacing: .1em; }
.handoff-copy span { overflow: hidden; color: #8794a1; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.dj-roster { min-width: 0; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: start; gap: 5px; overflow: hidden; }
.dj-roster > span { flex: 0 0 auto; color: #687784; font-size: .49rem; font-weight: 850; letter-spacing: .08em; }
.dj-roster ol { min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin: 0; padding: 0 0 2px; overflow-x: auto; overflow-y: hidden; list-style: none; scrollbar-color: #49545e #0a0d10; scrollbar-width: thin; }
.dj-roster ol::-webkit-scrollbar,
.handoff-actions::-webkit-scrollbar { height: 3px; }
.dj-roster ol::-webkit-scrollbar-thumb,
.handoff-actions::-webkit-scrollbar-thumb { background: #49545e; }
.dj-roster li { min-width: 0; max-width: 148px; flex: 0 0 auto; display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "avatar name" "avatar role"; align-items: center; column-gap: 5px; border: 1px solid #2f3b46; border-radius: 3px; padding: 2px 5px 2px 3px; color: #c8d1d9; background: #080d12; }
.dj-roster li[data-controller="true"] { border-color: rgb(66 216 148 / 56%); background: rgb(66 216 148 / 7%); }
.dj-roster li[data-empty="true"] { display: block; padding: 4px 6px; color: #65727f; font-size: .5rem; white-space: nowrap; }
.dj-avatar { position: relative; grid-area: avatar; width: 18px; height: 18px; display: grid; place-items: center; overflow: hidden; border: 1px solid #3c4a56; border-radius: 50%; color: #061016; background: var(--cyan); font-size: .44rem; font-weight: 950; }
.dj-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dj-name { grid-area: name; overflow: hidden; font-size: .55rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dj-role { grid-area: role; overflow: hidden; color: #71808d; font-size: .43rem; text-overflow: ellipsis; white-space: nowrap; }
.dj-roster li[data-controller="true"] .dj-role { color: var(--green); }
.handoff-actions { min-width: 0; max-width: 46vw; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 5px; overflow-x: auto; overflow-y: hidden; scrollbar-color: #49545e #0a0d10; scrollbar-width: thin; }
.handoff-actions > * { flex: 0 0 auto; }
.handoff-actions > span { margin-right: 4px; color: #8794a1; font-size: .58rem; white-space: nowrap; }
.handoff-actions button { min-height: 26px; padding-inline: 8px; font-size: .5rem; }
.handoff-actions [data-queue-action] { color: var(--cyan); border-color: rgb(0 189 232 / 48%); }
.handoff-actions [data-vote-action] { color: var(--yellow); border-color: rgb(242 193 78 / 52%); }
.handoff-actions [data-handoff-action] { color: var(--green); border-color: rgb(66 216 148 / 52%); }
.handoff-actions .preparation-summary { margin: 0; border: 1px solid rgb(255 113 56 / 42%); border-radius: 3px; padding: 5px 7px; color: var(--orange); background: rgb(255 113 56 / 8%); font-weight: 850; letter-spacing: .06em; }

.performance {
  grid-area: performance;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 292px 98px;
  border-bottom: 1px solid var(--line);
}

.deck { --deck: var(--cyan); --deck-soft: var(--cyan-soft); min-width: 0; display: contents; }
.performance > .deck-a > .deck-panel { grid-column: 1 / 5; grid-row: 1; }
.deck-b { --deck: var(--orange); --deck-soft: var(--orange-soft); }
.performance > .deck-b > .deck-panel { grid-column: 9 / 13; grid-row: 1; }
.deck-panel { position: relative; min-width: 0; width: 100%; padding: 7px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(116px, 1fr); grid-template-rows: 32px 24px 20px minmax(52px, 1fr) 28px 26px 28px; grid-template-areas: "title title" "overview overview" "tabs platter" "pads platter" "transport platter" "future future" "load load"; gap: 3px 7px; border: 1px solid #343638; border-top: 2px solid var(--deck); background: #171819; }
.deck-topline { position: absolute; top: 8px; left: 7px; }
.deck-number { color: var(--deck); font-size: 10px; font-weight: 900; letter-spacing: .02em; }
.deck-mode { display: none; }

.track-heading { grid-area: title; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px 0 48px; }
.track-heading > div { min-width: 0; display: grid; gap: 4px; }
.track-heading strong { overflow: hidden; color: #f2f5f8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.track-heading span { color: #8b9299; font-size: 9px; }
.track-key { flex: 0 0 auto; min-width: 26px; display: grid; place-items: center; gap: 1px; color: #77818a; font-variant-numeric: tabular-nums; }
.track-key small { color: #59636c; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.track-key output { color: var(--deck); font-size: 10px; font-weight: 900; }
.deck-timing { display: grid; grid-template-columns: auto auto; justify-items: end; color: var(--deck); font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deck-timing small { grid-row: 2; align-self: center; margin-right: 4px; color: #53606c; }
.deck-timing [data-duration] { grid-row: 2; color: #7c8995; font-size: .64rem; }

.platter-row { grid-area: platter; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 22px; grid-template-rows: 1fr; align-items: center; justify-items: center; gap: 4px; margin: 0; }
.platter {
  --platter-angle: 0deg;
  --track-progress: 0deg;
  grid-column: 1; grid-row: 1;
  position: relative;
  width: min(124px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #050505 0 var(--track-progress), #989b9e var(--track-progress) 360deg);
  box-shadow: 0 0 0 1px #050505, 0 3px 10px rgb(0 0 0 / 42%);
}
.platter::before { content: ""; position: absolute; z-index: 0; inset: 10px; border-radius: 50%; background: #eceeed; box-shadow: inset 0 0 0 1px #c6c9c8; }
.platter i { position: absolute; z-index: 1; inset: 10px; border-radius: 50%; transform: rotate(var(--platter-angle)); }
.platter i::before { content: ""; position: absolute; top: calc(50% - 2px); left: 0; width: 50%; height: 4px; background: #050505; transform-origin: 100% 50%; }
.platter[data-ending="true"] { animation: platter-ending-alert .65s steps(2, jump-none) infinite; }
@keyframes platter-ending-alert { 50% { box-shadow: 0 0 0 3px var(--red), 0 3px 10px rgb(0 0 0 / 42%); } }
.deck-data { grid-column: 1; grid-row: 1; z-index: 2; min-width: 0; width: min(92px, 74%); aspect-ratio: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(35px, 1.35fr) minmax(0, 1fr); grid-template-rows: 30px minmax(8px, 1fr) auto auto; grid-template-areas: "pitch bpm range" ". . ." "elapsed elapsed elapsed" "remaining remaining remaining"; align-items: start; margin: 0; padding: 8px 1px 7px; pointer-events: none; }
.deck-data div { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 0; padding: 0; }
.deck-data dt { color: #55595c; font-size: 5px; font-weight: 850; letter-spacing: .04em; }
.deck-data dd { min-width: 0; margin: 0; color: #111315; font-size: 8px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deck-data .pitch-readout { grid-area: pitch; align-self: center; }
.deck-data .bpm-readout { grid-area: bpm; }
.deck-data .range-readout { grid-area: range; align-self: center; }
.deck-data .elapsed-time { grid-area: elapsed; }
.deck-data .remaining-time { grid-area: remaining; }
.deck-data .bpm-readout dt { grid-row: 2; }
.deck-data .bpm-readout dd { grid-row: 1; }
.deck-data [data-bpm] { overflow: hidden; max-width: 100%; font-size: 19px; line-height: 1; letter-spacing: -.05em; text-overflow: clip; }
.deck-data [data-pitch-output] { color: #17191b; font-size: 8px; font-variant-numeric: tabular-nums; }
.deck-data .elapsed-time dt,
.deck-data .remaining-time dt { display: none; }
.deck-data .elapsed-time dd,
.deck-data .remaining-time dd { font-size: 10px; line-height: 1.05; letter-spacing: -.02em; }
.pitch-control { grid-column: 2; grid-row: 1; height: 112px; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 3px; color: #9b9da0; font-size: 8px; font-weight: 800; }
.pitch-control input { width: 20px; height: 82px; margin: 0; accent-color: var(--deck); cursor: pointer; direction: rtl; writing-mode: vertical-lr; }
.pitch-control input:disabled { cursor: not-allowed; opacity: .42; }

.load-zone { grid-area: load; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.deck-load-selection {
  min-width: 0;
  min-height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #2f3439;
  border-radius: 2px;
  padding: 0 9px;
  color: #68737c;
  background: #0b0d0f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-load-selection::before { content: "LIB"; flex: 0 0 auto; margin-right: 7px; color: #4f5b64; font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.deck-load-selection[data-ready="true"] { color: #c3ccd3; border-color: color-mix(in srgb, var(--deck) 46%, #2f3439); }
.deck-load-selection[data-ready="true"]::before { color: var(--deck); }
.load-button { border-color: var(--deck); color: var(--deck); background: var(--deck-soft); }

.load-button { min-height: 26px; font-size: 10px; }
.transport { grid-area: transport; display: grid; grid-template-columns: 1.15fr 1fr .8fr; gap: 3px; margin-top: 0; }
.transport button { min-height: 26px; padding: 0 3px; font-size: 10px; letter-spacing: 0; }
.transport .play { color: #061016; border-color: var(--deck); background: var(--deck); }
.deck[data-playing="true"] .transport .play { border-color: var(--green); background: var(--green); box-shadow: 0 0 9px rgb(66 216 148 / 28%); }
.deck[data-playing="true"] .transport [data-action="pause"] { color: var(--green); border-color: color-mix(in srgb, var(--green) 65%, #35414f); }
.transport [data-action="sync"] { color: #61b7f4; border-color: #315e7d; background: #142632; }
.transport [data-action="sync"]:not(:disabled) { color: #061016; border-color: #61b7f4; background: #61b7f4; box-shadow: 0 0 9px rgb(97 183 244 / 24%); }
.transport [data-action="sync"]:not(:disabled):hover,
.transport [data-action="sync"]:not(:disabled):focus-visible { background: #83c8f8; }
.future-row { grid-area: future; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 0; }
.future-row button { min-height: 24px; padding: 0 4px; color: #a2a5a8; font-size: 9px; }
.future-row [data-action="unload"] { color: #8d969e; }
.future-row [data-action="cue"]:not(:disabled) { color: var(--deck); border-color: color-mix(in srgb, var(--deck) 60%, #35414f); }
.future-row [data-action="cue"][data-set="true"] { color: #071016; border-color: var(--deck); background: var(--deck); }
.future-row [data-show-loop] { color: var(--deck); border-color: color-mix(in srgb, var(--deck) 50%, #35414f); }
.future-row [data-show-loop][data-loop-state="armed"] { color: var(--yellow); border-color: var(--yellow); box-shadow: inset 0 -2px var(--yellow); }
.future-row [data-show-loop][data-loop-state="active"] { color: #071016; border-color: var(--green); background: var(--green); }
.future-row [data-action="key-lock"] { font-size: .5rem; }
.future-row [data-action="key-lock"][data-enabled="true"] { color: #071016; border-color: var(--yellow); background: var(--yellow); }
.deck-panel-tabs { grid-area: tabs; display: flex; gap: 2px; }
.deck-panel-tabs button { flex: 1; min-height: 19px; padding: 0 2px; font-size: 9px; letter-spacing: 0; background: #222426; color: #9da1a5; }
.deck-panel-tabs button[aria-pressed="true"] { color: #fff; border-bottom: 2px solid var(--deck); background: #373a3d; }
.deck-panel-tabs [data-deck-panel-target="deck"] { display: none; }
.deck:not([data-loaded="true"]) .platter { background: #565a5d; }
.deck:not([data-loaded="true"]) .platter::before { background: #a1a4a5; box-shadow: inset 0 0 0 1px #85898b; }
.deck:not([data-loaded="true"]) .platter i::before { background: #6f7375; }
.hot-cue-bank { grid-area: pads; min-width: 0; margin-top: 0; }
.deck:not([data-panel="cues"]) .hot-cue-bank { display: none; }
.hot-cue-bank header { display: none; }
.hot-cue-bank header span { color: var(--deck); font-weight: 900; }
.hot-cue-grid { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 3px; margin-top: 0; }
.hot-cue-grid button { --cue-color: var(--deck); min-height: 24px; padding: 0; color: #aeb2b5; font-size: 10px; border-radius: 0; }
.hot-cue-grid button[data-hot-cue="1"] { --cue-color: #f94144; }
.hot-cue-grid button[data-hot-cue="2"] { --cue-color: #f3722c; }
.hot-cue-grid button[data-hot-cue="3"] { --cue-color: #f9c74f; }
.hot-cue-grid button[data-hot-cue="4"] { --cue-color: #90be6d; }
.hot-cue-grid button[data-hot-cue="5"] { --cue-color: #43aa8b; }
.hot-cue-grid button[data-hot-cue="6"] { --cue-color: #4d9de0; }
.hot-cue-grid button[data-hot-cue="7"] { --cue-color: #725ac1; }
.hot-cue-grid button[data-hot-cue="8"] { --cue-color: #d450b8; }
.hot-cue-grid button:not(:disabled) { border-color: color-mix(in srgb, var(--cue-color) 52%, #35414f); }
.hot-cue-grid button[data-set="true"] { color: #071016; border-color: var(--cue-color); background: var(--cue-color); box-shadow: 0 0 8px color-mix(in srgb, var(--cue-color) 28%, transparent); }
.loop-panel { grid-area: pads; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px; align-content: center; }
.deck:not([data-panel="loops"]) .loop-panel { display: none; }
.loop-panel dl { margin: 0; display: grid; gap: 2px; }
.loop-panel dl div { display: flex; justify-content: space-between; gap: 4px; }
.loop-panel dt { color: #949a9f; font-size: 8px; }
.loop-panel dd { margin: 0; color: #e2e4e7; font-size: 9px; font-variant-numeric: tabular-nums; }
.loop-panel button { min-height: 28px; padding: 0 5px; font-size: 9px; color: var(--deck); }
.loop-panel [data-loop-state="armed"] { color: var(--yellow); border-color: var(--yellow); }
.loop-panel [data-loop-state="active"] { color: #070707; border-color: var(--green); background: var(--green); }
.loop-panel small { grid-column: 1 / -1; color: #959ba0; font-size: 8px; line-height: 1.3; }
.deck-position-tools { position: absolute; z-index: 8; top: 3px; right: 5px; }
.deck-position-tools summary { width: 20px; min-height: 25px; list-style: none; cursor: pointer; font-size: 0; }
.deck-position-tools summary::after { content: "⋯"; font-size: 20px; color: #a6aaaf; }
.deck-position-tools[open] .seek-label { position: absolute; top: 23px; right: 0; width: 220px; margin: 0; padding: 12px; border: 1px solid #4d545c; background: #171b20; box-shadow: 0 5px 14px #0009; }

.seek-label { display: grid; gap: 5px; margin-top: 12px; color: #7f8c99; font-size: .61rem; letter-spacing: .05em; }
.seek-label > span:first-child { display: flex; justify-content: space-between; }
.seek-label small { color: #596674; }
.seek-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.seek-control input { min-width: 0; min-height: 32px; border: 1px solid #303c48; border-radius: 3px; padding: 0 8px; color: #d8e0e8; background: #070b0f; font-size: .7rem; }

.channel-strip { min-width: 0; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(30px, 1fr)) 24px 29px; grid-template-rows: 1fr; gap: 3px 4px; padding: 6px 8px; border: 1px solid #343638; background: #26282b; }
.deck-a > .channel-strip { grid-column: 1 / 6; grid-row: 2; border-right-color: #4d555c; box-shadow: inset -2px 0 color-mix(in srgb, var(--cyan) 40%, transparent); }
.deck-b > .channel-strip { grid-column: 8 / 13; grid-row: 2; grid-template-columns: 29px 24px repeat(5, minmax(30px, 1fr)); border-left-color: #4d555c; box-shadow: inset 2px 0 color-mix(in srgb, var(--orange) 40%, transparent); }
.channel-title { display: none; }
.channel-title small { color: var(--green); font-size: .55rem; }
.gain-control { --gain-angle: 0deg; grid-column: 1; grid-row: 1; display: grid; align-content: center; justify-items: center; gap: 3px; }
.deck-b > .channel-strip .gain-control { grid-column: 7; }
.gain-control > span:first-child { display: flex; gap: 4px; color: #c0c4c7; font-size: 8px; }
.gain-control output { color: #d8e0e8; font-variant-numeric: tabular-nums; }
.rotary-shell { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: var(--deck, var(--green)); cursor: ns-resize; border-radius: 50%; background: conic-gradient(from 225deg, #737a81 0deg 1deg, transparent 1deg 134deg, currentColor 134deg 136deg, transparent 136deg 269deg, #737a81 269deg 270deg, transparent 270deg); }
.rotary-shell input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ns-resize; opacity: 0; touch-action: none; }
.rotary-shell i { position: relative; width: 31px; height: 31px; display: block; border: 1px solid #626970; border-radius: 50%; background: radial-gradient(circle at 42% 37%, #484c50 0 12%, #292d31 13% 46%, #17191b 49% 100%); box-shadow: inset 0 0 0 2px #151719, 0 2px 5px rgb(0 0 0 / 42%); transform: rotate(var(--gain-angle, 0deg)); }
.rotary-shell i::after { content: ""; position: absolute; top: 3px; left: 14px; width: 2px; height: 8px; border-radius: 1px; background: currentColor; box-shadow: 0 0 4px color-mix(in srgb, currentColor 60%, transparent); }
.rotary-shell:has(input:disabled) { cursor: not-allowed; opacity: .42; }
.rotary-shell input:disabled { cursor: not-allowed; }
.rotary-shell:has(input:focus-visible) i { outline: 2px solid currentColor; outline-offset: 2px; }
.channel-fader { grid-column: 6; grid-row: 1; min-width: 0; display: grid; grid-template-rows: 10px 1fr 10px; place-items: center; gap: 1px; margin-top: 0; }
.deck-b > .channel-strip .channel-fader { grid-column: 2; }
.channel-fader span { display: contents; color: #aeb4ba; font-size: 7px; text-align: center; }
.channel-fader small { grid-row: 1; color: #aeb4ba; font-size: 6px; letter-spacing: .04em; }
.channel-fader output { grid-row: 3; color: var(--deck); font-size: 6px; line-height: 9px; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--deck, var(--cyan)); }
.channel-fader input { grid-row: 2; width: 56px; height: 18px; margin: 0; appearance: none; border: 0; background: linear-gradient(#111315, #111315) center / 100% 4px no-repeat; cursor: ns-resize; transform: rotate(-90deg); }
.channel-fader input::-webkit-slider-thumb { width: 18px; height: 8px; appearance: none; border: 1px solid #111315; border-radius: 1px; background: linear-gradient(#f1f2f2, #f1f2f2) center / 100% 2px no-repeat, #4c5053; box-shadow: 0 1px 3px #000b; }
.channel-fader input::-moz-range-thumb { width: 18px; height: 8px; border: 1px solid #111315; border-radius: 1px; background: linear-gradient(#f1f2f2, #f1f2f2) center / 100% 2px no-repeat, #4c5053; box-shadow: 0 1px 3px #000b; }
.channel-fader input:disabled { cursor: not-allowed; opacity: .42; }
.level-meter { --meter-level: 0%; }
.channel-level,
.master-meter { display: grid; grid-template-columns: repeat(2, 7px); grid-template-rows: 9px minmax(0, 1fr) 9px; justify-content: center; align-items: stretch; gap: 1px 2px; }
.channel-level::before,
.master-meter::before { content: "LVL"; grid-column: 1 / -1; color: #aeb4ba; text-align: center; font-size: 6px; line-height: 8px; letter-spacing: .04em; }
.level-meter > span { position: relative; min-height: 0; overflow: hidden; border: 1px solid #34383c; border-radius: 1px; background: #0a0b0c; box-shadow: inset 0 0 0 1px #111416; }
.level-meter i { position: absolute; inset: auto 0 0; width: 100%; height: var(--meter-level); display: block; background: linear-gradient(to top, var(--green) 0 72%, var(--yellow) 80% 90%, var(--red) 94% 100%); box-shadow: 0 0 5px rgb(66 216 148 / 35%); mask: repeating-linear-gradient(to top, #000 0 4px, transparent 4px 6px); }
.level-meter output { grid-column: 1 / -1; min-width: 0; overflow: hidden; color: #798692; text-align: center; font-size: 6px; line-height: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.level-meter[data-clip="true"] output { color: var(--red); }
.channel-level { grid-column: 7; grid-row: 1; margin-top: 0; }
.deck-b > .channel-strip .channel-level { grid-column: 1; }
.eq-controls { display: contents; }
.eq-control,
.filter-control { grid-row: 1; display: grid; align-content: center; justify-items: center; gap: 2px; color: #c0c4c7; font-size: 8px; }
.eq-control:nth-child(1) { grid-column: 2; }
.eq-control:nth-child(2) { grid-column: 3; }
.eq-control:nth-child(3) { grid-column: 4; }
.filter-control { --filter-angle: 0deg; grid-column: 5; }
.deck-b > .channel-strip .eq-control:nth-child(1) { grid-column: 6; }
.deck-b > .channel-strip .eq-control:nth-child(2) { grid-column: 5; }
.deck-b > .channel-strip .eq-control:nth-child(3) { grid-column: 4; }
.deck-b > .channel-strip .filter-control { grid-column: 3; }
.filter-control .rotary-shell i { transform: rotate(var(--filter-angle)); }
.eq-control { --eq-angle: 0deg; }
.eq-control .rotary-shell i { transform: rotate(var(--eq-angle)); }
.eq-control small, .filter-control small { font-size: 8px; }
.eq-control output, .filter-control output { min-height: 10px; color: #a4adb5; font-size: 8px; font-variant-numeric: tabular-nums; }

.center-stack { min-width: 0; display: contents; }
.wave-stage { --beat-guide-size: clamp(30px, 4.2vw, 39px); grid-column: 5 / 9; grid-row: 1; min-width: 0; min-height: 0; position: relative; display: grid; grid-template-rows: 20px minmax(0, 1fr) 24px; padding: 4px; background: #030405; }
.wave-stage header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; color: #b0b4b8; font-size: 9px; letter-spacing: .04em; }
.wave-stage header small { max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #747b81; font-size: 7px; }
.wave-size-toggle { min-height: 17px; display: none; padding: 0 5px; color: #90989f; background: #15191c; font-size: 7px; letter-spacing: .04em; }
.seratek-window[data-display-mode="extended"] .wave-size-toggle { display: block; }
.seratek-window[data-display-mode="extended"][data-extended-waveform-size="small"] .wave-size-toggle { color: #05080a; border-color: var(--cyan); background: var(--cyan); }
.overview { grid-area: overview; position: relative; min-width: 0; height: 24px; display: flex; align-items: center; margin-bottom: 0; padding: 0 8px; overflow: hidden; border: 1px solid #34383b; color: #8c9297; background: #0b0c0e; font-size: .55rem; }
.overview::before, .overview::after { content: ''; position: absolute; z-index: 0; inset: 0; display: none; pointer-events: none; background-repeat: repeat-x; }
.overview::before { background-image: linear-gradient(to right, transparent calc(100% - 1px), rgb(184 192 200 / 20%) calc(100% - 1px)); background-size: var(--overview-minute-step) 100%; }
.overview::after { background-image: linear-gradient(to right, transparent calc(100% - 2px), rgb(211 217 223 / 38%) calc(100% - 2px)); background-size: var(--overview-five-minute-step) 100%; }
.overview[data-minute-grid="true"]::before, .overview[data-five-minute-grid="true"]::after { display: block; }
.overview-a { border-left: 2px solid var(--cyan); }
.overview-b { border-left: 2px solid var(--orange); }
.overview > span, .overview > i { position: relative; z-index: 3; }
.overview svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: none; color: var(--deck-wave); opacity: .82; }
.overview[data-has-waveform="true"] svg { display: block; }
.overview .waveform-peak { opacity: .38; }
.overview .waveform-rms { opacity: .92; }
.overview-markers { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.overview-marker { --overview-marker: #ffd23f; position: absolute; inset: 0 auto 0 0; width: 1px; color: var(--overview-marker); background: currentColor; box-shadow: 0 0 2px #000; transform: translateX(-1px); }
.overview-marker::before { content: ''; position: absolute; top: 0; left: 50%; border: 4px solid transparent; border-top: 6px solid currentColor; transform: translateX(-50%); }
.overview-marker::after { content: attr(data-label); position: absolute; top: 1px; left: 3px; color: currentColor; font: 700 6px/1 sans-serif; text-shadow: 0 1px 1px #000; }
.overview-marker[data-kind="hot-cue"][data-slot="1"] { --overview-marker: #f94144; }
.overview-marker[data-kind="hot-cue"][data-slot="2"] { --overview-marker: #f3722c; }
.overview-marker[data-kind="hot-cue"][data-slot="3"] { --overview-marker: #f9c74f; }
.overview-marker[data-kind="hot-cue"][data-slot="4"] { --overview-marker: #90be6d; }
.overview-marker[data-kind="hot-cue"][data-slot="5"] { --overview-marker: #43aa8b; }
.overview-marker[data-kind="hot-cue"][data-slot="6"] { --overview-marker: #4d9de0; }
.overview-marker[data-kind="hot-cue"][data-slot="7"] { --overview-marker: #725ac1; }
.overview-marker[data-kind="hot-cue"][data-slot="8"] { --overview-marker: #d450b8; }
.overview > i { position: absolute; inset: 0 auto 0 0; width: 1px; background: #fff; box-shadow: 0 0 4px rgb(255 255 255 / 60%); transform: translateX(-1px); }
.overview-seek { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; opacity: 0; }
.overview-seek:disabled { cursor: not-allowed; }
.overview:has(.overview-seek:focus-visible) { outline: 2px solid var(--deck-wave); outline-offset: 2px; }
.overview-a { --deck-wave: var(--cyan); }
.overview-b { --deck-wave: var(--orange); }
.wave-stack { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) var(--beat-guide-size) minmax(0, 1fr); margin-top: 0; border: 1px solid #34383b; overflow: hidden; background: #020304; }
.wave-placeholder { position: relative; display: grid; place-items: center; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 39px, rgb(255 255 255 / 2.5%) 40px), linear-gradient(#050708, #020304); }
.wave-placeholder[data-scrub-enabled="true"] { cursor: grab; touch-action: none; }
.wave-placeholder[data-scrubbing="true"] { cursor: grabbing; }
.wave-b { border-top: 1px solid #34404c; }
.wave-placeholder svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: none; opacity: .92; transform-origin: left center; }
.wave-placeholder[data-playing="true"] svg { transition: transform .95s linear; }
.wave-placeholder[data-scrubbing="true"] svg { transition: none; }
.wave-placeholder[data-has-waveform="true"] svg { display: block; }
.wave-placeholder .waveform-peak { opacity: .34; }
.wave-placeholder .waveform-rms { opacity: .9; }
.waveform-canvas { position: absolute; z-index: 2; inset: 0; display: none; pointer-events: none; }
.waveform-canvas canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wave-placeholder[data-canvas-ready="true"] > svg { display: none; }
.wave-placeholder[data-canvas-ready="true"] .waveform-canvas { display: block; }
.beat-grid { position: absolute; z-index: 2; inset: 0; display: none; pointer-events: none; background-image: linear-gradient(90deg, color-mix(in srgb, currentColor 72%, transparent) 0 1px, transparent 1px); background-repeat: repeat-x; opacity: .46; }
.beat-grid[data-active="true"] { display: block; }
.wave-placeholder[data-canvas-ready="true"] .beat-grid { display: none; }
.wave-empty { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; }
.wave-placeholder[data-has-waveform="true"] .wave-empty { display: none; }
.wave-placeholder[data-canvas-ready="true"] .wave-empty { display: none; }
.wave-empty strong { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid currentColor; border-radius: 50%; }
.wave-empty span { color: #808990; font-size: 10px; }
.wave-a { color: var(--cyan); }
.wave-b { color: var(--orange); }
.playhead { position: absolute; z-index: 4; inset: 0 auto 0 50%; width: 1px; background: #f3f6f8; box-shadow: 0 0 8px rgb(255 255 255 / 45%); }
.playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top-color: #fff; }
.wave-stack:has(.wave-placeholder[data-canvas-ready="true"]) > .playhead { display: none; }
.beat-match-guide { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-block: 1px solid #34383b; background: #020304; }
.beat-match-guide canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.beat-match-guide > span { position: absolute; left: 2px; z-index: 1; padding: 0 2px; font-size: 8px; line-height: 11px; background: #020304e6; pointer-events: none; }
.guide-deck-a { top: 0; color: var(--cyan); }
.guide-deck-b { bottom: 0; color: var(--orange); }
.beat-match-guide small { position: absolute; inset: 0; display: grid; place-items: center; color: #7f8991; font-size: 7px; text-align: center; pointer-events: none; }
.beat-match-guide[data-ready="true"] small { display: none; }
.beat-match-guide[data-partial="true"] { border-bottom-color: #b99440; }
.beatgrid-editor { position: relative; margin-top: 3px; }
.beatgrid-editor summary { min-height: 20px; padding: 4px; color: #a5aeb5; font-size: 9px; cursor: pointer; background: #1d2024; }
.beatgrid-editor[open] { position: absolute; z-index: 9; bottom: 4px; left: 4px; right: 4px; border: 1px solid #626c74; padding: 4px; background: #171b1f; box-shadow: 0 -5px 20px #0009; }
.beatgrid-editor[open] .beatgrid-editor-row { margin-top: 4px; }
.phase-placeholder { padding: 6px; border: 1px solid #26313b; color: #596673; text-align: center; font-size: .5rem; letter-spacing: .05em; }
.phase-placeholder[data-ready="true"] { border-color: #36515d; color: #8ba8b4; }
.beatgrid-editor-row { --deck: var(--cyan); display: grid; grid-template-columns: 16px minmax(54px, 1.6fr) minmax(28px, .7fr) minmax(28px, .7fr) minmax(42px, 1fr); gap: 3px; align-items: center; }
.beatgrid-editor-row.deck-b { --deck: var(--orange); }
.beatgrid-editor-row strong { color: var(--deck); text-align: center; font-size: .57rem; }
.beatgrid-editor-row button { min-width: 0; min-height: 23px; padding: 0 2px; color: #71808d; font-size: .47rem; }
.beatgrid-editor-row[data-ready="true"] button:not(:disabled) { color: var(--deck); border-color: color-mix(in srgb, var(--deck) 55%, #35414f); }

.master { grid-column: 6 / 8; grid-row: 2; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 29px; grid-template-areas: "title title meter" "gain gain meter" "cross cross cross"; grid-template-rows: 11px 43px 27px; gap: 2px 6px; padding: 5px 8px; border-block: 1px solid #343638; background: #26282b; }
.master-title { display: flex; justify-content: space-between; align-items: baseline; color: #ecf1f5; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.master-title { grid-area: title; display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 8px; }
.master-title small { color: var(--green); font-size: 7px; font-weight: 700; }
.master-gain { --gain-angle: 0deg; grid-area: gain; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; }
.master-gain > span:first-child { order: 2; min-width: 0; display: grid; gap: 1px; color: #92999f; font-size: 6px; letter-spacing: .05em; }
.master-gain output { color: var(--green); font-size: 8px; letter-spacing: 0; }
.master-gain .rotary-shell { width: 34px; height: 34px; }
.master-gain .rotary-shell i { width: 27px; height: 27px; }
.master-gain .rotary-shell i::after { left: 12px; }
.master-rotary-shell { color: var(--green); }
.crossfader { grid-area: cross; display: grid; gap: 0; margin-top: 0; }
.crossfader input { min-width: 0; height: 18px; margin: 0; appearance: none; border: 1px solid #3a3c3e; border-radius: 1px; background: linear-gradient(#151719, #151719) center / calc(100% - 18px) 4px no-repeat, repeating-linear-gradient(90deg, #666a6d 0 1px, transparent 1px 25%) center / calc(100% - 18px) 13px no-repeat, #303235; }
.crossfader input::-webkit-slider-thumb { width: 20px; height: 17px; appearance: none; border: 1px solid #08090a; border-radius: 2px; background: linear-gradient(90deg, transparent 0 46%, #f3f3f3 46% 54%, transparent 54%), #080a0b; box-shadow: 0 1px 3px #000b; }
.crossfader input::-moz-range-thumb { width: 20px; height: 17px; border: 1px solid #08090a; border-radius: 2px; background: linear-gradient(90deg, transparent 0 46%, #f3f3f3 46% 54%, transparent 54%), #080a0b; box-shadow: 0 1px 3px #000b; }
.crossfader input:disabled { opacity: .42; }
.crossfader span { display: flex; justify-content: space-between; color: #9ba1a7; font-size: 7px; line-height: 9px; }
.crossfader b { color: #dce4eb; }
.master-meter { grid-area: meter; margin-top: 0; }

.library { position: relative; grid-area: library; min-height: 0; display: grid; grid-template-columns: 154px minmax(0, 1fr); background: #111213; }
.library[data-file-drop]::after {
  content: "DÉPOSEZ VOS MP3 / WAV";
  position: absolute;
  z-index: 30;
  inset: 8px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--cyan);
  border-radius: 5px;
  color: var(--cyan);
  background: rgb(4 13 19 / 94%);
  box-shadow: inset 0 0 42px rgb(0 189 232 / 12%), 0 8px 24px #000b;
  font-size: clamp(.72rem, 2vw, 1rem);
  font-weight: 950;
  letter-spacing: .1em;
  pointer-events: none;
}
.library[data-file-drop="locked"]::after {
  content: "REJOIGNEZ LA FILE POUR IMPORTER";
  border-color: var(--orange);
  color: var(--orange);
  box-shadow: inset 0 0 42px rgb(255 113 56 / 12%), 0 8px 24px #000b;
}
.library aside { display: grid; align-content: start; gap: 1px; padding: 7px 8px; border-right: 1px solid var(--line); color: #65727f; background: #0d0f11; font-size: .56rem; }
.library aside strong { margin: 2px 6px 5px; color: #c5ced7; font-size: .58rem; letter-spacing: .1em; }
.library aside button { width: 100%; min-height: 22px; padding: 0 7px; border: 0; border-left: 2px solid transparent; border-radius: 0; color: inherit; background: transparent; text-align: left; font: inherit; }
.library aside button:hover:not(:disabled),
.library aside button:focus-visible { color: #d0d9e1; background: rgb(255 255 255 / 4%); }
.library aside .active-source { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); }
.library aside .available-source { color: #a9bbc8; }
.library aside button:disabled { cursor: not-allowed; opacity: .42; }
.library-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.library-main header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; border-bottom: 1px solid var(--line); background: #101214; }
.library-heading { display: flex; align-items: center; gap: 12px; }
.library-heading strong { color: #d7dfe7; font-size: .64rem; letter-spacing: .09em; }
.library-heading small { color: #697684; font-size: .6rem; }
.library-tools { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.library-tools > input,
.library-tools > select { min-height: 25px; border: 1px solid #34414e; border-radius: 2px; padding: 0 7px; color: #b9c5cf; background: #080d12; font-size: .52rem; }
.library-tools > .library-source-select { display: none; }
.library-tools > input { width: min(180px, 20vw); }
.library-tools > select { max-width: 125px; }
.library-view-switch { display: flex; gap: 2px; }
.library-view-switch button { min-height: 25px; padding: 0 7px; color: #71808d; background: #090e13; font-size: .48rem; }
.library-view-switch button[aria-pressed="true"] { color: var(--cyan); border-color: rgb(0 189 232 / 58%); background: var(--cyan-soft); }
.library-import { position: relative; min-height: 25px; display: grid; place-items: center; border: 1px solid #34414e; border-radius: 2px; padding: 0 9px; color: var(--cyan); background: var(--cyan-soft); cursor: pointer; font-size: .55rem; font-weight: 850; letter-spacing: .08em; }
.library-import:has(input:disabled) { cursor: not-allowed; opacity: .42; }
.library-import input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.library-guidance { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 2px 9px; background: #0a0d10; }
.library-source-help,
.library-keyboard-help { min-width: 0; margin: 0; overflow: hidden; color: #70808d; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
.library-keyboard-help { color: #7f8d99; letter-spacing: .025em; }
.library-link-panel { flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.library-link-panel:not([open]) { display: none; }
.library-link-panel > summary { min-height: 24px; padding: 5px 13px; color: #939ca5; cursor: pointer; font-size: 9px; }
.library-link-panel[open] > summary { color: var(--cyan); }
.library-main > header, .library-guidance, .preparation-shelf { flex-shrink: 0; }
.library-link-import { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto auto; gap: 6px; align-items: end; padding: 8px 13px; border-bottom: 1px solid var(--line); background: #0b1117; }
.library-link-import label { min-width: 0; display: grid; gap: 4px; color: #6e7c89; font-size: .5rem; font-weight: 800; letter-spacing: .06em; }
.library-link-import input { width: 100%; min-height: 30px; border: 1px solid #34414e; border-radius: 3px; padding: 0 9px; color: #dce4eb; background: #070c11; font-size: .62rem; }
.library-link-import input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.library-link-import button { min-height: 30px; padding: 0 8px; color: var(--cyan); border-color: #34414e; background: var(--cyan-soft); font-size: .52rem; }
.library-link-import button:disabled { opacity: .38; }
.library-link-import small { grid-column: 1 / -1; color: #576571; font-size: .48rem; }
.preparation-shelf { border-bottom: 1px solid var(--line); background: #0a1016; }
.preparation-shelf[hidden] { display: none; }
.library-main .preparation-shelf > header { min-height: 38px; align-items: center; padding-block: 6px; }
.preparation-shelf > header > span { display: flex; align-items: baseline; gap: 9px; }
.preparation-shelf > header strong { color: var(--orange); font-size: .56rem; letter-spacing: .08em; }
.preparation-shelf > header small { color: #667481; font-size: .5rem; }
.preparation-slots { max-height: 144px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; padding: 8px 13px 10px; }
.preparation-slot { min-width: 0; display: grid; gap: 6px; border: 1px solid #303c47; border-radius: 3px; padding: 8px; background: #080d12; }
.preparation-slot-title { display: flex; align-items: center; gap: 7px; min-width: 0; color: #d1d9e0; font-size: .59rem; }
.preparation-slot-title b { flex: 0 0 auto; color: var(--orange); }
.preparation-slot-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preparation-slot-analysis { color: #6f7c88; font-size: .49rem; white-space: nowrap; }
.preparation-slot-actions { display: flex; gap: 4px; }
.preparation-slot-actions button { min-height: 25px; padding: 0 7px; font-size: .51rem; }
.preparation-slot-actions [data-preparation-delete] { margin-left: auto; color: #8c98a3; background: transparent; }
.library-empty { flex: 1; min-height: 90px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; color: #84919d; }
.library-empty[hidden] { display: none; }
.library-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #3b4855; border-radius: 50%; color: var(--cyan); font-size: 1.25rem; }
.library-empty strong { color: #b8c2cc; font-size: .72rem; }
.library-empty p { margin: 4px 0 0; color: #65727f; font-size: .62rem; }
.library-list { flex: 1; min-height: 0; overflow: auto; }
.library-list[hidden] { display: none; }
.library-list table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 10px; }
.library-list th { position: sticky; top: 0; z-index: 1; padding: 6px 7px; color: #667481; background: #0d1319; text-align: left; font-size: .5rem; letter-spacing: .07em; }
.library-list td { padding: 2px 7px; border-top: 1px solid #222426; color: #aeb4ba; }
.library-list tbody tr:nth-child(even) { background: #1a1c1e; }
.library-list tr { cursor: pointer; outline: 0; }
.library-list tr[draggable="true"],
.library-card[draggable="true"] { cursor: grab; }
.library-list tr[data-dragging="true"],
.library-card[data-dragging="true"] { opacity: .46; }
.library-list tr:hover td { background: rgb(255 255 255 / 2%); }
.library-list tr[data-selected="true"] td { background: rgb(0 189 232 / 8%); box-shadow: inset 0 1px rgb(0 189 232 / 18%), inset 0 -1px rgb(0 189 232 / 18%); }
.library-list tr:focus-visible td { outline: 1px solid var(--cyan); outline-offset: -2px; }
.library-list td:nth-child(2), .library-list td:nth-child(3), .library-list td:nth-child(4) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-list td:nth-child(2) { color: #d1d9e0; }
.library-list td:last-child { width: 30px; padding-left: 0; }
.library-list button { min-height: 25px; padding: 0 7px; font-size: .54rem; }
.library-list th button { border: 0; border-radius: 0; padding: 0; min-height: 22px; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.library-list th[aria-sort="ascending"] button::after { content: ' ▴'; color: #d1d9e0; }
.library-list th[aria-sort="descending"] button::after { content: ' ▾'; color: #d1d9e0; }
.library-list td:nth-child(5), .library-list td:nth-child(6), .library-list td:nth-child(7) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.library-loads { display: flex; gap: 4px; }
.library-remove { color: #7c8792; background: transparent; }
.library-grid { flex: 1; min-height: 0; display: grid; align-content: start; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 8px; overflow: auto; padding: 10px 13px 13px; }
.library-grid[hidden] { display: none; }
.library-card { min-width: 0; display: grid; grid-template-rows: 86px auto auto auto auto auto; gap: 6px; border: 1px solid #293540; border-radius: 4px; padding: 8px; background: #0b1117; cursor: pointer; outline: 0; }
.library-card:hover { border-color: #435160; background: #0e151c; }
.library-card[data-selected="true"] { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgb(0 189 232 / 18%), 0 0 12px rgb(0 189 232 / 8%); }
.library-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.library-cover { display: grid; place-items: center; border: 1px solid #26323d; color: rgb(231 237 244 / 62%); background: linear-gradient(145deg, rgb(0 189 232 / 26%), rgb(255 113 56 / 18%)), repeating-linear-gradient(45deg, #0f171e 0 8px, #0a1016 8px 16px); font-size: .72rem; font-weight: 950; letter-spacing: .18em; }
.library-cover img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.library-cover[data-state="loading"] { animation: library-cover-pulse 1.2s ease-in-out infinite alternate; }
@keyframes library-cover-pulse { from { opacity: .62; } to { opacity: 1; } }
.library-card > strong { overflow: hidden; color: #d4dce4; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.library-card > small { overflow: hidden; color: #697784; font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.library-card > .library-track-artist { color: #8f9ca8; }
.library-card > .library-track-analysis { color: #b0bac3; font-variant-numeric: tabular-nums; }
.library-card footer { min-height: 26px; display: flex; align-items: center; gap: 5px; }
.library-card footer .library-remove { margin-left: auto; }
.library-card button { min-height: 25px; padding: 0 7px; font-size: .51rem; }

.deck-panel[data-library-drop="ready"],
.deck-panel[data-library-drop="external"] {
  z-index: 9;
  border-color: var(--deck);
  outline: 2px solid var(--deck);
  outline-offset: -3px;
  box-shadow: inset 0 0 32px color-mix(in srgb, var(--deck) 16%, transparent),
    0 0 14px color-mix(in srgb, var(--deck) 30%, transparent);
}
.deck-panel[data-library-drop="ready"]::after,
.deck-panel[data-library-drop="external"]::after {
  content: "DÉPOSER SUR CE DECK";
  position: absolute;
  z-index: 20;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--deck);
  padding: 7px 10px;
  color: #071015;
  background: var(--deck);
  box-shadow: 0 5px 18px #000b;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  pointer-events: none;
  white-space: nowrap;
}
.deck-panel[data-library-drop="external"]::after {
  content: "DÉPOSER MP3 / WAV SUR CE DECK";
}

/* Les cinq projections réorganisent les mêmes decks, contrôles et waveforms. */
.seratek-window[data-display-mode="horizontal"] .wave-stack { grid-template-rows: minmax(0, 1fr) var(--beat-guide-size) minmax(0, 1fr); }
.seratek-window[data-display-mode="vertical"] .deck-a > .deck-panel { grid-column: 1 / 6; }
.seratek-window[data-display-mode="vertical"] .deck-b > .deck-panel { grid-column: 8 / 13; }
.seratek-window[data-display-mode="vertical"] .wave-stage { grid-column: 6 / 8; }
.seratek-window[data-display-mode="vertical"] .wave-stage header small { display: none; }
.seratek-window[data-display-mode="vertical"] .wave-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--beat-guide-size); }
.seratek-window[data-display-mode="vertical"] .wave-a { grid-column: 1; grid-row: 1; }
.seratek-window[data-display-mode="vertical"] .wave-b { grid-column: 2; grid-row: 1; }
.seratek-window[data-display-mode="vertical"] .beat-match-guide { grid-column: 1 / -1; grid-row: 2; }
.seratek-window[data-display-mode="vertical"] .wave-empty { z-index: 5; flex-direction: column; gap: 7px; padding: 8px; text-align: center; }
.seratek-window[data-display-mode="vertical"] .wave-empty span { display: none; }
.seratek-window[data-display-mode="vertical"] .wave-b { border-top: 0; border-left: 1px solid #34404c; }
.seratek-window[data-display-mode="vertical"] .wave-placeholder svg,
.seratek-window[data-display-mode="vertical"] .wave-placeholder .beat-grid { inset: 25% -50%; width: 200%; height: 50%; transform-origin: center; rotate: 90deg; }
.seratek-window[data-display-mode="vertical"] .playhead { inset: 50% 0 auto; width: auto; height: 1px; }
.seratek-window[data-display-mode="vertical"] .playhead::before { top: -5px; left: 0; border-top-color: transparent; border-left-color: #fff; }

.seratek-window[data-display-mode="extended"] .performance {
  grid-template-rows: 170px 180px 98px;
}
.seratek-window[data-display-mode="extended"][data-extended-waveform-size="small"] .performance {
  grid-template-rows: 170px 112px 98px;
}
.seratek-window[data-display-mode="extended"] .deck-a > .deck-panel { grid-column: 1 / 7; }
.seratek-window[data-display-mode="extended"] .deck-b > .deck-panel { grid-column: 7 / 13; }
.seratek-window[data-display-mode="extended"] .deck-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 138px;
  grid-template-rows: 30px 22px 20px 30px 28px;
  grid-template-areas: "title title platter" "overview overview platter" "tabs transport platter" "pads future platter" "pads load platter";
}
.seratek-window[data-display-mode="extended"] .wave-stage { grid-column: 1 / -1; grid-row: 2; }
.seratek-window[data-display-mode="extended"] .channel-strip,
.seratek-window[data-display-mode="extended"] .master { grid-row: 3; }
.seratek-window[data-display-mode="extended"] .overview { height: 22px; }

.seratek-window[data-display-mode="stack"] .performance {
  grid-template-rows: 180px 180px 98px;
}
.seratek-window[data-display-mode="stack"] .deck-a > .deck-panel { grid-column: 1 / 5; grid-row: 1; }
.seratek-window[data-display-mode="stack"] .deck-b > .deck-panel { grid-column: 1 / 5; grid-row: 2; }
.seratek-window[data-display-mode="stack"] .deck-panel { grid-template-rows: 26px 18px 18px minmax(38px, 1fr) 22px 22px; grid-template-areas: "title title" "overview overview" "tabs platter" "pads platter" "transport future" "load load"; gap: 2px 7px; padding: 5px 7px; }
.seratek-window[data-display-mode="stack"] .overview { height: 18px; }
.seratek-window[data-display-mode="stack"] .deck-panel-tabs [data-deck-panel-target="deck"] { display: block; }
.seratek-window[data-display-mode="stack"] .deck[data-panel="deck"] .platter-row { grid-column: 1 / -1; grid-row: 4; }
.seratek-window[data-display-mode="stack"] .deck[data-panel="deck"] .deck-data { display: flex; gap: 12px; justify-content: center; align-items: center; }
.seratek-window[data-display-mode="stack"] .deck[data-panel="deck"] .deck-data div { display: grid; }
.seratek-window[data-display-mode="stack"] .deck[data-panel="deck"] .pitch-control { height: 48px; }
.seratek-window[data-display-mode="stack"] .deck[data-panel="deck"] .pitch-control input { height: 24px; }
.seratek-window[data-display-mode="stack"] .wave-stage { grid-column: 5 / -1; grid-row: 1 / 3; }
.seratek-window[data-display-mode="stack"] .channel-strip,
.seratek-window[data-display-mode="stack"] .master { grid-row: 3; }
.seratek-window[data-display-mode="stack"] .platter { display: none; }
.seratek-window[data-display-mode="stack"] .deck-data { width: 100%; aspect-ratio: auto; padding: 4px; }
.seratek-window[data-display-mode="stack"] .deck-data dt,
.seratek-window[data-display-mode="stack"] .deck-data dd { color: #d1d5d9; }
.seratek-window[data-display-mode="stack"] .deck-data [data-pitch-output] { color: var(--deck); }
.seratek-window[data-display-mode="stack"] .pitch-control { height: 82px; }
.seratek-window[data-display-mode="stack"] .pitch-control input { height: 55px; }
.seratek-window[data-display-mode="stack"] .deck-panel-tabs button { min-height: 17px; }
.seratek-window[data-display-mode="stack"] .hot-cue-grid { gap: 2px; }
.seratek-window[data-display-mode="stack"] .hot-cue-grid button { min-height: 16px; }
.seratek-window[data-display-mode="stack"] .loop-panel button { min-height: 22px; }
.seratek-window[data-display-mode="stack"] .transport button,
.seratek-window[data-display-mode="stack"] .future-row button { min-height: 21px; }
.seratek-window[data-display-mode="stack"] .deck-load-selection,
.seratek-window[data-display-mode="stack"] .load-button { min-height: 22px; }
.seratek-window[data-display-mode="stack"] .future-row button { font-size: 8px; padding: 0; letter-spacing: 0; }

.seratek-window[data-display-mode="library"] .performance {
  grid-template-rows: 126px 98px;
}
.seratek-window[data-display-mode="library"] .deck-a > .deck-panel { grid-column: 1 / 7; }
.seratek-window[data-display-mode="library"] .deck-b > .deck-panel { grid-column: 7 / 13; }
.seratek-window[data-display-mode="library"] .deck-panel { grid-template-columns: minmax(0, 1.2fr) minmax(110px, 1fr); grid-template-rows: 26px 20px 26px 26px; grid-template-areas: "title platter" "overview platter" "transport future" "load load"; }
.seratek-window[data-display-mode="library"] .overview { height: 20px; }
.seratek-window[data-display-mode="library"] .platter,
.seratek-window[data-display-mode="library"] .deck-panel-tabs,
.seratek-window[data-display-mode="library"] .hot-cue-bank,
.seratek-window[data-display-mode="library"] .loop-panel,
.seratek-window[data-display-mode="library"] .wave-stage { display: none; }
.seratek-window[data-display-mode="library"] .deck-data { width: 100%; aspect-ratio: auto; display: grid; grid-template: "bpm pitch" 1fr / 1fr 1fr; gap: 2px 6px; padding: 2px; }
.seratek-window[data-display-mode="library"] .deck-data .range-readout,
.seratek-window[data-display-mode="library"] .deck-data .elapsed-time,
.seratek-window[data-display-mode="library"] .deck-data .remaining-time { display: none; }
.seratek-window[data-display-mode="library"] .deck-data dt,
.seratek-window[data-display-mode="library"] .deck-data dd { color: #c7cdd1; }
.seratek-window[data-display-mode="library"] .deck-data [data-pitch-output] { color: var(--deck); }
.seratek-window[data-display-mode="library"] .pitch-control { height: 46px; }
.seratek-window[data-display-mode="library"] .pitch-control input { height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .deck[data-playing="true"] .platter { animation: none; }
  .platter[data-ending="true"] { animation: none; box-shadow: 0 0 0 2px var(--red), 0 3px 10px rgb(0 0 0 / 42%); }
}

.status-bar { grid-area: status; min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 10px; border-top: 1px solid var(--line); color: #949ca4; background: #17191b; font-size: 10px; }
#operation-status[data-kind="success"] { color: var(--green); }
#operation-status[data-kind="error"] { color: var(--red); }

.launch-overlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(2 5 8 / 86%);
  backdrop-filter: blur(10px);
}
.launch-overlay[hidden] { display: none; }
.launch-card {
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  border: 1px solid #344453;
  border-top-color: var(--cyan);
  border-radius: 5px;
  padding: 24px;
  background: linear-gradient(155deg, #121a22, #080d12 72%);
  box-shadow: 0 28px 90px rgb(0 0 0 / 70%);
}
.launch-eyebrow { color: var(--cyan); font-size: .58rem; font-weight: 900; letter-spacing: .14em; }
.launch-card h2 { margin: 0; color: #f0f4f7; font-size: 1.2rem; }
.launch-card p { margin: -5px 0 4px; color: #82909e; font-size: .7rem; line-height: 1.55; }
.launch-default { border: 1px solid rgb(0 189 232 / 28%); border-radius: 4px; padding: 10px 11px; color: #b8d9e2; background: rgb(0 189 232 / 7%); font-size: .64rem; font-weight: 750; }
.launch-advanced { border: 1px solid #293641; border-radius: 4px; background: #0a1016; }
.launch-advanced summary { padding: 10px 11px; color: #8795a2; cursor: pointer; font-size: .6rem; font-weight: 800; letter-spacing: .04em; }
.launch-advanced summary::marker { color: var(--cyan); }
.launch-advanced[open] summary { border-bottom: 1px solid #293641; color: #b9c6d0; }
.launch-advanced-fields { display: grid; gap: 12px; padding: 12px; }
.launch-card label { display: grid; gap: 6px; color: #8e9ba8; font-size: .58rem; font-weight: 800; letter-spacing: .06em; }
.launch-card input,
.launch-card select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #34414e;
  border-radius: 3px;
  padding: 0 10px;
  color: #e3e9ef;
  background: #080d12;
}
.launch-card button { min-height: 42px; margin-top: 5px; color: #041014; border-color: var(--cyan); background: var(--cyan); }

@media (max-width: 1050px) {
  .brand-copy h1 { font-size: 11px; letter-spacing: .14em; }
  .display-modes button { padding: 0 5px; }
  .connection, .master-health { font-size: 9px; }
  .performance > .deck .deck-panel { column-gap: 4px; grid-template-columns: minmax(0, 1fr) minmax(104px, 1fr); }
  .seratek-window[data-display-mode="extended"] .deck-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 115px; }
  .deck-data [data-bpm] { font-size: 19px; }
  .deck-timing { font-size: 9px; }
  .track-heading { padding-left: 40px; }
  .track-heading strong { font-size: 11px; }
  .deck-number { font-size: 9px; }
  .channel-strip { padding-inline: 5px; gap: 3px; }
  .gain-control > span:first-child { flex-direction: column; gap: 0; text-align: center; }
  .session-handoff { grid-template-columns: minmax(100px, 135px) minmax(0, 1fr) minmax(0, 46vw); }
  .library { grid-template-columns: 132px minmax(0, 1fr); }
  .library-main > header { min-height: 40px; flex-wrap: wrap; padding: 5px 8px; gap: 5px; }
  .library-tools { flex: 1 1 420px; flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .seratek-window { display: block; height: auto; min-height: 100dvh; }
  .app-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand runtime" "modes modes"; gap: 3px 8px; }
  .app-brand { justify-self: start; }
  .display-modes { width: 100%; justify-content: center; }
  .display-modes button { min-height: 36px; padding-inline: 8px; }
  .master-health { display: none; }
  .master-audio-toggle { min-height: 32px; padding-inline: 10px; }
  .library { min-height: 340px; grid-template-columns: 1fr; }
  .library aside { display: none; }
  .library-link-panel:not([open]) { display: block; }
  .library-main { min-height: 340px; }
  .library-list, .library-grid { max-height: 380px; flex-basis: 220px; }
  .library-link-import { grid-template-columns: 1fr auto auto; }
  .library-link-import label { grid-column: 1 / -1; }
  .session-handoff { min-height: 0; display: flex; align-items: flex-start; flex-direction: column; gap: 6px; padding: 6px 8px; }
  .handoff-copy { width: 100%; }
  .dj-roster { width: 100%; justify-content: flex-start; }
  .handoff-actions { width: 100%; max-width: none; justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
  .seratek-window[data-display-mode] .performance {
    display: flex; flex-direction: column;
  }
  .seratek-window[data-display-mode] .deck-panel { height: 292px; grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr); grid-template-rows: 32px 24px 20px minmax(52px, 1fr) 28px 26px 28px; grid-template-areas: "title title" "overview overview" "tabs platter" "pads platter" "transport platter" "future future" "load load"; }
  .seratek-window[data-display-mode] .deck-a > .deck-panel { order: 1; }
  .seratek-window[data-display-mode] .deck-a > .channel-strip { order: 2; }
  .seratek-window[data-display-mode] .deck-b > .deck-panel { order: 3; }
  .seratek-window[data-display-mode] .deck-b > .channel-strip { order: 4; }
  .seratek-window[data-display-mode] .master { order: 5; height: 98px; grid-template-columns: 42px minmax(0, 1fr) 29px; }
  .seratek-window[data-display-mode] .channel-strip { height: 98px; }
  .seratek-window[data-display-mode] .wave-stage { order: 0; height: 260px; }
  .seratek-window[data-display-mode="extended"][data-extended-waveform-size="small"] .wave-stage { height: 180px; }
  .seratek-window[data-display-mode="vertical"] .wave-stage { height: 320px; }
  .seratek-window[data-display-mode="library"] .deck-panel-tabs { display: flex; }
  .seratek-window[data-display-mode="library"] .deck[data-panel="cues"] .hot-cue-bank,
  .seratek-window[data-display-mode="library"] .deck[data-panel="loops"] .loop-panel { display: grid; }
  .seratek-window[data-display-mode="library"] .deck-data { display: grid; grid-template: "bpm pitch" 1fr / 1fr 1fr; }
  .seratek-window[data-display-mode="library"] .deck-data .pitch-readout { display: grid; }
  .seratek-window[data-display-mode="library"] .pitch-control { height: 90px; }
  .seratek-window[data-display-mode="library"] .pitch-control input { height: 64px; }
  .library-main > header { align-items: flex-start; flex-direction: column; }
  .library-tools { width: 100%; flex-basis: auto; justify-content: flex-start; }
  .library-tools > .library-source-select { max-width: 190px; display: block; flex: 1 1 150px; }
  .library-tools > input { flex: 1 1 150px; width: auto; }
}

@media (max-width: 460px) {
  .app-bar img { width: 40px; height: 28px; }
  .connection { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .display-modes { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .display-modes button { flex: 0 0 auto; }
  .library-tools > select { max-width: 108px; }
  .library-tools > .library-source-select { max-width: 150px; }
  .library-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); }
  .status-bar { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}