:root{color:#182033;font-synthesis:none;text-rendering:optimizelegibility;--ink:#182033;--paper:#f7f8fc;--signal:#4866e8;--warm:#e85d4a;--slate:#697189;--line:#dce1ed;--display:"Avenir Next", "Nunito Sans", ui-rounded, sans-serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;background:#f7f8fc;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 12% 12%, #4866e814, transparent 34rem), var(--paper);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--warm);outline-offset:3px}.app-shell{width:min(100%,1240px);min-height:100vh;margin:0 auto;padding:20px}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:20px;display:flex}.brand{color:var(--ink);font-family:var(--display);letter-spacing:-.025em;align-items:center;gap:11px;font-size:1.08rem;font-weight:750;text-decoration:none;display:inline-flex}.brand-rings{width:28px;height:25px;display:inline-block;position:relative}.brand-rings i{border:2px solid;border-radius:50%;width:15px;height:21px;position:absolute;top:2px}.brand-rings i:first-child{left:1px}.brand-rings i:last-child{right:1px}.experimental,.kicker,.room-details,.participant-count,.join-room label{font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;font-size:.69rem}.experimental{color:var(--slate)}.release-status{border-top:1px solid var(--line);color:var(--slate);gap:7px;margin:28px 0 8px;padding:18px 0 0;display:grid}.release-status span{color:var(--warm);font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;font-size:.65rem;font-weight:700}.release-status p{max-width:54rem;margin:0;font-size:.76rem;line-height:1.55}.room-layout{gap:28px;padding:48px 0 32px;display:grid}.room-identity{color:#fff;background:var(--ink);border-radius:28px;flex-direction:column;justify-content:center;align-items:flex-start;min-height:370px;padding:38px 24px;display:flex}.kicker{color:#8da0ff;margin:0 0 14px}.room-identity h1{width:100%;font-family:var(--mono);letter-spacing:0;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;font-size:clamp(2.7rem,16vw,6.5rem);font-weight:500;display:grid}.room-identity h1 span{aspect-ratio:.78;background:#202a40;border:1px solid #3a4359;border-radius:14px;place-items:center;display:grid;box-shadow:inset 0 -5px #0000001f}.room-instruction{color:#c8cfdf;max-width:34rem;margin:24px 0 0;font-size:.95rem;line-height:1.6}.copy-button,.join-controls button,.primary-link{cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;min-height:48px;font-weight:700;text-decoration:none;display:inline-flex}.copy-button{color:var(--ink);background:#fff;margin-top:24px;padding:0 22px}.playlist-panel{border:1px solid var(--line);background:#fff;border-radius:24px;padding:24px;box-shadow:0 18px 60px #25305312}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:22px;display:flex}.panel-heading .kicker{color:var(--signal)}h2,h3{font-family:var(--display);letter-spacing:-.035em;margin:0}h2{font-size:2rem}.participant-count{color:#4053ad;white-space:nowrap;background:#edf0ff;border-radius:999px;padding:8px 10px}.empty-playlist{text-align:center;align-content:center;justify-items:center;gap:22px;min-height:245px;padding:40px 12px;display:grid}.empty-grooves{border:1px solid #cfd6e7;border-radius:50%;width:86px;height:86px;position:relative}.empty-grooves:after{background:var(--warm);content:"";border-radius:50%;position:absolute;inset:34px}.empty-grooves i{border:1px solid #dce1ed;border-radius:50%;position:absolute}.empty-grooves i:first-child{inset:8px}.empty-grooves i:nth-child(2){inset:18px}.empty-grooves i:last-child{inset:27px}.empty-playlist h3{font-size:1.35rem}.empty-playlist p{max-width:28rem;color:var(--slate);margin:9px auto 0;font-size:.9rem;line-height:1.55}.source-track{border-top:1px solid var(--line);gap:16px;padding-top:22px;display:grid}.source-track .kicker{color:var(--signal);margin-bottom:7px}.source-track-help{color:var(--slate);margin:7px 0 0;font-size:.82rem;line-height:1.5}.source-file-button{width:fit-content;min-height:46px;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #bac2d5;border-radius:999px;justify-content:center;align-items:center;padding:0 19px;font-weight:700;display:inline-flex}.source-file-button:focus-within{outline:3px solid var(--warm);outline-offset:3px}.source-file-button input{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.pending-track{background:#f1f3fa;border-radius:14px;justify-content:space-between;align-items:center;gap:14px;padding:13px 15px;display:flex}.pending-track div:not(.pending-waveform){gap:3px;min-width:0;display:grid}.pending-track strong{text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;overflow:hidden}.pending-track span{color:var(--slate);font-size:.76rem}.pending-track button{color:#8e281e;cursor:pointer;background:#ffe8e4;border:0;border-radius:999px;padding:8px 12px;font-weight:700}.pending-track-ready{color:#1d5b45;background:#eaf7f1;justify-content:flex-start}.pending-track-ready>div{flex:1}.pending-track-ready button{color:#fff;background:#2f8062}.pending-waveform{color:#2f8062;flex:none;width:112px;height:42px}.pending-waveform path{fill:none;stroke:currentColor;stroke-width:.55px}.track-rejection{color:#8e281e;background:#fff0ed;border-radius:12px;margin:0;padding:12px 14px;font-size:.82rem;line-height:1.45}.publication-failure{flex-direction:column;justify-content:space-between;align-items:stretch;gap:10px;display:flex}.publication-failure .track-rejection{flex:240px}.publication-failure-actions{flex-wrap:wrap;flex:none;justify-content:flex-start;gap:8px;display:flex}.publication-failure-actions button{border:1px solid var(--line);color:var(--slate);cursor:pointer;background:#fff;border-radius:999px;flex:none;padding:9px 13px;font-weight:700}.publication-failure-actions .retry-publication{color:#8e281e;border-color:#e4aaa2}.track-published{color:#1d5b45;background:#eaf7f1;border-radius:12px;margin:0;padding:12px 14px;font-size:.82rem}.playlist{gap:0;margin:0;padding:16px 0;list-style:none;display:grid}.playlist li{border-bottom:1px solid var(--line);grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;min-height:76px;display:grid}.track-selection{min-width:0;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:13px;padding:7px;display:grid}.track-selection:hover{background:#f6f7fc}.track-selection[aria-current=true]{background:#f1f3ff}.track-selection[aria-current=true] .published-track-mark{color:#fff;background:var(--signal)}.playlist-track-controls{grid-column:2;justify-content:flex-end;align-items:center;gap:6px;padding-bottom:10px;display:flex}.playlist-track-controls button{border:1px solid var(--line);min-width:36px;min-height:36px;color:var(--ink);cursor:pointer;background:#fff;border-radius:999px;padding:0 10px;font-size:.75rem;font-weight:700}.playlist-track-controls button:disabled{opacity:.35;cursor:default}.track-source-note{max-width:8rem;color:var(--slate);font-family:var(--mono);text-align:right;text-transform:uppercase;grid-column:2;justify-self:end;padding-bottom:10px;font-size:.62rem;line-height:1.35}.playlist-mutation-error{color:#8e281e;background:#fff0ed;border-radius:12px;margin:16px 0 0;padding:12px 14px;font-size:.82rem}.playlist li:last-child{border-bottom:0}.playlist audio{grid-column:2/-1;width:100%;height:34px;margin:-4px 0 10px}.local-volume{border-top:1px solid var(--line);color:var(--slate);grid-template-columns:auto minmax(100px,1fr) 3rem;align-items:center;gap:12px;padding:18px 0 4px;font-size:.8rem;font-weight:700;display:grid}.local-volume output{font-family:var(--mono);text-align:right}.local-volume input{min-height:44px}.track-number{color:var(--slate);font-family:var(--mono);font-size:.67rem}.published-track-mark{height:38px;color:var(--signal);background:#edf0ff;border-radius:9px;justify-content:center;align-items:center;gap:3px;display:flex}.published-track-mark i{background:currentColor;border-radius:2px;width:2px;height:30%}.published-track-mark i:nth-child(2),.published-track-mark i:nth-child(6){height:54%}.published-track-mark i:nth-child(3),.published-track-mark i:nth-child(5){height:78%}.published-track-mark i:nth-child(4){height:100%}.published-track-copy{gap:4px;min-width:0;display:grid}.published-track-copy strong{text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.published-track-copy>span{color:var(--slate);font-family:var(--mono);letter-spacing:.02em;font-size:.64rem}.playback-soundcheck{background:#f6f7fc;border:1px solid #cfd6e7;border-radius:18px;gap:14px;margin:8px 0 22px;padding:18px;display:grid;position:relative;overflow:hidden}.playback-soundcheck:before{background:var(--signal);content:"";width:4px;position:absolute;top:0;bottom:0;left:0}.playback-soundcheck-ready:before{background:#2f8062}.playback-soundcheck-failed:before{background:var(--warm)}.soundcheck-heading{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.soundcheck-heading .kicker{color:var(--signal);margin-bottom:5px}.soundcheck-signals{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.soundcheck-signals span{color:var(--slate);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:6px;font-size:.61rem;display:inline-flex}.soundcheck-signals span:before{content:"";background:#fff;border:1px solid #aeb7cb;border-radius:50%;width:7px;height:7px}.soundcheck-signals span[data-ready=true]:before{background:#2f8062;border-color:#2f8062;box-shadow:0 0 0 3px #2f80621f}.soundcheck-signals span[data-quality=degraded]{color:#8b581d}.soundcheck-signals span[data-quality=degraded]:before{background:#c47a23;border-color:#c47a23;box-shadow:0 0 0 3px #c47a2324}.soundcheck-clock-warning{color:#6f4a1e;border-left:2px solid #c47a23;margin:0;padding-left:12px;font-size:.78rem;line-height:1.45}.soundcheck-copy,.soundcheck-note,.playback-room-failure{margin:0;line-height:1.5}.shared-playback-controls{gap:14px;margin-bottom:20px;display:grid}.shared-waveform{color:var(--slate);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;gap:8px;font-size:.68rem;display:grid}.shared-waveform input{appearance:none;width:100%;height:100%;accent-color:var(--signal);cursor:pointer;background:0 0;margin:0;position:absolute;inset:0}.shared-waveform-surface{background:linear-gradient(90deg,#4866e812,#0000 70%);border:1px solid #cfd6e7;border-radius:14px;height:84px;display:block;position:relative;overflow:hidden}.shared-waveform svg{width:100%;height:100%;color:var(--signal)}.shared-waveform path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:.42px}.shared-waveform-loading{color:var(--slate);place-items:center;display:grid;position:absolute;inset:0}.shared-waveform input::-webkit-slider-runnable-track{background:0 0;height:100%}.shared-waveform input::-webkit-slider-thumb{appearance:none;background:var(--warm);border:0;border-radius:999px;width:5px;height:100%;box-shadow:0 0 0 1px #fffc}.shared-waveform input::-moz-range-track{background:0 0;height:100%}.shared-waveform input::-moz-range-thumb{background:var(--warm);border:0;border-radius:999px;width:5px;height:100%}.shared-playback-speed{color:var(--slate);align-items:center;gap:12px;font-size:.78rem;display:flex}.shared-playback-speed select{min-height:38px;color:var(--ink);background:#fff;border:1px solid #bac2d5;border-radius:10px;padding:0 28px 0 10px}.soundcheck-copy{color:var(--ink);font-size:.88rem}.soundcheck-note{color:var(--slate);font-size:.72rem}.enable-audio,.retry-preparation{color:#fff;background:var(--signal);cursor:pointer;border:0;border-radius:999px;width:fit-content;min-height:44px;padding:0 18px;font-weight:750}.retry-preparation{background:var(--warm)}.playback-soundcheck audio{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.playback-room-failure{color:#8e281e;background:#fff0ed;border-radius:12px;margin-bottom:20px;padding:12px 14px;font-size:.82rem}.room-details{color:var(--slate);text-transform:none;flex-wrap:wrap;gap:8px 24px;display:flex}.room-details span:last-child{overflow-wrap:anywhere}.join-room{border-top:1px solid var(--line);padding:22px 0 0}.join-room label{color:var(--slate);margin-bottom:10px;display:block}.join-controls{grid-template-columns:minmax(0,1fr) auto;gap:10px;display:grid}.join-controls input{width:100%;min-height:52px;color:var(--ink);font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;background:#fff;border:1px solid #bac2d5;border-radius:13px;padding:0 16px;font-size:1rem}.join-controls button,.primary-link{color:#fff;background:var(--signal);padding:0 23px}.field-error{color:#a62f21;margin:9px 0 0;font-size:.86rem}.centered-state{min-height:70vh;color:var(--slate);place-content:center;justify-items:center;display:grid}.listening-mark{border:2px solid var(--signal);width:54px;height:54px;box-shadow:18px 0 0 -2px var(--paper), 18px 0 0 0 var(--signal);border-radius:50%}.error-layout{gap:34px;padding:72px 0;display:grid}.error-card{max-width:680px}.error-card .kicker{color:var(--warm)}.error-card h1{font-family:var(--display);letter-spacing:-.06em;margin:0;font-size:clamp(2.6rem,10vw,5rem);line-height:.98}.error-card p:not(.kicker){color:var(--slate);margin:24px 0;font-size:1.05rem;line-height:1.6}@media (width>=800px){.app-shell{padding:32px 40px}.room-layout{grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr);gap:34px 46px;padding-top:68px}.publication-failure{flex-direction:row;align-items:center}.publication-failure-actions{justify-content:flex-end}.room-identity,.playlist-panel{min-height:520px}.room-identity{padding:54px 42px}.room-identity h1{gap:12px;font-size:clamp(3.3rem,6vw,5.4rem)}.playlist-panel{padding:32px}.room-details{grid-column:1}.join-room{grid-column:2}.error-layout{grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);align-items:end;padding:130px 5vw}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}}