:root {
  --bg: #07040c; --bg2: #120a1d; --panel: rgba(22, 11, 36, .82); --line: rgba(255, 255, 255, .1);
  --ink: #f8f0ff; --mute: #b6a5c8; --pink: #ff2bd6; --cyan: #22e4ff; --gold: #ffc83d;
  --k: 0; --s: 0; --hue: 0deg;
  --r: 18px; --pad: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 Outfit, system-ui, -apple-system, Segoe UI, sans-serif;
  overflow-x: hidden; padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
body::before { /* club haze */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 43, 214, .16), transparent 60%), radial-gradient(80% 50% at 100% 100%, rgba(34, 228, 255, .1), transparent 60%), var(--bg);
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2 { margin: 0; line-height: 1.1; }
[hidden] { display: none !important; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; letter-spacing: .02em; text-decoration: none; color: var(--ink); cursor: pointer; background: none; white-space: nowrap; }
.btn.sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn.gold { background: var(--gold); color: #1a0f00; box-shadow: 0 0 18px rgba(255, 200, 61, .45); }
.btn.pink { background: var(--pink); color: #fff; box-shadow: 0 0 18px rgba(255, 43, 214, .45); }
.btn.ghost { border-color: var(--line); background: rgba(255, 255, 255, .05); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn:active { transform: scale(.97); }

/* header */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--pad); padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(7, 4, 12, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; min-height: 44px; }
.logo img { width: 34px; height: 34px; border-radius: 50%; }
.logo span { font: 22px/1 Monoton, Outfit, sans-serif; color: #ffe9fb; text-shadow: 0 0 6px var(--pink), 0 0 18px var(--pink); letter-spacing: .04em; }
.top-r { display: flex; align-items: center; gap: 8px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--mute); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); }
.live.on { color: #ff6b8a; } .live.on i { background: #ff3b6b; box-shadow: 0 0 10px #ff3b6b; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* booth */
.booth { position: relative; overflow: hidden; aspect-ratio: 1 / 1; max-height: 62vh; width: 100%; isolation: isolate; background: #000; }
.booth-img, .booth-img picture { position: absolute; inset: 0; }
.booth-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity .4s linear; }
.booth-img video.on { opacity: 1; }
.booth-img video, .booth-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(calc(1.02 + var(--k) * .025)); transform-origin: 50% 60%; filter: saturate(calc(1 + var(--k) * .25)) brightness(calc(.86 + var(--k) * .18)); will-change: transform; }
.booth::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 4, 12, .1) 50%, var(--bg) 100%); pointer-events: none; }
.beams { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; opacity: calc(.25 + var(--k) * .55); filter: hue-rotate(var(--hue)); }
.beams i { position: absolute; left: 50%; top: -10%; width: 3px; height: 130%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 43, 214, .95), transparent 85%); filter: blur(1px); animation: sweep 6s ease-in-out infinite alternate; }
.beams i:nth-child(2) { background: linear-gradient(180deg, rgba(34, 228, 255, .95), transparent 85%); animation-duration: 5s; animation-delay: -1s; }
.beams i:nth-child(3) { background: linear-gradient(180deg, rgba(255, 200, 61, .9), transparent 85%); animation-duration: 7s; animation-delay: -2s; }
.beams i:nth-child(4) { animation-duration: 4.5s; animation-delay: -3s; }
.beams i:nth-child(5) { background: linear-gradient(180deg, rgba(34, 228, 255, .9), transparent 85%); animation-duration: 6.5s; animation-delay: -4s; }
.beams i:nth-child(6) { background: linear-gradient(180deg, rgba(255, 200, 61, .85), transparent 85%); animation-duration: 5.5s; animation-delay: -2.5s; }
@keyframes sweep { from { transform: rotate(-38deg); } to { transform: rotate(38deg); } }
.strobe { position: absolute; inset: 0; background: #fff; opacity: calc(var(--s) * .16); pointer-events: none; mix-blend-mode: overlay; }
.marquee { position: absolute; top: 0; left: 0; right: 0; z-index: 3; overflow: hidden; background: rgba(0, 0, 0, .55); border-bottom: 1px solid rgba(255, 43, 214, .35); font: 700 12px/26px "JetBrains Mono", monospace; letter-spacing: .14em; color: var(--gold); text-shadow: 0 0 8px rgba(255, 200, 61, .7); white-space: nowrap; }
.mq-in { display: inline-block; padding-left: 100%; animation: mq 24s linear infinite; }
@keyframes mq { to { transform: translateX(-100%); } }
.meow { position: absolute; z-index: 4; left: 58%; top: 18%; font: 900 clamp(28px, 9vw, 54px)/1 Outfit, sans-serif; color: #fff; text-shadow: 0 0 10px var(--pink), 0 0 30px var(--pink); transform: rotate(-8deg) scale(0); opacity: 0; pointer-events: none; }
.meow.pop { animation: meow 1s ease-out; }
@keyframes meow { 0% { transform: rotate(-8deg) scale(.2); opacity: 0; } 15% { transform: rotate(-8deg) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(-4deg) scale(1) translateY(-30px); opacity: 0; } }
.shout { position: absolute; z-index: 4; left: 12px; right: 12px; top: 38px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.shout div { background: rgba(10, 4, 18, .82); border: 1px solid rgba(255, 43, 214, .5); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 14px; box-shadow: 0 0 16px rgba(255, 43, 214, .35); animation: shout 4.2s ease forwards; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shout div b { color: var(--gold); }
@keyframes shout { 0% { transform: translateX(-30px); opacity: 0; } 8% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.tap { position: absolute; z-index: 5; left: 50%; bottom: 52px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px 8px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 4, 18, .78); backdrop-filter: blur(6px); cursor: pointer; box-shadow: 0 0 24px rgba(255, 43, 214, .5); text-align: left; }
.tap span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pink); font-size: 16px; padding-left: 3px; }
.tap div { white-space: nowrap; }
.tap b { display: block; font-size: 14px; letter-spacing: .1em; }
.tap small { display: block; color: var(--mute); font-size: 12px; }

/* deck */
.deck { position: relative; z-index: 6; margin: -36px 12px 0; padding: 16px; border-radius: var(--r); background: var(--panel); border: 1px solid rgba(255, 43, 214, .28); box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 43, 214, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.shared { margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 43, 214, .22), rgba(34, 228, 255, .14)); font-weight: 600; font-size: 14px; }
.shared b { color: var(--gold); }
.deck-top { display: flex; gap: 14px; align-items: center; }
.vinyl { position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle, #111 0 30%, #1b1b1b 31%, #0a0a0a 60%, #151515 61%, #050505 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .06), 0 0 calc(10px + var(--k) * 24px) rgba(255, 43, 214, calc(.25 + var(--k) * .5)); animation: spin 1.8s linear infinite; animation-play-state: paused; }
.vinyl.on { animation-play-state: running; }
.grooves { position: absolute; inset: 6px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px); }
.vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .12) 25%, transparent 32% 70%, rgba(255, 255, 255, .08) 75%, transparent 82%); }
.vinyl img { position: absolute; inset: 30%; width: 40%; height: 40%; border-radius: 50%; object-fit: cover; }
.spindle { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ddd; z-index: 2; }
@keyframes spin { to { transform: rotate(360deg); } }
.np { min-width: 0; flex: 1; }
.np-k { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .16em; color: var(--cyan); text-shadow: 0 0 8px rgba(34, 228, 255, .6); }
.np h1 { margin: 6px 0 2px; font-size: 21px; font-weight: 800; word-break: break-word; }
.np-by { color: var(--mute); font-size: 13px; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips span { font: 600 11px/1 "JetBrains Mono", monospace; padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); color: #e8dcf6; }
.chips span.hook { color: var(--gold); border-color: rgba(255, 200, 61, .4); }
.layers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 14px 0 8px; }
.layers span { text-align: center; font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .06em; padding: 7px 0; border-radius: 8px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .3); border: 1px solid transparent; transition: all .12s; }
.layers span.on { color: #fff; background: rgba(255, 43, 214, .22); border-color: rgba(255, 43, 214, .6); box-shadow: 0 0 10px rgba(255, 43, 214, .35); }
.layers span.on[data-l="hook"], .layers span.on[data-l="meow"] { background: rgba(255, 200, 61, .2); border-color: rgba(255, 200, 61, .65); box-shadow: 0 0 10px rgba(255, 200, 61, .35); }
.viz { display: block; width: 100%; height: 56px; }
.seek { display: flex; align-items: center; gap: 10px; font: 500 12px/1 "JetBrains Mono", monospace; color: var(--mute); margin-top: 6px; }
.seek input { flex: 1; min-width: 0; accent-color: var(--pink); height: 44px; }
.ctl { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 8px 0 12px; }
.ib { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); font-size: 18px; cursor: pointer; }
.play { width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--pink); font-size: 26px; cursor: pointer; box-shadow: 0 0 calc(18px + var(--k) * 22px) rgba(255, 43, 214, .7); }
.play span { display: inline-block; padding-left: 4px; }
.play.on span { padding-left: 0; }
.deck-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.deck-act .btn { flex: 1 1 140px; }

