.codex-page {
  --cd-ink: #202926;
  --cd-muted: #53625d;
  --cd-green: #245a45;
  --cd-mint: #edf5f0;
  --cd-line: #d5dfd9;
}
.codex-page main { color: var(--cd-ink); background: #fcfdfb; }
.codex-page main *, .codex-page main *::before, .codex-page main *::after { box-sizing: border-box; }
.codex-page main [hidden] { display: none !important; }
.codex-page main :is(h1,h2,h3,p) { margin-top: 0; }
.codex-page main :is(button,input) { font-family: inherit; }
.codex-page main button { cursor: pointer; }
.codex-page main a { text-underline-offset: 4px; }
.codex-page main svg { width: 19px; height: 19px; flex: 0 0 auto; stroke-width: 1.7; }
.codex-page main ::selection { background: #cde6d8; color: #163c2b; }
.codex-page main :is(pre,code,input) { caret-color: var(--blue); }
.cd-shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.cd-hero { padding: 58px 0 0; background: var(--cd-mint); }
.cd-hero-copy { text-align: center; padding-bottom: 38px; }
.codex-page main h1 { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 23px; }
.cd-plus { color: #8a9d93; font-weight: 300; }
.cd-brand { display: inline-flex; align-items: center; gap: 12px; }
.cd-brand img { width: 46px; height: 46px; }
.cd-hero-copy h2 { font-size: 30px; line-height: 1.25; margin-bottom: 17px; }
.cd-hero-copy h2 span { color: var(--cd-green); }
.cd-hero-copy > p { color: var(--cd-muted); font-size: 18px; line-height: 1.65; margin-bottom: 24px; }
.cd-actions { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cd-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 12px 21px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 550; text-decoration: none; transition: background 150ms; }
.cd-button:hover { background: var(--blue-dark); }
.cd-text-link { display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; border: 0; background: transparent; color: var(--blue-dark); font-size: 15px; font-weight: 500; text-decoration: none; }
.cd-text-link:hover { text-decoration: underline; }
.cd-hero-copy > .cd-availability { margin: 17px 0 0; font-size: 12px; }
.cd-availability span { padding-inline: 10px; color: #7d9186; }
.cd-desk { background: #fff; border: 1px solid var(--cd-line); border-bottom: 0; }
.cd-desk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 23px; border-bottom: 1px solid var(--cd-line); }
.cd-desk-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.cd-desk-title > span { font-size: 12px; color: var(--cd-muted); font-weight: 400; }
.cd-demo-tabs { display: flex; gap: 28px; padding-inline: 24px; border-bottom: 1px solid var(--cd-line); }
.cd-demo-tabs button { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--cd-muted); font-size: 13px; white-space: nowrap; }
.cd-demo-tabs button:hover { color: var(--cd-green); }
.cd-demo-tabs button[aria-selected="true"] { color: var(--cd-green); border-bottom-color: var(--cd-green); font-weight: 600; }
.cd-demo-tabs svg { width: 17px; height: 17px; }
.cd-demo-panel { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 323px; }
.cd-code { min-width: 0; padding: 24px 0 22px; background: #f8faf8; border-right: 1px solid var(--cd-line); display: flex; flex-direction: column; }
.cd-file { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 24px; margin-bottom: 22px; font-size: 12px; color: var(--cd-muted); }
.cd-file > span:first-child { display: flex; align-items: center; gap: 8px; }
.cd-file svg { width: 15px; height: 15px; }
.cd-diff-count { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cd-green); }
.cd-code pre { margin: 0 0 18px; overflow-x: auto; padding-block: 2px 7px; font-size: 12px; line-height: 1.9; scrollbar-color: #a8c2b2 #f8faf8; scrollbar-width: thin; }
.cd-code-line { display: block; padding-inline: 20px; min-width: max-content; }
.cd-code-line b { display: inline-block; width: 22px; color: #5f7065; font-weight: 400; user-select: none; }
.cd-code-line em { color: #86578d; font-style: normal; }
.cd-code-line q { color: #296c4a; }
.cd-code-line q::before, .cd-code-line q::after { content: '"'; }
.cd-line-added { background: #e7f1e8; }
.cd-code-note { display: flex; align-items: center; gap: 7px; padding: 0 24px; font-size: 11px; color: var(--cd-muted); margin-top: auto; }
.cd-code-note svg { width: 15px; height: 15px; }
.cd-review { min-width: 0; padding: 18px 26px 22px; }
.cd-command { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e3e9e5; padding-bottom: 11px; margin-bottom: 20px; }
.cd-command > code { color: #235a46; font-size: 13px; overflow-wrap: anywhere; }
.cd-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--cd-muted); }
.cd-icon-button:hover { background: #e7efe9; border-color: #c8d7cd; }
.cd-icon-button svg { width: 16px; height: 16px; }
.cd-review-heading { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 11px; font-size: 16px; line-height: 1.4; }
.cd-review-mark { color: var(--cd-green); display: inline-flex; padding-top: 2px; }
.cd-review > p { margin-bottom: 14px; color: var(--cd-muted); font-size: 13px; line-height: 1.65; }
.cd-evidence { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--cd-muted); }
.cd-severity { background: #fff0d5; color: #79521b; border-radius: 3px; padding: 2px 7px; font-size: 11px; font-weight: 600; }
.cd-next-step { display: flex; align-items: flex-start; gap: 8px; padding-top: 15px; margin-top: 16px; border-top: 1px solid #e3e9e5; color: var(--cd-muted); }
.cd-next-step svg { width: 15px; height: 15px; margin-top: 2px; }
.cd-next-step p { font-size: 12px; margin-bottom: 0; line-height: 1.6; }
.cd-next-step strong { color: var(--cd-ink); font-weight: 600; margin-right: 5px; }
.cd-task h3, .cd-task > p, .cd-task ul { margin-inline: 24px; }
.cd-task h3 { font-size: 20px; margin-bottom: 10px; }
.cd-task > p, .cd-task ul { font-size: 13px; color: var(--cd-muted); }
.cd-task ul { margin-block: 0; padding-left: 18px; line-height: 1.9; }
.cd-check-results { padding: 0; margin: 0; list-style: none; }
.cd-check-results li { display: flex; align-items: center; gap: 9px; font-size: 13px; padding-block: 7px; color: var(--cd-green); }
.cd-check-results .cd-unresolved { color: #865216; }
.cd-check-results svg { width: 16px; height: 16px; }
.cd-flow ol { list-style: none; margin: 0 24px; padding: 0; }
.cd-flow li { padding: 0 0 12px 20px; border-left: 1px solid #9fb9a9; position: relative; }
.cd-flow li::before { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--cd-green); background: #f8faf8; left: -4px; top: 8px; border-radius: 50%; }
.cd-flow li:last-child { border-left-color: transparent; padding-bottom: 0; }
.cd-flow li > span { display: block; font-size: 11px; color: var(--cd-muted); }
.cd-flow code { font-size: 13px; overflow-wrap: anywhere; }
.cd-desk-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--cd-line); padding: 12px 24px; color: var(--cd-muted); font-size: 11px; background: #f3f7f4; }
.cd-desk-footer > span:first-child { display: flex; align-items: center; gap: 7px; color: var(--cd-green); }
.cd-desk-footer svg { width: 15px; height: 15px; }
.cd-integrations { padding-block: 29px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--cd-line); }
.cd-integrations p { color: var(--cd-muted); font-size: 13px; margin-bottom: 0; }
.cd-integrations > div { display: flex; align-items: center; gap: 32px; }
.cd-integrations span { display: inline-flex; gap: 9px; align-items: center; font-size: 14px; font-weight: 500; }
.cd-integrations img { object-fit: contain; }
.cd-section { padding-block: 90px; }
.cd-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; margin-bottom: 43px; }
.cd-section-heading h2, .cd-start h2 { font-size: 42px; line-height: 1.12; font-weight: 600; margin: 0; }
.cd-section-heading > p { max-width: 395px; font-size: 16px; line-height: 1.7; color: var(--cd-muted); margin: 0; }
.cd-lifecycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; padding: 0; list-style: none; margin: 0; }
.cd-lifecycle li { border-top: 1px solid var(--cd-line); padding-top: 21px; }
.cd-lifecycle h3 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
.cd-lifecycle p { color: var(--cd-muted); font-size: 14px; line-height: 1.7; margin-bottom: 22px; }
.cd-lifecycle a { display: inline-flex; align-items: center; gap: 7px; color: var(--cd-green); font-size: 13px; font-weight: 600; text-decoration: none; }
.cd-lifecycle a:hover { text-decoration: underline; }
.cd-lifecycle a svg { width: 16px; height: 16px; }
.cd-directory { padding-block: 80px; background: #f0f4f1; border-block: 1px solid var(--cd-line); }
.cd-directory-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.cd-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cd-filters button { border: 1px solid transparent; border-radius: 4px; padding: 8px 12px; color: var(--cd-muted); background: transparent; font-size: 13px; }
.cd-filters button[aria-pressed="true"] { border-color: #b9cbbf; background: #fff; color: var(--cd-green); }
.cd-filters button:hover { background: #e2ebe5; }
.cd-search { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #a5b9ac; min-height: 38px; min-width: 0; }
.cd-search svg { width: 16px; height: 16px; color: var(--cd-muted); }
.cd-search input { border: 0; background: transparent; width: 180px; max-width: 100%; padding: 7px 0; font-size: 13px; color: var(--cd-ink); }
.cd-search input::placeholder { color: var(--cd-muted); opacity: 1; }
.cd-result-count { color: var(--cd-muted); font-size: 11px; margin-bottom: 14px; overflow-wrap: anywhere; }
.cd-use-cases { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
.cd-use-cases details { border-top: 1px solid #c8d5cc; scroll-margin-top: 90px; }
.cd-use-cases summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; list-style: none; padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 550; line-height: 1.5; }
.cd-use-cases summary > span { display: flex; flex-direction: column; }
.cd-use-cases summary small { order: 1; display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--cd-muted); }
.codex-page main summary::-webkit-details-marker { display: none; }
.cd-use-cases summary svg { width: 17px; height: 17px; color: var(--cd-green); transition: transform 180ms; }
.codex-page main details > summary svg { margin-right: 4px; }
.codex-page main details[open] > summary svg { transform: rotate(45deg); }
.cd-case-body { padding-bottom: 24px; }
.cd-case-body > p { font-size: 14px; color: var(--cd-muted); line-height: 1.75; margin-bottom: 18px; }
.cd-command-list { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.cd-command-list code { font-size: 12px; color: var(--cd-green); overflow-wrap: anywhere; }
.cd-case-body > .cd-text-link { margin-top: 10px; font-size: 13px; }
.cd-directory-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-top: 28px; border-top: 1px solid #c8d5cc; margin-top: 18px; }
.cd-directory-footer p { color: var(--cd-muted); font-size: 12px; max-width: 580px; margin-bottom: 0; }
.cd-directory-footer .cd-text-link { flex-shrink: 0; font-size: 13px; }
.cd-empty { padding: 42px 0; }
.cd-empty h3 { font-size: 22px; margin-bottom: 9px; }
.cd-empty p { color: var(--cd-muted); font-size: 14px; }
.cd-start { display: grid; grid-template-columns: .8fr 1.2fr; gap: 88px; border-bottom: 1px solid var(--cd-line); }
.cd-start h2 { margin-bottom: 22px; }
.cd-start-copy > p { font-size: 16px; line-height: 1.7; color: var(--cd-muted); margin-bottom: 26px; }
.cd-start-copy > .cd-text-link { display: flex; width: fit-content; margin-top: 14px; }
.cd-setup { list-style: none; margin: 0; padding: 0; }
.cd-setup > li { display: flex; gap: 19px; padding-bottom: 26px; }
.cd-setup > li:last-child { padding-bottom: 0; }
.cd-setup > li > span { width: 27px; height: 27px; flex: 0 0 27px; display: flex; align-items: center; justify-content: center; border: 1px solid #bacdc1; border-radius: 50%; color: var(--cd-green); font-size: 12px; }
.cd-setup > li > div { min-width: 0; flex: 1; }
.cd-setup h3 { font-size: 18px; line-height: 1.4; margin-bottom: 7px; }
.cd-setup p { font-size: 13px; color: var(--cd-muted); line-height: 1.7; margin-bottom: 12px; }
.cd-setup p code { overflow-wrap: anywhere; }
.cd-install-command { display: flex; align-items: flex-start; gap: 8px; padding: 15px; background: #edf2ee; border-radius: 4px; }
.cd-install-command pre { flex: 1; min-width: 0; margin: 0; font-size: 11px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 88px; }
.cd-faq > h2 { font-size: 30px; line-height: 1.2; max-width: 300px; }
.cd-faq details { border-top: 1px solid var(--cd-line); }
.cd-faq details:last-child { border-bottom: 1px solid var(--cd-line); }
.cd-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 15px; line-height: 1.6; font-weight: 500; padding-block: 18px; list-style: none; cursor: pointer; }
.cd-faq summary svg { width: 16px; height: 16px; }
.cd-faq details p { font-size: 14px; color: var(--cd-muted); line-height: 1.75; padding-bottom: 14px; }
.cd-faq details a { color: var(--blue-dark); }
.cd-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 4px; background: #202926; color: white; font: 13px/1.5 var(--sans); box-shadow: 0 5px 20px #0002; opacity: 0; pointer-events: none; }
.cd-toast.is-visible { opacity: 1; }
.cd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.codex-page main :is(section[id],details[id]) { scroll-margin-top: 85px; }
@media (max-width: 1000px) {
  .cd-lifecycle { gap: 26px; }
  .cd-start, .cd-faq { gap: 45px; grid-template-columns: .85fr 1.15fr; }
  .cd-demo-panel { grid-template-columns: 1fr 1fr; min-height: 350px; }
  .cd-review { padding-inline: 20px; }
  .cd-section-heading { gap: 35px; }
  .cd-section-heading h2, .cd-start h2 { font-size: 36px; }
  .cd-integrations { flex-direction: column; gap: 15px; }
  .cd-directory-tools { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 720px) {
  .cd-shell { width: calc(100% - 40px); }
  .cd-hero { padding-top: 40px; }
  .codex-page main h1 { gap: 11px; flex-wrap: wrap; font-size: 34px !important; margin-bottom: 22px; }
  .cd-brand { gap: 8px; }
  .cd-brand img { width: 32px; height: 32px; }
  .cd-hero-copy h2 { font-size: 25px; line-height: 1.3; }
  .cd-hero-copy h2 span { display: block; }
  .cd-hero-copy > p { font-size: 16px; }
  .cd-desktop-break { display: none; }
  .cd-actions { gap: 14px; }
  .cd-hero-copy > .cd-availability { font-size: 11px; }
  .cd-availability span { padding-inline: 5px; }
  .cd-desk-toolbar { padding: 13px 15px; }
  .cd-desk-title { font-size: 13px; }
  .cd-desk-title > span { display: none; }
  .cd-demo-tabs { gap: 0; padding: 0; }
  .cd-demo-tabs button { flex: 1 1 0; min-width: 0; justify-content: center; flex-direction: column; gap: 4px; height: 76px; min-height: 76px; padding: 9px 4px; font-size: 12px; line-height: 1.35; white-space: normal; }
  .cd-demo-panel { grid-template-columns: 1fr; min-height: 615px; align-content: start; }
  .cd-code { min-height: 255px; padding-top: 18px; border-right: 0; border-top: 1px solid var(--cd-line); }
  .cd-file { padding-inline: 15px; margin-bottom: 16px; font-size: 11px; }
  .cd-code pre { font-size: 10px; }
  .cd-code-line { padding-inline: 12px; }
  .cd-code-line b { width: 17px; }
  .cd-code-note { padding-inline: 15px; font-size: 10px; }
  .cd-review { grid-row: 1; padding: 14px 17px 22px; min-height: 320px; }
  .cd-command { margin-bottom: 17px; }
  .cd-command > code { font-size: 11px; }
  .cd-review-heading { font-size: 15px; }
  .cd-task h3, .cd-task > p, .cd-task ul { margin-inline: 17px; }
  .cd-task h3 { font-size: 18px; }
  .cd-desk-footer { align-items: flex-start; flex-direction: column; gap: 6px; padding: 12px 15px; font-size: 10px; }
  .cd-integrations { padding-block: 27px; }
  .cd-integrations > div { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .cd-integrations span { gap: 6px; font-size: 12px; }
  .cd-integrations img { width: 18px; height: 18px; }
  .cd-section, .cd-directory { padding-block: 58px; }
  .cd-section-heading { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
  .cd-section-heading h2, .cd-start h2 { font-size: 34px; }
  .cd-section-heading > p { font-size: 15px; }
  .cd-lifecycle { grid-template-columns: 1fr; gap: 28px; }
  .cd-lifecycle h3 { margin-top: 10px; }
  .cd-lifecycle p { margin-bottom: 14px; }
  .cd-use-cases { grid-template-columns: 1fr; }
  .cd-use-cases summary { font-size: 15px; gap: 12px; }
  .cd-filters { gap: 4px; }
  .cd-filters button { font-size: 12px; padding-inline: 10px; }
  .cd-search { width: 100%; }
  .cd-search input { flex: 1; width: 100%; }
  .cd-directory-footer { flex-direction: column; gap: 12px; }
  .cd-start, .cd-faq { grid-template-columns: 1fr; gap: 35px; }
  .cd-faq > h2 { max-width: none; margin-bottom: 0; font-size: 28px; }
  .cd-setup > li { gap: 12px; }
  .cd-install-command { padding: 10px; }
}
@media (max-width: 370px) {
  .cd-demo-panel { min-height: 680px; }
  .codex-page main h1 { font-size: 28px !important; gap: 8px; }
  .cd-brand img { width: 26px; height: 26px; }
  .cd-hero-copy > .cd-availability { max-width: 225px; margin-inline: auto; }
  .cd-code pre { font-size: 9px; }
  .cd-integrations > div { column-gap: 24px; row-gap: 14px; }
  .cd-integrations span { min-width: 95px; }
}
@media (prefers-reduced-motion: reduce) {
  .codex-page main *, .codex-page main *::before { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}