.p-loading { display: none; }
html[data-loading] .p-loading { display: block; position: fixed; inset: 0; z-index: 90; overflow: hidden; isolation: isolate; }
.p-loading__veil, .p-loading__canvas { position: absolute; inset: 0; }
.p-loading__veil { background: var(--paper); }
.p-loading__canvas { pointer-events: none; }
.p-loading__canvas canvas { display: block; width: 100%; height: 100%; }
.p-loading__panels { position: absolute; top: 50%; left: 50%; display: flex; gap: 12px; transform: translate(-50%, -50%); }
.p-loading__panels span { width: 62px; height: 108px; background: #f0f1ed; border-inline: 2px solid var(--loading-color); }
.p-loading__panels span:nth-child(1) { --loading-color: #fc2c54; transform: translateY(-8px); }
.p-loading__panels span:nth-child(2) { --loading-color: #2cd4fc; transform: translateY(8px); }
.p-loading__panels span:nth-child(3) { --loading-color: #a4a4a4; transform: translateY(-8px); }
.p-loading__panels span:nth-child(4) { --loading-color: #fcfc7c; transform: translateY(8px); }
.p-loading[data-render="webgl"] .p-loading__panels { visibility: hidden; }
.p-loading__word { position: absolute; top: 72%; left: 50%; margin: 0; transform: translate(-50%, -50%); color: var(--ink); font: 500 1.1875rem/1 var(--sans); letter-spacing: .1em; }
/* The colored paper is the landing surface; portraits begin only after release. */
html[data-loading] .p-panel__art, html[data-loading] .p-panel__index,
html[data-loading] .p-panel__label, html[data-loading] .p-hero__overlay,
html[data-loading] .p-hero__scroll, html[data-loading] .p-panels__canvas { visibility: hidden !important; }
html[data-loading] .l-header { visibility: hidden; }
@media (max-width: 800px) {
  .p-loading__panels span { width: 49px; height: 84px; }
}
@media (prefers-reduced-motion: reduce), print {
  html[data-loading] .p-loading { display: none; }
  html[data-loading] .p-panel__art, html[data-loading] .p-panel__index,
  html[data-loading] .p-panel__label, html[data-loading] .p-hero__overlay,
  html[data-loading] .p-hero__scroll, html[data-loading] .l-header { visibility: visible !important; }
}