:root{
    --bg:#0a0d12;
    --surface:#10141b;
    --line:#232b36;
    --text:#e8ecf1;
    --text-dim:#8b94a3;
    --text-faint:#5a6472;
    --accent:#4de8c2;
    --accent-2:#6c7ce8;
    --display:'Space Grotesk', sans-serif;
    --body:'Inter', sans-serif;
    --mono:'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ overflow-x:hidden; }
  body{ background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.65; overflow-x:hidden; }
  a{ color:var(--accent); text-decoration:none; }
  a:hover{ text-decoration:underline; }
  .wrap{ max-width:820px; margin:0 auto; padding:0 32px; }

  nav{
    position:sticky; top:0; z-index:10;
    background:rgba(10,13,18,0.85);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
  .logo img{ height:24px; width:auto; display:block; }
  .back-link{ font-family:var(--mono); font-size:0.82rem; color:var(--text-dim); }
  .back-link:hover{ color:var(--accent); }

  main{ padding:64px 0 100px; }
  .doc-header{ margin-bottom:48px; border-bottom:1px solid var(--line); padding-bottom:32px; }
  h1{ font-family:var(--display); font-weight:700; font-size:clamp(2rem, 4vw, 2.8rem); letter-spacing:-0.01em; margin-bottom:12px; }
  .updated{ font-family:var(--mono); font-size:0.82rem; color:var(--text-faint); }

  h2{ font-family:var(--display); font-weight:600; font-size:1.4rem; margin:44px 0 14px; }
  h2:first-of-type{ margin-top:0; }
  p{ color:var(--text-dim); margin-bottom:14px; }
  ul{ color:var(--text-dim); margin:0 0 14px 22px; }
  li{ margin-bottom:8px; }
  strong{ color:var(--text); font-weight:600; }

  .callout{
    background:var(--surface);
    border:1px solid var(--line);
    border-left:3px solid var(--accent);
    padding:18px 22px;
    font-size:0.92rem;
    color:var(--text-dim);
    margin-bottom:40px;
  }

  footer{ border-top:1px solid var(--line); padding:36px 0; }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .foot-left{ font-family:var(--mono); font-size:0.8rem; color:var(--text-faint); line-height:1.8; }
  .foot-left a{ color:var(--text-faint); transition:color 0.2s ease; }
  .foot-left a:hover{ color:var(--accent); }

  @media (max-width:600px){
    .wrap{ padding:0 20px; }
    main{ padding:44px 0 72px; }
  }