/* 极简加载页；覆盖范围沿用主场景的可视视口，兼容不支持 svh 的浏览器。 */
html.viewer_page { --loading-background: var(--loading-center); }
/* 中部读取主题底色，顶部/底部渐变衔接场景边缘；根背景与浏览器主题色保持独立。 */
.loading_screen {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--theme-text);
    background: linear-gradient(180deg,
        var(--scene-top) 0%, var(--scene-top) 8%,
        var(--loading-background) 32%, var(--loading-background) 68%,
        var(--scene-bottom) 92%, var(--scene-bottom) 100%);
    opacity: 1;
    visibility: visible;
    transition: none;
    will-change: opacity;
    touch-action: none;
}
.loading_screen:focus { outline: none; }
.loading_screen.is-leaving {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--loading-fade, 0.6s) ease-in-out;
}
/* 淡出结束后撤掉渲染盒及背景，避免 Safari 继续沿用加载层的边缘取色。 */
.loading_screen.is-hidden,
.loading_screen[hidden] {
    display: none;
    visibility: hidden;
    pointer-events: none;
    background: transparent;
}
.loading_content {
    width: 64vw; width: min(64vw, 26vh);
    width: 64vw; width: min(64vw, 26svh);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.loading_logo {
    display: flex;
    justify-content: center;
    margin-bottom: 4vh;
    margin-bottom: 4svh;
}
.loading_logo .iconfont {
    font-size: 4.8vh;
    font-size: 4.8svh;
    line-height: 1;
}
.loading_progress {
    height: 0.16vh;
    height: 0.16svh;
    overflow: hidden;
    background: rgba(var(--theme-ink-rgb), 0.12);
}
.loading_fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--theme-accent);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.18s ease;
}
.loading_meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5vh;
    margin-top: 1.5svh;
    color: rgba(var(--theme-ink-rgb), 0.5);
    font-size: 1.3vh; font-size: clamp(0.7rem, 1.3vh, 0.85rem);
    font-size: 1.3vh; font-size: clamp(0.7rem, 1.3svh, 0.85rem);
    line-height: 1.5;
}
.loading_percent { font-variant-numeric: tabular-nums; }
.loading_screen.is-indeterminate .loading_fill {
    width: 35%;
    animation: loading-flow 1.2s ease-in-out infinite;
}
.loading_retry {
    display: block;
    margin: 2.5vh auto 0;
    margin: 2.5svh auto 0;
    padding: 0.7em 1.4em;
    border: 0;
    border-radius: 0.2em;
    background: rgba(var(--theme-ink-rgb), 0.08);
    color: rgba(var(--theme-ink-rgb), 0.8);
    font: inherit;
    font-size: 1.4vh; font-size: clamp(0.75rem, 1.4vh, 0.9rem);
    font-size: 1.4vh; font-size: clamp(0.75rem, 1.4svh, 0.9rem);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.loading_retry[hidden] { display: none; }
.loading_retry:hover { background: rgba(var(--theme-ink-rgb), 0.14); }
.loading_retry:focus-visible { outline: 0.12em solid var(--theme-accent); outline-offset: 0.3em; }
@keyframes loading-flow {
    from { transform: translateX(-100%); }
    to { transform: translateX(385%); }
}
@media (prefers-reduced-motion: reduce) {
    .loading_screen, .loading_screen.is-leaving, .loading_fill { transition: none; }
    .loading_screen.is-indeterminate .loading_fill { animation: none; transform: translateX(93%); }
}