/* Scoped loading screen. Runtime supplies real progress and active stages.
   --load-progress is a CSS percentage, e.g. 38%; never a timed simulation. */
#loader.pixel-loader {
  --load-red: #ff4556;
  --load-cyan: #8bdde3;
  position: absolute; inset: 0; z-index: 100;
  display: grid; place-items: center; overflow: auto;
  box-sizing: border-box; padding: 28px 24px;
  color: #f2f3f5; background: #080c12;
  background-image: radial-gradient(ellipse at 20% 0%, #3c192139, transparent 58%), radial-gradient(ellipse at 95% 100%, #12303c50, transparent 65%);
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  text-align: left; opacity: 1; visibility: visible;
  transition: opacity .45s ease, visibility .45s;
}
#loader.pixel-loader, #loader.pixel-loader * { box-sizing: border-box; }
#loader.pixel-loader.is-leaving { opacity: 0; pointer-events: none; }
#loader.pixel-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#loader .pixel-loader-panel { width: min(100%, 680px); margin: auto; }
#loader .pixel-loader-topline { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #b2c9e320; }
#loader .pixel-loader-eyebrow { color: var(--load-red); font: 700 11px/1.5 ui-monospace, 'Consolas', monospace; letter-spacing: .12em; }
#loader .pixel-loader-code { color: #8b99a8; font: 11px/1.5 ui-monospace, 'Consolas', monospace; letter-spacing: .1em; white-space: nowrap; }
#loader #pixel-load-title { margin: 19px 0 8px; color: #f2f3f5; font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif; font-weight: 600; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.025em; text-transform: none; }
#loader #pixel-load-title br { display: none; }
#loader #pixel-load-title span { color: #c1cbd5; }

