:root { --ink:#352d28; --muted:#77685d; --accent:#b9472e; --line:#e4d7cb; --paper:#fffcf8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:95px; }
body { margin:0; color:var(--ink); background:linear-gradient(120deg,#f4ece3,#fcf8f2 55%,#f0e7de); font:16px/1.9 "PingFang SC","Microsoft YaHei",sans-serif; }
a { color:var(--accent); }
.guide-header { display:flex; align-items:center; justify-content:space-between; gap:15px; position:sticky; top:0; z-index:2; padding:16px max(24px,calc((100vw - 1360px)/2)); border-bottom:1px solid var(--line); background:#fffcf8f5; backdrop-filter:blur(8px); }
.guide-header a { text-decoration:none; font-weight:700; }
.guide-header span { font-size:13px; color:var(--muted); }
.guide-header-actions { display:flex; align-items:center; gap:14px; margin-inline-start:auto; flex-shrink:0; white-space:nowrap; }
.guide-header .guide-back { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; color:white; background:var(--accent); border:1px solid var(--accent); border-radius:9px; box-shadow:0 3px 10px #b9472e24; }
.guide-back::before { content:"\2190"; }
.guide-header .guide-back:hover { background:#963822; border-color:#963822; }
.guide-header .guide-back:focus-visible { outline:3px solid #d39361; outline-offset:3px; }
.guide-layout { max-width:1360px; margin:0 auto; display:grid; grid-template-columns:220px minmax(0,1fr); gap:42px; padding:35px 24px; }
.guide-nav { position:sticky; top:100px; align-self:start; max-height:calc(100dvh - 120px); overflow:auto; font-size:13px; padding-right:8px; }
.guide-nav strong { display:block; margin:18px 0 9px; color:var(--ink); }
.guide-nav a { display:block; padding:5px 10px; text-decoration:none; color:var(--muted); border-left:2px solid transparent; }
.guide-nav a:hover,.guide-nav a:focus { background:#eee0d2; border-color:var(--accent); color:var(--accent); }
main { min-width:0; }
.guide-hero { padding:48px; background:radial-gradient(ellipse at top right,#efd3bc,transparent 65%),var(--paper); border:1px solid var(--line); border-radius:20px; }
.eyebrow,.chapter { font-size:12px; color:var(--accent); letter-spacing:.12em; font-weight:700; }
h1,h2 { font-family:"Songti SC","STSong","SimSun",serif; line-height:1.35; }
h1 { font-size:clamp(30px,3.5vw,49px); margin:22px 0; letter-spacing:-.025em; }
h2 { font-size:29px; margin:12px 0 24px; }
h3 { font-size:17px; line-height:1.5; }
p { margin:12px 0; }
.guide-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.guide-tags span { border:1px solid #d9bba4; border-radius:30px; padding:4px 12px; font-size:12px; color:#85553d; }
main > section:not(.guide-hero) { background:var(--paper); padding:35px; margin:24px 0; border:1px solid var(--line); border-radius:16px; }
.quick-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.quick-steps article { padding:18px; background:#f5ece2; border:1px solid var(--line); border-radius:12px; }
.quick-steps b { font:32px/1 Georgia,serif; color:var(--accent); }
.quick-steps p { font-size:14px; }
.guide-example { padding:20px; border:1px dashed #cbb197; border-radius:12px; margin:20px 0; font-size:14px; }
.guide-example > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.guide-example span { display:flex; flex-wrap:wrap; justify-content:space-between; padding:9px 12px; border:1px solid var(--line); background:white; border-radius:8px; }
aside { padding:15px 18px; border-left:3px solid var(--accent); background:#f7e9de; font-size:14px; margin:20px 0; }
.guide-table { overflow-x:auto; max-width:100%; }
table { width:100%; min-width:590px; border-collapse:collapse; text-align:left; font-size:14px; }
th,td { border:1px solid var(--line); padding:12px; vertical-align:top; }
th { background:#f4e8dc; font-weight:700; }
li { margin-bottom:10px; }
ul,ol { padding-left:24px; }
details { border-bottom:1px solid var(--line); padding:15px 0; }
summary { cursor:pointer; font-weight:700; }
details p { color:var(--muted); }
.guide-footer { color:var(--muted); text-align:center; padding:25px; font-size:13px; }
@media(max-width:1050px) { .guide-layout { gap:20px; grid-template-columns:185px minmax(0,1fr); } .quick-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) { .guide-layout { display:block; padding:18px 14px; } .guide-nav { position:static; max-height:none; display:flex; gap:6px; overflow:auto; white-space:nowrap; margin:0 0 18px; } .guide-nav strong { display:none; } .guide-nav a { flex-shrink:0; border:1px solid var(--line); border-radius:8px; padding:8px; } .guide-header { flex-wrap:wrap; padding:12px 16px; font-size:14px; } .guide-header span { display:none; } .guide-hero,main>section:not(.guide-hero) { padding:24px 20px; } .guide-example>div { grid-template-columns:1fr; } h2 { font-size:25px; } .quick-steps article { padding:12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }