#mixer { background: var(--black); border-bottom: 1px solid #202020; }

.mixer-ticker { background: var(--release-accent, var(--color-releases)); overflow: hidden; padding: 20px 0; transition: background .6s var(--ease-out); }
#mixer.is-playing .player-ticker-scroll { animation-play-state: running; }
.mixer-crate { padding: 18px var(--gutter) 0; border-bottom: 1px solid #202020; }
.mixer-crate__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; overflow-x: auto; padding: 0 0 18px; scrollbar-color: var(--release-accent, var(--color-releases)) #202020; }
.mixer-crate__sleeve { width: 100%; min-height: 128px; }
/* Compact crate sleeves stay to the color-block/title basics — the detail
   fields (tracklist/credits/buy links) added for the full catalog view
   would overflow this size and duplicate the deck readout once loaded. */
.mixer-crate__sleeve .poster-tracklist,
.mixer-crate__sleeve .poster-credits,
.mixer-crate__sleeve .poster-buy { display: none; }

.mixer-decks { display: grid; grid-template-columns: minmax(0, 1fr) 154px minmax(0, 1fr); gap: 22px; align-items: center; padding: 36px var(--gutter) 44px; }
.deck { --deck-accent: var(--color-releases); background: #090909; border: 1px solid #343434; border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 1fr; gap: 16px; box-shadow: inset 0 0 0 1px #050505, 0 16px 32px rgba(0, 0, 0, .22); }
.deck.is-drag-over { border-color: var(--deck-accent); box-shadow: inset 0 0 0 1px var(--deck-accent); }
.deck-topline { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #282828; color: rgba(255, 255, 255, .55); font: var(--fw-semi) 10px var(--font-main); letter-spacing: .14em; text-transform: uppercase; }
.deck-platter { width: min(100%, 360px); aspect-ratio: 1; justify-self: center; align-self: center; border-radius: 50%; background: repeating-radial-gradient(circle at center, #171717 0 2px, #0a0a0a 3px 6px); border: 7px solid #252525; box-shadow: 0 0 0 2px var(--deck-accent), inset 0 0 0 7px #030303; display: grid; place-items: center; cursor: ew-resize; touch-action: none; }
.deck-platter-disc { width: 54%; aspect-ratio: 1; border-radius: 50%; background: var(--deck-accent); color: var(--black); display: grid; place-items: center; border: 2px solid #030303; box-shadow: 0 0 0 4px var(--deck-accent); animation: deck-spin 2.4s linear infinite paused; background-position: center; background-size: cover; overflow: hidden; transform: rotate(var(--scratch-rotation, 0deg)); }
.deck-platter-disc.has-artwork span { display: none; }
.deck-platter-disc span { font: var(--fw-semi) 10px var(--font-main); letter-spacing: .12em; }
.deck.is-playing .deck-platter-disc { animation-play-state: running; }
@keyframes deck-spin { to { transform: rotate(calc(360deg + var(--scratch-rotation, 0deg))); } }

.deck-readout { align-self: center; min-width: 0; text-align: center; }
.deck-artist, .deck-track, .deck-topline, .deck-controls > label > span, .deck-knob-control > span { font-family: var(--font-main); }
.deck-artist { margin-bottom: 3px; color: rgba(255, 255, 255, .52); font-size: 10px; font-weight: var(--fw-semi); letter-spacing: .12em; text-transform: uppercase; }
.deck-title { color: var(--white); font: var(--fw-semi) clamp(20px, 2vw, 30px)/.92 var(--font-main); letter-spacing: -.035em; text-transform: uppercase; }
.deck-track { min-height: 1.2em; margin-top: 7px; color: var(--deck-accent); font-size: 11px; font-weight: var(--fw-semi); letter-spacing: .05em; }
.deck-track--header { min-width: 0; margin: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.deck-transport { width: min(100%, 440px); justify-self: center; display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 9px; }
.mixer-control { appearance: none; min-width: 96px; border: 1px solid var(--deck-accent); background: var(--deck-accent); color: var(--black); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 12px 14px; font: var(--fw-semi) 11px var(--font-main); letter-spacing: .12em; text-transform: uppercase; transition: transform .15s var(--ease-out), background .15s var(--ease-out); }
.mixer-control:hover { transform: translateY(-2px); background: var(--white); }
.mixer-control[aria-pressed="true"] { background: transparent; color: var(--deck-accent); }
.mixer-control__icon { font-size: 12px; line-height: 1; }
.deck-skip { min-width: 38px; height: 38px; border: 1px solid #484848; background: transparent; color: var(--deck-accent); cursor: pointer; font: var(--fw-semi) 10px var(--font-main); letter-spacing: .04em; }
.deck-skip:hover { border-color: var(--deck-accent); background: var(--deck-accent); color: var(--black); }
.deck-time { color: rgba(255, 255, 255, .62); font: var(--fw-semi) 10px var(--font-mono); letter-spacing: .03em; text-align: right; white-space: nowrap; }
.deck-scrub, .deck-tempo input, .mixer-crossfader { appearance: none; height: 4px; border-radius: 0; background: #404040; cursor: pointer; }
.deck-scrub { grid-column: 1 / -1; width: 100%; }
.deck-scrub::-webkit-slider-thumb, .deck-tempo input::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border: 2px solid var(--black); border-radius: 50%; background: var(--deck-accent, var(--color-releases)); box-shadow: 0 0 0 1px currentColor; }
.deck-scrub::-moz-range-thumb, .deck-tempo input::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--black); border-radius: 50%; background: var(--deck-accent, var(--color-releases)); }

.deck-controls { width: min(100%, 600px); justify-self: center; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 50px minmax(130px, 1fr); align-items: end; gap: 18px; padding-top: 16px; border-top: 1px solid #282828; }
.deck-eq { display: flex; justify-content: space-between; gap: 8px; }
.deck-knob-control { --knob: .67; position: relative; width: 58px; height: 76px; display: grid; justify-items: center; align-content: end; color: rgba(255, 255, 255, .66); font-size: 9px; font-weight: var(--fw-semi); letter-spacing: .1em; text-transform: uppercase; }
.deck-knob-control i { position: absolute; top: 0; left: 2px; width: 54px; height: 54px; border: 1px solid #4a4a4a; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #252525 0 44%, #101010 45% 100%); box-shadow: inset 0 0 0 3px #181818; transform: rotate(calc(-135deg + var(--knob) * 270deg)); transition: transform .08s linear; }
.deck-knob-control i::after { content: ''; position: absolute; top: 7px; left: calc(50% - 1px); width: 2px; height: 13px; background: var(--deck-accent); box-shadow: 0 0 5px var(--deck-accent); }
.deck-knob-control input { position: absolute; inset: 0 0 20px; z-index: 1; width: 100%; opacity: 0; cursor: ns-resize; }
.deck-channel-fader { display: grid; justify-items: center; gap: 8px; color: rgba(255,255,255,.66); font-size: 9px; font-weight: var(--fw-semi); letter-spacing: .1em; text-transform: uppercase; }
.deck-channel-fader input { appearance: slider-vertical; width: 20px; height: 104px; accent-color: var(--deck-accent); cursor: ns-resize; }
.deck-tempo { display: grid; gap: 12px; color: rgba(255,255,255,.66); font-size: 9px; font-weight: var(--fw-semi); letter-spacing: .1em; text-transform: uppercase; }
.deck-tempo > span { display: flex; justify-content: space-between; }
.deck-tempo output { color: var(--deck-accent); font: inherit; }

.mixer-crossfader-wrap { display: grid; justify-items: stretch; gap: 12px; padding: 18px 0; }
.mixer-crate-toggle { border: 1px solid rgba(255,255,255,.38); background: transparent; color: var(--release-accent, var(--color-releases)); cursor: pointer; padding: 10px 8px; font: var(--fw-semi) 9px var(--font-main); letter-spacing: .1em; text-transform: uppercase; }
.mixer-crate-toggle:hover, .mixer-crate-toggle[aria-expanded="true"] { border-color: var(--release-accent, var(--color-releases)); background: var(--release-accent, var(--color-releases)); color: var(--black); }
.mixer-crossfader-label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: rgba(255,255,255,.64); font: var(--fw-semi) 9px var(--font-main); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.mixer-crossfader-label__end { color: var(--release-accent, var(--color-releases)); font-size: 10px; }
.mixer-crossfader { width: 100%; min-width: 132px; transform: none; }
.mixer-crossfader::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border: 2px solid var(--black); border-radius: 50%; background: var(--release-accent, var(--color-releases)); box-shadow: 0 0 0 1px currentColor; }
.mixer-crossfader::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--black); border-radius: 50%; background: var(--release-accent, var(--color-releases)); }
.mixer-master-play { width: 120px; justify-self: center; min-height: 62px; border: 1px solid var(--release-accent, var(--color-releases)); background: var(--release-accent, var(--color-releases)); color: var(--black); cursor: pointer; display: grid; gap: 5px; place-items: center; padding: 9px; font: var(--fw-semi) 10px var(--font-main); letter-spacing: .12em; text-transform: uppercase; }
.mixer-master-play[aria-pressed="true"] { background: transparent; color: var(--release-accent, var(--color-releases)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .deck-platter-disc { animation: none; } }
@media (max-width: 900px) { .mixer-decks { grid-template-columns: 1fr; } .mixer-crossfader-wrap { order: 3; } .mixer-crossfader { width: min(360px, 80vw); transform: none; } .mixer-master-play { width: min(360px, 80vw); } }
@media (max-width: 700px) { .mixer-crate__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(128px, 38vw); } }
@media (max-width: 540px) { .mixer-decks { padding: 24px var(--gutter) 32px; } .deck { grid-template-columns: 1fr; } .deck-platter { width: min(220px, 65vw); justify-self: center; } .deck-readout { text-align: center; } .deck-controls { grid-template-columns: 1fr 46px; } .deck-tempo { grid-column: 1 / -1; } .deck-eq { justify-content: space-around; } }