:root {
  --bg: #f7f6f2; --surface: #fff; --text: #1d1d1b; --muted: #6a675f; --border: #dcd8cd;
  --accent: #7a3b1e; --accent-text: #fff;
  --essential: #b3261e; --recommended: #9a6700; --optional: #4a6b3a;
  --ok: #2e7d32; --warn: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513; --surface: #201f1c; --text: #ecE9e1; --muted: #a29e93; --border: #3a3831;
    --accent: #e0a07a; --accent-text: #161513;
    --essential: #ff8a80; --recommended: #f0c060; --optional: #9ccc80;
    --ok: #81c784; --warn: #ff8a80;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
.site-header, main { max-width: 60rem; margin: 0 auto; padding: 1rem; }
h1 { margin: 0; font-size: 1.6rem; }
h2 { margin-top: 1.5rem; }
.sub { margin: 0 0 .75rem; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: .5rem; }
button, select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .4rem; padding: .4rem .8rem; cursor: pointer; }
button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.banner { max-width: 60rem; margin: 0 auto .5rem; padding: .6rem 1rem; background: var(--surface); border: 2px dashed var(--warn); border-radius: .4rem; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; padding: 0; list-style: none; }
.picker button { width: 100%; text-align: left; }
.picker .group-title { grid-column: 1 / -1; margin: .75rem 0 0; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; padding: 1rem; margin: .75rem 0; }
.card h3 { margin: 0 0 .25rem; }
.meta { color: var(--muted); font-size: .875rem; }
.chip, .badge { display: inline-block; padding: 0 .5rem; border-radius: 1rem; font-size: .75rem; border: 1px solid currentColor; margin-right: .25rem; white-space: nowrap; }
.badge.essential { color: var(--essential); } .badge.recommended { color: var(--recommended); } .badge.optional { color: var(--optional); }
.chip { color: var(--muted); }
.chip.ok { color: var(--ok); } .chip.warn { color: var(--warn); }
.kind { margin: .75rem 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.card ul { margin: .25rem 0; padding-left: 1.2rem; }
.summary { background: var(--surface); border-left: 4px solid var(--accent); padding: .5rem 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: 1rem; margin: .75rem 0; }
.check-list { list-style: none; padding: 0; }
.check-list label { display: flex; gap: .5rem; padding: .3rem 0; }
@media (max-width: 30rem) { h1 { font-size: 1.3rem; } }

.banner.note { border-style: solid; border-color: var(--border); font-size: .875rem; }
.picker-search, input[type="search"] { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .4rem; padding: .4rem .8rem; margin: .25rem 0; }
.picker li[hidden] { display: none; }
details { display: inline-block; margin-left: .5rem; font-size: .85rem; } summary { cursor: pointer; color: var(--muted); }