:root{--paper:oklch(95.3% .014 78);--paper-2:oklch(92.2% .018 74);--paper-3:oklch(88.6% .021 71);--paper-0:oklch(97.5% .01 80);--ink:oklch(23.5% .012 56);--ink-soft:oklch(40.2% .014 56);--ink-faint:oklch(56% .012 58);--line:oklch(82% .02 70);--line-soft:oklch(87.2% .016 72);--rust:oklch(56% .14 40);--rust-deep:oklch(47% .128 38);--rust-tint:oklch(56% .14 40/.12);--mustard:oklch(74% .11 78);--teal:oklch(56% .072 200);--bg:var(--paper);--surface:var(--paper-2);--surface-2:var(--paper-3);--text:var(--ink);--text-2:var(--ink-soft);--accent:var(--rust);--font-display:"Anton", "Arial Narrow", sans-serif;--font-serif:"Yeseva One", Georgia, serif;--font-body:"Work Sans", system-ui, sans-serif;--font-mono:"Space Mono", ui-monospace, monospace;--t-xs:.75rem;--t-sm:.875rem;--t-base:1rem;--t-md:1.125rem;--t-lg:1.375rem;--t-xl:1.875rem;--t-2xl:2.625rem;--t-3xl:3.75rem;--t-4xl:5.5rem;--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;--r-xs:2px;--r-sm:4px;--r-md:7px;--r-lg:12px;--r-pill:999px;--sh-1:0 1px 2px oklch(30% .02 60/.1);--sh-2:0 4px 14px oklch(30% .02 60/.12);--sh-3:0 12px 34px oklch(28% .02 60/.2);--sh-cover:0 2px 4px oklch(25% .02 60/.18), 0 14px 30px oklch(25% .02 60/.26);--ease:cubic-bezier(.22, .61, .36, 1);--fast:.14s;--med:.26s;--slow:.46s;--card-min:210px;--grid-gap:var(--s-6)}.grain:before{content:"";z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--t-base);min-height:100vh;margin:0;line-height:1.55}.poster{font-family:var(--font-display);letter-spacing:.01em;text-transform:uppercase;font-weight:400;line-height:.92}.title-serif{font-family:var(--font-serif);font-weight:400;line-height:1.08}.mono{font-family:var(--font-mono);letter-spacing:.02em}.label{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}.stamp{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--rust-deep);border:1.5px solid var(--rust);border-radius:var(--r-sm);white-space:nowrap;background:var(--rust-tint);align-items:center;gap:6px;padding:3px 8px 2px;display:inline-flex}.btn{font-family:var(--font-mono);font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-sm);white-space:nowrap;transition:transform var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);border:none;align-items:center;gap:8px;padding:11px 18px;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-solid{background:var(--ink);color:var(--paper)}.btn-solid:hover{background:var(--rust-deep)}.btn-accent{background:var(--rust);color:var(--paper)}.btn-accent:hover{background:var(--rust-deep)}.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);background:0 0}.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}.cover{aspect-ratio:1;border-radius:var(--r-xs);box-shadow:var(--sh-cover);background:var(--paper-3);position:relative;overflow:hidden}.cover:after{content:"";pointer-events:none;background:linear-gradient(125deg,oklch(100% 0 0/.18) 0%,oklch(100% 0 0/0) 32% 70%,oklch(0% 0 0/.1) 100%);position:absolute;inset:0}.cover img{object-fit:cover;width:100%;height:100%;display:block}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-thumb{background:var(--line);border:3px solid var(--paper);border-radius:99px}::-webkit-scrollbar-track{background:0 0}.app{max-width:1280px;padding:0 var(--s-6) var(--s-8);margin:0 auto}.site-head{padding-top:var(--s-7)}.head-inner{justify-content:space-between;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap;display:flex}.brand h1{font-family:var(--font-display);text-transform:uppercase;margin:var(--s-3) 0 0;letter-spacing:.01em;white-space:nowrap;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:.9}.head-right{align-items:flex-end;gap:var(--s-4);flex-direction:column;padding-bottom:6px;display:flex}.counts{gap:var(--s-6);display:flex}.count{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.count .n{font-family:var(--font-display);font-size:var(--t-2xl);color:var(--rust);line-height:1}.viewnav{gap:var(--s-7);border-bottom:2px solid var(--ink);margin-top:var(--s-7);display:flex}.vbtn{cursor:pointer;font-family:var(--font-display);text-transform:uppercase;font-size:var(--t-lg);letter-spacing:.02em;color:var(--ink-faint);padding:var(--s-3) 2px;white-space:nowrap;transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);background:0 0;border:none;border-bottom:3px solid #0000;margin-bottom:-2px}.vbtn:hover{color:var(--ink)}.vbtn.active{color:var(--ink);border-bottom-color:var(--rust)}.view-intro{max-width:64ch;color:var(--ink-soft);font-size:var(--t-md);margin:var(--s-5) 0 var(--s-6);text-wrap:pretty}.filterbar{justify-content:space-between;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap;display:flex}.filter-search{flex:0 240px;min-width:160px}.filter-search .in{font-size:var(--t-sm);padding:7px 11px}.chips{gap:var(--s-2);flex-wrap:wrap;display:flex}.chip{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;border:1.5px solid var(--line);border-radius:var(--r-pill);transition:all var(--fast) var(--ease);background:0 0;padding:6px 14px}.chip:hover{border-color:var(--ink);color:var(--ink)}.chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.result-count{white-space:nowrap}.flash-error{background:var(--rust-tint);color:var(--rust-deep);border:1px solid var(--rust);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-5);font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.04em;justify-content:space-between;align-items:center;gap:var(--s-3);display:flex}.grid{grid-template-columns:repeat(auto-fill, minmax(var(--card-min), 1fr));gap:var(--grid-gap);display:grid}.rec{cursor:pointer;text-align:left;color:inherit;font:inherit;gap:var(--s-3);background:0 0;border:none;flex-direction:column;width:100%;margin:0;padding:0;display:flex}.rec .cover{transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease)}.cover-art{position:absolute;inset:0}.cover-art svg,.cover-art img{object-fit:cover;width:100%;height:100%;display:block}.rec:hover .cover{box-shadow:var(--sh-3);transform:translateY(-5px)rotate(-.5deg)}.rec-meta{flex-direction:column;gap:3px;display:flex}.rec .artist{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}.rec .album{font-size:var(--t-md);color:var(--ink);line-height:1.14}.rec-foot{font-size:var(--t-xs);color:var(--ink-faint);align-items:center;gap:7px;margin-top:4px;display:flex}.rec-foot .dot{opacity:.6}.rec-foot .star{color:var(--rust);font-size:var(--t-sm);margin-left:auto}.ribbon{background:var(--rust);color:var(--paper);font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;z-index:3;padding:5px 42px;font-size:10px;position:absolute;top:14px;left:-36px;transform:rotate(-45deg);box-shadow:0 2px 6px oklch(0% 0 0/.28)}.overlay{z-index:1000;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:var(--s-5);animation:fade var(--med) var(--ease);background:oklch(20% .02 60/.5);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@keyframes fade{0%{opacity:0}to{opacity:1}}.sheet{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-3);gap:var(--s-7);padding:var(--s-7);width:100%;max-width:820px;max-height:92vh;animation:pop var(--med) var(--ease);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);display:grid;position:relative;overflow:auto}@keyframes pop{0%{opacity:0;transform:scale(.96)translateY(8px)}to{opacity:1;transform:none}}.close{z-index:4;background:var(--paper-2);border:1px solid var(--line);cursor:pointer;border-radius:var(--r-pill);width:34px;height:34px;color:var(--ink);transition:all var(--fast) var(--ease);place-items:center;font-size:14px;display:grid;position:absolute;top:14px;right:14px}.close:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}.sheet-cover{align-self:center}.sheet-info{flex-direction:column;justify-content:center;display:flex}.sheet-info h2{font-size:var(--t-2xl);margin:var(--s-3) 0 var(--s-2);line-height:1.05}.sheet-artist{font-size:var(--t-lg);color:var(--rust);margin:0}.sheet-tags{gap:var(--s-2);margin-top:var(--s-4);flex-wrap:wrap;display:flex}.sheet-actions{margin-top:var(--s-6);gap:var(--s-3);flex-wrap:wrap;align-items:center;display:flex}.tag-quiet{color:var(--ink);border-color:var(--line);background:0 0}.add-tile .add-inner{aspect-ratio:1;border:2px dashed var(--line);border-radius:var(--r-xs);color:var(--ink-faint);transition:all var(--med) var(--ease);flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.add-tile:hover .add-inner{border-color:var(--rust);color:var(--rust);background:var(--rust-tint)}.add-plus{font-size:2.8rem;font-weight:300;line-height:.8}.sheet-edit{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);max-width:860px}.edit-form{gap:var(--s-4);flex-direction:column;display:flex}.cover-hint{text-align:center;margin-top:10px}.fld{flex-direction:column;gap:6px;display:flex}.fld-l{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}.fld-help{font-size:var(--t-xs);color:var(--ink-faint);line-height:1.45}.in{font-family:var(--font-body);font-size:var(--t-base);color:var(--ink);background:var(--paper-0);border:1.5px solid var(--line);border-radius:var(--r-sm);width:100%;transition:border-color var(--fast) var(--ease);padding:9px 11px}.in:focus{border-color:var(--rust);outline:none}.fld-row{gap:var(--s-3);display:flex}.fld-row .fld{flex:1}.fld-row .fld-sm{flex:0 0 96px}.seg{border:1.5px solid var(--line);border-radius:var(--r-sm);display:flex;overflow:hidden}.seg-b{cursor:pointer;font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);transition:all var(--fast) var(--ease);background:0 0;border:none;flex:1;padding:10px 8px}.seg-b+.seg-b{border-left:1.5px solid var(--line)}.seg-b.on{background:var(--ink);color:var(--paper)}.fld-check{font-size:var(--t-sm);color:var(--ink-soft);cursor:pointer;align-items:center;gap:9px;display:flex}.fld-check input{accent-color:var(--rust);width:16px;height:16px}.edit-actions{margin-top:var(--s-3)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.danger{color:var(--rust-deep);box-shadow:inset 0 0 0 1.5px var(--rust);background:0 0}.btn.danger:hover{background:var(--rust);color:var(--paper);box-shadow:none}.linkbtn{cursor:pointer;color:var(--ink-faint);text-underline-offset:3px;font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;background:0 0;border:none;text-decoration:underline}.linkbtn:hover{color:var(--rust-deep)}.spotify-results{gap:var(--s-2);margin-top:var(--s-2);grid-template-columns:repeat(3,1fr);max-height:340px;padding-right:4px;display:grid;overflow-y:auto}.spotify-result{border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:border-color var(--fast) var(--ease);background:0 0;padding:0;overflow:hidden}.spotify-result:hover,.spotify-result.selected{border-color:var(--rust)}.spotify-result img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.spotify-result span{color:var(--ink-faint);font-size:10px;font-family:var(--font-mono);white-space:nowrap;text-overflow:ellipsis;padding:4px 5px;display:block;overflow:hidden}.empty{padding:var(--s-9) 0;text-align:center;color:var(--ink-faint)}.empty p{font-size:var(--t-xl)}.site-foot{justify-content:space-between;align-items:center;gap:var(--s-4);border-top:1px solid var(--line);margin-top:var(--s-8);padding-top:var(--s-5);color:var(--ink-faint);flex-wrap:wrap;display:flex}.foot-actions{gap:var(--s-5);align-items:center;display:flex}@media (width<=640px){.sheet{gap:var(--s-5);padding:var(--s-5);grid-template-columns:1fr}.head-inner{align-items:flex-start}.counts{gap:var(--s-5)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}