:root {
  --doc-blue: #075dff;
  --doc-blue-deep: #003dbb;
  --doc-navy: #06152b;
  --doc-canvas: #f5f8fc;
  --doc-line: #dfe7f2;
  --doc-muted: #6b7890;
  --doc-shadow: 0 18px 60px rgba(19, 49, 88, .09);
}

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body { background: var(--doc-canvas); color: #111d30; font-family: "Geist", "PingFang SC", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 78% 4%, rgba(26, 104, 255, .09), transparent 29rem), linear-gradient(90deg, rgba(11, 94, 255, .025) 1px, transparent 1px), linear-gradient(rgba(11, 94, 255, .025) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; }
.top { top: 0; border: 0; background: rgba(245, 248, 252, .84); backdrop-filter: blur(20px) saturate(1.3); }
.top::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, #dbe5f1 10%, #dbe5f1 90%, transparent); }
.top-inner { width: min(calc(100% - 48px), 1240px); min-height: 76px; }
.brand { gap: 12px; }
.brand img { width: 42px; height: 42px; border: 1px solid #d7e2f1; box-shadow: 0 9px 24px rgba(25, 74, 145, .14); }
.brand > span { display: grid; gap: 2px; }
.brand strong { font-size: 14px; }
.brand small { color: #8290a5; font: 600 8px/1 "JetBrains Mono", monospace; letter-spacing: .15em; }
.doc-status { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: #148247; font-size: 12px; font-weight: 650; }
.doc-status i { width: 7px; height: 7px; border-radius: 50%; background: #18b65f; box-shadow: 0 0 0 5px #e8f8ee; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: 24px; padding: 0 15px; border: 1px solid #d8e2ee; border-radius: 10px; background: #fff; color: #25334a; font-size: 12px; font-weight: 650; box-shadow: 0 7px 20px rgba(25, 58, 100, .05); }
.layout { width: min(calc(100% - 48px), 1240px); grid-template-columns: 230px minmax(0, 1fr); gap: 34px; }
.side { display: block; padding: 42px 22px 60px 0; border: 0; }
.side-label { margin: 0 12px 14px; color: #8a97a9; font: 650 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.side nav { top: 104px; gap: 4px; }
.side a { position: relative; min-height: 42px; display: flex; align-items: center; padding: 0 13px; border-radius: 9px; color: #58677c; font-size: 13px; font-weight: 590; }
.side a::before { content: ""; width: 5px; height: 5px; margin-right: 10px; border: 1px solid #a8b5c6; border-radius: 50%; }
.side a:hover { color: var(--doc-blue); background: #eaf1ff; }
.side a:hover::before { border-color: var(--doc-blue); background: var(--doc-blue); }
.side-help { position: sticky; top: 540px; display: grid; gap: 5px; margin-top: 28px; padding: 16px; border: 1px solid #dae5f2; border-radius: 13px; background: #fff; box-shadow: 0 10px 32px rgba(24, 61, 107, .06); }
.side-help span { color: #7b899c; font-size: 11px; }
.side-help strong { font-size: 13px; }
.side-help a { min-height: 28px; padding: 0; color: var(--doc-blue); font-size: 11px; }
.side-help a::before { display: none; }
.content { padding: 58px 0 100px; }
.content article { max-width: 850px; padding: clamp(28px, 5vw, 60px); border: 1px solid #dfe7f2; border-radius: 20px; background: rgba(255, 255, 255, .95); box-shadow: var(--doc-shadow); }
.doc-kicker { margin: 0 0 15px; color: var(--doc-blue); font: 650 10px/1 "JetBrains Mono", monospace; letter-spacing: .17em; }
.content h1 { max-width: 12ch; margin-bottom: 18px; color: #0a1629; font-size: clamp(48px, 6vw, 74px); letter-spacing: -.065em; }
.lead { max-width: 38ch; margin: 0; color: #68778e; font-size: clamp(17px, 2vw, 21px); line-height: 1.7; }
.callout { display: grid; gap: 8px; margin: 36px 0 50px; padding: 18px 20px; border: 1px solid #bfd5fb; border-left: 4px solid var(--doc-blue); border-radius: 12px; background: #f1f6ff; }
.callout span { color: #70809a; font-size: 11px; font-weight: 650; }
.callout code { color: #094dc5; font-size: 12px; font-weight: 650; }
.content h2 { display: flex; align-items: center; gap: 13px; margin: 58px 0 14px; padding-top: 5px; color: #111e31; font-size: clamp(24px, 3vw, 31px); letter-spacing: -.04em; }
.content h2 > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #bfd1e9; border-radius: 8px; color: var(--doc-blue); font: 650 9px/1 "JetBrains Mono", monospace; }
.content h2 + p, .content article > p:not(.lead):not(.doc-kicker) { color: #5f6e83; }
.content p code, .table code { display: inline-block; padding: 2px 6px; border: 1px solid #dce5f0; border-radius: 5px; background: #f5f8fc; color: #17447f; }
.code-wrap { margin: 18px 0; border: 1px solid #173f72; border-radius: 13px; background: var(--doc-navy); box-shadow: 0 15px 36px rgba(6, 21, 43, .13); overflow: hidden; }
pre { min-height: 76px; padding: 24px 96px 24px 22px; border-radius: 0; background: transparent; color: #c8dcfa; font-size: 12px; line-height: 1.75; }
.copy { top: 14px; right: 14px; min-height: 34px; padding: 0 12px; border: 1px solid #2c527f; border-radius: 7px; background: #0b274b; color: #ddecff; font-size: 11px; }
.copy:hover { background: #103662; }
.table { margin-top: 22px; overflow: hidden; border: 1px solid #dfe7f2; border-radius: 12px; border-collapse: separate; border-spacing: 0; }
.table th { background: #f2f6fb; color: #77849a; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.table th, .table td { padding: 14px 16px; border-color: #e5ebf3; }
.table td { color: #4e5c70; font-size: 13px; }
.foot { border: 0; padding: 0 0 40px; color: #8a97aa; font-size: 11px; }
.foot .top-inner { min-height: auto; border-top: 1px solid #dde6f1; padding-top: 24px; }
.foot span { margin-left: auto; }

@media (max-width: 860px) {
  .top-inner, .layout { width: min(calc(100% - 28px), 720px); }
  .doc-status { display: none; }
  .layout { display: block; }
  .side { display: none; }
  .content { padding-top: 24px; }
  .content article { padding: 30px 24px 50px; border-radius: 16px; }
}

@media (max-width: 560px) {
  .top-inner { min-height: 64px; }
  .brand img { width: 36px; height: 36px; }
  .brand small { display: none; }
  .back { width: 40px; padding: 0; justify-content: center; font-size: 0; }
  .back span { font-size: 14px; }
  .content article { padding: 26px 18px 42px; }
  .content h1 { font-size: 43px; }
  .lead { font-size: 15px; }
  .callout { margin: 28px 0 38px; }
  .content h2 { margin-top: 44px; font-size: 24px; }
  pre { min-height: 104px; padding: 58px 16px 18px; font-size: 11px; }
  .copy { left: 14px; right: auto; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table { border: 0; background: transparent; }
  .table tr { margin-top: 8px; padding: 13px; border: 1px solid #dfe7f2; border-radius: 10px; background: #fff; }
  .table td { padding: 4px 0; }
  .foot span { display: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }