:root{--bg:#FBFBF9;--surface:#fff;--ink:#1A2229;--muted:#5A6670;--rule:#DDE1DF;--code:#F0F2F1;--accent:#1F7A6D;--accent-soft:#E3F1EE;--warn:#B3261E;--warn-soft:#FBEDEB;--mark:#E8590C;color-scheme:light dark;
  --serif:"Noto Serif SC","Songti SC","STSong",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--bg:#121619;--surface:#1B2125;--ink:#E4E9EA;--muted:#9AA7AE;--rule:#2C363C;--code:#1F262B;--accent:#5CC2B1;--accent-soft:#17302C;--warn:#F2A7A0;--warn-soft:#3A2220}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.85 var(--sans);-webkit-text-size-adjust:100%}
.wrap{max-width:900px;margin:0 auto;padding:0 20px 96px}
header.top{padding:52px 0 8px}
.eyebrow{margin:0 0 8px;font-size:13.5px;font-weight:600;letter-spacing:.08em;color:var(--accent)}
h1{margin:0 0 12px;font:900 clamp(30px,5vw,44px)/1.25 var(--serif);letter-spacing:-.01em}
.lead{margin:0;font-size:18px;color:var(--muted);max-width:40em}
.tabbar{position:sticky;top:0;z-index:20;margin:22px -20px 0;padding:12px 20px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.tabs{display:inline-flex;padding:4px;gap:4px;background:var(--code);border:1px solid var(--rule);border-radius:12px}
.tabs button{appearance:none;border:0;background:none;color:var(--muted);font:600 16px/1 var(--sans);padding:11px 22px;border-radius:9px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tabnote{margin:0 0 0 14px;font-size:14px;color:var(--muted);vertical-align:middle}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px;padding:0;list-style:none}
.toc a{display:block;padding:5px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14.5px;text-decoration:none}
.toc a:hover{border-color:var(--accent);color:var(--accent)}
section.panel[hidden]{display:none}
h2{display:flex;align-items:center;gap:12px;margin:56px 0 14px;font:900 28px/1.3 var(--serif);scroll-margin-top:84px}
h2 .n{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--bg);font:700 17px/1 var(--sans)}
h3{margin:30px 0 8px;font:700 19px/1.4 var(--sans);scroll-margin-top:84px}
p{margin:0 0 14px}
a{color:var(--accent)}
code{font:0.88em var(--mono);background:var(--code);border:1px solid var(--rule);border-radius:5px;padding:1px 6px}
kbd{font:0.86em var(--mono);background:var(--surface);border:1px solid var(--rule);border-bottom-width:2px;border-radius:5px;padding:1px 7px}
pre{margin:14px 0 18px;padding:14px 16px;background:var(--code);border:1px solid var(--rule);border-radius:10px;overflow:auto;font:14px/1.7 var(--mono);position:relative}
pre code{background:none;border:0;padding:0;font:inherit}
pre .copy{position:absolute;top:8px;right:8px;appearance:none;border:1px solid var(--rule);background:var(--surface);color:var(--muted);border-radius:6px;padding:2px 10px;font:12.5px var(--sans);cursor:pointer}
pre .copy:hover{color:var(--accent);border-color:var(--accent)}
ul,ol{margin:0 0 16px;padding-left:1.4em}
li{margin:5px 0}
li>ul,li>ol{margin:6px 0 4px}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0 6px}
.cards3>div{padding:18px 18px 8px;background:var(--surface);border:1px solid var(--rule);border-radius:12px}
.cards3 h3{margin:0 0 6px;font-size:18px}
.cards3 p{font-size:15.5px;color:var(--muted)}
figure.shot{margin:20px 0 22px}
figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:12px;background:var(--surface);box-shadow:0 8px 30px rgba(0,0,0,.08)}
figure.shot figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
figure.narrow img{max-width:340px;margin:0 auto}
figure.narrow figcaption{text-align:center}
.phones{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:22px 0}
.phones figure{flex:0 1 250px;margin:0}
.phones img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:22px;box-shadow:0 8px 30px rgba(0,0,0,.1);background:var(--surface)}
.phones figcaption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
ol.legend{list-style:none;counter-reset:lg;padding:0;margin:0 0 18px}
ol.legend>li{counter-increment:lg;position:relative;margin:9px 0;padding-left:40px}
ol.legend>li::before{content:counter(lg);position:absolute;left:0;top:1px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mark);color:#fff;font:700 14.5px/1 var(--sans)}
ol.steps{list-style:none;counter-reset:st;padding:0;margin:0 0 18px}
ol.steps>li{counter-increment:st;position:relative;margin:12px 0;padding:2px 0 2px 44px}
ol.steps>li::before{content:counter(st);position:absolute;left:0;top:1px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);font:700 15px/1 var(--sans)}
.tip,.warn{margin:18px 0;padding:12px 16px 2px;border-radius:10px;border:1px solid var(--rule);border-left-width:4px}
.tip{background:var(--accent-soft);border-left-color:var(--accent)}
.warn{background:var(--warn-soft);border-left-color:var(--warn)}
.tip b.h,.warn b.h{display:block;margin-bottom:2px}
table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:15.5px;display:block;overflow-x:auto}
th,td{padding:9px 12px;border:1px solid var(--rule);text-align:left;vertical-align:top}
th{background:var(--code);white-space:nowrap}
td:first-child{white-space:nowrap}
svg.ic{width:20px;height:20px;vertical-align:-4px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
table.icons td:first-child{width:3.2em;text-align:center;color:var(--accent)}
details{margin:12px 0;padding:10px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:10px}
details summary{cursor:pointer;font-weight:600}
details[open] summary{margin-bottom:8px}
footer{margin-top:64px;padding-top:18px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--muted)}
@media (max-width:560px){body{font-size:16px}.tabs button{padding:10px 16px}.tabnote{display:none}h2{font-size:24px}}
@media print{.tabbar{position:static}section.panel[hidden]{display:block}}
header.top{position:relative}
.langsw{position:absolute;top:8px;right:0}
.langsw a{display:inline-block;padding:5px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px;text-decoration:none}
.langsw a:hover{border-color:var(--accent);color:var(--accent)}
.langbar{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 14px;background:var(--accent-soft);border-bottom:1px solid var(--rule);font-size:14.5px}
.langbar[hidden]{display:none}
.langbar button{appearance:none;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
body:lang(en){font-family:var(--sans)}
