:root {
  --octc-color-primary: #fb8f24;
  --octc-color-primary-hover: #fdac5c;
  --octc-color-bg: #222220;
  --octc-color-bg-alt: #2a2926;
  --octc-color-text: #f2ebe1;
  --octc-color-text-muted: #aca29a;
  --octc-color-border: #3a3833;
  --octc-color-code-bg: #1a1918;
  --octc-color-code-bg-top: #1a1918;
  --octc-color-code-text: #f2ebe1;
}
[data-theme="dark"] {
  --octc-color-primary: #fb8f24;
  --octc-color-primary-hover: #fdac5c;
  --octc-color-bg: #222220;
  --octc-color-bg-alt: #2a2926;
  --octc-color-text: #f2ebe1;
  --octc-color-text-muted: #aca29a;
  --octc-color-border: #3a3833;
  --octc-color-code-bg: #1a1918;
  --octc-color-code-bg-top: #1a1918;
  --octc-color-code-text: #f2ebe1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --octc-color-primary: #fb8f24;
    --octc-color-primary-hover: #fdac5c;
    --octc-color-bg: #222220;
    --octc-color-bg-alt: #2a2926;
    --octc-color-text: #f2ebe1;
    --octc-color-text-muted: #aca29a;
    --octc-color-border: #3a3833;
    --octc-color-code-bg: #1a1918;
    --octc-color-code-bg-top: #1a1918;
    --octc-color-code-text: #f2ebe1;
  }
}
:root {
  --octc-sidebar-width: 260px;
  --octc-header-height: 60px;
  --octc-max-content-width: 960px;
}
:root {
  --octc-font-sans: "IBM Plex Sans", "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
  --octc-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
:root {
  --octc-font-display: Lexend, sans-serif;
}
.header-nav { margin-left: 2rem; }
            .content img { max-width: 100%; height: auto; }
            .theme-toggle, [data-mobile-theme] { display: none; }
            .header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: linear-gradient(90deg, #fb8f24 0 22%, #e0701c 22% 38%, #c4561a 38% 61%, #f2a54a 61% 74%, #a8481a 74% 100%); }
            .nav-link.active, .nav-link.active:hover { background: var(--octc-color-primary); color: var(--octc-color-on-primary); }
            .nav-title { color: var(--octc-color-primary); }
            .content h1, .content h2, .header-title { font-family: var(--octc-font-display); letter-spacing: -0.01em; }
            .content h2 { position: relative; border-bottom: 0; padding-bottom: 0.6rem; }
            .content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 4px; background: linear-gradient(90deg, #fb8f24 0 22%, #e0701c 22% 38%, #c4561a 38% 61%, #f2a54a 61% 74%, #a8481a 74% 100%); }
            .content .ox-steps__item::before { border-radius: 2px; font-weight: 700; }