:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  color: #edf4ff;
  background: #080d17;
  --panel: #101827;
  --line: #26354a;
  --muted: #a4b4ca;
  --body: #b5c4d8;
  --accent: #57dbc2;
  --red: #e5484d;
  --green: #30a46c;
  --amber: #f5a524;
  --blue: #6e8bf5;
}
* { box-sizing: border-box; }
body { margin: 0; background: #080d17; }
main { max-width: 960px; margin: auto; padding: 32px 24px 56px; }
a { color: var(--accent); text-underline-offset: 4px; overflow-wrap: anywhere; }
.site { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.site a { font-weight: 600; text-decoration: none; }
.site a:hover { text-decoration: underline; }
h1 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -0.8px; margin: 0; line-height: 1.2; }
h2 { font-size: 19px; margin: 34px 0 12px; }
p, li { color: var(--body); line-height: 1.6; }
p { max-width: 78ch; }
.lede { font-size: 17px; color: #d5e2f2; margin: 16px 0 0; }
code { background: #182236; border: 1px solid #2b3a52; border-radius: 4px; padding: 1px 5px; font-size: 0.92em; overflow-wrap: anywhere; }
.pill { display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
        color: var(--muted); background: rgba(164, 180, 202, 0.10); border: 1px solid rgba(164, 180, 202, 0.45); }
.pill.live { color: #7fd6a8; background: rgba(48, 164, 108, 0.14); border-color: rgba(48, 164, 108, 0.6); }
.pill.impl { color: #aebdfb; background: rgba(110, 139, 245, 0.14); border-color: rgba(110, 139, 245, 0.6); }
.pill.optin { color: var(--amber); background: rgba(245, 165, 36, 0.12); border-color: rgba(245, 165, 36, 0.55); }
.pill.proposed { color: var(--accent); background: rgba(87, 219, 194, 0.10); border-color: rgba(87, 219, 194, 0.5); }
.pill.rejected { color: #f2878a; background: rgba(229, 72, 77, 0.12); border-color: rgba(229, 72, 77, 0.6); }
figure { margin: 22px 0 0; }
.diagram { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.diagram svg { display: block; width: 100%; min-width: 560px; height: auto; }
figcaption { color: var(--muted); line-height: 1.55; margin-top: 10px; font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cards > li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0; line-height: 1.55; }
.cards > li > b { display: block; color: var(--accent); font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 6px; }
.cards > li.flag { border-left: 3px solid var(--amber); }
.cards p { margin: 0; }
.cards p + p { margin-top: 8px; }
.cards ul { margin: 4px 0 0; padding-left: 18px; }
.cards ul li { margin: 2px 0; }
.where { padding-left: 20px; }
.where li { margin: 6px 0; }
.note { font-size: 14px; color: var(--muted); }
footer { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.8; }
@media (max-width: 600px) { main { padding: 22px 16px 40px; } }

/* Current cookbook navigation and evidence tables. */
.review, .archive-note { border-left: 3px solid var(--accent); padding: 10px 14px; background: var(--panel); }
.archive-note { border-color: var(--amber); }
.recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 12px; padding: 0; list-style: none; }
.recipes li { margin: 0; }
.recipes a { display: block; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-decoration: none; }
.recipes a:hover, .recipes a:focus-visible { border-color: var(--accent); }
.recipes b { display: block; color: #edf4ff; }
.recipes span { display: block; margin-top: 8px; color: var(--body); }
pre { overflow-x: auto; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; line-height: 1.6; }
pre code { border: 0; padding: 0; background: transparent; }
table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; color: var(--body); }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); min-width: 90px; }
th { color: #edf4ff; background: var(--panel); }
.flow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.flow span { border: 1px solid var(--line); border-radius: 6px; padding: 12px; }
.flow strong, .flow .wide { grid-column: 1 / -1; }

.recipes .impact { color: var(--accent); font-size: 13px; line-height: 1.45; }