/* cta */
.cta { display: grid; grid-template-columns: 1fr; margin: 22px 12px 0; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 200, 61, .3); background: linear-gradient(160deg, rgba(255, 200, 61, .1), rgba(255, 43, 214, .08)); }
.cta img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
.cta-tx { padding: 18px; }
.k { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .16em; color: var(--gold); }
.cta h2 { font-size: 30px; font-weight: 800; margin: 8px 0 10px; }
.cta p { color: #dccdec; margin: 0 0 16px; }
.cta .btn { width: 100%; }

/* set */
.set, .floor { margin: 26px 12px 0; }
.set-h h2, .floor-h h2 { font: 26px/1.1 Monoton, Outfit, sans-serif; color: #ffe9fb; text-shadow: 0 0 8px var(--pink); font-weight: 400; letter-spacing: .03em; }
.tabs { display: flex; gap: 6px; margin: 14px 0 10px; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font-weight: 600; font-size: 14px; cursor: pointer; color: var(--mute); }
.tabs button b { font-weight: 700; color: var(--ink); margin-left: 4px; }
.tabs button[aria-selected="true"] { color: #fff; background: rgba(255, 43, 214, .2); border-color: rgba(255, 43, 214, .6); }
.remix { display: flex; gap: 8px; margin-bottom: 12px; }
.remix input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, .4); color: var(--ink); font: 500 13px "JetBrains Mono", monospace; }
.remix input:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); cursor: pointer; min-height: 64px; }
.row.cur { background: rgba(255, 43, 214, .14); border-color: rgba(255, 43, 214, .55); }
.row .cv { position: relative; flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #1a1026; }
.row .cv img { width: 100%; height: 100%; object-fit: cover; }
.row .tx { flex: 1; min-width: 0; }
.row .tt { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .ts { font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .tag { font: 700 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .1em; padding: 3px 6px; border-radius: 6px; background: rgba(255, 200, 61, .16); color: var(--gold); margin-right: 6px; }
.row .pb { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); display: grid; place-items: center; font-size: 14px; }
.row.cur .pb { background: var(--pink); border-color: var(--pink); }
.row .eq { display: none; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 10px; }
.row.cur.on .eq { display: flex; }
.eq i { width: 4px; height: 8px; background: var(--gold); border-radius: 2px; animation: eq .6s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.2s; } .eq i:nth-child(3) { animation-delay: -.4s; }
@keyframes eq { to { height: 24px; } }
.empty { padding: 18px; border-radius: 14px; border: 1px dashed rgba(255, 200, 61, .4); color: #e2d4f0; text-align: center; }
.empty .btn { margin-top: 12px; }

/* floor */
.floor-h h2 { font-size: 24px; }
.floor-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.floor-n { font: 700 13px "JetBrains Mono", monospace; color: var(--cyan); }
.floor-sub { color: var(--mute); margin: 8px 0 12px; }
.dancers { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.dancer { text-align: center; font: 500 9.5px/1.2 "JetBrains Mono", monospace; color: var(--mute); }
.dancer img { width: 46px; height: 46px; margin: 0 auto 4px; border-radius: 50%; transform: translateY(calc(var(--k) * -5px)) rotate(calc((var(--k) - .5) * var(--tilt, 8deg))); }
.dancer.new img { box-shadow: 0 0 0 2px var(--gold), 0 0 14px var(--gold); }
.ghosts { display: flex; gap: 10px; justify-content: center; padding: 18px 0; opacity: .35; }
.ghosts img { width: 40px; height: 40px; border-radius: 50%; filter: grayscale(1); }
.wall { margin-top: 18px; border-radius: 14px; background: #050208; border: 1px solid rgba(34, 228, 255, .3); padding: 12px; box-shadow: inset 0 0 30px rgba(34, 228, 255, .08); }
.wall-h { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--cyan); margin-bottom: 8px; }
.wall ol { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; font: 500 12.5px/1.45 "JetBrains Mono", monospace; }
.wall li { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); color: #d7f8ff; }
.wall li b { color: var(--gold); font-weight: 600; }
.wall li time { color: rgba(255, 255, 255, .35); margin-right: 8px; }

.foot { margin: 34px 12px 20px; display: flex; gap: 14px; align-items: center; color: var(--mute); font-size: 13px; }
.foot img { width: 84px; border-radius: 12px; flex: none; }
.foot p { margin: 0; }

/* CA bar */
.cabar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 5, 18, .94); border-top: 1px solid rgba(255, 200, 61, .35); backdrop-filter: blur(10px); }
.cabar img { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.ca-tx { min-width: 0; flex: 1; line-height: 1.2; }
.ca-tx b { font-size: 14px; color: var(--gold); }
.ca-tx code { display: block; font: 500 11.5px "JetBrains Mono", monospace; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* studio overlay */
.studio { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(4, 2, 8, .9); backdrop-filter: blur(8px); }
.st-in { width: min(440px, 100%); text-align: center; }
.st-in img { width: 100%; max-width: 300px; margin: 0 auto 14px; border-radius: 18px; box-shadow: 0 0 40px rgba(255, 43, 214, .45); animation: bob .47s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-4px) rotate(.6deg); } }
.st-k { font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--cyan); }
.st-in h2 { font-size: 24px; margin: 8px 0 14px; }
.st-in ol { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.st-in li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-weight: 600; opacity: .35; transition: opacity .2s; }
.st-in li.on { opacity: 1; } .st-in li.done { opacity: .85; }
.st-in li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pink); flex: none; }
.st-in li.done i { background: var(--pink); }
.st-in li.on i { border-top-color: transparent; animation: spin .7s linear infinite; }
.st-in li span { color: var(--gold); margin-left: auto; font: 500 12px "JetBrains Mono", monospace; }

