:root {
  color-scheme: dark;
  --bg: #061018;
  --bg-2: #081722;
  --panel: rgba(10, 27, 39, .78);
  --panel-solid: #0b1c28;
  --panel-soft: rgba(13, 34, 48, .62);
  --line: rgba(140, 201, 222, .13);
  --line-strong: rgba(124, 228, 214, .27);
  --text: #eaf6f7;
  --muted: #8faab2;
  --muted-2: #68838d;
  --accent: #63e6cf;
  --accent-2: #67b7ff;
  --accent-3: #b38cff;
  --warning: #ffca70;
  --danger: #ff7f91;
  --success: #7ee8a2;
  --radius: 22px;
  --radius-sm: 13px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --sidebar: 254px;
  --topnav: 74px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topnav) + 20px); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 128, 148, .11), transparent 32rem),
    radial-gradient(circle at 100% 18%, rgba(88, 82, 183, .09), transparent 35rem),
    linear-gradient(180deg, #061018 0%, #07131b 48%, #051018 100%);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
code { font-family: var(--mono); }
::selection { background: rgba(99, 230, 207, .25); color: #fff; }

.aurora { position: fixed; pointer-events: none; filter: blur(90px); opacity: .18; z-index: -1; border-radius: 50%; }
.aurora-a { width: 340px; height: 340px; background: #1dd6bd; top: 12vh; left: 38vw; }
.aurora-b { width: 420px; height: 420px; background: #3b72ff; top: 52vh; right: -120px; opacity: .1; }

.topnav {
  position: fixed; inset: 0 0 auto 0; height: var(--topnav); z-index: 100;
  display: flex; align-items: center; gap: 24px; padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 15, 23, .78);
  backdrop-filter: blur(18px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 208px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; fill: rgba(99,230,207,.14); stroke: var(--accent); stroke-width: 1.7; }
.brand-mark .brand-line { fill: none; stroke: #dffcf6; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.brand strong, .brand small { display: block; line-height: 1.1; }
.brand strong { letter-spacing: -.02em; font-size: 17px; }
.brand small { color: var(--muted); font-size: 10px; margin-top: 4px; letter-spacing: .08em; text-transform: uppercase; }
.topnav-links { display: flex; gap: 6px; margin: 0 auto; }
.topnav-links a { color: #a8bcc3; font-size: 13px; padding: 9px 11px; border-radius: 9px; }
.topnav-links a:hover { background: rgba(255,255,255,.04); color: #fff; }
.topnav-actions { display: flex; gap: 8px; }

.primary-button, .ghost-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 0 15px;
  border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 12px; transition: .18s ease;
}
.primary-button { background: linear-gradient(135deg, var(--accent), #9df3e5); color: #082018; box-shadow: 0 8px 25px rgba(57,220,193,.16); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(57,220,193,.22); }
.ghost-button { border-color: var(--line-strong); background: rgba(255,255,255,.02); color: #d4e9ec; }
.ghost-button:hover { background: rgba(99,230,207,.07); border-color: rgba(99,230,207,.4); }
.primary-button.large, .ghost-button.large { min-height: 48px; padding: 0 21px; border-radius: 13px; font-size: 13px; }

.sidebar {
  position: fixed; top: var(--topnav); bottom: 0; left: 0; width: var(--sidebar); z-index: 60;
  border-right: 1px solid var(--line); background: rgba(5,16,24,.52); backdrop-filter: blur(14px);
}
.sidebar-inner { height: 100%; overflow-y: auto; padding: 24px 18px 28px; }
.sidebar-eyebrow { margin: 0 8px 12px; color: var(--muted-2); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.side-link { display: block; padding: 9px 10px; border-radius: 9px; color: #8ea7b0; font-size: 12px; font-weight: 650; border: 1px solid transparent; }
.side-link:hover { color: #dceff0; background: rgba(255,255,255,.025); }
.side-link.active { color: var(--accent); background: rgba(99,230,207,.07); border-color: rgba(99,230,207,.12); }
.sidebar-card { margin-top: 22px; padding: 12px; border: 1px solid var(--line); background: var(--panel-soft); border-radius: 13px; display: flex; gap: 10px; align-items: center; }
.sidebar-card .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #78909a; box-shadow: 0 0 0 4px rgba(120,144,154,.09); flex: 0 0 auto; }
.sidebar-card .status-dot.ok { background: var(--success); box-shadow: 0 0 0 4px rgba(126,232,162,.1), 0 0 18px rgba(126,232,162,.35); }
.sidebar-card .status-dot.bad { background: var(--danger); }
.sidebar-card strong, .sidebar-card small { display: block; }
.sidebar-card strong { font-size: 11px; }
.sidebar-card small { margin-top: 2px; font-size: 9px; color: var(--muted-2); }

.content { margin-left: var(--sidebar); padding-top: var(--topnav); }
.hero, .docs-section, .stats-strip, .docs-footer { width: min(1180px, calc(100% - 64px)); margin-left: auto; margin-right: auto; }
.hero { min-height: 680px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; padding: 78px 0 58px; }
.kicker, .eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(99,230,207,.5); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(99,230,207,0); } 100% { box-shadow: 0 0 0 0 rgba(99,230,207,0); } }
.hero h1 { margin: 0; max-width: 720px; font-size: clamp(42px, 5.3vw, 74px); line-height: .99; letter-spacing: -.055em; background: linear-gradient(145deg, #fff 22%, #c6e3e6 68%, #7ca9b4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { max-width: 720px; margin: 26px 0 0; color: #9cb5bd; font-size: 17px; line-height: 1.75; }
.hero-lead strong { color: #dbf0f2; font-weight: 750; }
.hero-actions { display: flex; gap: 10px; margin-top: 31px; flex-wrap: wrap; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 27px; }
.hero-badges span { font-size: 10px; color: #8ba6ae; border: 1px solid var(--line); background: rgba(255,255,255,.018); padding: 6px 9px; border-radius: 999px; }

.hero-visual { position: relative; min-height: 470px; display: flex; flex-direction: column; justify-content: center; }
.hero-visual::before { content: ""; position: absolute; inset: 6% 2%; border-radius: 50%; background: radial-gradient(circle, rgba(57,220,193,.12), transparent 66%); filter: blur(10px); }
.flow-card { position: relative; z-index: 2; display: flex; gap: 14px; align-items: center; width: 85%; padding: 18px 20px; border-radius: 17px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(17,43,56,.92), rgba(8,24,34,.85)); box-shadow: var(--shadow); }
.flow-card.consumer-card { margin-left: 0; }
.flow-card.gateway-card { margin-left: 15%; border-color: rgba(99,230,207,.25); box-shadow: 0 22px 75px rgba(30,182,160,.10); }
.flow-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-weight: 800; color: var(--accent); background: rgba(99,230,207,.07); border: 1px solid rgba(99,230,207,.15); }
.flow-card small, .flow-card strong { display: block; }
.flow-card small { color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.flow-card strong { margin-top: 3px; font-size: 14px; }
.flow-arrow { z-index: 1; height: 72px; margin-left: 43%; display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.flow-arrow i { display: block; width: 1px; height: 64px; background: linear-gradient(var(--accent), rgba(99,230,207,.05)); position: relative; }
.flow-arrow i::after { content:""; position:absolute; bottom:0; left:-3px; width:7px; height:7px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); transform:rotate(45deg); }
.flow-split { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 26px 0 0 15%; width: 85%; }
.mini-node { padding: 13px 14px; border-radius: 13px; background: rgba(8,25,35,.72); border: 1px solid var(--line); }
.mini-node span, .mini-node b { display: block; }
.mini-node span { color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.mini-node b { font-size: 12px; margin-top: 2px; }

.stats-strip { display: grid; grid-template-columns: 1.55fr .7fr .7fr .7fr; margin-top: -22px; border: 1px solid var(--line); background: rgba(9,27,38,.72); border-radius: 18px; overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,.18); }
.stats-strip article { padding: 17px 20px; border-right: 1px solid var(--line); min-width: 0; }
.stats-strip article:last-child { border-right: 0; }
.stats-strip span, .stats-strip strong { display: block; }
.stats-strip span { color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.stats-strip strong { margin-top: 5px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.docs-section { padding: 105px 0 10px; }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 19px; }
.section-heading h2 { margin: 5px 0 0; font-size: clamp(29px, 4vw, 44px); letter-spacing: -.04em; line-height: 1.08; }
.section-number { color: rgba(112,160,174,.18); font-family: var(--mono); font-size: 40px; font-weight: 900; line-height: 1; }
.section-intro { max-width: 840px; margin: 0 0 29px; color: #91aab2; font-size: 15px; line-height: 1.75; }
.section-intro code, p code, li code { color: #b8f4e9; background: rgba(99,230,207,.055); border: 1px solid rgba(99,230,207,.09); padding: 1px 5px; border-radius: 5px; font-size: .9em; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.code-card, .response-card { position: relative; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: rgba(7,20,29,.75); box-shadow: 0 18px 45px rgba(0,0,0,.13); }
.code-card-head, .generated-head, .raw-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height: 46px; padding: 0 15px; border-bottom:1px solid var(--line); color:#91aab2; font-size:11px; }
.copy-button { border:1px solid var(--line); background:rgba(255,255,255,.025); color:#a9c0c6; padding:5px 9px; border-radius:7px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; }
.copy-button:hover { color:var(--accent); border-color:rgba(99,230,207,.3); }
pre { margin:0; overflow:auto; }
pre code { display:block; min-width:max-content; padding:18px 19px; color:#b8ccd1; font-family:var(--mono); font-size:11.5px; line-height:1.72; tab-size:2; }
.response-card { padding-top: 44px; background: linear-gradient(145deg, rgba(12,35,45,.85), rgba(8,18,30,.88)); }
.response-card pre code { color:#cce4e8; }
.response-label { position:absolute; top:15px; left:18px; color:var(--success); font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.response-glow { position:absolute; width:170px; height:170px; border-radius:50%; right:-50px; top:-90px; background:rgba(99,230,207,.11); filter:blur(35px); }

.callout { display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:start; margin-top:18px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.callout > span { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.09em; }
.callout p { margin:0; color:#9ab1b8; font-size:12px; line-height:1.65; }
.callout.success { border-color:rgba(126,232,162,.18); background:rgba(126,232,162,.035); }
.callout.success > span { color:var(--success); }
.callout.info { border-color:rgba(103,183,255,.18); background:rgba(103,183,255,.035); }
.callout.info > span { color:var(--accent-2); }
.callout.warning { border-color:rgba(255,202,112,.2); background:rgba(255,202,112,.035); }
.callout.warning > span { color:var(--warning); }
.callout.mini { grid-template-columns:80px 1fr; margin-top:12px; padding:10px 11px; }

.feature-grid { display:grid; gap:13px; }
.feature-grid.three { grid-template-columns:repeat(3,1fr); }
.feature-card { padding:20px; border:1px solid var(--line); border-radius:17px; background:var(--panel-soft); }
.feature-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(99,230,207,.07); color:var(--accent); border:1px solid rgba(99,230,207,.15); font-family:var(--mono); font-weight:900; }
.feature-card h3 { margin:15px 0 7px; font-size:14px; }
.feature-card p { margin:0; color:#8ea6ae; font-size:12px; line-height:1.65; }
.auth-strip { margin-top:15px; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:16px; border:1px dashed rgba(99,230,207,.19); border-radius:15px; color:#6f8b93; }
.auth-strip code { color:#b8f5e9; font-size:11px; }
.auth-strip span { color:#4d6b74; }

.endpoint-list { display:grid; gap:10px; }
.endpoint-card { border:1px solid var(--line); border-radius:15px; background:rgba(9,26,37,.63); overflow:hidden; }
.endpoint-summary { width:100%; min-height:61px; padding:11px 14px; display:grid; grid-template-columns:58px minmax(190px,auto) auto 1fr 22px; gap:10px; align-items:center; border:0; background:transparent; cursor:pointer; text-align:left; }
.endpoint-summary code { font-size:12px; color:#dcecee; word-break:break-all; }
.endpoint-purpose { color:#77939c; font-size:11px; justify-self:end; }
.chevron { color:#56757f; justify-self:end; transition:transform .18s ease; }
.endpoint-card.open .chevron { transform:rotate(180deg); }
.endpoint-body { display:none; border-top:1px solid var(--line); padding:17px 18px 19px; }
.endpoint-card.open .endpoint-body { display:block; }
.endpoint-body > p { margin:0 0 14px; color:#8fa8b0; font-size:12px; line-height:1.7; }
.method { display:inline-flex; align-items:center; justify-content:center; width:52px; height:27px; border-radius:7px; font-family:var(--mono); font-size:9px; font-weight:900; letter-spacing:.06em; }
.method.get { color:#72e2ff; background:rgba(88,188,255,.08); border:1px solid rgba(88,188,255,.17); }
.method.post { color:#b99cff; background:rgba(179,140,255,.08); border:1px solid rgba(179,140,255,.18); }
.tag { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; font-size:8px; text-transform:uppercase; letter-spacing:.07em; font-weight:900; white-space:nowrap; }
.tag.auth { color:#f6cc7e; background:rgba(255,202,112,.07); border:1px solid rgba(255,202,112,.15); }
.tag.public { color:#7ee8a2; background:rgba(126,232,162,.07); border:1px solid rgba(126,232,162,.15); }
.tag.stable { color:#7ee8a2; background:rgba(126,232,162,.07); border:1px solid rgba(126,232,162,.15); }
.tag.provisional { color:#ffca70; background:rgba(255,202,112,.07); border:1px solid rgba(255,202,112,.15); }
.schema-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:13px; }
.schema-grid div { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.016); }
.schema-grid strong, .schema-grid span { display:block; }
.schema-grid strong { color:#687f88; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.schema-grid span { margin-top:4px; font-size:11px; }
.param-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.param-row { display:grid; grid-template-columns:130px 140px 90px 1fr; gap:10px; min-height:42px; padding:9px 12px; align-items:center; border-bottom:1px solid var(--line); font-size:10.5px; color:#8fa8b0; }
.param-row:last-child { border-bottom:0; }
.param-row.head { color:#617e88; font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; background:rgba(255,255,255,.018); }
.param-row code { color:#c6eee8; }
.param-row b { color:#dce9eb; font-size:9px; }
.schema-card { margin-top:16px; padding:19px; border:1px solid var(--line); background:var(--panel-soft); border-radius:18px; }
.schema-card-head { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.schema-card h3 { margin:3px 0 0; font-size:24px; letter-spacing:-.03em; }
.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:16px; }
.field-grid > div { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:10px 11px; border-radius:9px; background:rgba(255,255,255,.016); border:1px solid rgba(140,201,222,.07); }
.field-grid code { color:#b7efe4; font-size:10px; }
.field-grid span { color:#829ca5; font-size:10px; }

.tile-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.choice-card { padding:21px; border:1px solid var(--line); background:var(--panel-soft); border-radius:20px; overflow:hidden; position:relative; }
.choice-card h3 { margin:13px 0 8px; font-size:21px; letter-spacing:-.03em; }
.choice-card p { margin:0 0 14px; color:#8da5ad; font-size:12px; line-height:1.65; }
.choice-card ul { margin:15px 0 0; padding-left:18px; color:#819aa2; font-size:11px; line-height:1.8; }
.path-block { display:block; margin-top:7px; padding:9px 10px; background:#07131b; border:1px solid var(--line); border-radius:9px; color:#b7eee5; font-size:9.5px; overflow:auto; }
.choice-visual { height:130px; position:relative; border-radius:15px; overflow:hidden; margin-bottom:16px; background:linear-gradient(145deg,#0e2834,#071821); border:1px solid rgba(127,216,220,.08); }
.choice-visual::before, .choice-visual::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(99,230,207,.12); }
.choice-visual::before { width:140px; height:140px; left:-30px; top:18px; }
.choice-visual::after { width:180px; height:180px; right:-70px; top:-80px; }
.choice-visual i { position:absolute; right:13px; bottom:10px; font:900 38px/1 var(--mono); color:rgba(99,230,207,.2); font-style:normal; }
.road { position:absolute; height:4px; background:linear-gradient(90deg,transparent,#5fd5c4,transparent); border-radius:999px; opacity:.6; transform-origin:left center; }
.road.r1 { width:200px; left:22px; top:72px; transform:rotate(-18deg); }
.road.r2 { width:160px; left:80px; top:25px; transform:rotate(59deg); }
.road.r3 { width:190px; left:25px; top:104px; transform:rotate(8deg); }
.raster-art { background:linear-gradient(145deg,#14262a,#0b191d); }
.raster-art span { position:absolute; inset:18px; border-radius:13px; background:linear-gradient(140deg,rgba(204,219,195,.14),rgba(146,174,173,.04)), repeating-linear-gradient(25deg,transparent 0 26px,rgba(255,255,255,.045) 27px 29px); }

.compat-flow { display:grid; grid-template-columns:1fr 48px 1fr 1.7fr; align-items:center; gap:10px; margin:18px 0 22px; }
.compat-old, .compat-new { padding:15px; border-radius:13px; border:1px solid var(--line); background:var(--panel-soft); }
.compat-old span, .compat-new span { display:block; color:#657f88; font-size:8px; text-transform:uppercase; letter-spacing:.09em; }
.compat-old strong, .compat-new strong { display:block; margin-top:4px; font-size:14px; }
.compat-new { border-color:rgba(99,230,207,.2); }
.compat-new strong { color:var(--accent); }
.compat-arrow { color:#45636c; text-align:center; }
.compat-note { color:#7f989f; font-size:10px; line-height:1.6; padding-left:10px; }

.live-section { padding-top:120px; }
.lab-shell { border:1px solid rgba(99,230,207,.15); border-radius:24px; background:linear-gradient(150deg,rgba(10,31,42,.92),rgba(7,20,30,.92)); box-shadow:0 28px 80px rgba(0,0,0,.25); overflow:hidden; }
.lab-keybar { min-height:96px; padding:15px 18px; display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:center; border-bottom:1px solid var(--line); background:rgba(255,255,255,.012); }
.lab-keybar label { display:block; margin-bottom:6px; color:#9ab3ba; font-size:10px; font-weight:800; }
.lab-keybar small { display:block; margin-top:5px; color:#58727b; font-size:8.5px; }
.key-input-wrap { max-width:580px; display:flex; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; background:#06131b; }
.key-input-wrap input { min-width:0; flex:1; height:38px; border:0; outline:0; background:transparent; color:#e8f7f6; padding:0 12px; font:11px var(--mono); }
.key-input-wrap button { width:58px; border:0; border-left:1px solid var(--line); background:rgba(255,255,255,.025); color:#78959d; cursor:pointer; font-size:9px; }
.lab-health { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.018); }
.health-orb { width:10px; height:10px; border-radius:50%; background:#6c838b; flex:0 0 auto; }
.health-orb.ok { background:var(--success); box-shadow:0 0 18px rgba(126,232,162,.55); }
.health-orb.bad { background:var(--danger); box-shadow:0 0 18px rgba(255,127,145,.35); }
.lab-health small, .lab-health strong { display:block; }
.lab-health small { color:#607b84; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.lab-health strong { margin-top:1px; font-size:10px; }
.lab-health button { margin-left:auto; border:1px solid var(--line); background:transparent; color:#7f9aa2; border-radius:7px; padding:5px 8px; font-size:8px; cursor:pointer; }
.lab-tabs { display:flex; gap:2px; overflow:auto; padding:10px 12px 0; border-bottom:1px solid var(--line); }
.lab-tab { min-width:max-content; border:0; border-bottom:2px solid transparent; background:transparent; color:#718b94; padding:9px 11px 11px; font-size:9px; font-weight:800; cursor:pointer; }
.lab-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.lab-workspace { display:grid; grid-template-columns:390px 1fr; min-height:650px; }
.lab-controls { padding:17px; border-right:1px solid var(--line); }
.lab-panel { display:none; }
.lab-panel.active { display:block; }
.form-row { display:grid; gap:9px; margin-bottom:10px; }
.form-row.full { grid-template-columns:1fr; }
.form-row.double { grid-template-columns:1fr 1fr; }
.form-row.triple { grid-template-columns:1fr 1fr 1fr; }
.form-row label { color:#6e8992; font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.form-row input, .form-row select { display:block; width:100%; height:38px; margin-top:5px; border:1px solid var(--line); border-radius:9px; background:#071720; color:#d8e8ea; outline:0; padding:0 10px; font-size:10.5px; text-transform:none; letter-spacing:normal; }
.form-row input:focus, .form-row select:focus { border-color:rgba(99,230,207,.4); box-shadow:0 0 0 3px rgba(99,230,207,.055); }
.lab-help { margin:0 0 13px; color:#6f8b93; font-size:10px; line-height:1.6; }
.run-button { width:100%; height:42px; margin-top:4px; border:1px solid rgba(99,230,207,.26); background:linear-gradient(135deg,rgba(99,230,207,.16),rgba(103,183,255,.08)); color:#bdf7ec; border-radius:10px; cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.02em; }
.run-button:hover { background:linear-gradient(135deg,rgba(99,230,207,.22),rgba(103,183,255,.11)); }
.run-button:disabled { opacity:.5; cursor:wait; }
.run-button span { color:#62848b; margin-left:8px; font:8px var(--mono); }
.generated-request { margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#06131b; }
.generated-request pre code { max-height:210px; padding:12px 13px; font-size:9.3px; color:#91aab2; white-space:pre-wrap; word-break:break-all; min-width:0; }
.lab-output { min-width:0; padding:17px; display:grid; grid-template-rows:auto auto 1fr; gap:12px; background:rgba(4,14,21,.25); }
.lab-map-card, .raw-response { border:1px solid var(--line); border-radius:15px; overflow:hidden; background:#07151e; }
.lab-map-head { min-height:47px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.lab-map-head small, .lab-map-head strong { display:block; }
.lab-map-head small { color:#58727b; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.lab-map-head strong { margin-top:2px; max-width:430px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.mini-map-controls { display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.mini-map-controls button { width:29px; height:29px; border:0; background:rgba(255,255,255,.02); color:#91abb2; cursor:pointer; }
.mini-map-controls span { width:42px; text-align:center; color:#657f88; font:8px var(--mono); }
.mini-map { position:relative; height:280px; overflow:hidden; background:#0e1c20; }
.mini-map img { position:absolute; width:256px; height:256px; user-select:none; pointer-events:none; }
.mini-map::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 45px rgba(4,14,20,.23); pointer-events:none; }
.map-marker { position:absolute; z-index:5; left:50%; top:50%; width:18px; height:18px; border-radius:50% 50% 50% 0; transform:translate(-50%,-100%) rotate(-45deg); background:#ff5f87; border:2px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.35); }
.map-marker::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:white; left:4.5px; top:4.5px; }
.map-coord-label { position:absolute; z-index:5; left:10px; bottom:9px; padding:5px 7px; border-radius:7px; background:rgba(5,15,21,.78); color:#bbd1d5; font:8px var(--mono); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px); }
.map-loading { position:absolute; inset:0; display:grid; place-items:center; color:#506b73; font-size:10px; }
.result-cards { display:grid; gap:7px; max-height:220px; overflow:auto; }
.empty-state { min-height:104px; display:grid; place-items:center; align-content:center; text-align:center; border:1px dashed var(--line); border-radius:13px; color:#5f7a83; }
.empty-state span { font-size:22px; }
.empty-state strong { color:#7e9aa2; font-size:10px; margin-top:2px; }
.empty-state p { margin:3px 0 0; font-size:8.5px; }
.result-card { width:100%; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.018); padding:10px 11px; text-align:left; cursor:pointer; }
.result-card:hover { border-color:rgba(99,230,207,.2); background:rgba(99,230,207,.035); }
.result-card strong { display:block; font-size:10px; color:#d8eaeb; }
.result-card span { display:block; margin-top:2px; font-size:8.5px; color:#6f8991; line-height:1.45; }
.result-card small { display:block; margin-top:5px; font:8px var(--mono); color:#4f7178; }
.raw-response { min-height:200px; }
.raw-head > div { display:flex; align-items:center; gap:8px; }
.raw-head #responseMeta { color:#5d7a82; font:8px var(--mono); }
.raw-response pre code { max-height:290px; white-space:pre-wrap; word-break:break-word; min-width:0; font-size:9.5px; }
.raster-preview { display:grid; grid-template-columns:180px 1fr; gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.015); }
.raster-preview img { width:180px; height:180px; object-fit:cover; border-radius:10px; background:#0d1b20; image-rendering:auto; }
.raster-preview strong, .raster-preview span { display:block; }
.raster-preview strong { font-size:11px; }
.raster-preview span { color:#6e8a92; font-size:9px; margin-top:4px; }

.recipe-tabs { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px; }
.recipe-tab { border:1px solid var(--line); background:rgba(255,255,255,.018); color:#77929a; min-height:35px; padding:0 12px; border-radius:9px; font-size:9px; font-weight:850; cursor:pointer; }
.recipe-tab.active { color:var(--accent); border-color:rgba(99,230,207,.24); background:rgba(99,230,207,.055); }
.recipe-panel { display:none; grid-template-columns:.8fr 1.2fr; gap:16px; align-items:stretch; }
.recipe-panel.active { display:grid; }
.recipe-copy { padding:21px; border:1px solid var(--line); border-radius:18px; background:var(--panel-soft); }
.recipe-copy h3 { margin:0 0 8px; font-size:20px; letter-spacing:-.03em; }
.recipe-copy p, .recipe-copy li { color:#829ca4; font-size:11px; line-height:1.7; }
.recipe-copy ul { padding-left:18px; margin:13px 0 0; }

.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.status-grid article { min-height:132px; padding:16px; border:1px solid var(--line); border-radius:15px; background:var(--panel-soft); }
.status-grid strong { display:block; font:800 24px/1 var(--mono); color:#bdd5d9; }
.status-grid span { display:block; margin-top:10px; color:#819aa2; font-size:10px; line-height:1.55; }
.status-grid code { display:block; margin-top:10px; color:#82dcca; font-size:8.5px; }
.resilience-row { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:13px; }
.resilience-row > div { padding:15px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.013); }
.resilience-row > div > span { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:rgba(103,183,255,.06); color:var(--accent-2); font:800 9px var(--mono); }
.resilience-row h3 { margin:12px 0 5px; font-size:12px; }
.resilience-row p { margin:0; color:#789198; font-size:9.5px; line-height:1.6; }

.notes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.notes-grid article { padding:17px; border:1px solid var(--line); border-radius:15px; background:var(--panel-soft); }
.notes-grid h3 { margin:0 0 7px; font-size:12px; }
.notes-grid p { margin:0; color:#7f989f; font-size:10px; line-height:1.65; }

.checklist-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.checklist-grid label { display:flex; gap:11px; align-items:flex-start; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.015); cursor:pointer; }
.checklist-grid input { appearance:none; width:18px; height:18px; border:1px solid #49646d; border-radius:6px; margin:1px 0 0; flex:0 0 auto; display:grid; place-items:center; }
.checklist-grid input:checked { background:var(--accent); border-color:var(--accent); }
.checklist-grid input:checked::after { content:"✓"; color:#052018; font-size:12px; font-weight:900; }
.checklist-grid b, .checklist-grid small { display:block; }
.checklist-grid b { font-size:10.5px; }
.checklist-grid small { color:#708991; font-size:8.8px; margin-top:3px; line-height:1.5; }

.docs-footer { margin-top:115px; margin-bottom:35px; padding:22px 0 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.docs-footer > div { display:flex; gap:9px; align-items:center; }
.brand-mark.small { width:31px; height:31px; }
.docs-footer strong, .docs-footer small { display:block; }
.docs-footer strong { font-size:11px; }
.docs-footer small { color:#5d7981; font-size:8px; }
.docs-footer nav { display:flex; gap:17px; }
.docs-footer nav a { color:#6a858d; font-size:9px; }
.docs-footer nav a:hover { color:var(--accent); }

.docs-toast { position:fixed; right:22px; bottom:22px; z-index:200; min-width:180px; max-width:360px; padding:11px 13px; border:1px solid rgba(99,230,207,.25); border-radius:11px; background:rgba(7,22,31,.94); color:#c9e5e7; box-shadow:0 20px 55px rgba(0,0,0,.4); backdrop-filter:blur(12px); font-size:10px; }
.docs-toast.error { border-color:rgba(255,127,145,.27); color:#ffd2d8; }

@media (max-width: 1180px) {
  .topnav-links { display:none; }
  .topnav-actions { margin-left:auto; }
  .hero { gap:36px; }
  .lab-workspace { grid-template-columns:350px 1fr; }
}
@media (max-width: 980px) {
  :root { --sidebar: 0px; }
  .sidebar { display:none; }
  .content { margin-left:0; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:60px; }
  .hero-visual { min-height:420px; max-width:650px; width:100%; }
  .stats-strip { grid-template-columns:1fr 1fr; }
  .stats-strip article:nth-child(2) { border-right:0; }
  .stats-strip article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .lab-workspace { grid-template-columns:1fr; }
  .lab-controls { border-right:0; border-bottom:1px solid var(--line); }
  .lab-keybar { grid-template-columns:1fr; }
  .lab-health { max-width:360px; }
  .recipe-panel.active { grid-template-columns:1fr; }
  .notes-grid, .status-grid { grid-template-columns:1fr 1fr; }
  .resilience-row { grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --topnav: 64px; }
  .topnav { padding:0 14px; gap:10px; }
  .brand { min-width:0; }
  .brand small { display:none; }
  .brand-mark { width:34px; height:34px; }
  .topnav-actions .ghost-button { display:none; }
  .topnav-actions .primary-button { min-height:35px; padding:0 11px; }
  .hero, .docs-section, .stats-strip, .docs-footer { width:min(100% - 28px,1180px); }
  .hero { padding-top:48px; gap:22px; }
  .hero h1 { font-size:42px; }
  .hero-lead { font-size:14px; }
  .hero-visual { min-height:390px; }
  .flow-card { width:92%; }
  .flow-card.gateway-card, .flow-split { margin-left:8%; width:92%; }
  .flow-arrow { margin-left:45%; }
  .stats-strip { grid-template-columns:1fr; margin-top:0; }
  .stats-strip article { border-right:0; border-bottom:1px solid var(--line); }
  .stats-strip article:last-child { border-bottom:0; }
  .two-col, .feature-grid.three, .tile-choice-grid, .checklist-grid, .notes-grid, .status-grid, .resilience-row { grid-template-columns:1fr; }
  .section-number { font-size:28px; }
  .endpoint-summary { grid-template-columns:52px minmax(0,1fr) auto 20px; }
  .endpoint-summary .endpoint-purpose { display:none; }
  .param-row { grid-template-columns:90px 100px 60px 1fr; overflow:auto; min-width:560px; }
  .param-table { overflow:auto; }
  .field-grid { grid-template-columns:1fr; }
  .field-grid > div { grid-template-columns:120px 1fr; }
  .compat-flow { grid-template-columns:1fr 30px 1fr; }
  .compat-note { grid-column:1 / -1; padding:7px 0 0; }
  .lab-keybar { padding:13px; }
  .lab-workspace, .lab-controls, .lab-output { min-width:0; }
  .form-row.double, .form-row.triple { grid-template-columns:1fr; }
  .lab-map-head strong { max-width:220px; }
  .mini-map { height:230px; }
  .raster-preview { grid-template-columns:120px 1fr; }
  .raster-preview img { width:120px; height:120px; }
  .docs-footer { flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; }
}