:root{--black:#000;--white:#fff;--white-dim:#ffffff80;--white-dim-mid:#ffffff4d;--white-faint:#ffffff26;--cyan:#0ff;--magenta:#f0f;--yellow:#ff0;--card-size:280px;--gap:1px}*{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable}body{background:var(--black);color:var(--white);min-height:100vh;font-family:Cormorant Garamond,Georgia,serif;line-height:1.4}@media (max-width:600px){:root{--card-size:100%}}.header{z-index:100;background:var(--black);border-bottom:1px solid var(--white-faint);position:sticky;top:0}.header-main{justify-content:space-between;align-items:center;padding:24px 32px;display:flex}.site-title{letter-spacing:.2em;text-transform:uppercase;font-size:14px;font-weight:300}.site-title span{color:#0000;-webkit-text-stroke:1px var(--white)}.toggle-controls{letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--white-faint);color:var(--white-dim);cursor:pointer;background:0 0;padding:8px 16px;font-family:JetBrains Mono,monospace;font-size:11px;transition:all .3s}.toggle-controls:hover{border-color:var(--white);color:var(--white)}.toggle-controls.active{border-color:var(--cyan);color:var(--cyan)}.controls{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;max-height:0;padding:0 32px;transition:max-height .4s,padding .4s;display:grid;overflow:hidden}.controls.open{border-top:1px solid var(--white-faint);max-height:600px;padding:24px 32px;overflow:visible}.control-group{overflow:visible}.control-group label{letter-spacing:.15em;text-transform:uppercase;color:var(--white-dim);margin-bottom:12px;font-family:JetBrains Mono,monospace;font-size:9px;display:block}.control-group input[type=text],.control-group input[type=number]{border:none;border-bottom:1px solid var(--white-faint);width:100%;color:var(--white);background:0 0;outline:none;padding:8px 0;font-family:Cormorant Garamond,serif;font-size:16px;transition:border-color .3s}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.control-group input:focus{border-color:var(--cyan)}.control-group input::placeholder{color:var(--white-dim-mid)}.range-inputs{align-items:center;gap:16px;display:flex}.range-inputs span{color:var(--white-faint);font-size:14px}.range-inputs input{text-align:left;width:80px}.genre-select{width:100%;position:relative}.genre-select input{border:none;border-bottom:1px solid var(--white-faint);width:100%;color:var(--white);background:0 0;outline:none;padding:8px 0;font-family:Cormorant Garamond,serif;font-size:16px;transition:border-color .3s}.genre-select input:focus{border-color:var(--cyan)}.genre-select input::placeholder{color:var(--white-dim-mid)}.selected-pills{flex-wrap:wrap;gap:8px;min-height:20px;margin-bottom:12px;display:flex}.genre-pill{letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--cyan);color:var(--cyan);cursor:pointer;background:0 0;align-items:center;gap:8px;padding:6px 12px;font-family:JetBrains Mono,monospace;font-size:10px;transition:all .2s;display:flex}.genre-pill:hover{border-color:var(--white);color:var(--white)}.genre-dropdown{background:var(--black);border:1px solid var(--white-faint);z-index:1000;scrollbar-width:thin;scrollbar-color:var(--white-faint)var(--black);border-top:none;max-height:200px;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.genre-dropdown::-webkit-scrollbar{width:8px}.genre-dropdown::-webkit-scrollbar-track{background:var(--black)}.genre-dropdown::-webkit-scrollbar-thumb{background:var(--white-faint);border-radius:4px}.genre-dropdown::-webkit-scrollbar-thumb:hover{background:var(--white-dim)}.genre-dropdown button{text-align:left;letter-spacing:.05em;text-transform:uppercase;width:100%;color:var(--white-dim);cursor:pointer;background:0 0;border:none;padding:8px 12px;font-family:JetBrains Mono,monospace;font-size:10px;transition:all .2s}.genre-dropdown button:hover{background:var(--white-faint);color:var(--white)}.genre-dropdown button.selected{color:var(--cyan);background:#00ffff1a}.stats-bar{letter-spacing:.1em;color:var(--white-dim-mid);border-bottom:1px solid var(--white-faint);gap:32px;padding:16px 32px;font-family:JetBrains Mono,monospace;font-size:10px;display:flex}.stats-bar span{color:var(--white-dim)}.mosaic-container{max-width:1600px;margin:0 auto;padding:32px}.mosaic{grid-template-columns:repeat(auto-fill,minmax(var(--card-size),1fr));background:0 0;gap:0;display:grid}.empty-state{text-align:center;color:var(--white-dim);grid-column:1/-1;padding:64px 32px;font-size:16px;font-style:italic}.album-card{background:var(--black);color:inherit;border-right:1px solid var(--white-faint);border-bottom:1px solid var(--white-faint);flex-direction:column;text-decoration:none;transition:transform .2s;display:flex;position:relative;overflow:hidden}.album-card:hover{transform:translateY(-2px)}.album-art{aspect-ratio:1;position:relative;overflow:hidden}.album-art img{object-fit:cover;width:100%;height:100%;display:block}.album-info{border-top:1px solid var(--white-faint);padding:16px}.album-artist{letter-spacing:.15em;text-transform:uppercase;color:#0000;-webkit-text-stroke:1px var(--white);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:13px;font-weight:300;overflow:hidden}.album-title{white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px;font-size:20px;font-style:italic;font-weight:400;overflow:hidden}.album-meta{justify-content:space-between;align-items:center;display:flex}.album-year-plays{color:var(--white-dim);letter-spacing:.05em;font-family:JetBrains Mono,monospace;font-size:10px}.album-year-plays .plays{color:var(--white-dim-mid)}.album-year-plays .play-icon{vertical-align:middle;font-size:.6em;display:inline-block}.album-genres{flex-wrap:nowrap;flex-shrink:0;gap:4px;max-width:60%;display:flex;overflow:hidden}.genre-tag{letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;background:#ffffff08;border-left:2px solid;padding:4px 6px;font-family:JetBrains Mono,monospace;font-size:8px;overflow:hidden}.genre-tag.cyan{border-color:var(--cyan);color:var(--cyan)}.genre-tag.magenta{border-color:var(--magenta);color:var(--magenta)}.genre-tag.yellow{border-color:var(--yellow);color:var(--yellow)}@media (max-width:600px){.mosaic-container{padding:0}.mosaic{background:0 0;grid-template-columns:1fr;gap:0}.album-card{border-bottom:1px solid var(--white-faint)}.header-main,.controls.open{padding:16px}.stats-bar{gap:16px;padding:12px 16px;font-size:9px}}
