:root {
  --mrn-transition-dark: #05051a;
  --mrn-transition-light: #f7f8fc;
}

html.mrn-is-loading,
html.mrn-is-loading body {
  overflow: hidden !important;
}

html.mrn-is-loading .tm-page {
  visibility: hidden !important;
  opacity: 0 !important;
}

.mrn-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  visibility: hidden;
  overflow: hidden;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: var(--mrn-transition-dark);
}

html.theme-light .mrn-loader {
  background: var(--mrn-transition-light);
}

.mrn-loader.mrn-loader--active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mrn-loader__target {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--mrn-transition-dark);
}

html.theme-light .mrn-loader__target {
  background: var(--mrn-transition-light);
}

.mrn-loader__logo {
  display: none;
  width: clamp(250px, 31vw, 520px);
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.08));
}

html.theme-dark .mrn-loader__logo--on-dark,
html.theme-light .mrn-loader__logo--on-light {
  display: block;
}

.mrn-loader__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 680px) {
  .mrn-loader__logo {
    width: min(72vw, 360px);
  }
}