:root {
  color-scheme: dark;
  --faq-bg: var(--op-bg);
  --faq-surface: var(--op-surface);
  --faq-input: var(--op-input);
  --faq-text: var(--op-text);
  --faq-muted: var(--op-muted);
  --faq-border: var(--op-border);
  --faq-accent: var(--op-accent);
  --faq-accent-hover: var(--op-accent-hover);
  --faq-shadow: var(--op-shadow);
}

:root[data-theme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--faq-bg); }
body {
  margin: 0;
  min-width: 0;
  background: var(--faq-bg);
  color: var(--faq-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: var(--faq-accent); }
a:hover { color: var(--faq-accent-hover); }
button, select { font: inherit; }
button, select, a { outline-offset: 3px; }

.faq-shell { width: min(980px, calc(100% - 2rem)); margin: 0 auto; }
.faq-header {
  border-bottom: 1px solid var(--faq-border);
  background: var(--faq-surface);
}
.faq-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding: 1rem 0;
}
.brand { color: var(--faq-text); text-decoration: none; font-weight: 800; letter-spacing: -0.02em; }
.brand span { display: block; color: var(--faq-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; }
.faq-controls { display: flex; align-items: center; gap: 0.6rem; }
.faq-control {
  min-height: 40px;
  border: 1px solid var(--faq-border);
  border-radius: 8px;
  background: transparent;
  color: var(--faq-text);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.faq-control:hover { border-color: var(--faq-accent); }
.faq-main { padding: 4rem 0 5rem; }
.eyebrow { margin: 0 0 0.5rem; color: var(--faq-accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { max-width: 15ch; margin: 0; font-size: clamp(2.3rem, 7vw, 4.8rem); line-height: 0.98; letter-spacing: -0.06em; }
.lede { max-width: 62ch; margin: 1.25rem 0 0; color: var(--faq-muted); font-size: 1.05rem; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1rem; margin-top: 3rem; }
.faq-card {
  min-width: 0;
  border: 1px solid var(--faq-border);
  border-radius: 12px;
  background: var(--faq-surface);
  box-shadow: var(--faq-shadow);
  padding: 1.25rem;
}
.faq-card h2 { margin: 0; font-size: 1.15rem; }
.faq-note { margin: 0.45rem 0 1rem; color: var(--faq-muted); font-size: 0.9rem; }
.glossary { display: grid; gap: 0.7rem; margin: 0; }
.glossary-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--faq-border); }
.glossary-row:first-child { padding-top: 0; border-top: 0; }
.glossary dt { color: var(--faq-accent); font-family: "SF Mono", "Roboto Mono", monospace; font-weight: 800; }
.glossary dd { margin: 0; color: var(--faq-muted); font-size: 0.9rem; }
.glossary dd strong { display: block; color: var(--faq-text); font-size: 0.92rem; }
.questions { display: grid; gap: 0.7rem; }
.questions details { border-top: 1px solid var(--faq-border); padding: 0.8rem 0; }
.questions details:first-child { border-top: 0; padding-top: 0; }
.questions summary { cursor: pointer; padding-right: 1.5rem; font-weight: 750; }
.questions summary::marker { color: var(--faq-accent); }
.questions p { margin: 0.55rem 0 0; color: var(--faq-muted); }
.network-faq { margin-top: 1rem; }
.network-faq h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
.network-faq h3 { margin: 0; font-size: 0.95rem; }
.network-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.network-section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--faq-border); }
.network-section p { margin: 0.45rem 0 0; color: var(--faq-muted); }
.network-source-note, .network-change-note { padding: 0.8rem 1rem; border-left: 3px solid var(--faq-accent); background: var(--faq-input); }
.network-source-note { margin: 1rem 0 0; }
.network-change-note { margin: 1.5rem 0 0; font-size: 0.88rem; }
.network-target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.network-target-grid h4 { margin: 0; color: var(--faq-text); font-size: 0.92rem; }
.endpoint-list { margin: 0.7rem 0 0; padding-left: 1.1rem; }
.endpoint-list li { margin-top: 0.5rem; overflow-wrap: anywhere; }
.endpoint-list code { color: var(--faq-text); font-family: "SF Mono", "Roboto Mono", monospace; font-size: 0.82rem; }
.endpoint-list span { color: var(--faq-muted); font-size: 0.85rem; }
.endpoint-list-inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-left: 1.1rem; }
.endpoint-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.protocol-list { display: grid; gap: 0.7rem; margin: 0.9rem 0 0; }
.protocol-list div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr); gap: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--faq-border); }
.protocol-list dt { color: var(--faq-text); font-weight: 750; }
.protocol-list dd { margin: 0; color: var(--faq-muted); }
.faq-footer { border-top: 1px solid var(--faq-border); padding: 1.5rem 0 2rem; color: var(--faq-muted); font-size: 0.85rem; }
.faq-footer p { margin: 0; }

@media (max-width: 720px) {
  .faq-header-inner { align-items: flex-start; flex-direction: column; }
  .faq-controls { width: 100%; }
  .faq-control { flex: 1; }
  .faq-main { padding-top: 2.5rem; }
  .faq-grid { grid-template-columns: 1fr; margin-top: 2rem; }
  .network-columns, .endpoint-list-grid, .protocol-list div { grid-template-columns: 1fr; }
  .network-target-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .faq-shell { width: min(100% - 1.25rem, 980px); }
  h1 { font-size: 2.4rem; }
  .glossary-row { grid-template-columns: 3.8rem 1fr; gap: 0.5rem; }
}