:root{
  color-scheme: light dark;
  --bg:#ffffff; --bg-soft:#f5f5fa; --surface:#ffffff;
  --ink:#12121c; --muted:#4c4c60; --faint:#8a8a9e; --line:rgba(20,20,45,.10);
  --tint:#6366f1; --tint-2:#4f46e5; --tint-soft:rgba(99,102,241,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0a10; --bg-soft:#101018; --surface:#16161f;
    --ink:#f2f2f8; --muted:#b2b2c6; --faint:#6f6f86; --line:rgba(255,255,255,.10);
    --tint:#818cf8; --tint-2:#a5b4fc; --tint-soft:rgba(129,140,248,.16);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--tint);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.brand:hover{text-decoration:none}
.mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#4f46e5);display:grid;place-items:center;flex:0 0 auto;box-shadow:0 3px 8px -2px rgba(99,102,241,.5)}
.mark svg{width:17px;height:17px}
.nav .back{margin-left:auto;font-size:15px;color:var(--muted);font-weight:500}
.nav .back:hover{color:var(--ink);text-decoration:none}

/* doc */
.doc{padding:48px 0 40px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tint);margin:0 0 12px}
.doc h1{font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:0 0 10px}
.updated{color:var(--faint);font-size:14px;margin:0 0 28px}
.intro{font-size:18px;color:var(--muted);margin:0 0 30px}
.toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:0 0 36px}
.toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0 0 10px;border:0;padding:0}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:14.5px}
@media(max-width:560px){ .toc ol{columns:1} }
.toc li{margin:4px 0}
.doc h2{font-size:22px;letter-spacing:-.015em;margin:38px 0 12px;padding-top:8px;border-top:1px solid var(--line)}
.doc h2:first-of-type{border-top:0}
.doc h3{font-size:17px;margin:22px 0 8px}
.doc p{margin:0 0 14px;color:var(--ink)}
.doc ul{margin:0 0 16px;padding-left:22px}
.doc li{margin:7px 0}
.doc strong{font-weight:650}
.note{background:var(--tint-soft);border:1px solid color-mix(in srgb,var(--tint) 30%,transparent);border-radius:14px;padding:14px 18px;margin:18px 0;font-size:15px}
.note strong{color:var(--tint)}
.contact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-top:8px}
.contact p{margin:2px 0}

/* footer */
footer{padding:40px 0 60px;border-top:1px solid var(--line);margin-top:44px}
footer .row{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
footer .flinks{display:flex;gap:22px;flex-wrap:wrap}
footer .flinks a{font-size:14px;color:var(--muted)}
footer .flinks a:hover{color:var(--ink)}
footer .copy{width:100%;font-size:13px;color:var(--faint);margin-top:8px}