:root {
  --brand-primary: #444444;
  --brand-bg: #000000;
  --brand-text: #ffffff;
  --brand-button: #ffffff;
  --brand-button-text: #000000;
  --font-th: "Mitr", sans-serif;
  --font-en: Inter, "Mitr", sans-serif;
}


/* Mitr for Thai — font stack lets Inter handle EN, Mitr handles Thai glyphs */
#pwb-body-wrap,
#pwb-loading-wrap {
  font-family: var(--font-en);
}

#pwb-body-wrap *:not(pre):not(code),
#pwb-loading-wrap *:not(pre):not(code),
#pwb-body-wrap font[face],
#pwb-loading-wrap font[face] {
  font-family: var(--font-en) !important;
}

html.aii-lang-th #pwb-body-wrap,
html.aii-lang-th #pwb-loading-wrap,
html[lang="th"] #pwb-body-wrap,
html[lang="th"] #pwb-loading-wrap {
  font-family: var(--font-th);
}

html.aii-lang-th #pwb-body-wrap *:not(pre):not(code),
html.aii-lang-th #pwb-loading-wrap *:not(pre):not(code),
html.aii-lang-th #pwb-body-wrap font[face],
html.aii-lang-th #pwb-loading-wrap font[face],
html[lang="th"] #pwb-body-wrap *:not(pre):not(code),
html[lang="th"] #pwb-loading-wrap *:not(pre):not(code),
html[lang="th"] #pwb-body-wrap font[face],
html[lang="th"] #pwb-loading-wrap font[face] {
  font-family: var(--font-th) !important;
}

html[lang="th"] pre,
html[lang="th"] pre *,
html[lang="th"] code,
html[lang="th"] code * {
  font-family: "Fira Code", monospace !important;
}

#ip9j,
.pwb-background#ip9j {
  background: var(--brand-bg) !important;
}

img[src*="aii-os-logo"],
#i335f-5,
#i335f-5-2,
#i335f-5-4,
#i335f-5-4-2,
#i335f-6,
#ixe4zkj {
  background: transparent !important;
  object-fit: contain;
  max-height: 40px;
  width: auto;
}

#iv6dna-6,
#iv6dna-6-2,
#iv6dna-6-4,
#iv6dna-6-4-2,
#iv6dna {
  background: transparent !important;
}

#ixe4zkj {
  max-height: 56px;
}

#ip9j,
.pwb-background#ip9j {
  background: #000 !important;
}

#iwq9.pwb-scene,
.pwb-scene#iwq9 {
  display: block !important;
  width: 100%;
  height: 100%;
}

.pwb-scene > canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

div#pwb-loading-wrap.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Keep the page content invisible from the very first paint until JS marks it
   ready (pw-ready). This kills the "flash" of unstyled/overlapping sections
   even before local-boot.js runs. The black loader sits on top meanwhile. */
#pwb-body-wrap {
  opacity: 0;
  transition: opacity 0.4s ease;
}

#pwb-body-wrap.pw-ready {
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Until the engine finishes laying out, keep nav mega-menu dropdowns hidden
   so they don't flash open during the initial load. */
#pwb-body-wrap:not(.pw-ready) .pwb-relative-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

html[lang="th"] .aii-lang-toggle {
  font-family: var(--font-th);
}

.aii-lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: neuehaasdisplayroman, system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
  user-select: none;
}

.aii-lang-toggle button {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 4px 2px;
  font: inherit;
}

.aii-lang-toggle button.is-active {
  color: #fff;
  font-weight: 600;
}

.aii-lang-toggle .aii-lang-sep {
  color: rgba(255, 255, 255, 0.35);
}

.aii-lang-toggle--fixed {
  position: fixed;
  top: 18px;
  right: 80px;
  z-index: 2147483646;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  .aii-lang-toggle--fixed {
    top: 12px;
    right: 64px;
  }
}

#ijxmk22 {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}