:root {
  color-scheme: light;
  --paper: #f6f4ed;
  --ink: #182d2c;
  --muted: #576460;
  --accent: #9d4229;
  --line: #d4d8cd;
  --wash: #eaece3;
  --signal: #34645b;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #162321;
  --ink: #e9ece1;
  --muted: #b0beb6;
  --accent: #f4a180;
  --line: #3b4c46;
  --wash: #20312b;
  --signal: #9ebbb0;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 5; padding: .5rem 1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: .5rem; }
.site-header, main, .site-footer { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 30px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 750; letter-spacing: -.5px; text-decoration: none; line-height: 1.35; }
.brand-mark { width: 40px; height: 40px; color: var(--accent); flex: none; }
.wordmark-note { display: block; font: 10px/1.8 var(--mono); color: var(--muted); letter-spacing: .02em; margin-top: 3px; }
.site-header nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.site-header nav a { text-decoration: none; }
.theme-toggle { display: grid; place-items: center; width: 34px; height: 34px; padding: 6px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); }
.theme-toggle svg { width: 21px; height: 21px; }
.intro { display: grid; grid-template-columns: 1fr 280px; align-items: center; gap: 64px; padding-block: 78px 84px; }
.eyebrow { margin: 0 0 21px; color: var(--muted); font: 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .13em; }
h1, h2, h3, h4 { line-height: 1.18; font-weight: 650; letter-spacing: -.035em; }
.intro h1 { margin: 0; font-size: clamp(38px, 4.5vw, 60px); font-weight: 650; letter-spacing: -.055em; }
.intro h1 span { color: var(--signal); }
.intro-description { max-width: 540px; margin: 24px 0 18px; font-size: 18px; line-height: 1.65; color: var(--muted); }
.listen-link { color: var(--accent); font-size: 14px; font-weight: 650; text-decoration: none; }
.listen-link span { margin-left: 5px; }
.signal-instrument { display: block; width: 100%; padding: 0; border: 0; background: transparent; touch-action: pan-y; cursor: crosshair; }
.signal-art { display: block; width: 100%; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.signal-grid { stroke: var(--line); stroke-width: .7; }
.signal-primary { stroke: var(--signal); stroke-width: 2.3; }
.signal-secondary { stroke: var(--accent); stroke-width: 1.1; opacity: .7; }
.signal-dot { fill: var(--accent); }
.directory { border-top: 2px solid var(--ink); }
.directory-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 24px 17px; }
.directory-header h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.directory-header p { margin: 0; color: var(--muted); font: 11px/1.5 var(--mono); }
.directory-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.category-nav { display: flex; flex-wrap: wrap; gap: 9px 22px; font-size: 13px; }
.category-nav a { text-decoration: none; color: var(--muted); }
.category-nav a:hover { color: var(--accent); }
.project-search { position: relative; flex: 0 0 220px; }
.project-search input { width: 100%; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: 8px 30px 8px 11px; font-size: 13px; }
.project-search input::placeholder { color: var(--muted); opacity: 1; }
.project-search span { position: absolute; right: 11px; top: 5px; font-size: 21px; color: var(--muted); pointer-events: none; }
.project-content h2 { display: flex; align-items: baseline; gap: 16px; margin: 42px 0 18px; font: 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.project-content h2 .project-count { color: var(--accent); font-size: 11px; }
.project-content h2 a { text-decoration: none; }
.project-content > p { max-width: 700px; color: var(--muted); font-size: 14px; margin-block: -7px 20px; }
.project-content table { width: 100%; border-collapse: collapse; table-layout: auto; }
.project-content thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.project-content tr { border-top: 1px solid var(--line); }
.project-content tr:last-child { border-bottom: 1px solid var(--line); }
.project-content td { padding: 17px 0; vertical-align: baseline; font-size: 15px; line-height: 1.6; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.project-content th:first-child { width: 28%; }
.project-content td:first-child { width: 28%; padding-right: 25px; color: var(--ink); }
.project-content td:first-child a { display: inline-block; font: 600 14px/1.6 var(--mono); text-decoration: none; }
.project-content td:first-child a::after { content: " ↗"; font-family: var(--sans); color: var(--accent); opacity: 0; }
.project-content td:first-child a:hover::after, .project-content td:first-child a:focus-visible::after { opacity: 1; }
.project-content tr:hover { background: var(--wash); }
.no-results { padding-block: 30px; color: var(--muted); }
.document { max-width: 800px; padding-block: 60px 35px; overflow-wrap: anywhere; }
.document h1 { margin: 0 0 30px; font-size: clamp(32px, 5vw, 46px); }
.document h2 { margin-top: 46px; font-size: 26px; }
.document h3 { margin-top: 32px; font-size: 21px; }
.document h4 { margin-top: 24px; font-size: 18px; }
.document p, .document li { color: var(--muted); }
.document a { color: var(--accent); }
.document strong { color: var(--ink); font-weight: 650; }
.document img { display: block; max-width: 100%; height: auto; border-radius: 4px; margin-block: 28px; }
.document ul, .document ol { padding-left: 23px; }
.document li { margin-block: 8px; }
.document table { width: 100%; border-collapse: collapse; font-size: 14px; }
.document td, .document th { text-align: left; border-bottom: 1px solid var(--line); padding: 11px 10px; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.document th { background: var(--wash); font-weight: 650; }
.document blockquote { margin-inline: 0; border-left: 2px solid var(--accent); padding-left: 20px; }
code { font: .85em/1.6 var(--mono); background: var(--wash); border-radius: 3px; padding: 2px 5px; }
pre { overflow-x: auto; padding: 20px; border: 1px solid var(--line); border-radius: 4px; }
pre code { background: transparent; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin-block: 32px; }
.tags-data:empty { display: none; }
.site-footer { display: flex; align-items: start; justify-content: space-between; gap: 32px; margin-top: 70px; padding-block: 30px 40px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.site-footer div > a { color: var(--ink); font-size: 13px; font-weight: 650; text-decoration: none; }
.site-footer span { display: block; margin-top: 3px; }
.site-footer p { max-width: 355px; margin: 0; }
@media (max-width: 900px) {
  .site-header, main, .site-footer { width: calc(100% - 64px); }
  .intro { grid-template-columns: 1fr 200px; gap: 24px; }
  .intro h1 { font-size: 43px; }
  .directory-tools { align-items: flex-start; }
  .project-search { flex-basis: 195px; }
}
@media (max-width: 640px) {
  .site-header, main, .site-footer { width: calc(100% - 40px); }
  .site-header { flex-wrap: wrap; gap: 20px; padding-block: 21px; }
  .wordmark { font-size: 18px; }
  .brand-mark { width: 34px; height: 34px; }
  .site-header nav { gap: 24px; width: 100%; font-size: 13px; }
  .theme-toggle { margin-left: auto; width: 29px; height: 29px; padding: 4px; }
  .intro { display: block; padding-block: 48px; }
  .intro h1 { font-size: clamp(34px, 8.5vw, 46px); }
  .intro-description { font-size: 16px; margin-top: 20px; }
  .signal-instrument { width: min(240px, 100%); margin: 28px auto 0; }
  .directory-header { display: block; padding-top: 22px; }
  .directory-header h2 { font-size: 26px; }
  .directory-header p { margin-top: 10px; }
  .directory-tools { flex-direction: column; gap: 19px; padding-bottom: 20px; }
  .category-nav { gap: 9px 19px; }
  .project-search { flex-basis: auto; width: 100%; }
  .project-search input { padding-block: 10px; font-size: 14px; }
  .project-search span { top: 7px; }
  .project-content h2 { margin-top: 30px; font-size: 11px; letter-spacing: .06em; }
  .project-content table, .project-content tbody, .project-content tr, .project-content td { display: block; width: 100%; }
  .project-content tr { padding-block: 16px; }
  .project-content td { padding: 0; font-size: 14px; }
  .project-content td:first-child { width: 100%; padding: 0 0 5px; }
  .project-content td:first-child a { font-size: 14px; }
  .project-content td:first-child a::after { opacity: 1; }
  .document { padding-top: 38px; font-size: 16px; }
  .document table { font-size: 12px; }
  .document td, .document th { padding: 8px 5px; }
  .site-footer { flex-direction: column; gap: 14px; margin-top: 48px; padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
.document .back-link { display: inline-block; margin-bottom: 22px; color: var(--muted); font: 12px/1.5 var(--mono); text-decoration: none; }
.page-toc { border-block: 1px solid var(--line); padding-block: 13px; margin-bottom: 30px; font-size: 14px; }
.page-toc summary { cursor: pointer; font-weight: 600; }
.page-toc ul { margin-block: 14px; }
.page-toc nav > ul { columns: 2; column-gap: 35px; }
.page-toc li { break-inside: avoid; }
@media (max-width: 640px) { .page-toc nav > ul { columns: 1; } }