:root{--bg:#111;--surface:#1c1c1c;--border:#333;--text:#eee;--muted:#9a9a9a;--accent:#1db954;--warn:#f5a623;--bad:#ff5c5c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.4}.app{max-width:640px;padding:.75rem 1rem calc(1rem + env(safe-area-inset-bottom));margin:0 auto}header{justify-content:space-between;align-items:center;gap:1rem;display:flex}h1{align-items:center;gap:.5rem;margin:.25rem 0;font-size:1.3rem;display:flex}h1 .logo{width:1.8rem;height:1.8rem}h2{font-size:1.15rem}h3{margin:1.25rem 0 .25rem;font-size:1rem}code{word-break:break-all;background:#222;border-radius:4px;padding:.1rem .3rem}.hint{color:var(--muted);font-size:.9rem}button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:.7rem 1.2rem;font-weight:600}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);color:#000}button.secondary{color:var(--text);background:#2c2c2c}button.link{color:var(--muted);background:0 0;padding:.25rem;font-size:.85rem;font-weight:400;text-decoration:underline}button.big{width:100%;padding:1rem;font-size:1.2rem}.actions{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.actions.column{flex-direction:column}.actions.sticky{background:var(--bg);padding:.75rem 0;position:sticky;bottom:0}.actions>button{flex:1}.box{background:var(--surface);border-left:4px solid var(--border);border-radius:8px;margin:.75rem 0;padding:.6rem .8rem}.box.warn{border-left-color:var(--warn)}.box.error{border-left-color:var(--bad);justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.box ul{margin:.25rem 0 0;padding-left:1.2rem}.playlist-list{margin:0;padding:0;list-style:none}.playlist-list li{border-bottom:1px solid var(--border)}.playlist-list label{cursor:pointer;grid-template-columns:auto 1fr;column-gap:.75rem;padding:.6rem .25rem;display:grid}.playlist-list input{grid-row:span 2;align-self:center;width:1.3rem;height:1.3rem}.playlist-list .meta{color:var(--muted);font-size:.85rem}.playlist-list li.disabled{opacity:.45}.chips{flex-wrap:wrap;gap:.35rem;display:flex}.chip{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.15rem .45rem;font-size:.85rem}.chip.ok b{color:var(--accent)}.chip.bad{border-color:var(--bad);color:var(--bad)}.scanner{background:#000;border-radius:12px;width:100%;min-height:240px;overflow:hidden}.round-label{color:var(--muted);text-align:center;margin:.5rem 0}.reveal-card{background:var(--surface);border:2px solid var(--border);text-align:center;border-radius:16px;padding:2rem 1rem}.reveal-card.revealed{border-color:var(--accent)}.reveal-card .year{letter-spacing:.05em;font-size:4.5rem;font-weight:800;line-height:1.1}.reveal-card .title{margin-top:.75rem;font-size:1.2rem}.reveal-card .artist{color:var(--muted);margin-top:.25rem}.search{align-items:center;gap:.5rem;margin:.5rem 0;display:flex}.search input{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;flex:1;padding:.55rem 1rem}.search input:focus{outline:2px solid var(--accent);outline-offset:1px}.mode-list{flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none;display:flex}.mode-list label{background:var(--surface);border:2px solid var(--border);cursor:pointer;border-radius:12px;grid-template-columns:auto 1fr;gap:.2rem .75rem;padding:.9rem 1rem;display:grid}.mode-list label.selected{border-color:var(--accent)}.mode-list input{width:1.2rem;height:1.2rem;accent-color:var(--accent);grid-row:span 2;align-self:center}.mode-list .name{font-weight:600}.mode-list .meta{color:var(--muted);font-size:.85rem}.year-chart{margin:.5rem 0 1rem}.year-chart figcaption{min-height:1.4em;margin-bottom:.4rem;font-size:.9rem}.year-chart .muted{color:var(--muted)}.year-chart .bars{border-bottom:1px solid var(--border);touch-action:pan-y;align-items:flex-end;height:120px;display:flex}.year-chart .bar-slot{cursor:pointer;flex:1;align-items:flex-end;height:100%;padding:0 .5px;display:flex}.year-chart .bar-slot.active{background:#ffffff0f}.year-chart .bar{background:var(--accent);border-radius:2px 2px 0 0;width:100%}.year-chart .bar.off{background:#555}.year-chart .axis{height:1.2rem;color:var(--muted);font-size:.7rem;position:relative}.year-chart .axis span{position:absolute;top:.15rem;transform:translate(-50%)}.year-chart .legend{color:var(--muted);gap:1rem;margin-top:.2rem;font-size:.8rem;display:flex}.year-chart .swatch{background:var(--accent);vertical-align:-.05rem;border-radius:2px;width:.7rem;height:.7rem;display:inline-block}.year-chart .swatch.off{background:#555}.mode-list.compact label{padding:.65rem 1rem}.snippet-bar{background:var(--border);border-radius:2px;height:4px;margin-top:1.25rem;overflow:hidden}.snippet-bar>div{background:var(--accent);height:100%;transition:width .25s linear}.snippet-label{color:var(--muted);margin-top:.4rem;font-size:.85rem}.reveal-card .cover{aspect-ratio:1;object-fit:cover;border-radius:8px;width:min(160px,50vw);margin:0 auto 1rem;display:block;box-shadow:0 4px 16px #00000080}.reveal-card .album{color:var(--muted);margin-top:.4rem;font-size:.85rem;font-style:italic}.volume{align-items:center;gap:.6rem;margin-top:.75rem;display:flex}.volume input[type=range]{accent-color:var(--accent);flex:1;height:1.5rem}button.round{flex:none;width:2.6rem;height:2.6rem;padding:0;font-size:1.3rem;line-height:1}.volume-value{text-align:right;min-width:3.2rem;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}.end-game{text-align:center;margin-top:1.5rem}.box.confirm{border-left-color:var(--bad);text-align:left}.box.confirm .actions{margin-top:.6rem}button.danger{background:var(--bad);color:#000}.stack-banner{background:var(--surface);border:2px solid var(--accent);border-radius:16px;align-items:center;gap:1rem;margin:.5rem 0 .75rem;padding:.75rem 1rem;display:flex}.stack-banner .hint{margin:.15rem 0 0}.stack-count{color:var(--accent);text-align:center;min-width:2ch;font-size:3.5rem;font-weight:800;line-height:1}.box.stack-result.ok{border-left-color:var(--accent)}.box.stack-result.bad{border-left-color:var(--bad)}.stack-question{text-align:center;margin:.5rem 0 0}.stack-won{text-align:center;padding:2rem 0 0}.stepper{align-items:center;gap:.75rem;display:flex}.stepper button{width:3.25rem;height:3.25rem;padding:0;font-size:1.6rem}.stepper-value{text-align:center;flex:1}.stepper-value strong{color:var(--accent);font-size:2rem}button.create-playlist{width:100%;margin:.25rem 0 .75rem}.box.ok{border-left-color:var(--accent)}.box.ok p{margin:0 0 .5rem}.box.ok a{color:var(--accent)}.muted{color:var(--muted);font-weight:400}.hint.bad{color:var(--bad)}button.danger-text{color:var(--bad);margin-top:.5rem}.toggle-chips{flex-wrap:wrap;gap:.4rem;display:flex}.toggle-chips button{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.35rem .85rem}.toggle-chips button.on{background:var(--accent);border-color:var(--accent);color:#000}.coverage p{margin:0 0 .5rem}.decade-row{margin-bottom:.6rem}.decade-head{grid-template-columns:3.5rem 1fr auto;align-items:center;gap:.5rem;font-size:.85rem;display:grid}.decade-count{color:var(--muted);text-align:right;min-width:3.5rem}.meter{background:var(--surface);border-radius:999px;height:.45rem;overflow:hidden}.meter>span{background:var(--warn);height:100%;display:block}.meter>span.full{background:var(--accent)}.year-cells{grid-template-columns:repeat(10,1fr);gap:3px;margin-top:.25rem;display:grid}.year-cell{background:var(--surface);border:1px solid var(--border);min-width:0;color:var(--muted);border-radius:4px;flex-direction:column;align-items:center;padding:.15rem 0;font-size:.7rem;line-height:1.2;display:flex}.year-cell b{color:var(--text);font-size:.85rem}.year-cell.empty{border-color:var(--bad)}.year-cell.empty b{color:var(--bad)}.year-cell.partial{border-color:var(--warn)}.year-cell.full{background:color-mix(in srgb, var(--accent) 25%, var(--surface));border-color:var(--accent)}.year-cell.over{background:color-mix(in srgb, #4aa3ff 25%, var(--surface));border-color:#4aa3ff}.year-cell.focus{outline:2px solid var(--text);outline-offset:1px}.coverage .legend{color:var(--muted);flex-wrap:wrap;gap:.4rem 1rem;font-size:.8rem;display:flex}.coverage .swatch{vertical-align:-.05rem;border:1px solid;border-radius:2px;width:.7rem;height:.7rem;display:inline-block}.swatch.empty{border-color:var(--bad)}.swatch.partial{border-color:var(--warn)}.swatch.full{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 25%, var(--surface))}.swatch.over{background:color-mix(in srgb, #4aa3ff 25%, var(--surface));border-color:#4aa3ff}.suggest-group{margin-bottom:.75rem}.suggest-group h4{margin:.5rem 0 .25rem}.track-list{margin:0;padding:0;list-style:none}.track-row{border-bottom:1px solid var(--border);align-items:center;gap:.5rem;padding:.35rem 0;display:flex}.track-row img,.track-row .no-cover{background:var(--surface);object-fit:cover;border-radius:4px;flex:none;width:2.6rem;height:2.6rem}.track-row .text{flex-direction:column;flex:1;min-width:0;display:flex}.track-row .title,.track-row .meta{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-row .meta{color:var(--muted);font-size:.8rem}.track-row .note{color:var(--warn)}button.icon{flex:none;width:2.4rem;height:2.4rem;padding:0;font-size:1rem}.search.inline button{flex:none}details.selected summary{cursor:pointer;color:var(--accent);margin-bottom:.25rem}.select-row select{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.55rem .75rem}.ref-picker summary{cursor:pointer;padding:.4rem 0}.ref-picker .playlist-list{border:1px solid var(--border);border-radius:8px;max-height:18rem;padding:0 .5rem;overflow-y:auto}.year-cell{position:relative}.year-cell.has-ref:after{content:"";background:#4aa3ff;border-radius:50%;width:5px;height:5px;position:absolute;top:2px;right:2px}.track-row .source{color:#4aa3ff}.track-row .notes{font-size:.78rem;line-height:1.25}.letter-badge{background:var(--surface);border:2px solid var(--border);border-radius:50%;flex:none;justify-content:center;align-items:center;width:2.2rem;height:2.2rem;font-weight:800;display:inline-flex}.order-scanned{justify-content:space-between;align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.order-scanned .letters{flex-wrap:wrap;gap:.35rem;display:flex}.order-scanned .letter-badge{border-color:var(--accent);color:var(--accent)}.order-list{margin:.5rem 0 0;padding:0;list-style:none}.order-row{border-bottom:1px solid var(--border);align-items:center;gap:.6rem;padding:.4rem .5rem;display:flex}.order-row.active .letter-badge{border-color:var(--accent);color:var(--accent)}.order-row .text{flex-direction:column;flex:1;min-width:0;display:flex}.order-row .title,.order-row .meta{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.order-row .meta{color:var(--muted);font-size:.8rem}.order-row .snippet-bar{margin:.4rem 0 .2rem}.hint.center{text-align:center;margin:0}.order-solution{--order-row-h:4.4rem;margin:.5rem 0 0;padding:0;list-style:none;position:relative}.order-row.solved{height:var(--order-row-h);background:var(--bg);transition:transform .9s cubic-bezier(.65,0,.35,1);position:absolute;inset:0 0 auto}.order-row.solved img,.order-row.solved .no-cover{background:var(--surface);object-fit:cover;border-radius:4px;flex:none;width:2.6rem;height:2.6rem}.order-row.solved .year{color:var(--accent)}.order-row.stays .letter-badge{background:var(--accent);border-color:var(--accent);color:#000}.move-badge{text-align:center;background:var(--surface);border:1px solid var(--border);min-width:2.4rem;color:var(--warn);border-radius:999px;flex:none;padding:.15rem .4rem;font-size:.85rem;font-weight:700}.move-badge.ok{color:var(--accent);border-color:var(--accent)}@media (prefers-reduced-motion:reduce){.order-row.solved{transition:none}}button.block-button{margin:.5rem auto 0;display:block}button.block-button.blocked{color:var(--bad)}.order-row .block-button{text-align:left;margin:.1rem 0 0;padding:0;font-size:.75rem}.blocked-list{margin:.5rem 0;padding:0;list-style:none}.blocked-list li{border-bottom:1px solid var(--border);align-items:center;gap:.5rem;padding:.3rem 0;display:flex}.blocked-list .text{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}