:root { color-scheme: light; font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; font-synthesis: none; color: #172747; background: #f6f8fd; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
a { color: #245eca; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid #77a9ff; outline-offset: 4px; }
.skip-link { position: fixed; top: -60px; left: 16px; padding: 10px 14px; border-radius: 8px; color: #fff; background: #1e54b8; }
.skip-link:focus { top: 16px; }
.shell { min-height: 100vh; background: radial-gradient(circle at 78% 8%, rgba(91, 145, 242, .12), transparent 27%), #f6f8fd; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.guide { width: min(920px, 100%); margin: 0 auto; padding: 30px 0 60px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; color: #73849d; font-size: 12px; line-height: 1.8; }
.breadcrumb a { color: #536b8b; }
.guide-kicker { margin: 0 0 10px; color: #2864d4; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.guide h1 { margin: 0 0 18px; color: #1b2d4b; font-size: clamp(28px, 4vw, 42px); line-height: 1.35; letter-spacing: -.04em; text-wrap: balance; }
.guide-lead { margin: 0; color: #405474; font-size: 17px; line-height: 1.9; }
.guide-meta { margin: 16px 0 22px; color: #73849d; font-size: 12px; line-height: 1.8; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 30px; padding: 16px 0; border-top: 1px solid #dce5f4; border-bottom: 1px solid #dce5f4; }
.guide-toc a { padding: 6px 10px; border: 1px solid #dce5f4; border-radius: 8px; color: #405474; background: #fff; font-size: 12px; text-decoration: none; }
.guide-toc a:hover { color: #245eca; border-color: #a7c6ff; }
.guide-body { padding: 30px 36px; border: 1px solid #dce5f4; border-radius: 22px; background: #fff; }
.guide-body section + section { margin-top: 34px; padding-top: 28px; border-top: 1px solid #edf1f7; }
.guide-body section[id] { scroll-margin-top: calc(var(--site-header-offset, 120px) + 18px); }
.guide-body h2 { margin: 0 0 14px; color: #203352; font-size: 24px; line-height: 1.5; letter-spacing: -.02em; }
.guide-body h3 { margin: 20px 0 8px; color: #203352; font-size: 17px; line-height: 1.6; }
.guide-body p, .guide-body li, .guide-body dd { color: #405474; font-size: 15px; line-height: 1.95; }
.guide-body p { margin: 12px 0; }
.guide-body ul, .guide-body ol { margin: 12px 0; padding-left: 24px; }
.guide-body li + li { margin-top: 8px; }
.guide-body dt { margin-top: 16px; color: #203352; font-size: 15px; font-weight: 750; }
.guide-body dd { margin: 5px 0 0; }
.guide-body strong { color: #203352; }
.guide-body code { overflow-wrap: anywhere; padding: 2px 5px; border-radius: 5px; background: #f0f4fa; font-size: .88em; }
.guide-body pre { max-width: 100%; overflow: auto; margin: 16px 0; padding: 18px; border: 1px solid #dce5f4; border-radius: 12px; color: #203352; background: #f3f7ff; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.guide-body pre code { padding: 0; background: transparent; }
.guide-note { padding: 16px 18px; border-left: 3px solid #087c70; border-radius: 0 10px 10px 0; background: #f0f8f5; }
.guide-table { overflow-x: auto; }
.guide-body table { width: 100%; min-width: 570px; border-collapse: collapse; margin: 16px 0; color: #405474; font-size: 13px; line-height: 1.8; }
.guide-body caption { margin-bottom: 10px; color: #536b8b; text-align: left; }
.guide-body th, .guide-body td { padding: 12px; border: 1px solid #dce5f4; text-align: left; vertical-align: top; }
.guide-body th { color: #203352; background: #f3f7ff; }
.guide-sources { font-size: 13px; }
.guide-related { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 28px; color: #536b8b; font-size: 13px; line-height: 1.8; }
.guide-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 25px 0; border-top: 1px solid #dce5f4; color: #667b97; font-size: 12px; }
@media (max-width: 650px) { .container { width: calc(100% - 24px); } .guide { padding: 22px 0 40px; } .guide-body { padding: 22px 18px; border-radius: 16px; } .guide-body h2 { font-size: 21px; } .guide-body p, .guide-body li, .guide-body dd { font-size: 14px; } .guide-lead { font-size: 15px; } .breadcrumb { margin-bottom: 22px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .guide-toc, .guide-related, .qr-dialog, .guide-footer { display: none; } .guide { padding: 0; } .guide-body { padding: 0; border: 0; } }