:root { color-scheme: dark; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #ecfaef; background: radial-gradient(circle at 87% 0, #1b3b2d, transparent 28rem), #071410; }
a { color: #a6ef66; text-decoration: none; }
a:hover { color: #d9ffad; }
.guide-shell { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }
.guide-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid #2b4b3c; }
.guide-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 850; letter-spacing: .04em; }
.guide-brand img { width: 38px; height: 38px; object-fit: contain; }
.guide-brand small { margin-left: 5px; color: #70dcb5; font-size: 11px; letter-spacing: .15em; }
.guide-header-actions { display: flex; align-items: center; gap: 12px; }
.guide-header-actions a { padding: 9px 13px; border: 1px solid #3c6550; border-radius: 9px; font-size: 13px; font-weight: 750; white-space: nowrap; }
.guide-hero { padding: 48px 0 39px; }
.guide-hero > small, .guide-card > small { color: #5ce3bd; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.guide-hero h1 { font-size: clamp(31px, 4vw, 51px); margin: 14px 0 12px; }
.guide-hero p { color: #bad0c1; font-size: 18px; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.guide-tags span { padding: 8px 12px; border: 1px solid #426c4e; border-radius: 99px; background: #193624; color: #c6f89c; font-size: 13px; }
.guide-warning { margin-bottom: 16px; padding: 14px 17px; border: 1px solid #8d692b; border-radius: 12px; color: #ffdc8e; background: #2e2517; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 7px; position: sticky; top: 0; z-index: 1; padding: 13px 0; background: #071410f2; backdrop-filter: blur(14px); }
.guide-nav a { padding: 10px 12px; border: 1px solid #285240; border-radius: 9px; background: #12271d; font-size: 13px; }
.guide-card { scroll-margin-top: 85px; padding: 28px; margin: 18px 0; border: 1px solid #315544; border-radius: 19px; background: linear-gradient(140deg, #10271e, #0b1a15); }
.guide-card h2 { margin: 9px 0 17px; font-size: 26px; }
.guide-card h3 { margin: 0 0 10px; }
.guide-card p, .guide-card td, .guide-steps span { color: #bdd0c3; line-height: 1.75; }
.guide-card p { margin: 10px 0 18px; }
.guide-card code { color: #a2f0d4; overflow-wrap: anywhere; }
.guide-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; counter-reset: guide-step; padding: 0; margin: 17px 0 0; }
.guide-steps li { display: grid; gap: 7px; padding: 17px; border: 1px solid #315743; border-radius: 12px; background: #0a2118; counter-increment: guide-step; }
.guide-steps li::before { content: counter(guide-step, decimal-leading-zero); color: #b5ef53; font: 800 20px ui-monospace, monospace; }
.guide-field { display: grid; gap: 6px; padding: 15px; border: 1px solid #315743; border-radius: 12px; background: #0a2118; }
.guide-field span { color: #97b3a0; font-size: 12px; }
.guide-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 17px 0; }
th, td { border-bottom: 1px solid #2b4b3c; text-align: left; vertical-align: top; padding: 13px 10px; }
th { color: #d7f1df; font-size: 13px; }
td:first-child { white-space: nowrap; }
pre { overflow-x: auto; margin: 18px 0; padding: 17px; border: 1px solid #315743; border-radius: 12px; background: #06130f; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
pre code { color: #dcf6e4; font-size: 13px; }
.guide-note { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; border: 1px solid #7a6e2f; border-radius: 11px; background: #282719; }
.guide-note b { color: #ffe38d; white-space: nowrap; }
.guide-note span { color: #e6d9ae; line-height: 1.65; }
.guide-endpoints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-endpoints > div { min-width: 0; padding: 17px; border: 1px solid #315743; border-radius: 12px; background: #0a2118; }
.guide-endpoints pre { margin-bottom: 0; }
.guide-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0 10px; }
.guide-examples > div { min-width: 0; padding: 16px; border: 1px solid #315743; border-radius: 12px; background: #0a2118; }
.guide-examples > div:last-child { grid-column: 1 / -1; }
.guide-examples h3 { margin: 0 0 10px; font-size: 16px; }
.guide-examples pre { margin: 0; }
footer { display: flex; justify-content: space-between; gap: 12px; padding: 32px 0 48px; color: #8ea99a; font-size: 13px; }
@media(max-width: 730px) { .guide-header { flex-wrap: wrap; } .guide-hero { padding: 34px 0 26px; } .guide-steps, .guide-endpoints, .guide-examples { grid-template-columns: 1fr; } .guide-examples > div:last-child { grid-column: auto; } .guide-card { padding: 20px; } .guide-nav { position: static; } }