/* 页面跳转反馈只覆盖当前文档，目标页面加载完成后由新文档直接接管。 */
/* 原生 dialog 进入顶层，覆盖阅读器已有的目录弹层；闭合时即使无 JS 也不显示。 */
.navigation-loading,
.reader-body dialog.navigation-loading {
    --navigation-ink: oklch(.235 .017 275);
    --navigation-muted: oklch(.48 .025 275);
    --navigation-circle: oklch(.946 .029 275);
    --navigation-veil: oklch(.995 .004 275 / .94);
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--navigation-veil);
    color: var(--navigation-ink);
    color-scheme: light;
    isolation: isolate;
}
.reader-body:not([data-theme]) .navigation-loading,
.reader-body[data-theme="dark"] .navigation-loading {
    --navigation-ink: oklch(.95 .008 275);
    --navigation-muted: oklch(.76 .025 275);
    --navigation-circle: oklch(.28 .04 275);
    --navigation-veil: oklch(.18 .009 275 / .96);
    color-scheme: dark;
}
.navigation-loading::backdrop,
.reader-body dialog.navigation-loading::backdrop { background: transparent; }
.navigation-loading:not([open]) { display: none !important; }
.navigation-loading[open] { animation: navigation-loading-appear .18s ease-out; }
.navigation-loading-active { overflow: hidden; }
.navigation-loading button { border: 0; font-family: inherit; cursor: pointer; }
.navigation-loading-track {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    overflow: hidden;
    background: oklch(.91 .025 275);
}
.navigation-loading-track span {
    display: block;
    width: 30%;
    height: 100%;
    background: var(--primary);
    animation: navigation-loading-travel 2.5s linear infinite;
}
.navigation-loading-content {
    width: min(100% - 32px, 430px);
    padding: 32px 16px;
    text-align: center;
}
.navigation-loading-mascot {
    position: relative;
    width: 200px;
    height: 174px;
    margin: 0 auto 18px;
}
.navigation-loading-circle {
    position: absolute;
    top: 9px;
    left: 33px;
    width: 134px;
    height: 134px;
    border-radius: 50%;
    background: var(--navigation-circle);
}
.navigation-loading-mascot > img {
    position: absolute;
    top: 4px;
    left: 44px;
    z-index: 2;
    transform-origin: 50% 90%;
    animation: navigation-loading-reading 3.2s ease-in-out infinite;
}
.navigation-loading-book {
    position: absolute;
    top: 115px;
    left: 48px;
    z-index: 3;
    width: 104px;
    height: 28px;
    perspective: 160px;
}
.navigation-loading-book span {
    position: absolute;
    top: 0;
    width: 52px;
    height: 27px;
    border: 2px solid oklch(.32 .08 275);
    background: oklch(.985 .008 275);
}
.navigation-loading-book span:nth-child(1) {
    left: 0;
    border-radius: 4px 0 0 4px;
    transform: skewY(9deg);
}
.navigation-loading-book span:nth-child(2) {
    right: 0;
    border-radius: 0 4px 4px 0;
    transform: skewY(-9deg);
}
.navigation-loading-book span:nth-child(3) {
    right: 0;
    border-radius: 0 4px 4px 0;
    background: oklch(.88 .055 275);
    transform-origin: left center;
    transform: skewY(-9deg);
    animation: navigation-loading-page 3.2s ease-in-out infinite;
}
.navigation-loading-shadow {
    position: absolute;
    bottom: 10px;
    left: 58px;
    width: 84px;
    height: 7px;
    border-radius: 50%;
    background: oklch(.78 .03 275 / .22);
}
.navigation-loading-star {
    position: absolute;
    z-index: 4;
    color: oklch(.62 .12 275);
    font-size: 19px;
}
.navigation-loading-star-one { top: 46px; left: 19px; }
.navigation-loading-star-two { top: 85px; right: 18px; font-size: 25px; }
.navigation-loading-title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.5;
}
.navigation-loading-description {
    margin: 0;
    color: var(--navigation-muted);
    font-size: 12px;
    line-height: 1.9;
}
.navigation-loading-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    height: 8px;
    margin: 23px 0 17px;
}
.navigation-loading-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: oklch(.6 .14 275);
    animation: navigation-loading-breathe 1.8s ease-in-out infinite;
}
.navigation-loading-dots i:nth-child(2) { animation-delay: .2s; }
.navigation-loading-dots i:nth-child(3) { animation-delay: .4s; }
.navigation-loading .navigation-loading-stay {
    display: block;
    min-height: 44px;
    margin: 0 auto;
    padding: 10px 15px;
    background: none;
    color: var(--navigation-muted);
    font-size: 12px;
}
.navigation-loading .navigation-loading-stay:hover { color: var(--navigation-ink); }
.navigation-loading .navigation-loading-retry {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 23px auto 0;
    padding: 10px 24px;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-size: 12px;
}
.navigation-loading .navigation-loading-retry:hover { background: oklch(.44 .2 275); }
.navigation-loading-destination {
    display: block;
    margin-top: 8px;
    color: var(--navigation-muted);
    font-size: 10px;
    letter-spacing: .05em;
}
.navigation-loading[data-state="slow"] .navigation-loading-mascot > img { animation-duration: 4.5s; }
.navigation-loading:is([data-state="offline"], [data-state="error"]) .navigation-loading-dots,
.navigation-loading:is([data-state="offline"], [data-state="error"]) .navigation-loading-track { display: none; }
.navigation-loading:is([data-state="offline"], [data-state="error"]) .navigation-loading-mascot > img,
.navigation-loading:is([data-state="offline"], [data-state="error"]) .navigation-loading-book span { animation: none; }
@keyframes navigation-loading-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes navigation-loading-reading {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(3px) rotate(2deg); }
}
@keyframes navigation-loading-page {
    0%, 28% { transform: rotateY(0deg) skewY(-9deg); }
    70%, 100% { transform: rotateY(-180deg) skewY(-9deg); }
}
@keyframes navigation-loading-travel {
    from { transform: translateX(-100%); }
    to { transform: translateX(435%); }
}
@keyframes navigation-loading-breathe {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .navigation-loading,
    .navigation-loading *,
    .navigation-loading *::before,
    .navigation-loading *::after {
        animation: none !important;
        transition: none !important;
    }
}
@media (max-width: 520px) {
    .navigation-loading-content { width: min(100% - 24px, 390px); }
    .navigation-loading-title { font-size: 19px; }
}