/* The signal interface. Application controls remain native and keyboard accessible. */
.hero-grid {min-height:780px; grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr)}
.intro {padding-top:48px; padding-bottom:38px}
.intro h1 {font-size:clamp(72px,7.3vw,110px)}
.lede {margin-bottom:30px}
.entry-panel {max-width:460px}
.transmitter-label {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; font:10px/1.5 ui-monospace,Menlo,Consolas,monospace; letter-spacing:1.2px; color:#c4d1bb}
.transmitter-label>span {font-size:9px; letter-spacing:1px; color:#91a882}
.digital-field {position:relative; height:96px; border:1px solid #7a916c; border-radius:3px; background:linear-gradient(#102b2320,#04110bb3),#091e17; overflow:hidden; transition:border-color .2s,box-shadow .2s}
.digital-field:focus-within {border-color:var(--lime); box-shadow:0 0 0 3px #d7f49a16,0 0 28px #9cdb5720}
.digital-window {position:absolute; inset:0 45px 0 20px; display:flex; align-items:center; overflow:hidden; pointer-events:none}
.digital-display,#room-name {font:400 50px/1 "Loud Matrix",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-kerning:none; font-variant-ligatures:none; letter-spacing:0; text-transform:uppercase}
.digital-display {display:block; white-space:pre; flex:none; color:var(--lime)}
.digital-field[data-empty=true] .digital-display {opacity:.78}
#room-name {position:absolute; z-index:1; inset:0; height:100%; padding:0 45px 0 20px; border:0; border-radius:0; color:transparent!important; -webkit-text-fill-color:transparent; caret-color:var(--lime); background:transparent!important; outline:none; box-shadow:none}
#room-name::placeholder {color:transparent; -webkit-text-fill-color:transparent}
#room-name::selection {background:#d7f49a33; color:transparent}
.field-corner {position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#9bad84; font:19px/1 monospace; pointer-events:none}
.launch-button {width:100%; margin-top:10px; min-height:55px; border-radius:3px; justify-content:space-between; text-align:left; padding:15px 20px}
.launch-button>span:first-child {margin:0; font-size:14px; line-height:1.3}
.launch-button .launch-button-arrow {margin:0; font-size:25px; font-weight:400}
.identity-control {margin-top:8px; border-bottom:1px solid #becdaf22; font-size:12px; color:#b6c5b4}
.identity-control summary {display:flex; align-items:center; gap:10px; cursor:pointer; min-height:44px; list-style:none}
.identity-control summary::-webkit-details-marker {display:none}
.identity-control summary::after {content:"+"; margin-left:auto; font-size:18px; font-weight:300}
.identity-control[open] summary::after {content:"−"}
.identity-control summary>span {font-size:11px; color:#9bad95}
.identity-control input {margin:0 0 14px}
.entry-note {margin-top:12px}
.signal-art.sound-art {padding:0; margin:0; position:relative; display:block; min-height:650px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 56% 51%,#3b563218,transparent 65%)}
.signal-canvas {display:block; width:100%; height:100%; touch-action:pan-y}
.signal-art>.signal-canvas {position:absolute; inset:0}
.signal-art-label {position:absolute; z-index:1; top:45px; left:40px; right:0; display:flex; justify-content:space-between; gap:12px; font:8px/1.6 ui-monospace,Menlo,monospace; letter-spacing:1.8px; color:#a4b69a}
.signal-art-caption {position:absolute; left:40px; right:12px; bottom:47px; display:flex; justify-content:space-between; align-items:end; color:#d5ddc9; font-size:15px; line-height:1.5; letter-spacing:-.2px}
.signal-art-caption em {font:italic 25px/1.3 Georgia,serif; color:var(--paper)}
.signal-mark {font-size:32px; font-weight:300; color:var(--lime)}
.signal-room-stage.record-stage {position:relative; height:300px; display:block; background:radial-gradient(ellipse at 50% 45%,#29482d55,transparent 70%),#071b13; overflow:hidden}
.signal-room-stage .signal-canvas {position:absolute; inset:0}
.signal-room-caption {position:absolute; left:16px; right:16px; bottom:12px; font:9px/1.5 ui-monospace,Menlo,monospace; letter-spacing:1px; color:#c2d0b5; text-align:center}
.signal-room-stage .wave {width:1px; height:1px!important; margin:0; overflow:hidden}
.party-header h1 {overflow-wrap:anywhere; max-width:850px; font-size:clamp(30px,4vw,52px); line-height:1.12}

/* One bounded CRT collapse. The room connects independently of the animation. */
body.launch-running {overflow:hidden; min-height:100svh; background:#06130e}
/* Keep the outgoing screen in place while the real connection is established beneath it. */
.launch-running #welcome[hidden] {display:block!important}
.launch-running #party {display:none!important}
.launch-running .welcome-nav {display:flex!important}
.site-frame.crt-collapsing {position:fixed; left:0; width:100%; top:var(--launch-offset,0); animation:crt-collapse var(--crt-shutdown-duration,1320ms) cubic-bezier(.76,0,.24,1) both; will-change:transform,filter}
@keyframes crt-collapse {
  0% {transform:scale(1); filter:brightness(1); opacity:1}
  12% {transform:scale(1,.98); filter:brightness(1.05); opacity:1}
  39% {transform:scale(1,.003); filter:brightness(1.35); opacity:.8}
  47% {transform:scale(1,.002); filter:brightness(1.35); opacity:0}
  100% {transform:scale(.001,.001); filter:brightness(1); opacity:0}
}
.launch-overlay {position:fixed; z-index:100; inset:0; color:var(--paper); background:transparent; overflow:hidden}
.launch-overlay[data-phase=signal] {background:#06130e}
.crt-shutoff {position:absolute; inset:0; pointer-events:none}
.launch-overlay:not([data-phase=collapse]) .crt-shutoff {display:none}
.crt-shutoff::before,.crt-shutoff::after {content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; pointer-events:none}
.crt-shutoff::before {width:100%; height:2px; border-radius:2px; background:#eefbd6; box-shadow:0 0 8px #e0f5b899,0 0 20px #c9f5b144; animation:crt-line var(--crt-shutdown-duration,1320ms) ease-in-out both}
.crt-shutoff::after {width:6px; height:6px; border-radius:50%; background:#fbffef; animation:crt-point var(--crt-shutdown-duration,1320ms) ease-in-out both}
@keyframes crt-line {
  0%,30% {opacity:0; width:100%}
  39%,48% {opacity:1; width:100%}
  64% {opacity:1; width:6px}
  70%,100% {opacity:0; width:2px}
}
@keyframes crt-point {
  0%,61% {opacity:0; transform:translate(-50%,-50%) scale(.5); box-shadow:0 0 5px 1px #e3f8be33}
  65% {opacity:.8; transform:translate(-50%,-50%) scale(.75); box-shadow:0 0 8px 2px #f4ffdb99,0 0 20px 5px #d7f49a33}
  76% {opacity:1; transform:translate(-50%,-50%) scale(1.25); box-shadow:0 0 7px 3px #fbffef,0 0 23px 9px #e3f9ba99,0 0 46px 14px #c9f5b133}
  82% {opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 0 6px 2px #f6ffe3cc,0 0 19px 6px #d7f49a66,0 0 38px 10px #c9f5b122}
  100% {opacity:0; transform:translate(-50%,-50%) scale(.15); box-shadow:0 0 3px 1px #e3f8be22,0 0 10px 2px #d7f49a00}
}
.launch-stage {position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at 50% 45%,#25452c55,transparent 65%); transition:opacity .5s ease}
.launch-overlay[data-phase=signal] .launch-stage {opacity:1}
.launch-stage>.signal-canvas {position:absolute; top:0; left:10%; width:80%; height:83%}
.launch-top {position:absolute; z-index:1; top:35px; left:5%; right:5%; display:flex; align-items:center; justify-content:space-between; gap:20px}
.launch-top>.brand {font-size:24px}
.launch-top>span:last-child {font:9px/1.5 ui-monospace,Menlo,monospace; letter-spacing:1.7px; color:#9eb38c}
.launch-copy {position:absolute; left:20px; right:20px; bottom:11%; text-align:center; pointer-events:none}
.launch-eyebrow {font:10px/1.5 ui-monospace,Menlo,monospace; letter-spacing:3px; color:var(--lime); margin:0 0 13px}
.launch-copy h2 {font:500 clamp(30px,4.2vw,68px)/1.1 ui-monospace,Menlo,monospace; letter-spacing:-2px; margin:0 auto 14px; max-width:1000px; overflow-wrap:anywhere; text-transform:uppercase}
.launch-copy>p:last-child {color:#c0cfb7; font-size:14px; line-height:1.6; margin:0}
.skip-launch {position:absolute; z-index:2; bottom:25px; right:5%; min-height:44px; padding:10px 0 10px 20px; display:flex; gap:30px; align-items:center; background:transparent; color:#dce6cf; font-size:12px}
.skip-launch span {font-size:22px; color:var(--lime)}
.skip-launch:focus-visible {outline-color:var(--lime)}
@media(max-width:1100px) {
  .hero-grid {min-height:760px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .intro h1 {font-size:82px}
  .digital-display,#room-name {font-size:44px}
  .signal-art-label {left:20px; right:0; top:44px; font-size:7px; letter-spacing:1px}
  .signal-art-caption {left:20px; bottom:60px; font-size:13px}
  .signal-art-caption em {font-size:21px}
}
@media(max-width:800px) {
  .hero-grid {grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); min-height:750px}
  .intro {padding-top:38px}
  .intro h1 {font-size:71px}
  .digital-display,#room-name {font-size:44px}
  .digital-field {height:90px}
  .signal-art-caption {left:18px; right:0; bottom:70px}
  .signal-art-caption em {font-size:18px}
  .signal-art-label {left:18px; letter-spacing:.7px}
  .signal-art-label>span:last-child {display:none}
  .signal-room-stage.record-stage {height:260px}
}
@media(min-width:621px) and (max-width:700px) {
  .digital-display,#room-name {font-size:36px}
}
@media(max-width:620px) {
  .hero-grid {display:flex; min-height:0}
  .intro {padding:31px 0 0}
  .intro h1 {font-size:clamp(62px,17.3vw,98px)}
  .lede {margin-bottom:25px}
  .transmitter-label {font-size:9px; letter-spacing:1px}
  .digital-display,#room-name {font-size:40px}
  .digital-field {height:88px}
  .launch-button {min-height:54px}
  .identity-control {margin-top:5px}
  .signal-art.sound-art {width:100%; min-height:340px; height:340px; margin-top:16px}
  .signal-art-label {top:12px; left:0; font-size:7px}
  .signal-art-label>span:last-child {display:block}
  .signal-art-caption {left:0; right:0; bottom:0; font-size:12px}
  .signal-art-caption em {font-size:20px}
  .signal-mark {font-size:27px}
  .hero-foot {margin-top:24px}
  .signal-room-stage.record-stage {height:245px}
  .party-header h1 {font-size:31px; letter-spacing:-1px}
  .launch-top {top:22px; left:20px; right:20px}
  .launch-top>.brand {font-size:20px}
  .launch-top>span:last-child {font-size:7px; letter-spacing:1px}
  .launch-stage>.signal-canvas {left:-8%; width:116%; top:9%; height:65%}
  .launch-copy {bottom:16%; left:24px; right:24px}
  .launch-copy h2 {font-size:33px; letter-spacing:-1px}
  .launch-copy>p:last-child {font-size:12px}
  .launch-eyebrow {font-size:9px; letter-spacing:2px}
  .skip-launch {right:24px; bottom:22px}
}
@media(max-width:360px) {
  .intro h1 {font-size:59px}
  .digital-display,#room-name {font-size:34px}
  .digital-window {left:16px; right:28px}
  #room-name {padding-left:16px; padding-right:28px}
  .field-corner {right:10px; font-size:15px}
  .transmitter-label,.transmitter-label>span {font-size:8px}
  .signal-art.sound-art {height:305px; min-height:305px}
}
@media(prefers-reduced-motion:reduce) {.site-frame.crt-collapsing,.crt-shutoff::before,.crt-shutoff::after{animation:none!important}.launch-stage{transition:none}.digital-display{filter:none}}
@media(forced-colors:active) {
  .digital-window {display:none}
  #room-name {color:CanvasText!important; -webkit-text-fill-color:CanvasText; caret-color:CanvasText}
  #room-name::placeholder {color:GrayText; -webkit-text-fill-color:GrayText}
  #room-name::selection {background:Highlight; color:HighlightText; -webkit-text-fill-color:HighlightText}
  .digital-field {border-color:ButtonText; background:Canvas}
  .digital-field:focus-within {outline:2px solid Highlight; outline-offset:3px}
}

/* The room is the broadcast. One canvas persists from the entrance onward. */
.broadcast-stage {position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 61% 45%,#24372a50,transparent 68%),#06130e; opacity:0; transition:opacity .65s ease}
.broadcast-stage[data-visible=true] {opacity:1}
.broadcast-stage .signal-canvas {position:absolute; inset:0; width:100%; height:100%}
.broadcast-stage[data-role=host] .signal-canvas {left:250px; width:calc(100% - 250px)}
.site-frame {position:relative; z-index:1}
body.room-mode {background:#06130e; color:var(--paper)}
body.room-mode:not(.launch-running) .masthead {background:transparent; border:0; padding:24px 40px 12px; height:80px}
body.room-mode:not(.launch-running) .masthead .edition,body.room-mode:not(.launch-running) footer {display:none}
body.room-mode:not(.launch-running) .brand {font-size:22px}
body.room-mode:not(.launch-running) .brand-icon {transform:none; width:26px; gap:3px}
body.room-mode:not(.launch-running) .brand-icon i {width:3px}
.party-shell {position:relative; display:flex; flex-direction:column; max-width:1800px; min-height:calc(100svh - 80px); padding:28px 40px 28px}
.party-header {align-items:flex-start; padding:0; margin:0; gap:22px}
.party-header .eyebrow {font:10px/1.5 ui-monospace,Menlo,monospace; letter-spacing:2px; color:#b3c3a4; margin:0 0 10px}
.party-header h1 {font:400 clamp(32px,3.2vw,50px)/1.12 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-1.7px; max-width:600px; text-wrap:balance}
.party-header #leave {position:absolute; top:-55px; right:40px; color:#c7d4bf; border-color:#d5eac12b; background:#11201880; font-size:12px; padding:10px 17px; border-radius:30px}
.party-header .connection-state {margin-top:14px; font-size:12px; color:#afc0a5; gap:8px}
.party-header .connection-state::before {width:5px; height:5px; box-shadow:0 0 9px #d7f49a33}
.room-layout {display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex:1; padding-top:70px}
.host-console.player-card {flex:0 0 370px; max-width:370px; padding:24px; border:1px solid #ced6c442; border-radius:22px; overflow:hidden; background:linear-gradient(135deg,#b9c7ae20 0,transparent 40%,#cad2c414 100%),#132019d9; box-shadow:0 20px 60px #00000050,inset 0 1px 0 #ffffff14; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px)}
.host-console::after {content:""; position:absolute; height:2px; bottom:0; left:24px; right:24px; background:linear-gradient(90deg,#aabf80,var(--lime),#879c6a); box-shadow:0 0 16px #d7f49a44; pointer-events:none}
.pass-heading {display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:25px}
.pass-heading>span {font:8px/1.6 ui-monospace,Menlo,monospace; letter-spacing:1.1px; color:#b6c4ad}
.pass-chip {width:34px; height:28px; fill:none; stroke:#c5d5ac; stroke-width:.8; opacity:.8; flex:none}
.pass-access {display:flex; justify-content:space-between; align-items:end; gap:12px; padding-bottom:23px; margin-bottom:23px; border-bottom:1px solid #dce8d11c}
.pass-label {display:block; font:8px/1.6 ui-monospace,Menlo,monospace; letter-spacing:1.4px; color:#9fae96; margin-bottom:7px}
#room-code {display:block; color:#e8efda; font:400 35px/1.1 "Loud Matrix",ui-monospace,monospace; letter-spacing:1px; white-space:nowrap}
.pass-access #copy {flex:none; gap:12px; min-height:44px; border:1px solid #c8dbb13b; padding:10px 12px; background:#c8dbb10b; color:#d9e6c8; font-size:11px; border-radius:8px}
.pass-access #copy>span {font-size:17px; color:var(--lime)}
.host-console .status-badge {font:10px/1.5 ui-monospace,Menlo,monospace; color:#c5d6b6; margin-bottom:9px}
.host-console .track-info h2 {font-size:27px; line-height:1.18; letter-spacing:-.8px; font-weight:450}
.host-console .track-info p {font-size:12px; line-height:1.65; margin-top:9px; color:#b8c5af}
.host-console .progress {margin-top:20px; height:2px; background:#d7f49a22}
.host-console .times {font:10px/1.5 ui-monospace,Menlo,monospace; color:#b3c2aa; margin:9px 0 16px}
.host-console .transport {grid-template-columns:1fr 1fr; gap:8px}
.host-console .transport #play {grid-column:1/-1; font-size:13px; min-height:48px; border-radius:8px}
.host-console .transport .secondary {min-height:44px; padding:10px; font-size:12px; border-color:#c8dbb12b; border-radius:8px}
.host-console .music-picks,.host-console[data-has-track=false] .music-picks {display:grid; grid-template-columns:1fr; gap:4px; margin-top:14px; border:0; padding:0}
.host-console .upload-control,.host-console[data-has-track=false] .upload-control {display:flex; border:1px solid #c8dbb132; padding:0; border-radius:8px; min-width:0}
.host-console .upload-label {width:100%; gap:10px; padding:12px; min-height:46px; font-size:12px!important; color:#dbe8cc}
.host-console[data-has-track=false] .upload-control {background:var(--lime); border-color:transparent}
.host-console[data-has-track=false] .upload-label {color:var(--deep); font-size:13px!important; font-weight:650; min-height:50px}
.host-console #demo,.host-console[data-has-track=false] #demo {min-height:44px; background:transparent; padding:10px 4px; color:#c5d4b8; font-size:12px; font-weight:400; justify-content:space-between}
.host-console #demo>span {font-size:18px; color:var(--lime)}
.host-console .file-note,.host-console[data-has-track=false] .file-note {font-size:10px; line-height:1.75; color:#aab9a1; margin:8px 0 0}
.host-console[data-has-track=false] .track-info {margin-bottom:18px}
.pass-footer {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; color:#a3b098; font:7px/1.5 ui-monospace,Menlo,monospace; letter-spacing:1px}
.pass-barcode {width:45px; height:18px; opacity:.5; background:repeating-linear-gradient(90deg,#c6d5b7 0 1px,transparent 1px 3px,#c6d5b7 3px 5px,transparent 5px 7px,#c6d5b7 7px 8px,transparent 8px 12px)}
.phone-panel {flex:0 0 180px; width:180px; color:#c9d7bd; align-self:flex-end; border:1px solid #c8dbb125; border-radius:18px; background:#102017c2; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 10px 30px #00000020}
.phone-panel>summary {display:flex; gap:12px; align-items:center; justify-content:space-between; padding:13px 17px; min-height:48px; list-style:none; cursor:pointer; font-size:11px}
.phone-panel>summary::-webkit-details-marker,.room-details>summary::-webkit-details-marker {display:none}
.phone-panel>summary>span {font-size:25px; font-weight:300; color:var(--lime)}
.phone-panel-body {padding:4px 17px 10px}
.dial-label {display:block; text-align:center; font:9px/1.5 ui-monospace,Menlo,monospace; color:#b7c6ac; letter-spacing:.5px; margin:5px 0 12px}
.timing-dial {position:relative; width:140px; height:140px; margin:0 auto; touch-action:none; user-select:none; cursor:grab; border-radius:50%}
.timing-dial:active {cursor:grabbing}
.dial-ticks {position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from -135deg,#b5c59a99 0deg 1deg,transparent 1deg 9deg); mask:radial-gradient(circle,transparent 64%,#000 65% 69%,transparent 70%),conic-gradient(from -135deg,#000 0deg 270deg,transparent 270deg); mask-composite:intersect; -webkit-mask:radial-gradient(circle,transparent 64%,#000 65% 69%,transparent 70%)}
.dial-rotor {position:absolute; inset:16px; border-radius:50%; background:radial-gradient(circle at 35% 20%,#4a5544,#253126 43%,#121d16 75%); border:1px solid #98a38c44; box-shadow:0 8px 20px #0007,inset 0 1px 2px #e6f4ce33; transform:rotate(var(--dial-angle,0deg))}
.dial-rotor span {position:absolute; width:3px; height:12px; left:calc(50% - 1.5px); top:8px; border-radius:2px; background:var(--lime); box-shadow:0 0 8px #d7f49a40}
.timing-dial output {position:absolute; inset:0; display:grid; place-items:center; color:#e2edcf; font:400 18px/1 ui-monospace,Menlo,monospace; pointer-events:none}
#timing {position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none}
.timing-dial:focus-within {outline:2px solid var(--lime); outline-offset:5px}
.timing-control .range-labels {font-size:10px; color:#aebe9e; margin:-3px 0 0}
.timing-control .small-copy {text-align:center; font-size:10px; line-height:1.7; color:#afbea4; margin:14px 0}
.room-details {border-top:1px solid #dce8d11c; margin-top:8px}
.room-details>summary {display:flex; align-items:center; min-height:44px; padding:10px 0; font-size:10px; list-style:none; cursor:pointer; gap:8px}
.room-details>summary::after {content:'+'; margin-left:auto; font-size:18px}
.room-details[open]>summary::after {content:'−'}
.phone-panel:has(.room-details[open]) {flex-basis:280px; width:280px}
.phone-panel .small-copy,.phone-panel .lab-note {color:#b4c4aa; font-size:11px; line-height:1.7}
.phone-panel .phone-settings {margin:0; padding:10px 0; border:0}
.phone-panel .phone-settings label {font-size:11px}
.phone-panel output,.phone-panel .member-state,.phone-panel .roster-heading>span {color:#b9caaa}
.phone-panel .phone-settings input {accent-color:var(--lime)}
.phone-panel .roster-heading {margin:20px 0 10px; flex-wrap:wrap}
.phone-panel .roster-heading h2 {font-size:14px; font-weight:450}
.phone-panel .members {max-height:250px; overflow-y:auto}
.phone-panel .members li {border-color:#dce8d11c; padding:12px 0; gap:8px}
.phone-panel .avatar {width:25px; height:25px; font-size:10px; color:#d6e9bc; background:#a6c88516; border-color:#d7f49a26}
.phone-panel .member-name {font-size:11px; font-weight:400}
.phone-panel .member-state {font-size:10px}
.phone-panel .member-state.ready {color:var(--lime)}
.phone-panel .outline {border-color:#c8dbb13b; color:#d6e9bc; font-size:11px; width:100%; margin-top:8px}
.phone-panel .lab-note {margin:16px 0 0; padding:14px 0 4px; border-top:1px solid #dce8d11c}
.phone-panel .lab-note strong {color:#d6e5c7; display:block; font-weight:500}
.party-shell>.signal-room-caption {position:static; margin:22px 0 0; color:#a6b69b; font:9px/1.6 ui-monospace,Menlo,monospace; letter-spacing:1.5px; text-align:center}
#party[data-role=guest] .pass-identity,#party[data-role=guest] .pass-footer,#party[data-role=guest] .progress,#party[data-role=guest] .times {display:none}
#party[data-role=guest] .room-layout {justify-content:center; padding-top:300px; position:relative}
#party[data-role=guest] .host-console {background:linear-gradient(0deg,#06130ef5,#06130e20); backdrop-filter:none; border:0; box-shadow:none; text-align:center; flex-basis:400px; max-width:400px; padding:24px 20px 8px}
#party[data-role=guest] .host-console::after {display:none}
#party[data-role=guest] .track-info h2 {font-size:26px}
#party[data-role=guest] .track-info {margin-bottom:20px}
#party[data-role=guest] .guest-note {border:0; font-size:11px; padding:0; margin:15px 0 0}
#party[data-role=guest] .phone-panel {position:absolute; right:0; bottom:0}
#party[data-role=guest][data-audio-enabled=true] .host-console {display:none}
.room-reveal .party-header,.room-reveal .host-console,.room-reveal .phone-panel,.room-reveal .signal-room-caption {animation:room-controls-in .6s ease both}
@keyframes room-controls-in {from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}
.launch-overlay[data-phase=signal],.launch-stage {background:transparent}
.launch-overlay {transition:opacity .4s ease}
.launch-overlay[data-phase=settle] {opacity:0; pointer-events:none}
.launch-overlay[data-phase=settle] .launch-stage {opacity:1}
.launch-copy {bottom:10%; text-shadow:0 2px 30px #06130e}
body.room-mode button:disabled {background:#213126!important; color:#a4b29a!important; border-color:#b7cba22a!important}
body.room-mode :focus-visible {outline-color:var(--lime)}
body.room-mode .notice {background:#1a2c20; color:#e1edd0; border-color:#86a26b; box-shadow:0 12px 40px #0006}
body.room-mode .notice.error {background:#33251d; color:#ffdebd; border-color:#ad815a}
@media(hover:hover) {
  .party-shell .outline:hover {background:#d7f49a16; border-color:#d7f49a88; color:var(--lime)}
  .party-shell summary:hover {color:var(--lime)}
  .host-console .upload-label:hover {background:#d7f49a0d; text-decoration:none}
  .host-console[data-has-track=false] .upload-label:hover {background:#e7ffb4}
}
@media(max-width:1000px) {
  .broadcast-stage[data-role=host] .signal-canvas {left:0; width:100%; height:650px; top:20px}
  .party-shell {padding:26px 32px 28px}
  body.room-mode:not(.launch-running) .masthead {padding-left:32px; padding-right:32px}
  .party-header #leave {right:32px}
  .party-header h1 {max-width:550px; font-size:38px}
  .room-layout {padding-top:300px; align-items:flex-start}
  .host-console.player-card {flex:1; max-width:410px}
  .phone-panel {align-self:flex-start}
  #party[data-role=guest] .room-layout {align-items:flex-end}
}
@media(max-width:620px) {
  body.room-mode:not(.launch-running) .masthead {height:72px; padding:15px 20px 8px}
  body.room-mode:not(.launch-running) .brand {font-size:20px; gap:8px}
  body.room-mode:not(.launch-running) .brand-icon {width:22px}
  .party-shell {min-height:calc(100svh - 72px); padding:23px 20px 24px}
  .party-header #leave {right:20px; top:-52px; padding:9px 12px; font-size:11px}
  .party-header .eyebrow {font-size:8px; letter-spacing:1.6px; margin-bottom:10px}
  .party-header h1 {font-size:32px; max-width:100%; letter-spacing:-1px; line-height:1.12}
  .party-header .connection-state {font-size:11px; margin-top:11px}
  .broadcast-stage[data-role=host] .signal-canvas {top:110px; height:400px}
  .broadcast-stage[data-role=guest] .signal-canvas {top:40px; height:calc(100% - 100px)}
  .room-layout {display:flex; flex-direction:column; gap:18px; padding-top:245px; width:100%}
  .host-console.player-card {flex:auto; width:100%; max-width:none; padding:22px; border-radius:21px}
  .pass-heading {margin-bottom:21px}
  .pass-heading>span {font-size:7px; letter-spacing:1px}
  .pass-access {margin-bottom:21px; padding-bottom:22px}
  #room-code {font-size:34px; letter-spacing:0}
  .pass-access #copy {font-size:11px; gap:10px; padding:10px}
  .host-console .track-info h2 {font-size:27px}
  .phone-panel {width:100%; flex:auto; align-self:stretch}
  .phone-panel>summary {font-size:12px; padding:12px 19px}
  .phone-panel-body {padding:0 19px 10px}
  .timing-control {display:grid; grid-template-columns:150px 1fr; gap:0 22px; align-items:center; padding:10px 0}
  .timing-control .dial-label {grid-column:2; grid-row:1; text-align:left; font-size:10px; margin:0; align-self:end}
  .timing-dial {grid-column:1; grid-row:1/4; width:140px; height:140px}
  .timing-control .range-labels {grid-column:1; grid-row:4; margin-top:1px}
  .timing-control .small-copy {grid-column:2; grid-row:2/4; text-align:left; font-size:11px; margin:9px 0 0; align-self:start}
  .phone-panel:has(.room-details[open]) {width:100%; flex-basis:auto}
  .room-details>summary {font-size:11px}
  #party[data-role=guest] .room-layout {padding-top:235px; flex:1; justify-content:flex-end; align-items:center; gap:20px}
  #party[data-role=guest] .host-console {flex:0 0 auto; padding:16px 4px 0; width:100%; max-width:400px}
  #party[data-role=guest] .phone-panel {position:relative; width:100%; right:auto; bottom:auto}
  #party[data-role=guest][data-audio-enabled=true] .room-layout {padding-top:340px}
  .party-shell>.signal-room-caption {font-size:8px; letter-spacing:1px; margin-top:22px}
}
@media(max-width:360px) {
  .party-shell {padding-left:16px; padding-right:16px}
  .host-console.player-card {padding:19px}
  #room-code {font-size:30px}
  .pass-access {gap:8px}
  .pass-access #copy {gap:6px; font-size:10px; padding:9px}
  .timing-control {grid-template-columns:140px 1fr; gap:0 14px}
  .timing-control .small-copy {font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  .broadcast-stage,.launch-overlay {transition:none}
  .room-reveal .party-header,.room-reveal .host-console,.room-reveal .phone-panel,.room-reveal .signal-room-caption {animation:none}
}
@media(forced-colors:active) {
  .host-console.player-card,.phone-panel {background:Canvas; border:1px solid CanvasText}
  .timing-dial {border:1px solid CanvasText}
  .dial-rotor span {background:Highlight}
}
/* Compact pass proportions leave the sound sculpture fully in view. */
@media(min-width:1001px) {
  .broadcast-stage[data-role=host] .signal-canvas {left:350px; width:calc(100% - 350px)}
}
.host-console.player-card {padding:22px}
.pass-heading {margin-bottom:18px}
.pass-access {padding-bottom:18px; margin-bottom:19px}
.host-console .transport {grid-template-columns:minmax(0,1fr) auto auto; gap:6px}
.host-console .transport #play {grid-column:auto; font-size:11px; padding:11px 10px; min-height:46px}
.host-console .transport .secondary {font-size:11px; padding:10px 12px; min-height:46px}
.host-console[data-has-track=true] .music-picks {grid-template-columns:1.1fr 1fr; gap:10px}
.host-console[data-has-track=true] .upload-label {font-size:10px!important; gap:5px; padding:8px; min-height:44px}
.host-console[data-has-track=true] #demo {font-size:10px; gap:8px; padding:8px 0}
.host-console .pass-footer {margin-top:18px}
@media(max-width:360px) {
  .host-console.player-card {padding:18px}
  .host-console .transport .secondary {padding:10px 8px}
  .host-console .transport #play {padding:10px 7px; font-size:10px}
}
@media(min-width:621px) and (max-width:1000px) {
  .room-layout {flex-wrap:wrap}
  .host-console.player-card {min-width:330px}
}
.host-console #enable {margin:0 0 12px}
.room-reveal .party-header {animation:room-header-in .6s ease both}
@keyframes room-header-in {from{opacity:0}to{opacity:1}}
@media(max-width:620px) {.room-layout {padding-top:260px}}
@media(min-width:621px) and (max-width:1000px) {
  .broadcast-stage[data-role=host] .signal-canvas {height:490px; top:0}
}
#party[data-role=guest] .phone-panel {flex:0 0 auto}
/* The brand stays in the same place as the intro dissolves into the room. */
.launch-top {top:24px; left:40px; right:40px; height:44px}
.launch-top>.brand {font-size:22px}
.launch-top .brand-icon {transform:none; width:26px; gap:3px}
.launch-top .brand-icon i {width:3px}
.launch-overlay[data-phase=settle] .launch-top>span:last-child {visibility:hidden}
@media(max-width:1000px) {.launch-top {left:32px; right:32px}}
@media(max-width:620px) {
  .launch-top {top:17.5px; left:20px; right:20px}
  .launch-top>.brand {font-size:20px; gap:8px}
  .launch-top .brand-icon {width:22px}
}

/* A generous, softly drawn room heading, with status below the title. */
.party-header .room-heading {min-width:0; max-width:670px}
.party-header h1 {font-family:"Avenir Next",Avenir,ui-rounded,"Segoe UI",sans-serif; font-size:clamp(64px,6.8vw,104px); font-weight:400; line-height:.98; letter-spacing:-.065em; max-width:12ch; text-wrap:balance}
.room-meta {display:flex; flex-wrap:wrap; align-items:center; gap:9px 18px; margin-top:23px}
.party-header .eyebrow {margin:0; color:#e4ebd9; font:500 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.15px}
.party-header .connection-state {margin:0; font-size:11px; color:#b1c0a8}
@media(min-width:621px) and (max-width:1000px) {
  .party-header h1 {font-size:72px; max-width:12ch}
  .room-layout {padding-top:280px}
}
@media(max-width:620px) {
  .party-shell {padding-top:24px}
  .party-header h1 {font-size:clamp(48px,14.4vw,78px); line-height:.98; letter-spacing:-.065em; max-width:11ch}
  .room-meta {margin-top:18px; gap:5px 14px; align-items:baseline}
  .party-header .eyebrow {font-size:13px; letter-spacing:-.15px}
  .party-header .connection-state {font-size:10px}
  .room-layout {padding-top:260px}
  .broadcast-stage[data-role=host] .signal-canvas {top:110px}
}
@media(max-width:360px) {
  .party-header h1 {font-size:48px}
  .room-meta {gap:5px 12px}
  .party-header .eyebrow {font-size:12px}
}

/* The centered light sector and lime index share the same rotation. */
.dial-rotor {transform:none; overflow:hidden; border:1px solid #dce8c724; background:radial-gradient(ellipse at 22% 18%,#46563b55,transparent 65%),linear-gradient(150deg,#23372c,#10251b 60%,#09190f); box-shadow:0 8px 18px #020a0760,inset 0 1px 0 #edf2d918}
.dial-rotor::before {content:""; position:absolute; inset:0; background:conic-gradient(from 261deg at 50% 50%,transparent 0deg,#d3dfb50a 27deg,#d3dfb54d 68deg,#e8edcb80 98deg,transparent 99deg 360deg); mask-image:radial-gradient(ellipse at 24% 18%,#000 0%,#000c 34%,transparent 79%); -webkit-mask-image:radial-gradient(ellipse at 24% 18%,#000 0%,#000c 34%,transparent 79%); transform:rotate(var(--dial-angle,0deg)); transform-origin:50% 50%; pointer-events:none}
.dial-rotor::after {content:""; position:absolute; inset:0; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h128v128H0z'/%3E%3C/svg%3E"); mix-blend-mode:screen; pointer-events:none}
.dial-rotor span {z-index:1; inset:0; width:auto; height:auto; border-radius:50%; background:none; box-shadow:none; transform:rotate(var(--dial-angle,0deg))}
.dial-rotor span::after {content:""; position:absolute; top:8px; left:calc(50% - 1px); width:2px; height:10px; border-radius:1px; background:var(--lime); box-shadow:0 0 5px #d7f49a20}
.timing-dial output {inset:64px 0 auto; height:34px; color:var(--paper); font:300 24px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-1px; font-variant-numeric:tabular-nums; text-shadow:0 1px 4px #04130b80}
.dial-ticks {background:repeating-conic-gradient(from -135deg,#c3d0b380 0deg 1deg,transparent 1deg 9deg); opacity:.72; -webkit-mask:radial-gradient(circle,transparent 64%,#000 65% 69%,transparent 70%),conic-gradient(from -135deg,#000 0deg 270deg,transparent 270deg); -webkit-mask-composite:source-in; mask:radial-gradient(circle,transparent 64%,#000 65% 69%,transparent 70%),conic-gradient(from -135deg,#000 0deg 270deg,transparent 270deg); mask-composite:intersect}
.timing-dial::before {content:""; position:absolute; left:calc(50% - 1px); top:2px; width:2px; height:5px; border-radius:1px; background:#d5dfbfaa; pointer-events:none}

/* Fixed square pixels: reveal whole rows so playback never stretches the dots. */
.brand .brand-icon {transform:none; flex-shrink:0; align-items:flex-start; justify-content:flex-start}
.brand .brand-icon i {flex:none; width:3px; height:33px; border-radius:0; background:repeating-linear-gradient(to bottom,var(--lime) 0 3px,transparent 3px 5px); clip-path:inset(10px 0); --eq-peak:5px}
.brand .brand-icon i:nth-child(2) {clip-path:inset(0); --eq-peak:0px}
.brand .brand-icon i:nth-child(3) {clip-path:inset(5px 0)}
.brand .brand-icon i:nth-child(4) {clip-path:inset(15px 0)}
body[data-playing=true] .brand-icon i {animation:brand-eq-pixels .92s steps(1,end) infinite}
body[data-playing=true] .brand-icon i:nth-child(2) {animation-duration:.73s; animation-delay:-.25s}
body[data-playing=true] .brand-icon i:nth-child(3) {animation-duration:1.11s; animation-delay:-.6s}
body[data-playing=true] .brand-icon i:nth-child(4) {animation-duration:.83s; animation-delay:-.35s}
@keyframes brand-eq-pixels {
  0%,100% {clip-path:inset(15px 0)}
  21% {clip-path:inset(var(--eq-peak) 0)}
  45% {clip-path:inset(10px 0)}
  69% {clip-path:inset(5px 0)}
  86% {clip-path:inset(15px 0)}
}
@media(prefers-reduced-motion:reduce) {
  body[data-playing=true] .brand-icon i {animation:none; transform:none}
}
@media(forced-colors:active) {
  .brand .brand-icon i {forced-color-adjust:none; background:repeating-linear-gradient(to bottom,CanvasText 0 3px,transparent 3px 5px)}
  .dial-rotor {background:Canvas; border-color:CanvasText}
  .dial-rotor::before,.dial-rotor::after {display:none}
  .timing-dial::before {background:CanvasText}
  .dial-rotor span::after {background:Highlight}
  .timing-dial output {color:CanvasText; text-shadow:none}
}