:root {
  --ov-font: 'Manrope', 'Montserrat', sans-serif;
  --ov-ink: #f5f5f4;
  --ov-muted: #d0d0cc;
  --ov-soft: #a3a39d;
  --ov-accent: #f5f5f4;
  --ov-accent-2: #ebebe8;
  --ov-control-ink: #0a0a0a;
  --ov-sidebar-width: clamp(320px, 28vw, 390px);
  --ov-sidebar-gap: 0.7rem;
  --ov-left-lane-width: calc(var(--ov-sidebar-width) + var(--ov-sidebar-gap));
  --ov-left-center-x: calc(var(--ov-left-lane-width) / 2);
  --ov-left-center-shift: clamp(74px, 5.8vw, 116px);
  --ov-left-anchor-x: calc(var(--ov-left-center-x) - var(--ov-left-center-shift));
  --ov-left-content-width: min(255px, calc(var(--ov-left-lane-width) - 3rem));
  --ov-surface: rgba(12, 12, 12, 0.9);
  --ov-surface-2: rgba(8, 8, 8, 0.9);
  --ov-border: rgba(255, 255, 255, 0.14);
  --ov-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

html,
body {
  font-family: var(--ov-font) !important;
  background: linear-gradient(165deg, #040404 0%, #090909 52%, #101010 100%) !important;
  color: var(--ov-ink);
}

body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}

body::before {
  width: 32rem;
  height: 32rem;
  top: -12rem;
  right: -11rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}

body::after {
  width: 26rem;
  height: 26rem;
  bottom: -9rem;
  left: -9rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}

.background-container {
  background: transparent !important;
  opacity: 1 !important;
  overflow: hidden !important;
  min-height: 100vh;
}

.alphabit-topleft,
.before_docs,
.docs,
.title,
.ftext,
.stext,
.rtext,
.setup,
.sub-section,
.sub-section a,
.text-container,
.docs-container {
  color: var(--ov-muted) !important;
}

.alphabit-topleft {
  top: 0.95rem !important;
  left: var(--ov-left-anchor-x) !important;
  transform: translateX(-50%);
  text-align: center;
  width: var(--ov-left-content-width);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem) !important;
  font-weight: 800 !important;
  z-index: 10;
}

.alphabit-topleft a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  color: var(--ov-ink) !important;
}

.alphabit-topleft a::after {
  content: '';
  width: 1.62rem;
  height: 1.62rem;
  background: url('/assets/images/ai_star_alpha.png') no-repeat center / contain;
  flex: 0 0 auto;
}

.ai-star-logo {
  display: none !important;
}

.before_docs {
  top: 3.95rem !important;
  left: var(--ov-left-anchor-x) !important;
  transform: translateX(-50%);
  width: var(--ov-left-content-width);
  text-align: center;
  color: var(--ov-ink) !important;
  z-index: 10;
}

.docs {
  top: 8.5rem !important;
  left: var(--ov-left-anchor-x) !important;
  transform: translateX(-50%);
  width: var(--ov-left-content-width);
  text-align: center;
  color: var(--ov-ink) !important;
  z-index: 10;
}

.model-docs-toggle {
  display: none;
}

.docsLine,
.endLine,
.endLinee {
  background: rgba(255, 255, 255, 0.14) !important;
}

.docs-container .docsLine {
  width: calc(100% - 0.9rem) !important;
  margin-left: 0.45rem !important;
  margin-right: 0.45rem !important;
}

