.listenCard{background:var(--paper);color:var(--ink);border:2px solid var(--ink);cursor:pointer;text-align:left;font-family:var(--font-body);align-items:center;gap:1.1rem;padding:1.1rem 1.2rem;transition:transform .15s;display:flex}.listenCard:active{transform:scale(.96)}.listenCardPlay{background:var(--ink);width:52px;height:52px;color:var(--signal);font:700 1rem/1 var(--font-mono);flex:none;place-items:center;display:grid}.listenCard.playing .listenCardPlay,.listenCard.paused .listenCardPlay{background:var(--copper);color:#fff}.listenCard.playing .listenCardPlay:before{content:"❚❚";font-size:.8rem}.listenCard.playing .listenCardPlay{font-size:0}.listenCardBody b{font:700 .68rem/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap;align-items:center;display:flex}.listenCardBody i{font:500 .64rem var(--font-mono);color:#0b10128c;margin-top:.3rem;font-style:normal;display:block}.vocalBadge{color:#59412f;font:600 .58rem/1.35 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;margin-top:.35rem;display:block}.rowPlay .vocalBadge{color:var(--signal);white-space:nowrap;margin:0 0 0 .5rem;display:inline}.npVocal{color:#59412f;font:600 .55rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;display:block}.trackTable tbody tr.playing{box-shadow:inset 3px 0 0 var(--signal);background:#58c8d61a}.trackTable tbody tr.paused{box-shadow:inset 3px 0 0 var(--copper);background:#d2b15b14}tr.playing .rowIcon{background:var(--signal);border-color:var(--signal);color:var(--ink)}tr.paused .rowIcon{border-color:var(--copper);color:var(--copper)}tr.playing .rowIcon:before{content:"❚❚";font-size:.55rem}tr.playing .rowIcon{font-size:0}.npBar{--ink:#0a0c0d;--paper:#e7dfcf;--chalk:#f4efe6;--signal:#55c7d4;--copper:#aa5237;z-index:60;background:var(--paper);width:min(680px,100vw - 2rem);color:var(--ink);border:2px solid var(--ink);border-left:6px solid var(--signal);align-items:center;gap:1rem;padding:.8rem .9rem;display:flex;position:fixed;bottom:1rem;left:50%;transform:translate(-50%);box-shadow:8px 8px #bd744f59}body[data-page=music] .npBar{--signal:#ef4f88;--copper:#d2b15b}.npBar[hidden]{display:none}.npToggle{background:var(--ink);width:46px;height:46px;color:var(--signal);font:700 .85rem/1 var(--font-mono);cursor:pointer;border:0;flex:none;place-items:center;display:grid}.npToggle:active,.npClose:active{transform:scale(.96)}.npInfo{flex:1;min-width:0}.npInfo b{font:700 .72rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.npInfo span{font:500 .6rem var(--font-mono);color:#0b10128c;text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem;display:block}.npProgress{--progress:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:.25rem 0 -.2rem;display:block}.npProgress::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--signal) 0 var(--progress),#0b10122e var(--progress) 100%);height:4px}.npProgress::-webkit-slider-thumb{appearance:none;border:2px solid var(--paper);background:var(--ink);width:12px;height:12px;box-shadow:0 0 0 1px var(--ink);border-radius:50%;margin-top:-4px}.npProgress::-moz-range-track{background:#0b10122e;height:4px}.npProgress::-moz-range-progress{background:var(--signal);height:4px}.npProgress::-moz-range-thumb{border:2px solid var(--paper);background:var(--ink);width:10px;height:10px;box-shadow:0 0 0 1px var(--ink);border-radius:50%}.npProgress:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.npTime{font:500 .62rem var(--font-mono);color:#0b101299;white-space:nowrap;flex:none}.npClose{width:34px;height:34px;color:var(--ink);cursor:pointer;font:500 .7rem/1 var(--font-mono);background:0 0;border:1px solid #0b10124d;flex:none;place-items:center;display:grid}@media (hover:hover){.listenCard:hover{transform:translateY(-2px)}.listenCard:hover .listenCardPlay,.npToggle:hover{background:var(--copper);color:#fff}.npClose:hover{background:var(--ink);color:var(--chalk)}}@media (prefers-reduced-motion:no-preference){.npBar:not([hidden]){animation:.28s cubic-bezier(.2,0,0,1) npBarIn}@keyframes npBarIn{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}}@media (width<=640px){.npBar{gap:.65rem;width:calc(100vw - 1rem);padding:.7rem;bottom:.5rem}.npToggle{width:50px;height:50px}.npClose{width:44px;height:44px}.npTime{display:none}}