:root {
  --paper: #ffffff;
  --paper-raised: #faf9f7;
  --ink: #16130f;
  --ink-soft: #3a352c;
  --muted: #6b6459;
  --hairline: #e4e0d8;
  --orange: #ff6b00;
  --orange-ink: #b74e00;
  --sharp: #ceA020;
  --sharp-bg: #fbf1d6;
  --going: #3f7a32;
  --going-bg: #e9f2e2;
  --ready: #d1301f;
  --ready-bg: #fbe4e0;
  --code-bg: #16130f;
  --code-ink: #f3ede2;
  --code-accent: #ffb877;

  --font-display: "Arial Narrow", "Helvetica Neue Condensed Bold", "Liberation Sans Narrow", Arial, sans-serif;
  --font-body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17140f;
    --paper-raised: #1e1a14;
    --ink: #f1ece1;
    --ink-soft: #d8d0c1;
    --muted: #9a9082;
    --hairline: #35301f;
    --orange: #ff8a33;
    --orange-ink: #ffb877;
    --sharp: #e8c866;
    --sharp-bg: #33290f;
    --going: #7cbf68;
    --going-bg: #1c2c17;
    --ready: #f0776a;
    --ready-bg: #351915;
    --code-bg: #0d0b08;
    --code-ink: #f3ede2;
  }
}
:root[data-theme="dark"] {
  --paper: #17140f;
  --paper-raised: #1e1a14;
  --ink: #f1ece1;
  --ink-soft: #d8d0c1;
  --muted: #9a9082;
  --hairline: #35301f;
  --orange: #ff8a33;
  --orange-ink: #ffb877;
  --sharp: #e8c866;
  --sharp-bg: #33290f;
  --going: #7cbf68;
  --going-bg: #1c2c17;
  --ready: #f0776a;
  --ready-bg: #351915;
  --code-bg: #0d0b08;
  --code-ink: #f3ede2;
}
:root[data-theme="light"] {
  --paper: #ffffff;
  --paper-raised: #faf9f7;
  --ink: #16130f;
  --ink-soft: #3a352c;
  --muted: #6b6459;
  --hairline: #e4e0d8;
  --orange: #ff6b00;
  --orange-ink: #b74e00;
  --sharp: #ceA020;
  --sharp-bg: #fbf1d6;
  --going: #3f7a32;
  --going-bg: #e9f2e2;
  --ready: #d1301f;
  --ready-bg: #fbe4e0;
  --code-bg: #16130f;
  --code-ink: #f3ede2;
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: 760px; margin: 0 auto; padding: 40px 24px 96px; }

.sitenav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 24px 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sitenav a.brand { color: var(--ink); text-decoration: none; font-weight: 700; }
.sitenav a.brand span { color: var(--orange-ink); }
.sitenav .links { display: flex; gap: 18px; flex-wrap: wrap; }
.sitenav .links a { color: var(--muted); text-decoration: none; }
.sitenav .links a:hover, .sitenav .links a:focus-visible { color: var(--orange-ink); }

header.masthead {
  border-bottom: 3px solid var(--ink);
  padding-bottom: 28px;
  margin-bottom: 40px;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 10px;
}
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  line-height: 1.08;
  margin: 0 0 14px;
  text-wrap: balance;
  color: var(--ink);
}
.dek {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 6px;
}
.verified {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

nav.toc {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 18px 22px;
  margin-bottom: 48px;
}
nav.toc p {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
nav.toc ol, nav.toc ul {
  columns: 2;
  column-gap: 28px;
  margin: 0;
  padding-left: 1.1em;
  font-size: 14.5px;
}
nav.toc li { margin-bottom: 6px; break-inside: avoid; }
nav.toc a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
nav.toc a:hover, nav.toc a:focus-visible { color: var(--orange-ink); border-bottom-color: var(--orange-ink); }
nav.toc p.desc { font-family: var(--font-body); font-size: 14px; color: var(--muted); margin: 2px 0 0; text-transform: none; letter-spacing: 0; }

section.group { margin-bottom: 52px; }
.group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.group-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
  margin: 0;
  color: var(--ink);
}
.group-head .slug {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.qa { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.qa:last-child { border-bottom: none; }
.qa h2, .qa h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: italic;
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--ink);
  text-wrap: balance;
  text-transform: none;
  letter-spacing: 0;
}
.qa p { margin: 0; color: var(--ink-soft); max-width: 65ch; }
.qa p + p { margin-top: 10px; }

table.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 4px;
  font-size: 14.5px;
}
table.spec th, table.spec td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
table.spec thead th {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
}
table.spec .swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.dot.sharp { background: var(--sharp); }
.dot.going { background: var(--going); }
.dot.ready { background: var(--ready); }
.wrap-table { overflow-x: auto; }

.chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.chip.sharp { background: var(--sharp-bg); color: var(--sharp); }
.chip.going { background: var(--going-bg); color: var(--going); }
.chip.ready { background: var(--ready-bg); color: var(--ready); }

.code-panel {
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: 6px;
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  position: relative;
}
.code-panel .path {
  color: var(--code-accent);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.code-panel pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.copy-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--code-ink);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--code-accent); color: var(--code-accent); }
.copy-btn:focus-visible { outline: 2px solid var(--code-accent); outline-offset: 2px; }

.note {
  border-left: 3px solid var(--orange);
  background: var(--paper-raised);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.note strong { color: var(--ink); }
.note ul { margin: 8px 0 0; padding-left: 1.2em; }
.note li { margin-bottom: 4px; }

a { color: var(--orange-ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

footer.meta {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 20px 24px 40px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
footer.meta a { color: var(--muted); }

.home-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.home-list li { border-bottom: 1px solid var(--hairline); padding: 20px 0; }
.home-list li:first-child { padding-top: 0; }
.home-list a.pagelink {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
.home-list a.pagelink:hover, .home-list a.pagelink:focus-visible { color: var(--orange-ink); }
.home-list p { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; }

@media (max-width: 600px) {
  nav.toc ol, nav.toc ul { columns: 1; }
  .shell { padding: 32px 18px 72px; }
  .sitenav { flex-direction: column; align-items: flex-start; gap: 10px; }
}