.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 {
    --layer-background: 0;
    --layer-background-transition: 10;
    --layer-poem-foreground: 30;
    --layer-scene-cover: 35;
    --layer-pager: 40;
    --layer-persistent-controls: 50;
    --layer-status: 55;
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: var(--viewport-height, 100dvh);
    overflow: hidden;
    isolation: isolate;
    background: var(--scene-shell-bg);
}

.main-scene {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: var(--viewport-height, 100dvh);
    overflow: hidden;
    isolation: isolate;
}

.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: var(--layer-background);
    transition: filter 360ms ease, transform 420ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.transition-layer {
    z-index: var(--layer-scene-cover);
    opacity: 0;
    transition: opacity 180ms ease;
}

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

/* Sand always belongs to the background transition root, below every poem surface. */
.background-transition-layer.is-background-only {
    z-index: var(--layer-background-transition);
}

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

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

.background-canvas {
    z-index: 1;
}

.background-fallback {
    z-index: 0;
    opacity: 1;
    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 49%, rgb(0 0 0 / 70%) 64%, rgb(0 0 0 / 24%) 78%, transparent 90%);
    mask-image:
        radial-gradient(ellipse at 52% 50%, #000 0 49%, rgb(0 0 0 / 70%) 64%, rgb(0 0 0 / 24%) 78%, transparent 90%);
}

.dynamic-content-layer {
    position: absolute;
    z-index: var(--layer-poem-foreground);
    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;
}

.js .app-shell.is-scene-pending .dynamic-content-layer,
.js .app-shell.is-scene-pending .poem-pager {
    pointer-events: none;
    opacity: 0;
}

/* Explicitly settle the initial CSS transition without overriding sand or ink panel phases. */
.js .app-shell.is-scene-ready:not(.is-support-open) .main-scene:not(.is-sand-transition-out):not(.is-sand-transition-in):not(.is-ink-transition-out):not(.is-ink-transition-in) .dynamic-content-layer {
    opacity: 1;
}

.main-scene[data-scene-key="rights"] .dynamic-content-layer,
.main-scene[data-scene-key="feedback"] .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);
}

.poem-preview-document,
.poem-preview-body {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
}

.poem-preview-body .poem-preview-shell,
.poem-preview-body .main-scene {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}

.poem-preview-body .background-scene {
    position: fixed;
}

.poem-preview-body .dynamic-content-layer {
    position: relative;
    min-height: 100dvh;
}

.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: var(--layer-persistent-controls);
    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%;
    transition: opacity 320ms ease, filter 320ms ease, transform 420ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.poem-pager {
    position: fixed;
    z-index: var(--layer-pager);
    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);
    transition: opacity 320ms ease, filter 320ms ease, transform 420ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

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

.poem-pager.is-page-turning {
    pointer-events: none;
    visibility: hidden;
}

