.catalog{height:85vh;margin:2em 0;overflow:auto}.album-list{--focus-highlight:saturate(120%) brightness(90%) opacity(100%);--mute-colors:blur(10px) saturate(10%) brightness(45%) sepia(30%) opacity(85%);flex-direction:column;gap:.1em;width:95vw;max-width:500px;margin:1em auto;padding:0;line-height:1.2;list-style:none;display:flex;container-type:inline-size}.album-entry{aspect-ratio:8/1.25;z-index:0;flex-direction:column;justify-content:center;width:100%;font-size:4cqw;display:flex;position:relative}.album-entry:before{content:"";background-color:var(--theme-color);z-index:-1;-webkit-mask-composite:source-in;border-radius:5px;position:absolute;inset:0;-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:hover:before,.album-entry:active:before,.album-entry:focus:before{-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(90deg,#0000,#000 0 100%,#0000),linear-gradient(#0000,#000 0 100%,#0000);mask-image:linear-gradient(90deg,#0000,#000 0 100%,#0000),linear-gradient(#0000,#000 0 100%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.album-entry:after{content:"";z-index:1;pointer-events:none;-webkit-backdrop-filter:var(--mute-colors);backdrop-filter:var(--mute-colors);border-radius:5px;transition:transform .2s;position:absolute;inset:0}.album-entry:hover:after,.album-entry:active:after,.album-entry:focus:after{-webkit-backdrop-filter:var(--focus-highlight);backdrop-filter:var(--focus-highlight);background-image:url(./album-feature-cassette-spine.png);background-repeat:no-repeat;background-size:100% 100%;border-radius:11px 15px 13px 14px;transform:scale(1.05)}.copy-artist,.copy-album{color:#fffffff0;text-shadow:1px 1px 2px #00000080;z-index:2;align-content:center;width:auto;height:auto;padding-inline:1.5em;font-weight:600}.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}.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;background-color:#000;width:100vw;max-width:470px;height:auto;margin-top:10vh;transition:transform .5s;position:fixed;top:0;left:0;right:0;transform:translate(-100vw);container-type:inline-size}.album-spotlight--visible{pointer-events:auto;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-info{flex-flow:wrap;width:auto;margin:0;padding:1em 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-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}:root{--z-index-spotlight:10;--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--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<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#19131b;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}}body{background-color:var(--bg);margin:0}#root{box-sizing:border-box;flex-direction:column;width:1126px;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}