.docs-container {
  position: absolute !important;
  top: 10.4rem !important;
  left: var(--ov-left-anchor-x) !important;
  transform: translateX(-50%);
  margin: 0 !important;
  width: var(--ov-left-content-width) !important;
  max-width: var(--ov-left-content-width) !important;
  box-sizing: border-box !important;
  max-height: calc(100vh - 11.2rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.setup {
  color: var(--ov-ink) !important;
}

.sub-section {
  color: var(--ov-soft) !important;
}

.sub-section a {
  color: var(--ov-soft) !important;
}

.sub-section:hover a {
  color: #f5f5f4 !important;
}

.rbox {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: var(--ov-left-lane-width) !important;
  width: auto !important;
  max-width: calc(100% - var(--ov-left-lane-width)) !important;
  overflow-x: hidden !important;
  background: var(--ov-surface-2) !important;
  border-left: 1px solid var(--ov-border);
}

.title {
  left: clamp(1.7rem, 4.1vw, 3.1rem) !important;
  color: var(--ov-ink) !important;
}

.rbox > div[style*='margin-left'] {
  margin-left: clamp(1.7rem, 4.1vw, 3.1rem) !important;
  margin-right: clamp(1rem, 3vw, 2rem) !important;
  margin-top: 8.2rem !important;
  margin-bottom: -2.4rem !important;
  max-width: min(860px, calc(100% - 3rem)) !important;
}

.rbox iframe {
  width: 100% !important;
  max-width: 860px !important;
}

.text-container {
  margin-top: 12.4rem !important;
  margin-left: clamp(1.7rem, 4.1vw, 3.1rem) !important;
  margin-right: clamp(1rem, 3vw, 2rem) !important;
  max-width: min(940px, calc(100% - 3rem)) !important;
}

.text-container .stext {
  margin-left: 0 !important;
  margin-top: 1.18rem !important;
  line-height: 1.45 !important;
  font-size: 1.03rem !important;
  font-weight: 400 !important;
}

.text-container .rtext {
  margin-left: 0 !important;
  margin-top: 0.42rem !important;
  margin-bottom: 0.22rem !important;
  font-size: 1rem !important;
}

.text-container .rtext li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
}

.stext a,
.bc {
  color: #f5f5f4 !important;
}

.downloadbtn {
  background: linear-gradient(135deg, var(--ov-accent), var(--ov-accent-2)) !important;
  color: var(--ov-control-ink) !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 999px !important;
  padding: 0.62rem 0.92rem !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35) !important;
}

.downloadbtn a {
  color: var(--ov-control-ink) !important;
}

.code-window,
.codee-window {
  background: #0a0a0a !important;
  border: 1px solid var(--ov-border) !important;
  border-radius: 0.8rem !important;
}

pre,
pre code {
  color: var(--ov-muted) !important;
  background: transparent !important;
}

iframe {
  border-radius: 0.9rem;
  border: 1px solid var(--ov-border);
}

body .language-popup-content,
body .season-popup-content,
body .choice-popup-content {
  background: #0a0a0a !important;
  border: 1px solid var(--ov-border) !important;
  box-shadow: var(--ov-shadow) !important;
}

body .language-popup-content h2,
body .season-popup-content h2,
body .choice-popup-content h2 {
  color: var(--ov-ink) !important;
  font-family: var(--ov-font) !important;
}

body .language-options button,
body .season-options button,
body .choice-options button {
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 0.8rem !important;
  background: linear-gradient(135deg, var(--ov-accent), var(--ov-accent-2)) !important;
  color: var(--ov-control-ink) !important;
  font-weight: 700 !important;
}

