:root { color-scheme:light; --ink:#17324d; --muted:#5b6d7e; --line:#dbe7ef; --blue:#0867c7; --blue-dark:#064c91; --blue-soft:#eef7ff; --paper:#fff; --canvas:#f5f9fc; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; line-height:1.72; }
a { color:var(--blue); }
.site-header { min-height:68px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--paper); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--blue-dark); font-size:1.12rem; font-weight:750; text-decoration:none; }
.brand img { width:auto; height:42px; max-width:160px; object-fit:contain; }
.product-id { color:var(--muted); font-size:.88rem; }
main { width:min(960px,calc(100% - 32px)); margin:32px auto 64px; }
article { padding:clamp(24px,5vw,64px); background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 50px rgba(28,70,102,.08); }
.breadcrumb { display:flex; gap:8px; color:var(--muted); font-size:.88rem; }
.hero { padding:44px 0 18px; }
.eyebrow { margin:0 0 10px; color:var(--blue); font-size:.82rem; font-weight:750; letter-spacing:.08em; }
h1,h2 { line-height:1.25; }
h1 { margin:0; font-size:clamp(2rem,5vw,3.25rem); letter-spacing:-.035em; }
h2 { margin-top:48px; font-size:clamp(1.45rem,3vw,2rem); }
.answer { max-width:780px; margin:24px 0; color:#314d66; font-size:1.08rem; }
.boundary { margin:24px 0 0; padding:20px 22px; background:#fff8e8; border-left:4px solid #e49b18; border-radius:8px; }
.boundary p { margin:5px 0 0; }
.steps { padding:0; list-style:none; counter-reset:step; }
.steps li { counter-increment:step; position:relative; margin:12px 0; padding:18px 18px 18px 62px; display:grid; gap:3px; background:var(--blue-soft); border:1px solid #cfe5f7; border-radius:12px; }
.steps li::before { content:counter(step); position:absolute; top:18px; left:18px; width:30px; height:30px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:50%; font-weight:750; }
.steps span { color:#405970; }
.table-wrap { overflow-x:auto; }
table { width:100%; min-width:680px; border-collapse:collapse; }
th,td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:.88rem; }
td:nth-child(2),td:nth-child(3) { background:#fbfdff; }
.example { margin-top:48px; padding:clamp(22px,4vw,34px); background:var(--blue-soft); border:1px solid #c9e2f7; border-radius:16px; }
.example h2 { margin-top:0; }
.example li { margin:8px 0; }
.note { padding:14px 16px; color:#314d66; background:#fff; border-radius:8px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cards div { padding:20px; display:grid; gap:8px; background:#f1f6fa; border-radius:10px; }
.cards span { color:var(--muted); }
.links { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.links a { padding:16px 18px; background:var(--blue-soft); border:1px solid #cfe5f7; border-radius:10px; font-weight:700; text-decoration:none; }
details { padding:15px 0; border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:700; }
details p { color:#405970; }
.article-footer { margin-top:48px; padding-top:20px; color:var(--muted); font-size:.86rem; border-top:1px solid var(--line); }
.article-footer p { margin:4px 0; }
@media (max-width:680px) { .site-header{padding:10px 16px}.brand span{display:none}main{width:min(100% - 20px,960px);margin-top:10px}article{padding:22px;border-radius:14px}.hero{padding-top:32px}.cards,.links{grid-template-columns:1fr} }