.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 999px; background: #fff; color: #120a1d; font-weight: 700; pointer-events: none; transition: all .2s; max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* launch sheet */
.csheet { position: fixed; inset: 0; z-index: 50; background: rgba(4, 2, 8, .8); display: flex; align-items: flex-end; justify-content: center; }
.cs-in { width: min(560px, 100%); max-height: 94vh; overflow: auto; background: var(--bg2); border: 1px solid rgba(255, 43, 214, .35); border-radius: 22px 22px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.cs-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cs-h h2 { font-size: 24px; margin-top: 4px; }
.cs-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); font-size: 18px; cursor: pointer; flex: none; }
.cs-sub { color: #dccdec; margin: 8px 0 14px; }
#cs-form { display: flex; flex-direction: column; gap: 12px; }
#cs-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mute); }
#cs-form input, #cs-form textarea { min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--ink); font: 500 15px Outfit, sans-serif; }
#cs-form textarea { resize: vertical; }
#cs-form input:focus, #cs-form textarea:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.cs-row label { min-width: 0; }
#cs-form .cs-row input { width: 100%; min-width: 0; }
.cs-cover { position: relative; align-items: center; justify-content: center; min-height: 120px; border: 1px dashed rgba(255, 200, 61, .5); border-radius: 14px; cursor: pointer; overflow: hidden; text-align: center; }
.cs-cover input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cs-ph { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 22px; color: var(--gold); pointer-events: none; }
.cs-ph b { font-size: 14px; color: var(--ink); } .cs-ph small { font-size: 12px; color: var(--mute); font-weight: 500; }
.cs-cover img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; pointer-events: none; }
.cs-cover.has .cs-ph { display: none; }
.cs-more summary { cursor: pointer; color: var(--mute); font-size: 13px; font-weight: 600; min-height: 44px; }
.cs-more label { margin-top: 8px; }
.cs-note { color: var(--mute); font-size: 12.5px; margin: 0; }
.cs-wallet { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.cs-wk { font-size: 13px; color: var(--mute); margin-bottom: 8px; }
.cs-wl { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-conn { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.cs-conn i { width: 8px; height: 8px; border-radius: 50%; background: #3dff8a; box-shadow: 0 0 8px #3dff8a; }
.cs-link { background: none; border: 0; color: var(--cyan); text-decoration: underline; cursor: pointer; min-height: 44px; margin-left: auto; }
.cs-go { width: 100%; min-height: 52px; font-size: 16px; }
.cs-steps { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cs-steps div { display: flex; align-items: center; gap: 8px; color: var(--mute); }
.cs-steps div i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--mute); flex: none; }
.cs-steps .done { color: var(--ink); } .cs-steps .done i { background: var(--pink); border-color: var(--pink); }
.cs-steps .now { color: #fff; } .cs-steps .now i { border-color: var(--gold); animation: blink .8s infinite; }
.cs-steps .bad { color: #ff7a9a; } .cs-steps .bad i { border-color: #ff4d7a; }
.cs-steps .msg { display: block; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); word-break: break-word; }
.cs-steps .msg.bad { background: rgba(255, 77, 122, .12); }
.cs-steps .msg.good { background: rgba(61, 255, 138, .1); color: #b9ffd6; }
.cs-steps input { min-height: 44px; }
.cs-steps .btn { white-space: normal; text-align: center; }
.cs-steps .cs-recovery { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.csheet.busy .cs-in { cursor: progress; }

/* desktop */
@media (min-width: 900px) {
  :root { --pad: 28px; }
  main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); grid-template-areas: "booth booth" "deck set" "cta set" "floor set" "foot foot"; column-gap: 24px; max-width: 1280px; margin: 0 auto; align-items: start; }
  .booth { grid-area: booth; aspect-ratio: auto; height: min(64vh, 600px); max-height: none; border-radius: 0 0 24px 24px; }
  .booth-img img { object-position: 50% 30%; }
  .deck { grid-area: deck; margin: -70px 0 0 24px; }
  .cta { grid-area: cta; margin: 22px 0 0 24px; grid-template-columns: 220px 1fr; }
  .cta img { aspect-ratio: auto; height: 100%; }
  .cta .btn { width: auto; }
  .set { grid-area: set; margin: 24px 24px 0 0; position: sticky; top: 76px; }
  .set .list { max-height: calc(100vh - 290px); overflow: auto; padding-right: 4px; }
  .floor { grid-area: floor; margin: 26px 0 0 24px; }
  .foot { grid-area: foot; margin: 34px 24px 20px; }
  .vinyl { width: 140px; height: 140px; }
  .np h1 { font-size: 28px; }
  .csheet { align-items: center; }
  .cs-in { border-radius: 22px; }
  .shout { top: auto; bottom: 110px; left: 28px; right: auto; max-width: 50%; }
  .tap { bottom: auto; top: 46px; left: auto; right: 24px; transform: none; }
}

/* livestream: just the show */
body.stream { padding-bottom: 0; overflow: hidden; }
body.stream .top, body.stream .cta, body.stream .set, body.stream .floor .floor-sub, body.stream .foot, body.stream .deck-act, body.stream .seek, body.stream .ctl .ib, body.stream .cabar .btn { display: none !important; }
body.stream main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; max-width: none; height: calc(100dvh - 64px - env(safe-area-inset-bottom)); grid-template-rows: 52dvh auto minmax(0, 1fr); }
body.stream .booth { height: 52dvh; max-height: none; aspect-ratio: auto; border-radius: 0; grid-area: auto; }
body.stream .booth-img img { content: url(/img/hero-wide.webp); }
body.stream .deck { margin: -60px 3vw 0; padding: 12px; grid-area: auto; }
body.stream .np h1 { font-size: clamp(18px, 3vh, 32px); }
body.stream .vinyl { width: clamp(64px, 12vh, 120px); height: clamp(64px, 12vh, 120px); }
body.stream .viz { height: 36px; }
body.stream .ctl { margin: 6px 0; }
body.stream .play { width: 48px; height: 48px; }
body.stream .floor { margin: 1vh 3vw 0; grid-area: auto; overflow: hidden; }
body.stream .dancers { grid-template-columns: repeat(auto-fill, minmax(8vw, 1fr)); }
body.stream .wall { display: none; }
body.stream .cabar { position: fixed; }
body.stream .shout div { font-size: 3.4vw; }

@media (max-width: 899px) {
  .beams i:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .beams i, .mq-in, .vinyl, .eq i, .st-in img { animation: none !important; }
  .strobe { display: none; }
  .booth-img img, .booth-img video, .dancer img { transform: none !important; filter: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mq-in { padding-left: 0; }
}

/* beat pool */
.set-sub { color: var(--mute); margin: 0 0 12px; font-size: 14px; }
.row .tag.free { background: rgba(34, 228, 255, .14); color: var(--cyan); }
.bp { display: flex; flex-direction: column; gap: 8px; }
.bp-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink); margin-top: 4px; }
.bp-h span { font: 600 12px "JetBrains Mono", monospace; color: var(--cyan); }
.bp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 2px; }
.bp-b { position: relative; min-width: 0; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); text-align: left; }
.bp-b label { display: flex; flex-direction: column; gap: 2px; min-height: 72px; padding: 10px 8px 10px 52px; cursor: pointer; }
.bp-b input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bp-b:focus-within { outline: 2px solid var(--cyan); outline-offset: 1px; }
.bp-b.on { border-color: var(--gold); background: rgba(255, 200, 61, .12); box-shadow: 0 0 12px rgba(255, 200, 61, .25); }
.bp-t { font-weight: 700; font-size: 14px; line-height: 1.2; }
.bp-b small { color: var(--mute); font-size: 11.5px; }
.bp-play { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--pink); font-size: 12px; padding-left: 2px; cursor: pointer; }
.cam-retry { position: absolute; z-index: 5; top: 38px; left: 12px; background: rgba(10, 4, 18, .9) !important; }
@media (min-width: 560px) { .bp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }