@font-face{font-family:"Inter Tight";src:url(../reader/fonts/inter-tight-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../reader/fonts/inter-tight-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../reader/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{--tq:#14a7a0;--em:#1fae6e;--bg:#0d0e0f;--fg:#e7e6e2;--fg-2:#b9b9b5;--fg-3:#85878a;--fg-4:#56595c;--rule:rgba(231,230,226,.10);--rule-2:rgba(231,230,226,.22);
--sans:"Inter Tight",ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--ease:cubic-bezier(.2,.7,.1,1);--g:clamp(1.25rem,4vw,3rem)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--fg-2);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}:focus-visible{outline:1px solid var(--tq);outline-offset:3px}
.meta,.kicker,.top{font:400 .74rem/1.5 var(--mono);color:var(--fg-3)}
.top{display:flex;gap:.8rem;padding:1rem var(--g);border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(13,14,15,.92);z-index:4}.top b{color:var(--fg);font-weight:400}.top .sp{flex:1}.top a:hover{color:var(--tq)}
.hero{padding:3.2rem var(--g) 1.4rem;max-width:72rem}
.kicker{color:var(--tq)}.caret{animation:b 1s steps(1) infinite;margin-left:.2rem}@keyframes b{50%{opacity:0}}
h1{font:200 clamp(2rem,5vw,3.6rem)/1.04 var(--sans);letter-spacing:-.045em;color:var(--fg);margin:.4rem 0 1rem}h1 i{font-weight:200;color:var(--fg-3)}
.big{font-weight:100;-webkit-text-stroke:1px var(--fg);color:transparent;font-variant-numeric:tabular-nums}
.lede{max-width:40rem;color:var(--fg-2);margin:0}
.stats{display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;margin-top:1.6rem;font:400 .76rem var(--mono);color:var(--fg-3)}.stats b{display:block;font:200 1.6rem/1 var(--sans);color:var(--fg);letter-spacing:-.03em;margin-bottom:.25rem}
.stats div{border-top:1px solid var(--rule-2);padding-top:.6rem;position:relative}.stats div::before{content:"";position:absolute;top:-1px;left:0;width:1.4rem;height:1px;background:var(--em)}
.shelf{padding:.6rem var(--g) 0}#spines{display:flex;align-items:flex-end;gap:2px;height:110px;border-bottom:1px solid var(--rule-2)}
#spines a{flex:1;min-width:2px;background:var(--fg-4);opacity:.55;transition:opacity .3s,background .3s,transform .4s var(--ease);transform-origin:bottom}
#spines a:hover,#spines a.hl{opacity:1;background:var(--tq);transform:scaleY(1.06);box-shadow:0 0 10px rgba(20,167,160,.6)}#spines a.dim{opacity:.12}
#spines a.read{background:var(--em);opacity:.8}
.cap{margin:.5rem 0 0;font:400 .72rem var(--mono);color:var(--fg-4);min-height:1.2em}.cap b{color:var(--fg);font-weight:400}
.cont{padding:1.6rem var(--g) 0}.cont h2,.about h2,.grp h2{font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);display:flex;gap:.8rem;align-items:center;margin:0 0 .4rem}
.cont h2::after,.about h2::after,.grp h2::after{content:"";flex:1;height:1px;background:var(--rule)}
.tools{padding:2rem var(--g) .4rem;position:sticky;top:2.9rem;background:linear-gradient(var(--bg) 80%,transparent);z-index:3}
.prompt{display:flex;gap:.7rem;align-items:center;border-bottom:1px solid var(--rule-2);padding:.5rem 0;font:400 1.05rem var(--mono);max-width:46rem}.prompt::before{content:">";color:var(--tq)}
.prompt input{flex:1;background:none;border:0;outline:none;color:var(--fg);font:inherit}
.filters{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-top:.8rem;font:400 .76rem var(--mono);color:var(--fg-3)}
.filters button{padding:.2rem 0;border-bottom:1px solid transparent;transition:color .3s}.filters button:hover{color:var(--fg)}.filters button.on{color:var(--fg);border-color:var(--tq)}.filters sup{color:var(--fg-4);margin-left:.15rem}
main{padding:0 var(--g) 2rem}
.grp{margin-top:2.2rem}.grp h2 a:hover{color:var(--tq)}
.era{display:grid;grid-template-columns:minmax(9rem,15rem) 1fr;gap:0 2rem;border-top:1px solid var(--rule);padding:.2rem 0}
.era>a{font:400 .74rem/1.4 var(--mono);color:var(--fg-4);padding:.75rem 0}.era>a:hover{color:var(--tq)}
.bk{display:grid;grid-template-columns:1fr auto;gap:0 1.5rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--rule);position:relative;transition:padding .45s var(--ease)}
.bk:last-child{border-bottom:0}.bk:hover{padding-left:.6rem}.bk:hover .t{color:var(--fg)}
.bk .t{font:300 1.12rem/1.3 var(--sans);letter-spacing:-.015em;color:var(--fg-2)}.bk .a{color:var(--fg-3);font-size:.9rem;margin-left:.5rem}
.bk .m{font:400 .7rem var(--mono);color:var(--fg-4);white-space:nowrap;text-align:right}
.bk .x{grid-column:1/-1;font:400 .7rem/1.6 var(--mono);color:var(--fg-4);display:flex;flex-wrap:wrap;gap:0 1rem}.bk .x a:hover{color:var(--em)}
.bk .p{position:absolute;left:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--em),var(--tq))}
.bk .go::after{content:" →";color:var(--tq);opacity:0;transition:opacity .3s}.bk:hover .go::after{opacity:1}
.about{padding:3rem var(--g);max-width:52rem}.about p{color:var(--fg-3);font-size:.92rem}.about a{border-bottom:1px solid var(--rule-2)}.about a:hover{color:var(--tq)}
.foot{display:flex;justify-content:space-between;padding:1.2rem var(--g) 2rem;border-top:1px solid var(--rule);font:400 .74rem var(--mono);color:var(--fg-3)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.reveal.in{opacity:1;transform:none}
@media (max-width:700px){.era{grid-template-columns:1fr}.era>a{padding:.6rem 0 0}.bk{grid-template-columns:1fr}.bk .m{text-align:left}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

.bk.ranked{position:relative;padding-left:2.4rem}
.bk .rk{position:absolute;left:0;top:.15rem;font:300 1.05rem/1 var(--mono,monospace);color:var(--fg-4,#56595c);font-variant-numeric:tabular-nums;width:2rem;text-align:right;padding-right:.6rem}
.bk.ranked:nth-child(-n+11) .rk{color:#14a7a0}
.grp h2 .pm{display:block;font:400 .66rem/1.5 var(--mono,monospace);color:var(--fg-3,#85878a);letter-spacing:.04em;margin-top:.3rem}
/* v6.1 single underline: one 1px line, 4px below, same transition */
.filters button{border-bottom:0!important;background:linear-gradient(var(--tq),var(--tq)) 0 100%/0 1px no-repeat;padding-bottom:4px;transition:color .3s,background-size .3s}
.filters button:hover{background-size:100% 1px;background-image:linear-gradient(var(--fg-4,#55575a),var(--fg-4,#55575a))}
.filters button.on{background-size:100% 1px;background-image:linear-gradient(var(--tq),var(--tq))}