#live{--edge: 16px;--slab-w: max(calc(25vw - var(--edge)), 320px);--slab-h: max(50dvh, 340px);--bleed: 5%;--line: rgba(255,255,255,.1);--dim: rgba(255,255,255,.55);position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#000}#live #music{position:absolute;left:0;top:0;bottom:0;overflow:hidden;width:calc(100% - var(--slab-w) - var(--edge) + var(--bleed))}@media(max-aspect-ratio:1/1){#live #music{right:0;bottom:auto;width:auto;height:calc(100% - var(--slab-h) - var(--edge) + var(--bleed))}}#live .playing{position:absolute;left:0;right:0;top:0;z-index:3;padding:18px 20px 40px;display:flex;flex-direction:column;gap:2px;background:linear-gradient(to bottom,#0009,#0000);pointer-events:none}#live .playing[hidden]{display:none}#live .playing .title{font-weight:600;font-size:clamp(15px,2.2vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#live .playing .by{color:var(--dim);font-size:clamp(12px,1.5vw,15px)}#live .home{--home-h: clamp(72px, 8vw, 130px);--home-lift: 0px;position:absolute;z-index:4;left:calc(20px - var(--home-h) * .028);bottom:calc(18px + var(--home-lift) - var(--home-h) * .21)}#live .home img{height:var(--home-h);width:auto;opacity:.9;display:block}@media(max-aspect-ratio:1/1){#live .home{--home-h: clamp(64px, 18vw, 96px);--home-lift: 5dvh}}#live .join{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;padding:14px 28px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:#282828b3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font:inherit;font-size:18px;font-weight:600;cursor:pointer}#live .join[hidden]{display:none}#live .join:hover{background:#464646bf}#live .notice{position:absolute;left:20px;right:20px;bottom:calc(26px + var(--home-lift, 0px) + clamp(72px,8vw,130px) * .62);z-index:4;margin:0;color:#ff8a8a;font-size:14px;pointer-events:none}#live .notice:empty{display:none}#live .room{position:absolute;z-index:5;top:var(--edge);right:var(--edge);bottom:var(--edge);width:var(--slab-w);display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:28px;background:linear-gradient(165deg,#ffffff17,#ffffff05 35%,#fff0 60%),#0e0c1685;backdrop-filter:blur(32px) saturate(1.45);-webkit-backdrop-filter:blur(32px) saturate(1.45);box-shadow:inset 1px 1px #ffffff38,inset -1px -1px #ffffff0d,inset 0 0 0 1px #ffffff14,0 30px 80px #000000a6;font-size:14px}@media(max-aspect-ratio:1/1){#live .room{top:auto;left:var(--edge);width:auto;height:var(--slab-h);bottom:calc(var(--edge) + env(safe-area-inset-bottom,0px))}}#live .top{display:flex;align-items:center;gap:12px;padding:16px 20px 14px}#live .top h1{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;font-weight:700;letter-spacing:.02em}#live .listeners{flex:1;color:var(--dim);font-size:13px}#live .queue-song{height:38px;padding:0 14px;gap:7px;font-size:14px}#live .queue-song .plus{flex:none}#live .quiet{color:var(--dim)}#live .refused{color:#fffc}#live .who{font-weight:600;color:hsl(var(--hue, 0) 70% 72%)}#live .upcoming{padding:0 20px 14px;border-bottom:1px solid var(--line)}#live .deck{position:relative;display:flex;align-items:flex-start;gap:var(--gap, 12px);margin-right:-20px}#live .now-place{position:relative;flex:none;width:var(--now, 0);height:var(--now, 0)}#live .lineup{flex:1;min-width:0;display:flex;gap:var(--gap, 12px);align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 20px 4px 4px;margin:-4px 0 0 -4px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask:linear-gradient(to right,#000 calc(100% - 28px),transparent)}#live .lineup::-webkit-scrollbar{display:none}#live .deck .item{position:relative;flex:none;display:flex;flex-direction:column;gap:6px;scroll-snap-align:start}#live .deck .item.leaving{position:absolute;pointer-events:none}#live .deck .tile{cursor:default}#live .deck .tile .face{transform:none;box-shadow:0 0 0 1px #ffffff29 inset,0 10px 24px #00000073}#live .deck .frame{position:absolute;inset:0;border-radius:18px;pointer-events:none;background:linear-gradient(160deg,#ffffff0f,#ffffff03);box-shadow:inset 0 0 0 1.5px #ffffff47,inset 1px 1px 0 1.5px #ffffff1f;opacity:0;transition:opacity .5s ease-out}#live .deck.vacant .frame{opacity:1;animation:frame-breathe 1.6s ease-in-out infinite}@keyframes frame-breathe{50%{box-shadow:inset 0 0 0 1.5px #ffffff80,inset 1px 1px 0 1.5px #fff3,0 0 24px #be96ff2e}}#live .deck .count{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:calc(var(--now, 160px) * .42);font-weight:700;font-variant-numeric:tabular-nums;color:#ffffffeb;text-shadow:0 0 24px rgba(190,150,255,.55)}#live .deck:not(.vacant) .count{display:none}#live .deck .pill{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:.5em;padding:.35em .8em;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;border-radius:999px;color:#fff;background:#0a08108c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 1px 1px #ffffff38,inset 0 0 0 1px #ffffff14}#live .deck .pill .beacon{width:.65em;height:.65em}#live .deck .progress{position:absolute;left:18px;right:18px;bottom:7px;height:3px;border-radius:2px;overflow:hidden;background:#ffffff2e}#live .deck .progress .done{display:block;height:100%;background:#ffffffe6;transform-origin:left;transform:scaleX(0);transition:transform 1s linear}#live .deck .label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:#ffffffbf}#live .deck .label.who{color:hsl(var(--hue, 0) 70% 72%)}#live .lineup .pill,#live .lineup .progress,#live .deck .item.leaving .pill,#live .now-place .label{display:none}#live .deck .item.mine .tile .face{box-shadow:0 0 0 2px #c8a5fff2,0 0 18px #aa78ff73,0 10px 24px #00000073}#live .deck .item.mine .label{color:#dcc8fff2}#live .upcoming .said{margin:12px 0 0;font-size:13px}#live .upcoming .said:empty{display:none}#live .upcoming .said .yours{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}#live .lines{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:14px 20px;display:flex;flex-direction:column;gap:7px;overflow-wrap:anywhere;-webkit-mask:linear-gradient(to bottom,transparent,#000 14px);mask:linear-gradient(to bottom,transparent,#000 14px)}#live .lines li{line-height:1.45}#live .composer{padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}#live .composer .note{margin:0 0 10px;color:var(--dim);font-size:13px}#live .composer .note:empty{display:none}#live .composer .note.nudge{animation:nudge .5s ease-in-out;color:#ffffffe6}@keyframes nudge{20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}#live .composer form{display:flex;gap:8px}#live .composer input{flex:1;min-width:0;height:46px;padding:0 18px;color:#fff;font:inherit;font-size:15px;outline:none}#live .composer input::placeholder{color:#ffffff73}#live .composer input:focus{box-shadow:inset 1px 1px #ffffff4d,inset 0 0 0 1px #be96ff8c,0 8px 24px #00000080}#live .composer input:disabled{opacity:.5}#live .composer .actions{display:flex;justify-content:flex-end;margin-top:6px}#live .composer .nokey{margin-top:14px}#live .composer .nokey .note{margin-bottom:8px}#live .composer .ways{display:flex;gap:8px;flex-wrap:wrap}#live .composer .ways a.control{display:inline-flex;align-items:center;text-decoration:none;color:inherit}#live button.quiet{padding:4px 6px;border:0;background:transparent;cursor:pointer;color:var(--dim);font:inherit;font-size:13px}#live button.quiet:hover{color:#ffffffd9}#live .picker{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;min-height:0;padding:18px 20px 0;border-radius:inherit;background:#0c0a14c7;backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);box-shadow:inset 1px 1px #ffffff2e;transform:translateY(100%);opacity:0;transition:transform .45s cubic-bezier(.22,.8,.2,1),opacity .3s ease-out}#live .picker.open{transform:none;opacity:1}#live .picker[hidden]{display:none}#live .picker .bar{display:flex;gap:8px}#live .picker .find{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;cursor:text}#live .picker .find svg{width:16px;height:16px;flex:none;fill:none;stroke:#fff9;stroke-width:1.6;stroke-linecap:round}#live .picker .find input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:inherit;font-size:15px;outline:none}#live .picker .find:focus-within{box-shadow:inset 1px 1px #ffffff4d,inset 0 0 0 1px #be96ff8c,0 8px 24px #00000080}#live .picker .cooling{margin:12px 0;color:var(--dim);font-size:13px}#live .results{flex:1;min-height:0;overflow-y:auto;display:grid;gap:12px;align-content:start;padding-bottom:20px;scrollbar-width:none}#live .results::-webkit-scrollbar{display:none}#live .results .quiet{grid-column:1 / -1;margin:0}#live .results .pick[hidden]{display:none}#live .results .pick:disabled{cursor:default}#live .results .pick:disabled:not(.taken):not(.busy) .face{opacity:.55}#live .results .pick.taken .face{opacity:.4}#live .results .pick .badge{position:absolute;top:8px;right:8px;z-index:1;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:650;color:#fff;background:#0a081099;box-shadow:inset 0 0 0 1px #ffffff2e}#live .results .pick .badge:empty{display:none}@media(prefers-reduced-motion:reduce){#live .picker,#live .deck .progress .done{transition:none}#live .deck.vacant .frame,#live .composer .note.nudge{animation:none}}@media(max-aspect-ratio:1/1){#live .room{--deck-share: .19}#live .top{padding:12px 16px 10px}#live .top h1{font-size:16px}#live .queue-song{height:34px}#live .upcoming{padding:0 16px 10px}#live .deck{margin-right:-16px}#live .deck .pill{top:6px;left:6px;font-size:11px}#live .deck .progress{left:12px;right:12px;bottom:5px}#live .deck .label{font-size:11px}#live .upcoming .said{margin-top:8px}#live .lines{padding:10px 16px}#live .composer{padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))}#live .composer input,#live .composer .control{height:42px}#live .composer .actions{margin-top:2px}}