/* VYBE Deck: the VYBE look, not a machine. Glass on a living, VYBE-coloured room.
   Decks left and right, playlist in the middle, crossfader below. --a deck A, --b deck B, --c accent. */
.dj { position: fixed; inset: 0; z-index: 40; display: none; background: #05060B; color: #F4F3F1; overflow: hidden; user-select: none; -webkit-user-select: none; --a: #4FC3FF; --b: #FF5FA2; --c: #8C7BFF; --beat: 0; font-family: 'Inter Tight', system-ui, sans-serif;
  --glass: rgba(255,255,255,.045); --glass2: rgba(255,255,255,.08); --line: rgba(255,255,255,.09); --ease: cubic-bezier(.2,.8,.2,1); }
body.dj-on .dj { display: block; animation: djIn .7s var(--ease) both; }
body.dj-on .shell, body.dj-on .amb { visibility: hidden; }
@keyframes djIn { from { opacity: 0; } }
.dj button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dj svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dj svg .f { fill: currentColor; stroke: none; }

/* the room: light show canvas + three slow aurora clouds in the VYBE colours */
.dk-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.dk-aura { position: absolute; inset: -20%; pointer-events: none; filter: blur(70px); opacity: calc(.42 + var(--beat) * .25); transition: opacity .2s; }
.dk-aura i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; }
.dk-aura i:nth-child(1) { left: 6%; top: 18%; background: radial-gradient(circle, var(--a), transparent 65%); animation: auraA 22s ease-in-out infinite alternate; }
.dk-aura i:nth-child(2) { right: 4%; top: 12%; background: radial-gradient(circle, var(--b), transparent 65%); animation: auraB 26s ease-in-out infinite alternate; }
.dk-aura i:nth-child(3) { left: 32%; bottom: 0; background: radial-gradient(circle, var(--c), transparent 65%); opacity: .7; animation: auraC 30s ease-in-out infinite alternate; }
@keyframes auraA { to { transform: translate(12%, 10%) scale(1.15); } } @keyframes auraB { to { transform: translate(-14%, 14%) scale(.9); } } @keyframes auraC { to { transform: translate(8%, -16%) scale(1.2); } }
.dk-vig { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 90% at 50% 45%, transparent 35%, rgba(3,4,8,.82)); }

