: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{background:var(--bg);color:var(--fg);font-family:var(--font);max-width:110ch;margin:auto;padding:var(--gap);line-height:1.6}
header,footer{text-align:center;margin-bottom:var(--gap)}
header h1{font-size:2.25rem;color:var(--accent)}
header p{opacity:.9}
nav a{color:var(--accent);text-decoration:none;font-size:.9rem}
nav a:hover,nav a:focus{text-decoration:underline}
.mini{font-size:.9rem;color:var(--muted)}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;width:1px!important;overflow:hidden;padding:0!important;margin:-1px!important}

.toolbar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;margin:1rem 0}
.toolbar .controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
#filter{padding:.55rem .75rem;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;min-width:26ch;background:var(--bg);color:var(--fg)}
.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}
.chip{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:.25rem .6rem;cursor:pointer}
.chip.active{background:var(--accent);color:var(--button-fg);border-color:transparent}

#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);display:flex;flex-direction:column}
.card h3{color:var(--accent);margin-bottom:.35rem;font-size:1.15rem}
.card p{font-size:.92rem;margin-bottom:.6rem}
pre{background:#fff;border-radius:.5rem;padding:.75rem;overflow-x:auto;font-size:.85rem;position:relative}
.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}
.tags{margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap}
.tags a{color:inherit;text-decoration:none}
.tags a:hover{text-decoration:underline}
.hidden{display:none!important}

@media(max-width:600px){
    header h1{font-size:2rem}
    #grid{grid-template-columns:1fr}
}