:root{--ink:#1b1e26;--body:#42474f;--body-2:#4a4f57;--muted:#7a818b;--muted-2:#6b7079;--muted-3:#767b84;--muted-light:#9aa0a8;--muted-light-2:#a3a9b1;--surface:#f4f6f8;--surface-2:#eef0f3;--hairline:#ececef;--hairline-2:#f1f2f4;--hairline-3:#e8eaee;--white:#fff;--pill-border:#e1e4e8;--pill-text:#5a6069;--rank:#bcc2ca;--shadow-cover:0 8px 22px #14182129;--shadow-cover-hover:0 16px 34px #14182138;--shadow-rail:0 14px 38px #14182138;--shadow-modal:0 24px 60px #00000047;--font-serif:"Newsreader", Georgia, "Times New Roman", serif;--font-sans:"Helvetica Neue", Helvetica, Arial, sans-serif;--maxw:1180px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-sans);color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.5}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea{font-family:inherit}a{color:inherit}::selection{background:var(--surface-2);color:var(--ink)}:focus{outline:none}:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.sr-only{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}@keyframes modalUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}.site-header{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline-3);background:#ffffffeb;position:sticky;top:0}.site-header .wrap{align-items:center;gap:16px;height:64px;display:flex}.brand{font-family:var(--font-serif);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;align-items:center;font-size:22px;font-weight:600;display:flex}.nav-spacer{flex:1}.nav-search{border:1px solid var(--pill-border);height:36px;color:var(--muted-light);background:var(--white);border-radius:19px;flex:180px;align-items:center;gap:8px;max-width:280px;padding:0 14px;display:flex}.nav-search .glyph{color:var(--muted-light);font-size:14px}.nav-search input{color:var(--body);background:0 0;border:none;flex:1;min-width:0;font-size:13px}.nav-search input::placeholder{color:var(--muted-light)}.nav{align-items:center;gap:6px;display:flex}.nav button{color:var(--pill-text);border-radius:8px;padding:8px 10px;font-size:14px;transition:color .18s,background .18s}.nav button:hover{color:var(--ink)}.nav button[aria-current=true]{color:var(--ink);font-weight:600}.avatar-btn{background:var(--ink);width:34px;height:34px;color:var(--white);border-radius:50%;flex:none;place-items:center;font-size:13px;font-weight:600;display:grid}.nav .signout{color:var(--muted-light);padding:8px 6px;font-size:13px}.nav .signout:hover{color:var(--ink)}.nav .signin{color:var(--pill-text);border-radius:8px;padding:8px 10px;font-size:14px}.nav .signin:hover{color:var(--ink)}.hero{padding:52px 0 8px}.hero h1{font-family:var(--font-serif);letter-spacing:-.015em;color:var(--ink);max-width:16ch;font-size:42px;font-weight:600;line-height:1.06}.hero p{color:var(--muted);max-width:54ch;margin-top:16px;font-size:16px;line-height:1.5}.catalog-head{justify-content:space-between;align-items:baseline;gap:16px;margin:46px 0 12px;display:flex}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--muted-light);font-size:11px;font-weight:600}.catalog-head .count{color:var(--muted-light);font-size:13px}.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:34px 26px;display:grid}.cat-card{text-align:left;background:0 0;flex-direction:column;gap:9px;display:flex}.cat-cover{aspect-ratio:2/3;width:100%;box-shadow:var(--shadow-cover);border-radius:4px;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden;container-type:size}.cat-card:hover .cat-cover,.cat-card:focus-visible .cat-cover{box-shadow:var(--shadow-cover-hover);transform:translateY(-4px)}.cat-meta{flex-direction:column;gap:2px;display:flex}.cat-title{color:var(--ink);font-size:14px;font-weight:600;line-height:1.25}.cat-by{color:var(--muted);font-size:13px}.cat-count{color:var(--muted-light);font-size:12px}.catalog-state{color:var(--muted);padding:40px 0;font-size:15px}.catalog-state.error{color:var(--body)}.back{color:var(--muted);align-items:center;gap:8px;margin:26px 0 8px;font-size:13px;display:inline-flex}.back:hover{color:var(--ink)}.cta-ink{background:var(--ink);color:var(--white);border-radius:23px;align-items:center;gap:8px;height:46px;padding:0 20px;font-size:14px;font-weight:600;transition:opacity .18s;display:inline-flex}.cta-ink:hover{opacity:.9}.vote-pill{border:1px solid var(--pill-border);background:var(--white);height:34px;color:var(--ink);border-radius:17px;flex:none;align-items:center;gap:7px;padding:0 14px;font-size:13px;font-weight:600;transition:background .18s,border-color .18s;display:inline-flex}.vote-pill .vote-heart{display:block}.vote-pill.voted{background:var(--ink);border-color:var(--ink);color:var(--white)}.vote-pill.voted .vote-heart{animation:.3s pop}.vote-pill[aria-busy=true]{opacity:.7}.listen-actions{flex-wrap:wrap;gap:8px;display:flex}.listen-pill{border:1px solid var(--pill-border);height:32px;color:var(--pill-text);white-space:nowrap;border-radius:16px;align-items:center;gap:5px;padding:0 13px;font-size:13px;text-decoration:none;transition:border-color .18s,color .18s;display:inline-flex}.listen-pill:hover{border-color:var(--muted-light);color:var(--ink)}.empty-state{max-width:46ch;padding:38px 4px 8px}.empty-title{font-family:var(--font-serif);color:var(--muted-2);font-size:19px;font-weight:600}.empty-body{color:var(--muted);margin:10px 0 20px;font-size:15px;line-height:1.55}.breadcrumb{color:var(--muted-light);flex-wrap:wrap;align-items:center;gap:6px;margin:26px 0 18px;font-size:13px;display:flex}.breadcrumb button{color:var(--muted);padding:2px 0;font-size:13px}.breadcrumb button:hover{color:var(--ink)}.breadcrumb [aria-current=page]{color:var(--body)}.book-grid{grid-template-columns:300px 1fr;align-items:start;gap:52px;padding-bottom:60px;display:grid}.book-rail{flex-direction:column;gap:18px;display:flex;position:sticky;top:92px}.rail-cover{aspect-ratio:2/3;width:100%;box-shadow:var(--shadow-rail);border-radius:5px;position:relative;overflow:hidden;container-type:size}.rail-cta{align-self:flex-start}.book-list-head{border-bottom:1px solid var(--hairline-2);padding-bottom:12px}.book-list-head h2{font-family:var(--font-serif);color:var(--ink);font-size:21px;font-weight:600}.book-list-meta{color:var(--muted-light);margin-top:4px;font-size:13px}.book-state{color:var(--muted);padding:32px 4px;font-size:15px}.book-state.error{color:var(--body)}.vote-error{color:var(--body);margin-top:12px;font-size:13px}.song-list{list-style:none}.song-row{border-bottom:1px solid var(--hairline-2);align-items:flex-start;gap:20px;padding:18px 4px;display:flex}.song-rank{font-family:var(--font-serif);color:var(--rank);text-align:center;flex:none;width:26px;font-size:19px;line-height:1.4}.song-main{flex-direction:column;flex:1;gap:7px;min-width:0;display:flex}.song-title{color:var(--ink);font-size:16px;font-weight:600;line-height:1.25}.song-meta{color:var(--muted);font-size:13px}.song-note{color:var(--body-2);font-size:14px;line-height:1.5}@media (width<=720px){.book-grid{grid-template-columns:1fr;gap:28px}.book-rail{flex-direction:row;align-items:center;gap:16px;position:static}.rail-cover{flex:none;width:120px}.rail-cta{align-self:auto}}@media (width<=600px){.song-row{flex-wrap:wrap}.song-main{flex-basis:100%}}.addcard{background:var(--white);width:100%;max-width:480px;box-shadow:var(--shadow-modal);border-radius:16px;padding:28px;animation:.22s modalUp}.addcard h3{font-family:var(--font-serif);color:var(--ink);font-size:24px;font-weight:600;line-height:1.15}.sub{color:var(--muted);margin:6px 0 18px;font-size:14px;line-height:1.5}.field{flex-direction:column;gap:6px;margin:14px 0;display:flex}.field label{letter-spacing:.16em;text-transform:uppercase;color:var(--muted-light);font-size:11px;font-weight:600}.field input,.field textarea{border:1px solid var(--pill-border);width:100%;color:var(--ink);background:var(--white);border-radius:8px;outline:none;padding:10px 12px;font-size:14px;transition:border-color .18s,box-shadow .18s}.field input:focus-visible,.field textarea:focus-visible{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px #1b1e2614}.field input::placeholder,.field textarea::placeholder{color:var(--muted-light)}.field textarea{resize:vertical;min-height:60px;line-height:1.45}.two{grid-template-columns:1fr 1fr;gap:14px;display:grid}.counter{color:var(--muted-light);align-self:flex-end;margin-top:4px;font-size:12px}.counter.over{color:#a23b2e}.addactions{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.btn-primary{background:var(--ink);color:var(--white);border-radius:23px;padding:10px 20px;font-size:14px;font-weight:600;transition:opacity .18s}.btn-primary:hover:not(:disabled){opacity:.9}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-ghost{color:var(--ink);border:1px solid var(--pill-border);background:0 0;border-radius:23px;padding:9px 18px;font-size:14px;transition:border-color .18s,color .18s}.btn-ghost:hover:not(:disabled){border-color:var(--muted-light)}.btn-ghost:disabled{opacity:.45;cursor:not-allowed}@media (width<=520px){.two{grid-template-columns:1fr;gap:0}.addcard{padding:22px}}.profile{padding:30px 0 60px}.profile .avatar{background:var(--surface-2);width:104px;height:104px;color:var(--ink);font-family:var(--font-serif);border-radius:50%;place-items:center;font-size:38px;font-weight:600;display:grid}.profile .phead{align-items:center;gap:20px;padding-bottom:24px;display:flex}.profile h1{font-family:var(--font-serif);color:var(--ink);font-size:32px;font-weight:600}.profile .phead .meta{color:var(--muted-light);margin-top:4px;font-size:14px}footer{border-top:1px solid var(--hairline-3);color:var(--muted-light);padding:26px 0 46px;font-size:12.5px}footer .wrap{flex-wrap:wrap;justify-content:space-between;gap:16px;display:flex}@media (width<=680px){.wrap{padding:0 18px}.hero{padding:36px 0 8px}.hero h1{font-size:34px}.nav-search{display:none}}