.docs-main { min-height: calc(100vh - 192px); }
.docs-nav-label { margin-left: 12px; color: var(--mist); font: .68rem var(--mono); }
.docs-hero { max-width: 820px; padding-block: 96px 70px; }
.docs-hero h1 { font-size: clamp(3rem, 7vw, 5.4rem); }
.docs-hero > p:last-child { max-width: 700px; margin: 28px 0 0; color: var(--mist); font-size: 1.08rem; }
.docs-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 120px; }
.docs-card { min-height: 290px; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(27,27,38,.94), rgba(18,18,27,.96)); }
.docs-card .index { margin-bottom: 44px; }
.docs-card h2 { margin: 0 0 12px; font-size: 1.35rem; }
.docs-card p { margin: 0 0 26px; color: var(--mist); font-size: .9rem; }
.docs-card a { width: fit-content; margin-top: auto; color: var(--ember); font: 650 .76rem var(--mono); }
.docs-card a:hover { color: #ffbd83; }

.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: center; gap: clamp(46px, 8vw, 100px); padding-block: 78px 130px; }
.docs-sidebar { align-self: start; position: sticky; top: 104px; }
.docs-sidebar > a { display: inline-block; margin-bottom: 26px; color: var(--ember); font: 650 .72rem var(--mono); }
.docs-sidebar strong { display: block; margin-bottom: 12px; color: var(--mist); font: 600 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.docs-sidebar nav { display: grid; gap: 7px; }
.docs-sidebar nav a { min-height: 44px; display: flex; align-items: center; padding: 0 10px; border-radius: 7px; color: var(--mist); font-size: .82rem; }
.docs-sidebar nav a:hover { color: var(--moon); background: rgba(255,255,255,.035); }
.docs-sidebar nav a[aria-current='page'] { color: var(--moon); background: var(--panel-2); }

.docs-content { min-width: 0; }
.docs-content header { padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.docs-content h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
.docs-content header > p:last-child { max-width: 690px; margin: 24px 0 0; color: var(--mist); font-size: 1.08rem; }
.docs-content section { padding-top: 58px; scroll-margin-top: 96px; }
.docs-content h2 { margin: 0 0 18px; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.16; letter-spacing: -.035em; }
.docs-content h3 { margin: 34px 0 10px; font-size: 1.05rem; }
.docs-content p, .docs-content li { color: var(--mist); }
.docs-content p { margin: 0 0 18px; }
.docs-content ul, .docs-content ol { display: grid; gap: 9px; margin: 18px 0 24px; padding-left: 1.35rem; }
.docs-content strong { color: var(--moon); }
.docs-content a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.docs-content code { color: var(--moon); font: .86em var(--mono); }
.docs-content pre { margin: 22px 0; padding: 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: #101016; color: var(--moon); font: .78rem/1.8 var(--mono); }
.docs-content pre code { color: inherit; font: inherit; }
.docs-note { margin: 26px 0; padding: 20px 22px; border: 1px solid rgba(242,163,94,.3); border-radius: 10px; background: rgba(242,163,94,.055); }
.docs-note strong { display: block; margin-bottom: 5px; }
.docs-note p { margin: 0; }
.docs-table-wrap { margin: 24px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.docs-content table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.docs-content th, .docs-content td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.docs-content tr:last-child td { border-bottom: 0; }
.docs-content th { color: var(--moon); background: var(--panel); font: 650 .7rem var(--mono); }
.docs-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-top: 70px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.docs-next p { margin: 0; }
.docs-next a { white-space: nowrap; }

@media (max-width: 860px) {
  .docs-card-grid { grid-template-columns: 1fr; }
  .docs-card { min-height: 230px; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; }
  .docs-sidebar nav { grid-template-columns: repeat(3, 1fr); }
  .docs-sidebar nav a { justify-content: center; text-align: center; }
}
@media (max-width: 620px) {
  .docs-nav-label { display: none; }
  .docs-hero { padding-block: 66px 54px; }
  .docs-card-grid { padding-bottom: 90px; }
  .docs-card { min-height: 220px; padding: 26px; }
  .docs-card .index { margin-bottom: 30px; }
  .docs-layout { gap: 44px; padding-block: 54px 90px; }
  .docs-sidebar nav { grid-template-columns: 1fr; }
  .docs-sidebar nav a { justify-content: flex-start; }
  .docs-content header { padding-bottom: 38px; }
  .docs-content section { padding-top: 48px; }
  .docs-content pre { margin-inline: -4px; padding: 18px; font-size: .72rem; }
  .docs-next { grid-template-columns: 1fr; }
}