:root{
    --navy-900:#0B1438; --navy-800:#0E1F6B;
    --sky-500:#2EA3DD; --sky-400:#52B6E6;
    --bg:#F6F8FC; --bg-2:#EEF2F8;
    --ink:#0B1438; --ink-2:#1C254E;
    --muted:#5B6584; --muted-2:#8892AE;
    --line:#E4EAF3; --line-2:#D6DEEB;
    --max:820px;
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  html, body{ overflow-x:clip; }
  body{
    margin:0;
    font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    color:var(--ink); background:var(--bg);
    font-size:16px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:var(--navy-800); text-decoration:underline; text-underline-offset:3px; }
  a:hover{ color:var(--sky-500); }
  .container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 28px; }

  .nav-wrap{
    position:sticky; top:0; z-index:50;
    background:rgba(246,248,252,.82);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0; max-width:1200px; margin:0 auto; padding-left:28px; padding-right:28px;
  }
  .brand img{ height:30px; }
  .nav .back{
    display:inline-flex; align-items:center; gap:8px;
    font-size:14px; font-weight:500; color:var(--ink-2);
    padding:8px 14px; border-radius:999px;
    border:1px solid var(--line); background:#fff;
    text-decoration:none; min-height:40px;
  }
  .nav .back:hover{ border-color:var(--navy-800); color:var(--navy-800); }
  .nav .back svg{ width:14px; height:14px; }

  .doc-head{ padding:64px 0 32px; }
  .kicker{
    display:inline-flex; align-items:center; gap:10px;
    font-family:"JetBrains Mono", monospace;
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--sky-500); margin-bottom:18px;
  }
  .kicker .bar{ width:24px; height:1px; background:var(--sky-500); display:inline-block; }
  h1{
    font-size:clamp(34px, 4.6vw, 52px);
    font-weight:700; letter-spacing:-.022em;
    line-height:1.05; margin:0 0 16px;
    color:var(--navy-900); text-wrap:balance;
  }
  .lead{ font-size:18px; color:var(--muted); margin:0 0 8px; text-wrap:pretty; }
  .meta{ font-family:"JetBrains Mono", monospace; font-size:12px; color:var(--muted-2); letter-spacing:.06em; }

  .doc{ padding-bottom:96px; }
  .doc article{
    background:#fff; border:1px solid var(--line);
    border-radius:18px; padding:48px 52px;
    box-shadow:0 6px 24px -10px rgba(11,20,56,.08);
  }
  .doc h2{
    font-size:20px; font-weight:600; letter-spacing:-.01em;
    margin:32px 0 12px; color:var(--navy-900);
    display:flex; gap:14px; align-items:baseline;
  }
  .doc h2:first-child{ margin-top:0; }
  .doc h2 .num{
    font-family:"JetBrains Mono", monospace;
    font-size:13px; color:var(--sky-500);
    letter-spacing:.06em; flex-shrink:0;
    min-width:32px;
  }
  .doc p{ margin:0 0 12px; color:var(--ink-2); }
  .doc ul{ margin:0 0 16px; padding-left:22px; }
  .doc ul li{ margin-bottom:6px; color:var(--ink-2); }
  .doc strong{ color:var(--navy-900); }
  .doc .tldr{
    background:var(--bg-2);
    border-left:3px solid var(--sky-500);
    border-radius:8px;
    padding:18px 22px; margin:0 0 28px;
  }
  .doc .tldr h3{
    font-family:"JetBrains Mono", monospace;
    font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    margin:0 0 8px; color:var(--navy-800); font-weight:600;
  }
  .doc .tldr p{ margin:0; font-size:15px; }

  footer{ background:var(--navy-900); color:rgba(255,255,255,.7); padding:48px 0 28px; margin-top:30px; }
  .foot-inner{
    max-width:1200px; margin:0 auto; padding:0 28px;
    display:flex; justify-content:space-between; align-items:center;
    gap:18px; flex-wrap:wrap; font-size:13px;
  }
  .foot-inner a{ color:rgba(255,255,255,.7); text-decoration:none; }
  .foot-inner a:hover{ color:var(--sky-400); }
  .foot-inner .links{ display:flex; gap:20px; flex-wrap:wrap; }

  @media (max-width:640px){
    .container{ padding:0 20px; }
    .nav{ padding-left:20px; padding-right:20px; }
    .doc-head{ padding:40px 0 24px; }
    .doc article{ padding:32px 24px; border-radius:14px; }
    .doc h2{ flex-direction:column; gap:4px; }
  }