:root {
  color-scheme: dark;
  --page-bg: #07111f;
  --page-surface: #0c192b;
  --page-card: #112238;
  --page-border: #223b56;
  --page-text: #e2e8f0;
  --page-muted: #a4b0c2;
  --page-accent: #22d3ee;
  --page-blue: #4f7cff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--page-bg);
  color: var(--page-text);
  font: 16px/1.7 Inter, "Aptos", "Segoe UI Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 0%, rgb(34 211 238 / 9%), transparent 34rem),
    radial-gradient(ellipse at 100% 35%, rgb(79 124 255 / 10%), transparent 32rem),
    url("/assets/ambient-network.svg") center 10vh / min(1120px, 110vw) auto no-repeat;
}
a { color: var(--page-accent); }
a:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 4px; }
.site-header {
  border-bottom: 1px solid var(--page-border);
  background: var(--page-surface);
}
.site-nav, main, .site-footer {
  width: min(100% - 2rem, 960px);
  margin-inline: auto;
}
.site-nav {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--page-text); font-size: 1rem; font-weight: 800; letter-spacing: .1em; line-height: 1.05; text-decoration: none; }
.brand-logo { width: 2.5rem; height: 2.5rem; object-fit: contain; flex: none; }
.brand-lockup { display: grid; gap: .24rem; }
.brand-lockup small { color: var(--page-muted); font-size: .58rem; font-weight: 700; letter-spacing: .22em; }
.nav-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.nav-links a { font-size: .9rem; }
.nav-actions { display: flex; align-items: center; gap: .55rem; }
.nav-actions a { display: inline-flex; min-height: 2.4rem; align-items: center; justify-content: center; padding: .45rem .8rem; border: 1px solid var(--page-border); border-radius: .5rem; color: var(--page-text); font-size: .88rem; font-weight: 650; text-decoration: none; }
.nav-actions a:hover { border-color: var(--page-accent); }
.nav-actions .nav-signup { border-color: rgb(34 211 238 / 45%); background: rgb(34 211 238 / 11%); color: #b8f4fb; }
.nav-actions .nav-signup:hover { background: rgb(34 211 238 / 18%); }
.nav-links a, .nav-actions a, .resource-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
main { padding-block: 3.5rem 5rem; }
.eyebrow { color: var(--page-accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 800px; margin: .4rem 0 1rem; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
h2 { margin-top: 2.5rem; font-size: 1.45rem; letter-spacing: -.025em; text-wrap: balance; }
h3 { font-size: 1.05rem; }
p, li { color: var(--page-muted); }
.lead { max-width: 760px; font-size: 1.15rem; }
.panel, .flow-step {
  margin-block: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--page-border);
  border-radius: .65rem;
  background: var(--page-card);
}
.panel, .flow-step {
  background: linear-gradient(145deg, rgb(21 31 46 / 96%), rgb(15 23 36 / 96%));
  box-shadow: 0 16px 40px rgb(0 0 0 / 12%);
}
.panel, .flow-step, .resource-card, .tool-panel {
  position: relative;
  overflow: hidden;
}
.panel::before, .flow-step::before, .resource-card::before, .tool-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 7rem;
  height: 1px;
  background: linear-gradient(90deg, rgb(34 211 238 / 70%), transparent);
  pointer-events: none;
}
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 2rem; }
.flow-step { margin: 0; }
.flow-step strong { display: block; color: var(--page-text); }
pre {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--page-border);
  border-radius: .5rem;
  background: #070b12;
  color: #d7e3f4;
  font: .88rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.note { border-left: 3px solid var(--page-accent); padding-left: 1rem; }
