:root {
  color-scheme: light;
  --bg: #f6f8fc;
  --surface: #fff;
  --ink: #172235;
  --muted: #61708a;
  --line: #dce3ef;
  --accent: #1769e0;
  --glow: #9ec5ff;
  --code-bg: #eef2f9;
  --note-bg: #fff6df;
  --note-line: #b7791f;
  --note-ink: #6b3d00;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171719;
  --surface: #202023;
  --ink: #dedee2;
  --muted: #adadb5;
  --line: #313137;
  --accent: #51b8aa;
  --glow: #51b8aa;
  --code-bg: #171719;
  --note-bg: #4d3508;
  --note-line: #9b670f;
  --note-ink: #ffe1a3;
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 12% -10%, var(--glow), transparent 30rem), var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] body {
  background: radial-gradient(circle at 12% 0, rgb(81 184 170 / .14), transparent 32rem), var(--bg);
}

.page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 64px; }

header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: inline-flex; gap: 11px; align-items: center; font-weight: 760; letter-spacing: -.03em; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--accent); }
.mark { display: grid; width: 37px; height: 37px; place-items: center; }
.brand-logo { width: 100%; height: 100%; }
.brand-logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }

.theme-toggle { display: inline-grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 6px; color: var(--ink); background: transparent; cursor: pointer; }
.theme-toggle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.theme-toggle #theme-icon-sun { display: none; }
.theme-toggle #theme-icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle #theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle #theme-icon-moon { display: none; }

.crumbs { margin: 34px 0 0; color: var(--muted); font-size: .85rem; }
.crumbs a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: .16em; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--ink); }

main { padding-top: 18px; }

.eyebrow { margin: 0 0 14px; color: var(--accent); font-size: .78rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-family: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -.045em; }
.lede { max-width: 680px; margin: 20px 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }

h2 { margin: 46px 0 14px; font-family: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1.45rem; letter-spacing: -.03em; }
h3 { margin: 28px 0 10px; font-size: 1.05rem; letter-spacing: -.015em; }
p, li { line-height: 1.7; }
p { margin: 13px 0 0; }
ul, ol { margin: 13px 0 0; padding-left: 24px; }
li + li { margin-top: 7px; }
li::marker { color: var(--accent); font-weight: 700; }
a { color: var(--accent); }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
p code, li code, td code { padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow-wrap: anywhere; }
pre code { padding: 0; border: 0; border-radius: 0; background: transparent; overflow-wrap: normal; }

pre { position: relative; margin: 16px 0 0; padding: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--code-bg); font-size: .82rem; line-height: 1.7; }
pre code { font-size: inherit; }
.copy-button { position: absolute; top: 10px; right: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; color: var(--muted); background: var(--surface); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; opacity: .75; }
.copy-button:hover { color: var(--accent); opacity: 1; }
.copy-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.callout { margin: 20px 0 0; padding: 14px 17px; border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font-size: .93rem; }
.callout.warn { border-left-color: var(--note-line); color: var(--note-ink); background: var(--note-bg); }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }

table { width: 100%; margin: 16px 0 0; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .76rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
td:first-child { white-space: nowrap; }
.table-wrap { overflow-x: auto; }

.steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { position: relative; margin: 0; padding: 0 0 26px 48px; counter-increment: step; }
.steps > li::before { position: absolute; top: -2px; left: 0; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 50%; color: var(--accent); background: var(--surface); content: counter(step); font-size: .85rem; font-weight: 760; }
.steps > li:not(:last-child)::after { position: absolute; top: 34px; bottom: 4px; left: 15px; width: 1px; background: var(--line); content: ""; }
.steps h3 { margin: 0 0 4px; }

.guide-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.guide-nav a { display: inline-flex; padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font-size: .85rem; font-weight: 650; text-decoration: none; }
.guide-nav a:hover { border-color: var(--accent); color: var(--accent); }

.guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.guide-card { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 12px; color: inherit; background: var(--surface); text-decoration: none; }
.guide-card:hover { border-color: var(--accent); box-shadow: 0 10px 26px rgba(17, 34, 61, .07); }
.guide-card h2 { margin: 0 0 7px; font-size: 1.1rem; letter-spacing: -.02em; }
.guide-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

footer { margin-top: 56px; color: var(--muted); font-size: .83rem; line-height: 1.6; }

@media (max-width: 640px) {
  .page { width: min(100% - 28px, 1120px); }
  .guide-list { grid-template-columns: 1fr; }
  .steps > li { padding-left: 42px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }