.listen{--gold: #f5c96a;--ink: #d9b98a;--dim: #8a7454;--bright: #f5e8d0;--rule: #2a2118}.listen ol{list-style:none;margin:.4em 0 0;padding:0;counter-reset:n}.listen li{position:relative}.listen li .row{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:2.2em 1fr auto;align-items:center;padding:.5em 0;border-bottom:1px solid rgba(42,33,24,.6);color:var(--ink)}.listen li .pp{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(217,185,138,.35);color:var(--ink);transition:color .15s,border-color .15s,background-color .15s}.listen li .pp svg{width:12px;height:12px;fill:currentColor;pointer-events:none}.listen li .row:hover .song{color:var(--bright)}.listen li .row:hover .pp{color:var(--gold);border-color:var(--gold)}.listen li .row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.listen li .d{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}.listen li.on .song,.listen li.on .d{color:var(--gold)}.listen li.on .pp,.listen li.on .row:hover .pp{color:#140c04;border-color:transparent;background:linear-gradient(180deg,#ffd98c,#d3a14e)}.listen li.on .row:hover .pp{filter:brightness(1.09)}.listen li.on{touch-action:pan-y}.listen .seek{position:absolute;inset:0;z-index:1;pointer-events:none}.listen .seek i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(var(--gold),var(--gold)) bottom / 100% 1.5px no-repeat,#f5c96a1a}.listen li.scrub .seek i{background-color:#f5c96a2e}.listen .none{color:var(--dim);font-size:13px;margin:.8em 0 0}.listen li button[disabled]{cursor:default;opacity:.55}.listen li.kept .d:before{content:"↓ ";color:var(--gold)}.listen .keeping{margin-top:1.2em}.listen .keep{all:unset;cursor:pointer;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--dim);border:1px solid var(--rule);border-radius:2px;padding:.8em 1.3em}.listen .keep:hover:not([disabled]){color:var(--gold)}.listen .keep[disabled]{cursor:default}