/* top: exit, brand, pick your VYBE */
.dk-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 18px 28px 12px; animation: up .8s .05s var(--ease) both; }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }
.dk-exit { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--glass2) !important; border: 1px solid var(--line) !important; backdrop-filter: blur(14px); font-weight: 700; font-size: 13.5px; transition: background .3s; }
.dk-exit:hover { background: rgba(255,255,255,.14) !important; }
.dk-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .3em; font-size: 12px; color: rgba(255,255,255,.85); } .dk-brand img { width: 24px; height: 24px; border-radius: 7px; }
.dk-vibes { margin-left: auto; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); backdrop-filter: blur(18px); overflow-x: auto; scrollbar-width: none; max-width: 64vw; }
.dk-vibes::-webkit-scrollbar { display: none; }
.dk-vibes button { flex: none; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.62); transition: color .3s, background .4s var(--ease), box-shadow .4s, transform .2s; }
.dk-vibes button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vc); opacity: .7; transition: transform .4s var(--ease), box-shadow .4s; }
.dk-vibes button:hover { color: #fff; background: rgba(255,255,255,.06) !important; } .dk-vibes button:active { transform: scale(.95); }
.dk-vibes button.on { color: #0B0B10; background: linear-gradient(135deg, var(--vc), color-mix(in srgb, var(--vc) 55%, #fff)) !important; box-shadow: 0 0 26px color-mix(in srgb, var(--vc) 55%, transparent); }
.dk-vibes button.on::before { background: #0B0B10; opacity: .8; transform: scale(1.1); }

/* the console: one glass sheet with a slow light running round its edge */
.dk-console { position: relative; z-index: 2; margin: 6px auto 0; width: min(1380px, calc(100% - 44px)); height: calc(100% - 96px); max-height: 780px; display: grid; grid-template-columns: 1fr minmax(300px, 380px) 1fr;
  border-radius: 40px; background: linear-gradient(180deg, rgba(20,21,30,.62), rgba(10,11,18,.72)); backdrop-filter: blur(30px) saturate(1.3); -webkit-backdrop-filter: blur(30px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 50px 140px rgba(0,0,0,.55), 0 0 calc(30px + var(--beat) * 70px) color-mix(in srgb, var(--c) calc(8% + var(--beat) * 30%), transparent);
  overflow: hidden; animation: up .9s .12s var(--ease) both; }
.dk-console::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--edge, 0deg), transparent 0 18%, color-mix(in srgb, var(--a) 80%, transparent) 25%, transparent 34% 62%, color-mix(in srgb, var(--b) 80%, transparent) 70%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: edge 12s linear infinite; opacity: .8; }
@property --edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes edge { to { --edge: 360deg; } }

/* a deck */
.dk-deck { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; padding: 28px 34px 0; min-width: 0; --dc: var(--a); animation: up .9s .22s var(--ease) both; }
.dk-deck[data-d="1"] { --dc: var(--b); animation-delay: .3s; }
.dk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(255,255,255,.58); }
.dk-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-name b { color: #fff; font-weight: 650; margin-left: 4px; }
.dk-bpm { flex: none; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--dc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--dc) 35%, transparent); font-size: 11px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--dc) 60%, #fff); }
.dk-wave { width: 100%; height: 52px; margin-top: 12px; cursor: pointer; border-radius: 12px; background: rgba(255,255,255,.025); }
.dk-stage { position: relative; display: grid; place-items: center; min-height: 0; }

