:root { --bg:#f3f6f8; --panel:#fff; --ink:#16212b; --muted:#5e6d79; --line:#d8e0e6; --accent:#0969da; --accent-dark:#0756ae; --code:#16202a; --shadow:0 8px 30px rgba(24,39,55,.08); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.52 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.page { max-width:1120px; margin:0 auto; padding:28px 20px 64px; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin:8px 0 24px; }
.eyebrow { text-transform:uppercase; letter-spacing:.09em; color:var(--accent); font-weight:700; font-size:.76rem; margin:0 0 4px; }
h1 { margin:0; line-height:1.1; font-size:clamp(2rem,5vw,3rem); }
.subtitle { color:var(--muted); margin:8px 0 0; max-width:700px; }
.count { white-space:nowrap; background:#e8f1fc; border:1px solid #c4dbf8; border-radius:999px; padding:7px 12px; color:#174f86; font-weight:700; }
.controls { display:grid; grid-template-columns:minmax(240px,2fr) minmax(140px,1fr) minmax(140px,1fr) auto; gap:12px; align-items:end; background:var(--panel); padding:16px; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); position:sticky; top:0; z-index:2; }
label { display:grid; gap:5px; font-size:.82rem; font-weight:700; color:var(--muted); }
input,select,button { font:inherit; }
input,select { border:1px solid #b8c6d1; border-radius:7px; min-height:39px; padding:8px 10px; color:var(--ink); background:#fff; }
.search-label input { width:100%; }
.button-row { display:flex; flex-wrap:wrap; gap:7px; }
button { border:1px solid var(--accent); background:var(--accent); color:white; border-radius:7px; padding:9px 11px; cursor:pointer; font-weight:650; }
button:hover { background:var(--accent-dark); }
button.secondary { color:#21415e; background:#fff; border-color:#a8b8c5; }
#entries { margin-top:18px; display:grid; gap:10px; }
.entry { background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 2px 8px rgba(24,39,55,.035); scroll-margin-top:112px; }
.entry[hidden] { display:none; }
summary { cursor:pointer; padding:15px 18px; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::before { content:'›'; color:var(--accent); display:inline-block; margin-right:9px; font-size:1.4rem; vertical-align:-2px; transition:transform .16s; }
details[open] summary::before { transform:rotate(90deg); }
.summary-copy { display:inline; }
.topic-pill,.type-pill { display:inline-block; font-size:.7rem; font-weight:750; letter-spacing:.025em; border-radius:999px; padding:2px 7px; margin-right:6px; vertical-align:2px; }
.topic-pill { color:#165588; background:#e8f3fc; }
.type-pill { color:#5a4076; background:#f0eafa; text-transform:uppercase; }
.type-task { color:#6f4c0f; background:#fff1cf; }.type-cheat { color:#12634f; background:#def8ed; }.type-glossary { color:#5e4b0b; background:#fbf3cd; }
.entry-title { font-weight:760; font-size:1.03rem; }
.question { display:block; color:var(--muted); margin:4px 0 0 31px; font-size:.92rem; }
.entry-body { border-top:1px solid var(--line); padding:16px 19px 13px 48px; }
.markdown > :first-child { margin-top:0; }.markdown > :last-child { margin-bottom:0; }
.markdown p { margin:0 0 12px; }.markdown ul { margin:6px 0 12px; padding-left:22px; }
.markdown pre { background:var(--code); color:#e9f3fb; overflow:auto; padding:13px; border-radius:8px; line-height:1.42; }.markdown code { font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#edf2f6; padding:1px 4px; border-radius:4px; font-size:.9em; }.markdown pre code { background:none; padding:0; }
footer { border-top:1px solid #e7edf1; margin-top:15px; padding-top:10px; color:var(--muted); font-size:.78rem; display:flex; gap:15px; flex-wrap:wrap; } footer a { color:var(--accent); }
.empty { padding:20px; border-radius:10px; background:#fff7df; color:#775a0c; }
@media (max-width:780px) { .hero { display:block; }.count { display:inline-block; margin-top:14px; }.controls { position:static; grid-template-columns:1fr 1fr; }.search-label { grid-column:1 / -1; }.button-row { grid-column:1 / -1; }.entry-body { padding-left:18px; }.question { margin-left:0; } }
@media (max-width:480px) { .controls { grid-template-columns:1fr; }.page { padding:18px 12px; } }