.load-screen {
  position: fixed; inset: 0;
  z-index: var(--z-dialog);
  display: grid; place-items: center;
  padding: var(--sp-200);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  --pop-origin: center;
}
.load-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-150);
  width: min(560px, 100%);
  text-align: center;
}
.load-card > :not(.load-picture) { max-width: min(360px, 100%); }
.load-note:empty, .load-num:empty { display: none; }
.load-bar {
  position: relative;
  width: 100%;
  height: var(--sp-075);
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--a-200);
}
.load-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--acc);
  background-image: linear-gradient(90deg, var(--load-shine-1, var(--shine-1)), var(--load-shine-2, var(--shine-2)),
    var(--load-shine-3, var(--shine-3)), var(--load-shine-4, var(--shine-4)), var(--load-shine-5, var(--shine-5)),
    var(--load-shine-6, var(--shine-6)), var(--load-shine-7, var(--shine-7)), var(--load-shine-1, var(--shine-1)));
  background-repeat: repeat-x;
}
.load-bar.unknown .load-fill {
  position: absolute; inset-block: 0; left: 0;
  width: 34%;
  animation: load-run 1.3s var(--ease-out) infinite;
}
@keyframes load-run {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}
html[data-motion="calm"] .load-bar.unknown .load-fill { animation: none; transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) {
  .load-bar.unknown .load-fill { animation: none; transform: translateX(100%); }
}
.load-acts { justify-content: center; gap: var(--sp-100); margin-top: var(--sp-100); }
.load-screen { --load-fade: .7s; }
.load-screen.fading {
  transform: none;
  transition: opacity var(--load-fade) ease-in-out, display var(--load-fade) allow-discrete;
}

.load-track { position: relative; width: 100%; }
.load-track > .load-bar { z-index: 1; }
.load-bar-glow {
  position: absolute; left: 0; top: 0;
  width: 0; height: 100%;
  border-radius: var(--r-full);
  background-image: linear-gradient(90deg, var(--load-shine-1, var(--shine-1)), var(--load-shine-2, var(--shine-2)),
    var(--load-shine-3, var(--shine-3)), var(--load-shine-4, var(--shine-4)), var(--load-shine-5, var(--shine-5)),
    var(--load-shine-6, var(--shine-6)), var(--load-shine-7, var(--shine-7)), var(--load-shine-1, var(--shine-1)));
  background-repeat: repeat-x;
  filter: blur(var(--sp-100));
  opacity: .8;
  pointer-events: none;
}
.load-track:has(> .load-bar.unknown) > .load-bar-glow { display: none; }
.load-mark-glow { filter: blur(var(--sp-075)); }
.load-mark-spin > .load-mark-glow svg { stroke-width: 2.5; }

.load-mark {
  width: calc(var(--sp-400) * 2); height: calc(var(--sp-400) * 2);
  margin-bottom: var(--sp-300);
  transition: transform calc(var(--dur-zoom) * 2) var(--ease-out);
}
.load-card.waiting .load-mark { transform: translateY(var(--mark-drop, 0px)) scale(2); }
.load-mark-spin {
  display: grid; width: 100%; height: 100%;
  animation: load-mark-in calc(var(--dur-zoom) * 5) var(--ease-out) both;
}
@keyframes load-mark-in {
  from { opacity: 0; transform: scale(0) rotate(-540deg); }
  to   { opacity: 1; transform: none; }
}
.load-mark-spin > * { grid-area: 1 / 1; display: grid; }
.load-mark-spin svg { width: 100%; height: 100%; stroke-width: 1; }
.load-mark-base { color: var(--ink3); }

.load-picture {
  position: relative;
  width: min(100%, calc((100dvh - 310px) * 1.6)); /* вне шкалы: высота прочих частей столбца */
  aspect-ratio: 16 / 10;
}
.load-picture canvas {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transform: var(--pop-from);
  filter: blur(var(--sp-075));
  transition: opacity calc(var(--dur-zoom) * 2) var(--ease-out),
              transform calc(var(--dur-zoom) * 2) var(--ease-out),
              filter calc(var(--dur-zoom) * 2) var(--ease-out);
}
.load-picture canvas.shown { opacity: 1; transform: none; filter: none; }
.load-picture canvas.sketch-glow.shown { filter: blur(var(--sp-150)) saturate(1.2); opacity: .85; }
:root:not([data-theme="dark"]) .load-picture canvas.sketch-glow.shown { filter: blur(var(--sp-150)); opacity: .45; }
html[data-motion="calm"] .load-mark, html[data-motion="calm"] .load-picture canvas { transition: none; }
html[data-motion="calm"] .load-mark-spin { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .load-mark, .load-picture canvas { transition: none; }
  .load-mark-spin { animation: none; }
}