/* the record: floats on a soft halo in the deck colour, pulses with the music */
.dk-plat { position: relative; width: min(29vw, 45vh, 380px); aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; transition: transform .6s var(--ease); }
.dk-plat::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--dc) 45%, transparent), transparent 62%); opacity: calc(.25 + var(--lv, 0) * .9); transform: scale(calc(.92 + var(--lv, 0) * .14)); transition: opacity .12s, transform .12s; }
.dk-deck:not(.playing) .dk-plat { transform: scale(.96); } .dk-deck:not(.playing) .dk-plat::before { opacity: .15; }
.dk-plat.touch { cursor: grabbing; transform: scale(.985); }
.dk-vinyl { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #0A0A0D; box-shadow: 0 34px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); will-change: transform; }
.dk-art { position: absolute; inset: 0; background: #15161C center/cover no-repeat; transition: filter .6s; }
.dk-deck:not(.playing) .dk-art { filter: saturate(.7) brightness(.8); }
.dk-deck.empty .dk-art { background: radial-gradient(circle, color-mix(in srgb, var(--dc) 22%, #101116), #0B0C11 70%); }
.dk-grooves { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.14) 3px 4px); mix-blend-mode: multiply; }
.dk-label { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(8,8,12,.75); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255,255,255,.1); display: grid; place-items: center; }
.dk-label i { width: 20%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc) 70%, transparent), 0 0 22px var(--dc); }
.dk-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 210deg, transparent 0 8%, rgba(255,255,255,.16) 13%, transparent 20% 58%, rgba(255,255,255,.09) 63%, transparent 70%); }
.dk-ring { position: absolute; width: calc(min(29vw, 45vh, 380px) + 50px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--spin, 0deg), transparent 0 60%, color-mix(in srgb, var(--dc) 90%, transparent) 88%, #fff 90%, transparent 91%);
  -webkit-mask: radial-gradient(circle, transparent calc(70% - 2px), #000 calc(70% - 1px) 70.5%, transparent 71%); mask: radial-gradient(circle, transparent calc(70% - 2px), #000 calc(70% - 1px) 70.5%, transparent 71%);
  opacity: calc(.35 + var(--lv, 0) * .65); animation: spin 3.2s linear infinite; animation-play-state: paused; }
.dk-deck.playing .dk-ring { animation-play-state: running; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.dk-arc { position: absolute; width: calc(min(29vw, 45vh, 380px) + 50px); aspect-ratio: 1; pointer-events: none; }
.dk-nudge { position: absolute; bottom: 3%; pointer-events: auto; font-size: 10px !important; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.4) !important; padding: 7px 11px !important; border-radius: 999px; background: var(--glass) !important; border: 1px solid var(--line) !important; transition: color .2s, background .2s; }
.dk-nudge:hover { color: #fff !important; } .dk-nudge:active { color: var(--dc) !important; background: color-mix(in srgb, var(--dc) 18%, transparent) !important; }
.dk-nudge.rev { left: 2%; } .dk-nudge.fwd { right: 2%; }
.dk-arm { display: none; }
.dk-pitch { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.dk-deck[data-d="0"] .dk-pitch { left: -14px; } .dk-deck[data-d="1"] .dk-pitch { right: -14px; }
.dk-pitch input { writing-mode: vertical-lr; direction: rtl; width: 20px; height: 140px; accent-color: var(--dc); opacity: .6; transition: opacity .3s; } .dk-pitch input:hover { opacity: 1; }
.dk-pitch small { font-size: 9px; font-weight: 800; letter-spacing: .16em; color: rgba(255,255,255,.35); }

/* play · cue · sync: soft glass pills, play glows in the deck colour */
.dk-btns { display: flex; justify-content: center; gap: 8px; margin: 0 auto 22px; }
.dk-btns button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px; min-width: 92px; padding: 0 18px; border-radius: 999px; font-size: 12px !important; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.85) !important; background: var(--glass2) !important; border: 1px solid var(--line) !important; transition: transform .15s, background .3s, box-shadow .3s, color .3s; }
.dk-btns button:hover { background: rgba(255,255,255,.13) !important; } .dk-btns button:active { transform: scale(.95); }
.dk-btns [data-act="play"] { min-width: 120px; color: #0B0B10 !important; background: linear-gradient(135deg, var(--dc), color-mix(in srgb, var(--dc) 50%, #fff)) !important; border-color: transparent !important; box-shadow: 0 10px 30px color-mix(in srgb, var(--dc) 35%, transparent); }
.dk-btns [data-act="play"].on { box-shadow: 0 0 calc(24px + var(--lv, 0) * 30px) color-mix(in srgb, var(--dc) 65%, transparent); }
.dk-btns button.on:not([data-act="play"]) { color: var(--dc) !important; background: color-mix(in srgb, var(--dc) 16%, transparent) !important; border-color: color-mix(in srgb, var(--dc) 45%, transparent) !important; }
.dk-btns .cue svg { color: #FF7A8A; } .dk-btns .sync svg { color: #FFC06A; }

/* the middle: REC · AUTOMIX · FX, playlist or pads, crossfader */
.dk-mid { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: rgba(255,255,255,.025); border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 0; animation: up .9s .26s var(--ease) both; }
.dk-mtop { display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; padding: 26px 18px 16px; }
.dk-sq { height: 52px; border-radius: 18px; background: var(--glass) !important; border: 1px solid var(--line) !important; display: grid; place-items: center; align-content: center; gap: 5px; font-size: 10px !important; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.75) !important; transition: all .3s; }
.dk-sq:hover { background: var(--glass2) !important; }
.dk-sq i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: block; order: -1; opacity: .5; } .dk-sq .fxi { font-size: 13px; line-height: 1; order: -1; }
.dk-sq.on { color: #FF6B83 !important; border-color: rgba(255,107,131,.5) !important; background: rgba(255,107,131,.12) !important; } .dk-sq.on i { opacity: 1; animation: recBlink 1.2s ease-in-out infinite; }
.dk-sq[data-act="fx"].on { color: var(--a) !important; border-color: color-mix(in srgb, var(--a) 50%, transparent) !important; background: color-mix(in srgb, var(--a) 14%, transparent) !important; }
@keyframes recBlink { 50% { opacity: .25; box-shadow: 0 0 12px currentColor; } }
.dk-auto { position: relative; height: 52px; border-radius: 18px; display: grid; place-items: center; align-content: center; gap: 6px; font-size: 11.5px !important; font-weight: 800; letter-spacing: .16em; overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, var(--a) 75%, #120C40), color-mix(in srgb, var(--b) 80%, #300)) !important; opacity: .82; transition: opacity .3s, box-shadow .3s, transform .15s; }
.dk-auto:active { transform: scale(.97); }
.dk-auto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-100%); }
.dk-auto.on::after { animation: sheen 2.4s ease-in-out infinite; }
@keyframes sheen { to { transform: translateX(100%); } }
.dk-auto i { width: 18px; height: 2px; border-radius: 2px; background: #fff; display: block; } .dk-auto.on { opacity: 1; box-shadow: 0 0 30px color-mix(in srgb, var(--b) 45%, transparent); } .dk-auto.on i { animation: autoBar 1s ease-in-out infinite; }
@keyframes autoBar { 50% { width: 42px; } }
.dk-tabs { display: flex; align-items: center; gap: 4px; margin: 0 18px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.dk-tabs button { height: 30px; padding: 0 14px !important; border-radius: 999px; font-size: 11px !important; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.45) !important; transition: all .3s; }
.dk-tabs button.on { color: #0B0B10 !important; background: #fff !important; }
.dk-vname { margin-left: auto; padding-right: 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--a); }
.dk-list { overflow-y: auto; padding: 12px 8px 12px 16px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--a) 50%, transparent) transparent; }
.dk-row { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; margin-left: -8px; border-radius: 12px; font-size: 13px; color: rgba(255,255,255,.66); cursor: pointer; transition: background .25s, color .25s, transform .25s var(--ease); animation: rowIn .5s var(--ease) both; }
.dk-row:nth-child(n) { animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes rowIn { from { opacity: 0; transform: translateX(8px); } }
.dk-row:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(2px); }
.dk-row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-row .d { font-variant-numeric: tabular-nums; width: 42px; text-align: right; font-size: 12px; opacity: .8; }
.dk-row .ab { display: none; gap: 4px; } .dk-row:hover .ab { display: flex; }
.dk-row .ab button { width: 24px; height: 24px; border-radius: 50%; font-size: 10px !important; font-weight: 800; background: rgba(255,255,255,.1) !important; transition: transform .15s; } .dk-row .ab button:active { transform: scale(.9); }
.dk-row .ab button:first-child { color: var(--a) !important; } .dk-row .ab button:last-child { color: var(--b) !important; }
.dk-row.on0, .dk-row.on1 { color: #fff; font-weight: 600; } .dk-row.on0 { background: linear-gradient(90deg, color-mix(in srgb, var(--a) 20%, transparent), transparent); } .dk-row.on1 { background: linear-gradient(90deg, color-mix(in srgb, var(--b) 20%, transparent), transparent); }
.dk-row.on0::before, .dk-row.on1::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--a); box-shadow: 0 0 10px var(--a); } .dk-row.on1::before { background: var(--b); box-shadow: 0 0 10px var(--b); }

