:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--candy-pink:#ff5ca8;--candy-pink-dark:#d6338a;--candy-red:#ff4d5e;--candy-red-dark:#d6222f;--candy-orange:#ff9a3c;--candy-orange-dark:#d97318;--candy-yellow:#ffd23f;--candy-yellow-dark:#e0a800;--candy-green:#2fd699;--candy-green-dark:#17a879;--candy-blue:#38bdf8;--candy-blue-dark:#1090cf;--candy-purple:#a78bfa;--candy-purple-dark:#7c5cf0;--ink:#2b2140;--ink-soft:#6a5f85;--cream:#fffaf0;--page-bg:linear-gradient(160deg, #ffe1f0 0%, #eaf6ff 55%, #efe8ff 100%);--radius-lg:28px;--radius-md:18px;--radius-full:999px;--border-w:3px;--pop-shadow:0 6px 0 #2b21402e;--pop-shadow-sm:0 4px 0 #2b21402e;--card-shadow:0 14px 26px -14px #2b214059;--bounce:cubic-bezier(.34, 1.56, .64, 1);font-family:"Baloo 2",system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--page-bg);color:var(--ink);background-attachment:fixed;min-height:100vh;margin:0;font-family:system-ui,sans-serif}h1,h2,h3,button{font-family:"Baloo 2",system-ui,sans-serif}.app-shell{flex-direction:column;gap:clamp(1rem,2.5vw,1.75rem);max-width:1200px;margin:0 auto;padding:clamp(1rem,3vw,2rem);display:flex}.status-pill{border-radius:var(--radius-full);border:var(--border-w) solid var(--ink);background:var(--cream);box-shadow:var(--pop-shadow-sm);align-items:center;gap:.4rem;padding:.4rem .9rem;font-size:.85rem;font-weight:700;display:inline-flex}.status-pill:before{content:"";background:var(--ink-soft);border-radius:50%;width:.6rem;height:.6rem}.status-pill--ok:before{background:var(--candy-green)}.section-stack{flex-direction:column;gap:clamp(1rem,2.5vw,1.5rem);display:flex}.add-link-section{width:100%}.add-link-actions{align-items:center;gap:.65rem;width:100%;display:flex}.add-link-result{white-space:nowrap;font-size:.85rem;font-weight:700}.add-link-result--success{color:#137348}.add-link-result--failed{color:#b91c1c}.app-shell--room{max-width:none}.room-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"main""social""queue";align-items:start;gap:clamp(1rem,2.5vw,1.5rem);display:grid}.room-layout>*{min-width:0}.room-main-column{grid-area:main}.room-social-column{grid-area:social}.room-queue-column{grid-area:queue}.room-layout .card{overflow-wrap:anywhere;min-width:0}.room-layout input{min-width:0;max-width:100%}.add-link-section input{flex:12rem;width:100%}.room-layout .queue-heading,.room-layout .player-heading{flex-wrap:wrap}@media (width>=1000px){.room-layout{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"social main""social queue"}.room-social-column .card,.room-queue-column .card{padding:1rem}.room-social-column .chat-feed{height:clamp(14rem,30vh,22rem)}.room-social-column .chat-send{padding:.5rem .7rem}}@media (width>=1440px){.room-layout{grid-template-columns:320px minmax(0,1fr) 340px;grid-template-areas:"social main queue"}}.card{background:var(--cream);border:var(--border-w) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);padding:clamp(1rem,2.5vw,1.5rem)}.card h2{align-items:center;gap:.5rem;margin:0 0 .9rem;font-size:1.1rem;font-weight:800;display:flex}.card--accent-pink{border-color:var(--candy-pink-dark)}.card--accent-blue{border-color:var(--candy-blue-dark)}.card--accent-green{border-color:var(--candy-green-dark)}.card--accent-purple{border-color:var(--candy-purple-dark)}.card--accent-orange{border-color:var(--candy-orange-dark)}.btn{color:var(--ink);background:var(--cream);border:var(--border-w) solid var(--ink);border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--pop-shadow);transition:transform .15s var(--bounce), box-shadow .15s var(--bounce);justify-content:center;align-items:center;gap:.4rem;padding:.55rem 1.1rem;font-size:.95rem;font-weight:700;display:inline-flex}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:active:not(:disabled){box-shadow:none;transform:translateY(4px)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn--sm{border-radius:var(--radius-md);min-width:2.75rem;min-height:2.75rem;padding:.35rem .7rem;font-size:.85rem}.btn--green{background:var(--candy-green)}.btn--red{background:var(--candy-red);color:#fff}.btn--blue{background:var(--candy-blue)}.btn--purple{background:var(--candy-purple);color:#fff}.btn--yellow{background:var(--candy-yellow)}.btn--pink{background:var(--candy-pink);color:#fff}.btn--selected{box-shadow:none;outline:3px solid var(--ink);outline-offset:2px;transform:translateY(4px)}.btn-row{flex-wrap:wrap;gap:.6rem;display:flex}.seek-control{max-width:100%}.seek-control--open{border:var(--border-w) solid var(--ink);border-radius:var(--radius-md);background:var(--candy-purple);min-width:0;box-shadow:var(--pop-shadow-sm);flex:100%;padding:.75rem}.seek-control--open .seek-toggle{box-shadow:none;border:0;border-radius:0;padding:0 0 .65rem;transform:none}.seek-form{width:100%}.seek-time-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;width:100%;display:grid}.seek-time-fields label{min-width:0;font-size:.75rem;font-weight:700;position:relative}.seek-time-fields label+label:before{content:":";font-size:1rem;position:absolute;bottom:.55rem;left:-.5rem}.seek-time-fields input{text-align:center;font-variant-numeric:tabular-nums;width:100%;margin-top:.3rem;padding:.5rem .35rem}.seek-form [role=alert]{margin:0;font-size:.85rem}.dj-handoff-dialog{width:min(32rem,100% - 2rem);max-height:calc(100dvh - 2rem);color:var(--ink);overflow:auto}.dj-handoff-dialog::backdrop{background:#19122b8c}.dj-handoff-members{flex-wrap:wrap;gap:.75rem;display:flex}input[type=text],input[type=number],input:not([type]){font:inherit;border:var(--border-w) solid var(--ink);border-radius:var(--radius-md);background:#fff;padding:.5rem .8rem;font-family:system-ui,sans-serif}input:focus-visible,button:focus-visible{outline:3px solid var(--candy-blue-dark);outline-offset:2px}form{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.form--stack{flex-direction:column;align-items:flex-start}.form--stack input:not([type=radio]):not([type=checkbox]){width:min(100%,24rem)}.choice-row{border:none;flex-wrap:wrap;gap:.4rem 1rem;margin:0;padding:0;display:flex}.choice-row legend{margin-bottom:.3rem;font-size:.9rem;font-weight:800}.toggle{cursor:pointer;align-items:center;gap:.5rem;min-height:2.75rem;font-size:.9rem;font-weight:700;display:inline-flex}.toggle input{width:1.3rem;height:1.3rem;accent-color:var(--candy-purple-dark)}.notice{color:var(--candy-green-dark);font-weight:700}.name-row{align-items:center}.name-row p{margin:0}.lobby-alert{border:var(--border-w) solid var(--candy-red-dark);border-radius:var(--radius-md);background:color-mix(in srgb, var(--candy-red) 12%, #fff);margin:0;padding:.7rem 1rem;font-weight:700}.sticker{border-radius:var(--radius-full);border:var(--border-w) solid var(--ink);box-shadow:var(--pop-shadow-sm);align-items:center;gap:.35rem;padding:.3rem .75rem;font-size:.85rem;font-weight:800;display:inline-flex;transform:rotate(-3deg)}.sticker--dj{background:var(--candy-purple);color:#fff}.sticker--live{background:var(--candy-green);transform:rotate(3deg)}.sticker--code{background:var(--candy-yellow);letter-spacing:.12em;font-variant-numeric:tabular-nums;font-size:1.05rem;font:inherit;cursor:pointer;transition:transform .15s var(--bounce), box-shadow .15s var(--bounce);transform:none}.sticker--code:hover{transform:translateY(-2px)}.sticker--code:active{box-shadow:none;transform:translateY(2px)}.room-bar{background:var(--cream);border:var(--border-w) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);flex-wrap:wrap;align-items:center;gap:.6rem;padding:.6rem .9rem;display:flex;position:relative}.room-members-toggle{cursor:pointer;color:var(--ink)}.room-members-toggle[aria-expanded=true]{background:var(--candy-purple)}.signal-menu-toggle{cursor:pointer;color:var(--ink)}.signal-menu-toggle[aria-expanded=true]{background:var(--candy-orange,var(--candy-yellow))}.signal-menu-panel{z-index:20;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:min(22rem,100% - 1.8rem);display:grid;position:absolute;top:calc(100% + .65rem);right:.9rem}.room-members-panel{z-index:20;overflow-wrap:anywhere;width:min(24rem,100% - 1.8rem);max-height:min(28rem,65dvh);position:absolute;top:calc(100% + .65rem);right:.9rem;overflow:auto}.room-bar-name{overflow-wrap:anywhere;flex:8rem;min-width:0;font-family:"Baloo 2",system-ui,sans-serif;font-size:1.15rem}.lobby-heading{justify-content:space-between;align-items:center;margin:1rem 0 .5rem;display:flex}.lobby-heading h3{margin:0;font-size:1rem}.bug-report{text-align:center;overflow-wrap:anywhere;margin:0;font-size:.9rem;font-weight:700}.bug-report a{color:var(--candy-purple-dark,inherit)}.chip-row{flex-wrap:wrap;gap:.5rem;display:flex}.chip{border-radius:var(--radius-full);border:var(--border-w) solid var(--ink);background:#fff;align-items:center;gap:.4rem;padding:.3rem .7rem .3rem .3rem;font-size:.85rem;font-weight:700;display:inline-flex}.chip-avatar{background:var(--candy-blue);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:1.6rem;height:1.6rem;font-size:.8rem;font-weight:800;display:inline-flex}.queue-list{flex-direction:column;gap:.6rem;max-height:26rem;margin:0;padding:0;list-style:none;display:flex;position:relative;overflow-y:auto}.card--queue .queue-list{min-height:28rem;max-height:40rem}.queue-item{border:var(--border-w) solid var(--ink);border-radius:var(--radius-md);cursor:grab;background:#fff;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.5rem;padding:.6rem .8rem;display:flex}.queue-item--current{background:color-mix(in srgb, var(--candy-yellow) 35%, #fff);border-color:var(--candy-orange-dark);cursor:default}.queue-item--static{cursor:default}.queue-item--history{opacity:.6;border-style:dashed}.queue-heading{justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.9rem;display:flex}.queue-heading h2{margin:0}.queue-item-title{overflow-wrap:anywhere;flex:12rem;min-width:0;font-size:.9rem;font-weight:700}.vote-progress{gap:.5rem;font-size:.9rem;font-weight:700;display:flex}.vote-progress--yes{color:var(--candy-green-dark)}.vote-progress--no{color:var(--candy-red-dark)}.player-heading{justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.9rem;display:flex}.player-heading h2{margin:0}.player-settings-slot{align-items:center;display:flex}.player-settings-row{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.player-settings-help{font-size:.85rem}.youtube-player{aspect-ratio:16/9;border-radius:var(--radius-lg);border:4px solid var(--ink);width:100%;box-shadow:var(--card-shadow);background:#000;flex-direction:column;display:flex;position:relative;overflow:hidden}.youtube-player-screen{pointer-events:none;flex:auto;min-height:0;position:relative}.youtube-player-screen--settings{pointer-events:auto}.youtube-player-screen iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.youtube-player p{color:#fff;background:#0009;margin:0;padding:.5rem 1rem}.player-fallback-row{z-index:1;align-items:center;gap:.5rem;display:flex;position:absolute;top:.75rem;left:.75rem}.card--chat{min-width:0}.chat-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.9rem;display:flex}.chat-heading h2{margin:0}.chat-empty{opacity:.75;font-size:.9rem}.chat-feed{overscroll-behavior:contain;border:2px solid var(--ink);border-radius:var(--radius-md);background:#fff;flex-direction:column;gap:.75rem;height:20rem;padding:.75rem;display:flex;overflow-y:auto}.chat-message{border-radius:var(--radius-md);background:var(--cream);overflow-wrap:anywhere;flex-shrink:0;padding:.6rem .75rem}.chat-message--self{background:color-mix(in srgb, var(--candy-yellow) 35%, #fff)}.chat-message-meta{flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.8rem;display:flex}.chat-message-meta time{opacity:.7}.chat-message p{white-space:pre-wrap;margin:.4rem 0 0}.chat-form{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;margin-top:.75rem;display:grid}.chat-input-wrap{min-width:0}.chat-form textarea{resize:vertical;border:2px solid var(--ink);border-radius:var(--radius-md);width:100%;min-height:6rem;font:inherit;color:var(--ink);background:#fff;padding:.6rem .8rem;display:block}.chat-send-column{flex-direction:column;align-items:center;gap:.35rem;display:flex}.chat-count{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.75rem}.chat-send{white-space:nowrap}.chat-form>[role=alert]{grid-column:1/-1;margin:0}@media (prefers-reduced-motion:reduce){.btn{transition:none}}@media (width>=1440px){:root:has(.app-shell--room){font-size:clamp(12px,min(.833333vw,1.66667dvh),32px)}.app-shell--room{--room-gap:1.25rem;--radius-lg:1.75rem;--radius-md:1.125rem;--border-w:.1875rem;height:100dvh;min-height:0;padding:var(--room-gap);gap:var(--room-gap);overflow:clip}.app-shell--room>.room-bar{flex:none}.app-shell--room>[role=alert]{flex:none;margin:0}.room-layout{gap:var(--room-gap);flex:1 1 0;grid-template-rows:minmax(0,1fr);grid-template-columns:20rem minmax(0,1fr) 21.25rem;align-items:stretch;min-height:0}.room-layout>.section-stack{gap:var(--room-gap);height:100%;min-height:0}.card--vote{flex:0 auto;max-height:55%;overflow:auto}.card--vote>.btn-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;display:grid}.card--vote>.btn-row .btn{width:100%;padding:.6rem .4rem;font-size:.85rem}.card--vote .seek-control--open{grid-column:1/-1}.room-queue-column>.add-link-section{flex:none}.room-layout .card--chat,.room-layout .card--queue,.room-layout .card--player{flex-direction:column;flex:1 1 0;min-height:0;display:flex}.chat-heading,.chat-form,.queue-heading{flex:none}.room-social-column .chat-feed,.card--queue .queue-list{overscroll-behavior:contain;flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;height:0!important}.room-social-column .chat-form textarea{resize:none;height:5rem;min-height:5rem}.card--player>.player-heading,.card--player>p{flex:none}.card--player>p{margin:.65rem 0 0}.youtube-player-region{flex-direction:column;flex:1 1 0;min-height:0;display:flex}.player-settings-row,.player-settings-help{flex:none}.youtube-player-viewport{flex:1 1 0;place-items:center;min-height:0;display:grid;container-type:size}.youtube-player{border-width:.25rem;width:min(100cqw,177.778cqh)}}@keyframes ping-wheel-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes ping-toast-in{0%{opacity:0;transform:translateY(.5rem)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}.ping-wheel{z-index:500;pointer-events:none;width:0;height:0;animation:ping-wheel-pop .18s var(--bounce);position:fixed}.ping-wheel-center{background:var(--cream);border:var(--border-w) solid var(--ink);width:1.1rem;height:1.1rem;box-shadow:var(--pop-shadow-sm);border-radius:50%;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.ping-wheel-slice{border-radius:var(--radius-md);border:var(--border-w) solid var(--ink);background:var(--cream);width:4.5rem;box-shadow:var(--pop-shadow-sm);text-align:center;flex-direction:column;align-items:center;gap:.15rem;margin-top:-2.25rem;margin-left:-2.25rem;padding:.4rem .3rem;display:flex;position:absolute;top:0;left:0}.ping-wheel-slice--hovered{background:var(--candy-purple);color:#fff;box-shadow:var(--card-shadow)}.ping-wheel-slice--cooldown:not(.ping-wheel-slice--hovered){opacity:.45}.ping-wheel-icon{font-size:1.4rem;line-height:1}.ping-wheel-label{font-size:.65rem;font-weight:800}.ping-pop{z-index:500;pointer-events:none;animation:ping-toast-in .15s var(--bounce), ping-pop-out .35s ease-in 1.45s forwards;flex-direction:column;align-items:center;gap:.15rem;display:flex;position:fixed;transform:translate(-50%,-50%)}.ping-pop-icon{filter:drop-shadow(0 3px #2b214059);font-size:2.4rem;line-height:1}.ping-pop-name{border-radius:var(--radius-full);border:var(--border-w) solid var(--ink);background:var(--cream);box-shadow:var(--pop-shadow-sm);white-space:nowrap;padding:.15rem .6rem;font-size:.8rem;font-weight:800}@keyframes ping-pop-out{0%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)translateY(-.5rem)}}.ping-error-toast{z-index:600;border:var(--border-w) solid var(--candy-red-dark);border-radius:var(--radius-full);background:color-mix(in srgb, var(--candy-red) 15%, #fff);box-shadow:var(--card-shadow);animation:ping-toast-in .15s var(--bounce);margin:0;padding:.6rem 1.1rem;font-weight:700;position:fixed;top:1rem;left:50%;transform:translate(-50%)}.log-viewer-dialog{width:min(30rem,100% - 2rem);max-height:calc(100dvh - 2rem);color:var(--ink);overflow:auto}.log-viewer-dialog::backdrop{background:#19122b8c}.log-viewer-heading{justify-content:space-between;align-items:center;gap:.6rem;margin:1rem 0 .6rem;display:flex}.log-viewer-heading h3{margin:0}.log-viewer-list{border:var(--border-w) solid var(--ink);border-radius:var(--radius-md);max-height:20rem;margin:0;padding:0;list-style:none;overflow:auto}.log-viewer-row{border-bottom:1px solid color-mix(in srgb, var(--ink) 15%, transparent);justify-content:space-between;align-items:baseline;gap:.75rem;padding:.5rem .75rem;display:flex}.log-viewer-row:nth-child(2n){background:color-mix(in srgb, var(--candy-purple) 6%, #fff)}.log-viewer-row:last-child{border-bottom:none}.log-viewer-text{flex:auto}.log-viewer-row time{color:var(--ink-soft);white-space:nowrap;flex:none;font-size:.8rem}