:root {
  --ink: #172036;
  --muted: #66758b;
  --line: #e1e7ef;
  --blue: #4f67ed;
  --sidebar: #f5f8fc;
}

body { background:#fff; }
.ambient { display:none; }

.topbar {
  height:72px;
  grid-template-columns:236px 1fr auto;
  padding:0 24px;
  border-bottom:1px solid #e2e7ef;
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(20,34,60,.02);
}
.brand-mark { width:34px;height:34px;border-radius:9px;box-shadow:none;border:1px solid #e3e8f0; }
.brand-mark img { width:26px;height:26px; }
.brand-copy strong { font-size:16px; }
.brand-copy small { color:#94a0b0;font-size:11px; }
.topnav { gap:8px; }
.topnav a { padding:9px 13px;border-radius:9px;color:#536075;font-size:13px; }
.topnav a:hover { background:#f4f6fa; }
.topnav a.active { color:#4055d0;background:#eef1ff; }
.topnav a.active::after { display:none; }
.top-actions { gap:10px; }
.search-trigger { min-width:190px;padding:8px 10px 8px 13px;gap:24px;background:#fafbfd;border-color:#dde4ed; }
.primary-button.small { min-height:38px;box-shadow:none; }

.docs-shell { grid-template-columns:236px minmax(0,1fr) 216px;min-height:calc(100vh - 72px); }
.sidebar { top:72px;height:calc(100vh - 72px);padding:24px 16px 20px;background:var(--sidebar);border-right:1px solid #e1e7ef;scrollbar-width:thin; }
.nav-group { margin-bottom:20px; }
.nav-group-title { margin:0 10px 7px;color:#9aa5b5;font-size:10px;letter-spacing:.1em; }
.nav-link { min-height:34px;padding:0 10px;margin:1px 0;border-radius:8px;color:#56647a;font-size:12px; }
.nav-link:hover { background:#edf1f7; }
.nav-link.active { color:#344bd0;background:#e8edff;box-shadow:inset 2px 0 0 var(--blue); }
.nav-icon { width:17px;height:17px;border-radius:5px;background:transparent;color:#9ba7b8;font-size:9px; }
.nav-link.active .nav-icon { color:#4058d5;background:transparent; }
.sidebar-help { padding:13px;background:transparent;border-color:#dce4ee;border-radius:10px; }
.status-dot { width:7px;height:7px;box-shadow:0 0 0 3px rgba(34,197,94,.1); }

.content { width:min(100%,900px);padding:58px 62px 110px; }
.doc-eyebrow { margin-bottom:11px;color:#5267dd;font-size:11px; }
.doc-title { max-width:740px;font-size:clamp(38px,4vw,48px);line-height:1.13;letter-spacing:-.038em; }
.doc-lead { max-width:760px;margin-top:16px;color:#5e6e84;font-size:16px;line-height:1.8; }
.hero-actions { margin-top:24px; }
.primary-button.large,.secondary-button { min-height:43px;padding:0 17px;border-radius:9px;font-size:13px; }
.primary-button.large { box-shadow:0 8px 22px rgba(79,103,237,.2); }
.trust-row { gap:18px;margin-top:19px;font-size:11px; }

.product-stage { display:none; }
.real-interface { margin:32px 0 52px; }
.screenshot-label { margin-bottom:9px;font-size:10px; }
.screenshot-open { border-radius:13px;box-shadow:0 16px 42px rgba(44,62,96,.1); }
.screenshot-open:hover { transform:translateY(-2px);box-shadow:0 20px 48px rgba(44,62,96,.14); }
.screenshot-caption { padding:10px 13px;font-size:10px; }

.section { padding-top:28px;margin-top:38px;scroll-margin-top:92px; }
.section + .section { border-top:1px solid #e8edf3; }
.section-kicker { font-size:10px; }
.section h2 { margin:8px 0 12px;font-size:24px;letter-spacing:-.02em; }
.section > p { color:#617086;font-size:14px;line-height:1.8; }
.card-grid { gap:11px;margin-top:20px; }
.feature-card { min-height:145px;padding:19px;border-color:#e1e7ef;border-radius:12px;background:#fff; }
.feature-card:hover { transform:translateY(-2px);border-color:#cbd4f8;box-shadow:0 12px 32px rgba(42,59,95,.08); }
.feature-card .number { width:28px;height:28px;border-radius:8px;font-size:9px; }
.feature-card h3 { margin:16px 0 6px;font-size:15px; }
.feature-card p { font-size:12px;line-height:1.6; }
.feature-card .arrow { right:16px;top:16px; }
.steps { margin-top:20px; }
.step { grid-template-columns:40px 1fr;gap:14px;padding-bottom:21px; }
.step-number { width:32px;height:32px;border-radius:9px;box-shadow:none;font-size:10px; }
.step:not(:last-child)::after { top:32px;left:15px; }
.step h3 { margin:2px 0 5px;font-size:14px; }
.step p { font-size:12px; }
.prompt-box { margin-top:19px;padding:17px 52px 17px 18px;border-radius:11px;background:#f5f7ff; }
.prompt-box p { font-size:13px; }
.copy-prompt { top:13px;right:13px; }
.note { padding:14px 16px;border-radius:3px 10px 10px 3px;font-size:12px; }
.doc-footer { padding-top:40px;margin-top:56px; }
.doc-footer a { min-width:175px;padding:13px 15px;border-radius:10px;background:#fff; }
.doc-footer a:hover { border-color:#c9d3f8;background:#f9faff; }

.toc { top:72px;height:calc(100vh - 72px);padding:34px 18px 20px 0;background:#fafbfd; }
.toc-card { padding:12px 0 12px 17px; }
.toc-title { font-size:10px; }
.toc-card a { position:relative;padding:6px 0;color:#7a879a;font-size:11px; }
.toc-card a.active,.toc-card a:hover { color:#3f55d0;font-weight:700; }
.tip-card { margin:28px 8px 0 14px;padding:15px;border-radius:11px;box-shadow:none; }

.search-dialog { padding-top:10vh; }
.search-panel { border-radius:14px;box-shadow:0 24px 70px rgba(26,42,70,.2); }
.search-result { border-radius:8px; }
.image-panel { border-radius:13px; }

@media(max-width:1120px){
  .docs-shell { grid-template-columns:226px minmax(0,1fr); }
  .topbar { grid-template-columns:226px 1fr auto; }
  .toc { display:none; }
  .content { width:min(100%,920px); }
}
@media(max-width:900px){
  .search-trigger { display:none; }
}
@media(max-width:820px){
  .topbar { height:62px;grid-template-columns:1fr auto;padding:0 15px; }
  .topnav,.top-actions .primary-button { display:none; }
  .docs-shell { display:block; }
  .sidebar { top:62px;height:auto;padding-bottom:28px; }
  .content { padding:40px 23px 80px; }
  .doc-title { font-size:38px; }
  .doc-lead { font-size:15px; }
}
@media(max-width:560px){
  .card-grid { grid-template-columns:1fr; }
  .real-interface { margin-bottom:40px; }
  .screenshot-caption span:first-child { max-width:72%; }
}