html,
body {
  background: #000;
  margin: 0;
}

.wbi-lang {
  background-color: #e1001d;
  border-radius: 4px;
  color: #fff;
  font-family: "Tajawal", Apercu, "Helvetica Neue", Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 8px 2px;
  position: fixed;
  left: 18px;
  right: auto;
  text-decoration: none;
  top: 16px;
  z-index: 30;
}

.wbi-lang[lang="ar"] {
  font-size: 22px;
  padding: 4px 8px 5px;
}

html[lang="en"] .wbi-lang {
  left: auto;
  right: 18px;
}

.wbi-lang:hover,
.wbi-lang:focus-visible {
  color: #fff;
  opacity: 0.8;
}

.wbi-home {
  position: fixed;
  top: 12px;
  right: 18px;
  left: auto;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e1001d;
  color: #fff;
  text-decoration: none;
}

.wbi-home svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

html[lang="en"] .wbi-home {
  left: 18px;
  right: auto;
}

.wbi-home:hover,
.wbi-home:focus-visible {
  background: #b80018;
  color: #fff;
}

#wbi a.button-secondary,
#wbi a.closing-button {
  color: #fff;
  text-decoration: none;
}

#wbi .step-footnotes a {
  color: inherit;
}

#wbi .step-nav {
  direction: ltr;
}

html[lang="ar"] .wbi-lang,
html[lang="ar"] #wbi,
html[lang="ar"] #wbi *,
html[lang="ar"] #wbi *::before,
html[lang="ar"] #wbi *::after {
  font-family: "Tajawal", sans-serif;
}

html[lang="ar"] #wbi .heading-style-h1,
html[lang="ar"] #wbi .eyebrow,
html[lang="ar"] #wbi .button-secondary,
html[lang="ar"] #wbi .choice-button,
html[lang="ar"] #wbi .wheel-option-text,
html[lang="ar"] #wbi .split-message,
html[lang="ar"] #wbi .navigation-instruction,
html[lang="ar"] #wbi .closing-copy,
html[lang="ar"] #wbi .step-copy,
html[lang="ar"] #wbi .step-footnotes,
html[lang="ar"] #wbi .font-mono,
html[lang="ar"] #wbi .font-apercu,
html[lang="ar"] #wbi .inline-cta,
html[lang="ar"] #wbi .split-year,
html[lang="ar"] #wbi .choice-prompt,
html[lang="ar"] #wbi .timeline-date,
html[lang="ar"] #wbi .credits {
  letter-spacing: 0;
  text-transform: none;
}

html[lang="ar"] #wbi .heading-style-h1 {
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  font-weight: 800;
  line-height: 1.15;
  max-width: 100%;
}

html[dir="rtl"] #wbi .choice-button {
  padding: 10px 12px 10px 46px;
  text-align: start;
}

html[dir="rtl"] #wbi .choice-checkmark {
  left: 9px;
  right: auto;
}

@media (max-width: 760px) {
  .wbi-lang {
    font-size: 18px;
    left: 12px;
    right: auto;
    top: 12px;
  }

  html[lang="en"] .wbi-lang {
    left: auto;
    right: 12px;
  }

  .wbi-home {
    top: 8px;
    right: 12px;
    left: auto;
    width: 36px;
    height: 36px;
  }

  html[lang="en"] .wbi-home {
    left: 12px;
    right: auto;
  }

  html[lang="ar"] #wbi .caption-panel,
  html[lang="ar"] #wbi .scene-screen .caption-panel,
  html[lang="ar"] #wbi .scene-screen[data-has-options="true"] .caption-panel,
  html[lang="ar"] #wbi .split-copy,
  html[lang="ar"] #wbi .step-copy,
  html[lang="ar"] #wbi .step-copy p {
    text-align: right;
  }
}