:root {
  color-scheme: light;
  --bg: #fafdff;
  --bg-grad: #f3f8ff;
  --surface: #ffffff;
  --surface-2: #f3f7fc;
  --line: rgba(33, 82, 145, .12);
  --line-strong: rgba(33, 82, 145, .22);
  --text: #0b2148;
  --muted: #536d95;
  --muted-dim: #7890b0;
  --accent: #1769d8;
  --accent-soft: rgba(23, 105, 216, .1);
  --accent-line: rgba(23, 105, 216, .3);
  --good: #17956a;
  --good-soft: rgba(23, 149, 106, .12);
  --code-str: #79c6ff;
  --code-var: #a8c9ff;
  --code-com: #7890b0;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #061123;
  --bg-grad: #08162b;
  --surface: #0a1b38;
  --surface-2: #0e2445;
  --line: rgba(151, 186, 239, .15);
  --line-strong: rgba(151, 186, 239, .25);
  --text: #eef5ff;
  --muted: #abc0de;
  --muted-dim: #7892b8;
  --accent: #6aa6ed;
  --accent-soft: rgba(106, 166, 237, .12);
  --accent-line: rgba(106, 166, 237, .35);
  --good: #66c59a;
  --good-soft: rgba(102, 197, 154, .12);
}

body, html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text) !important; }
body::before { display: none !important; }
.docs-visual-shell { width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 88px !important; overflow: hidden; }
.docs-visual-shell > .visual-scene { height: 560px; border-radius: 0 !important; }
.docs-visual-shell > .visual-scene::after { background: linear-gradient(90deg, rgba(250,253,255,.99) 0%, rgba(250,253,255,.91) 42%, rgba(250,253,255,.22) 70%, rgba(250,253,255,.04) 100%) !important; }
html[data-theme="dark"] .docs-visual-shell > .visual-scene::after { background: linear-gradient(90deg, rgba(6,17,35,.99) 0%, rgba(6,17,35,.91) 42%, rgba(6,17,35,.22) 70%, rgba(6,17,35,.04) 100%) !important; }
.docs-visual-shell > .visual-scene img { object-fit: cover; object-position: 72% center; }
.docs-visual-shell > :not(.visual-scene) { position: relative; z-index: 1; width: min(1120px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.docs-visual-shell .top { min-height: 300px; padding-top: 72px !important; margin-bottom: 18px; align-items: flex-start; }
.docs-visual-shell .top > div:first-child { max-width: 630px; }
.docs-visual-shell .top h1 { max-width: 650px; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.045em; }
.docs-visual-shell .lede { max-width: 58ch; font-size: 17px; }
.doc-links { margin-top: 0; }
.docs-visual-shell .check {
  width: min(760px, calc(100% - 40px)) !important;
  max-width: 760px;
  /* Align the key field with the left edge of the navigation buttons. */
  margin: 24px 0 72px max(20px, calc((100% - 1120px) / 2)) !important;
}
.section, .switcher, footer { width: min(980px, calc(100% - 40px)) !important; }
.switcher { margin-top: 56px !important; background: var(--surface) !important; border-color: var(--line) !important; box-shadow: 0 30px 76px -58px rgba(20, 62, 118, .35) !important; }
.switcher::before { display: none; }
.tab, .guide, .step, .recommend, .codebar, .pill, .lang, .copy { background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--muted) !important; }
.tab.active { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; box-shadow: inset 0 0 0 1px var(--accent-line) !important; }
.guide { background: var(--surface-2) !important; }
.cmd { background: #07152d !important; border-color: var(--line) !important; }
.cmdbar { background: #0c2141 !important; }
.cmd pre { color: #e7f0ff !important; }
.primary, .switcher-download { background: var(--accent) !important; color: #fff !important; }
.secondary-downloads { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.secondary-downloads > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; }
.secondary-downloads .recommend { margin-top: 14px; }
.page-theme-toggle { top: 20px !important; right: 20px !important; }

/* Documentation surfaces use the same soft glass geometry as the landing. */
.docs-visual-shell .top .lang,
.docs-visual-shell .top .theme-toggle,
.docs-visual-shell .top .page-theme-toggle { border-radius: 999px !important; }
.docs-visual-shell .top .lang { background: rgba(255,255,255,.76) !important; backdrop-filter: blur(14px); }
.check, .switcher, .guide, .recommend, .cmd, .codebar { border-radius: 26px !important; overflow: hidden; }
.step, .tab, .pill, .copy, .lang { border-radius: 16px !important; }
.cmdbar { border-radius: 22px 22px 0 0 !important; }
html[data-theme="dark"] .docs-visual-shell .top .lang { background: rgba(10,28,57,.82) !important; }
html[data-theme="dark"] .switcher, html[data-theme="dark"] .guide,
html[data-theme="dark"] .recommend, html[data-theme="dark"] .step { background: rgba(10,28,57,.78) !important; }
html[data-theme="dark"] .cmd { background: #07152d !important; }
html[data-theme="dark"] img[src$="codexmy-mark.svg"] { content: url("/codexmy-mark-dark.svg") !important; }

@media (max-width: 820px) {
  .docs-visual-shell > .visual-scene { height: 510px; opacity: .48; }
  .docs-visual-shell > .visual-scene img { width: 165%; left: 20%; object-position: 78% center; }
  .docs-visual-shell .top { min-height: 260px; padding-top: 68px !important; }
  .docs-visual-shell .top h1 { font-size: 40px; }
  .docs-visual-shell .check {
    width: min(760px, calc(100% - 28px)) !important;
    margin: 24px 14px 52px !important;
  }
  .tabs { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 560px) {
  .docs-visual-shell > :not(.visual-scene), .section, .switcher, footer { width: min(100% - 28px, 980px) !important; }
  .docs-visual-shell .top h1 { font-size: 34px; }
  .tabs { grid-template-columns: 1fr !important; }
  .download-group { grid-template-columns: 1fr !important; }
}

/* Keep the documentation controls together and line up all primary content. */
.doc-page-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-page-controls .lang { display: inline-grid; }
.doc-page-controls .theme-toggle { position: static !important; margin: 0 !important; }
.docs-visual-shell .top { margin-bottom: 0 !important; }
.docs-visual-shell .check {
  width: min(760px, calc(100% - 40px)) !important;
  margin: 4px auto 44px !important;
}
.docs-visual-shell .section {
  width: min(760px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding-top: 34px !important;
}
.docs-visual-shell .section + .switcher,
.docs-visual-shell footer { margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 820px) {
  .doc-page-controls { top: 14px; right: 14px; }
  .docs-visual-shell .check,
  .docs-visual-shell .section { width: min(760px, calc(100% - 28px)) !important; }
}

/* Compact hero: the product intro, key check and connection details are one unit. */
.docs-visual-shell > .visual-scene { height: 470px; }
.docs-visual-shell .top {
  min-height: 0 !important;
  padding-top: 72px !important;
}
.docs-visual-shell .top h1 { margin: 16px 0 8px; }
.docs-visual-shell .check { margin-top: 12px !important; margin-bottom: 28px !important; }
.docs-visual-shell .section {
  padding-top: 28px !important;
  padding-bottom: 38px;
  border-top-color: var(--line) !important;
}
@media (max-width: 820px) {
  .docs-visual-shell > .visual-scene { height: 440px; }
  .docs-visual-shell .top { padding-top: 68px !important; }
}

/* The photo belongs only to the introduction, never beneath the connection details. */
.docs-visual-shell { overflow: visible !important; }
.docs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100% !important;
  margin: 0 !important;
  min-height: 470px;
  padding-bottom: 1px;
}
.docs-hero > .visual-scene {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  z-index: 0 !important;
}
.docs-hero > :not(.visual-scene) {
  position: relative !important;
  z-index: 1 !important;
}
.docs-hero .doc-page-controls {
  position: fixed !important;
}
.docs-hero .top,
.docs-hero .check {
  width: min(760px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.docs-hero .top { margin-bottom: 0 !important; }
.docs-hero .check { margin-bottom: 0 !important; }
.docs-visual-shell > .section {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
@media (max-width: 820px) {
  .docs-hero { min-height: 440px; }
  .docs-hero .top,
  .docs-hero .check { width: min(760px, calc(100% - 28px)) !important; }
}

/* Final layout: keep the Base URL section in its original position and move the intro up to it. */
.docs-hero { min-height: 0 !important; padding-bottom: 0 !important; }
.docs-hero > .visual-scene { height: 560px !important; }
.docs-hero .top {
  min-height: 300px !important;
  padding-top: 72px !important;
  margin-bottom: 0 !important;
}
.docs-hero .check { margin-top: 12px !important; margin-bottom: 72px !important; }
.docs-visual-shell > .section {
  width: min(980px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding-top: 34px !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}
@media (max-width: 820px) {
  .docs-hero > .visual-scene { height: 510px !important; }
  .docs-hero .top { min-height: 260px !important; padding-top: 68px !important; }
  .docs-hero .check { margin-top: 24px !important; margin-bottom: 52px !important; }
  .docs-visual-shell > .section { width: min(980px, calc(100% - 28px)) !important; }
}

/* Shared left edge: key check, Base URL and models start on exactly one line. */
.docs-hero .top,
.docs-hero .check,
.docs-visual-shell > .section {
  width: min(980px, calc(100% - 40px)) !important;
}
.docs-hero .check { max-width: none !important; }
@media (max-width: 820px) {
  .docs-hero .top,
  .docs-hero .check,
  .docs-visual-shell > .section { width: min(980px, calc(100% - 28px)) !important; }
}

/* Controls must stay above the illustration, with no pseudo-element collision. */
.doc-page-controls {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 2147483647 !important;
  isolation: isolate;
  overflow: visible !important;
}
.doc-page-controls .lang,
.doc-page-controls .theme-toggle {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  transform: none !important;
}
.doc-page-controls .lang button { position: relative; z-index: 2; }

/* Key check is one rectangular control: no detached rounded field or button. */
.docs-hero .check {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
}
.docs-hero .check .field { min-width: 0; }
.docs-hero .check input {
  height: 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.docs-hero .check .primary {
  height: 48px !important;
  border: 0 !important;
  border-left: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 560px) {
  .doc-page-controls { top: 10px !important; right: 10px !important; gap: 6px; }
  .docs-hero .check { grid-template-columns: 1fr !important; }
  .docs-hero .check .primary { border-left: 0 !important; border-top: 1px solid var(--line-strong) !important; }
}