body .language-options button:hover,
body .season-options button:hover,
body .choice-options button:hover {
  background: linear-gradient(135deg, #ffffff, #f0f0ee) !important;
}

/* Readability tuning for docs pages (Pedro-style density and hierarchy) */
html,
body {
  font-size: 16.5px !important;
}

.rbox {
  display: block !important;
}

.title {
  top: 0 !important;
  left: clamp(1.7rem, 4.1vw, 3.1rem) !important;
  width: min(100%, 780px) !important;
  max-width: 780px !important;
  margin: 2rem 0 0 !important;
  padding: 0 3rem !important;
  box-sizing: border-box !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
}

.rbox > div[style*='margin-left'] {
  margin: 0 !important;
  margin-left: clamp(1.7rem, 4.1vw, 3.1rem) !important;
  margin-right: clamp(1rem, 3vw, 2rem) !important;
  width: min(100%, 780px) !important;
  max-width: 780px !important;
  padding: 2rem 3rem 0 !important;
  box-sizing: border-box !important;
}

.rbox iframe {
  width: 100% !important;
  max-width: 100% !important;
}

.text-container {
  width: min(100%, 780px) !important;
  max-width: 780px !important;
  margin: 0 !important;
  margin-left: clamp(1.7rem, 4.1vw, 3.1rem) !important;
  margin-right: clamp(1rem, 3vw, 2rem) !important;
  padding: 2rem 3rem 3rem !important;
  box-sizing: border-box !important;
}

.text-container h1 {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 0.5rem !important;
}

.text-container h2,
.text-container .stext {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  margin-top: 2.75rem !important;
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.4rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.text-container h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.5rem !important;
}

.text-container .ftext,
.text-container .stext,
.text-container .rtext,
.text-container p,
.text-container li {
  font-size: 16.5px !important;
  line-height: 1.75 !important;
}

.text-container p,
.text-container .ftext,
.text-container .rtext {
  margin-bottom: 1.1rem !important;
}

.text-container li {
  margin-bottom: 0.6rem !important;
}

.docs-container {
  font-size: 14px !important;
}

.docs-container .docsLine {
  margin-top: 0.5rem !important;
  margin-bottom: 0.3rem !important;
}

.setup {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-top: 0 !important;
}

.sub-section {
  margin-top: 0 !important;
  padding: 5px 14px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.sub-section a,
.sub-section p {
  display: block;
  margin: 0 !important;
}

.sub-section p {
  color: #c67171 !important;
  font-weight: 700 !important;
  border-left: 2px solid #c67171;
  padding-left: 12px;
}

.code-window,
.codee-window {
  background: #1c1c1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 1.25rem 1.5rem !important;
}

pre,
pre code {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

pre {
  margin: 0 !important;
}

.text-container a {
  color: #d38787 !important;
  text-decoration: none;
  text-underline-offset: 3px;
}

.text-container a:hover {
  text-decoration: underline !important;
}

@media (max-width: 980px) {
  .background-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto !important;
  }

  .alphabit-topleft {
    top: 0.62rem !important;
    left: 1rem !important;
    transform: none !important;
    width: auto !important;
    text-align: left !important;
  }

  .before_docs {
    top: 0.82rem !important;
    left: 12.8rem !important;
    transform: none !important;
    width: auto !important;
    text-align: left !important;
  }

  .ai-star-logo {
    top: 0.52rem !important;
    left: auto !important;
    right: 1rem !important;
    transform: none !important;
  }

  .docs {
    top: 5.4rem !important;
    left: 1rem !important;
    transform: none !important;
    width: auto !important;
    text-align: left !important;
    display: none !important;
  }

  .model-docs-toggle {
    position: absolute;
    top: 3.82rem;
    left: 0.58rem;
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(8, 8, 8, 0.98);
    color: var(--ov-ink);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.46rem 0.78rem;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
  }

  .model-docs-toggle-icon,
  .model-docs-toggle-icon::before,
  .model-docs-toggle-icon::after {
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--ov-ink);
    display: block;
    content: '';
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .model-docs-toggle-icon {
    position: relative;
  }

  .model-docs-toggle-icon::before {
    position: absolute;
    top: -4px;
    left: 0;
  }

  .model-docs-toggle-icon::after {
    position: absolute;
    top: 4px;
    left: 0;
  }

  .model-docs-toggle[aria-expanded='true'] .model-docs-toggle-icon {
    background: transparent;
  }

  .model-docs-toggle[aria-expanded='true'] .model-docs-toggle-icon::before {
    transform: translateY(4px) rotate(45deg);
  }

  .model-docs-toggle[aria-expanded='true'] .model-docs-toggle-icon::after {
    transform: translateY(-4px) rotate(-45deg);
  }

  .docs-container {
    position: absolute !important;
    top: 6.62rem !important;
    left: 1rem !important;
    right: 1rem !important;
    transform: translateY(-8px) !important;
    order: 1 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 24;
    transition: max-height 0.3s ease, opacity 0.24s ease, transform 0.24s ease, padding 0.24s ease, border-width 0.24s ease;
    background: transparent !important;
  }

  .docs-container.is-open {
    transform: translateY(0) !important;
    max-height: min(68svh, 540px) !important;
    padding: 0 !important;
    border-width: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    background: transparent !important;
  }

  .rbox {
    position: relative !important;
    order: 2 !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 70vh !important;
    margin-top: 2.6rem !important;
    border-left: 0 !important;
    border-top: 1px solid var(--ov-border);
  }

  .title {
    left: 1rem !important;
    margin-top: 3.4rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: calc(100% - 2rem) !important;
    font-size: clamp(1.85rem, 6.8vw, 2.12rem) !important;
    line-height: 1.15 !important;
    padding: 0 1rem !important;
  }

  .rbox > div[style*='margin-left'] {
    margin: 1rem 1rem 0 !important;
    max-width: none !important;
  }

  .text-container {
    margin: 0 !important;
    max-width: none !important;
    padding: 1.25rem 1rem 2rem !important;
  }

  .text-container h2,
  .text-container .stext {
    font-size: 1.35rem !important;
    margin-top: 2rem !important;
  }

  .text-container h3 {
    font-size: 1.12rem !important;
    margin-top: 1.4rem !important;
  }
}