:root{--bg: #0b0d12;--bg-raised: #14171f;--bg-input: #1b1f29;--border: #262b36;--text: #e8eaf0;--text-dim: #969cad;--accent: #7c5cff;--accent-text: #ffffff;--danger: #ff6b6b;--warn: #ffb84d;--radius: 12px;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3{margin:0;line-height:1.3}.landing{max-width:460px;margin:0 auto;padding:48px 20px 64px}.landing-head h1{font-size:32px;letter-spacing:-.02em}.landing-head p{color:var(--text-dim);margin:12px 0 32px}.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px}.landing-foot p{color:var(--text-dim);font-size:13px;margin-top:24px}.divider{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:13px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.field{display:flex;flex-direction:column;gap:6px}.field-inline{flex-direction:row;align-items:center;gap:8px}.field-label{font-size:12px;color:var(--text-dim)}.input{width:100%;padding:11px 13px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;color:var(--text);font:inherit}.input:focus{outline:2px solid var(--accent);outline-offset:-1px}.input-code{font-size:26px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}.input-small{padding:6px 9px;font-size:13px}.btn{padding:11px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;color:var(--text);font:inherit;cursor:pointer}.btn:hover:not(:disabled){border-color:#3a4150}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}.btn-block{width:100%}.btn-small{padding:7px 11px;font-size:13px}.icon-btn{background:none;border:none;color:var(--text-dim);font-size:20px;line-height:1;padding:2px 6px;cursor:pointer;border-radius:6px}.icon-btn:hover{color:var(--text);background:var(--bg-input)}.link-btn{background:none;border:none;color:var(--text-dim);font:inherit;cursor:pointer;padding:8px 0}.link-btn:hover{color:var(--text)}.hint{color:var(--text-dim);font-size:13px;margin:0}.hint-small{font-size:12px}.error{color:var(--danger);font-size:13px;margin:0}.warn{color:var(--warn);font-size:13px;margin:8px 0 0}.empty{color:var(--text-dim);font-size:13px;padding:16px 0;margin:0}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}.tag{font-size:10px;padding:1px 5px;border-radius:4px;background:var(--bg-input);color:var(--text-dim)}.tag-audio{color:var(--accent)}.badge{font-size:10px;padding:1px 5px;border-radius:4px;border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}.badge-spotify{color:#1ed760;border-color:#1ed76044}.badge-apple{color:#fa5a7d;border-color:#fa5a7d44}.badge-youtube{color:#ff6b6b;border-color:#ff6b6b44}.room{max-width:620px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:14px}.room-loading{padding-top:64px;align-items:flex-start}.room-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.room-code{display:flex;flex-direction:column}.room-code-label{font-size:11px;color:var(--text-dim)}.room-code strong{font-size:28px;letter-spacing:.16em;font-variant-numeric:tabular-nums}.room-head-actions{display:flex;gap:8px}.conn{font-size:11px;color:var(--text-dim)}.conn-reconnecting{color:var(--warn)}.members{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}.member{display:flex;align-items:center;gap:6px;padding:4px 9px;background:var(--bg-raised);border:1px solid var(--border);border-radius:999px;font-size:12px}.member-offline{opacity:.45}.player{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.stage{position:relative;aspect-ratio:16 / 9;background:#000;border-radius:10px;overflow:hidden}.stage-frame{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.stage-frame iframe{width:1280px;height:720px;border:0;display:block;transform-origin:top left;transform:scale(var(--player-scale, 1))}.stage-idle{position:absolute;top:0;right:0;bottom:0;left:0}.stage-art{width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.4)}.stage-art-empty{background:linear-gradient(135deg,#1a1f2b,#0f1219)}.stage-idle-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px}.stage-idle-overlay p{margin:0;font-size:13px;color:var(--text-dim)}.track-info{margin-top:12px}.track-title{font-size:17px;font-weight:600;line-height:1.4}.track-empty{color:var(--text-dim);font-weight:400;font-size:14px}.track-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--text-dim);font-size:13px;margin-top:2px}.track-owner{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);margin-top:6px}.progress{margin-top:12px}.progress-bar{height:4px;background:var(--bg-input);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);transition:width .25s linear}.progress-times{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-top:4px;font-variant-numeric:tabular-nums}.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-dim);cursor:pointer;margin-left:auto}.toggle input{accent-color:var(--accent);width:16px;height:16px}.addbar{display:flex;gap:8px}.addbar .input{flex:1}.queue{display:flex;flex-direction:column;gap:4px}.queue-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.queue-head h2{font-size:15px}.count{color:var(--text-dim);font-weight:400;font-size:13px}.basis select{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font:inherit;font-size:12px;padding:4px 6px}.round-group{margin-top:8px}.round-label{font-size:11px;color:var(--text-dim);padding:4px 0;border-bottom:1px solid var(--border)}.track-list{list-style:none;margin:0;padding:0}.track-list-muted{opacity:.6}.track-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}.track-row-clickable{padding:0}.candidate-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 0;background:none;border:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.candidate-btn:hover{background:var(--bg-input)}.track-thumb{width:52px;height:30px;object-fit:cover;border-radius:5px;flex:none;background:var(--bg-input)}.track-thumb-empty{background:linear-gradient(135deg,#1a1f2b,#0f1219)}.track-row-main{flex:1;min-width:0}.track-row-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--text-dim)}.owner{display:inline-flex;align-items:center;gap:5px}.track-row-side{display:flex;align-items:center;gap:4px;flex:none}.dur{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums}.history{margin-top:8px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0}.sheet{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:620px;max-height:78vh;overflow-y:auto;padding:16px}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.sheet-head h3{font-size:15px}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:10px 16px;font-size:13px;max-width:calc(100vw - 32px);z-index:60}.toast-error{border-color:var(--danger);color:var(--danger)}.room-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}@media(min-width:640px){.overlay{align-items:center}.sheet{border-radius:var(--radius)}}