.guide-page { min-height: 100vh; background: radial-gradient(circle at 80% 8%, rgba(47,134,246,.13), transparent 34%), var(--bg); }
.guide-header { position: sticky; top: 0; z-index: 40; height: 76px; padding: 0 clamp(20px, 4vw, 72px); display: flex; align-items: center; gap: 24px; border-bottom: 1px solid rgba(126,145,166,.18); background: rgba(23,28,34,.86); backdrop-filter: blur(18px); }
.guide-header .brand { margin-right: auto; }
.guide-back { color: #aab7c6; font-size: 13px; font-weight: 650; }
.guide-back:hover { color: white; }
.guide-main { width: min(100% - 40px, 1040px); margin: 0 auto; padding: 78px 0 110px; }
.guide-hero { max-width: 760px; }
.guide-hero h1 { margin: 0; white-space: normal; font-size: clamp(44px, 6vw, 76px); line-height: 1.02; }
.guide-hero h1 em { color: var(--blue); font-style: normal; }
.guide-lede { max-width: 700px; margin: 26px 0 0; color: #aeb9c7; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.75; }
.guide-alert { margin-top: 36px; padding: 22px 24px; display: flex; gap: 15px; border: 1px solid rgba(228,150,42,.62); border-left: 4px solid var(--orange); border-radius: 10px; background: linear-gradient(135deg, rgba(228,150,42,.14), rgba(228,150,42,.05)); }
.guide-alert-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: #1d232a; font-weight: 800; }
.guide-alert strong { display: block; color: #ffd28b; font-size: 17px; }
.guide-alert p { margin: 5px 0 0; color: #c8b48f; font-size: 14px; }
.guide-layout { margin-top: 54px; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: start; }
.guide-content { min-width: 0; }
.guide-card { margin-bottom: 18px; padding: 28px 30px; border: 1px solid #3e4955; border-radius: 10px; background: #222a33; box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.guide-card h2 { margin: 0 0 14px; color: #edf3fa; font-size: 24px; letter-spacing: -.02em; }
.guide-card h3 { margin: 25px 0 8px; color: #dce8f5; font-size: 16px; }
.guide-card p { margin: 10px 0; color: #aebaca; font-size: 14px; line-height: 1.75; }
.guide-card ol,.guide-card ul { margin: 13px 0 0; padding-left: 22px; color: #bdc8d5; font-size: 14px; line-height: 1.75; }
.guide-card li + li { margin-top: 9px; }
.guide-card code { padding: 2px 5px; border: 1px solid #465465; border-radius: 4px; background: #182028; color: #f0b15d; font: 12px/1.4 "Cascadia Code", Consolas, monospace; }
.guide-card pre { margin: 15px 0 0; padding: 15px 17px; overflow:auto; border: 1px solid #425060; border-radius: 7px; background: #182028; color: #d5e0eb; font: 12px/1.7 "Cascadia Code", Consolas, monospace; }
.guide-card a { color: #7eb7ff; text-decoration: underline; text-underline-offset: 3px; }
.guide-card a:hover { color: white; }
.guide-check { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.guide-check div { padding: 14px; border: 1px solid #40505e; border-radius: 7px; background: #29333d; }
.guide-check strong { display: block; color: #82ddb9; font-size: 13px; }
.guide-check span { display: block; margin-top: 4px; color: #96a7b9; font-size: 11px; }
.guide-aside { position: sticky; top: 98px; padding: 20px; border: 1px solid #3d4a57; border-radius: 10px; background: #202831; }
.guide-aside h2 { margin: 0 0 12px; color: #e1ebf5; font-size: 14px; }
.guide-aside ol { margin: 0; padding: 0; list-style: none; counter-reset: guide; }
.guide-aside li { counter-increment: guide; border-top: 1px solid #35414d; }
.guide-aside li:first-child { border-top: 0; }
.guide-aside a { padding: 11px 0; display: block; color: #9eacbc; font-size: 12px; }
.guide-aside a::before { content: counter(guide, decimal-leading-zero); margin-right: 9px; color: #5f9ce8; font-weight: 700; }
.guide-aside a:hover { color: white; }
.guide-footer { padding: 25px clamp(20px, 5vw, 80px); display: flex; gap: 20px; border-top: 1px solid #303a45; color: #748295; background: #11161b; font-size: 12px; }
.guide-footer span { margin-left: auto; }
@media (max-width: 800px) {
  .guide-header { height: 64px; padding: 0 16px; }
  .guide-header .version { display: none; }
  .guide-back { font-size: 12px; }
  .guide-main { width: min(100% - 32px, 680px); padding-top: 54px; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-aside { position: static; grid-row: 1; }
  .guide-check { grid-template-columns: 1fr; }
  .guide-card { padding: 22px 20px; }
  .guide-footer { flex-wrap: wrap; padding: 22px 16px; }
  .guide-footer span { margin-left: 0; width: 100%; }
}