.skip-link {
    position: fixed;
    z-index: 70;
    inset-block-start: calc(env(safe-area-inset-top) + var(--space-2));
    inset-inline-start: calc(env(safe-area-inset-left) + var(--space-2));
    translate: 0 -180%;
    padding: 0.65rem 0.9rem;
    color: var(--color-page);
    background: var(--color-text);
    border-radius: var(--panel-radius);
}

.skip-link:focus {
    translate: 0;
}

.app-shell {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: var(--scene-shell-bg);
}

.main-scene {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.scene-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.background-scene,
.transition-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.background-scene {
    z-index: 0;
}

.transition-layer {
    z-index: 35;
    opacity: 0;
    transition: opacity 180ms ease;
}

.transition-layer.is-active {
    opacity: 1;
}

.background-canvas,
.transition-canvas,
.background-fallback,
.background-fallback img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.background-canvas,
.transition-canvas {
    display: block;
}

.background-fallback {
    z-index: -1;
    opacity: 0;
    transition: opacity 220ms ease;
}

.background-fallback.is-visible {
    opacity: 1;
}

.background-fallback img {
    object-fit: cover;
    object-position: calc(var(--scene-x, 0.5) * 100%) calc(var(--scene-y, 0.5) * 100%);
    filter:
        grayscale(1)
        brightness(var(--scene-brightness, 0.92))
        contrast(var(--scene-contrast, 1.04))
        saturate(var(--scene-saturation, 0.04));
    -webkit-mask-image:
        radial-gradient(ellipse at 52% 50%, #000 0 47%, rgb(0 0 0 / 70%) 62%, rgb(0 0 0 / 24%) 76%, transparent 88.4%);
    mask-image:
        radial-gradient(ellipse at 52% 50%, #000 0 47%, rgb(0 0 0 / 70%) 62%, rgb(0 0 0 / 24%) 76%, transparent 88.4%);
}

.dynamic-content-layer {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: grid;
    align-items: center;
    justify-items: end;
    padding:
        calc(env(safe-area-inset-top) + var(--space-5))
        calc(env(safe-area-inset-right) + 6.5rem)
        calc(env(safe-area-inset-bottom) + var(--space-5))
        calc(env(safe-area-inset-left) + 6rem);
    transition:
        opacity 420ms ease,
        filter 420ms ease,
        transform 420ms ease,
        clip-path 620ms ease;
}

.main-scene[data-scene-key="rights"] .dynamic-content-layer {
    align-items: center;
    justify-items: center;
    padding:
        calc(env(safe-area-inset-top) + var(--space-4))
        calc(env(safe-area-inset-right) + 6rem)
        calc(env(safe-area-inset-bottom) + var(--space-4))
        calc(env(safe-area-inset-left) + 6rem);
}

.main-scene.is-ink-transition-out .background-canvas,
.main-scene.is-ink-transition-out .background-fallback img {
    filter:
        grayscale(1)
        brightness(calc(var(--scene-brightness, 0.92) * 0.88))
        contrast(calc(var(--scene-contrast, 1.04) * 0.82))
        saturate(0)
        blur(0.18rem);
}

.main-scene.is-ink-transition-out .dynamic-content-layer,
.poem-pager.is-ink-transitioning {
    opacity: 0.22;
    filter: blur(0.32rem) contrast(0.72);
    transform: scale(0.992);
    clip-path: inset(0 0 0 0 round var(--panel-radius));
}

.main-scene.is-ink-transition-in .dynamic-content-layer,
.poem-pager.is-ink-transition-in {
    animation: panel-ink-reveal 620ms ease both;
}

.main-scene.is-sand-transition-out .background-canvas,
.main-scene.is-sand-transition-out .background-fallback img {
    filter:
        grayscale(1)
        brightness(calc(var(--scene-brightness, 0.92) * 0.92))
        contrast(calc(var(--scene-contrast, 1.04) * 0.88))
        saturate(0)
        blur(0.12rem);
}

.main-scene.is-sand-transition-out .dynamic-content-layer,
.poem-pager.is-sand-transitioning {
    opacity: 0.28;
    filter: blur(0.26rem) contrast(0.8);
    transform: translate(var(--sand-shift-x, 0.25rem), var(--sand-shift-y, 0));
}

.main-scene.is-sand-transition-in .dynamic-content-layer,
.poem-pager.is-sand-transition-in {
    animation: panel-sand-reveal 680ms ease both;
}

@keyframes panel-sand-reveal {
    0% {
        opacity: 0;
        filter: blur(0.34rem) contrast(0.86);
        transform: translate(calc(var(--sand-shift-x, 0.25rem) * -0.35), calc(var(--sand-shift-y, 0) * -0.35));
    }

    55% {
        opacity: 0.45;
    }

    100% {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@keyframes panel-ink-reveal {
    0% {
        opacity: 0;
        filter: blur(0.45rem) contrast(0.78);
        transform: scale(0.992);
    }

    100% {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

.floating-menu {
    position: fixed;
    z-index: 50;
    inset-block-start: 50%;
    inset-inline-start: calc(env(safe-area-inset-left) + var(--space-3));
    display: grid;
    gap: var(--space-2);
    translate: 0 -50%;
}

.poem-pager {
    position: fixed;
    z-index: 45;
    inset-block-start: 50%;
    inset-inline-end: calc(env(safe-area-inset-right) + var(--space-3));
    display: grid;
    gap: var(--space-1);
    justify-items: center;
    translate: 0 -50%;
    padding: 0.55rem;
    color: var(--color-text);
    background: rgb(255 255 255 / 44%);
    border: 1px solid var(--color-line);
    border-radius: 999rem;
    backdrop-filter: blur(1rem);
}

.poem-pager.is-hidden {
    display: none;
}

.system-status {
    position: fixed;
    z-index: 55;
    inset-inline-start: calc(env(safe-area-inset-left) + var(--space-3));
    inset-block-end: calc(env(safe-area-inset-bottom) + var(--space-3));
    max-width: min(28rem, calc(100vw - 2 * var(--space-3)));
    padding: 0.55rem 0.8rem;
    color: var(--color-text-soft);
    background: rgb(255 255 255 / 54%);
    border: 1px solid rgb(255 255 255 / 76%);
    border-radius: var(--panel-radius);
    font-size: 0.85rem;
    backdrop-filter: blur(0.9rem);
}

.site-copyright {
    position: fixed;
    z-index: 48;
    inset-inline-start: 50%;
    inset-block-end: calc(env(safe-area-inset-bottom) + var(--space-3));
    max-width: min(44rem, calc(100vw - 18rem));
    translate: -50% 0;
    color: var(--color-text-soft);
    font-size: clamp(0.72rem, 1.1vw, 0.86rem);
    line-height: 1.35;
    text-align: center;
}

.site-copyright a {
    display: inline-block;
    padding: 0.4rem 0.65rem;
    color: inherit;
    background: rgb(255 255 255 / 38%);
    border: 1px solid rgb(255 255 255 / 48%);
    border-radius: 999rem;
    text-decoration: none;
    backdrop-filter: blur(0.8rem);
    -webkit-backdrop-filter: blur(0.8rem);
}

.site-copyright a:focus-visible {
    outline: 2px solid #7f3948;
    outline-offset: 3px;
}

@media (max-width: 64rem) {
    .dynamic-content-layer {
        padding-inline-start: calc(env(safe-area-inset-left) + 5.3rem);
        padding-inline-end: calc(env(safe-area-inset-right) + 5.4rem);
    }
}

@media (max-width: 44rem) {
    .dynamic-content-layer {
        align-items: center;
        justify-items: center;
        padding:
            calc(env(safe-area-inset-top) + var(--space-3))
            calc(env(safe-area-inset-right) + var(--space-2))
            calc(env(safe-area-inset-bottom) + 5.5rem)
            calc(env(safe-area-inset-left) + var(--space-2));
    }

    .main-scene[data-scene-key="rights"] .dynamic-content-layer {
        padding:
            calc(env(safe-area-inset-top) + var(--space-3))
            calc(env(safe-area-inset-right) + var(--space-2))
            calc(env(safe-area-inset-bottom) + 7rem)
            calc(env(safe-area-inset-left) + var(--space-2));
    }

    .floating-menu {
        --control-size: 2.75rem;
        inset-block: auto calc(env(safe-area-inset-bottom) + var(--space-2));
        inset-inline-start: 50%;
        grid-auto-flow: column;
        translate: -50% 0;
        gap: 0.45rem;
        padding: 0.45rem;
        background: rgb(255 255 255 / 58%);
        border: 1px solid var(--color-line);
        border-radius: 999rem;
        backdrop-filter: blur(1rem);
    }

    .poem-pager {
        inset-block-start: calc(env(safe-area-inset-top) + var(--space-2));
        inset-inline-end: calc(env(safe-area-inset-right) + var(--space-2));
        grid-auto-flow: column;
        translate: 0;
        border-radius: 999rem;
    }

    .system-status {
        inset-inline-start: calc(env(safe-area-inset-left) + var(--space-2));
        inset-block-end: calc(env(safe-area-inset-bottom) + 6.9rem);
        font-size: 0.76rem;
    }

    .site-copyright {
        inset-block-end: calc(env(safe-area-inset-bottom) + 5.1rem);
        max-width: calc(100vw - 2 * var(--space-2));
        font-size: 0.72rem;
    }
}