:root {
  --blue:#2563eb; --blue-soft:#eff6ff; --green:#15803d; --green-soft:#f0fdf4;
  --orange:#c2410c; --orange-soft:#fff7ed; --red:#b91c1c; --red-soft:#fef2f2;
  --ink:#111827; --muted:#64748b; --line:#dbe3ee; --soft:#f8fafc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.78 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#fff}
a{color:var(--blue)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.hero{padding:54px 22px 38px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f8fbff,#fff)}
.wrap{max-width:940px;margin:auto}
.eyebrow{color:var(--blue);font-size:13px;font-weight:800;letter-spacing:.08em}
.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.16;margin:10px 0 16px}
.lead{max-width:840px;font-size:18px;color:#475569}
.pills,.nav,.actions{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1px solid var(--line);padding:4px 10px;border-radius:999px;font-size:13px;background:#fff}
.nav{position:sticky;top:0;z-index:5;justify-content:center;padding:12px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}
.nav a{text-decoration:none;font-size:14px;white-space:nowrap}
.actions{margin-left:12px}
.actions button,.copy{border:1px solid #bfdbfe;background:#fff;color:#1d4ed8;border-radius:6px;padding:5px 9px;cursor:pointer}
main{padding:30px 22px 70px}
details{border-top:1px solid var(--line)}
summary{padding:22px 4px;font-size:22px;font-weight:800;cursor:pointer;line-height:1.4}
.content{padding:0 4px 30px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card,.note,.good,.warn,.danger{border:1px solid var(--line);border-radius:10px;padding:16px;background:#fff}
.note{background:var(--blue-soft);border-color:#bfdbfe}
.good{background:var(--green-soft);border-color:#bbf7d0}
.warn{background:var(--orange-soft);border-color:#fed7aa}
.danger{background:var(--red-soft);border-color:#fecaca}
h2,h3{line-height:1.35}
h3{margin:22px 0 8px}
table{width:100%;border-collapse:collapse;margin:16px 0;display:block;overflow:auto}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;min-width:140px;vertical-align:top}
th{background:var(--soft)}
pre{position:relative;background:#0f172a;color:#e2e8f0;padding:18px;border-radius:10px;overflow:auto;line-height:1.65;white-space:pre}
.copy{position:absolute;right:8px;top:8px}
.svgbox{overflow-x:auto;border:1px solid var(--line);border-radius:10px;padding:14px;margin:18px 0;background:#fff}
.svgbox svg{display:block;min-width:820px;width:100%;height:auto}
.caption{font-size:14px;color:#475569;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.formula{font-weight:800;text-align:center;padding:14px;background:var(--soft);border-radius:8px}
.steps{counter-reset:step;list-style:none;padding:0}
.steps li{counter-increment:step;position:relative;padding:10px 10px 10px 44px;border-left:2px solid #bfdbfe;margin-left:15px}
.steps li::before{content:counter(step);position:absolute;left:-17px;top:9px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:800}
.footer{padding:24px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}
@media(max-width:700px){
  .grid,.grid.three{grid-template-columns:1fr}.nav{justify-content:flex-start;overflow:auto;flex-wrap:nowrap}
  .actions{display:none}summary{font-size:19px}.hero{padding-top:34px}.lead{font-size:16px}
}