:root{--paper:#f5f1e8;--ink:#262721;--muted:#77776d;--line:#d9d5ca;--accent:#d65f3e;--olive:#74765b;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',sans-serif;--mono:'DM Mono',monospace}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}.topbar{height:72px;padding:0 7.1%;display:flex;align-items:center;border-bottom:1px solid var(--line)}.wordmark{font-family:var(--serif);font-weight:700;font-size:21px;text-decoration:none;color:var(--ink);letter-spacing:-.7px}.record-mark{font-family:var(--sans);font-size:22px;margin-right:8px;color:var(--accent);vertical-align:-1px}.wordmark-dot{color:var(--accent)}.top-note,.eyebrow,.stat span,footer{font-family:var(--mono);font-size:10px;letter-spacing:1.3px}.top-note{margin:auto;color:var(--muted)}.text-button{border:0;background:none;font:500 12px var(--sans);color:var(--ink);cursor:pointer}.text-button:hover{color:var(--accent)}main{max-width:1280px;margin:auto;padding:0 7.1%}.intro{padding:74px 0 60px}.eyebrow{color:var(--olive);display:flex;align-items:center;gap:10px}.eyebrow-line{display:inline-block;width:25px;height:1px;background:var(--accent)}h1{font:600 clamp(43px,6.4vw,78px)/1.08 var(--serif);letter-spacing:-2.5px;margin:25px 0 17px}h1 em{color:var(--accent);font-weight:600}.lead{color:var(--muted);font-size:15px;margin:0}.intro-bottom{display:flex;align-items:center;margin-top:48px;gap:25px}.stat{display:flex;flex-direction:column;gap:4px}.stat strong{font:600 27px var(--serif)}.stat span{color:var(--muted);font-size:9px}.intro-rule{height:37px;width:1px;background:var(--line)}.add-button{margin-left:auto;border:0;background:var(--ink);color:#fff;padding:15px 19px;font:600 12px var(--sans);cursor:pointer;transition:background .2s}.add-button:hover{background:var(--accent)}.add-button span{font-size:16px;margin-right:7px}.collection{border-top:1px solid var(--line);padding-top:43px;padding-bottom:100px}.collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.collection-heading h2,.dialog-top h2{font:600 35px var(--serif);letter-spacing:-1px;margin:9px 0 0}.controls{display:flex;gap:10px}.search{width:min(355px,35vw);height:42px;border:1px solid var(--line);display:flex;align-items:center;padding:0 11px;gap:8px;background:#faf8f3}.search>span{font-size:22px;color:var(--muted)}.search input{border:0;outline:0;background:transparent;font:12px var(--sans);min-width:0;flex:1;color:var(--ink)}kbd{font:10px var(--mono);color:var(--muted);border:1px solid var(--line);padding:3px 5px;white-space:nowrap}select{border:1px solid var(--line);background:#faf8f3;color:var(--ink);padding:0 12px;font:12px var(--sans);outline:0}.filters{display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line);margin-top:28px;padding-bottom:12px}.filter{background:none;border:0;padding:8px 12px;color:var(--muted);font:12px var(--sans);cursor:pointer}.filter.active{background:var(--ink);color:#fff}.filter span{font-family:var(--mono);font-size:10px;color:#c8c4b9;margin-left:5px}.filter-spacer{flex:1}.result-label{font:10px var(--mono);color:var(--muted)}.album-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 20px;padding-top:27px}.album-card{min-width:0;cursor:pointer}.cover-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:#e5ded0}.cover{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}.album-card:hover .cover{transform:scale(1.035)}.cover-placeholder{height:100%;width:100%;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--cover-bg,#79806d);color:#fff}.cover-placeholder:before,.cover-placeholder:after{content:"";position:absolute;border:1px solid #ffffff36;border-radius:50%;width:72%;aspect-ratio:1}.cover-placeholder:after{width:55%}.cover-inner{position:relative;z-index:1;text-align:center;padding:12px;max-width:100%}.cover-initial{font:600 clamp(48px,8vw,100px)/1 var(--serif);opacity:.72}.cover-artist{font:10px var(--mono);letter-spacing:1.5px;text-transform:uppercase;margin-top:10px;overflow-wrap:anywhere}.cover-title{font:600 14px var(--serif);margin-top:7px;overflow-wrap:anywhere}.format-tag{position:absolute;top:10px;left:10px;background:var(--paper);padding:6px 8px;font:9px var(--mono);letter-spacing:.6px;z-index:2}.album-info{padding-top:14px}.album-artist{font:10px var(--mono);text-transform:uppercase;letter-spacing:.8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-title{font:600 18px var(--serif);margin:5px 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-meta{display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);color:var(--muted);gap:5px}.album-rating{color:var(--accent);letter-spacing:1px}.album-card .delete-link{opacity:0;color:var(--muted);font:10px var(--sans);border:0;background:none;padding:4px 0;cursor:pointer}.album-card:hover .delete-link{opacity:1}.empty-state{text-align:center;padding:70px 15px;color:var(--muted)}.empty-state>span{font-size:38px;color:var(--accent)}.empty-state h3{font:600 24px var(--serif);color:var(--ink);margin:14px 0 5px}.empty-state p{font-size:13px;margin-bottom:22px}.empty-state .add-button{margin:auto}footer{border-top:1px solid var(--line);padding:23px 7.1%;display:flex;justify-content:space-between;color:var(--muted);font-size:9px}dialog{border:0;padding:0;width:min(640px,calc(100% - 30px));background:var(--paper);color:var(--ink);box-shadow:0 24px 90px #25251f3d}dialog::backdrop{background:#1d1d19a8;backdrop-filter:blur(2px)}dialog form{padding:30px 34px}.dialog-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:25px}.dialog-top h2{font-size:29px}.close-button{border:0;background:none;font-size:29px;color:var(--muted);cursor:pointer;line-height:1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 14px}.form-grid label{font:10px var(--mono);letter-spacing:.3px;color:var(--muted)}.form-grid label.wide{grid-column:1/-1}.form-grid input,.form-grid select{display:block;width:100%;height:40px;margin-top:6px;padding:0 10px;border:1px solid var(--line);background:#faf8f3;font:12px var(--sans);color:var(--ink)}.form-grid input:focus,.form-grid select:focus{outline:1px solid var(--olive)}.discogs-note{grid-column:1/-1;background:#ebe6d9;padding:10px 12px;font:11px/1.5 var(--sans);color:var(--muted)}.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:19px;margin-top:25px}.cancel-button{border:0;background:none;font:12px var(--sans);color:var(--muted);cursor:pointer}.dialog-actions .add-button{margin:0}.dialog-actions .add-button span{margin:0 0 0 7px}@media(max-width:850px){.album-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-heading{align-items:flex-start;flex-direction:column}.controls{width:100%}.search{width:auto;flex:1}.top-note{display:none}}@media(max-width:580px){.topbar{padding:0 6%;height:62px}main{padding:0 6%}.intro{padding:54px 0 42px}h1{font-size:49px;letter-spacing:-1.7px}.lead{font-size:13px}.intro-bottom{gap:15px;margin-top:37px}.stat strong{font-size:22px}.stat span{font-size:8px;letter-spacing:.6px}.intro-bottom .add-button{padding:13px 12px;font-size:10px}.collection{padding-top:32px;padding-bottom:65px}.controls{flex-wrap:wrap}.search{width:100%;flex-basis:100%;height:40px}select{height:40px;flex:1}.filters{gap:0;overflow:auto}.filter{padding:8px}.result-label{white-space:nowrap}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 13px}.album-title{font-size:16px}.album-info{padding-top:10px}footer{padding:19px 6%;font-size:8px;gap:15px}footer span:last-child{text-align:right}.topbar .text-button{font-size:11px}dialog form{padding:24px 20px}.form-grid{gap:12px 10px}}
:root{}
.intro{padding:28px 0 30px}
.intro-bottom{margin-top:0}
@media(max-width:580px){.intro{padding:20px 0 24px}.intro-bottom{margin-top:0}}
:root{}
.cover-wrap{perspective:1000px}
.cover-flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.75,.25,1)}
.cover-flipper.has-back:hover,.cover-flipper.has-back:focus{transform:rotateY(180deg)}
.cover-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cover-face .cover,.cover-face .cover-placeholder{width:100%;height:100%;object-fit:cover}
.cover-back{transform:rotateY(180deg)}
.cover-flipper:focus{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.cover-flipper{transition:none}}
.cover-flipper.has-back:hover{transform:none}
.album-card:hover .cover-flipper.has-back,.cover-flipper.has-back:focus{transform:rotateY(180deg)}
.topbar + main + footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
.topbar + main + footer a:hover{color:var(--accent)}
.record-mark{display:inline-block;width:25px;height:25px;margin-right:8px;vertical-align:-6px}
.topbar + main + footer{align-items:center;gap:14px}
.topbar + main + footer span:last-child{margin-left:auto;text-align:right;letter-spacing:.4px;font-family:var(--sans);font-size:10px}
@media(max-width:580px){.topbar + main + footer{flex-wrap:wrap}.topbar + main + footer span:last-child{margin-left:0;text-align:left;flex-basis:100%}}
.topbar + main + footer{color:#4b4c43;font-size:11px}
.topbar + main + footer span:last-child{color:#3e4038;font-size:12px}
:root{--muted:#5b5c54}
.load-sentinel{padding:22px 0 5px;text-align:center;color:var(--muted);font:10px var(--mono);letter-spacing:.6px}
.intro-bottom{justify-content:center}
.intro-bottom .stat{align-items:center;text-align:center}
.intro-bottom{width:min(100%,560px);margin-left:auto;margin-right:auto;display:grid;grid-template-columns:1fr 1fr;gap:0}
.intro-bottom .stat{width:100%;padding:0 12px}
.album-card{opacity:1;transform:none;transition:none;animation:none}
.album-info{animation:info-enter .14s ease-out both}
@keyframes info-enter{from{opacity:.88}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.album-info{animation:none}}
.topbar{padding:0}
.topbar-inner{max-width:1280px;height:100%;margin:0 auto;padding:0 7.1%;display:flex;align-items:center}
@media(max-width:580px){.topbar{height:62px;padding:0}.topbar-inner{padding:0 6%}}
.page-shell{width:min(100%,1280px);max-width:none;margin-left:auto;margin-right:auto;padding-left:7.1%;padding-right:7.1%}
.topbar-inner{max-width:none}
@media(max-width:580px){.page-shell{padding-left:6%;padding-right:6%}}
.topbar{position:relative}
.topbar .top-note{position:absolute;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
.price-estimate{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding-top:7px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);color:var(--muted);font:9px/1.35 var(--sans);opacity:.68}
.price-estimate strong{font:10px/1.2 var(--mono);font-weight:500;white-space:nowrap;color:var(--ink)}