:root{--night:#17122b;--panel:#2a2147;--line:#4a3f6e;--lemon:#ffd84d;--coral:#ff5c7a;--mint:#5ce6b8;--cream:#fff6e0;--muted:#c9c1e0}*{box-sizing:border-box}body{background:var(--night);color:var(--cream);font-family:var(--font-body), sans-serif;margin:0}a{color:var(--lemon)}h1,h2{font-family:var(--font-display), sans-serif;margin:0;line-height:1.1}h1{font-size:36px}h2{font-size:22px}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}.phone{flex-direction:column;gap:20px;max-width:430px;min-height:100vh;margin:0 auto;padding:32px 24px;display:flex}.grow{flex-grow:1}.muted{color:var(--muted)}.center{text-align:center}.wordmark{font-family:var(--font-display), sans-serif;letter-spacing:-1px;color:var(--lemon);font-size:28px;font-weight:700;text-decoration:none}.back{align-self:flex-start;align-items:center;min-height:44px;font-weight:500;display:flex}.hero{text-align:center;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;gap:24px;display:flex}.hero h1{font-size:40px}.btn{background:var(--lemon);min-height:56px;color:var(--night);border:0;border-radius:16px;justify-content:center;align-items:center;padding:0 24px;font-size:17px;font-weight:600;text-decoration:none;display:flex}.btn.outline{border:2px solid var(--cream);color:var(--cream);background:0 0}.btn.small{border-radius:12px;min-height:44px;padding:0 16px;font-size:15px}.stack{flex-direction:column;gap:12px;display:flex}.form{flex-direction:column;flex-grow:1;gap:20px;display:flex}.field{flex-direction:column;gap:8px;font-size:14px;font-weight:500;display:flex}.field input,.search input{border:2px solid var(--line);background:var(--panel);height:56px;color:var(--cream);font:500 17px var(--font-body), sans-serif;border-radius:12px;padding:0 16px}.field input.key{border-color:var(--lemon);color:var(--lemon);font:700 20px var(--font-display), sans-serif}.link{min-height:44px;color:var(--lemon);background:0 0;border:0;align-self:flex-start;padding:0;font-weight:500}.alert{background:var(--coral);color:var(--night);border-radius:12px;margin:0;padding:12px 16px;font-weight:600}.search input{border-color:var(--lemon);border-radius:16px;width:100%}.row{background:var(--panel);min-height:76px;color:var(--cream);border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;display:flex}.row .text{flex-direction:column;flex-grow:1;gap:2px;min-width:0;display:flex}.row b{font-weight:600}.row small{color:var(--muted);font-size:14px}.thumb{object-fit:cover;background:var(--night);border-radius:8px;flex-shrink:0;width:96px;height:54px}.room{flex-direction:column;gap:24px;min-height:100vh;padding:24px;display:flex}.room-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;display:flex}.room-body{flex-wrap:wrap;flex-grow:1;align-items:flex-start;gap:24px;display:flex}.main{flex-direction:column;flex:999 560px;gap:24px;min-width:0;display:flex}.side{flex-direction:column;flex:320px;gap:24px;min-width:0;display:flex}.card{background:var(--panel);border-radius:24px;flex-direction:column;gap:16px;padding:24px;display:flex}.stage{aspect-ratio:16/9;border:2px solid var(--line);text-align:center;background:#0d0a1a;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:16px;display:flex;overflow:hidden}.stage.video{padding:0}.stage iframe,.stage>div{width:100%;height:100%}.stage .stars{gap:4px;width:auto;height:auto;display:flex}.star{width:52px;height:52px;color:var(--lemon);background:0 0;border:0;font-size:38px}.controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.invite{text-align:center;align-items:center;gap:8px}.invite img{border-radius:12px;width:148px;height:148px}.password{font-family:var(--font-display), sans-serif;color:var(--lemon);font-size:22px;font-weight:700}.queue{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.queue li{background:var(--night);border-radius:12px;align-items:center;gap:4px;padding:4px 4px 4px 12px;display:flex}.queue li[draggable=true]{cursor:grab}.arrow{width:44px;height:44px;color:var(--lemon);background:0 0;border:0;flex-shrink:0;font-size:18px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chips span{background:var(--night);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:500}.home{min-height:100vh;gap:clamp(8px,2dvh,20px);min-height:100dvh;padding:clamp(12px,3dvh,32px) 24px}.home .hero{gap:clamp(6px,2dvh,24px)}.home .hero p{margin:0}.home .hero{flex-grow:0;margin-top:auto}.home .stack{margin-bottom:auto}.home .hero img{width:clamp(64px,19dvh,160px);height:clamp(64px,19dvh,160px)}.home .hero h1{font-size:clamp(22px,4.2dvh,32px)}@media (max-height:520px){.home .hero p{display:none}.home .btn{min-height:48px}.home .stack{gap:8px}}@media (max-height:420px){.home .stack{flex-direction:row}.home .stack .btn{flex:1}.home .hero h1 br{display:none}.home .hero h1{max-width:34ch;font-size:20px}.home .hero img{width:56px;height:56px}}.song-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}.song .text b{overflow-wrap:anywhere}@media (max-width:560px){.room{padding:16px}.song{flex-direction:column;align-items:stretch;gap:10px;padding:12px}.song .thumb{aspect-ratio:16/9;width:100%;height:auto}.song .text b{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.song-actions{justify-content:space-between}}.room-head{align-items:center}.main{flex:100%;max-width:960px;margin:0 auto}.menu-count{background:var(--coral);min-width:22px;height:22px;color:var(--night);border-radius:11px;justify-content:center;align-items:center;margin-left:8px;padding:0 6px;font-size:13px;display:inline-flex}.menu-backdrop{z-index:10;opacity:0;visibility:hidden;background:#0009;transition:opacity .2s;position:fixed;inset:0}.menu-backdrop.open{opacity:1;visibility:visible}.menu-panel{z-index:11;overscroll-behavior:contain;background:var(--night);border-left:2px solid var(--line);visibility:hidden;flex-direction:column;gap:16px;width:min(400px,100%);padding:16px;transition:transform .2s,visibility .2s;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%)}.menu-panel.open{visibility:visible;transform:none}.menu-links a,.menu-links .link{align-items:center;min-height:44px;font-weight:500;display:flex}@media (prefers-reduced-motion:reduce){.menu-panel,.menu-backdrop{transition:none}}.room-head{flex-wrap:nowrap}.room-head>span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.room-head>.btn{flex-shrink:0}.next-bar{z-index:5;min-height:72px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--panel);border-top:2px solid var(--line);justify-content:space-between;align-items:center;gap:12px;display:flex;position:fixed;bottom:0;left:0;right:0}.next-bar .text{flex-direction:column;flex-grow:1;min-width:0;display:flex}.next-bar b{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.next-bar .btn{flex-shrink:0}.toast{left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:20;background:var(--cream);max-width:calc(100% - 32px);color:var(--night);text-align:center;border-radius:12px;padding:12px 16px;font-weight:600;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #0006}.song.added{box-shadow:inset 0 0 0 2px var(--line);background:0 0}.song.added .thumb{opacity:.55}.song.added b{color:var(--muted)}.song.added .btn{border-color:var(--muted);color:var(--muted)}.room{padding-bottom:24px}.next-bar{border:0;border-radius:16px;min-height:64px;padding:12px 16px;position:static}.toast{bottom:calc(24px + env(safe-area-inset-bottom))}.queue li{background:var(--night);touch-action:pan-y;gap:0;min-height:56px;padding:0}.queue li.dragging{z-index:1;background:var(--line);position:relative;box-shadow:0 8px 20px #0006}.queue li.playing{box-shadow:inset 0 0 0 2px var(--lemon)}.drag-handle{width:44px;min-height:56px;color:var(--muted);cursor:grab;touch-action:none;background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;display:flex}.drag-handle:active{cursor:grabbing}.queue-song{min-width:0;color:var(--cream);text-align:left;background:0 0;border:0;flex-direction:column;flex-grow:1;gap:2px;padding:8px 12px 8px 4px;display:flex}.queue li>span.queue-song:first-child{padding-left:16px}.stage+.next-bar{margin-top:-12px}.queue li:hover{background:#221a3d}button.queue-song{cursor:pointer}button.queue-song:focus-visible{outline:2px solid var(--lemon);outline-offset:-2px}.drag-handle:focus-visible{outline:2px solid var(--lemon);outline-offset:-2px}button.next-bar{width:100%;color:var(--cream);text-align:left;cursor:pointer;font:inherit}button.next-bar:hover{background:var(--line)}button.next-bar:focus-visible{outline:2px solid var(--lemon);outline-offset:2px}.next-bar .btn{pointer-events:none;background:var(--mint)}@media (max-width:560px){.next-bar{flex-direction:column;align-items:flex-start}.next-bar .text{width:100%}.next-bar b{white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}}.legal{flex-direction:column;gap:12px;max-width:720px;margin:0 auto;padding:32px 24px 64px;line-height:1.6;display:flex}.legal h1,.legal h2{margin-top:16px}.legal p,.legal ul{margin:0}.legal ul{padding-left:20px}.legal-links{justify-content:center;gap:24px;font-size:14px;display:flex}.legal-links a{min-height:32px;color:var(--muted);align-items:center;display:flex}.home-footer{flex-direction:column;align-items:center;gap:2px;font-size:14px;display:flex}.home-footer p{margin:0}.song-search{gap:12px;display:flex}.song-search .search{flex-grow:1;min-width:0}.btn.muted-video{background:var(--coral);color:var(--night)}@media (max-width:560px){.song-search{flex-direction:column}.song-search .btn{width:100%}}.alert.notice{background:var(--lemon);color:var(--night)}.room-head{z-index:6;background:var(--night);border-bottom:1px solid var(--line);margin:-24px -24px 0;padding:16px 24px;position:sticky;top:0}@media (max-width:560px){.room-head{margin:-16px -16px 0;padding:12px 16px}}.song-search{z-index:5;background:var(--night);padding:12px 0;position:sticky;top:77px}@media (max-width:560px){.song-search{top:69px}}@media (min-width:960px){.room-body{flex-wrap:nowrap;width:100%;max-width:1304px;margin:0 auto}.main{flex:1 1 0;max-width:none;margin:0}.side{flex:0 0 320px}}