:root{--bg:#0e0f13;--panel:#16181f;--panel-2:#1d2029;--line:#2a2e3a;--text:#eceef3;--muted:#8d93a3;--accent:#ffb020;--accent-text:#1a1204;--primary:#1668ff;--good:#36d399;--bad:#ff4d6d;--radius:12px;--topbar:56px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit}button,input{font:inherit;color:inherit}code{background:var(--panel-2);border-radius:5px;padding:1px 5px;font-size:.92em}.muted{color:var(--muted)}.error-text{color:var(--bad)}.app{flex-direction:column;min-height:100%;display:flex}main{flex-direction:column;flex:1;min-height:0;display:flex}.app-game main{height:calc(100dvh - var(--topbar))}.topbar{height:var(--topbar);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#0e0f13eb;flex:none;align-items:center;gap:10px;padding:0 12px;transition:border-bottom-color .16s,box-shadow .16s;display:flex;position:sticky;top:0}.brand{letter-spacing:.2px;font-weight:800;text-decoration:none}.pill{border:1px solid var(--line);background:var(--panel);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;align-items:center;gap:6px;max-width:280px;padding:5px 10px;font-size:13px;display:inline-flex;overflow:hidden}button.pill{cursor:pointer}button.pill:hover:not(.on){color:var(--text)}.pill .dot{background:var(--muted);border-radius:50%;flex:none;width:8px;height:8px}.pill.ok{color:var(--text)}.pill.ok .dot{background:var(--good);box-shadow:0 0 8px var(--good)}.icon-btn{cursor:pointer;background:0 0;border:none;border-radius:10px;flex:none;place-items:center;width:36px;height:36px;text-decoration:none;display:inline-grid}.icon-btn:hover{background:var(--panel-2)}.icon-btn.subtle{color:var(--muted);width:30px;height:30px}.icon-btn.small{border:1px solid var(--line);width:28px;height:28px;font-size:18px;line-height:1}.btn{border:1px solid var(--line);background:var(--panel-2);cursor:pointer;white-space:nowrap;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-weight:500;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){border-color:#3d4354}.btn:disabled{opacity:.45;cursor:default}.btn.big{border-radius:14px;padding:12px 22px;font-size:16px}.btn.small{border-radius:8px;padding:4px 9px;font-size:13px}.round{border:1px solid var(--line);background:var(--panel-2);cursor:pointer;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:grid}.round.primary{background:var(--accent);border-color:var(--accent);width:52px;height:52px;color:var(--accent-text)}.round:disabled{opacity:.5;cursor:default}.link-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;font-size:14px;display:inline-flex}.link-btn:hover{color:var(--text)}.spinner{vertical-align:-3px;border:2px solid;border-right-color:#0000;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.scrim{opacity:0;pointer-events:none;z-index:20;background:#00000080;transition:opacity .2s;position:fixed;inset:0}.scrim.open{opacity:1;pointer-events:auto}.drawer{background:var(--panel);border-right:1px solid var(--line);z-index:21;visibility:hidden;flex-direction:column;width:min(400px,92vw);transition:transform .22s;display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.drawer.open{visibility:visible;transform:none}.drawer-head{height:var(--topbar);border-bottom:1px solid var(--line);flex:none;justify-content:space-between;align-items:center;padding:0 10px 0 16px;display:flex}@media (hover:none){.recent li .icon-btn{opacity:1}}.search-box{background:var(--panel);border:1px solid var(--line);width:100%;color:var(--muted);border-radius:14px;align-items:center;gap:10px;padding:6px 6px 6px 14px;display:flex}.search-box:focus-within{border-color:var(--primary)}.search-box input{min-width:0;color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:8px 0;font-size:16px}.page{flex-direction:column;gap:16px;width:100%;padding:20px 16px 40px;display:flex}.page-msg{text-align:center;color:var(--muted);padding:40px 16px}.results{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.timeline{cursor:pointer;touch-action:none;border:1px solid var(--line);border-radius:10px;flex:none;display:block}.tracks{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex:none}.tracks summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:12px 14px;font-weight:600;list-style:none;display:flex}.tracks summary::-webkit-details-marker{display:none}.tracks summary svg{transition:transform .15s}.tracks[open] summary svg{transform:rotate(90deg)}.count{color:var(--muted);font-weight:500}.tracks ul{margin:0;padding:0 8px 8px;list-style:none}.tracks li{border-top:1px solid var(--line);align-items:center;gap:12px;padding:8px 6px;display:flex}.toggle{border:1px solid var(--line);min-width:92px;color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:6px 10px;font-size:13px;display:inline-flex}.toggle.on{color:var(--accent);background:#ffb02024;border-color:#ffb02080}.volume{appearance:none;background:linear-gradient(to right, var(--accent) var(--fill,66%), var(--line) var(--fill,66%));cursor:pointer;border-radius:999px;outline:none;flex:none;width:96px;height:4px}.volume::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border:3px solid var(--accent);border-radius:50%;width:14px;height:14px}.volume::-moz-range-thumb{background:var(--text);border:3px solid var(--accent);border-radius:50%;width:9px;height:9px}.volume:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #ffb02059}.volume:disabled{opacity:.3;cursor:default}.sound-control{align-items:center;gap:8px;display:inline-flex}.sound-control .toggle{min-width:0}.loading-label{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.game{flex-direction:column;flex:1;gap:10px;min-height:0;padding:10px 12px 12px;display:flex}.number{border:1px solid var(--line);background:var(--panel);text-align:center;font-variant-numeric:tabular-nums;border-radius:8px;width:52px;padding:6px}.number:focus{border-color:var(--primary);outline:none}.check{color:var(--muted);cursor:pointer;align-items:center;gap:6px;font-size:14px;display:inline-flex}.check input{accent-color:var(--accent);width:16px;height:16px}.game .tracks summary{padding:8px 12px}.game .tracks ul{max-height:30vh;overflow-y:auto}.stage{border-radius:var(--radius);border:1px solid var(--line);flex:1;min-height:250px;position:relative;overflow:hidden}.stage-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hud{font-variant-numeric:tabular-nums;background:#0e0f13c7;border-radius:10px;align-items:center;gap:12px;padding:6px 12px;font-size:14px;display:flex;position:absolute;top:10px;right:10px}.hud .good{color:var(--good)}.hud .bad{color:var(--bad)}.input-hint{max-width:calc(100% - 360px);color:var(--muted);background:#0e0f13c7;border-radius:10px;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;font-size:13px;display:flex;position:absolute;top:10px;left:10px}.input-hint.ok{color:var(--good)}.result-card{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:16px;width:min(380px,100% - 32px);padding:24px 16px 16px;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #00000080}.result-card p{color:var(--muted);margin:4px 0 0}.result-score{color:var(--accent);font-size:56px;font-weight:800}.result-close{color:var(--muted);position:absolute;top:8px;right:8px}.result-close:hover{color:var(--text)}.result-again{justify-content:center;width:100%;margin-top:16px;font-weight:600}.drop-overlay{border:2px dashed var(--accent);z-index:30;pointer-events:none;background:#0e0f13d9;border-radius:20px;place-items:center;font-size:22px;font-weight:700;display:grid;position:fixed;inset:12px}.toast{border:1px solid var(--bad);color:#ffd0da;z-index:40;cursor:pointer;background:#2a1520;border-radius:12px;max-width:calc(100vw - 32px);padding:10px 16px;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}@media (width<=720px){.toggle{min-width:0}.toggle span{display:none}.tracks .volume{width:64px}.input-hint{max-width:calc(100% - 20px);top:54px}.pill{max-width:150px}}.composer-filter{flex-wrap:wrap;gap:6px;margin:4px 0 14px;display:flex}.seg.on{background:var(--panel-2);color:var(--accent)}.mixer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex:none}.mixer summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:12px 14px;font-weight:600;list-style:none;display:flex}.mixer summary::-webkit-details-marker{display:none}.mixer summary svg{transition:transform .15s}.mixer[open] summary svg{transform:rotate(90deg)}.soloing{background:var(--accent);color:var(--accent-text);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700}.strips{gap:8px;padding:12px;display:flex;overflow-x:auto}.strip{background:var(--panel-2);border:1px solid var(--line);border-top:3px solid var(--track);border-radius:10px;flex-direction:column;flex:none;align-items:center;gap:5px;width:94px;padding:7px 8px 8px;display:flex}.strip.silent{opacity:.5}.strip-name{color:var(--text);text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;font-weight:600;line-height:1.25;display:-webkit-box;overflow:hidden}.strip-meta{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;font-size:10px}.fader{flex-direction:column;align-items:center;gap:4px;display:flex}.fader input[type=range]{writing-mode:vertical-lr;width:20px;height:72px;accent-color:var(--accent);cursor:pointer;direction:rtl}.fader-value{color:var(--muted);font-variant-numeric:tabular-nums;font-size:10px}.strip-buttons{gap:4px;display:flex}.ms{background:var(--panel);border:1px solid var(--line);color:var(--muted);cursor:pointer;font:inherit;border-radius:6px;padding:5px 9px;font-size:11px;font-weight:700;line-height:1}.ms:hover:not(.on){color:var(--text)}.strip-play{background:var(--panel);border:1px solid var(--line);color:var(--muted);cursor:pointer;font:inherit;border-radius:6px;justify-content:center;align-items:center;gap:4px;width:100%;padding:4px 8px;font-size:11px;display:flex}.strip-play:hover:not(.on):not(:disabled){color:var(--text)}.strip-play:disabled{cursor:default;opacity:.35}.input-hint{gap:10px}.window{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}:root{--pausing:#f2353f;--tint:#272a33;--high:#f1f3f7}.topbar{grid-template-columns:1fr auto 1fr;gap:10px;display:grid}.topbar>:first-child{justify-self:start}.topbar>:last-child{justify-self:end}.song-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:8px;max-width:46vw;font-weight:600;text-decoration:none;display:inline-flex;overflow:hidden}.song-title .by:hover{color:var(--text)}.keyboard-pill .dot{background:var(--muted);border-radius:50%;flex:none;width:8px;height:8px}.keyboard-pill.ok .dot{background:var(--good);box-shadow:0 0 0 3px #36d3992e}.controls{border-bottom:1px solid var(--line);flex-wrap:wrap;flex:none;align-items:flex-end;gap:14px 18px;padding:10px 16px 12px;display:flex}.controls-spacer{flex:1 1 0;min-width:0}.group{flex-direction:column;flex:none;gap:7px;display:flex}.group-label{color:var(--muted);white-space:nowrap;align-items:baseline;gap:8px;font-size:13px;font-weight:600;display:flex}.group-label em{color:#6b7080;font-variant-numeric:tabular-nums;font-style:normal;font-weight:400}.group-row{align-items:center;gap:10px;display:flex}.transport{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;transition:background .12s;display:grid}.transport:hover:not(:disabled){filter:brightness(1.1)}.transport.playing{background:var(--pausing)}.transport:disabled{background:var(--tint);color:var(--muted);cursor:default}.transport svg{margin-left:1px}.transport.playing svg{margin-left:0}.ctl{background:var(--tint);width:38px;height:38px;color:var(--muted);cursor:pointer;border:none;border-radius:50%;flex:none;place-items:center;transition:background .12s,color .12s;display:grid}.ctl:hover:not(:disabled):not(.on){color:var(--text)}.ctl.on{background:var(--high);color:#15171d}.ctl.on:hover:not(:disabled){background:#fff}.ctl:disabled{opacity:.4;cursor:default}.plain-btn{width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;border:none;flex:none;place-items:center;display:grid}.plain-btn:hover:not(:disabled){color:var(--text)}.plain-btn:disabled{opacity:.3;cursor:default}.pill{height:38px;color:var(--text);background:0 0;border-color:#343842;gap:2px;max-width:none;padding:0 6px;font-size:14px}button.pill:hover:not(.on){border-color:#474c59}button.pill.on:hover{background:#fff;border-color:#fff}button.pill.on{background:var(--high);border-color:var(--high);color:#15171d}.pill-text{color:var(--muted);padding:0 4px;font-size:14px}.step{width:30px;height:30px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;place-items:center;display:grid}.step:hover:not(:disabled){background:var(--tint)}.step:disabled{opacity:.3;cursor:default}.stepper-value{text-align:center;font-variant-numeric:tabular-nums;min-width:52px}.pill.range{padding:0 4px 0 10px}.pill.volume input[type=range]{width:80px;accent-color:var(--primary);cursor:pointer}.pill.volume.off input[type=range]{accent-color:var(--muted)}.speaker{width:30px;height:30px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;place-items:center;display:grid}.pill.volume.off .speaker{color:var(--muted)}.speaker:hover{background:var(--tint)}.dropdown{position:relative}.dropdown-trigger{gap:6px!important;padding:0 8px 0 12px!important}.dropdown-trigger.wide .dropdown-label{text-align:left;min-width:104px}.dropdown-label{text-overflow:ellipsis;white-space:nowrap;max-width:190px;overflow:hidden}.dropdown-trigger svg:last-child{color:var(--muted);flex:none}.dropdown-trigger.open svg:last-child{transform:rotate(180deg)}.dropdown-menu{z-index:60;border:1px solid var(--line);background:var(--panel-2);border-radius:12px;width:max-content;max-width:320px;max-height:60vh;padding:6px;position:fixed;overflow-y:auto;box-shadow:0 14px 40px #00000080}.dropdown-item{width:100%;color:var(--text);cursor:pointer;font:inherit;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 10px 8px 4px;font-size:14px;display:flex}.dropdown-item:hover:not(:disabled){background:#ffffff0f}.dropdown-item:disabled{color:var(--muted);cursor:default}.dropdown-tick{width:20px;color:var(--text);flex:none;place-items:center;display:grid}.dropdown-dot{border-radius:50%;flex:none;width:9px;height:9px}.dropdown-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.dropdown-note{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:13px}.mixer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex:none;margin:10px 16px 0}.metronome-strip .strip-buttons{color:var(--muted);align-items:center;height:22px}.group{gap:4px}.group-label{font-size:13px;line-height:18px}.group-row{gap:8px}.ctl,.transport{width:32px;height:32px}.plain-btn{width:28px;height:28px}.pill{gap:6px;height:32px;padding:0 14px 0 16px;font-size:15px}.pill-text{padding:0;font-size:15px}.pill.range{gap:6px}.pill.range .pill-text:first-child{margin-right:2px}.number{text-align:center;background:var(--tint);width:32px;height:24px;color:var(--text);font-variant-numeric:tabular-nums;border:none;border-radius:8px;padding:0;font-size:15px;line-height:16px}.number:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.number.bpm{width:44px}.stepper-value{min-width:46px;font-size:15px}.speaker{width:26px;height:26px}.dropdown-trigger{padding:0 10px 0 14px!important}.pill.stepper{gap:2px;padding:0 6px}.step{width:20px;height:20px}.pill.stepper .number{background:0 0;width:30px}.pill.stepper .number.bpm{width:34px}.stepper-value{min-width:41px}.pill.volume{gap:8px;padding:0 12px}.speaker{width:14px;height:14px;color:var(--text);border-radius:0;padding:0}.speaker:hover{color:var(--primary);background:0 0}.pill.volume input[type=range]{appearance:none;background:0 0;width:76px;height:12px;margin:0}.pill.volume input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--primary) var(--filled,100%), #3a3f4b var(--filled,100%));border-radius:2px;height:4px}.pill.volume input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px;margin-top:-4px}.pill.volume input[type=range]::-moz-range-track{background:#3a3f4b;border-radius:2px;height:4px}.pill.volume input[type=range]::-moz-range-progress{background:var(--primary);border-radius:2px;height:4px}.pill.volume input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:12px;height:12px}.pill.volume.off input[type=range]::-webkit-slider-runnable-track{background:#3a3f4b}.icon{flex:none;display:block}.pill{flex:none;overflow:visible}.pill.volume input[type=range]{cursor:pointer}.pill.volume input[type=range]::-webkit-slider-thumb{cursor:grab}.pill.volume input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}.fader input[type=range]{cursor:ns-resize}.fader input[type=range]::-webkit-slider-thumb{cursor:grab}.fader input[type=range]::-moz-range-thumb{cursor:grab}.pill.volume input[type=range],.fader input[type=range]{flex:none}.pill.volume{width:122px}.ms,.strip-play,.btn.small{background:var(--tint);color:var(--muted);border:none}.ms:hover:not(.on),.strip-play:hover:not(.on):not(:disabled),.btn.small:hover:not(.on){color:var(--text)}.ms.on,.strip-play.on,.btn.small.on{background:var(--high);color:#15171d}.ms.on:hover,.strip-play.on:hover,.btn.small.on:hover{background:#fff}.fader input[type=range]{writing-mode:vertical-lr;appearance:none;direction:rtl;background:0 0;width:12px;height:76px;padding:0}.fader input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to top, var(--primary) var(--filled,67%), #3a3f4b var(--filled,67%));border-radius:2px;width:4px}.fader input[type=range]::-webkit-slider-thumb{appearance:none;cursor:grab;background:#fff;border-radius:50%;width:12px;height:12px;margin-left:-4px}.fader input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}.fader input[type=range]::-moz-range-track{background:#3a3f4b;border-radius:2px;width:4px}.fader input[type=range]::-moz-range-progress{background:var(--primary);border-radius:2px;width:4px}.fader input[type=range]::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:12px;height:12px}.fader input[type=range]:disabled::-webkit-slider-runnable-track{background:#3a3f4b}.fader input[type=range]:disabled::-webkit-slider-thumb{cursor:default;background:#6b7080}.ctl,.transport,.plain-btn,.step,.speaker{padding:0}.transport svg,.transport.playing svg{margin-left:0}.ms{border-radius:6px;place-items:center;width:26px;height:22px;padding:0;font-size:11px;font-weight:700;line-height:1;display:grid}.strip-play{border-radius:6px;padding:4px 8px;font-size:11px}.strip-buttons{gap:6px}.ctl.on:hover,.ms.on:hover,.strip-play.on:hover,.btn.small.on:hover,.pill.on:hover{color:#15171d}:root{--gutter:16px}.topbar{padding:0 var(--gutter)}.topbar-left{align-items:center;gap:2px;display:flex}.topbar-left>.icon-btn:first-child{margin-left:-7px}.game{padding:0 0 var(--gutter);gap:12px}.controls{padding:12px var(--gutter)}.game>.mixer,.game>.timeline,.game>.stage{margin:0 var(--gutter)}.page{padding:20px var(--gutter) 40px}.page>.controls{margin:0 calc(var(--gutter) * -1)}.page>.mixer{margin:0}.stage-empty{z-index:3;flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;top:28%;left:50%;transform:translate(-50%)}.stage-empty p{color:var(--muted);margin:0;font-size:15px}.song-title .by{color:var(--muted);font-weight:400;text-decoration:none}.result-emoji{margin-bottom:6px;font-size:56px;line-height:1}.controls{scrollbar-width:thin;scrollbar-color:#343842 transparent;flex-wrap:nowrap;overflow:auto hidden}.controls::-webkit-scrollbar{height:8px}.controls::-webkit-scrollbar-thumb{background:#343842;border-radius:4px}.controls::-webkit-scrollbar-thumb:hover{background:#474c59}.topbar .pill{height:auto;padding:5px 10px;font-size:13px}.brand-logo{width:110px;height:18px}.home{width:100%;max-width:1180px;margin:0 auto;padding:0 20px 64px}.centred{text-align:center}.hero{flex-direction:column;align-items:center;gap:14px;padding:56px 0 44px;display:flex}.hero-logo{width:min(380px,70vw)}.hero-tagline{color:var(--muted);margin:-4px 0 0;font-size:15px}.search-box.hero-search{border-radius:999px;width:min(430px,100%);margin-top:8px}.scope{margin:0 0 44px}.scope h2{letter-spacing:-.2px;align-items:center;gap:10px;margin:0 0 16px;font-size:21px;display:flex}.scope-emoji{font-size:20px;line-height:1}.artist-grid{border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;display:grid;overflow:hidden}.artist-card{background:var(--panel);box-shadow:0 0 0 1px var(--line);grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;gap:2px 12px;padding:14px 16px;text-decoration:none;transition:background .12s;display:grid}.artist-card:hover,.artist-card:focus-visible{background:var(--panel-2);outline:none}.avatar{letter-spacing:.3px;color:#fff;border-radius:12px;flex:none;grid-row:span 2;place-items:center;font-weight:700;display:grid}.artist-name{align-self:end;font-size:14.5px;line-height:1.3}.artist-count{color:var(--muted);align-self:start;align-items:center;gap:5px;font-size:13px;display:inline-flex}.song-list{border:1px solid var(--line);border-radius:var(--radius);margin:0;padding:0;list-style:none;overflow:hidden}.song-row-item{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;display:flex}.song-row-item:last-child{border-bottom:none}.song-row-item:hover{background:var(--panel-2)}.song-row{flex:1;align-items:center;gap:12px;min-width:0;padding:10px 6px 10px 12px;text-decoration:none;display:flex}.song-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:8px}.song-play{border:1px solid var(--line);width:30px;height:30px;color:var(--muted);cursor:pointer;background:0 0;border-radius:50%;flex:none;place-items:center;margin-left:12px;transition:background .12s,border-color .12s,color .12s;display:grid}.song-row-item:hover .song-play{border-color:var(--muted);color:var(--text)}.song-play.on,.song-row-item:hover .song-play.on{border-color:var(--bad);background:var(--bad);color:#fff}.song-row-item.sounding .song-row-title{color:var(--bad)}.song-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.song-row-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14.5px;line-height:1.3;display:-webkit-box;overflow:hidden}.song-meta{color:var(--muted);font-size:12.5px}.fav{opacity:0;flex:none;margin-right:8px;transition:opacity .12s}.song-row-item:hover .fav,.song-row-item:focus-within .fav,.fav.on{opacity:1}.fav.on{color:var(--accent)}@media (hover:none){.fav{opacity:1}}.difficulty{flex:none;gap:3px;padding-left:8px;display:inline-flex}.difficulty .pip{background:var(--line);border-radius:50%;width:6px;height:6px}.difficulty.lv1 .pip.on{background:var(--good)}.difficulty.lv2 .pip.on{background:var(--accent)}.difficulty.lv3 .pip.on{background:var(--bad)}.show-all{border:1px solid var(--line);height:28px;color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;margin-top:14px;padding:0 14px;font-size:13px;transition:color .12s,border-color .12s}.show-all:hover{color:var(--text);border-color:var(--muted)}.show-all .count{opacity:.75;margin-left:6px}.show-all:disabled{opacity:.5;cursor:default}.app-body{flex:1;align-items:flex-start;min-height:0;display:flex}.app-body>main{flex:1;min-width:0}.artist-panel{width:400px;top:var(--topbar);height:calc(100dvh - var(--topbar));background:var(--panel);border-left:1px solid var(--line);flex-direction:column;flex:none;gap:10px;padding:0 16px 24px;animation:.16s panel-in;display:flex;position:sticky;overflow-y:auto}@keyframes panel-in{0%{opacity:0}}.panel-scrim{display:none}.artist-panel>*{flex:none}.artist-panel-head{align-items:center;gap:12px;display:flex}.artist-panel-title{flex:1;min-width:0}.artist-panel-title h2{margin:0;font-size:19px;line-height:1.2}.artist-panel .search-box.panel-search{width:100%;margin:2px 0}.panel-section{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:6px 2px 2px;font-size:12px}@media (width<=720px){.artist-panel{z-index:20;border-left:none;border-top:1px solid var(--line);border-radius:16px 16px 0 0;width:100%;max-height:82dvh;animation:.18s sheet-in;position:fixed;inset:auto 0 0}.panel-scrim{display:block}@keyframes sheet-in{0%{opacity:0;transform:translateY(24px)}}.hero{padding:32px 0 28px}.home{padding:0 14px 48px}}.brand{align-items:center;transition:opacity .16s,transform .16s;display:inline-flex}.brand.hidden{opacity:0;pointer-events:none;transform:translateY(-3px)}.search-box.hero-search{cursor:text;justify-content:center}.search-box.hero-search input{flex:0 auto}.search-box.hero-search:not(.filled){padding-left:6px}.search-box.hero-search.filled{justify-content:flex-start}.search-box.hero-search.filled input{flex:1;width:auto}.search-box.hero-search .clear{color:var(--muted)}.search-box.hero-search .clear:hover{color:var(--text);background:0 0}.icon-btn.primary-btn{background:var(--primary);color:#fff;cursor:pointer;border-radius:50%;width:34px;height:34px}.icon-btn.primary-btn:hover{filter:brightness(1.12)}.scope-toggle{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:10px;padding:0;display:inline-flex}.scope-toggle:hover{color:var(--primary)}.scope-toggle .icon{color:var(--muted);opacity:0;transition:opacity .14s}.scope-toggle:hover .icon,.scope-toggle:focus-visible .icon{opacity:.5}.top-sentinel{height:1px;margin-bottom:-1px;display:block}.topbar.stuck,.scope-head.stuck{box-shadow:0 6px 16px -8px #000000d9}.scope-head{top:var(--topbar);z-index:5;background:var(--bg);margin:0 0 10px;padding:10px 0;transition:box-shadow .16s;position:sticky}.artist-panel-head{z-index:2;background:var(--panel);padding:16px 0 10px;position:sticky;top:0}.fav-static{color:var(--muted);flex:none}.fav-static:hover{color:var(--text)}.fav-static.on,.fav-static.on:hover{color:var(--accent)}.artist-panel.as-modal{z-index:30;border:1px solid var(--line);border-radius:var(--radius);width:min(440px,92vw);height:auto;max-height:min(80dvh,720px);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 24px 60px -20px #000000e6}@media (width<=720px){.artist-panel.as-modal{border-radius:16px 16px 0 0;width:100%;top:auto;bottom:0;left:0;transform:none}}.drawer-find{align-items:stretch;gap:8px;padding:12px 12px 8px;display:flex}.drawer-find .search-box{border-radius:999px;flex:1;width:auto;min-width:0}.upload-btn{aspect-ratio:1;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;border-radius:50%;flex:none;align-self:stretch;place-items:center;display:grid}.upload-btn:hover{color:var(--text);border-color:var(--muted)}.drawer-body{flex:1;min-height:0;overflow-y:auto}.drawer-list{margin:0 12px 16px}.drawer-tabs{z-index:2;background:var(--panel);gap:6px;padding:8px 12px 10px;display:flex;position:sticky;top:0}.tab{border:1px solid var(--line);height:28px;color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;padding:0 14px;font-size:13px}.tab:hover:not(.on){color:var(--text);border-color:var(--muted)}.tab.on{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600}.drawer-empty{padding:4px 16px 16px;font-size:14px}.song-row-item.current{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--primary)}.song-row-item[draggable=true]{cursor:grab}.song-row-item.dragging{opacity:.4;cursor:grabbing}.song-row-item.over{box-shadow:inset 0 2px 0 var(--primary)}.strip{position:relative}.strip:after{content:"";border-radius:inherit;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 1px var(--track), 0 0 14px -4px var(--track);transition:opacity .26s ease-out;position:absolute;inset:0}.strip.sounding:after{opacity:1;transition-duration:0s}.strip.sounding .strip-name{color:var(--track)}.results{width:100%;max-width:820px;margin:0 auto;padding:28px 20px 64px}.search-box.results-search{border-radius:999px;margin-bottom:20px}.results-count{margin-bottom:8px;font-size:13px}.song-row-item.sounding:before{content:"";transform-origin:0;background:var(--bad);width:100%;height:2px;animation:preview-progress var(--preview,60s) linear forwards;position:absolute;bottom:0;left:0}@keyframes preview-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.song-row-item{position:relative;overflow:hidden}.tip{z-index:60;border:1px solid var(--line);background:var(--panel-2);width:max-content;max-width:min(320px,100vw - 16px);color:var(--text);pointer-events:none;border-radius:10px;align-items:center;gap:8px;padding:7px 10px;font-size:12.5px;line-height:1.35;animation:.11s ease-out tip-in;display:flex;position:fixed;transform:translate(-50%,-100%);box-shadow:0 10px 28px -10px #000000e6}.tip.below{transform:translate(-50%)}@keyframes tip-in{0%{opacity:0}}.tip-label{min-width:0}.tip-key{border:1px solid var(--line);background:var(--bg);color:var(--accent);letter-spacing:.3px;border-radius:6px;flex:none;padding:2px 7px;font-family:inherit;font-size:11.5px;font-weight:600}.logo{background:currentColor;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.dropdown-dot{position:relative}.dropdown-dot.sounding:after{content:"";box-shadow:0 0 0 2px var(--dot);border-radius:50%;animation:.9s ease-out infinite dot-ring;position:absolute;inset:0}@keyframes dot-ring{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}.dropdown-dot.sounding{box-shadow:0 0 10px -1px var(--dot)}.footer{border-top:1px solid var(--line);color:var(--muted);text-align:center;margin-top:56px;padding-top:24px;font-size:13px}.footer a{color:var(--text);text-decoration:none}.footer a:hover{color:var(--primary)}.drawer-link-in{padding:0 12px 4px}.drawer-link-in .search-box{border-radius:999px}.topbar.bare{box-shadow:none;border-bottom-color:#0000}.panel-find{position:relative}.search-box.panel-search{border-radius:999px}.panel-nothing{z-index:3;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:10px;margin:0;padding:8px 12px;font-size:12.5px;position:absolute;top:calc(100% + 6px);left:0;right:0;box-shadow:0 10px 28px -12px #000000e6}.artist-card.open{background:#15233f;background:color-mix(in oklab, var(--primary) 18%, var(--panel))}.artist-card.open:hover{background:color-mix(in oklab, var(--primary) 26%, var(--panel))}.artist-card.open .artist-name{color:var(--text);font-weight:600}