:root{--row: 76px;--bg: #e8ebf2;--ink: #181c3a;--muted: #5d6384;--card: #ffffff;--accent: #2f4bff;--gold: #ffd23f}@media (prefers-color-scheme: dark){:root{--bg: #12142b;--ink: #eef0ff;--muted: #9aa0c8;--card: #1d2042;--accent: #7d8dff}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:DM Sans,system-ui,sans-serif}main{max-width:640px;margin:0 auto;padding:48px 16px 80px}h1{font:800 clamp(2.4rem,8vw,3.6rem)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;margin:0 0 10px}header p{margin:0 0 32px;color:var(--muted)}.notice{color:var(--muted)}.list{list-style:none;margin:0;padding:0;position:relative}.row{position:absolute;left:0;right:0;top:0;height:var(--row);display:flex;align-items:center;gap:14px;padding:0 16px 0 10px;background:var(--card);border-radius:14px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.row.top{box-shadow:inset 5px 0 0 var(--gold)}.row img{border-radius:8px;object-fit:cover;background:var(--bg)}.meta{display:flex;flex-direction:column;min-width:0;flex:1}.meta a{color:inherit;text-decoration:none;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta a:hover{text-decoration:underline}.meta span{color:var(--muted);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank{color:var(--muted);font-size:.8rem;white-space:nowrap}.top .rank{color:var(--ink);font-weight:500}.vote{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:56px;flex:none;border:2px solid var(--bg);border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;font:800 1.15rem/1 Bricolage Grotesque,sans-serif;transition:transform .15s,background .15s,color .15s,border-color .15s}.vote:hover{border-color:var(--accent);color:var(--accent)}.vote:active{transform:scale(.92)}.vote.on{background:var(--accent);border-color:var(--accent);color:#fff}.vote:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){.row,.vote{transition:none}}.nav{color:var(--accent);font-weight:500;text-decoration:none}.nav:hover{text-decoration:underline}h2{font:800 1.4rem/1 Bricolage Grotesque,sans-serif;margin:32px 0 14px}.stage{position:relative}.video{aspect-ratio:16 / 9;width:100%;min-height:200px;background:#000;border-radius:14px;overflow:hidden}.video iframe,.video #yt-player{width:100%;height:100%;display:block}.start{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:fit-content;height:fit-content;padding:14px 26px;border:0;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer;font:800 1.1rem/1 Bricolage Grotesque,sans-serif}.start:disabled{opacity:.6;cursor:default}.controls{display:flex;align-items:center;gap:10px;margin-top:16px;padding:14px 16px;background:var(--card);border-radius:14px}.controls .meta{flex:1}.controls button{padding:10px 18px;border:2px solid var(--bg);border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;font:500 .95rem DM Sans,sans-serif}.controls button:hover{border-color:var(--accent);color:var(--accent)}.controls button:focus-visible,.start:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.upnext{list-style:none;margin:0;padding:0;display:grid;gap:8px}.upnext li{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;background:var(--card);border-radius:12px}.upnext img{border-radius:6px;object-fit:cover}.upnext .t{color:var(--ink);font-weight:500}main.wide{max-width:1100px}.player-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:stretch}.queue{position:relative;min-height:320px}.queue-inner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:var(--card);border-radius:14px;overflow:hidden}.queue-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:2px solid var(--bg)}.queue-head .meta{flex:1}.queue-head .meta strong{font:800 1.15rem/1.2 Bricolage Grotesque,sans-serif}.queue-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}.queue-scroll .notice{margin:4px}.queue .upnext{display:flex;flex-direction:column;gap:8px}.queue .upnext li{min-width:0;background:var(--bg);border-radius:10px}.queue .upnext .meta{min-width:0;flex:1}.queue .upnext .rank{flex:none}.remove-btn{margin-left:auto;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-weight:700}.remove-btn:hover{color:var(--accent);background:var(--bg)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;flex:none;border:2px solid var(--bg);border-radius:10px;background:transparent;color:var(--ink);cursor:pointer}.icon-btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}.icon-btn:disabled{cursor:default;color:var(--muted)}.icon-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.icon-btn.spin svg{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.icon-btn.spin svg{animation:none}}@media (max-width: 800px){.player-layout{grid-template-columns:1fr}.main-col{order:-1}.queue{position:static;min-height:0}.queue-inner{position:static;max-height:440px}}.row.playing,.queue .upnext li.playing{box-shadow:0 0 0 2px var(--gold),0 0 12px 2px #ffd23f73}.playing .rank{color:var(--ink);font-weight:500}.vote:disabled{opacity:.45;cursor:default}.vote:disabled:hover{border-color:var(--bg);color:var(--muted)}.search-layout{align-items:start}.queue.search-pane{position:sticky;top:16px;height:calc(100vh - 32px);min-height:420px;max-height:720px}.search-box{display:flex;gap:8px;padding:12px 14px;border-bottom:2px solid var(--bg)}.search-box input{flex:1;min-width:0;padding:10px 12px;border:2px solid var(--bg);border-radius:10px;background:transparent;color:var(--ink);font:400 .95rem DM Sans,sans-serif}.search-box input::placeholder{color:var(--muted)}.search-box input:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.pill{padding:10px 16px;border:2px solid var(--accent);border-radius:10px;background:transparent;color:var(--accent);cursor:pointer;font:500 .95rem DM Sans,sans-serif;white-space:nowrap}.pill:hover:not(:disabled){background:var(--accent);color:var(--card)}.pill:disabled{opacity:.5;cursor:default}.pill:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.add-btn{padding:6px 12px;flex:none}.more{width:100%;margin-top:10px}.search-count{text-align:center;color:var(--muted);font-size:.8rem;margin:10px 0 0}@media (max-width: 800px){.queue.search-pane{position:static;height:auto;min-height:0;max-height:none}.vote-col{order:-1}}.cover{flex:none;border-radius:8px;object-fit:cover;background:var(--bg)}.upnext .cover{border-radius:6px}.cover-fallback{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--muted) 22%,transparent);line-height:1;-webkit-user-select:none;user-select:none}