/* FX pads: glass tiles that light up in the VYBE colour, with a ripple on hit */
.dk-pads { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 18px 14px; overflow-y: auto; align-content: start; }
.dk-mid.fx .dk-list { display: none; } .dk-mid.fx .dk-pads { display: grid; }
.dk-pad { position: relative; overflow: hidden; height: 64px; border-radius: 18px; display: grid; align-content: center; justify-items: center; gap: 3px; background: var(--glass) !important; border: 1px solid var(--line) !important; transition: transform .14s, box-shadow .25s, background .25s, border-color .25s; touch-action: none; animation: up .5s var(--ease) both; }
.dk-pad:hover { background: var(--glass2) !important; }
.dk-pad b { font-size: 12.5px; font-weight: 700; } .dk-pad small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.dk-pad::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--pc, var(--a)); opacity: 0; }
.dk-pad.hold { --pc: var(--a); } .dk-pad.shot { --pc: var(--b); } .dk-pad.tap { --pc: #FFC06A; }
.dk-pad::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 7px; height: 2px; border-radius: 2px; background: var(--pc); opacity: .55; }
.dk-pad.hit { transform: scale(.95); border-color: color-mix(in srgb, var(--pc) 60%, transparent) !important; background: color-mix(in srgb, var(--pc) 22%, transparent) !important; box-shadow: 0 0 28px color-mix(in srgb, var(--pc) 45%, transparent); }
.dk-pad.hit::before { animation: ripple .6s var(--ease); }
@keyframes ripple { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(18); } }

