/* QU1V3R — vanilla styling. No external assets. */
:root{
  --paper:#f7f5f0; --ink:#1f2a2e; --muted:#5f6f76;
  --teal:#0e7c7b; --coral:#ff6b4a; --sun:#ffc53d; --card:#ffffff;
  --line:#ddd5c2; --good:#2e9e5b; --bad:#d64545;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45}
a{color:var(--teal)}
header.site{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1rem;max-width:960px;margin:0 auto}
.wordmark{font-weight:900;font-size:1.6rem;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.wordmark .accent{color:var(--coral)}
.tagline{color:var(--muted);margin:.2rem 0 0;font-size:.98rem}
.langsel{display:flex;align-items:center;gap:.4rem}
.langsel select{font:inherit;padding:.35rem .5rem;border:2px solid var(--line);border-radius:.6rem;background:var(--card)}
main{max-width:960px;margin:0 auto;padding:0 1rem 3rem}
h1{font-size:1.7rem;margin:.4rem 0}
h2{font-size:1.15rem;margin:1.1rem 0 .5rem}
.lede{color:var(--muted);font-size:1.05rem}
.panel{background:var(--card);border:2px solid var(--line);border-radius:1rem;padding:1rem;margin-top:1rem}
.opts{display:flex;gap:.5rem;flex-wrap:wrap}
.opts button{font:inherit;cursor:pointer;border:2px solid var(--line);background:var(--card);
  border-radius:.7rem;padding:.5rem .9rem;font-weight:600}
.opts button.sel{background:var(--teal);border-color:var(--teal);color:#fff}
.controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
.btn{font:inherit;cursor:pointer;border:2px solid var(--line);background:var(--card);
  border-radius:.7rem;padding:.55rem 1.1rem;font-weight:700}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn:active{transform:scale(.97)}
.search{font:inherit;width:100%;padding:.55rem .8rem;border:2px solid var(--line);
  border-radius:.7rem;background:var(--card);margin:.5rem 0}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.chips button{font:inherit;cursor:pointer;border:2px solid var(--line);background:var(--card);
  border-radius:999px;padding:.35rem .8rem;font-weight:600}
.chips button.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.toolcard{border:2px solid var(--line);border-radius:1rem;padding:1rem;margin:1rem 0;background:var(--card)}
.toolcard h3{margin:0 0 .3rem;font-size:1.2rem}
.toolcard h3 a{text-decoration:none;color:var(--ink)}
.toolcard h3 a:hover{text-decoration:underline}
.meta{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0}
.pill{display:inline-block;border-radius:999px;padding:.15rem .6rem;font-weight:700;font-size:.85rem;
  background:#eef3f2;border:1px solid var(--line)}
.pill.score{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.toolcard p{margin:.4rem 0}
.toolcard .why{font-weight:700}
.toolcard .access{color:var(--muted);font-size:.95rem}
.toolcard .note{color:var(--muted);font-size:.9rem;font-style:italic}
.empty{background:#fff3cd;border:2px solid var(--sun);border-radius:1rem;padding:1rem}
.empty ul{margin:.5rem 0}
footer{max-width:960px;margin:0 auto;padding:1rem;color:var(--muted);font-size:.9rem}
footer p{margin:.4rem 0}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.brandrow{display:flex;align-items:center;gap:.6rem}
.brandmark{height:2.6rem;width:auto}