/* Support is one pullable object: the tab is the lower edge of the hidden drawer. */
.support-pull-shell {
    --support-tab-height: 44px;
    --support-bottom-gutter: 0.7rem;
    --support-drawer-height: calc(var(--viewport-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--support-tab-height) - var(--support-bottom-gutter));
    --support-peek-distance: 10px;
    position: fixed;
    z-index: 60;
    inset-block-start: env(safe-area-inset-top);
    inset-inline-end: max(env(safe-area-inset-right), 0.65rem);
    display: flex;
    flex-direction: column;
    width: min(27rem, calc(var(--viewport-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 1.3rem));
    transform: translate3d(0, var(--support-shell-offset, calc(-1 * var(--support-drawer-height))), 0);
    filter: drop-shadow(0 1.25rem 2.5rem rgb(41 34 31 / 20%));
    transition: transform 380ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.support-pull-shell[data-support-state="peek"] {
    --support-shell-offset: calc(-1 * var(--support-drawer-height) + var(--support-peek-distance));
    transition-duration: 180ms;
}

.support-pull-shell[data-support-state="closed"] {
    transition-duration: 340ms;
}

.support-pull-shell[data-support-state="opening"] {
    --support-shell-offset: 0px;
    transition-duration: 380ms;
}

.support-pull-shell[data-support-state="open"] {
    --support-shell-offset: 0px;
}

.support-pull-shell[data-support-state="dragging"] {
    --support-shell-offset: var(--support-drag-offset, calc(-1 * var(--support-drawer-height)));
    transition: none;
}

.support-pull-shell[data-support-state="closing"] {
    transition-duration: 340ms;
}

.app-shell.is-scene-pending .support-tab {
    pointer-events: none;
}

.support-backdrop {
    position: fixed;
    z-index: 59;
    inset: 0;
    background: rgb(39 33 31 / 18%);
    backdrop-filter: blur(0.16rem) saturate(82%);
    -webkit-backdrop-filter: blur(0.16rem) saturate(82%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.support-backdrop.is-open {
    opacity: 1;
}

.support-drawer {
    width: 100%;
    height: var(--support-drawer-height);
    max-height: var(--support-drawer-height);
    flex: 0 0 auto;
}

.support-pull-shell[data-support-state="closed"] .support-drawer,
.support-pull-shell[data-support-state="peek"] .support-drawer {
    pointer-events: none;
}

/* The phone shell spans the viewport so the drawer can stay centred. Its
   transparent closed area must not block poem controls beneath the tab. */
.support-pull-shell[data-support-state="closed"],
.support-pull-shell[data-support-state="peek"] {
    pointer-events: none;
}

.support-pull-shell[data-support-state="closed"] .support-tab,
.support-pull-shell[data-support-state="peek"] .support-tab {
    pointer-events: auto;
}

.support-pull-shell[data-support-state="closed"] .support-drawer {
    visibility: hidden;
}

.support-pull-shell[data-support-state="open"] .support-tab,
.support-pull-shell[data-support-state="opening"] .support-tab,
.support-pull-shell[data-support-state="closing"] .support-tab {
    pointer-events: none;
}

/* The support overlay changes presentation, never the current scene or its URL/state. */
.app-shell.is-support-open .dynamic-content-layer,
.app-shell.is-support-open .poem-pager,
.app-shell.is-support-open .floating-menu,
.app-shell.is-support-open .site-copyright--fallback {
    pointer-events: none;
    opacity: calc(1 - 0.7 * var(--support-scene-progress, 1));
    filter: blur(calc(0.34rem * var(--support-scene-progress, 1))) saturate(calc(1 - 0.24 * var(--support-scene-progress, 1))) brightness(calc(1 - 0.08 * var(--support-scene-progress, 1)));
    transform: translateX(calc(-0.36rem * var(--support-scene-progress, 1))) scale(calc(1 - 0.013 * var(--support-scene-progress, 1)));
}

.app-shell.is-support-open .background-scene {
    filter: brightness(calc(1 - 0.1 * var(--support-scene-progress, 1))) saturate(calc(1 - 0.22 * var(--support-scene-progress, 1)));
    transform: scale(calc(1 + 0.012 * var(--support-scene-progress, 1)));
}

@media (max-width: 720px) {
    .support-pull-shell {
        --support-bottom-gutter: 0.5rem;
    }
}

/* Portrait gets a dedicated edge-tab: it stays above the poem composition instead of crossing it. */
@media (max-width: 720px) and (orientation: portrait) {
    .support-pull-shell {
        inset-block-start: env(safe-area-inset-top);
    }
}

@media (max-width: 950px) and (orientation: landscape) {
    .support-pull-shell {
        inset-block-start: env(safe-area-inset-top);
    }
}

/* Phone drawers use the viewport as their horizontal shell. The tab keeps its own
   top-edge placement, while the pulled panel remains centred at every progress point. */
@media (max-width: 720px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    .support-pull-shell {
        --support-phone-inline-margin: max(0.75rem, calc(env(safe-area-inset-left) + 0.25rem), calc(env(safe-area-inset-right) + 0.25rem));
        inset-inline: 0;
        width: 100vw;
        align-items: stretch;
    }

    .support-pull-shell .support-drawer {
        width: auto;
        margin-inline: var(--support-phone-inline-margin);
    }
}

@media (max-width: 720px) and (orientation: portrait) {
    .support-pull-shell .support-tab {
        align-self: flex-end;
        margin-inline-end: max(0.85rem, calc(env(safe-area-inset-right) + 0.85rem));
    }
}

@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    .support-pull-shell .support-tab {
        align-self: flex-start;
        margin-inline-start: var(--support-top-edge-start, calc(env(safe-area-inset-left) + 4.6rem));
    }

    .support-drawer-scroll > section {
        width: min(100%, 36rem);
        margin-inline: auto;
    }
}

.system-status {
    position: fixed;
    z-index: var(--layer-status);
    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(var(--viewport-width, 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);
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.45rem);
    transition: opacity 180ms ease, transform 180ms ease;
}

.system-status.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.site-copyright--fallback {
    position: fixed;
    z-index: var(--layer-persistent-controls);
    inset-inline-start: 50%;
    inset-block-end: calc(env(safe-area-inset-bottom) + var(--space-3));
    max-width: min(44rem, calc(var(--viewport-width, 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;
    transition: opacity 320ms ease, filter 320ms ease, transform 420ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.site-copyright--fallback 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--fallback 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) and (orientation: portrait) {
    .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) + var(--mobile-bottom-ui-height))
            calc(env(safe-area-inset-left) + var(--space-2));
    }

    .main-scene[data-scene-key="rights"] .dynamic-content-layer,
    .main-scene[data-scene-key="feedback"] .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) + var(--mobile-bottom-ui-height) + 1rem)
            calc(env(safe-area-inset-left) + var(--space-2));
    }

    .poem-preview-body .dynamic-content-layer {
        min-height: var(--viewport-height, 100dvh);
    }

    .floating-menu {
        position: fixed;
        inset-block-start: auto;
        inset-block-end: calc(var(--mobile-safe-bottom) + 0.5rem);
        inset-inline-start: 50%;
        inset-inline-end: auto;
        grid-template-columns: repeat(var(--menu-item-count, 7), minmax(0, 1fr));
        grid-template-rows: minmax(44px, 1fr);
        grid-auto-flow: column;
        translate: -50% 0;
        width: calc(var(--viewport-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 1.25rem);
        min-width: min(19.25rem, calc(var(--viewport-width, 100vw) - 1rem));
        height: var(--mobile-dock-height);
        gap: 0.15rem;
        padding: 0.25rem;
        background: rgb(255 255 255 / 24%);
        border: 1px solid var(--color-line);
        border-radius: 0.7rem;
        backdrop-filter: blur(0.65rem) saturate(74%);
        -webkit-backdrop-filter: blur(0.65rem) saturate(74%);
    }

    .floating-menu .menu-button {
        width: 100%;
        min-width: 44px;
        height: 44px;
        align-self: center;
    }

    .poem-pager {
        inset-block-start: auto;
        inset-block-end: calc(var(--mobile-safe-bottom) + var(--mobile-dock-height) + var(--mobile-copyright-height) + 1.55rem);
        inset-inline-start: 50%;
        inset-inline-end: auto;
        grid-auto-flow: column;
        grid-template-columns: 44px minmax(3.4rem, auto) 44px;
        align-items: center;
        gap: 0.32rem;
        min-height: 3.1rem;
        padding: 0.25rem 0.34rem;
        translate: -50% 0;
        border-radius: 1.5rem;
    }

    .poem-pager .pager-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .poem-pager .pager-count {
        min-width: 3.4rem;
        padding-inline: 0.2rem;
        font-size: 0.75rem;
    }

    .system-status {
        inset-inline-start: calc(env(safe-area-inset-left) + var(--space-2));
        inset-block-end: calc(var(--mobile-safe-bottom) + var(--mobile-bottom-ui-height) + 0.55rem);
        max-width: calc(var(--viewport-width, 100vw) - 2 * var(--space-2));
        font-size: 0.76rem;
    }

    .app-shell.has-active-poem-pager .system-status {
        inset-block-start: calc(env(safe-area-inset-top) + 0.65rem);
        inset-block-end: auto;
        inset-inline-start: 50%;
        inset-inline-end: auto;
        translate: -50% 0;
    }

    .site-copyright--fallback {
        inset-inline-start: 50%;
        inset-inline-end: auto;
        inset-block-end: calc(var(--mobile-safe-bottom) + var(--mobile-dock-height) + 0.9rem);
        max-width: calc(var(--viewport-width, 100vw) - 2 * var(--space-2));
        translate: -50% 0;
        font-size: clamp(0.6875rem, 2.8vw, 0.75rem);
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    .site-copyright--fallback a {
        padding: 0.08rem 0.28rem;
        background: rgb(255 255 255 / 14%);
        border-color: rgb(255 255 255 / 20%);
        backdrop-filter: blur(0.35rem);
        -webkit-backdrop-filter: blur(0.35rem);
    }
}

@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
    :root {
        --mobile-rail-width: 3.5rem;
        --mobile-bottom-ui-height: 1rem;
    }

    .dynamic-content-layer {
        padding:
            calc(env(safe-area-inset-top) + 0.65rem)
            calc(env(safe-area-inset-right) + 5rem)
            calc(env(safe-area-inset-bottom) + 1.6rem)
            calc(env(safe-area-inset-left) + var(--mobile-rail-width) + 1rem);
    }

    .floating-menu {
        --control-size: 2.75rem;
        position: fixed;
        inset-block-start: var(--viewport-midpoint, 50dvh);
        inset-inline-start: calc(env(safe-area-inset-left) + 0.35rem);
        inset-inline-end: auto;
        inset-block-end: auto;
        translate: 0 -50%;
        transform: none;
        grid-template-columns: var(--control-size);
        grid-template-rows: repeat(var(--menu-item-count, 7), var(--control-size));
        grid-auto-flow: column;
        gap: 0.15rem;
        padding: 0.38rem;
        border-radius: 0.7rem;
        background: rgb(255 255 255 / 22%);
        backdrop-filter: blur(0.55rem) saturate(72%);
        -webkit-backdrop-filter: blur(0.55rem) saturate(72%);
    }

    .floating-menu .menu-button {
        width: var(--control-size);
        min-width: 44px;
        height: var(--control-size);
    }

    .site-copyright--fallback {
        inset-inline-start: calc(env(safe-area-inset-left) + var(--mobile-rail-width) + 0.5rem);
        inset-inline-end: calc(env(safe-area-inset-right) + 26.5rem);
        inset-block-end: calc(env(safe-area-inset-bottom) + 0.35rem);
        max-width: none;
        translate: 0;
        text-align: center;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .site-copyright--fallback a {
        padding: 0.04rem 0.22rem;
        background: rgb(255 255 255 / 10%);
        border-color: rgb(255 255 255 / 16%);
        backdrop-filter: blur(0.3rem);
        -webkit-backdrop-filter: blur(0.3rem);
    }

    .poem-pager {
        --control-size: 2.75rem;
        inset-block-start: 50%;
        inset-block-end: auto;
        inset-inline-start: auto;
        inset-inline-end: calc(env(safe-area-inset-right) + 0.75rem);
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: 2.75rem auto 2.75rem;
        gap: 0.2rem;
        min-height: 0;
        padding: 0.34rem;
        translate: 0 -50%;
        border-radius: 1.35rem;
    }

    .poem-pager .pager-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .poem-pager .pager-count {
        min-width: 2.75rem;
        padding-block: 0.18rem;
        font-size: 0.7rem;
    }

    .system-status {
        inset-inline-start: calc(env(safe-area-inset-left) + var(--mobile-rail-width) + 0.85rem);
        inset-block-end: calc(env(safe-area-inset-bottom) + 0.4rem);
        max-width: min(60vw, 25rem);
    }

    .app-shell.has-active-poem-pager .system-status {
        inset-block-start: calc(env(safe-area-inset-top) + 0.5rem);
        inset-block-end: auto;
    }
}

@media (max-width: 950px) and (max-height: 360px) and (orientation: landscape) {
    .floating-menu {
        grid-template-columns: var(--control-size);
        grid-template-rows: repeat(var(--menu-item-count, 7), var(--control-size));
    }

    .dynamic-content-layer {
        padding-inline-start: calc(env(safe-area-inset-left) + 6.25rem);
    }
}