body{--base:oklch(14.5249% .00213178 286.132);--accent:oklch(96.5576% .017145 248.006);--low:0;--mid:0;--high:0;background-color:oklch(23.4016% .0226125 246.116);place-items:center;block-size:100vh;margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont;display:grid;overflow:hidden;container-type:inline-size}body>*{grid-area:1/1}.headphone{background:linear-gradient(in oklab, var(--base) 2%, var(--accent));-webkit-text-fill-color:transparent;cursor:default;scale:calc(1 + var(--low) * .5);filter:drop-shadow(0 0 calc(var(--mid) * 10px) oklch(from var(--accent) l c h / .1));contain:layout paint;background-clip:text;font-size:20cqi;transition:scale .3s cubic-bezier(.19,1,.22,1)}select,::picker(select){appearance:base-select}select::picker-icon{display:none}selectedcontent{white-space:nowrap;max-inline-size:max-content;display:block}option{transform-origin:0 48%;opacity:.7;align-items:center;gap:.75rem;padding:.5rem 1rem;font-size:.875rem;transition:font-size .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94),font-weight .2s cubic-bezier(.25,.46,.45,.94);display:flex;&::checkmark{content:"💿"}}option:hover,option:focus{opacity:1;font-size:.95rem;font-weight:500}option:has(+option:hover),option:hover+option{opacity:.9;font-size:.9rem;font-weight:400}option:has(+option+option:hover),option:hover+option+option{opacity:.8;font-size:.875rem;font-weight:400}option:has(+option+option+option:hover),option:hover+option+option+option{opacity:.75;font-size:.875rem;font-weight:400}:is(optgroup,.headphone,.note,.notes){contain:layout}::picker(select){opacity:0;clip-path:circle(0% at 100% 0);position-anchor:none;position-area:none;inset-area:none;transition:clip-path .72s cubic-bezier(.34, 1.56, .64, 1), display .5s allow-discrete, overlay .5s allow-discrete;border:0;border-radius:0;margin:0;padding:0;position:fixed;inset:0}:open::picker(select){opacity:1;clip-path:circle(150% at 100% 0);background-color:color-mix(in oklch, var(--base), transparent 56%);block-size:100vh;inline-size:100vw}@starting-style{:open::picker(select){opacity:0;clip-path:circle(0% at 100% 0)}}:where(.note,.notes){background:linear-gradient(in oklch, var(--base) 2%, var(--accent));-webkit-text-fill-color:transparent;pointer-events:none;opacity:calc(.2 + var(--high) * .8);background-clip:text;font-size:12cqi;@starting-style{opacity:0}}.note{animation:2.48s infinite note}.notes{animation:2.48s -.125s infinite notes}.toggle-btn{cursor:pointer;color:var(--accent);opacity:.5;background:0 0;border:none;place-items:center;padding:0;transition:opacity .2s;display:grid;&:hover{opacity:1}& path{transform-box:fill-box;transform-origin:50%;transition:transform .1s cubic-bezier(.4,0,.2,1),opacity .1s cubic-bezier(.4,0,.2,1)}& .pause-path{opacity:0;transform:scale(.5)rotate(90deg)}&.pulse{opacity:1;animation:1.5s infinite alternate pulse-btn}}.toggle-btn.playing{color:var(--accent);opacity:1;& .play-path{opacity:0;transform:scale(.5)rotate(-90deg)}& .pause-path{opacity:1;transform:scale(1)rotate(0)}}.filter-container{z-index:10;border:1px solid oklch(from var(--accent) l c h / .3);backdrop-filter:blur(.5rem);background-color:oklch(34% 0 0/.64);border-radius:1rem;align-items:center;gap:.35rem;inline-size:min(8rem,100cqi - 2rem);padding:.5rem;transition:opacity .4s cubic-bezier(.34,1.56,.64,1),border-color .3s;display:flex;position:fixed;top:1rem;right:1rem;container-type:inline-size;@supports (corner-shape:squircle){corner-shape:squircle;border-radius:1.5rem}&.playing{color:var(--accent);border-color:var(--accent)}:is(&:has(select:open),&:has(select:popover-open)){opacity:.125}}.filter-select{border:1px solid oklch(from var(--accent) l c h / .3);background:oklch(from var(--base) l c h / .45);backdrop-filter:blur(.5rem);max-block-size:2.4rem;inline-size:10rem;color:var(--accent);cursor:pointer;border-radius:.5rem;outline:none;padding:.65rem .75rem;font-size:.875rem;transition:border-color .2s,background .2s;overflow:hidden;& button{align-items:center;inline-size:100%;display:flex;overflow:hidden;container-type:inline-size}& option{color:var(--accent)}& optgroup{color:oklch(from var(--accent) l c h / .7);font-style:normal;font-weight:600}@supports (corner-shape:squircle){corner-shape:squircle;border-radius:.75rem}}.filter-select:focus,.filter-container:focus-within,.filter-container:active{border-color:var(--accent)}.filter-container:hover selectedcontent,.filter-select:focus-within selectedcontent{animation:16s linear .5s infinite alternate text-scroll-reveal}.artist-label{color:var(--accent);text-transform:uppercase;letter-spacing:.05em;opacity:.7;align-self:flex-start;font-size:.75rem;display:none}.headphone,.note,.notes{animation-play-state:paused}@keyframes shake{10%,90%{transform:translate(-.125px)}20%,80%{transform:translate(1.25px)}30%,50%,70%{transform:translate(-.75px)}40%,60%{transform:translate(.75px)}0%,to{transform:translate(0)}}@keyframes note{0%{opacity:0;transform:translate(4.5cqi,.25em)}32%{opacity:.48}to{opacity:0;font-size:3cqi;transform:translate(8.5cqi,-12.5cqi)}}@keyframes notes{0%{opacity:0;transform:translate(-4.5cqi,.25em)}32%{opacity:.16}to{opacity:0;font-size:3cqi;transform:translate(-8.5cqi,-12.52cqi)}}@keyframes pulse-btn{0%{transform:scale(1)}to{transform:scale(1.2)}}@keyframes text-scroll-reveal{0%,20%{transform:translate(0)}80%,to{transform:translate(min(0px,100cqi - 100%))}}