:root { --bg:#f6f5f2; --card:#ffffff; --ink:#1f2328; --muted:#616974; --line:#e1e1dd; --accent:#5980a6; --accent-ink:#fff; --soft:#e9eff5; --code:#eeeeea; --shadow:0 12px 40px rgba(31,35,40,.10); color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#14161a; --card:#1d2025; --ink:#e7e9ec; --muted:#9aa3ad; --line:#2c3138; --accent:#7ea3c8; --accent-ink:#0f1318; --soft:#232c36; --code:#262a31; --shadow:0 12px 40px rgba(0,0,0,.45); } }
* { box-sizing:border-box } html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 Barlow, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased }
a { color:var(--accent) } a:hover { text-decoration-thickness:2px }
.wrap { max-width:960px; margin:0 auto; padding:0 22px }
.top { display:flex; align-items:center; gap:14px; padding:18px 0; flex-wrap:wrap }
.top .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:600; font-size:19px; margin-right:auto }
.top .brand svg { width:34px; height:34px }
.top nav { display:flex; gap:18px; flex-wrap:wrap; font-size:15px }
.top nav a { color:var(--ink); text-decoration:none; opacity:.85 } .top nav a:hover { opacity:1; text-decoration:underline }
.lang { font-size:14px; border:1px solid var(--line); border-radius:999px; padding:5px 12px; text-decoration:none; color:var(--ink); background:var(--card) }
.hero { padding:36px 0 12px; display:grid; gap:22px }
h1 { font-size:clamp(30px, 4.6vw, 44px); line-height:1.12; margin:0; letter-spacing:-.015em; font-weight:700 }
.lead { font-size:19px; color:var(--muted); margin:0; max-width:62ch }
.dl { display:grid; gap:12px; justify-items:start }
.btn { display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:600; font-size:19px; padding:15px 26px; border-radius:12px; box-shadow:0 6px 18px rgba(89,128,166,.28) }
.btn:hover { filter:brightness(1.06); text-decoration:none } .btn[aria-disabled="true"] { opacity:.55; pointer-events:none; box-shadow:none }
.btn svg { width:22px; height:22px; flex:none }
.meta { color:var(--muted); font-size:15px }
.others { font-size:15px; display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center } .others span { color:var(--muted) } .others a { color:var(--ink) }
.shot { margin:26px 0 0; } .shot img { width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow) } .shot figcaption { color:var(--muted); font-size:14px; margin-top:10px; text-align:center }
section { padding:44px 0 6px } h2 { font-size:28px; margin:0 0 14px; letter-spacing:-.01em } h3 { font-size:19px; margin:0 0 8px }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px } .card p { margin:0; color:var(--muted); font-size:16px }
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px } .steps .card ol { margin:8px 0 0; padding-left:22px } .steps .card li { margin:8px 0; font-size:16px } .steps .card li::marker { color:var(--accent); font-weight:600 }
.note { background:var(--soft); border-radius:14px; padding:20px 22px; margin-top:18px } .note p { margin:0 }
details { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:6px 22px; margin-top:14px } summary { cursor:pointer; font-weight:600; padding:12px 0; font-size:18px } details[open] summary { border-bottom:1px solid var(--line); margin-bottom:8px }
code, pre, .fp { font:14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:var(--code); border-radius:6px } code { padding:1px 6px } pre { padding:14px 16px; overflow-x:auto; margin:10px 0 } .fp { display:block; padding:12px 14px; word-break:break-all; margin:8px 0 }
footer { margin-top:56px; padding:26px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:15px; display:flex; flex-wrap:wrap; gap:8px 22px } footer a { color:inherit }
/* guide */
.guide { display:grid; grid-template-columns:220px 1fr; gap:40px; padding-top:28px } @media (max-width: 800px) { .guide { grid-template-columns:1fr } .toc { position:static } }
.toc { position:sticky; top:20px; align-self:start; font-size:15px } .toc strong { display:block; color:var(--muted); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px } .toc a { display:block; color:var(--ink); text-decoration:none; padding:4px 0; opacity:.85 } .toc a:hover { opacity:1; text-decoration:underline }
.doc h1 { font-size:38px } .doc > p.lead { margin-bottom:8px } .doc section { padding:30px 0 0 } .doc section h2 { font-size:25px; scroll-margin-top:18px } .doc p { margin:10px 0 } .doc img { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); margin:14px 0 } .doc ol { padding-left:22px } .doc li { margin:10px 0 } .doc li::marker { color:var(--accent); font-weight:600 }
.doc table { border-collapse:collapse; margin:10px 0 } .doc td { padding:6px 16px 6px 0; border-bottom:1px solid var(--line) } .doc td:first-child { font:15px ui-monospace, Menlo, monospace; white-space:nowrap }