*,:before,:after{box-sizing:border-box}body{background:var(--bg,#0e0e11);margin:0}.app{background:radial-gradient(120% 90% at 50% -10%, var(--bg2) 0%, var(--bg) 60%);min-height:100vh;color:var(--text);font-family:var(--font);padding:0 clamp(16px,5vw,64px) 64px;transition:background .7s,color .7s}.app[data-grain=true]:before{content:"";pointer-events:none;opacity:.05;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.hero{text-align:center;z-index:2;padding:clamp(48px,10vw,110px) 0 28px;position:relative}.eyebrow{text-transform:uppercase;letter-spacing:.35em;color:var(--muted);margin:0 0 12px;font-size:.72rem}.hero h1{letter-spacing:-.02em;margin:0;font-size:clamp(2.6rem,8vw,5rem);line-height:1.02}.subtitle{color:var(--muted);margin:12px 0 26px;font-size:1.05rem}.mood-switcher{background:color-mix(in srgb, var(--surface) 70%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;flex-wrap:wrap;justify-content:center;gap:6px;padding:6px;display:inline-flex}.mood-chip{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:8px 16px;font-size:.9rem;transition:all .25s}.mood-chip:hover{color:var(--text)}.mood-chip.active{background:var(--accent);color:#fff;box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent)}.view-tabs{gap:26px;margin-top:26px;display:inline-flex}.view-tab{font:inherit;cursor:pointer;color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;padding:6px 2px;font-size:1rem;transition:all .2s}.view-tab:hover{color:var(--text)}.view-tab.active{color:var(--text);border-bottom-color:var(--accent)}.newreleases{z-index:2;position:relative}.newreleases-intro{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 34px;font-size:.98rem}.discovery{color:inherit;text-decoration:none}.new-badge{background:var(--accent);color:#fff;border-radius:999px;padding:3px 8px;font-size:.72rem;font-weight:700;position:absolute;top:8px;left:8px;box-shadow:0 4px 12px #0000004d}.banner{z-index:2;text-align:center;background:color-mix(in srgb, var(--accent) 14%, var(--surface));border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);max-width:760px;color:var(--text);border-radius:var(--radius);margin:0 auto 28px;padding:12px 18px;font-size:.92rem;position:relative}.banner code{background:color-mix(in srgb, var(--text) 12%, transparent);border-radius:4px;padding:2px 6px}.filterbar{z-index:2;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:1000px;margin:0 auto 34px;display:flex;position:relative}.filterbar .search{flex:260px;min-width:200px}.filterbar input,.filterbar select{font:inherit;border-radius:var(--radius);border:1px solid color-mix(in srgb, var(--text) 18%, transparent);background:var(--surface);color:var(--text);outline:none;padding:10px 14px;transition:border-color .2s}.filterbar input:focus,.filterbar select:focus{border-color:var(--accent)}.count{color:var(--muted);white-space:nowrap;font-size:.9rem}.grid{z-index:2;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:clamp(16px,3vw,32px);max-width:1200px;margin:0 auto;display:grid;position:relative}.card{cursor:pointer;font:inherit;color:inherit;text-align:left;background:0 0;border:0;flex-direction:column;gap:10px;padding:0;transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex}.card:hover,.card:focus-visible{outline:none;transform:translateY(-6px)}.cover-wrap{aspect-ratio:1;position:relative}.cover{object-fit:cover;border-radius:var(--radius);background:color-mix(in srgb, var(--text) 8%, var(--surface));width:100%;height:100%;transition:box-shadow .3s;box-shadow:0 8px 24px #00000047}.card:hover .cover{box-shadow:0 14px 40px color-mix(in srgb, var(--accent) 50%, #0006)}.sleeve{opacity:0;z-index:-1;background:repeating-radial-gradient(circle,#111 0 2px,#1a1a1a 2px 4px);border-radius:50%;width:82%;height:88%;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;position:absolute;top:6%;right:0;transform:translate(0)scale(.9)}.card:hover .sleeve{opacity:1;transform:translate(28%)scale(.92)}.card-meta{flex-direction:column;gap:2px;display:flex}.card-title{text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;font-weight:600;line-height:1.2;overflow:hidden}.card-artist{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;overflow:hidden}.card-year{color:var(--muted);opacity:.7;font-size:.78rem}.empty{text-align:center;color:var(--muted);grid-column:1/-1;padding:60px 0}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;padding:20px;animation:.2s fade;display:flex;position:fixed;inset:0}.modal{background:var(--surface);color:var(--text);border-radius:calc(var(--radius) + 6px);border-top:4px solid var(--accent);width:100%;max-width:720px;max-height:90vh;animation:.26s cubic-bezier(.2,.8,.2,1) pop;position:relative;overflow:auto;box-shadow:0 30px 80px #00000080}.modal-close{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:1.8rem;line-height:1;position:absolute;top:10px;right:14px}.modal-body{flex-wrap:wrap;gap:24px;padding:28px;display:flex}.modal-cover{aspect-ratio:1;object-fit:cover;border-radius:var(--radius);width:240px;max-width:100%;box-shadow:0 12px 30px #00000059}.modal-info{flex:260px}.modal-info h2{margin:0 0 4px;font-size:1.7rem;line-height:1.1}.modal-artist{color:var(--muted);margin:0 0 18px;font-size:1.1rem}.modal-info dl{grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 20px;display:grid}.modal-info dt{color:var(--muted);font-size:.85rem}.modal-info dd{margin:0;font-size:.92rem}.discogs-link{color:#fff;background:var(--accent);border-radius:var(--radius);padding:9px 16px;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-block}.footer{z-index:2;text-align:center;color:var(--muted);margin-top:64px;font-size:.85rem;position:relative}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{opacity:0;transform:scale(.96)translateY(10px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}