:root{color:#e8e6df;background:#121411;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}.page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 42%),#121411}.page-content{width:min(680px,100%)}.panel{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:24px;background:#1b1f1a;box-shadow:0 18px 60px #00000059}.header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:24px;flex-wrap:wrap}.header>div{min-width:0}.room-logo{width:68px;height:68px;object-fit:contain;flex:0 0 auto;margin-left:auto}.eyebrow,.label{margin:0 0 6px;color:#9ca78f;font-size:12px;font-weight:700;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:34px;line-height:1.05}h2{margin-bottom:6px;font-size:20px}code{color:#f2c36b}.muted{color:#b9b8ae}.join-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:12px;align-items:end;margin-bottom:18px}.join-row-simple{grid-template-columns:minmax(0,1fr) auto}label{display:grid;gap:8px;color:#c8c5b8;font-size:13px}input{min-width:0;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:0 12px;color:#f2f0e8;background:#111310}input[type=range]{height:24px;padding:0;accent-color:#f2c36b}input:disabled{color:#8b8a82;cursor:not-allowed}button{min-height:42px;border:0;border-radius:6px;padding:0 16px;color:#14140f;background:#f2c36b;font-weight:700;cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}button:hover{background:#ffd783}a{color:#f2c36b}.secondary-button{border:1px solid rgba(255,255,255,.16);color:#f2f0e8;background:#ffffff0f}.secondary-button:hover{background:#ffffff1f}.status-message{margin:-4px 0 18px;border:1px solid rgba(242,195,107,.35);border-radius:6px;padding:10px 12px;color:#f2d9a6;background:#f2c36b14;font-size:14px}.download-callout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:16px;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:12px;background:#ffffff09}.download-callout p{display:grid;gap:3px;margin:0;color:#d8d4c7;font-size:14px}.download-callout strong{color:#f2f0e8}.download-callout a{min-height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:0 14px;color:#14140f;background:#f2c36b;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}.download-callout a:hover{background:#ffd783}.player{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:16px;background:#151815}.player-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}.player-status{min-width:0}.disconnect-button{min-height:36px;padding:0 12px}.volume-control{display:grid;grid-column:1 / -1;grid-template-columns:auto minmax(140px,1fr);gap:12px;align-items:center;margin-top:12px}.volume-control label{gap:4px}.volume-control input[type=range]{display:block;width:100%}.meter{width:72px;height:58px;display:flex;gap:6px;align-items:center;justify-content:center}.meter span{width:7px;height:18px;border-radius:999px;background:#f2c36b;opacity:.65}.meter span:nth-child(2){height:34px}.meter span:nth-child(3){height:48px}.meter span:nth-child(4){height:28px}.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.details>div{border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:12px;background:#ffffff08}.details strong{display:block;overflow-wrap:anywhere}.free-room-note{display:grid;gap:8px}.free-room-note p{margin:0;color:#d8d4c7;font-size:13px}.tag{width:fit-content;border:1px solid rgba(242,195,107,.35);border-radius:999px;padding:3px 8px;color:#f2c36b;background:#f2c36b1a;font-size:12px;font-weight:700}.detail-toggle{width:100%;min-height:0;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:0;color:inherit;background:transparent;text-align:left}.detail-toggle:hover{background:transparent}.toggle-mark{color:#f2c36b;font-size:12px;font-weight:700}.guest-list{display:grid;gap:4px;margin:10px 0 0;padding:0;list-style:none;color:#d8d4c7;font-size:13px}.log{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.log-entries{max-height:150px;overflow-y:auto}.log p,.chat p{margin-bottom:6px;color:#d8d4c7;font-size:13px}.log span{color:#9ca78f}.chat{margin-top:16px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.chat-messages{max-height:190px;overflow-y:auto;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px;background:#ffffff06}.chat-messages p{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;align-items:baseline;overflow-wrap:anywhere}.chat-messages span{color:#9ca78f;font-size:12px}.chat-messages strong{color:#f2c36b}.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:10px}.room-footer{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;color:#9ca78f;font-size:12px}.room-footer a{color:#9ca78f;text-decoration:none}.room-footer a:hover{color:#f2c36b;text-decoration:underline}@media(max-width:560px){.page{padding:12px}.panel{padding:18px}.join-row,.chat-form,.volume-control,.player,.player-main,.download-callout,.details{grid-template-columns:1fr}.download-callout{grid-template-columns:minmax(0,1fr) auto;align-items:stretch}.download-callout a{grid-column:1 / -1}h1{font-size:28px}}.control-panel{margin-top:16px;border:1px solid rgba(242,195,107,.28);border-radius:8px;padding:16px;background:#f2c36b0a}.control-head,.control-section-head{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}.control-head{justify-content:space-between;margin-bottom:12px}.control-panel h2,.control-panel h3{margin:0}.control-panel h2{font-size:18px}.control-panel h3{min-width:78px;font-size:14px}.control-library{display:grid;gap:4px;margin-bottom:14px}.control-library select{min-height:42px;border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:0 10px;color:#f2f0e8;background:#111310;font:inherit}.control-section{border-top:1px solid rgba(255,255,255,.1);padding:12px 0 4px}.control-buttons{display:flex;gap:6px}.control-buttons button{min-width:44px;padding:0 10px}.control-volume{display:grid;flex:1 1 160px;gap:2px;min-width:140px;color:#d8d4c7;font-size:13px}.control-volume input[type=range]{width:100%;min-height:32px;accent-color:#f2c36b}.control-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.control-chips .muted{margin:0}button.control-chip{--chip: #f2c36b;min-height:40px;border:1px solid color-mix(in srgb,var(--chip) 55%,transparent);padding:0 12px;color:#f2f0e8;background:#ffffff0d;font-weight:600}button.control-chip:hover{background:color-mix(in srgb,var(--chip) 18%,transparent)}button.control-chip.on{color:#14140f;background:var(--chip)}button.control-chip.on .control-icon{filter:brightness(0);opacity:.85}.control-toast{margin:0 0 12px;border:1px solid rgba(240,120,110,.4);border-radius:6px;padding:8px 12px;color:#f4b8b1;background:#f0786e1a;font-size:14px}@media(max-width:560px){.control-panel{padding:12px}.control-section-head h3{min-width:64px}.control-volume{flex-basis:100%}}.control-icon{width:20px;height:20px;flex:0 0 auto;object-fit:contain}button.control-chip{display:inline-flex;gap:6px;align-items:center}.control-echoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:10px 0}.control-echoes .muted{margin:0;grid-column:1 / -1}button.control-echo{--chip: transparent;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:flex-start;min-height:72px;border:1px solid rgba(255,255,255,.12);border-bottom:3px solid var(--chip);padding:8px 4px;color:#f2f0e8;background:#ffffff0d;font-size:12px;font-weight:600;line-height:1.15}button.control-echo:hover{background:#ffffff1f}button.control-echo .control-icon{width:36px;height:36px}button.control-echo span{text-align:center;overflow-wrap:anywhere}.echo-fill{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;clip-path:inset(0);animation:echo-wipe .2s ease-in var(--wipe-delay, 0ms) forwards}.echo-fill:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff0d;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chip, #f2c36b) 60%,transparent)}.echo-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--chip, #f2c36b) 50%,transparent);clip-path:inset(0 100% 0 0);animation:echo-fill var(--dur, 1s) linear var(--elapsed, 0ms) forwards}@keyframes echo-fill{to{clip-path:inset(0)}}@keyframes echo-wipe{0%{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}button.control-echo>:not(.echo-fill){position:relative}button.control-echo.pressed{background:color-mix(in srgb,var(--chip, #f2c36b) 35%,transparent);transform:scale(.97)}@media(prefers-reduced-motion:reduce){.echo-fill,.echo-fill:after{animation:none;clip-path:none}button.control-echo.pressed{transform:none}}.control-library-name{margin:10px 0 0;color:#d8d4c7;font-size:13px;font-weight:600}.control-chip-wrap{position:relative;display:flex;min-width:0}.control-chip-wrap>button:first-child{flex:1 1 auto;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.control-chip-wrap.has-vol:after{content:"";position:absolute;left:8px;bottom:3px;height:2px;width:calc((100% - 16px) * var(--vol, 100) / 100);border-radius:1px;background:currentColor;opacity:.55;pointer-events:none}.control-echoes>.control-chip-wrap>button.control-echo{flex:1 1 auto}.control-cat-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:20;width:220px;padding:8px 10px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#24221b;box-shadow:0 6px 18px #00000073}.control-cat-pop .control-volume{min-width:0}.welcome-back{display:grid;gap:10px;margin:12px 0}.welcome-back p{margin:0}button.link-button{min-height:0;border:0;padding:0;color:#f2c36b;background:transparent;font:inherit;text-decoration:underline;cursor:pointer}.control-hint{margin:0 0 6px;font-size:12px}