:root{color:#f7fbff;background:#050609;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button:disabled,input:disabled{cursor:not-allowed;opacity:.5}a{color:inherit}.app-shell{min-height:100vh;background:radial-gradient(circle at 12% 20%,rgba(74,144,226,.18),transparent 30rem),radial-gradient(circle at 84% 14%,rgba(255,116,86,.14),transparent 26rem),linear-gradient(160deg,#050609,#0b1114 48%,#08090d)}.topbar,.controller-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:inline-flex;align-items:center;gap:.7rem;font-size:1.1rem;font-weight:800;letter-spacing:0}.brand.compact{font-size:.98rem}.brand-mark{display:grid;width:2.5rem;height:2.5rem;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#ffffff12;color:#78d8ff}.brand.compact .brand-mark{width:2rem;height:2rem}.home{min-height:100vh;padding:clamp(1rem,4vw,3rem)}.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(20rem,1.1fr);align-items:center;gap:clamp(2rem,6vw,5rem);min-height:calc(100vh - 7rem);padding-block:2rem}.hero-copy h1,.page h1{margin:0;max-width:12ch;font-size:clamp(3rem,9vw,7rem);line-height:.92;letter-spacing:0}.hero-copy p{max-width:42rem;color:#f7fbffc2;font-size:clamp(1.08rem,2vw,1.45rem);line-height:1.55}.hero-actions,.room-share,.coming-soon{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:.8rem}.button,.ghost-link{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;border-radius:8px;border:1px solid rgba(255,255,255,.18);padding:0 1rem;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:0;cursor:pointer}.button.primary{background:#f8fbff;color:#071015;border-color:#f8fbff}.button.secondary,.ghost-link{background:#ffffff14;color:#f7fbff}.button.wide{width:100%}.button:focus-visible,.ghost-link:focus-visible,.scene-card:focus-visible,input:focus-visible{outline:3px solid #78d8ff;outline-offset:3px}.tv-stage{display:grid;gap:1rem}.tv-frame{aspect-ratio:16 / 9;border:12px solid #15191e;border-radius:8px;overflow:hidden;box-shadow:0 40px 120px #000000b3,0 0 0 1px #ffffff1f}.tv-foot{display:flex;justify-content:center;align-items:center;gap:.5rem;color:#f7fbffad}.page{width:min(100%,72rem);min-height:100vh;margin:0 auto;padding:clamp(1rem,4vw,2.5rem)}.page.narrow{width:min(100%,54rem)}.panel{display:grid;gap:1.25rem;margin-top:2rem;padding:clamp(1rem,4vw,2rem);border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#0c1216b8;box-shadow:0 24px 80px #00000052}.page .panel h1,.controller h1,.join-panel h1,.tv-page h1{max-width:none;font-size:clamp(2rem,6vw,4.4rem);line-height:1}.eyebrow{margin:0 0 .45rem;color:#78d8ff;font-size:.75rem;font-weight:900;text-transform:uppercase}.field{display:grid;gap:.7rem;color:#f7fbffc7;font-weight:700}.field input,.code-input input{width:100%;min-height:3.2rem;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:0 1rem;background:#ffffff14;color:#f7fbff}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.scene-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-card{display:grid;gap:.55rem;min-height:11rem;padding:.65rem;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#ffffff0f;color:#f7fbff;text-align:left;cursor:pointer}.scene-card strong{font-size:1rem}.scene-card span{color:#f7fbffa1;font-size:.86rem}.scene-card .vote-count{color:#9affd0;font-size:.76rem;font-weight:800}.scene-card.selected{border-color:#78d8ff;background:#78d8ff21}.scene{position:relative;width:100%;min-width:0;min-height:100%;aspect-ratio:16 / 9;overflow:hidden;border-radius:6px;background:#050609;isolation:isolate}.scene-image,.scene-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.scene-video{background:#000}.scene-playback{position:absolute;bottom:1rem;left:1rem;z-index:4;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff50;border-radius:6px;background:#000b;color:#fff;cursor:pointer}.scene-playback:focus-visible{outline:3px solid #78d8ff;outline-offset:3px}.scene-playback-error{position:absolute;bottom:1rem;left:1rem;z-index:4}.scene-label{position:absolute;left:4.5rem;bottom:1rem;z-index:1;max-width:calc(100% - 2rem);padding:.4rem .7rem;border-radius:4px;background:#0000008c;color:#fff;font-size:1rem;font-weight:700;overflow-wrap:anywhere}.scene-card .scene{width:100%;min-height:0}.switches{display:grid;gap:.65rem}.switch{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#f7fbffad}.error{margin:0;color:#ffb0a0;font-weight:700}.success{margin:0;color:#9affd0;font-weight:700}.muted{margin:0;color:#f7fbff9e}.spin{animation:spin .9s linear infinite}.controller{display:grid;align-content:start;gap:1.25rem;max-width:46rem}.controller-head h1{margin:0 0 .35rem}.controller-head p{margin:0;color:#f7fbffad}.status{color:#ffd66b}.status.connected{color:#9affd0}.current-vibe .scene{min-height:0}.access-banner{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;border:1px solid rgba(255,176,160,.34);border-radius:8px;background:#5b180f52}.guest-action{display:grid;gap:.85rem;padding-block:.4rem}.section-title{display:flex;align-items:center;gap:.55rem}.section-title h2{margin:0;font-size:1.1rem}.song-form,.song-queue{display:grid;gap:.75rem}.song-request{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,2.75rem);align-items:center;gap:.4rem;min-height:3.75rem;padding:.55rem;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#ffffff0d}.song-request>div{display:grid;min-width:0;gap:.2rem}.song-request strong,.song-request small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-request small{color:#f7fbff94}.icon-button{display:grid;width:2.75rem;height:2.75rem;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:#ffffff12;color:#f7fbff;cursor:pointer}.icon-button.danger{color:#ffb0a0}.room-share{grid-template-columns:1fr auto;align-items:center;padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#ffffff0f}.room-share img{width:9rem;height:9rem;border-radius:8px}.big-code{margin-bottom:1rem;font-size:clamp(3rem,16vw,5rem);font-weight:950;line-height:.95}.coming-soon{grid-template-columns:repeat(3,minmax(0,1fr))}.future-card{display:grid;gap:.3rem;min-height:6rem;padding:1rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#f7fbff99}.future-card span{color:#f7fbff;font-weight:800}.center{justify-self:center}.join-page{display:grid;align-content:center;max-width:30rem}.join-panel{text-align:center}.code-input{display:grid;gap:.65rem;text-align:left}.code-input input{height:5rem;text-align:center;font-size:2.6rem;font-weight:950;text-transform:uppercase}.tv-page{justify-items:start}.screen-mode{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#050609;cursor:none}.screen-mode .scene{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}.screen-mode .scene-video{height:calc(100% - 4rem);object-position:center}.screen-mode .scene:after{content:"";position:absolute;top:auto;right:0;bottom:0;left:0;height:30%;height:max(30%,10rem);background:linear-gradient(to bottom,transparent,#000 82%);pointer-events:none;z-index:2}.screen-loading,.tv-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-content:center;justify-items:center;gap:.65rem;background:#050609a3;text-align:center}.screen-loading strong,.tv-overlay h1{margin:0;font-size:clamp(2.4rem,9vw,7rem);line-height:.95}.tv-overlay{top:auto;right:1.5rem;bottom:5rem;left:1.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;background:transparent;text-align:left;opacity:0;pointer-events:none;transition:opacity .9s ease}.tv-overlay.visible{opacity:1}.tv-overlay p{margin:0;color:#f7fbffc7;font-size:clamp(1.2rem,3vw,2rem)}.tv-overlay span{color:#78d8ff;font-weight:900;text-transform:uppercase}.tv-overlay strong{font-size:clamp(3rem,10vw,7rem);line-height:.9}.tv-overlay img{width:7rem;width:min(20vw,7rem);border-radius:8px}.tv-room-details{display:grid;gap:.35rem;min-width:0}.tv-overlay .tv-room-details h1{font-size:1.15rem;line-height:1.2}.tv-overlay .tv-room-details p{font-size:1rem;overflow-wrap:anywhere}.tv-overlay .tv-room-details strong{font-size:2.25rem;line-height:1}.tv-overlay .tv-room-details span{font-size:.7rem}.corner-code{position:fixed;right:1rem;bottom:1rem;z-index:8;padding:.35rem .55rem;border-radius:6px;background:#0000005c;color:#ffffffc2;font-weight:900}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:780px){.hero{grid-template-columns:1fr;align-content:start;min-height:auto}.hero-copy h1{font-size:clamp(3rem,16vw,5rem)}.hero-actions,.scene-grid,.scene-grid.compact,.room-share,.coming-soon{grid-template-columns:1fr}.room-share img{justify-self:center}.controller-head{align-items:flex-start;flex-direction:column}}