/* Earth / BlueMap — visual overrides kept separate from the BlueMap build. */
@font-face {
  font-family: "Earth Rubik";
  src: url("./earth/rubik-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Earth Rubik";
  src: url("./earth/rubik-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Earth Rubik";
  src: url("./earth/rubik-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root,
:root #app,
:root #app.theme-light {
  font-family: "Earth Rubik", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  --earth-paper: #ede5cf;
  --earth-ink: #3a3526;
  --earth-green: #285246;
  --earth-gold: #d7ba62;
  --earth-wood: #594933;
  --earth-line: #c9b88e;
  --earth-inset: #f5e8be;
  --earth-shadow: #10291d3b;
  --theme-bg: #ede5cf;
  --theme-bg-hover: #e0d2af;
  --theme-bg-light: #c9b88e;
  --theme-fg: #3a3526;
  --theme-fg-light: #6b5c3e;
  --theme-switch-button-on: #285246;
  --theme-stars-day: #816644;
  --theme-moon-day: #a97719;
  --theme-stars-night: #f7e9b9;
  --theme-moon-night: #d7ba62;
  color-scheme: light;
}
:root #app.theme-dark {
  --earth-paper: #233f34;
  --earth-ink: #f1e6c8;
  --earth-line: #5f7158;
  --earth-inset: #61715b;
  --theme-bg: #233f34;
  --theme-bg-hover: #365243;
  --theme-bg-light: #61715b;
  --theme-fg: #f1e6c8;
  --theme-fg-light: #d0c4a2;
  --theme-switch-button-on: #d7ba62;
  color-scheme: dark;
}
:root #app.theme-contrast {
  --earth-paper: #122b23;
  --earth-ink: #fff8df;
  --earth-line: #d7ba62;
  --earth-inset: #d7ba62;
  --theme-bg: #122b23;
  --theme-bg-hover: #254e3c;
  --theme-bg-light: #8c7f54;
  --theme-fg: #fff8df;
  --theme-fg-light: #fff8df;
  --theme-switch-button-on: #f5d77e;
  color-scheme: dark;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Earth Rubik", Arial, sans-serif;
  background: #142c25;
}
body { direction: rtl; }
#app { direction: rtl; line-height: 1.55; }
/* World geometry, compass orientation and numeric axes must never be mirrored. */
#map-container,
.position-input,
.number-input,
.compass,
#ff-mobile-controls,
.side-menu input[type="range"],
.side-menu .switch {
  direction: ltr;
}
#map-container .bm-marker-popup,
#map-container .bm-marker-labelpopup,
#map-container .bm-marker-poi-label { direction: rtl; text-align: start; }
#app input,
#app button { font-family: inherit; }
#app h1,
#app h2,
#app h3,
#app h4 { text-align: start; font-weight: 700; line-height: 1.5; }
#app h1,
#app h2 { padding-left: 0; padding-right: .5em; }
#app a { text-underline-offset: 3px; }
#app :is(a, button, input, [role="button"], [tabindex]):focus-visible,
#earth-brand:focus-visible {
  outline: 3px solid #b58222;
  outline-offset: 3px;
}
#app ::selection { background: #d7ba62; color: #233f34; }

/* The favicon globe is the consistent brand mark throughout the map. */
#earth-brand {
  position: fixed;
  z-index: 10001;
  top: 16px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 270px;
  min-height: 76px;
  box-sizing: border-box;
  padding: 7px 14px;
  direction: rtl;
  text-decoration: none;
  color: #f7eacd;
  background: #285246;
  background-image: linear-gradient(120deg, #ffffff08, transparent 50%);
  border: 3px solid #594933;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #b9a26a, 0 4px 0 #342e22, 0 9px 22px #10291d30;
  pointer-events: auto;
}
#earth-brand .earth-brand-crest {
  width: 56px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 1px #15271f50);
}
#earth-brand .earth-brand-copy { display: flex; flex-direction: column; gap: 5px; }
#earth-brand .earth-brand-copy strong {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.65px;
}
#earth-brand .earth-brand-copy span {
  color: #dfcea2;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}

#earth-home-link {
  position: fixed;
  z-index: 9999;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 16px;
  border: 2px solid #594933;
  border-radius: 4px;
  background: #d7ba62;
  color: #233f34;
  box-shadow: inset 0 0 0 1px #f5e8be, 0 3px 0 #332d23a8;
  font: 500 14px "Earth Rubik", Arial, sans-serif;
  text-decoration: none;
  direction: rtl;
}
#earth-home-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#earth-home-link:hover { background: #e6cf87; }
#earth-home-link:focus-visible { outline: 3px solid #f5e8be; outline-offset: 4px; }

