.docs-page { min-width: 0; height: var(--home-workspace-height); max-height: var(--home-workspace-height); display: grid; grid-template-columns: minmax(168px, 22%) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper-raised) 38%, transparent); }
.docs-nav { min-width: 0; min-height: 0; padding: 14px 10px; overflow-y: auto; border-right: 1px solid var(--line); background: rgba(222, 216, 200, .24); }
.docs-nav-group + .docs-nav-group { margin-top: 16px; }
.docs-nav-group-title { margin: 0 6px 4px; color: var(--muted); font-size: var(--text-meta); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.docs-nav-item { display: block; width: 100%; padding: 6px 8px; border: 0; border-left: 2px solid transparent; border-radius: 2px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: var(--text-control); }
.docs-nav-item:hover { background: rgba(23, 23, 19, .045); color: var(--ink); }
.docs-nav-item.is-active { border-left-color: var(--blue); background: rgba(24, 79, 209, .07); color: var(--ink); }
.docs-body { min-width: 0; min-height: 0; padding: 24px 30px; overflow-y: auto; outline: none; }

@media (max-width: 700px) {
  .docs-page { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .docs-nav { display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .docs-nav-group { display: flex; gap: 4px; }
  .docs-nav-group + .docs-nav-group { margin-top: 0; }
  .docs-nav-group-title { display: none; }
  .docs-nav-item { width: auto; white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .docs-nav-item.is-active { border-left-color: transparent; border-bottom-color: var(--blue); }
  .docs-body { padding: 18px 16px; }
}