:root{--ink:#1a1a1a;--ink-muted:#5a5248;--bg:#fafaf8;--surface:#fff;--rule:#d4a574;--accent:#457b9d;--accent-ink:#fafaf8;--kraft-brown:#c49a6d;--listened-red:#e63946;--unplayed-blue:#457b9d;--placeholder-gray:#a8b2ba;--measure:60ch;scrollbar-color:var(--rule) transparent;caret-color:var(--accent);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--ink:#f5f3f0;--ink-muted:#a69f94;--bg:#1c1916;--surface:#292521;--rule:#5a5248;--kraft-brown:#c4936d;--accent:#6ba3c8;--accent-ink:#1c1916;--listened-red:#f05761;--unplayed-blue:#6ba3c8;--placeholder-gray:#5a5248}}*,:before,:after{box-sizing:border-box}html{overflow-x:clip}body{-webkit-font-smoothing:antialiased;color:var(--ink);background:var(--bg);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}.screen{min-height:100vh}p{text-wrap:pretty}h1,h2,h3{text-wrap:balance}::selection{background:var(--accent);color:var(--accent-ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:var(--accent);text-underline-offset:.18em}.num{font-variant-numeric:tabular-nums}button,[role=button],summary,select,input[type=checkbox],input[type=radio]{min-height:44px}button{min-width:44px}input,select,textarea{font:inherit;font-size:max(1rem,16px)}img,video,canvas,svg{max-width:100%;height:auto}pre{overflow-x:auto}@media (width<=480px){.screen{padding-inline:1rem}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}button,input{transition:all .15s ease-out}}#root{flex-direction:column;min-height:100vh;display:flex}.app-container{flex-direction:column;flex:1;display:flex}.app-content{flex:1;padding-bottom:4rem}.tab-bar{background:var(--kraft-brown);border-top:2px solid var(--ink);z-index:100;display:flex;position:fixed;bottom:0;left:0;right:0}.tab-button{color:var(--bg);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;border-right:1px solid #1a1a1a33;flex:1;padding:1rem;font-family:inherit;font-size:.875rem;font-weight:700}.tab-button:last-child{border-right:none}.tab-button:hover{background:#1a1a1a1a}.tab-button.active{background:var(--ink);color:var(--kraft-brown)}.collection-screen{width:100%;max-width:1400px;margin:0 auto;padding:2rem}.collection-header{border-bottom:2px solid var(--kraft-brown);justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;display:flex}.collection-title{letter-spacing:-.02em;text-transform:uppercase;font-size:1.5rem;font-weight:700}.filter-toggle{border:2px solid var(--unplayed-blue);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;color:var(--unplayed-blue);background:0 0;align-items:center;gap:.5rem;padding:.5rem 1rem;font-family:inherit;font-size:.75rem;font-weight:700;display:flex}.filter-toggle:hover{background:#457b9d1a}.filter-toggle.active{background:var(--unplayed-blue);color:var(--bg)}.filter-indicator{background:currentColor;border-radius:50%;width:10px;height:10px}.album-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2rem;display:grid}.album-card{flex-direction:column;gap:.5rem;display:flex}.album-cover{aspect-ratio:1;background:var(--placeholder-gray);border:2px solid var(--ink);position:relative;overflow:hidden}.album-cover.listened:after{content:"LISTENED";background:var(--listened-red);color:var(--bg);letter-spacing:.1em;padding:.25rem 1rem;font-size:.625rem;font-weight:700;position:absolute;bottom:0;right:0;transform:rotate(-8deg)translate(8px)translateY(4px);box-shadow:0 2px 4px #0000004d}.album-info{flex-direction:column;gap:.125rem;display:flex}.album-artist{letter-spacing:-.01em;font-size:.875rem;font-weight:700}.album-title{font-size:.875rem;font-weight:400}.album-year{color:var(--ink-muted);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:500}.album-actions{gap:.5rem;margin-top:.25rem;display:flex}.album-button{border:1px solid var(--ink);background:var(--bg);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;padding:.25rem .5rem;font-family:inherit;font-size:.625rem;font-weight:700}.album-button:hover{background:var(--kraft-brown);border-color:var(--kraft-brown);color:var(--bg)}.album-button.delete{color:var(--listened-red);border-color:var(--listened-red)}.album-button.delete:hover{background:var(--listened-red);color:var(--bg)}.empty-state{text-align:center;color:var(--ink-muted);padding:3rem 2rem}.empty-state h3{text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:1.125rem;font-weight:700}.empty-state p{font-size:.875rem}.add-screen{width:100%;max-width:600px;margin:0 auto;padding:2rem}.add-form{background:var(--surface);border:2px solid var(--kraft-brown);padding:2rem}.add-header{letter-spacing:-.02em;text-transform:uppercase;border-bottom:2px solid var(--kraft-brown);margin-bottom:2rem;padding-bottom:1rem;font-size:1.5rem;font-weight:700}.form-group{margin-bottom:1.5rem}.form-label{letter-spacing:.05em;text-transform:uppercase;color:var(--kraft-brown);margin-bottom:.5rem;font-size:.75rem;font-weight:700;display:block}.form-input{border:2px solid var(--ink);background:var(--bg);width:100%;color:var(--ink);padding:.5rem 1rem;font-family:inherit}.form-input:focus{border-color:var(--unplayed-blue);outline:none}.form-input::placeholder{color:var(--ink-muted);opacity:.5}.form-actions{border-top:1px solid var(--rule);gap:1rem;margin-top:2rem;padding-top:1.5rem;display:flex}.form-button{border:2px solid var(--ink);background:var(--ink);color:var(--bg);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;flex:1;padding:1rem;font-family:inherit;font-size:.875rem;font-weight:700}.form-button:hover{background:var(--kraft-brown);border-color:var(--kraft-brown)}.form-button.secondary{background:var(--bg);color:var(--ink)}.form-button.secondary:hover{background:#d4a5741a}.form-button:disabled{opacity:.5;cursor:not-allowed}.success-message{background:var(--unplayed-blue);color:var(--bg);letter-spacing:.05em;text-align:center;text-transform:uppercase;margin-bottom:1.5rem;padding:1rem;font-size:.875rem;font-weight:700}@media (width<=768px){.collection-screen,.add-screen{padding:1rem}.album-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.collection-header{flex-direction:column;align-items:flex-start;gap:1rem}.add-form{padding:1rem}}@media (width<=480px){body,.container,[class*=container],section,header,footer,nav,main,article{padding-inline:max(1rem,16px)}}p,li,dt,dd,blockquote,figcaption,td,th{max-width:min(75ch,100%)}