/* Shared Codex-4 site chrome. Specificity also covers the late yellow theme. */
html {
  --c4-bg: #0a0b0d;
  --c4-surface: #14161a;
  --c4-raised: #252931;
  --c4-field: #0a0b0d;
  --c4-line: #353a44;
  --c4-ink: #f7f7f4;
  --c4-copy: #d7d9de;
  --c4-muted: #a9afb9;
  --c4-accent: #ffd43b;
  --c4-accent-ink: #101114;
  --c4-accent-text: #ffd43b;
  --c4-radius: 16px;
  --c4-gutter: 24px;
  --c4-gap: 24px;
}
html body { font-family: Inter, "Segoe UI", Arial, sans-serif !important; }
html body header.c4-header[data-global-nav="true"],
html body footer.c4-footer[data-global-footer="true"] {
  background: var(--c4-bg) !important;
  color: var(--c4-copy) !important;
  box-shadow: none !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5;
}
html body header.c4-header[data-global-nav="true"] *,
html body footer.c4-footer[data-global-footer="true"] * { box-sizing: border-box; font-size: 14px; }
html body header.c4-header[data-global-nav="true"] {
  position: sticky; top: 0; z-index: 50;
  border: 0 !important;
  border-bottom: 1px solid var(--c4-line) !important;
  backdrop-filter: none !important;
}
html body header.c4-header[data-global-nav="true"] > div,
html body footer.c4-footer[data-global-footer="true"] > div {
  width: 100%; max-width: 1200px !important; margin: 0 auto;
  padding: 0 24px !important;
}
html body header.c4-header[data-global-nav="true"] > div > div {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 16px;
}
html body header.c4-header[data-global-nav="true"] .c4-brand {
  display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
  color: var(--c4-ink) !important; text-decoration: none;
}
html body header.c4-header[data-global-nav="true"] a.c4-brand > div.c4-brand-mark {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; padding: 2px !important;
  border: 0 !important; border-radius: 9px !important;
  background: var(--c4-accent) !important; box-shadow: none !important;
  transform: rotate(-5deg);
}
html body header.c4-header[data-global-nav="true"] .c4-brand-mark img {
  display: block; width: 32px; height: 32px; border-radius: 7px;
}
html body header.c4-header[data-global-nav="true"] .c4-brand p { margin: 0; }
html body header.c4-header[data-global-nav="true"] .c4-brand p:first-child {
  font-size: 17px !important; font-weight: 800; color: var(--c4-ink) !important;
}
html body header.c4-header[data-global-nav="true"] .c4-brand p + p {
  font-size: 14px !important; color: var(--c4-muted) !important;
}
html body header.c4-header[data-global-nav="true"] nav[aria-label="Primary"] { gap: 2px; }
html body header.c4-header[data-global-nav="true"] .c4-nav-link {
  font-family: inherit; font-size: 15px !important; font-weight: 650;
  line-height: 1.5; color: var(--c4-copy) !important;
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
}
html body header.c4-header[data-global-nav="true"] .c4-nav-link:hover {
  background: var(--c4-surface) !important; color: var(--c4-ink) !important;
}
html body header.c4-header[data-global-nav="true"] .c4-nav-link[aria-current="page"],
html body header.c4-header[data-global-nav="true"] .c4-nav-link.text-white.font-semibold {
  color: var(--c4-accent) !important;
}
html body header.c4-header[data-global-nav="true"] [data-nav-dropdown-panel] > div {
  padding: 8px; background: var(--c4-surface) !important;
  border: 1px solid var(--c4-line) !important; border-radius: var(--c4-radius);
  box-shadow: none !important;
}
html body header.c4-header[data-global-nav="true"] [data-nav-dropdown-panel] a:hover {
  background: var(--c4-raised) !important;
}
html body header.c4-header[data-global-nav="true"] [data-nav-dropdown-panel] a span:first-child {
  font-size: 15px !important; color: inherit !important;
}
html body header.c4-header[data-global-nav="true"] [data-nav-dropdown-panel] a span + span {
  font-size: 14px !important; font-weight: 400; color: var(--c4-muted) !important;
}
html body header.c4-header[data-global-nav="true"] [data-mobile-nav-toggle] {
  width: 44px; height: 44px; flex: none; padding: 0;
  border: 1px solid var(--c4-line); border-radius: 12px;
  background: transparent !important; color: var(--c4-ink) !important;
}
html body header.c4-header[data-global-nav="true"] #mobile-global-nav.c4-mobile-panel {
  width: 100%; margin: 0 0 12px; padding: 12px;
  background: var(--c4-surface) !important;
  border: 1px solid var(--c4-line) !important; border-radius: var(--c4-radius);
  backdrop-filter: none !important; max-height: calc(100dvh - 90px); overflow-y: auto;
}
html body header.c4-header[data-global-nav="true"] .c4-mobile-panel > div { gap: 0; }
html body header.c4-header[data-global-nav="true"] .c4-mobile-panel .c4-nav-link {
  display: block; font-size: 16px !important; padding: 12px 0;
  border-radius: 0; background: transparent !important;
}
html body header.c4-header[data-global-nav="true"] .c4-mobile-panel > div > a,
html body header.c4-header[data-global-nav="true"] .c4-mobile-panel [data-mobile-games] {
  border-bottom: 1px solid var(--c4-line);
}
html body header.c4-header[data-global-nav="true"] .c4-mobile-panel > div > a:last-child { border-bottom: 0; }
html body header.c4-header[data-global-nav="true"] .c4-mobile-panel [data-mobile-games-toggle] {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
html body header.c4-header[data-global-nav="true"] [data-mobile-games-toggle] span { font-size: 16px !important; }
html body header.c4-header[data-global-nav="true"] [data-mobile-games-panel] {
  margin: 0 0 8px 12px; padding-left: 12px; border-color: var(--c4-line) !important;
}
html body header.c4-header[data-global-nav="true"] [data-mobile-games-panel] .c4-nav-link {
  font-size: 14px !important; font-weight: 400;
}
html body footer.c4-footer[data-global-footer="true"] { border-top: 1px solid var(--c4-line) !important; }
html body footer.c4-footer[data-global-footer="true"] > div { padding-top: 40px !important; padding-bottom: 40px !important; }
html body footer.c4-footer[data-global-footer="true"] p {
  font-size: 15px !important; color: var(--c4-copy) !important;
}
html body footer.c4-footer[data-global-footer="true"] #year { font-size: inherit !important; }
html body footer.c4-footer[data-global-footer="true"] .c4-footer-nav a,
html body footer.c4-footer[data-global-footer="true"] .c4-footer-nav + p,
html body footer.c4-footer[data-global-footer="true"] > div > div > p {
  font-size: 14px !important; color: var(--c4-muted) !important;
}
html body footer.c4-footer[data-global-footer="true"] > div > div > p {
  max-width: 520px !important; flex: 1 1 520px;
}
html body footer.c4-footer[data-global-footer="true"] > div > div > div { flex: 1 1 520px; min-width: 0; }
html body footer.c4-footer[data-global-footer="true"] .c4-footer-nav a { text-decoration: none; }
html body footer.c4-footer[data-global-footer="true"] .c4-footer-nav a:hover { color: var(--c4-ink) !important; }
html body header.c4-header[data-global-nav="true"] :focus-visible,
html body footer.c4-footer[data-global-footer="true"] :focus-visible {
  outline: 3px solid var(--c4-accent) !important; outline-offset: 3px;
}
@media (max-width: 639.98px) {
  html body header.c4-header[data-global-nav="true"] > div,
  html body footer.c4-footer[data-global-footer="true"] > div { padding-left: 16px !important; padding-right: 16px !important; }
  html body footer.c4-footer[data-global-footer="true"] > div > div > p,
  html body footer.c4-footer[data-global-footer="true"] > div > div > div { flex: none; width: 100%; }
}

/* Codex-4 landing components. Keep specificity above the late yellow theme. */
html body.landing-page,
html body.c4-page {
  margin: 0;
  background: var(--c4-bg) !important;
  color: var(--c4-copy) !important;
  font-size: 16px;
  line-height: 1.6;
}
html body.landing-page main,
html body.c4-page main,
html body.landing-page main *,
html body.c4-page main * { box-sizing: border-box; min-width: 0; }
html body.landing-page main,
html body.c4-page main { background: var(--c4-bg) !important; }
html body.landing-page main :is(.text-xs, small, .step-pill, [class*="text-[1"]),
html body.c4-page main :is(.text-xs, small, .step-pill, [class*="text-[1"]) {
  font-size: 14px !important;
}
html body.landing-page main > .c4-section,
html body.c4-page main > .c4-section {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 64px 24px !important;
  border: 0 !important; border-bottom: 1px solid var(--c4-line) !important;
  background: var(--c4-bg) !important;
}
html body.landing-page .c4-section > .mx-auto,
html body.c4-page .c4-section > .mx-auto {
  width: 100%; max-width: 1200px !important;
  padding: 0 !important;
}
html body.landing-page main > .hero.c4-section,
html body.c4-page main > .hero.c4-section {
  max-width: none;
  background: radial-gradient(ellipse at top left, rgb(255 212 59 / 0.08), transparent 60%), var(--c4-bg) !important;
}
html body.landing-page .hero-bg,
html body.c4-page .hero-bg { display: none; }
html body.landing-page .hero > .mx-auto,
html body.c4-page .hero > .mx-auto { position: relative; }
html body.landing-page main h1,
html body.c4-page main h1 {
  font-size: clamp(38px, 4.2vw, 54px) !important;
  font-weight: 850; letter-spacing: -2px; line-height: 1.06;
  color: var(--c4-ink) !important;
}
html body.landing-page main h2,
html body.c4-page main h2 {
  font-size: clamp(28px, 2.65vw, 34px) !important;
  font-weight: 800; letter-spacing: -0.8px; line-height: 1.2;
  color: var(--c4-ink) !important;
}
html body.landing-page main :is(h3, h3 a, summary, label),
html body.c4-page main :is(h3, h3 a, summary, label) { color: var(--c4-ink) !important; }
html body.landing-page main h3,
html body.c4-page main h3 { font-size: 20px; line-height: 1.3; font-weight: 800; }
html body.landing-page main :is(p, li, .faq-answer),
html body.c4-page main :is(p, li, .faq-answer) { color: var(--c4-copy) !important; }
html body.landing-page main .c4-eyebrow,
html body.c4-page main .c4-eyebrow {
  font-size: 14px !important; font-weight: 650; color: var(--c4-muted) !important;
}
html body.landing-page main .gradient-text,
html body.c4-page main .gradient-text {
  background: none !important; color: var(--c4-accent) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.landing-page main .c4-accent-bar,
html body.c4-page main .c4-accent-bar { background: var(--c4-accent) !important; }
html body.landing-page main .c4-card,
html body.c4-page main .c4-card {
  padding: 24px !important;
  background: var(--c4-surface) !important;
  border: 1px solid var(--c4-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color 140ms ease;
}
html body.landing-page main .c4-card:hover,
html body.c4-page main .c4-card:hover { border-color: #626975 !important; }
html body.landing-page main .faq-item summary,
html body.c4-page main .faq-item summary { padding: 0; }
html body.landing-page main .faq-answer,
html body.c4-page main .faq-answer { padding: 16px 0 0; }
html body.landing-page main :is(.c4-btn, .btn),
html body.c4-page main :is(.c4-btn, .btn) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; max-width: 100%; padding: 10px 20px !important;
  border: 1px solid var(--c4-line) !important; border-radius: 12px !important;
  background: transparent !important; color: var(--c4-ink) !important;
  font-size: 15px !important; font-weight: 800; line-height: 1.4;
  text-decoration: none; text-align: center; white-space: normal;
  box-shadow: none !important; animation: none !important;
}
html body.landing-page main :is(.c4-btn-primary, .btn-primary),
html body.c4-page main :is(.c4-btn-primary, .btn-primary) {
  background: var(--c4-accent) !important; color: var(--c4-accent-ink) !important;
  border-color: var(--c4-accent) !important;
}
html body.landing-page main :is(.c4-btn, .btn):hover,
html body.c4-page main :is(.c4-btn, .btn):hover { border-color: #626975 !important; }
html body.landing-page main :is(.c4-chip, .filter-btn, .widget-card .rounded-full),
html body.c4-page main :is(.c4-chip, .filter-btn, .widget-card .rounded-full) {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; padding: 6px 12px;
  border: 1px solid var(--c4-line) !important; border-radius: 12px !important;
  background: var(--c4-raised) !important; color: var(--c4-copy) !important;
  font-size: 14px !important; line-height: 1.4; white-space: normal;
  box-shadow: none !important;
}
html body.landing-page main .filter-btn,
html body.c4-page main .filter-btn { min-height: 44px; }
html body.landing-page main :is(.filter-btn-active, .filter-btn[aria-pressed="true"]),
html body.c4-page main :is(.filter-btn-active, .filter-btn[aria-pressed="true"]) {
  background: var(--c4-accent) !important; color: var(--c4-accent-ink) !important;
  border-color: var(--c4-accent) !important;
}
html body.landing-page main .step-pill,
html body.c4-page main .step-pill {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border: 0 !important; border-radius: 6px;
  background: var(--c4-accent) !important; color: var(--c4-accent-ink) !important;
  font-weight: 800; box-shadow: none !important;
}
html body.landing-page main :is(input, select, textarea),
html body.c4-page main :is(input, select, textarea) {
  max-width: 100%; min-height: 44px; font: inherit;
  border: 1px solid var(--c4-line) !important; border-radius: 12px;
  background: var(--c4-bg) !important; color: var(--c4-ink) !important;
}
html body.landing-page main :is(img, iframe),
html body.c4-page main :is(img, iframe) { max-width: 100%; }
html body.landing-page main .widget-preview-frame,
html body.c4-page main .widget-preview-frame {
  background: var(--c4-bg) !important; border-color: var(--c4-line) !important;
}
@media (max-width: 639.98px) {
  html body.landing-page main > .c4-section,
  html body.c4-page main > .c4-section { padding: 40px 16px !important; }
  html body.landing-page main .c4-card,
  html body.c4-page main .c4-card { padding: 20px !important; }
  html body.landing-page main .widget-request-layout > .c4-card,
  html body.c4-page main .widget-request-layout > .c4-card { grid-column: 1 / -1; }
  html body.landing-page main #request-widget > .mx-auto > .c4-card,
  html body.c4-page main #request-widget > .mx-auto > .c4-card {
    display: contents;
  }
  html body.landing-page main .widget-card > .flex:first-child,
  html body.c4-page main .widget-card > .flex:first-child { flex-wrap: wrap; }
}

/* Game marketing pages do not load landing.css. Keep their type and media contained. */
html body.c4-page :is(.text-xs, small, .skip-link) { font-size: 14px !important; }
html body.c4-page main { overflow-wrap: anywhere; }
html body.c4-page main :is(.text-sm, .text-xs) { font-size: 14px !important; }
html body.c4-page main .c4-card:hover { border-color: var(--c4-line) !important; }
html body.c4-page main .lift-card:hover { transform: none; }
html body.c4-page main .shot-frame.c4-card { padding: 0 !important; margin: 0; }
html body.c4-page main .shot-frame img { display: block; width: 100%; height: auto; }
html body.c4-page main .c4-cta-content { padding: 0; background: transparent !important; }
html body.c4-page main .c4-eyebrow { letter-spacing: 0.12em; }
html body.c4-page main .c4-chip { letter-spacing: 0.08em; }
html body.c4-page main .faq-item summary { font-size: 16px !important; }
html body.c4-page main .faq-item summary::after { font-size: 18px; }
html body.c4-page main .c4-btn-secondary {
  background: var(--c4-raised) !important; color: var(--c4-ink) !important;
  border-color: var(--c4-line) !important;
}
html body.c4-page main .c4-preview-meta { flex-wrap: wrap; gap: 12px; }

/* Minecraft and shared editorial templates: keep overrides local to this batch. */
html body.c4-page.c4-minecraft {
  --guide-bg: var(--c4-bg);
  --guide-deep: var(--c4-bg);
  --guide-panel: var(--c4-surface);
  --guide-line: var(--c4-line);
  --guide-ink: var(--c4-ink);
  --guide-accent: var(--c4-accent);
  --guide-accent-soft: var(--c4-accent);
  --guide-radius-panel: 16px;
  --guide-radius-card: 16px;
  --guide-radius-inset: 12px;
}
html body.c4-page:is(.c4-minecraft, .c4-editorial) main {
  font-size: 16px;
  overflow-wrap: anywhere;
}
html body.c4-page:is(.c4-minecraft, .c4-editorial) main :is(
  .guide-kicker, .runbook-step__index, .gallery-thumb-label, .scene-label,
  .mode-image-label, .step-pill, [class*="text-[11px]"], [class*="text-[12px]"]
) { font-size: 14px !important; }
html body.c4-page:is(.c4-minecraft, .c4-editorial) main .c4-frame {
  padding: 0 !important;
  border-radius: 16px !important;
  background: var(--c4-surface) !important;
  box-shadow: none !important;
}
html body.c4-page.c4-minecraft main .guide-hero {
  background: radial-gradient(ellipse at top left, rgb(255 212 59 / 0.08), transparent 60%), var(--c4-bg) !important;
}
html body.c4-page.c4-minecraft main .runbook-step + .runbook-step { margin-top: 24px; }
html body.c4-page.c4-minecraft main .c4-section.c4-card {
  background: var(--c4-surface) !important;
  border: 1px solid var(--c4-line) !important;
  margin-top: 24px;
}
html body.c4-page.c4-minecraft main :is(.hero-shot, .shot-frame, .gallery-thumb, .code-block) {
  background: var(--c4-bg) !important;
  border-color: var(--c4-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
html body.c4-page.c4-minecraft main .gallery-thumb[aria-current="true"] {
  border-color: var(--c4-accent) !important;
}
html body.c4-page:is(.c4-minecraft, .c4-editorial) main pre {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px !important;
}
html body.c4-page:is(.c4-minecraft, .c4-editorial) main table {
  width: 100%;
  table-layout: fixed;
  font-size: 14px !important;
}
@media (max-width: 639.98px) {
  html body.c4-page:is(.c4-minecraft, .c4-editorial) main :is(th, td) { padding: 12px 8px !important; }
  html body.c4-page.c4-minecraft main .ml-\[52px\] { margin-left: 0; }
  html body.c4-page.c4-minecraft main .scene-label { position: static; margin: 8px; }
  html body.c4-page.c4-minecraft main .shot-frame { aspect-ratio: auto; }
  html body.c4-page.c4-minecraft main .shot-frame .gallery-stage-image { aspect-ratio: 16 / 9; height: auto; }
}