.guide-page .masthead { position: sticky; top: 0; z-index: 20; background: rgba(12,14,17,.9); backdrop-filter: blur(16px); }
.guide-layout { flex: 1; display: grid; grid-template-columns: 224px minmax(0, 720px); justify-content: center; align-items: start; gap: clamp(42px, 6vw, 76px); padding: 64px 0 112px; }

.guide-toc { position: sticky; top: 128px; max-height: calc(100vh - 160px); overflow: auto; padding-right: 18px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.toc-label { margin-bottom: 20px; color: var(--quiet); font: 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.guide-toc ol, .mobile-toc ol { margin: 0; padding: 0; list-style: none; }
.guide-toc li + li { margin-top: 12px; }
.guide-toc a, .mobile-toc a { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; text-decoration: none; transition: color .16s ease; }
.guide-toc a:hover, .guide-toc a[aria-current="location"], .mobile-toc a:hover, .mobile-toc a[aria-current="location"] { color: var(--signal); }

.mobile-toc { display: none; border: 1px solid var(--line); background: rgba(23,26,31,.76); }
.mobile-toc summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: var(--ink); font-size: 12px; cursor: pointer; list-style: none; }
.mobile-toc summary::-webkit-details-marker { display: none; }
.mobile-toc summary b { color: var(--signal); font: 16px/1 var(--mono); transition: transform .16s ease; }
.mobile-toc[open] summary b { transform: rotate(45deg); }
.mobile-toc nav { max-height: 58vh; overflow: auto; padding: 6px 16px 18px; border-top: 1px solid var(--line); }
.mobile-toc li + li { margin-top: 10px; }
.mobile-toc a { min-height: 36px; display: flex; align-items: center; }

.guide-content { min-width: 0; color: #b9bfc7; font-size: 16px; line-height: 1.78; }
.guide-content > h1 { max-width: 680px; margin: 0 0 24px; color: var(--ink); font-size: clamp(38px, 4.8vw, 58px); font-weight: 520; line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.guide-content h2 { margin: 72px 0 24px; padding: 0 0 15px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(24px, 2.8vw, 31px); font-weight: 520; line-height: 1.22; letter-spacing: -.025em; scroll-margin-top: 118px; text-wrap: pretty; }
.guide-content h3 { margin: 38px 0 15px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.4; scroll-margin-top: 118px; text-wrap: pretty; }
.guide-content p { margin: 0 0 18px; text-wrap: pretty; }
.guide-content > h1 + p { max-width: 650px; color: #d1d5da; font-size: 18px; line-height: 1.72; }
.guide-content ul, .guide-content ol { margin: 0 0 24px; padding-left: 23px; }
.guide-content li { margin: 7px 0; padding-left: 4px; }
.guide-content li::marker { color: var(--signal); font-family: var(--mono); font-size: .8em; }
.guide-content a { color: #e4b85f; text-decoration-color: rgba(240,184,75,.38); text-underline-offset: 3px; }
.guide-content a:hover { color: var(--signal); text-decoration-color: var(--signal); }
.guide-content strong { color: var(--ink); font-weight: 650; }

.guide-content :not(pre) > code { padding: 2px 5px; border: 1px solid rgba(255,255,255,.07); background: var(--panel-soft); color: #d9dde2; font: .84em/1.5 var(--mono); overflow-wrap: anywhere; }
.code-block { margin: 24px 0 30px; border: 1px solid var(--line); background: rgba(17,20,25,.9); }
.code-head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding-left: 14px; border-bottom: 1px solid var(--line); color: var(--quiet); font: 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.copy-code { align-self: stretch; min-width: 66px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font: 10px/1 var(--sans); cursor: pointer; transition: color .16s ease, background .16s ease; }
.copy-code:hover { background: var(--panel-soft); color: var(--ink); }
.copy-code:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }
.code-block pre { margin: 0; padding: 18px; overflow: auto; }
.code-block code { color: #cbd2dc; font: 12px/1.65 var(--mono); white-space: pre; }

.table-wrap { width: 100%; margin: 24px 0 30px; overflow-x: auto; border: 1px solid var(--line); }
.guide-content table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; line-height: 1.55; }
.guide-content th, .guide-content td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.guide-content tr:last-child td { border-bottom: 0; }
.guide-content th { background: var(--panel-soft); color: var(--ink); font: 10px/1.4 var(--mono); letter-spacing: .06em; }
.guide-content td:first-child { color: #d9dde2; }

@media (max-width: 860px) {
  .guide-layout { grid-template-columns: minmax(0, 720px); gap: 28px; padding: 40px 0 84px; }
  .guide-toc { display: none; }
  .mobile-toc { display: block; position: sticky; top: 90px; z-index: 15; }
}

@media (max-width: 620px) {
  .guide-page .masthead { top: 0; }
  .guide-layout { padding-top: 24px; }
  .mobile-toc { top: 73px; }
  .guide-content { font-size: 15px; line-height: 1.74; }
  .guide-content > h1 { font-size: clamp(34px, 11vw, 46px); }
  .guide-content > h1 + p { font-size: 16px; }
  .guide-content h2 { margin-top: 58px; scroll-margin-top: 145px; }
  .guide-content h3 { scroll-margin-top: 145px; }
  .code-block { margin-inline: -1px; }
  .code-block pre { padding: 15px; }
  .table-wrap { width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .guide-toc a, .mobile-toc a, .mobile-toc summary b, .copy-code { transition-duration: .01ms; }
}