/* One orientation contract for the main and learning shells, including tablets. */
.orientationGuard { display: none; }
.orientationGuardPanel {
  width: min(86vw, 540px);
  padding: 32px 24px;
  border: 1px solid #8cdae9;
  border-radius: 28px;
  background: linear-gradient(135deg, #f6feff, #b4e2ed);
  box-shadow: inset 0 0 24px #fff9, 0 18px 42px #1a678647;
  display: grid;
  justify-items: center;
  gap: 18px;
}
.orientationGuardBrand { font-size: 25px; font-weight: 800; }
.orientationGuardIcon {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 24px;
  background: linear-gradient(145deg, #35b7dc, #156597);
  color: white;
  font-size: 56px;
  line-height: 1;
}
.orientationGuard h2 { font-size: clamp(23px, 5vw, 32px); line-height: 1.3; word-break: keep-all; }
.orientationGuard p { max-width: 340px; font-size: 16px; line-height: 1.5; word-break: keep-all; }
@media (orientation: portrait) {
  html, body { overflow: hidden !important; }
  body > :not(.orientationGuard),
  body > :not(.orientationGuard) * { visibility: hidden !important; }
  body > .orientationGuard {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: radial-gradient(ellipse at 50% 70%, #a3edf0, transparent 65%), #e1eff1;
    color: #0d3552;
    text-align: center;
  }
}