/* crossfader: a glass rail that fills from A to B, with a glowing round knob */
.dk-xf { position: relative; height: 80px; margin: 8px 18px 18px; border-radius: 26px; background: rgba(255,255,255,.035); border: 1px solid var(--line); cursor: ew-resize; touch-action: none; }
.dk-xf::before { content: "A"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 800; color: var(--a); }
.dk-xf::after { content: "B"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 800; color: var(--b); }
.dk-xf .ticks { position: absolute; left: 34px; right: 34px; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: linear-gradient(90deg, var(--a), color-mix(in srgb, var(--a) 30%, var(--b) 30%), var(--b)); opacity: .7; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.dk-xf .ticks i { display: none; }
.dk-xf .thumb { position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #D8D8E4 60%, #B9B9C8); box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 5px rgba(255,255,255,.08), 0 0 calc(14px + var(--beat) * 24px) color-mix(in srgb, var(--c) 60%, transparent); transition: box-shadow .15s; }

.dk-toast { position: absolute; left: 50%; bottom: 26px; z-index: 5; transform: translate(-50%, 20px); opacity: 0; padding: 12px 20px; border-radius: 999px; background: rgba(250,250,252,.95); color: #0B0B10; font-weight: 700; font-size: 13.5px; transition: all .4s var(--ease); pointer-events: none; white-space: nowrap; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.dk-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* tablets and phones: decks side by side on top, the middle below */
@media (max-width: 900px) {
  .dj { overflow-y: auto; }
  .dk-top { flex-wrap: wrap; padding: 12px 14px; gap: 10px; } .dk-vibes { max-width: 100%; width: 100%; order: 3; }
  .dk-console { width: calc(100% - 16px); height: auto; max-height: none; grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "m m"; border-radius: 30px; margin-bottom: 20px; }
  .dk-deck[data-d="0"] { grid-area: a; } .dk-deck[data-d="1"] { grid-area: b; } .dk-mid { grid-area: m; border: 0; border-top: 1px solid var(--line); }
  .dk-deck { padding: 16px 12px 0; } .dk-plat { width: min(36vw, 260px); } .dk-ring, .dk-arc { width: calc(min(36vw, 260px) + 30px); } .dk-stage { padding: 18px 0; }
  .dk-pitch { display: none; } .dk-btns { gap: 5px; margin-bottom: 14px; } .dk-btns button { height: 40px; min-width: 0; padding: 0 12px; font-size: 10.5px !important; } .dk-btns [data-act="play"] { min-width: 0; } .dk-btns button svg { display: none; }
  .dk-list { max-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) { .dj *, .dj *::before, .dj *::after { animation: none !important; } }
.dk-list.calm .dk-row { animation: none; }