.flow-illustration {
  display: block;
  width: min(100%, 880px);
  margin: 2rem auto;
  filter: drop-shadow(0 22px 38px rgb(0 0 0 / 20%));
}
.primary-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  border: 1px solid rgb(34 211 238 / 38%);
  border-radius: .5rem;
  background: rgb(34 211 238 / 10%);
  text-decoration: none;
  font-weight: 700;
}
.primary-link:hover { background: rgb(34 211 238 / 17%); }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1.5rem; }
.resource-card { margin: 0; padding: 1.2rem; border: 1px solid var(--page-border); border-radius: .65rem; background: linear-gradient(145deg, rgb(21 31 46 / 96%), rgb(15 23 36 / 96%)); }
.resource-card h2, .resource-card h3 { margin: 0 0 .6rem; }
.resource-card p:last-child { margin-bottom: 0; }
.tool-panel { margin-block: 1rem; padding: 1.25rem; border: 1px solid var(--page-border); border-radius: .7rem; background: linear-gradient(145deg, rgb(21 31 46 / 96%), rgb(15 23 36 / 96%)); }
.tool-panel h2 { margin-top: 0; }
.tool-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.tool-form label { display: grid; gap: .35rem; color: var(--page-muted); }
.tool-form input, .tool-form select { width: 100%; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-block: .8rem; }
.tool-actions button, .copy-button { min-height: 2.75rem; border: 1px solid var(--page-border); border-radius: .45rem; padding: .5rem .8rem; background: var(--page-card); color: var(--page-text); cursor: pointer; }
.tool-form input, .tool-form select { min-height: 2.75rem; }
.tool-actions button:hover, .copy-button:hover { border-color: var(--page-accent); }
.copy-row { display: flex; justify-content: flex-end; margin-top: .5rem; }
.tool-output { min-height: 3rem; }
.decision-allow { border-color: rgb(34 211 238 / 65%); }
.decision-deny { border-color: rgb(255 123 133 / 65%); }
.resource-nav { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: 1.4rem; }
.resource-nav a { padding: .4rem .7rem; border: 1px solid var(--page-border); border-radius: 999px; text-decoration: none; }
.resource-nav a:hover { border-color: var(--page-accent); }
.api-table { width: 100%; border-collapse: collapse; margin-block: 1rem 2rem; }
.api-table th, .api-table td { padding: .7rem; border-bottom: 1px solid var(--page-border); text-align: left; vertical-align: top; }
.api-table th { color: var(--page-text); }
.api-table code { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .resource-grid, .tool-form { grid-template-columns: 1fr; }
  .api-table { display: block; overflow-x: auto; white-space: nowrap; }
}
.site-footer { padding-block: 1.5rem; border-top: 1px solid var(--page-border); font-size: .9rem; }
@media (max-width: 640px) {
  .site-nav { align-items: center; flex-direction: row; flex-wrap: wrap; padding-block: .75rem; gap: .45rem .8rem; }
  .brand { margin-right: auto; }
  .nav-links { order: 3; flex: 0 0 100%; flex-wrap: nowrap; gap: .45rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; padding-block: .1rem .3rem; }
  .nav-links a { flex: 0 0 auto; padding-inline: .45rem; }
  .flow { grid-template-columns: 1fr; }
  .nav-actions { width: auto; }
  main { padding-block: 2rem 3rem; }
  .lead { font-size: 1.05rem; }
  .panel, .flow-step, .tool-panel, .resource-card { padding: 1rem; }
  pre { max-width: 100%; padding: .8rem; font-size: .8rem; }
  .resource-nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: .35rem; scrollbar-width: thin; }
  .resource-nav a { flex: 0 0 auto; }
  .site-footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  body::before { background-position: 8% 0, 100% 35%, 62% 5rem; background-size: auto, auto, 150vw auto; }
}
@media (max-width: 420px) {
  .site-nav { gap: .45rem; }
  .nav-actions { order: 2; flex: 0 0 100%; }
  .nav-actions a { flex: 1 1 0; }
  .site-nav .brand { margin-right: 0; }
  .api-table { font-size: .86rem; }
  .api-table th, .api-table td { padding: .6rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (hover: none) {
  .resource-card:hover, .tool-actions button:hover, .copy-button:hover { transform: none; box-shadow: none; }
}
@media (forced-colors: active) {
  a, button, input, select, .panel, .flow-step, .resource-card, .tool-panel { border-color: CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}