:root{
  color-scheme:dark;
  --bg:#141413;--ink:#ecebe6;--mute:#9b978e;--line:#2b2a27;--card:#1b1a18;--accent:#d98c6f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Charter,"Bitstream Charter",Georgia,serif;
  --r:6px
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 var(--serif);font-feature-settings:"onum","kern"}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:baseline;gap:28px;padding:34px 0 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font-size:26px;letter-spacing:.01em;font-weight:600}
.logo i{color:var(--accent);font-style:italic;font-weight:500}
nav.tabs{display:flex;gap:22px;font-size:15px;color:var(--mute);flex-wrap:wrap}
nav.tabs a[aria-current]{color:var(--ink);border-bottom:1px solid var(--ink)}
.search{margin-left:auto;flex:0 1 260px}
.search input{width:100%;font:inherit;font-size:15px;padding:6px 0;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);outline:none}
.search input:focus{border-color:var(--ink)}
.bar{display:flex;gap:16px;font-size:14px;color:var(--mute);padding:14px 0 6px;flex-wrap:wrap}
.bar button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.bar button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 26px;padding:22px 0 60px}
.card{display:block;outline:none}
.card .th{position:relative;aspect-ratio:16/9;background:var(--line);border-radius:var(--r);overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);transition:filter .2s}
.card:hover img,.card:focus img{filter:saturate(1.05)}
.card.sel .th{box-shadow:0 0 0 2px var(--accent)}
.card .badge{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;padding:1px 6px;border-radius:3px}
.card h3{font-size:16.5px;line-height:1.3;font-weight:500;margin:10px 0 3px}
.card .meta,.card .via{font-size:13.5px;color:var(--mute)}
.card .via{font-style:italic}
.card.seen{opacity:.5}
.empty{color:var(--mute);padding:40px 0}
footer{border-top:1px solid var(--line);padding:22px 0 40px;font-size:14px;color:var(--mute);display:flex;gap:20px;flex-wrap:wrap}
/* item page */
.item{max-width:860px;margin:0 auto;padding:30px 0 60px}
.player{aspect-ratio:16/9;width:100%;border:0;border-radius:var(--r);background:#000}
.item h1{font-size:30px;line-height:1.2;font-weight:500;margin:22px 0 6px}
.item .meta{color:var(--mute);font-size:15px}
.item .why{font-size:19px;font-style:italic;margin:18px 0}
.item h2{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500;margin:34px 0 10px}
.item ul.src{list-style:none;padding:0;margin:0}
.item ul.src li{padding:8px 0;border-bottom:1px solid var(--line)}
.item ul.src a{border-bottom:1px solid var(--line)}
.item .art{width:220px;border-radius:var(--r)}
.item audio{width:100%;margin:14px 0}
.thumbs{display:flex;gap:14px;margin-top:16px;font-size:15px}
.thumbs button{font:inherit;background:none;border:1px solid var(--line);border-radius:20px;padding:3px 14px;color:var(--ink);cursor:pointer}
.thumbs button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.prose{max-width:680px;margin:0 auto;padding:30px 0 60px}
.prose h1{font-weight:500}
.prose table{border-collapse:collapse;font-size:15px;width:100%}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.prose code{font-size:14px}
.note{font-size:14px;color:var(--mute);border-left:2px solid var(--accent);padding-left:12px}
kbd{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:3px;padding:0 5px}
#help{position:fixed;inset:auto 20px 20px auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;font-size:14px;display:none}
#help.on{display:block}
@media (max-width:640px){header.top{gap:14px;padding-top:22px}.search{flex-basis:100%;margin-left:0}.grid{gap:26px}.item h1{font-size:24px}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}.chips span{font-size:13px;color:var(--mute);border:1px solid var(--line);border-radius:12px;padding:1px 10px}