.library{--padding-top:10vh;--closed-nav-height:19vh;border-top-left-radius:20px;border-top-right-radius:20px;position:relative}.library:after{content:"";background:linear-gradient(to top, var(--bg) 30%, transparent);height:.5em;position:fixed;bottom:0;left:0;right:0}.album-list{--mute-colors:blur(5px) saturate(10%) brightness(20%) sepia(0%) opacity(70%);--focus-highlight:blur(0px) saturate(120%) brightness(60%) sepia(0%) opacity(100%);width:99vw;max-width:425px;padding-inline:.6em;padding-top:calc(var(--padding-top) + .5em);padding-bottom:calc(var(--closed-nav-height) + .75em);box-sizing:border-box;flex-direction:column;gap:.1em;margin:0 auto;line-height:1.2;list-style:none;display:flex;overflow:visible auto;container-type:inline-size}@media (prefers-color-scheme:light){.album-list{--mute-colors:blur(10px) saturate(130%) brightness(40%) sepia(25%) opacity(75%)}}.album-entry{--entry-z-index:0;flex-direction:column;justify-content:center;display:flex;position:relative}.album-entry img{opacity:.7;width:auto;height:calc(100% - 1em);position:absolute;top:.5em;right:.75em}.album-entry button{text-align:left;aspect-ratio:8/1.25;background-color:var(--bg);border:none;width:100%;font-size:4cqw}.album-entry button:before{content:"";background-color:var(--theme-color);-webkit-mask-composite:source-in;border-radius:5px;position:absolute;inset:0 0 .75px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 7px calc(100% - 7px),#0000),linear-gradient(#0000,#000 7px calc(100% - 7px),#0000);mask-image:linear-gradient(90deg,#0000,#000 7px calc(100% - 7px),#0000),linear-gradient(#0000,#000 7px calc(100% - 7px),#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.album-entry button:after{content:"";pointer-events:none;-webkit-backdrop-filter:var(--mute-colors);backdrop-filter:var(--mute-colors);border-radius:5px;transition:-webkit-backdrop-filter .15s 20ms,backdrop-filter .15s 20ms;position:absolute;inset:0}.album-entry button:active:before,.album-entry button:focus-visible:before{-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(90deg,#0000,#000 4px calc(100% - 4px),#0000),linear-gradient(#0000,#000 4px calc(100% - 4px),#0000);mask-image:linear-gradient(90deg,#0000,#000 4px calc(100% - 4px),#0000),linear-gradient(#0000,#000 4px calc(100% - 4px),#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.album-entry button:active:after,.album-entry button:focus-visible:after{-webkit-backdrop-filter:var(--focus-highlight);backdrop-filter:var(--focus-highlight)}@media (hover:hover) and (pointer:fine){.album-entry button:hover:before{-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(90deg,#0000,#000 4px calc(100% - 4px),#0000),linear-gradient(#0000,#000 4px calc(100% - 4px),#0000);mask-image:linear-gradient(90deg,#0000,#000 4px calc(100% - 4px),#0000),linear-gradient(#0000,#000 4px calc(100% - 4px),#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.album-entry button:hover:after{-webkit-backdrop-filter:var(--focus-highlight);backdrop-filter:var(--focus-highlight)}}.spine{opacity:0;pointer-events:none;background-image:url(./album-feature-cassette-spine.png);background-repeat:no-repeat;background-size:100% 100%;border-radius:11px 15px 13px 14px;transition:transform .1s,opacity .1s ease-in-out;position:absolute;inset:0}button:active+.spine,button:focus-visible+.spine{opacity:1;transform:scale(1.015)}@media (hover:hover) and (pointer:fine){button:hover+.spine{opacity:.75;transform:scale(1.015)}}.copy-artist,.copy-album{z-index:calc(var(--entry-z-index) + 1);color:#fffffff0;text-shadow:1px 1px 2px #00000080;align-content:center;width:auto;height:auto;padding-inline:1.5em;font-weight:600;position:relative}.copy-artist>*,.copy-album>*{white-space:nowrap;scrollbar-width:none;display:block;overflow-x:auto}.copy-artist{margin-top:.25em}.copy-album{margin-bottom:.25em;font-style:italic}.no-albums{opacity:.75;padding-top:var(--padding-top);text-align:center;word-wrap:anywhere;margin:10% auto;padding-inline:0;font-size:10cqw;overflow:visible}@media (width>=768px){.library{border-right:1px solid #fafafa0d;border-radius:0;padding-left:1em}.album-list{height:100%;padding-block:0;overflow-y:auto}.album-entry:first-of-type{margin-top:1.5em}.album-entry:last-of-type{margin-bottom:1.5em}}.spotify-player{border:1px solid color-mix(in srgb, currentColor 5%, transparent);-webkit-backdrop-filter:blur(12px);z-index:calc(var(--z-index-spotlight) + 2);background:#00000026;border-radius:5px;flex-direction:column;gap:1em;padding:.75em;font-size:.75rem;line-height:1.2;display:flex;position:relative}.spotify-player p{margin:0}.spotify-player iframe{border:none;border-radius:15px;width:100%;height:80px;display:block}.spotify-player button{cursor:pointer}.spotify-player .visually-hidden{visibility:hidden;position:absolute;left:-500%}.spotify-player__track{justify-content:space-between;gap:1em;display:flex}.spotify-player__track-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spotify-player__time{font-variant-numeric:tabular-nums;flex-shrink:0}.spotify-player__error{color:#ff8a8a}.spotify-player__link{color:inherit;background:0 0;border:none;align-self:flex-end;padding:0;font-size:.9em;position:absolute;bottom:-5em;right:1em}.spotify-player__link .icon{padding-right:.25em;text-decoration:none}.spotify-player__link span{text-underline-offset:.25em;text-decoration:underline}.spotify-player.start-album{-webkit-backdrop-filter:none;background:0 0;border:none}.spotify-player.start-album .player-controls{justify-content:right}.player-controls{justify-content:space-between;gap:.5em;display:flex}.player-controls button{--mc-size:40px;--mc-icon:40%;--mc-color:currentColor;--mc-bg:#0000004d;--mc-bg-hover:color-mix(in srgb, var(--mc-bg) 100%, transparent);--mc-border:color-mix(in srgb, var(--mc-color) 30%, transparent);--mc-border-hover:color-mix(in srgb, var(--mc-color) 60%, transparent);--mc-radius:8%;--mc-ring:color-mix(in srgb, var(--mc-color) 80%, transparent);--mc-speed:.18s;appearance:none;inline-size:var(--mc-size);block-size:var(--mc-size);border:2px solid var(--mc-border);border-radius:var(--mc-radius);background:var(--mc-bg);color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--mc-speed), transform var(--mc-speed);place-items:center;padding:0;display:inline-grid}.player-controls button:hover{border:2px solid var(--mc-border-hover);background:var(--mc-bg-hover)}.player-controls button:active{transform:scale(.92)}.player-controls button:focus-visible{outline:2px solid var(--mc-ring);outline-offset:2px}.player-controls button:disabled{opacity:.35;pointer-events:none}.player-controls button:before{content:"";inline-size:var(--mc-icon);aspect-ratio:1;background:var(--mc-color);transition:clip-path var(--mc-speed) ease, translate var(--mc-speed) ease}.player-controls button[data-icon=play]:before,.player-controls button[data-icon=start-play]:before{clip-path:polygon(14% 6%,52% 28%,52% 72%,14% 94%,14% 6%,52% 28%,90% 50%,90% 50%,52% 72%,52% 28%);translate:6%}.player-controls button[data-icon=play][aria-pressed=true]:before{clip-path:polygon(16% 8%,40% 8%,40% 92%,16% 92%,16% 8%,60% 8%,84% 8%,84% 92%,60% 92%,60% 8%);translate:0}.player-controls button[data-icon=next]:before,.player-controls button[data-icon=prev]:before{clip-path:polygon(8% 10%,68% 50%,8% 90%,8% 10%,76% 10%,92% 10%,92% 90%,76% 90%,76% 10%)}.player-controls button[data-icon=prev]:before{scale:-1 1}.player-controls button[data-icon=start-play]{border:2px solid var(--mc-border);background:currentColor}.player-controls button[data-icon=start-play]:before{content:"";background:#000}.player-controls button[data-icon=start-play]:hover{background:color-mix(in srgb, currentColor 60%, transparent)}.album-spotlight{z-index:var(--z-index-spotlight);aspect-ratio:407/617;margin-inline:auto;touch-action:pan-y;-webkit-user-select:none;user-select:none;width:100vw;max-width:470px;height:auto;margin-top:10vh;transition:transform .99s;position:fixed;top:0;left:0;right:0;transform:translate(-150vw);container-type:inline-size}.album-spotlight--visible{pointer-events:auto;transition:transform .99s;transform:translate(0)}.album-case{z-index:calc(var(--z-index-spotlight) + 1);pointer-events:none;background-image:url(./album-feature-cassette-case.png);background-position:top;background-repeat:no-repeat;background-size:contain;position:absolute;inset:0}.album-artwork{padding:1.25em}.album-artwork img{width:100%}.album-artwork:after{z-index:-1;content:"";background-color:#000;border-radius:15px;height:100%;position:absolute;inset:0}.album-info{flex-flow:wrap;width:auto;margin:0;padding:.5em 2em;font-size:5cqw;font-weight:600;line-height:1;list-style:none;display:flex}.album-info>*{align-content:center}.album-info .album-artist{flex:1 0 80%;padding-bottom:1em;font-size:4cqw}.album-info .album-year{text-align:end;flex:0 20%;font-size:4cqw}.album-info .album-title{flex-basis:100%}.album-player{border-radius:5px;margin:0 8%;position:absolute;bottom:4%;left:0;right:0}.album-player-fallback{color:inherit;font-size:.85em;display:block}@keyframes cassette-entrance{0%{visibility:visible;transform:translate(0)}35%{visibility:visible;transform:translate(70%)}99.9%{visibility:visible}to{visibility:hidden;transform:translate(calc(50vw + 100%))}}.cassette{z-index:-2;pointer-events:none;visibility:hidden;background-image:url(./album-feature-cassette.png);background-position:top;background-repeat:no-repeat;background-size:contain;position:absolute;inset:20px;transform:translate(0)}.album-spotlight--visible .cassette{animation:2s linear forwards cassette-entrance}.album-spotlight-close{z-index:calc(var(--z-index-spotlight) + 2);color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.5rem;line-height:1;display:flex;position:fixed;top:1rem;right:1rem}.album-back-mask{z-index:calc(var(--z-index-spotlight) - 1);pointer-events:none;background-color:#1d1d1d00;transition:background-color .3s;position:fixed;inset:0}.album-back-mask--visible{pointer-events:auto;background-color:#1d1d1dd9}.tier-filter{flex-flow:wrap;align-content:flex-start;gap:.75em;padding-block:0 4vh;display:flex}.btn-filter{background-color:#fafafa08;border:1px solid #fafafa33;border-radius:7px;flex:1 0 0;height:5vh;padding-inline:1.5em}.btn-filter.tier-1{flex:100%;height:6vh}.btn-filter.tier-0{flex:0 0 5%}.btn-filter:focus,.btn-filter:active{background-color:#fafafa0d;border-color:#fafafa4d}.btn-filter.selected,.btn-filter.selected:focus,.btn-filter.selected:active{background-color:#66ffbb1a;border-color:#6fb6}@media (prefers-color-scheme:light){.btn-filter{background-color:#6969690d;border-color:#00000040}.btn-filter:focus,.btn-filter:active{border-color:#00000026}.btn-filter.selected,.btn-filter.selected:focus,.btn-filter.selected:active{background-color:#6ad7a733;border-color:#1d8355bf}}@media (hover:hover) and (pointer:fine){.btn-filter:hover{background-color:#fafafa1a;border-color:#fafafa4d}.btn-filter.selected:hover{background-color:#6fb3;border-color:#66ffbb80}}@media (hover:hover) and (pointer:fine) and (prefers-color-scheme:light){.btn-filter:hover{border-color:#00000026}.btn-filter.selected:hover{background-color:#6ad7a733;border-color:#1d8355bf}}@media (width>=768px){.tier-filter{margin-top:1.5em;flex-flow:column;margin-inline:1em 0}.btn-filter{text-align:left;flex:auto;padding-inline:20% 1em;position:relative}.btn-filter.selected:before{content:"";clip-path:polygon(0 0,100% 50%,0 100%);background-color:currentColor;width:.8em;height:.8em;position:absolute;top:50%;left:1em;transform:translateY(-50%)}.btn-filter.tier-1,.btn-filter.tier-2,.btn-filter.tier-3,.btn-filter.tier-0{flex:0 auto;width:95%;height:6vh}}.genre-filter{flex-flow:wrap;gap:.75em;padding-block:1.5em;display:flex;position:relative}.genre-filter h3{margin-block:0;font-weight:500}label{white-space:nowrap;border:2px solid #fafafa33;border-radius:5px;flex:25%;max-width:50%;padding:.05em .5em}input{margin-right:1em;transform:translateY(2px)}.btn-clear{font:inherit;color:inherit;opacity:.7;text-align:right;cursor:pointer;background-color:#0000;border:none;width:100%;height:1.5em;margin-top:-1.5em;padding:0 .5em 0 0;font-size:16px;line-height:1}.btn-clear span{text-underline-offset:.25em;text-decoration:underline}.btn-clear:disabled{opacity:.2;cursor:default}.btn-clear:before{content:"x";padding-right:.5em}@media (prefers-color-scheme:light){label{border-color:#00000026}}@media (hover:hover) and (pointer:fine){.btn-clear:not(:disabled):hover{background-color:#fafafa1a;border-color:#fafafa4d}}@media (width>=768px){.genre-filter{flex-direction:row wrap;background-color:#fafafa08;border-radius:5px;gap:.25em;height:100%;min-height:250px;margin-top:1.5em;margin-left:3em;padding:1em;font-size:11px;overflow:auto}label{background-color:unset;border:none;flex:none;width:100%;padding:0 .25em 0 .5em}input{margin-right:.75em}.btn-clear{text-align:left;margin-top:0;font-size:12px}}@media (width>=768px) and (prefers-color-scheme:light){.genre-filter{border:1px solid #339ba680;margin-top:1.5em}}@media (width>=828px){.genre-filter{font-size:clamp(12px,1.869vw - 3.477px,14px)}}nav{--nav-transition-duration:.4s;--nav-offset:54vh;z-index:1;background-color:var(--contrast-bg);width:100%;height:75vh;transform:translateY(var(--nav-offset));transition:transform var(--nav-transition-duration) ease;touch-action:none;-webkit-user-select:none;user-select:none;border-top:1px solid #ffffff0d;border-top-left-radius:15px;border-top-right-radius:15px;position:fixed;bottom:0;left:0;overflow-y:auto;box-shadow:0 -6px 4px -4px #19131b80,0 -8px 4px -4px #19131b40}nav div,nav form{width:95vw;max-width:500px;margin-inline:auto}nav.open{--nav-offset:0}.open-handle{z-index:14;cursor:pointer;width:100%;max-width:none;height:4.5vh;margin-inline:0}.open-handle:before{content:"";z-index:15;pointer-events:none;background-color:currentColor;border-radius:5px;width:3em;height:3px;display:block;position:absolute;top:.55em;left:50%;overflow:visible;transform:translate(-50%)}@media (prefers-color-scheme:light){nav{border-top:1px solid #afafafbf}}@media (width>=768px){nav{pointer-events:none;--nav-transition-duration:0;--nav-offset:0;width:17vw;height:auto;box-shadow:none;background-color:unset;border:none;flex-direction:column;padding-right:1vw;font-size:14px;display:flex;position:relative;overflow:visible}nav:before{content:unset}nav .open-handle{display:none}.tier-filter,nav{pointer-events:auto;width:17vw}nav .genre-filter{width:auto}}@media (width>=828px){.tier-filter,nav{width:clamp(140.76px,42.8065vw - 213.677px,300px)}}header{height:var(--nav-height);z-index:2;background-color:var(--bg);box-sizing:border-box;box-shadow:var(--shadow);border-bottom:1px solid #ffffff0d;flex-flow:row;display:flex;position:fixed;top:0;left:0;right:0}.logo{height:var(--nav-height);box-sizing:border-box;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:auto;padding:1em;transition:transform .15s ease-in-out;position:fixed;top:0;left:0}.logo:active{transform:scale(4)}.intro{flex-direction:column;justify-content:end;align-items:end;width:95vw;max-width:calc(500px - 1.5em);margin:0 auto;padding-block:1em;padding-inline:1.25em;display:flex}.intro p{align-content:start}.headline{letter-spacing:.75px;font-size:.85em;font-weight:600;display:inline-block;transform:scaleY(1.15)}.subtext{text-align:end;font-size:1em;font-style:italic;font-weight:300;transform:scaleY(1.05)}@media (prefers-color-scheme:light){header{border-bottom:1px solid #0000000d}}@media (width>=400px){.headline{font-size:clamp(1em,11.6522px + 1.087vw,1.25em)}}@media (width>=768px){.logo{padding:1em}.intro{width:95vw;max-width:425px;margin-inline:auto;padding-block:1em}.subtext{font-size:1em}main{width:100%;height:calc(100svh - (var(--nav-height) + .25em));padding-block:var(--nav-height) .25em;flex-flow:row;justify-content:space-between;display:flex}}:root{--nav-height:10vh;--z-index-spotlight:10;--text:#adbfc2;--text-h:#f3f4f6;--bg:#19131b;--contrast-bg:#0d070f;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--shadow:#19131b80 0 7px 4px -4px, #19131b40 0 8px 4px -4px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width>=768px){:root{--nav-height:15vh}}@media (prefers-color-scheme:light){:root{--text:#374851;--text-h:#08060d;--bg:#e1e1e1;--contrast-bg:#eee;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--shadow:#0000001a 0 -10px 15px -3px, #0000000d 0 -4px 6px -2px}}body{background-color:var(--bg);margin:0}#root{box-sizing:border-box;flex-direction:column;width:99vw;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}button{font:18px/145% var(--sans)}@media (width<=1024px){button{font-size:16px}}