/* The public HTML remains useful before JavaScript and while WebGL prepares. */
html body #loading {
  display: grid;
  grid-template-columns: minmax(310px, 480px) minmax(330px, 490px);
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 62px);
  min-height: 100dvh;
  padding: clamp(20px, 4vw, 52px);
  overflow: hidden;
  background: radial-gradient(ellipse at 18% 16%, #254766 0, transparent 47%),
              radial-gradient(ellipse at 85% 85%, #143b4b 0, transparent 46%),
              linear-gradient(135deg, #071326, #0b1e31 55%, #071826);
  color: #f0f7fa;
  text-align: left;
}
@keyframes sorvian-arrival-reveal {
  from { opacity: .85; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
html body #loading > .loading-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  max-width: 480px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid #9bc9d347;
  border-radius: 22px;
  background: linear-gradient(160deg, #102d42ee, #091a2ced);
  box-shadow: 0 24px 72px #020a17a8, inset 0 1px #e9ffff16;
  text-align: left;
  animation: sorvian-arrival-reveal .55s ease-out both;
}
html body #loading .loading-stage > * { max-width: 100%; margin: 0; }
html body #loading .loading-stage .loading-logo {
  width: clamp(74px, 11dvh, 110px);
  height: auto;
  margin: 0 0 4px;
  filter: drop-shadow(0 9px 25px #48a9e15a);
}
html body #loading .loading-stage .brand {
  color: #f5fafc;
  font-size: clamp(20px, 2.6vw, 30px) !important;
  font-weight: 660;
  letter-spacing: .18em;
  line-height: 1.15;
}
html body #loading .loading-stage #loading-percent {
  margin-top: 9px;
  color: #d6f6ef;
  font: 520 clamp(39px, 5vw, 62px)/1 ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.055em;
}
html body #loading .loading-stage progress {
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #355066;
  accent-color: #82e2d1;
}
html body #loading .loading-stage progress::-webkit-progress-bar { background: #355066; }
html body #loading .loading-stage progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #6ed4ca, #bcebc7);
  box-shadow: 0 0 14px #8be4cb91;
  transition: width .45s ease-out;
}
html body #loading .loading-stage #loading-status {
  color: #f1f8f9;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 570;
  line-height: 1.35;
}
html body #loading .loading-stage #loading-detail {
  color: #a9c9d3;
  font-size: 12px;
  letter-spacing: .025em;
}
html body #loading .loading-stage #loading-patience {
  padding: 10px 0 0;
  color: #c8dce2;
  border-top: 1px solid #a2c6cf2b;
  font-size: 13px;
  line-height: 1.55;
}
html body #loading .loading-stage .sorvian-loading-guide {
  align-self: stretch;
  width: 100%;
  margin: 1px 0 0;
  border-color: #8dc4c95e;
  background: #102c3b;
  box-shadow: none;
}
html body #loading .loading-stage .loading-links {
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  margin-top: 4px;
}
html body #loading .loading-stage .loading-links a {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #8cc3cf69;
  border-radius: 9px;
  background: #16374a;
  color: #e5f7f7;
  font-size: 12px;
  text-decoration: none;
}
html body #loading .loading-stage .loading-links a:hover { background: #245369; border-color: #a6e8d9; }
html body #loading .loading-stage .loading-links .loading-about { color: #c8dce4; }
html body #loading > #mall-public-copy {
  display: block;
  width: 100%;
  max-width: 490px;
  max-height: min(690px, calc(100dvh - 44px));
  overflow: auto;
  margin: 0;
  padding: clamp(20px, 3vw, 30px);
  border-color: #8dc5cf66;
  border-radius: 22px;
  background: #102538dc;
  animation: sorvian-arrival-reveal .7s .08s ease-out both;
}
html body #loading > #mall-public-copy .mall-public-photos { display: grid; grid-template-columns: 1fr; margin: 18px 0 0; }
html body #loading > #mall-public-copy .mall-public-photos figure:nth-child(2) { display: none; }
html body #loading > #mall-public-copy .mall-public-nav { margin-top: 18px; }
html body #loading > #mall-public-copy .mall-public-nav a { background: #1a394a; }
@media(max-width: 810px) {
  html body #loading { grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; align-items: start; overflow: auto; padding: 16px; }
  html body #loading > .loading-stage, html body #loading > #mall-public-copy { width: min(600px, 100%); max-width: none; margin-inline: auto; }
  html body #loading > #mall-public-copy { max-height: none; }
  html body #loading .loading-stage .loading-logo { width: 78px; }
  html body #loading .loading-stage #loading-percent { margin-top: 3px; font-size: 44px; }
}
@media(max-height: 580px) and (min-width: 811px) {
  html body #loading { align-items: start; padding-block: 12px; }
  html body #loading > .loading-stage { gap: 6px; padding: 16px; }
  html body #loading .loading-stage .loading-logo { width: 60px; }
}
@media(prefers-reduced-motion: reduce) {
  html body #loading > .loading-stage,html body #loading > #mall-public-copy { animation: none; }
  html body #loading .loading-stage progress::-webkit-progress-value { transition: none; }
}