/* Right-to-left toolbar. The coordinates retain their natural x / y / z order. */
.control-bar {
  top: 18px;
  right: 18px;
  left: auto;
  width: calc(100% - 328px);
  height: 44px;
  margin: 0;
  gap: 4px;
  align-items: stretch;
  direction: rtl;
  filter: none;
}
.control-bar > :not(:first-child) { border-left: 0; }
.control-bar .space { width: 5px; min-width: 0; }
.control-bar .space.greedy { flex-grow: 1; }
.control-bar .pos-input { width: 220px; max-width: 260px; min-width: 160px; }
.svg-button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: 2px solid #594933;
  border-radius: 4px;
  background: var(--theme-bg);
  box-shadow: inset 0 0 0 1px var(--earth-inset), 0 3px 0 #332d23a8;
  transition: background-color .15s, box-shadow .15s;
}
.svg-button svg { width: 27px; height: 27px; fill: var(--theme-fg); }
.svg-button:hover { background: var(--theme-bg-hover); box-shadow: inset 0 0 0 1px var(--earth-inset), 0 3px 0 #332d23; }
.svg-button.active { background: #d7ba62; color: #233f34; }
.svg-button.active svg { fill: #233f34; }
.svg-button:active { background: #c7af77; color: #233f34; }
.svg-button:active svg { fill: #233f34; }
.control-bar > .menu-button { background: #285246; border-color: #443c2c; }
.control-bar > .menu-button svg { fill: #f3e3b4; }
.control-bar > .menu-button:hover { background: #366453; }
.controls-switch { gap: 3px; }
.compass svg .north { fill: #aa4d33; }
.compass svg .south { fill: var(--theme-fg-light); }
.day-night-switch svg { fill: var(--theme-moon-day); }
.position-input {
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid #594933 !important;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--earth-inset), 0 3px 0 #332d23a8;
  background: var(--theme-bg);
  flex-shrink: 1;
}
.position-input > * { min-width: 0; }
.number-input { display: flex; align-items: center; min-height: 40px; }
.number-input label { display: flex; align-items: center; width: 100%; }
.number-input .label { width: auto; padding: 0 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.number-input input { min-width: 0; width: 100%; padding-right: 5px; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Parchment drawer with the same wood and gold framing as the Earth website. */
.side-menu {
  top: 16px;
  right: 16px;
  left: auto;
  width: 352px;
  max-width: calc(100% - 32px);
  height: calc(100% - 32px);
  height: calc(100dvh - 32px);
  box-sizing: border-box;
  border: 3px solid #594933;
  border-radius: 5px;
  background: var(--earth-paper);
  background-image: radial-gradient(#6f59260c .7px, transparent .7px);
  background-size: 5px 5px;
  box-shadow: inset 0 0 0 2px var(--earth-inset), 0 4px 0 #332d23, -8px 10px 30px #10291d30;
  filter: none;
  direction: rtl;
  text-align: start;
}
.side-menu-enter-active,
.side-menu-leave-active { transition: opacity .2s ease, transform .2s ease; }
.side-menu-enter-from,
.side-menu-leave-to { opacity: 0; transform: translateX(18px); pointer-events: none; }
.side-menu > .title {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 66px;
  padding: 10px 60px;
  line-height: 1.25;
  font-size: 17px;
  font-weight: 700;
  color: #f6e9c6;
  background: #285246;
  border-bottom: 4px solid #594933;
  box-shadow: inset 0 0 0 2px #b9a26a;
}
.side-menu > .menu-button {
  top: 9px;
  right: 9px;
  left: auto;
  margin: 0;
  min-width: 42px;
  min-height: 42px;
  background: #e8d7a5;
}
.side-menu > .menu-button svg { fill: #3c3a29; }
.side-menu > .menu-button.full-close { right: auto; left: 9px; }
.side-menu > .menu-button.close.back svg { transform: translate(-50%, -50%) scaleX(-1); }
.side-menu > .content {
  box-sizing: border-box;
  height: calc(100% - 66px);
  padding: 16px 14px 22px;
  scrollbar-width: thin;
  scrollbar-color: #a89362 var(--earth-paper);
  overscroll-behavior: contain;
}
.side-menu > .content hr { margin: 15px 3px; border-bottom: 1px solid var(--earth-line); }
.side-menu .simple-button,
.side-menu .switch-button,
.side-menu .map-button {
  box-sizing: border-box;
  min-height: 45px;
  height: auto;
  margin-bottom: 5px;
  padding: 8px 12px;
  line-height: 1.8;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s, border-color .15s;
}
.side-menu .simple-button:hover,
.side-menu .switch-button:hover,
.side-menu .map-button:hover {
  border-color: var(--earth-line);
  background-color: var(--theme-bg-hover);
}
.side-menu .simple-button.active,
.side-menu .map-button.selected {
  color: #f6e9c6;
  background: #285246;
  border-color: #594933;
  box-shadow: inset 0 0 0 1px #b9a26a;
}
.side-menu .map-button.selected .id { color: #e4d19e; }
.side-menu .simple-button > .submenu-icon { width: 26px; height: 26px; margin: 0 5px 0 -4px; }
.side-menu .simple-button > .submenu-icon > svg { transform: scale(-.75, .75); }
.side-menu .simple-button.active > .submenu-icon > svg { fill: #e4d19e; }
.side-menu .group {
  margin: 26px 0 18px;
  padding-top: 14px;
  border: 1px solid var(--earth-line);
  border-radius: 3px;
}
.side-menu .group > .title {
  top: -12px;
  right: 9px;
  font-size: 13px;
  line-height: 22px;
  font-weight: 700;
  color: var(--theme-fg);
  background: var(--earth-paper);
}
.side-menu .group > .content { max-height: 270px; padding: 4px; }
.side-menu .slider { padding: 7px 10px; font-size: 13px; line-height: 1.9; }
.side-menu .slider > .label > .value { float: left; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.side-menu .slider > label > input { height: 12px; margin: 7px 0; background: var(--theme-bg-light); }
.side-menu .slider > label > input::-webkit-slider-thumb { width: 16px; height: 16px; background: #285246; border: 2px solid #c4ad68; }
.side-menu .slider > label > input::-moz-range-thumb { width: 12px; height: 12px; background: #285246; border: 2px solid #c4ad68; }
.side-menu .switch { flex-shrink: 0; box-shadow: inset 0 0 0 1px #59493340; }
.side-menu .switch-button > .switch { align-self: center; margin: 0 10px 0 0; }
.side-menu .switch.on:after { background-color: #f5e8be; }
.side-menu .text-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--earth-line);
  border-radius: 3px;
  color: var(--theme-fg);
  background: var(--theme-bg);
  box-shadow: inset 0 2px 4px #59493313;
  font-size: 14px;
}
.side-menu .text-input::placeholder { color: var(--theme-fg-light); opacity: 1; }
.side-menu .choice-box { border-color: var(--earth-line); border-radius: 3px; font-size: 12px; line-height: 1.7; }
.side-menu .choice-box .choices { flex-wrap: wrap; }
.side-menu .choice-box .choice { padding: 6px 7px; }
.side-menu .choice-box .choices .choice.selected { color: #f7e9c6; background: #285246; }
.side-menu .map-button .sky { float: right; width: 8px; height: 8px; margin: 8px 0 0 9px; box-shadow: 0 0 0 1px #59493366; }
.side-menu .map-button .id { font-size: 11px; font-style: normal; direction: ltr; unicode-bidi: isolate; }
.side-menu .marker-set,
.side-menu .marker-item { border: 1px solid var(--earth-line); border-radius: 3px; padding: 5px; margin: 8px 0; }
.side-menu .marker-set > .info,
.side-menu .marker-item .marker-button,
.side-menu .marker-item .marker-button > .info { min-width: 0; }
.side-menu .marker-item .marker-button > .info { overflow: hidden; }
.side-menu .marker-set .label,
.side-menu .marker-item .label { line-height: 1.5; }
.side-menu .marker-set > .open-menu-button,
.side-menu .marker-item > .follow-player-button { flex-shrink: 0; width: 34px; border-radius: 3px; }
.side-menu .marker-set > .open-menu-button.active > svg { transform: translateY(-50%) scale(-.75, .75); }
.side-menu .marker-set > .info > .stats,
.side-menu .marker-item .marker-button > .info .stats { padding-top: 4px; line-height: 1.6; font-size: 11px; }
.side-menu .marker-set > .info > .stats > div:not(:first-child),
.side-menu .marker-item .marker-button > .info .stats > div:not(:first-child) { margin-left: 0; padding-left: 0; border-left: 0; margin-right: .5em; padding-right: .5em; border-right: 1px solid var(--earth-line); }
.info-content { font-size: 13px; line-height: 1.85; }
.info-content table tr th,
.info-content table tr td { padding: 7px 9px; border-color: var(--earth-line); }
.info-content kbd { display: inline-block; direction: ltr; font-family: inherit; padding: 0 5px; }
.info-content .info-footer { margin-top: 22px; color: var(--theme-fg-light); font-size: 11px; }

#zoom-buttons { right: 18px; bottom: 22px; width: 44px; margin: 0; gap: 6px; filter: none; }
#app:has(.side-menu) #zoom-buttons { right: 384px; }
#ff-mobile-controls .button { opacity: .8; }
#ff-mobile-controls .button svg { fill: #e3ce93; filter: drop-shadow(0 2px 2px #233323); }
#map-container .bm-marker-html .bm-marker-poi-label,
#map-container .bm-marker-labelpopup,
#map-container .bm-marker-popup {
  border: 2px solid #594933;
  border-radius: 4px;
  padding: 10px 12px;
  background: #ede5cf;
  color: #3a3526;
  box-shadow: inset 0 0 0 1px #f5e8be;
  font-family: "Earth Rubik", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
}
#map-container .bm-marker-player .bm-player-name {
  padding: 4px 9px;
  border: 1px solid #b9a26a;
  border-radius: 3px;
  background: #233f34ee;
  color: #fff0ca;
  font-family: "Earth Rubik", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  direction: ltr;
  unicode-bidi: isolate;
}
#app .map-state-message {
  max-width: min(440px, calc(100% - 48px));
  box-sizing: border-box;
  padding: 18px 24px;
  border: 2px solid #594933;
  border-radius: 4px;
  background: var(--earth-paper);
  color: var(--theme-fg);
  box-shadow: inset 0 0 0 2px var(--earth-inset), 0 4px 0 #332d23a8;
  line-height: 1.65;
}

/* Scenic loading state and engine errors share the same illustrated identity. */
#earth-loading,
#bm-app-err {
  direction: rtl;
  color: #3a3526;
  background: #142c25 url("./earth/sky.webp") center / cover no-repeat;
}
#earth-loading {
  position: fixed;
  z-index: 11000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity .3s ease;
}
#earth-loading::before,
#bm-app-err::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #14382f08, #17382f45);
  pointer-events: none;
}
#earth-loading[hidden],
#earth-loading.is-hidden,
#earth-loading.is-ready { display: none !important; }
.earth-loading-card,
#bm-app-err > div,
.earth-noscript {
  position: relative;
  width: min(470px, 100%);
  box-sizing: border-box;
  padding: 30px 34px 32px;
  text-align: center;
  background: #ede5cf;
  background-image: radial-gradient(#6f592612 .7px, transparent .7px);
  background-size: 5px 5px;
  border: 3px solid #594933;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px #f5e8be, inset 0 0 0 5px #c9b88e, 0 6px 0 #342e22, 0 18px 60px #10291d35;
}
.earth-loading-card > img,
.earth-loading-card .earth-loading-crest,
.earth-noscript > img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 14px;
  object-fit: contain;
  filter: drop-shadow(0 4px 1px #59493320);
}
.earth-loading-card h1,
.earth-noscript h1 {
  width: auto;
  margin: 0 0 12px;
  padding: 0;
  color: #285246;
  text-align: center;
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.7px;
}
.earth-loading-card h1::after,
.earth-noscript h1::after { display: none; }
.earth-loading-card p,
.earth-noscript p { margin: 0; font-size: 14px; line-height: 1.8; color: #6b5c3e; }
.earth-loading-status,
.earth-loading-card [role="status"],
.earth-loading-card .status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #c9b88e;
  color: #285246;
  font-size: 13px;
  font-weight: 500;
}
.earth-loading-status::before,
.earth-loading-card [role="status"]::before,
.earth-loading-card .status::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #285246;
  box-shadow: 0 0 0 4px #28524617;
  animation: earth-pulse 1.7s ease-in-out infinite;
}
#bm-app-err { font-family: "Earth Rubik", Arial, sans-serif; }
#bm-app-err > div { position: absolute; width: min(470px, calc(100% - 40px)); line-height: 1.8; }
#bm-app-err > div img { width: 160px; height: auto; min-width: 0; max-width: 100%; object-fit: contain; margin-bottom: 14px; border-radius: 0; }
#bm-app-err > div .bm-app-err-hint { color: #6b5c3e; font-size: 13px; }
#bm-app-err a { text-underline-offset: 3px; }
#earth-loading.has-error .earth-loading-status::before { animation: none; background: #a14a2c; box-shadow: 0 0 0 4px #a14a2c17; }
#earth-retry {
  margin-top: 22px;
  padding: 10px 22px;
  min-height: 44px;
  border: 2px solid #473c25;
  border-radius: 4px;
  background: #d7ba62;
  color: #2d3320;
  box-shadow: inset 0 0 0 2px #ffffff24, 0 4px 0 #302c1fa6;
  font: 700 14px "Earth Rubik", Arial, sans-serif;
  cursor: pointer;
}
#earth-retry[hidden] { display: none; }
#earth-retry:hover { background: #e6cf87; }
#earth-retry:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #ffffff24, 0 2px 0 #302c1fa6; }
#earth-retry:focus-visible { outline: 3px solid #285246; outline-offset: 5px; }
body:has(.earth-noscript) { background: #142c25 url("./earth/sky.webp") center / cover no-repeat; }
.earth-noscript {
  position: fixed;
  z-index: 11010;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(470px, calc(100% - 40px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  direction: rtl;
  font-family: "Earth Rubik", Arial, sans-serif;
}
@keyframes earth-pulse { 50% { opacity: .4; } }

@media (max-width: 1100px) {
  #earth-brand { top: 12px; left: 12px; min-height: 68px; width: 248px; padding: 5px 12px; }
  #earth-brand .earth-brand-crest { width: 48px; height: 48px; }
  #earth-brand .earth-brand-copy strong { font-size: 20px; }
  .control-bar { top: 96px; right: 12px; width: calc(100% - 24px); }
  .side-menu { top: 96px; right: 12px; height: calc(100% - 108px); height: calc(100dvh - 108px); }
  #zoom-buttons { right: 12px; bottom: 18px; }
  #app:has(.side-menu) #zoom-buttons { right: 380px; }
}
@media (max-width: 700px) {
  .control-bar { gap: 3px; }
  .control-bar .space { width: 0; }
  .control-bar .thin-hide { display: none; }
  .control-bar .pos-input { max-width: none; width: 100%; }
}
@media (max-width: 575.98px) {
  :root #app { font-size: 16px; }
  #earth-brand { width: auto; min-width: 218px; top: max(10px, env(safe-area-inset-top)); left: 10px; min-height: 64px; padding: 5px 12px; gap: 10px; }
  #earth-brand .earth-brand-crest { width: 48px; height: 48px; }
  #earth-brand .earth-brand-copy strong { font-size: 19px; }
  #earth-brand .earth-brand-copy span { font-size: 11px; }
  .control-bar { top: calc(90px + env(safe-area-inset-top)); right: 10px; left: auto; width: calc(100% - 20px); background: transparent; margin: 0; gap: 5px; }
  .control-bar .space { display: none; }
  .control-bar .pos-input { min-width: 0; }
  .number-input .label { padding: 0 6px; font-size: 11px; }
  .number-input input { font-size: 12px; }
  .side-menu { top: calc(90px + env(safe-area-inset-top)); right: 10px; max-width: calc(100% - 20px); width: 352px; height: calc(100% - 104px - env(safe-area-inset-top)); height: calc(100dvh - 104px - env(safe-area-inset-top)); }
  .side-menu > .title { height: 64px; padding: 10px 56px; }
  .side-menu > .content { height: calc(100% - 64px); padding: 15px 12px 20px; }
  .side-menu > .menu-button { margin: 0; }
  #zoom-buttons { right: 12px; bottom: max(18px, env(safe-area-inset-bottom)); }
  #app:has(.side-menu) #zoom-buttons { visibility: hidden; }
  .earth-loading-card,
  .earth-noscript { padding: 24px 22px 26px; }
  .earth-loading-card > img,
  .earth-loading-card .earth-loading-crest,
  .earth-noscript > img { width: 144px; height: auto; }
  #app .map-state-message { width: calc(100% - 48px); }
}
@media (max-height: 480px) and (orientation: landscape) {
  #earth-brand { top: 10px; min-height: 58px; width: 230px; }
  #earth-brand .earth-brand-crest { width: 42px; height: 42px; }
  #earth-brand .earth-brand-copy strong { font-size: 18px; }
  #earth-brand .earth-brand-copy span { font-size: 10px; }
  .control-bar { top: 82px; }
  .side-menu { top: 10px; height: calc(100dvh - 20px); }
  .earth-loading-card,
  .earth-noscript { padding: 16px 26px; }
  .earth-loading-card > img,
  .earth-loading-card .earth-loading-crest,
  .earth-noscript > img { width: 96px; height: auto; margin-bottom: 8px; }
  .earth-loading-card h1 { font-size: 24px; margin-bottom: 6px; }
  .earth-loading-status,
  .earth-loading-card [role="status"],
  .earth-loading-card .status { margin-top: 12px; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #earth-loading,
  .svg-button,
  .side-menu,
  .side-menu .simple-button,
  .side-menu .switch,
  .side-menu .switch::after { transition: none; }
  .earth-loading-status::before,
  .earth-loading-card [role="status"]::before,
  .earth-loading-card .status::before { animation: none; }
}