@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;900&family=Space+Mono&display=swap');
:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#171a20;color:#f4e9cc;font-family:'Space Mono',monospace;font-size:13px;background-image:radial-gradient(#43434a 1px,transparent 1px);background-size:8px 8px}main{max-width:1080px;padding:25px;margin:auto}header{display:flex;justify-content:space-between;gap:12px;padding-bottom:35px}a{color:#f3bd67}h1{font:900 clamp(50px,10vw,112px)/.9 'Barlow Condensed',sans-serif;letter-spacing:-2px;margin:8px 0;color:#f9d989}h2{font:700 34px 'Barlow Condensed',sans-serif}.eyebrow{letter-spacing:4px;color:#ef8760}.intro{margin:18px 0 60px}.box{position:relative;background:linear-gradient(145deg,#aeb8bd,#7a838d 50%,#bec4c7);border:6px solid #07090c;border-radius:12px;padding:18px;color:#11141b;box-shadow:0 20px 40px #0009,inset 0 0 0 2px #e3e4e5}.handle{position:absolute;top:-42px;left:18%;width:64%;height:40px;border:10px solid #7f8a96;border-bottom:0;border-radius:12px 12px 0 0}.tuner{padding:12px;display:flex;gap:18px;justify-content:space-between;background:repeating-linear-gradient(90deg,#232933 0 9px,#a9a386 10px 11px);border:5px solid #606a71;color:#efb96b;text-shadow:0 1px 3px #000}.tuner span,.tuner b{background:#24272c;padding:4px}.hardware{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:18px;padding:20px 0}.speaker{aspect-ratio:1;background:repeating-radial-gradient(circle,#16191c 0 3px,#30343a 4px 6px);border-radius:50%;border:12px solid #30383f;box-shadow:0 0 0 4px #626e77,inset 0 0 20px #000}.deck{background:#262b30;border:5px solid #606b70;padding:12px;color:#e8dabe;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:12px}.cassette{background:linear-gradient(#ddc39a 60%,#dc714c 60%);border:8px solid #10171c;border-radius:8px;color:#20242a;padding:10px;overflow:hidden}.cassette strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reels{display:flex;align-items:center;justify-content:space-between;background:#262b31;border-radius:30px;color:#d3c3a4;margin:12px 0;padding:3px 8px}.reels i{font-size:33px;font-style:normal}.recording .reels i{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}progress{width:100%;height:9px;accent-color:#eb8a48}.transport{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}button,input,select{font:inherit}button{cursor:pointer;padding:12px 15px;background:#d8d8ca;color:#14181e;border:2px solid #171b20;box-shadow:0 4px #292f38;border-radius:4px;font-weight:bold}button.red{background:#ca503f;color:white}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #f6ba57;outline-offset:4px}#status{min-height:45px;color:#f5ba61;padding:10px 0}.controls{display:grid;grid-template-columns:1fr 1fr;gap:32px;background:#20252ce8;border:1px solid #5b6265;padding:24px}.controls label{display:block}select,input:not([type=range]):not([type=file]){padding:12px;width:100%;background:#111820;border:1px solid #5d6973;color:#f0e2c5;margin:10px 0}.sliders{display:flex;gap:16px;margin:12px 0}.sliders label{width:50%}.sliders input{width:100%;accent-color:#efbd71}.upload{margin:20px 0}.upload input{width:100%;margin-top:12px}.room{padding:24px 0}.room #code{width:140px}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px 0}.roster span{padding:18px;background:#262c34;border-top:4px solid #c6935b}#wall{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-bottom:18px solid #774d35;padding:15px 0 30px}.tape-card{background:#ddbb7b;border:8px solid #292c32;border-radius:8px;color:#1c222a;padding:14px;box-shadow:0 8px 12px #0007;min-width:0}.tape-card h3{margin:0;overflow-wrap:anywhere}.tape-card p{font-size:11px}.tape-card .holes{font-size:30px;text-align:center;background:#252930;color:#cfbc9a;border-radius:25px;margin:12px 0}.tape-card button{padding:8px}.tape-card a{color:#292326;display:inline-block;margin:10px}#tapePlayer{width:100%;margin:20px 0}footer{border-top:1px solid #53565c;margin-top:40px;padding:22px 0;font-size:11px}@media(max-width:650px){main{padding:16px}header{font-size:10px}.hardware{gap:8px}.speaker{border-width:5px}.deck{padding:5px;border-width:3px;font-size:8px}.cassette{padding:5px;border-width:4px}.reels{margin:7px 0}.reels i{font-size:20px}.reels span{font-size:7px}.tuner{padding:4px;font-size:9px;gap:3px}.box{padding:10px}.transport button{font-size:10px;padding:10px}.controls{grid-template-columns:1fr;padding:16px}.roster{grid-template-columns:1fr 1fr}#wall{grid-template-columns:1fr 1fr;gap:10px}.tape-card{padding:8px}.tape-card h3{font-size:12px}}@media(prefers-reduced-motion:reduce){.recording .reels i{animation:none}}
.beat-help,.mic-options p{font-size:11px;line-height:1.8;color:#cfbca8}.own-beat-wall{display:grid;gap:8px;margin-top:18px;max-height:300px;overflow:auto;font-size:11px}.own-beat-wall>div{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #6f6152;background:#111821}.own-beat-wall span{flex:1;min-width:0;overflow-wrap:anywhere}.own-beat-wall button{font-size:10px;padding:7px 10px;box-shadow:none}.own-beat-wall a{white-space:nowrap;font-size:10px}.mic-options{border-block:1px solid #756958;padding:18px 0;margin:20px 0}.mic-choice{display:flex!important;align-items:center;gap:12px}.mic-choice input{width:20px!important;height:20px;margin:0!important;accent-color:#f3bd67}.mic-options #micStatus{font-size:10px;color:#f3bd67}#enableMic,#saveBeat{min-height:44px}.mic-options label[for=micDevice]{margin-top:18px}
[hidden]{display:none!important}.studio-tabs{display:flex;gap:8px;border-bottom:1px solid #8e9c7c55;padding-bottom:14px;margin:-30px 0 38px}.studio-tabs button{background:#1e2b23;color:#bfcbbb;border-color:#78886c66;min-height:48px;padding-inline:24px;box-shadow:inset 0 1px 1px #ffffff20}.studio-tabs button[aria-selected=true]{background:linear-gradient(#dfe5d333,#aac2b922),url('/materials/aluminum-color.webp') center/240px;color:#f3f3df;border-color:#d0d8b788}.studio-tabs .room-live:after{content:' • LIVE';color:#b3ecb0;font-size:9px}.speed-control{display:grid;grid-template-columns:80px minmax(0,1fr);gap:20px;align-items:center;margin:22px 0;padding:18px 0;border-block:1px solid #8e9c7c44}.speed-control label{display:flex!important;justify-content:space-between;gap:10px}.speed-control output{font-weight:bold;color:#e5d4a5}.speed-control input{width:100%;accent-color:#d9d5ab;margin:16px 0 10px}.speed-control p{font-size:10px;line-height:1.7;color:#b7bcab;margin-bottom:0}.speed-dial{--dial-angle:0deg;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#ffffff18 0 57%,#283b2c 59% 62%,#a2b196 64% 67%,#101910 70%),url('/materials/aluminum-color.webp') center/120px;border:1px solid #b8c4ae;box-shadow:inset 0 2px 1px #fff5,inset 0 -3px 5px #0008,0 6px 10px #0008;position:relative;cursor:ns-resize;touch-action:none}.speed-dial i{position:absolute;inset:12px;transform:rotate(var(--dial-angle));pointer-events:none}.speed-dial i:before{content:'';position:absolute;top:0;left:calc(50% - 2px);width:4px;height:15px;border-radius:2px;background:#112417;box-shadow:1px 0 0 #ffffff80}.speed-dial.locked{opacity:.55;cursor:default}.speed-scale{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:8px;color:#bac5ac}.speed-scale button{font-size:9px;padding:6px 10px;box-shadow:none;border-color:#78886c88;background:#2c3a2e;color:#e5e6d3}.stage-controls{background:linear-gradient(#142218df,#0b1718df),url('/materials/leather-color.webp') center/300px;padding:24px;border:1px solid #8e9c7c55;border-radius:8px}.stage-settings{display:grid;grid-template-columns:2fr 1fr;gap:20px}.stage-settings label{font-size:11px;color:#bfcbbb}.stage-banner{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:18px 0}.stage-banner h2{margin:5px 0;font-size:36px}.stage-banner p:not(.eyebrow){font-size:11px;color:#b9c6b0;line-height:1.7}.stage-banner>strong{font:700 38px 'Barlow Condensed',sans-serif;color:#dbe1b7;font-variant-numeric:tabular-nums}.stage-controls button{background:#bdcdb2;color:#152819}.stage-controls select{margin-bottom:0!important}#videoGrid.has-spotlight{grid-template-columns:repeat(3,minmax(0,1fr))}#videoGrid .on-stage{grid-column:1/-1;order:-1;aspect-ratio:16/8;border-color:#c0d7ab;box-shadow:0 0 24px #98d19740}#videoGrid .on-stage span{font-size:13px;border-left-color:#dddcaa;background:#07130eeb}#multiplayerPanel>.room{padding-top:0}#multiplayerPanel #studioControls{margin-top:75px}.video-room{margin-bottom:30px}
@media(max-width:650px){.studio-tabs{margin-top:-32px;margin-bottom:35px}.studio-tabs button{flex:1;padding-inline:12px;font-size:12px}.speed-control{grid-template-columns:62px minmax(0,1fr);gap:14px}.speed-dial{width:62px;height:62px}.speed-dial i{inset:10px}.speed-control p{font-size:9px}.stage-controls{padding:16px}.stage-settings{grid-template-columns:1fr;gap:10px}.stage-banner h2{font-size:28px}.stage-banner>strong{font-size:32px}.stage-banner p:not(.eyebrow){font-size:10px}#videoGrid .on-stage{aspect-ratio:4/3}#videoGrid .on-stage span{font-size:10px}#multiplayerPanel #studioControls{margin-top:60px}}
/* A guided circle, with photographic hoodie identities. */
.crew-room{display:block!important}.crew-room h2{font-size:clamp(32px,7vw,58px);margin-top:8px}.join-steps{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:18px;margin:26px 0}.join-step{border:1px solid #64867466;padding:18px;border-radius:14px;background:#091b17cc}.join-step h3{font-size:18px;margin:0 0 12px}.join-step h3 b{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:5px;background:#d2eea1;color:#122319;border-radius:50%}.join-step p{font-size:13px;line-height:1.6}.join-actions{display:grid;gap:14px}.join-actions>div+div{border-top:1px solid #6d877c55;padding-top:14px}.join-step button{font-size:14px;min-height:44px}.hoodie-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.hoodie-option{padding:4px!important;color:#ecf5e9!important;min-width:0;background:#11221e!important;box-shadow:none!important;border:2px solid transparent!important}.hoodie-option[aria-pressed=true]{border-color:#d5f2a9!important}.hoodie-option>span:last-child{font-size:10px;display:block}.hoodie-portrait{aspect-ratio:1;display:block;background-image:url('/boombox-assets/hoodie-circle.webp');background-size:200% 200%;border-radius:12px;overflow:hidden}.hoodie-0{background-position:0 0}.hoodie-1{background-position:100% 0}.hoodie-2{background-position:0 100%}.hoodie-3{background-position:100% 100%}.invite-bar{padding:16px 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.invite-bar>p{flex-basis:100%}.rap-circle{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,4vw,40px);max-width:600px;margin:30px auto;border-radius:50%;padding:24px;background:radial-gradient(ellipse,#1e604744,transparent 65%),url('/materials/dark-wood.webp') center/cover}.circle-mc{position:relative;border:1px solid #71877b80;background:#0c191af5;padding:12px;border-radius:20px;min-width:0;text-align:center;box-shadow:0 10px 24px #0007}.circle-mc h3{font-size:16px;margin:10px 0 5px}.circle-mc p{font-size:12px;color:#d4dccf;margin:0;min-height:32px}.circle-mc.ready{border-color:#abdf89;box-shadow:0 0 20px #6cde6220}.circle-mc.current-mc:before{content:'ON STAGE';position:absolute;top:8px;left:8px;background:#d4f0a5;color:#182917;border-radius:20px;font-size:10px;padding:5px 8px;z-index:1}.circle-mc.empty{opacity:.4}.crew-status{font-size:18px!important;font-weight:600;color:#d2f0ab;text-align:center}.crew-room .roster{font-size:11px}.crew-room #network{font-size:12px}.transport{flex-wrap:wrap}#savePhone{background:#bedbaa;color:#142818}#voiceMeter{display:block;width:100%;height:16px;accent-color:#bde89b;margin-top:14px}#voiceCheck{min-height:42px}.tape-card button{margin-top:10px;min-height:44px}.phone-save-help{font-size:12px;color:#cbd5c7}#joinSetup.joined{opacity:.65}.join-step input{text-transform:uppercase;font-size:20px;letter-spacing:.16em}#inviteLink{text-transform:none;letter-spacing:0;font-size:13px}#readyCrew{background:#cceca1;color:#162817}.recording #savePhone:disabled{opacity:.4}
@media(max-width:900px){.join-steps{grid-template-columns:1fr}.hoodie-picker{max-width:420px}.hoodie-option>span:last-child{font-size:12px}.join-actions{grid-template-columns:1fr 1fr}.join-actions>div+div{border-top:0;padding-top:0}.rap-circle{padding:12px}.circle-mc h3{font-size:14px}.circle-mc p{font-size:11px}}@media(max-width:480px){.join-actions{grid-template-columns:1fr}.join-actions>div+div{border-top:1px solid #6d877c55;padding-top:14px}.join-step{padding:14px}.rap-circle{gap:12px}.invite-bar strong{font-size:23px}.transport button{flex:1 1 42%}}
.advanced-control{margin:20px 0;padding:14px;border:1px solid #526e5b;border-radius:10px}.advanced-control summary{cursor:pointer;font-size:13px;font-weight:600;min-height:28px;color:#cde4af}.advanced-control[open] summary{margin-bottom:20px}.video-tile{background-image:url('/boombox-assets/hoodie-circle.webp')!important;background-size:200% 200%!important}.video-tile video{opacity:0}.video-tile.live video{opacity:1}.video-tile:before{z-index:1;align-items:end!important;padding-bottom:45px;background:linear-gradient(transparent 60%,#0009);color:white!important}.video-tile span{z-index:2}.join-step #crewMicTest{margin-bottom:10px}
#studioControls .transport{display:flex;flex-wrap:wrap;gap:8px}.video-tile.hoodie-0{background-position:0 0!important}.video-tile.hoodie-1{background-position:100% 0!important}.video-tile.hoodie-2{background-position:0 100%!important}.video-tile.hoodie-3{background-position:100% 100%!important}
.hear-check{margin:18px 0;padding-top:16px;border-top:1px solid #60806e66}.hear-check h4{font-size:17px;margin:0 0 10px}.hear-check label{display:flex;gap:10px;align-items:center;font-size:14px;padding:12px 0;cursor:pointer}.hear-check input{width:20px;height:20px;accent-color:#c4eba3}.count-in{font:700 clamp(36px,7vw,68px) 'Barlow Condensed',sans-serif;padding:15px;color:#d3f8a7;min-width:130px;text-align:center;border:1px solid #9bce7766;border-radius:15px;background:#091b13;box-shadow:0 0 30px #8ae56625}.stage-settings{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-settings input{width:100%;font-size:18px}.stage-settings small{display:block;line-height:1.6;font-size:11px}.hear-check button,#reconnectCrew{min-height:46px;width:100%}#reconnectStatus{font-size:13px;min-height:24px}@media(max-width:600px){.stage-settings{grid-template-columns:1fr}.stage-banner{flex-wrap:wrap}.count-in{flex-basis:100%;order:-1}}
/* One compact live session: performer, queue, chat, controls. */
.circle-chat,.stage-controls{border:1px solid #8b6fb64d;border-radius:20px;background:linear-gradient(140deg,#24182dec,#12141be8);padding:22px;margin:16px 0;box-shadow:0 18px 60px #0005}.chat-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.chat-heading h2{font-size:1.2rem;margin:0}.chat-heading span{font-size:.8rem;color:#c8b7da}.chat-log{height:150px;overflow:auto;margin:14px 0;padding:8px 12px;border-radius:12px;background:#07070d80;overflow-wrap:anywhere}.chat-log:empty:before{content:'Say hello. Plan your verse. Hype up your friends.';color:#a9a0b9;font-size:.9rem}.chat-log p{margin:7px 0;line-height:1.5}.chat-log strong{color:#9ce5d5}#chatForm{display:flex;gap:8px}#chatMessage{flex:1;min-width:0;margin:0}#chatSend{margin:0}#chatStatus{font-size:.78rem;color:#b8afc7;margin:8px 0 0}.next-mc{color:#b6f7e1;font-weight:700;font-size:1.05rem;margin:8px 0}.rap-settings>summary,.circle-setup>summary,.circle-tools>summary{cursor:pointer;padding:14px 4px;font-weight:700;color:#ddc9f3;min-height:44px}.rap-settings .stage-settings{margin-top:12px}.stage-banner h2{font-size:clamp(1.5rem,5vw,2.5rem)}.stage-controls .video-room{margin:12px 0;padding:0;border:0;background:none}.stage-controls .rap-circle{margin:12px 0}.stage-controls .transport{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}.stage-controls .transport button{flex:1;min-width:100px}.circle-tools{margin:12px 0;border-top:1px solid #514562;padding:8px}.circle-setup{border-top:1px solid #514562}.circle-joined .crew-room>.eyebrow,.circle-joined .crew-room>h2{display:none}.circle-joined .crew-room{padding:14px}.multiplayer-view .scanned-recorder{display:none}.multiplayer-view .controls{margin-top:12px}.multiplayer-view #roster{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.stage-controls #stageClock{color:#b6f7e1;font-size:2rem}.stage-controls #videoGrid:empty{display:none}@media(max-width:600px){.stage-controls,.circle-chat{padding:16px}.chat-heading{display:block}.chat-heading span{display:block;margin-top:4px}.chat-log{height:135px}.stage-controls .rap-circle{gap:6px}.stage-controls .circle-mc{padding:8px}.stage-controls .circle-mc h3{font-size:.8rem}.stage-controls .circle-mc p{font-size:.72rem}}
.stage-controls #videoGrid:not(:has(.live)){display:none}.stage-controls:has(#videoGrid .live) #rapCircle{display:none}
.multiplayer-view:not(.circle-joined) .stage-controls,.multiplayer-view:not(.circle-joined) .circle-chat{display:none}
.recording-drawer{margin:22px 0;border-top:1px solid #514562}.recording-drawer>summary,footer summary{cursor:pointer;padding:16px 0;font-weight:700}.circle-joined main>h1,.circle-joined main>.intro,.circle-joined main>.eyebrow{display:none}.circle-joined .studio-tabs{margin:12px 0}.circle-joined #multiplayerPanel:not([hidden]){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}.circle-joined .stage-controls,.circle-joined .circle-chat{margin:0}.circle-joined .crew-room,.circle-joined .circle-tools{grid-column:1/-1}.circle-joined .chat-log{height:300px}.circle-joined .rap-circle{grid-template-columns:repeat(4,minmax(0,1fr));padding:10px;min-height:0}.circle-joined .hoodie-portrait{max-height:90px}.circle-joined .circle-mc h3{font-size:.8rem}.circle-joined .circle-mc p{font-size:.72rem}@media(max-width:700px){.circle-joined #multiplayerPanel:not([hidden]){grid-template-columns:minmax(0,1fr);gap:12px}.circle-joined .crew-room,.circle-joined .circle-tools{grid-column:1}.circle-joined .chat-log{height:135px}.circle-joined .rap-circle{padding:8px;gap:4px}.circle-joined .circle-mc{padding:4px}.circle-joined .hoodie-portrait{height:70px}.circle-joined .circle-mc p{font-size:.65rem}.circle-joined .circle-mc h3{font-size:.7rem}.stage-controls .transport button{min-width:75px;font-size:.72rem;padding:10px 6px}.stage-controls .video-room p{font-size:.75rem}}
.circle-joined .stage-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 0}.circle-joined .stage-banner .eyebrow{display:none}.circle-joined .video-room:not(:has(.live)){display:none}.circle-joined .stage-controls #status{margin-bottom:0;font-size:.8rem;min-height:0;padding-bottom:0}.circle-joined .circle-mc.current-mc:before{font-size:7px;padding:4px;top:4px;left:4px}@media(max-width:700px){.circle-joined .stage-banner h2{font-size:1.4rem}.circle-joined .stage-banner p{margin:6px 0}.circle-joined .hoodie-portrait{height:58px}.circle-joined .circle-mc h3{margin:5px 0}.circle-joined .stage-controls .rap-circle{margin:10px 0}.circle-joined .chat-log{height:110px}.circle-joined #multiplayerPanel #studioControls{margin-top:12px}}