:root{
    --bg:#fafafa;--fg:#1f2328;--accent:#194563;--surface:#eef6fa;--radius:.6rem;--gap:1.5rem;
    --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --shadow:0 2px 8px rgba(0,0,0,.08);--button-bg:#194563;--button-fg:#fff;--muted:#6b7280;
}
@media (prefers-color-scheme: dark){
    :root{ --bg:#0f1418;--fg:#e3e7eb;--accent:#77c0ff;--surface:#0f1b24;--button-bg:#2a84c6;--button-fg:#081016;--shadow:0 2px 10px rgba(0,0,0,.4); }
}
body{max-width:110ch}
header,footer{text-align:center;margin-bottom:var(--gap)}
header h1{font-size:2.25rem;color:var(--accent)}
header p.mini{font-size:1.05rem;color:var(--muted)}
nav a{color:var(--accent);text-decoration:none;font-size:.9rem}
nav a:hover,nav a:focus{text-decoration:underline}

.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;margin:1rem 0}
.toolbar input[type="search"], .toolbar input[type="url"]{
    padding:.5rem .65rem;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;min-width:22ch;background:var(--bg);color:var(--fg)
}
.toolbar .controls{display:flex;gap:.5rem;flex-wrap:wrap}
.btn{background:var(--surface);border:1px solid rgba(0,0,0,.06);border-radius:.5rem;padding:.45rem .7rem;color:var(--accent);cursor:pointer}
.btn.primary{background:var(--button-bg);color:var(--button-fg);border:none}
.btn.chip.active{outline:2px solid var(--accent)}

.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(24ch,1fr))}
.card{background:var(--surface);padding:var(--gap);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column}
.card h3{color:var(--accent);margin-bottom:.5rem;font-size:1.15rem}
.card p{font-size:.92rem;margin-bottom:.75rem;flex:1}
pre{background:#fff;border-radius:.5rem;padding:.75rem;overflow-x:auto;font-size:.85rem;position:relative}
.card .actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.badge{display:inline-block;background:rgba(25,69,99,.12);color:var(--accent);padding:.1rem .45rem;border-radius:.4rem;font-size:.8rem;margin-left:.25rem}
.card:target{outline:2px solid var(--accent);scroll-margin-top:6rem}
@media(max-width:600px){.grid{grid-template-columns:1fr}header h1{font-size:2rem}}