#loader .pixel-loader-coordinate, #loader .pixel-loader-baseline { display: none; }
#loader .pixel-loader-intro { margin: 0 0 21px; color: #a0adbc; font-size: 17px; line-height: 1.4; }
#loader .pixel-loader-viewport { position: relative; overflow: hidden; border: 1px solid #a3c8de26; background-color: #0b121b; background-image: linear-gradient(#7bafc109 1px, transparent 1px), linear-gradient(90deg, #7bafc109 1px, transparent 1px), radial-gradient(ellipse at 50% 80%, #24445340, transparent 70%); background-size: 32px 32px, 32px 32px, 100% 100%; box-shadow: 0 20px 55px #0004, inset 0 1px #d5eeff0d; }
#loader .pixel-loader-viewport::before, #loader .pixel-loader-viewport::after { content: ''; position: absolute; z-index: 1; width: 26px; height: 26px; pointer-events: none; }
#loader .pixel-loader-viewport::before { top: 0; left: 0; border-top: 2px solid var(--load-red); border-left: 2px solid var(--load-red); }
#loader .pixel-loader-viewport::after { bottom: 0; right: 0; border-bottom: 2px solid #8bdde386; border-right: 2px solid #8bdde386; }
#loader #pixel-build-scene { display: block; width: 100%; height: auto; aspect-ratio: 640 / 300; image-rendering: auto; }
#loader .pixel-loader-coordinate, #loader .pixel-loader-baseline { position: absolute; left: 17px; right: 17px; pointer-events: none; color: #7f93a4; font: 9px/1.5 ui-monospace, 'Consolas', monospace; letter-spacing: .12em; }
#loader .pixel-loader-coordinate { top: 13px; }
#loader .pixel-loader-coordinate span { color: var(--load-cyan); margin-left: 7px; }
#loader .pixel-loader-baseline { bottom: 11px; display: flex; justify-content: space-between; color: #7f93a4; }
#loader .pixel-loader-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 20px 0 10px; min-height: 22px; }
#loader #pixel-load-status { color: #e1e7ec; font-size: 16px; line-height: 1.4; margin: 0; }
#loader #pixel-load-count { color: #94a3b2; font: 10px/1.5 ui-monospace, 'Consolas', monospace; text-align: right; }
#loader #pixel-load-progress { height: 4px; background: #25323e; overflow: hidden; }
#loader .pixel-load-fill { display: block; height: 100%; width: var(--load-progress, 0%); max-width: 100%; background: linear-gradient(90deg, #b72e40, var(--load-red)); box-shadow: 0 0 16px #ff455650; transition: width .3s ease; }
#loader .pixel-loader-stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 0; padding: 0; }
#loader .pixel-loader-stages li { display: flex; gap: 8px; align-items: center; color: #8997a5; font-size: 14px; line-height: 1.3; }
#loader .pixel-stage-number { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid #50627450; color: #8b99a8; font: 10px/1 ui-monospace, 'Consolas', monospace; }
#loader [data-load-stage].is-active, #loader [data-load-stage][aria-current="step"] { color: #f3f5f6; }
#loader [data-load-stage].is-active .pixel-stage-number, #loader [data-load-stage][aria-current="step"] .pixel-stage-number { border-color: var(--load-red); color: #ff7985; background: #ff455611; }
#loader [data-load-stage].is-complete { color: #b6c9ce; }
#loader [data-load-stage].is-complete .pixel-stage-number { border-color: #8bdde364; color: var(--load-cyan); background: #8bdde309; }
#loader .pixel-loader-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#loader .pixel-loader-actions button { min-height: 44px; margin-top: 22px; padding: 11px 16px; border: 1px solid #ff455690; border-radius: 3px; color: #fff; background: #a72c3b; font: 600 15px/1.2 'Barlow Condensed', Arial, sans-serif; cursor: pointer; }
#loader .pixel-loader-actions button span { margin-left: 14px; }
#loader .pixel-loader-actions #pixel-load-continue { background: #16242e; border-color: #8bdde363; }
#loader .pixel-loader-actions button:hover { filter: brightness(1.16); }
#loader .pixel-loader-actions button:focus-visible { outline: 2px solid var(--load-cyan); outline-offset: 4px; }
#loader [hidden] { display: none !important; }
@media (max-width: 600px) {
  #loader.pixel-loader { padding: 24px 18px; }
  #loader #pixel-load-title { font-size: clamp(31px, 8.6vw, 42px); margin-top: 20px; line-height: 1.1; }
  #loader #pixel-load-title br { display: block; }
  #loader .pixel-loader-intro { font-size: 15px; margin-bottom: 22px; }
  #loader .pixel-loader-eyebrow { font-size: 9px; letter-spacing: .08em; }
  #loader .pixel-loader-code { font-size: 9px; }
  #loader .pixel-loader-coordinate, #loader .pixel-loader-baseline { font-size: 7px; left: 12px; right: 12px; }
  #loader .pixel-loader-coordinate { top: 9px; }
  #loader .pixel-loader-baseline { bottom: 8px; }
  #loader .pixel-loader-progress-head { align-items: flex-start; flex-direction: column; gap: 4px; margin-top: 16px; }
  #loader #pixel-load-count { text-align: left; }
  #loader .pixel-loader-stages { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-top: 17px; }
  #loader .pixel-loader-stages li { font-size: 14px; }
  #loader .pixel-loader-actions button { flex: 1 1 160px; }
}
@media (max-height: 590px) and (min-width: 601px) {
  #loader.pixel-loader { padding: 14px 24px; }
  #loader .pixel-loader-panel { max-width: 570px; }
  #loader #pixel-load-title { font-size: 30px; margin-top: 12px; }
  #loader .pixel-loader-intro { margin-bottom: 10px; font-size: 15px; }
  #loader .pixel-loader-viewport { max-width: 460px; margin: 0 auto; }
  #loader .pixel-loader-progress-head { margin-top: 12px; }
  #loader .pixel-loader-stages { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #loader.pixel-loader, #loader .pixel-load-fill { transition: none; }
}
#loader.pixel-loader .pixel-loader-coordinate, #loader.pixel-loader .pixel-loader-baseline { display: none; }
#loader .pixel-loader-viewport { border-radius: 14px; border-color: #b6c8d431; }
/* Search: the original mascot alone, without an illustrated environment. */
#loader .pixel-loader-panel { width:min(100%,520px); }
#loader .pixel-loader-viewport { background:none; border:0; box-shadow:none; border-radius:0; }
#loader .pixel-loader-viewport::before,#loader .pixel-loader-viewport::after,#loader .pixel-loader-stages { display:none; }
#loader #pixel-build-scene { max-width:500px; margin:auto; }