:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#e7ebe1;--surface:#f6f7f1;--surface-2:#eef1e7;--ink:#20261d;--muted:#697061;--line:#d3d8c8;--grow:#4f7a3a;--grow-ink:#3c5f2c;--warn:#bd6027;--cul:#4f7a3a;--med:#7d5aa0;--b:#4f7a3a;--i:#c9a24b;--a:#bd6027;--cs:#4a72a8;--shadow:0 1px 0 rgba(32,38,29,.04),0 12px 30px -18px rgba(32,38,29,.35);--sans:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;--serif:"Fraunces",Georgia,serif;}
  *,*::before,*::after{box-sizing:inherit}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171a14;--surface:#1f231b;--surface-2:#242920;--ink:#e8ebe0;--muted:#9aa08e;--line:#333829;--grow:#7cae5f;--grow-ink:#a7d089;--warn:#e08a4e;--cul:#7cae5f;--med:#b18fd8;--b:#7cae5f;--i:#d8b661;--a:#e08a4e;--cs:#7ba0d0;--shadow:0 1px 0 rgba(0,0,0,.2),0 14px 34px -18px rgba(0,0,0,.6);}}
  :root[data-theme="dark"]{--bg:#171a14;--surface:#1f231b;--surface-2:#242920;--ink:#e8ebe0;--muted:#9aa08e;--line:#333829;--grow:#7cae5f;--grow-ink:#a7d089;--warn:#e08a4e;--cul:#7cae5f;--med:#b18fd8;--b:#7cae5f;--i:#d8b661;--a:#e08a4e;--cs:#7ba0d0;--shadow:0 1px 0 rgba(0,0,0,.2),0 14px 34px -18px rgba(0,0,0,.6);}
  html,body{margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
  .wrap{max-width:940px;margin:0 auto;padding:clamp(18px,4vw,40px) clamp(16px,4vw,32px) 56px}
  .kicker{font-size:.82rem;color:var(--muted);font-weight:500}h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,5vw,2.8rem);line-height:1.02;letter-spacing:-.01em;margin:4px 0 10px}
  .intro{color:var(--muted);max-width:68ch;margin:0 0 20px}
  .search{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px}
  .search:focus,button:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
  .filters{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
  .fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .fgroup .glab{font-size:.76rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;width:74px;flex:0 0 auto}
  .chip{font-family:var(--sans);font-weight:500;font-size:.84rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
  .chip[aria-pressed="true"]{border-color:var(--grow);color:var(--grow-ink);background:color-mix(in srgb,var(--grow) 12%,transparent)}
  .count{font-size:.85rem;color:var(--muted);margin-bottom:14px}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
  article.sp{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px}
  article.sp.hidden{display:none}
  .sp h2{font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1.1;margin:0}
  .sp .sci{font-style:italic;color:var(--muted);font-size:.85rem;margin-top:1px}
  .badges{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
  .badge{font-size:.72rem;font-weight:600;border-radius:6px;padding:3px 8px;border:1px solid var(--line)}
  .badge.cul{color:var(--cul)}.badge.med{color:var(--med)}.badge.dif-beginner{color:var(--b)}.badge.dif-intermediate{color:var(--i)}.badge.dif-advanced{color:var(--a)}.badge.csb{color:var(--cs)}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:.85rem;color:var(--muted)}
  .stats b{font-family:var(--serif);color:var(--ink);font-weight:500}
  details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
  summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--grow-ink)}
  .kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.88rem;margin-top:10px}
  .kv .k{color:var(--muted)}.kv .v{text-align:right;font-weight:500}
  .sub{font-size:.76rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 4px}
  .tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .toolchip{font-size:.82rem;font-weight:500;color:var(--grow-ink);background:color-mix(in srgb,var(--grow) 12%,transparent);border:1px solid color-mix(in srgb,var(--grow) 30%,var(--line));border-radius:999px;padding:5px 11px;text-decoration:none}
  .srcline{font-size:.8rem;color:var(--muted);margin-top:10px}
  .conf{display:inline-block;font-size:.72rem;font-weight:600;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));border-radius:6px;padding:2px 7px}
  .empty{color:var(--muted);text-align:center;padding:40px;display:none}
  footer.foot{margin-top:24px;color:var(--muted);font-size:.82rem}
  code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:.85em}

/* faceted filters */
.chip .n{margin-left:6px;font-size:.74em;opacity:.65;font-variant-numeric:tabular-nums}
.chip.zero{opacity:.4;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.reset{font-family:var(--sans);font-weight:600;font-size:.84rem;color:var(--grow-ink);background:transparent;border:0;text-decoration:underline;cursor:pointer;padding:4px 2px;margin:0 0 10px}
.empty{text-align:left;padding:24px 0}
.empty p{margin:0 0 8px}
.empty .alts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}