.glass-panel {
    position: relative;
    width: var(--panel-width);
    max-width: 100%;
    max-height: min(72vh, 42rem);
    max-height: min(72dvh, 42rem);
    overflow: auto;
    padding: var(--public-panel-padding-block) var(--public-panel-padding-inline);
    color: var(--color-text);
    background:
        radial-gradient(ellipse at 16% 8%, rgb(255 255 255 / 11.25%), transparent 34%),
        radial-gradient(ellipse at 92% 88%, rgb(96 56 66 / 3.75%), transparent 42%),
        linear-gradient(135deg, var(--glass-fill-strong), rgb(255 255 255 / 3%) 44%, rgb(240 232 232 / 4.5%));
    border: 1px solid var(--glass-border);
    border-radius: var(--panel-radius);
    box-shadow:
        0 2rem 4.4rem rgb(43 38 42 / 10.5%),
        0 0.35rem 1.1rem rgb(255 255 255 / 6.75%) inset,
        0 0 0 1px rgb(255 255 255 / 7.5%) inset,
        -0.08rem -0.08rem 0.38rem rgb(255 255 255 / 13.5%) inset,
        0.08rem 0.1rem 0.28rem var(--glass-border-shadow) inset;
    backdrop-filter:
        blur(var(--glass-blur))
        saturate(var(--glass-saturation))
        brightness(1.03);
    -webkit-backdrop-filter:
        blur(var(--glass-blur))
        saturate(var(--glass-saturation))
        brightness(1.03);
}

.glass-panel::before,
.glass-panel::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border-radius: inherit;
}

.glass-panel::before {
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 0% 0%, var(--glass-highlight), transparent 42%),
        linear-gradient(128deg, rgb(255 255 255 / 9%), transparent 34% 76%, rgb(74 48 56 / 3.75%));
    box-shadow:
        1px 1px 0 rgb(255 255 255 / 15%) inset,
        -1px -1px 0 rgb(59 43 49 / 7.5%) inset;
    opacity: 0.72;
    mix-blend-mode: screen;
}

.glass-panel::after {
    inset: 0;
    z-index: 0;
    background:
        repeating-radial-gradient(circle at 24% 18%, rgb(255 255 255 / 20%) 0 0.7px, transparent 0.8px 2.6px),
        radial-gradient(ellipse at 20% 28%, rgb(255 255 255 / 20%), transparent 31%),
        radial-gradient(ellipse at 76% 72%, rgb(69 43 50 / 13%), transparent 36%);
    filter: url("#glass-refraction") opacity(var(--glass-noise-opacity));
    opacity: 1;
    mix-blend-mode: overlay;
}

.glass-panel > * {
    position: relative;
    z-index: 1;
}

.panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin-block-end: var(--panel-copyright-safe-block);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: var(--panel-copyright-safe-block);
    scrollbar-color: rgb(103 48 71 / 56%) transparent;
}

.site-copyright--panel {
    position: absolute;
    z-index: 2;
    inset-inline-end: var(--panel-copyright-inset-inline);
    inset-block-end: var(--panel-copyright-inset-block);
    color: var(--color-text-soft);
    font-family: var(--font-ui);
    font-size: var(--panel-copyright-font-size);
    font-weight: 500;
    line-height: 1.2;
    opacity: var(--panel-copyright-opacity);
    text-align: end;
    white-space: nowrap;
}

.site-copyright--panel a {
    display: inline-block;
    padding: 0.08rem 0.12rem;
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.site-copyright--panel a:hover,
.site-copyright--panel a:focus-visible {
    color: var(--color-text);
    opacity: 1;
    text-decoration: underline;
}

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

/* A poem's rights link lives in its reading surface, not in a reserved footer. */
.site-copyright--poem {
    position: absolute;
    z-index: 4;
    right: 0.08rem;
    bottom: 0.1rem;
    color: var(--color-text-soft);
    font-family: var(--font-ui);
    font-size: var(--poem-copyright-font-size);
    font-weight: 500;
    line-height: 1;
    opacity: var(--poem-copyright-opacity);
    text-align: center;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.site-copyright--poem a {
    display: inline-block;
    padding: 0.1rem 0.08rem;
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.site-copyright--poem a:hover,
.site-copyright--poem a:focus-visible {
    color: var(--color-text);
    opacity: 1;
    text-decoration: underline;
}

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

@supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) {
    .glass-panel,
    .poem-pager,
    .floating-menu,
    .system-status {
        background: rgb(255 255 255 / 66%);
    }

    .poem-readability-veil {
        background: linear-gradient(180deg, rgb(250 248 244 / 72%), rgb(250 248 244 / 58%) 76%, rgb(250 248 244 / 34%));
    }
}

.panel-kicker {
    margin: 0 0 var(--space-2);
    color: var(--color-text-soft);
    text-shadow: 0 1px 0 rgb(255 255 255 / 42%);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.glass-panel h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: var(--scene-panel-title);
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 0.16rem 0.4rem rgb(255 255 255 / 28%);
}

.poem-panel,
.content-panel {
    --glass-render-density: 0.06;
}

.poem-panel,
.content-panel,
.login-panel,
.feedback-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Safari must not scroll text inside the same compositing layer as the glass material.
   The panel is only a clipping frame; fixed material layers sit below the foreground text viewport. */
.poem-panel {
    isolation: isolate;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.poem-panel::before,
.poem-panel::after {
    display: none;
}

.poem-panel-glass {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 16% 8%, rgb(255 255 255 / 11.25%), transparent 34%),
        radial-gradient(ellipse at 92% 88%, rgb(96 56 66 / 3.75%), transparent 42%),
        linear-gradient(135deg, var(--glass-fill-strong), rgb(255 255 255 / 3%) 44%, rgb(240 232 232 / 4.5%));
    border: 1px solid var(--glass-border);
    border-radius: inherit;
    box-shadow:
        0 2rem 4.4rem rgb(43 38 42 / 10.5%),
        0 0.35rem 1.1rem rgb(255 255 255 / 6.75%) inset,
        0 0 0 1px rgb(255 255 255 / 7.5%) inset,
        -0.08rem -0.08rem 0.38rem rgb(255 255 255 / 13.5%) inset,
        0.08rem 0.1rem 0.28rem var(--glass-border-shadow) inset;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) brightness(1.03);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) brightness(1.03);
}

.poem-panel:not(.prologue-panel) .poem-header {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.72rem;
    padding:
        var(--poem-content-block-inset)
        max(var(--poem-content-inline-inset), calc(var(--bookmark-width) + 1.55rem))
        calc(0.2rem + var(--poem-content-block-inset))
        var(--poem-content-inline-inset);
}

.poem-panel:not(.prologue-panel) .poem-header h1 {
    min-width: 0;
    color: var(--poem-title-color);
    font-family: var(--poem-title-font-family);
    font-size: var(--poem-title-size);
    font-weight: var(--poem-title-weight);
    margin: 0;
    padding: 0;
    text-shadow: none;
}

.poem-pager-host {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 2.38rem;
}

.poem-pager-host > .poem-pager {
    position: static;
    z-index: auto;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 2.38rem minmax(2.82rem, auto) 2.38rem;
    grid-template-rows: none;
    align-items: center;
    justify-items: center;
    gap: 0.08rem;
    width: auto;
    min-height: 2.28rem;
    padding: 0.03rem 0.1rem;
    color: var(--color-text);
    background: rgb(255 255 255 / 24%);
    border: 1px solid rgb(255 255 255 / 46%);
    border-radius: 999rem;
    box-shadow: 0 0.22rem 0.55rem rgb(67 44 52 / 10%), 0 0.08rem 0.24rem rgb(255 255 255 / 38%) inset;
    backdrop-filter: blur(0.48rem) saturate(74%);
    -webkit-backdrop-filter: blur(0.48rem) saturate(74%);
    translate: none;
}

.poem-pager-host > .poem-pager .pager-button {
    width: 2.38rem;
    min-width: 2.38rem;
    height: 2.38rem;
    color: var(--color-text);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.poem-pager-host > .poem-pager .pager-button svg {
    width: 0.94rem;
    height: 0.94rem;
}

.poem-pager-host > .poem-pager .pager-button:hover,
.poem-pager-host > .poem-pager .pager-button:focus-visible {
    background: rgb(255 255 255 / 22%);
    box-shadow: 0 0.1rem 0.25rem rgb(67 44 52 / 8%) inset;
    transform: none;
}

.poem-pager-host > .poem-pager .pager-count {
    min-width: 2.82rem;
    padding-inline: 0.08rem;
    font-size: 0.69rem;
}

/* This veil is part of the panel material and stays fixed while poem text scrolls. */
.poem-readability-veil {
    position: absolute;
    z-index: 1;
    inset:
        calc(var(--public-panel-padding-block) - 0.24rem)
        calc(var(--public-panel-padding-inline) - 0.3rem)
        calc(var(--public-panel-padding-block) - 0.24rem);
    pointer-events: none;
    border-radius: 0.8rem 1rem 0.95rem 0.9rem;
    background:
        radial-gradient(120% 90% at 12% 0%, var(--poem-readability-fill), transparent 74%),
        linear-gradient(180deg, var(--poem-readability-fill) 0%, var(--poem-readability-fill) 66%, var(--poem-readability-fill-edge) 88%, rgb(250 248 244 / 0%) 100%);
    backdrop-filter: blur(var(--poem-readability-blur)) saturate(78%) brightness(1.035);
    -webkit-backdrop-filter: blur(var(--poem-readability-blur)) saturate(78%) brightness(1.035);
}

.poem-panel > :not(.poem-panel-glass):not(.poem-readability-veil) {
    z-index: 3;
}

.poem-preview-badge {
    width: fit-content;
    margin: 0 0 var(--space-2);
    padding: 0.3rem 0.55rem;
    color: var(--color-text-soft);
    border-inline-start: 2px solid #7f3948;
    font-size: 0.73rem;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
}

.poem-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
}

.poem-preview-toolbar .poem-preview-badge {
    margin: 0;
}

.poem-preview-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.6rem;
    color: var(--color-text-soft);
    border: 1px solid rgb(96 38 58 / 24%);
    border-radius: 0.45rem;
    background: rgb(255 255 255 / 12%);
    font-size: 0.78rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    backdrop-filter: blur(0.7rem) saturate(76%);
    -webkit-backdrop-filter: blur(0.7rem) saturate(76%);
}

.poem-preview-back-link:hover {
    color: var(--color-text);
    background: rgb(255 255 255 / 21%);
}

.poem-preview-back-link:focus-visible {
    outline: 2px solid #7f3948;
    outline-offset: 3px;
}

.poem-body {
    color: var(--poem-text-color);
    font-family: var(--poem-body-font-family);
    font-size: var(--poem-body-size);
    font-weight: var(--poem-text-weight);
    font-synthesis: none;
    letter-spacing: 0;
    line-height: var(--poem-body-line-height);
    white-space: pre-wrap;
    text-shadow: var(--poem-text-shadow);
}

.poem-reading-area {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.poem-panel:not(.prologue-panel) .poem-body {
    flex: 1 1 auto;
    min-height: 0;
    margin-inline: 0;
    padding:
        var(--poem-content-block-inset)
        calc(var(--poem-content-inline-inset) + var(--poem-copyright-rail-size))
        var(--poem-content-block-inset)
        var(--poem-content-inline-inset);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgb(103 48 71 / 56%) transparent;
    -webkit-overflow-scrolling: touch;
    contain: none;
    content-visibility: visible;
    clip-path: none;
    filter: none;
    mask: none;
    -webkit-mask-image: none;
    transform: none;
    will-change: auto;
    isolation: isolate;
    mix-blend-mode: normal;
}

.poem-body .poem-stanza {
    display: block;
    contain: none;
    content-visibility: visible;
}

.poem-panel:not(.prologue-panel) .poem-body:focus-visible {
    outline: 2px solid #7f3948;
    outline-offset: 0.25rem;
}

.poem-media-composition {
    --poem-audio-drawer-overlap: 0.4rem;
    position: relative;
    width: var(--panel-width);
    max-width: 100%;
    transition: height var(--poem-audio-transition-duration) cubic-bezier(0.22, 0.72, 0.26, 1);
}

/* The ribbon sits in the composition rather than in the clipped glass panel: its rear
 * strip can pass behind the panel while the fabric and clasp remain in front. */
.poem-bookmark-back {
    position: absolute;
    z-index: 1;
    inset-block-start: -0.63rem;
    inset-inline-end: clamp(0.95rem, 3vw, 1.45rem);
    width: var(--bookmark-width);
    height: 1.72rem;
    opacity: 0.76;
    background:
        linear-gradient(90deg, rgb(57 35 21 / 34%), transparent 23%, rgb(255 244 207 / 38%) 52%, transparent 73%, rgb(70 45 24 / 34%)),
        linear-gradient(180deg, var(--bookmark-fabric-dark), var(--bookmark-fabric-mid) 60%, var(--bookmark-fabric-dark));
    border-radius: 0.14rem 0.14rem 0.25rem 0.25rem;
    box-shadow: 0 0.28rem 0.46rem rgb(45 30 23 / 20%);
    transform: rotateX(64deg) translateY(0.25rem);
    transform-origin: 50% 100%;
    transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 220ms ease;
}

.poem-bookmark-back.is-bookmarked {
    transform: rotateX(64deg) translateY(calc(0.25rem + var(--bookmark-set-offset)));
}

.poem-bookmark-back.is-disabled {
    background:
        linear-gradient(90deg, rgb(24 27 24 / 30%), transparent 28%, rgb(241 242 229 / 22%) 51%, transparent 74%, rgb(23 26 23 / 28%)),
        linear-gradient(180deg, var(--bookmark-disabled-dark), var(--bookmark-disabled-mid) 60%, var(--bookmark-disabled-dark));
}

.reading-bookmark-form {
    position: absolute;
    z-index: 3;
    inset-block-start: -0.72rem;
    inset-inline-end: clamp(0.47rem, 2.1vw, 0.88rem);
    width: 2.75rem;
    height: calc(var(--bookmark-length) + 1.35rem);
    margin: 0;
}

.poem-bookmark-ribbon {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    color: inherit;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    perspective: 22rem;
}

.poem-bookmark-fold {
    position: absolute;
    z-index: 2;
    inset-block-start: 0.32rem;
    inset-inline-start: 50%;
    width: calc(var(--bookmark-width) + 0.16rem);
    height: 0.66rem;
    background:
        linear-gradient(90deg, rgb(70 44 20 / 70%), rgb(255 239 180 / 80%) 42%, rgb(147 101 43 / 78%) 72%, rgb(72 46 22 / 72%));
    border: 1px solid rgb(255 242 194 / 35%);
    border-radius: 0.14rem 0.14rem 0.28rem 0.28rem;
    box-shadow: 0 0.2rem 0.32rem rgb(47 29 20 / 26%);
    transform: translateX(-50%) rotateX(62deg);
    transform-origin: 50% 0;
    transition: transform 360ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.poem-bookmark-ribbon-front {
    position: absolute;
    z-index: 1;
    inset-block-start: 0.56rem;
    inset-inline-start: 50%;
    width: var(--bookmark-width);
    height: var(--bookmark-length);
    filter: drop-shadow(0.17rem 0.34rem 0.32rem var(--bookmark-shadow));
    transform: translateX(-50%);
    transform-style: preserve-3d;
    transition: transform 390ms cubic-bezier(0.18, 0.9, 0.28, 1), filter 200ms ease;
}

.poem-bookmark-ribbon-upper,
.poem-bookmark-ribbon-lower {
    position: absolute;
    inset-inline: 0;
    display: block;
    overflow: hidden;
    background:
        repeating-linear-gradient(108deg, transparent 0 0.1rem, rgb(255 247 205 / 14%) 0.12rem 0.15rem, transparent 0.18rem 0.31rem),
        repeating-linear-gradient(84deg, transparent 0 0.2rem, rgb(90 58 25 / 12%) 0.22rem 0.25rem, transparent 0.28rem 0.4rem),
        linear-gradient(90deg, var(--bookmark-fabric-dark), var(--bookmark-fabric-mid) 22%, var(--bookmark-fabric-light) 48%, #c29447 70%, var(--bookmark-fabric-dark));
    border-inline: 1px solid rgb(255 243 199 / 25%);
}

.poem-bookmark-ribbon-upper {
    inset-block-start: 0;
    height: 50%;
    border-radius: 0.12rem 0.12rem 0 0;
    box-shadow: inset 0 0.14rem 0.17rem rgb(255 247 209 / 28%), inset 0 -0.24rem 0.25rem rgb(79 51 24 / 18%);
    transform-origin: 50% 0;
}

.poem-bookmark-ribbon-lower {
    inset-block-start: 47%;
    height: 53%;
    clip-path: polygon(0 0, 100% 0, 100% 83%, 50% 100%, 0 83%);
    box-shadow: inset 0 0.12rem 0.15rem rgb(255 247 208 / 16%), inset 0 -0.2rem 0.22rem rgb(72 44 19 / 20%);
    transform-origin: 50% 0;
}

.poem-bookmark-clasp {
    position: absolute;
    z-index: 3;
    inset-block-start: 61%;
    inset-inline-start: 50%;
    width: calc(var(--bookmark-width) + 0.36rem);
    height: 0.22rem;
    opacity: 0;
    background: linear-gradient(180deg, #fff3bd, #d4a444 46%, #79521f);
    border: 1px solid rgb(90 58 21 / 48%);
    border-radius: 999rem;
    box-shadow: 0 0.1rem 0.2rem rgb(54 33 16 / 34%), inset 0 0.06rem 0.08rem rgb(255 255 232 / 48%);
    transform: translate(-50%, -0.2rem) scaleX(0.78);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.24, 0.9, 0.32, 1);
}

.poem-bookmark-ribbon.is-bookmarked .poem-bookmark-ribbon-front {
    transform: translate(-50%, var(--bookmark-set-offset));
}

.poem-bookmark-ribbon.is-bookmarked .poem-bookmark-fold {
    transform: translate(-50%, 0.17rem) rotateX(56deg) scaleY(1.08);
}

.poem-bookmark-ribbon.is-bookmarked .poem-bookmark-clasp {
    opacity: 1;
    transform: translate(-50%, 0) scaleX(1);
}

.poem-bookmark-ribbon.is-disabled {
    cursor: default;
}

.poem-bookmark-ribbon.is-disabled .poem-bookmark-fold {
    background: linear-gradient(90deg, #414840, #a7a69a 48%, #565950);
    border-color: rgb(238 239 225 / 18%);
}

.poem-bookmark-ribbon.is-disabled .poem-bookmark-ribbon-upper,
.poem-bookmark-ribbon.is-disabled .poem-bookmark-ribbon-lower {
    background:
        repeating-linear-gradient(108deg, transparent 0 0.1rem, rgb(240 243 229 / 8%) 0.12rem 0.15rem, transparent 0.18rem 0.31rem),
        repeating-linear-gradient(84deg, transparent 0 0.2rem, rgb(17 22 19 / 14%) 0.22rem 0.25rem, transparent 0.28rem 0.4rem),
        linear-gradient(90deg, var(--bookmark-disabled-dark), var(--bookmark-disabled-mid) 28%, var(--bookmark-disabled-light) 50%, #797a71 72%, var(--bookmark-disabled-dark));
    border-color: rgb(238 240 226 / 15%);
}

.poem-bookmark-tooltip {
    position: absolute;
    inset-block-start: calc(0.55rem - 10px);
    inset-inline-end: calc(100% + 0.35rem);
    width: max-content;
    max-width: min(15rem, 58vw);
    padding: 0.36rem 0.48rem;
    color: #fffaf2;
    background: rgb(46 32 29 / 92%);
    border-radius: 0.26rem;
    font: 0.72rem/1.25 var(--font-ui);
    opacity: 0;
    pointer-events: none;
    transform: translateX(0.22rem);
    transition: opacity 150ms ease, transform 150ms ease;
}

.poem-bookmark-ribbon:not(.is-disabled):hover .poem-bookmark-tooltip,
.poem-bookmark-ribbon:not(.is-disabled):focus-visible .poem-bookmark-tooltip,
.reading-bookmark-form:hover .poem-bookmark-ribbon.is-disabled .poem-bookmark-tooltip {
    opacity: 1;
    transform: translateX(0);
}

.poem-bookmark-ribbon:not(.is-disabled):hover .poem-bookmark-ribbon-upper,
.poem-bookmark-ribbon:not(.is-disabled):focus-visible .poem-bookmark-ribbon-upper {
    animation: bookmark-fabric-upper var(--bookmark-hover-duration) cubic-bezier(0.37, 0, 0.2, 1) both;
}

.poem-bookmark-ribbon:not(.is-disabled):hover .poem-bookmark-ribbon-lower,
.poem-bookmark-ribbon:not(.is-disabled):focus-visible .poem-bookmark-ribbon-lower {
    animation: bookmark-fabric-lower var(--bookmark-hover-duration) cubic-bezier(0.37, 0, 0.2, 1) both;
}

.poem-bookmark-ribbon:not(.is-disabled):hover .poem-bookmark-ribbon-front,
.poem-bookmark-ribbon:not(.is-disabled):focus-visible .poem-bookmark-ribbon-front {
    filter: drop-shadow(0.22rem 0.38rem 0.38rem rgb(45 30 23 / 33%)) brightness(1.035);
}

.poem-bookmark-ribbon:focus-visible {
    outline: 2px solid #7f3948;
    outline-offset: 0.12rem;
    border-radius: 0.28rem;
}

.poem-bookmark-ribbon.is-setting .poem-bookmark-ribbon-front {
    animation: bookmark-lock 430ms cubic-bezier(0.18, 0.92, 0.26, 1) both;
}

.poem-bookmark-ribbon.is-clearing .poem-bookmark-clasp {
    opacity: 0;
    transform: translate(-50%, -0.24rem) scaleX(0.72);
}

.poem-bookmark-ribbon.is-clearing .poem-bookmark-ribbon-front {
    animation: bookmark-release 410ms cubic-bezier(0.3, 0.05, 0.22, 1) both;
}

@keyframes bookmark-fabric-upper {
    0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0); background-position: 0 0; }
    35% { transform: translate3d(0.025rem, 0.01rem, 0) rotateZ(0.32deg); background-position: 0.16rem 0, 0 0, 0.12rem 0; }
    67% { transform: translate3d(-0.02rem, 0, 0) rotateZ(-0.2deg); background-position: -0.08rem 0, 0 0, -0.05rem 0; }
}

@keyframes bookmark-fabric-lower {
    0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0); background-position: 0 0; }
    32% { transform: translate3d(0.14rem, 0.02rem, 0) rotateZ(1.8deg) skewX(-1deg); background-position: 0.35rem 0, 0 0, 0.26rem 0; }
    66% { transform: translate3d(-0.1rem, 0.01rem, 0) rotateZ(-1.2deg) skewX(0.6deg); background-position: -0.18rem 0, 0 0, -0.12rem 0; }
}

@keyframes bookmark-lock {
    0% { transform: translate(-50%, 0) scaleY(1); }
    48% { transform: translate(-50%, calc(var(--bookmark-set-offset) + 0.15rem)) scaleY(1.045); }
    100% { transform: translate(-50%, var(--bookmark-set-offset)) scaleY(1); }
}

@keyframes bookmark-release {
    0% { transform: translate(-50%, var(--bookmark-set-offset)) scaleY(1); }
    54% { transform: translate(-50%, -0.09rem) scaleY(0.97); }
    100% { transform: translate(-50%, 0) scaleY(1); }
}

.poem-media-composition > .poem-panel {
    z-index: 2;
    width: 100%;
    max-width: 100%;
}

.poem-book {
    --poem-turn-duration: 950ms;
    --poem-turn-easing: cubic-bezier(0.2, 0.72, 0.2, 1);
    position: relative;
    width: var(--panel-width);
    max-width: 100%;
    isolation: isolate;
    overflow: visible;
    perspective: 92rem;
    transform-style: preserve-3d;
    transition: height 240ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.poem-page {
    width: 100%;
}

.poem-book__bottom {
    position: relative;
    z-index: 1;
}

.poem-book.is-prepared .poem-book__bottom,
.poem-book__top {
    position: absolute;
    inset: 0;
}

.poem-book__bottom {
    pointer-events: none;
}

.poem-book__top {
    z-index: 2;
    transform-origin: 100% 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: clip-path, filter, opacity, transform;
}

.poem-page-fold,
.poem-page-fold::after {
    position: absolute;
    pointer-events: none;
    content: "";
}

.poem-page-fold {
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    background: linear-gradient(90deg, transparent 28%, rgb(255 255 255 / 24%) 39%, rgb(255 255 255 / 88%) 48%, rgb(92 61 69 / 34%) 54%, transparent 66%);
    clip-path: polygon(100% 82%, 100% 82%, 78% 100%, 78% 100%);
    filter: drop-shadow(-0.85rem 0.18rem 0.72rem rgb(58 38 44 / 26%));
    transform: translate3d(0, 0, 2rem);
    transform-origin: 100% 100%;
    will-change: clip-path, opacity, transform;
}

.poem-page-fold::after {
    inset: 0;
    background: linear-gradient(90deg, transparent 36%, rgb(255 255 255 / 42%) 48%, transparent 61%);
    mix-blend-mode: screen;
}

.poem-book.is-turning[data-turn-direction="forward"] .poem-book__top {
    animation: poem-page-turn-forward var(--poem-turn-duration) var(--poem-turn-easing) both;
}

.poem-book.is-turning[data-turn-direction="backward"] .poem-book__top {
    transform-origin: 0 0;
    animation: poem-page-turn-backward var(--poem-turn-duration) var(--poem-turn-easing) both;
}

.poem-book.is-turning .poem-book__top .poem-panel-glass {
    background:
        radial-gradient(ellipse at 16% 8%, rgb(255 255 255 / 99%), transparent 36%),
        linear-gradient(135deg, rgb(255 255 255 / 98%), rgb(251 246 244 / 96%) 52%, rgb(237 226 229 / 93%));
    background-color: rgb(248 244 243);
    backdrop-filter: blur(1.5rem) saturate(70%) brightness(1.03);
    -webkit-backdrop-filter: blur(1.5rem) saturate(70%) brightness(1.03);
}

.poem-book.is-turning[data-turn-direction="forward"] .poem-page-fold {
    animation: poem-page-fold-forward var(--poem-turn-duration) var(--poem-turn-easing) both;
}

.poem-book.is-turning[data-turn-direction="backward"] .poem-page-fold {
    inset: 0;
    clip-path: polygon(0 14%, 0 14%, 18% 0, 18% 0);
    filter: drop-shadow(0.85rem -0.18rem 0.72rem rgb(58 38 44 / 26%));
    transform-origin: 0 0;
    animation: poem-page-fold-backward var(--poem-turn-duration) var(--poem-turn-easing) both;
}

.poem-book.is-reduced-turn .poem-book__top {
    animation: poem-page-turn-reduced 180ms ease both;
}

.poem-book.is-reduced-turn .poem-page-fold {
    display: none;
}

@keyframes poem-page-turn-forward {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0);
    }

    20% {
        clip-path: polygon(0 0, 100% 0, 100% 82%, 78% 100%, 0 100%);
        opacity: 1;
        transform: translate3d(-0.4%, -1.2%, 0.55rem) rotateX(1.4deg) rotateY(-1.8deg) rotateZ(-0.6deg);
    }

    50% {
        clip-path: polygon(0 0, 70% 0, 28% 100%, 0 100%, 0 100%);
        opacity: 1;
        transform: translate3d(-1.8%, -5%, 1.35rem) rotateX(4.6deg) rotateY(-5.4deg) rotateZ(-2.4deg);
    }

    76% {
        clip-path: polygon(0 0, 38% 0, 0 54%, 0 54%, 0 54%);
        opacity: 0.82;
        transform: translate3d(-6%, -36%, 1.65rem) rotateX(7.2deg) rotateY(-7.8deg) rotateZ(-4.6deg);
    }

    100% {
        clip-path: polygon(0 0, 12% 0, 0 16%, 0 16%, 0 16%);
        opacity: 0;
        transform: translate3d(-11%, -108%, 2rem) rotateX(9deg) rotateY(-10deg) rotateZ(-6deg);
    }
}

@keyframes poem-page-turn-backward {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0);
    }

    20% {
        clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
        opacity: 1;
        transform: translate3d(0.4%, 1.2%, 0.55rem) rotateX(-1.4deg) rotateY(1.8deg) rotateZ(0.6deg);
    }

    50% {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 100%, 0 100%);
        opacity: 1;
        transform: translate3d(1.8%, 5%, 1.35rem) rotateX(-4.6deg) rotateY(5.4deg) rotateZ(2.4deg);
    }

    76% {
        clip-path: polygon(100% 48%, 100% 100%, 36% 100%, 36% 100%, 36% 100%);
        opacity: 0.82;
        transform: translate3d(6%, 36%, 1.65rem) rotateX(-7.2deg) rotateY(7.8deg) rotateZ(4.6deg);
    }

    100% {
        clip-path: polygon(100% 86%, 100% 100%, 88% 100%, 88% 100%, 88% 100%);
        opacity: 0;
        transform: translate3d(11%, 108%, 2rem) rotateX(-9deg) rotateY(10deg) rotateZ(6deg);
    }
}

@keyframes poem-page-fold-forward {
    0%, 10% {
        opacity: 0;
    }

    24% {
        opacity: 0.72;
        clip-path: polygon(100% 68%, 100% 76%, 82% 100%, 74% 100%);
        transform: translate3d(-0.4%, -0.8%, 2rem);
    }

    52% {
        opacity: 1;
        clip-path: polygon(70% 0, 77% 0, 35% 100%, 28% 100%);
        transform: translate3d(-1.8%, -5%, 2.15rem);
    }

    78% {
        opacity: 0.7;
        clip-path: polygon(38% 0, 46% 0, 7% 54%, 0 54%);
        transform: translate3d(-6%, -36%, 2.25rem);
    }

    100% {
        opacity: 0;
        clip-path: polygon(12% 0, 18% 0, 0 18%, 0 12%);
        transform: translate3d(-11%, -108%, 2.4rem);
    }
}

@keyframes poem-page-fold-backward {
    0%, 10% {
        opacity: 0;
    }

    24% {
        opacity: 0.72;
        clip-path: polygon(0 10%, 0 18%, 24% 0, 17% 0);
        transform: translate3d(0.4%, 0.8%, 2rem);
    }

    52% {
        opacity: 1;
        clip-path: polygon(0 100%, 7% 100%, 100% 0, 93% 0);
        transform: translate3d(1.8%, 5%, 2.15rem);
    }

    78% {
        opacity: 0.7;
        clip-path: polygon(100% 48%, 100% 55%, 43% 100%, 36% 100%);
        transform: translate3d(6%, 36%, 2.25rem);
    }

    100% {
        opacity: 0;
        clip-path: polygon(100% 86%, 100% 100%, 88% 100%, 88% 94%);
        transform: translate3d(11%, 108%, 2.4rem);
    }
}

@keyframes poem-page-turn-reduced {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.poem-fixed-controls {
    position: relative;
    z-index: 4;
    display: flex;
    flex: 0 0 2.75rem;
    align-items: end;
    justify-content: end;
    gap: 0.16rem;
    min-height: 2.75rem;
    margin-block: var(--space-1) 0;
    margin-inline-start: auto;
    pointer-events: auto;
}

.poem-comments-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 4px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 170ms ease, filter 170ms ease;
}

.poem-comments-toggle::before {
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--poem-media-control-size);
    height: var(--poem-media-control-size);
    content: "";
    background: radial-gradient(circle at 50% 38%, rgb(255 255 255 / 76%), rgb(255 255 255 / 26%) 70%), var(--poem-audio-control-bg);
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: 999rem;
    box-shadow: 0 0.35rem 1rem rgb(67 44 52 / 15%), 0 0.15rem 0.35rem rgb(255 255 255 / 50%) inset, 0 -0.18rem 0.4rem rgb(80 38 47 / 11%) inset;
    pointer-events: none;
    translate: -50% -50%;
}

.poem-comments-toggle svg,
.poem-comments-toggle > span:not(.poem-audio-tooltip) {
    position: relative;
    z-index: 1;
}

.poem-comments-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
}

.poem-comments-toggle > span:not(.poem-audio-tooltip) {
    min-width: 0.76rem;
    margin-inline-start: -0.24rem;
    padding: 0.02rem 0.18rem;
    color: #fffaf5;
    background: #7f3948;
    border-radius: 999rem;
    font: 700 0.61rem/1 var(--font-ui);
}

.poem-comments-toggle:hover,
.poem-comments-toggle:focus-visible {
    filter: brightness(1.035);
    transform: translateY(-0.1rem) scale(1.04);
}

.poem-comments-toggle:hover .poem-audio-tooltip,
.poem-comments-toggle:focus-visible .poem-audio-tooltip {
    opacity: 1;
    transform: translateX(0);
}

.poem-share {
    position: relative;
    z-index: 7;
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
}

.poem-share-toggle,
.poem-share-action {
    position: relative;
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    padding: 4px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
}

.poem-share-toggle::before,
.poem-share-action::before {
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--poem-media-control-size);
    height: var(--poem-media-control-size);
    content: "";
    background:
        radial-gradient(circle at 50% 38%, rgb(255 255 255 / 76%), rgb(255 255 255 / 26%) 70%),
        var(--poem-audio-control-bg);
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: 999rem;
    box-shadow:
        0 0.35rem 1rem rgb(67 44 52 / 15%),
        0 0.15rem 0.35rem rgb(255 255 255 / 50%) inset,
        0 -0.18rem 0.4rem rgb(80 38 47 / 11%) inset;
    pointer-events: none;
    translate: -50% -50%;
    transition: background 170ms ease, box-shadow 170ms ease;
}

.poem-share-toggle img,
.poem-share-action img {
    position: relative;
    z-index: 1;
    width: 1.08rem;
    height: 1.08rem;
    opacity: 0.84;
    filter: grayscale(1) contrast(0.82);
}

.poem-share-toggle:hover,
.poem-share-toggle:focus-visible,
.poem-share.is-open .poem-share-toggle,
.poem-share-action:hover,
.poem-share-action:focus-visible {
    filter: brightness(1.04);
    transform: translateY(-0.1rem) scale(1.04);
}

.poem-share-toggle:active,
.poem-share-action:active {
    transform: translateY(0.04rem) scale(0.985);
}

.poem-share-toggle:focus-visible,
.poem-share-action:focus-visible {
    outline: 2px solid #7f3948;
    outline-offset: 2px;
}

.poem-share-tray {
    position: absolute;
    z-index: 9;
    inset-block-start: calc(100% + 0.26rem);
    inset-block-end: auto;
    inset-inline-end: 0;
    display: flex;
    gap: 0.04rem;
    padding: 0.18rem;
    color: var(--color-text);
    background: rgb(255 255 255 / 38%);
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: 1.45rem;
    box-shadow:
        0 0.7rem 1.45rem rgb(54 40 43 / 18%),
        0 0.14rem 0.32rem rgb(255 255 255 / 44%) inset,
        0 -0.16rem 0.32rem rgb(78 46 55 / 10%) inset;
    backdrop-filter: blur(0.8rem) saturate(72%);
    -webkit-backdrop-filter: blur(0.8rem) saturate(72%);
    opacity: 0;
    transform: translateY(-0.24rem) scale(0.96);
    transform-origin: 100% 0;
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.poem-share.is-open .poem-share-tray {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.poem-panel:has(.poem-share.is-open) .site-copyright--poem {
    visibility: hidden;
}

.poem-share-tray[hidden] {
    display: none;
}

.poem-share-action {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
}

.poem-share-action[hidden] {
    display: none;
}

.poem-share-action::before {
    width: 2.08rem;
    height: 2.08rem;
    background: rgb(255 255 255 / 28%);
    box-shadow: 0 0.12rem 0.28rem rgb(67 44 52 / 10%) inset;
}

.poem-share-action:hover img,
.poem-share-action:focus-visible img {
    opacity: 1;
    filter: grayscale(0.35) contrast(0.92);
}

.poem-share-toggle:hover .poem-audio-tooltip,
.poem-share-toggle:focus-visible .poem-audio-tooltip,
.poem-share-action:hover .poem-audio-tooltip,
.poem-share-action:focus-visible .poem-audio-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Deliberately quiet project-support drawer. It is not a checkout surface. */
.support-root { color: var(--support-text); font-family: var(--font-ui); }
.support-toast { position: fixed; z-index: 61; inset-inline-start: 50%; inset-block-start: 50%; max-width: min(22rem, calc(var(--viewport-width, 100vw) - 2rem)); padding: 0.62rem 0.82rem; color: #292423; background: rgb(255 253 249 / 88%); border: 1px solid rgb(255 255 255 / 84%); border-radius: 0.42rem; box-shadow: 0 0.8rem 2rem rgb(36 29 27 / 24%), 0 0.08rem 0.24rem rgb(255 255 255 / 58%) inset; font: 600 0.84rem/1.35 var(--font-ui); text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-50% + 0.42rem)) scale(0.985); transition: opacity 160ms ease, transform 180ms ease; }
.support-toast.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.support-toast[data-tone="error"] { color: #443b37; background: rgb(255 248 242 / 92%); }
.support-tab { position: relative; z-index: 1; display: inline-flex; align-self: flex-end; width: clamp(7.85rem, 34vw, 8.45rem); min-width: 7.85rem; height: var(--support-tab-height, 44px); align-items: center; justify-content: center; margin-block-start: -1px; padding: 0 0.72rem; color: #5d4b29; background: var(--support-tab-fill); border: 1px solid var(--support-tab-border); border-block-start: 0; border-radius: 0 0 0.72rem 0.72rem; box-shadow: 0 0.1rem 0.3rem rgb(255 255 255 / 45%) inset; cursor: pointer; touch-action: pan-y; transition: background 160ms ease, box-shadow 180ms ease; }
.support-tab:hover, .support-tab:focus-visible { background: rgb(247 232 190 / 68%); box-shadow: 0 0.1rem 0.3rem rgb(255 255 255 / 52%) inset; }
.support-tab:focus-visible, .support-close:focus-visible, .support-method:focus-visible, .support-back:focus-visible, .support-copy:focus-visible, .support-wallet-open:focus-visible, .support-field :focus-visible { outline: 2px solid var(--support-accent); outline-offset: 3px; }
.support-tab-label { overflow: hidden; color: currentColor; font: 650 0.76rem/1 var(--font-ui); letter-spacing: 0; white-space: nowrap; }
.support-drawer { display: flex; flex-direction: column; overflow: hidden; color: var(--support-text); background: var(--support-panel-fill); border: 1px solid rgb(255 255 255 / 72%); border-radius: 0.55rem; box-shadow: 0 0.16rem 0.45rem rgb(255 255 255 / 50%) inset; backdrop-filter: blur(1.25rem) saturate(86%); -webkit-backdrop-filter: blur(1.25rem) saturate(86%); }
.support-backdrop[hidden] { display: none; }
.support-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 0.82rem 1.18rem; border-bottom: 1px solid rgb(72 59 52 / 14%); }
.support-drawer-header h2 { margin: 0; font: 500 clamp(1.35rem, 2.1vw, 1.65rem) / 1.05 var(--font-literary-title); letter-spacing: 0; }
.support-close, .support-back { display: inline-grid; min-width: 2.35rem; height: 2.35rem; place-items: center; padding: 0.25rem 0.55rem; color: var(--support-text); background: rgb(255 255 255 / 44%); border: 1px solid rgb(77 62 55 / 22%); border-radius: 0.38rem; cursor: pointer; font: 500 0.88rem/1 var(--font-ui); }
.support-close { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 1.45rem; }
.support-drawer-scroll { min-height: 0; overflow: auto; padding: 1rem 1.18rem calc(1.25rem + env(safe-area-inset-bottom)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.support-introduction { margin: 0 0 0.76rem; color: var(--support-text-muted); font: 400 0.89rem/1.52 var(--font-ui); }
.support-drawer h3 { margin: 1.2rem 0 0.72rem; font: 600 0.95rem/1.2 var(--font-ui); }
.support-methods { display: grid; gap: 0.56rem; }
.support-method { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; min-height: 3.4rem; gap: 0.72rem; width: 100%; padding: 0.58rem 0.7rem; color: var(--support-text); text-align: start; background: var(--support-control-fill); border: 1px solid rgb(72 59 52 / 20%); border-radius: 0.42rem; box-shadow: 0 0.12rem 0.35rem rgb(74 57 48 / 8%) inset; cursor: pointer; }
.support-method img { width: 1.48rem; height: 1.48rem; opacity: 0.78; }
.support-method strong, .support-method small { display: block; }
.support-method strong { font: 600 0.9rem/1.22 var(--font-ui); }
.support-method small { margin-top: 0.12rem; color: var(--support-text-muted); font: 400 0.76rem/1.2 var(--font-ui); }
.support-method-arrow { color: var(--support-accent); font-size: 1.35rem; }
.support-method:hover:not(:disabled) { border-color: rgb(122 93 46 / 42%); transform: translateY(-1px); }
.support-method:disabled, .support-method.is-disabled { opacity: 0.56; cursor: not-allowed; }
.support-crypto-screen > h3 { margin-top: 0.92rem; }
.support-field { display: grid; gap: 0.36rem; margin-top: 0.86rem; color: var(--support-text); font: 600 0.8rem/1.2 var(--font-ui); }
.support-field select, .support-field input { width: 100%; min-height: 2.48rem; padding: 0.48rem 0.62rem; color: var(--support-text); background: rgb(255 255 255 / 67%); border: 1px solid rgb(72 59 52 / 28%); border-radius: 0.34rem; font: 400 0.93rem/1.2 var(--font-ui); }
.support-fixed-network, .support-network-line, .support-address-caption, .support-qr-caption, .support-amount-help, .support-tron-note, .support-safety-note, .support-network-warning { margin: 0.58rem 0 0; color: var(--support-text-muted); font: 400 0.78rem/1.42 var(--font-ui); }
.support-fixed-network { padding: 0.58rem 0.62rem; color: var(--support-text); background: rgb(255 255 255 / 34%); border-radius: 0.34rem; }
.support-amount-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.62rem; }
.support-amount-row b { min-width: 3rem; color: var(--support-text-muted); font: 600 0.82rem/1 var(--font-ui); }
.support-amount-help.is-error { color: #844c41; }
.support-qr-block { display: grid; justify-items: center; margin: 1rem 0 0.22rem; padding: 0.74rem; background: rgb(255 255 255 / 34%); border: 1px solid rgb(72 59 52 / 12%); border-radius: 0.42rem; }
.support-qr-caption { margin-top: 0; }
.support-qr { display: block; width: min(13.3rem, 62vw); height: min(13.3rem, 62vw); margin-top: 0.55rem; background: var(--support-qr-light); }
.support-qr-error { margin: 1rem 0; color: var(--support-warning); font-size: 0.82rem; text-align: center; }
.support-address-caption { margin-top: 0.9rem; }
.support-address { display: block; max-height: 5.3rem; margin-top: 0.34rem; padding: 0.62rem; overflow: auto; color: #22201f; background: rgb(255 255 255 / 64%); border: 1px solid rgb(72 59 52 / 22%); border-radius: 0.34rem; font: 500 0.8rem/1.46 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.support-copy, .support-wallet-open { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; width: 100%; margin-top: 0.65rem; padding: 0.5rem 0.72rem; color: var(--support-text); text-decoration: none; background: rgb(255 255 255 / 48%); border: 1px solid rgb(72 59 52 / 24%); border-radius: 0.36rem; cursor: pointer; font: 600 0.83rem/1.2 var(--font-ui); }
.support-wallet-open { color: #fffdf9; background: #6d5732; border-color: #6d5732; }
.support-wallet-open.is-disabled { opacity: 0.5; pointer-events: none; }
.support-network-warning { padding: 0.58rem 0.62rem; color: var(--support-warning); background: rgb(216 194 153 / 22%); border-inline-start: 2px solid rgb(151 113 56 / 58%); }
.support-safety-note { padding-top: 0.16rem; color: #4e4540; }

.admin-support-intro { max-width: 52rem; }
.admin-support-help, .admin-support-empty, .admin-support-confirmation-help { color: var(--form-muted); font-size: 0.82rem; line-height: 1.45; }
.admin-support-list-header { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1.35rem; }
.admin-support-list-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.7rem; }
.admin-support-list-links > a:not(.admin-link-button) { color: #53233a; font-size: 0.84rem; }
.admin-support-list-header h2 { margin: 0; font-size: 1.1rem; }
.admin-link-button { display: inline-flex; min-height: 2.35rem; align-items: center; padding: 0.45rem 0.7rem; color: #53233a; background: rgb(255 255 255 / 36%); border: 1px solid rgb(96 38 58 / 26%); border-radius: 6px; text-decoration: none; white-space: nowrap; }
.admin-support-destination-list { display: grid; gap: 0.5rem; margin-top: 0.72rem; }
.admin-support-destination-groups { display: grid; gap: 0.9rem; margin-top: 0.72rem; }
.admin-support-destination-group { min-width: 0; }
.admin-support-destination-group h3 { margin: 0; color: var(--form-muted); font: 700 0.76rem/1.2 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.admin-support-destination-group .admin-support-destination-list { margin-top: 0.38rem; }
.admin-support-destination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.72rem 0.82rem; background: rgb(255 255 255 / 30%); border: 1px solid rgb(94 78 73 / 20%); border-radius: 6px; }
.admin-support-destination strong, .admin-support-destination code, .admin-support-destination small { display: block; }
.admin-support-destination code { margin-top: 0.14rem; color: var(--form-muted); font: 500 0.78rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.admin-support-destination small { margin-top: 0.16rem; color: var(--form-muted); font-size: 0.74rem; }
.admin-support-destination-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.46rem 0.65rem; }
.admin-support-destination-actions a { color: #53233a; font-size: 0.84rem; }
.admin-support-lifecycle-form { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; margin: 0; }
.admin-support-lifecycle-form label { display: inline-flex; align-items: center; gap: 0.28rem; color: var(--form-muted); font-size: 0.72rem; line-height: 1.2; }
.admin-support-lifecycle-form input { width: 0.9rem; height: 0.9rem; margin: 0; }
.admin-support-lifecycle-form button { min-height: 2rem; padding: 0.28rem 0.42rem; color: #53233a; background: rgb(255 255 255 / 34%); border: 1px solid rgb(96 38 58 / 24%); border-radius: 4px; font: 600 0.75rem/1.1 var(--font-ui); cursor: pointer; }
.admin-support-lifecycle-form.is-archive button { color: #68443e; border-color: rgb(112 77 68 / 28%); }
.admin-support-destination.is-legacy { background: rgb(245 239 230 / 32%); }
.admin-support-editor { display: grid; gap: 0.72rem; width: 100%; max-width: none; margin-top: 1.35rem; padding-top: 1.25rem; border-top: 1px solid rgb(94 78 73 / 20%); }
.admin-support-editor form { display: grid; width: 100%; gap: 0.72rem; }
.admin-support-editor label { display: grid; gap: 0.32rem; color: var(--admin-control-text); font-size: 0.86rem; }
.admin-support-editor input:not([type="checkbox"]), .admin-support-editor select { width: 100%; min-height: var(--form-control-height); color: var(--admin-control-text); background: linear-gradient(180deg, rgb(255 255 255 / 25%), transparent 70%), var(--admin-control-bg); border: 1px solid var(--admin-control-border); border-radius: var(--form-control-radius); padding: 0.5rem 0.66rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), inset 0 -1px 0 rgb(55 45 44 / 8%); font: 400 0.9rem/1.2 var(--font-ui); }
.admin-support-editor input:not([type="checkbox"])::placeholder { color: var(--admin-control-placeholder); opacity: 1; }
.admin-support-editor input:not([type="checkbox"]):focus-visible, .admin-support-editor select:focus-visible { border-color: var(--admin-control-focus); box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 0 0 0.16rem rgb(79 102 119 / 17%); outline: 0; }
.admin-support-editor select:disabled { color: var(--form-muted); background: rgb(101 91 88 / 12%); cursor: not-allowed; }
.admin-support-editor small { color: var(--form-muted); font-size: 0.77rem; }
.admin-support-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.72rem; }
.admin-support-control-label { min-width: 0; }
.admin-support-address { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; white-space: nowrap; }
.admin-support-network-extension { display: grid; justify-items: start; gap: 0.48rem; }
.admin-support-network-extension-toggle { min-height: 2rem; padding: 0.28rem 0.42rem; color: #526a7c; background: transparent; border: 0; border-bottom: 1px solid rgb(79 102 119 / 34%); cursor: pointer; font: 600 0.77rem/1.15 var(--font-ui); }
.admin-support-network-extension-toggle:hover { color: #354d60; border-color: rgb(79 102 119 / 58%); }
.admin-support-network-extension-toggle:focus-visible { outline: 2px solid var(--admin-control-focus); outline-offset: 3px; }
.admin-support-network-extension-fields { display: grid; grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.15fr); width: 100%; gap: 0.62rem 0.72rem; padding: 0.72rem; background: rgb(255 255 255 / 17%); border: 1px solid rgb(94 78 73 / 16%); border-radius: 6px; }
.admin-support-network-extension-fields[hidden], .admin-support-custom-network-fields[hidden] { display: none !important; }
.admin-support-network-extension-fields > .admin-support-help { grid-column: 1 / -1; margin: 0; }
.admin-support-custom-network-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.62rem 0.72rem; align-items: start; }
.admin-support-custom-network-fields > .admin-support-check { grid-column: 1 / -1; }
.admin-support-options { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 0.5rem 1rem; align-items: start; }
.admin-support-option { display: grid; gap: 0.18rem; min-width: 0; }
.admin-support-option small { max-width: 19rem; padding-inline-start: 1.56rem; }
.admin-support-conditional-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.72rem; align-items: start; }
.admin-support-conditional-fields [hidden] { display: none !important; }
.admin-support-check { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: 0.48rem !important; min-height: 2rem; }
.admin-support-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: grid; width: 1.08rem; min-width: 1.08rem; height: 1.08rem; min-height: 1.08rem; margin: 0; place-content: center; background: var(--admin-control-check-bg); border: 1px solid var(--admin-control-border); border-radius: 0.24rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / 52%), inset 0 -1px 0 rgb(52 44 42 / 12%); cursor: pointer; }
.admin-support-check input[type="checkbox"]:checked { background-color: var(--admin-action-accent-soft); border-color: rgb(62 89 108 / 74%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.2 4.8 8.6 9.8 3.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 0.86rem; }
.admin-support-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--admin-control-focus); outline-offset: 2px; }
.admin-support-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.58; }
.admin-support-editor-actions { display: flex; justify-content: flex-end; padding-top: 0.1rem; }
.admin-support-primary { min-height: var(--form-control-height); border: 1px solid rgb(57 84 103 / 42%); border-radius: var(--form-control-radius); padding: 0.5rem 0.85rem; color: #fff; background: linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 66%), var(--admin-action-accent-soft); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 0.35rem 0.8rem rgb(49 73 89 / 18%); font: 600 0.88rem/1.2 var(--font-ui); cursor: pointer; }
.admin-support-primary:hover { background-color: var(--admin-action-accent-soft-hover); }
.admin-support-primary:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(42 60 72 / 18%); }
.admin-support-primary:focus-visible { outline: 2px solid var(--admin-control-focus); outline-offset: 3px; }
.admin-support-pair { margin: 0; padding: 0.68rem 0.75rem; background: rgb(255 255 255 / 28%); border-inline-start: 2px solid rgb(122 93 46 / 46%); }
.admin-support-state { padding: 0.2rem 0.4rem; color: #665d58; background: rgb(98 86 79 / 12%); border-radius: 0.24rem; font-size: 0.72rem; white-space: nowrap; }
.admin-support-state.is-active { color: #445a48; background: rgb(92 129 94 / 14%); }
.admin-support-state.is-archived { color: #665d58; background: rgb(98 86 79 / 16%); }
.admin-check-row { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.84rem; }
.admin-check-row input { width: 1rem; min-width: 1rem; height: 1rem; margin-top: 0.08rem; }
.admin-field-error { color: #864238 !important; }
.admin-support-reauth { width: min(100% - 2rem, 25rem); color: var(--form-text); background: #f6f2f0; border: 1px solid rgb(255 255 255 / 72%); border-radius: 7px; box-shadow: 0 1.25rem 3rem rgb(40 30 32 / 28%); padding: 1.15rem; }
.admin-support-reauth::backdrop { background: rgb(42 27 34 / 38%); backdrop-filter: blur(2px); }
.admin-support-reauth form { display: grid; gap: 0.78rem; }
.admin-support-reauth h2, .admin-support-reauth p { margin: 0; }
.admin-support-reauth h2 { font-size: 1.28rem; }
.admin-support-reauth p { color: var(--form-muted); font-size: 0.84rem; line-height: 1.4; }
.admin-support-reauth label { display: grid; gap: 0.35rem; font-size: 0.84rem; }
.admin-support-reauth .admin-support-check { align-items: center; }
.admin-support-reauth input { min-height: 2.45rem; padding: 0.5rem 0.62rem; border: 1px solid var(--form-control-border); border-radius: 5px; }
.admin-support-reauth-actions { display: flex; justify-content: flex-end; gap: 0.55rem; }

@media (max-width: 920px) {
    .admin-support-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-support-conditional-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .admin-support-pair-grid,
    .admin-support-network-extension-fields,
    .admin-support-custom-network-fields,
    .admin-support-options,
    .admin-support-conditional-fields { grid-template-columns: 1fr; }
    .admin-support-network-extension-fields > .admin-support-help,
    .admin-support-custom-network-fields > .admin-support-check { grid-column: auto; }
    .admin-support-option small { padding-inline-start: 0; }
    .admin-support-editor-actions { justify-content: stretch; }
    .admin-support-primary { width: 100%; min-height: 44px; }
}

@media (max-width: 720px) { .support-drawer-header { padding: 0.8rem 0.86rem 0.7rem 1rem; } .support-drawer-scroll { padding: 0.82rem 1rem calc(1rem + env(safe-area-inset-bottom)); } .support-qr { width: min(12.7rem, 66vw); height: min(12.7rem, 66vw); } .support-toast { max-width: calc(var(--viewport-width, 100vw) - 2.2rem); } .admin-support-list-header, .admin-support-destination, .admin-support-destination-actions { align-items: flex-start; } .admin-support-list-header, .admin-support-destination { flex-direction: column; } .admin-support-destination-actions { justify-content: flex-start; } .admin-support-lifecycle-form { flex-wrap: wrap; } .admin-support-fields { grid-template-columns: 1fr; } .admin-support-fields label:last-child { grid-column: auto; } .admin-support-reauth { width: calc(100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); } }
@media (max-width: 720px) and (orientation: portrait) { .support-tab { width: auto; min-width: 5.4rem; height: 44px; min-height: 44px; padding: 0.52rem 0.78rem; } .support-tab-label { overflow: visible; font-size: 0.78rem; letter-spacing: 0.065em; white-space: nowrap; writing-mode: horizontal-tb; text-orientation: mixed; } }
@media (max-width: 950px) and (orientation: landscape) { .support-tab { width: auto; min-width: 5.4rem; } .support-drawer-header { padding-block: 0.65rem; } .support-drawer-scroll { padding-block: 0.7rem; } .support-introduction { font-size: 0.8rem; } .support-qr { width: min(10.5rem, 30vh); height: min(10.5rem, 30vh); } }
@media (prefers-reduced-motion: reduce) { .support-pull-shell, .support-tab, .support-backdrop, .support-method, .background-scene, .dynamic-content-layer, .floating-menu, .poem-pager, .site-copyright--fallback { transition-duration: 1ms; } .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 { filter: none; transform: none; } .app-shell.is-support-open .background-scene { filter: brightness(0.92) saturate(0.86); transform: none; } }

.comments-panel {
    --comments-panel-gap: var(--comments-gap);
    position: fixed;
    z-index: 45;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    width: var(--comments-width, min(92vw, 34rem));
    height: var(--comments-height, min(88dvh, 45rem));
    max-height: calc(var(--viewport-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.5rem);
    overflow: hidden;
    color: var(--comments-text);
    background: var(--comments-panel-fill);
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 0.5rem;
    box-shadow: 0 1.1rem 2.8rem rgb(43 38 42 / 18%), 0 0.18rem 0.65rem rgb(255 255 255 / 23%) inset, 0 -0.2rem 0.5rem rgb(70 54 54 / 12%) inset;
    backdrop-filter: blur(1.3rem) saturate(72%);
    -webkit-backdrop-filter: blur(1.3rem) saturate(72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.comments-panel[hidden] {
    display: none;
}

.comments-panel.is-side {
    inset-inline-start: var(--comments-left);
    inset-block-start: var(--comments-top);
    transform: translateX(1.5rem) scaleX(0.96);
    transform-origin: 100% 50%;
}

.comments-panel.is-overlay {
    inset-inline-start: 50%;
    inset-block-start: 50%;
    transform: translate(-50%, calc(-50% + 1rem)) scale(0.985);
}

.comments-panel.is-open {
    opacity: 1;
    pointer-events: auto;
}

.comments-panel.is-side.is-open {
    transform: translateX(0) scaleX(1);
}

.comments-panel.is-overlay.is-open {
    transform: translate(-50%, -50%) scale(1);
}

.comments-panel-header {
    position: sticky;
    z-index: 2;
    inset-block-start: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--comments-panel-gap);
    padding: 0.88rem 1rem 0.72rem;
    background: linear-gradient(180deg, rgb(255 255 255 / 38%), rgb(255 255 255 / 10%));
    border-block-end: 1px solid rgb(72 56 56 / 14%);
}

.comments-panel h2 {
    margin: 0;
    color: var(--comments-text);
    font: 500 clamp(1.2rem, 1.45vw, 1.5rem)/1.1 var(--font-literary-title);
}

.comments-panel .comments-total {
    color: var(--comments-text-muted);
    font: 0.73rem/1 var(--font-ui);
}

.comments-panel .comments-total::before { content: " · "; }

.comments-close {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    color: var(--comments-text-muted);
    background: rgb(255 255 255 / 22%);
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 0.42rem;
    cursor: pointer;
}

.comments-close:hover { background: rgb(255 255 255 / 38%); color: var(--comments-text); }

.comments-panel-scroll {
    min-height: 0;
    padding: 0.76rem 1rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgb(89 72 72 / 52%) transparent;
}

.comments-composer {
    margin: 0 0 0.84rem;
}

.comments-create-button,
.comments-load-more {
    width: 100%;
    min-height: var(--comments-control-height);
    color: var(--comments-text);
    background: linear-gradient(180deg, rgb(255 255 255 / 32%), rgb(255 255 255 / 17%));
    border: 1px solid rgb(72 56 56 / 25%);
    border-radius: var(--comments-control-radius);
    box-shadow: var(--comments-button-highlight), var(--comments-button-shadow);
    cursor: pointer;
}

.comments-composer-body {
    margin-block-start: var(--comments-panel-gap);
    padding: 0.76rem;
    background: rgb(255 255 255 / 16%);
    border-inline-start: 2px solid rgb(81 65 65 / 38%);
    border-radius: 0 0.42rem 0.42rem 0;
}

.comments-composer-body [hidden] {
    display: none !important;
}

.comment-form,
.registration-form {
    display: grid;
    gap: var(--comments-panel-gap);
}

.registration-form label {
    display: grid;
    gap: 0.3rem;
    color: var(--color-text-soft);
    font-size: 0.8rem;
}

.comment-form input,
.comment-form textarea,
.registration-form input:not(.user-form-control) {
    width: 100%;
    min-height: var(--comments-control-height);
    padding: 0.58rem 0.64rem;
    color: var(--comments-text);
    background: rgb(255 255 255 / 29%);
    border: 1px solid rgb(74 59 59 / 27%);
    border-radius: 0.35rem;
}

.registration-form input:not(.user-form-control) { min-height: 2.6rem; }
.registration-consent {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    cursor: pointer;
}

.registration-consent input {
    width: 1.1rem;
    min-height: 1.1rem;
    margin: 0.12rem 0 0;
    padding: 0;
}

.registration-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--comments-panel-gap);
}
.comment-form input::placeholder,
.comment-form textarea::placeholder { color: var(--comments-text-placeholder); opacity: 1; }
.comment-form input:-webkit-autofill,
.comment-form textarea:-webkit-autofill { -webkit-text-fill-color: var(--comments-text); box-shadow: 0 0 0 1000px rgb(246 242 240 / 92%) inset; }
.comment-form input:focus,
.comment-form textarea:focus { border-color: rgb(78 62 62 / 65%); box-shadow: 0 0 0 0.16rem rgb(255 255 255 / 42%), 0 0.28rem 0.62rem rgb(58 43 43 / 13%); outline: 0; }
.comment-input-field { min-width: 0; }
.comment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--comments-panel-gap); }
.comment-form textarea { min-height: 7.25rem; resize: vertical; font: inherit; }
.comment-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--comments-panel-gap); }
.comments-action-button {
    min-height: var(--comments-control-height);
    padding: 0.42rem 0.58rem;
    border: 1px solid rgb(82 62 62 / 35%);
    border-radius: var(--comments-control-radius);
    box-shadow: var(--comments-button-highlight), var(--comments-button-shadow);
    cursor: pointer;
    font: 600 0.875rem/1.12 var(--font-ui);
    transition: transform 170ms ease, box-shadow 170ms ease, filter 170ms ease;
}
.comments-action-button--primary { color: #fffdf9; background: linear-gradient(180deg, #59534e, #403c39); border-color: rgb(55 50 47 / 72%); text-shadow: 0 1px 1px rgb(25 23 21 / 22%); }
.comments-action-button--secondary { color: var(--comments-text); background: linear-gradient(180deg, rgb(255 255 255 / 37%), rgb(255 255 255 / 18%)); }
.comments-action-button:hover { transform: translateY(-0.1rem); box-shadow: 0 0.52rem 0.85rem rgb(54 40 40 / 18%), var(--comments-button-highlight), 0 -0.12rem 0.26rem rgb(62 37 42 / 14%) inset; filter: brightness(1.025); }
.comments-action-button:active { transform: translateY(0.03rem); box-shadow: 0 0.2rem 0.42rem rgb(54 40 40 / 12%), 0 0.08rem 0.2rem rgb(255 255 255 / 30%) inset; }
.comments-action-button:focus-visible { outline: 0.16rem solid rgb(69 52 52 / 80%); outline-offset: 0.16rem; }
.comment-identity, .comment-verification-note, .comment-registration-prompt p, .registration-match { margin: 0; color: var(--comments-text-muted); font-size: 0.8rem; line-height: 1.45; }
.comment-verification-note { padding: 0.52rem 0.58rem; color: var(--comments-text-technical); background: rgb(255 255 255 / 22%); border-inline-start: 2px solid rgb(77 71 67 / 36%); border-radius: 0 0.3rem 0.3rem 0; }
.comment-verification-note button { margin-inline-start: 0.25rem; padding: 0; color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font: inherit; }
.comment-verification-note [data-verification-status] { display: block; margin-block-start: 0.24rem; }
.comment-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.comments-list { display: grid; gap: 0.72rem; }
.comments-empty, .comment-success { margin: 0.42rem 0; color: var(--comments-text-technical); font-size: 0.84rem; line-height: 1.5; }
.comments-panel .form-error { color: #4d3635; }
.comment-card { position: relative; padding: 0.9rem 0.82rem 0.76rem; background: rgb(255 255 255 / 11%); border: 1px solid rgb(255 255 255 / 32%); border-radius: 0.42rem; box-shadow: inset 0 0.16rem 0.42rem rgb(255 255 255 / 17%), inset 0 -0.18rem 0.38rem rgb(75 58 58 / 7%); }
.comment-card header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-block-end: 0.48rem; }
.comment-card strong { padding: 0.18rem 0.42rem; color: var(--comments-text); background: rgb(255 255 255 / 27%); border: 1px solid rgb(255 255 255 / 35%); border-radius: 999rem; font: 600 0.72rem/1.1 var(--font-ui); }
.comment-card time { color: var(--comments-text-technical); font: 500 0.72rem/1.2 var(--font-ui); text-align: end; }
.comment-card p { margin: 0; color: var(--comments-text); font: 0.9rem/1.48 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-card-actions { display: flex; align-items: center; gap: 0.26rem; margin-block-start: 0.62rem; }
.comment-reaction, .comment-reply { display: inline-flex; min-height: 2.25rem; align-items: center; justify-content: center; gap: 0.24rem; padding: 0.36rem 0.48rem; color: var(--comments-text-technical); background: rgb(255 255 255 / 21%); border: 1px solid rgb(79 73 69 / 20%); border-radius: 0.34rem; cursor: pointer; font: 600 0.72rem/1 var(--font-ui); }
.comment-reaction { min-width: 2.25rem; }
.comment-reaction:hover, .comment-reaction:focus-visible, .comment-reply:hover, .comment-reply:focus-visible, .comment-reaction.is-active { color: var(--comments-text); background: rgb(255 255 255 / 43%); outline: 0; }
.comment-reaction:focus-visible, .comment-reply:focus-visible { box-shadow: 0 0 0 0.16rem rgb(78 71 66 / 46%); }
.comment-replies { display: grid; gap: 0.56rem; margin: 0.62rem 0 0 1rem; padding-inline-start: 0.72rem; border-inline-start: 1px solid rgb(80 73 68 / 24%); }
.comment-card--reply { padding: 0.72rem; background: rgb(255 255 255 / 8%); }
.comment-reply-reference { margin: 0 0 0.58rem; padding: 0.52rem 0.58rem; color: var(--comments-text-technical); background: rgb(255 255 255 / 18%); border-inline-start: 2px solid rgb(79 73 69 / 34%); border-radius: 0 0.3rem 0.3rem 0; font: 0.75rem/1.4 var(--font-ui); }
.comment-reply-reference span { font-weight: 650; }
.comment-reply-reference p { display: -webkit-box; margin: 0.2rem 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.comment-reaction-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.52rem; margin: 0.56rem 0 0.76rem; padding: 0.54rem 0.6rem; color: var(--comments-text-technical); background: rgb(255 255 255 / 18%); border-inline-start: 2px solid rgb(79 73 69 / 34%); font: 0.76rem/1.4 var(--font-ui); }
.comment-reaction-auth[hidden] { display: none; }
.comment-reaction-auth a { color: inherit; font-weight: 650; }
.comments-load-more { margin-block-start: 0.85rem; }

.registration-modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); opacity: 0; transition: opacity 160ms ease; }
.registration-modal[hidden] { display: none; }
.registration-modal.is-open { opacity: 1; }
.registration-backdrop { position: absolute; inset: 0; background: rgb(36 28 32 / 52%); backdrop-filter: blur(0.3rem); }
.registration-dialog { position: relative; width: min(100%, 27rem); max-height: calc(var(--viewport-height, 100dvh) - 2rem); padding: 1.15rem; overflow-y: auto; }
.registration-dialog .comments-close { position: absolute; inset-block-start: 0.56rem; inset-inline-end: 0.56rem; }
.registration-dialog h2 { margin: 0 3rem 0.9rem 0; font: 500 1.55rem/1.15 var(--font-literary-title); }
.registration-match { min-height: 1.2rem; }

@media (max-width: 44rem) and (orientation: portrait) {
    .comments-panel { --comments-control-height: 2.75rem; }
    .poem-fixed-controls { margin-block-start: 0.2rem; }
    .comments-panel { border-radius: 0.5rem; }
    .comments-panel-header { padding: 0.82rem 0.8rem 0.6rem; }
    .comments-panel-scroll { padding: 0.68rem 0.8rem calc(0.9rem + env(safe-area-inset-bottom)); }
    .comments-panel h2 { font-size: 1.25rem; }
    .comment-card { padding: 0.72rem; }
}

@container (max-width: 25rem) {
    .comment-form-grid,
    .comment-form-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .comments-panel, .registration-modal { transition: opacity 1ms linear; }
}

/* A small glass rail is integrated into the poem panel's outer left edge. */
.poem-section-clip {
    --section-clip-shift-x: 0px;
    --section-clip-shift-y: 0px;
    --section-clip-hit-width: 2.75rem;
    --section-edge-visual-width: 0.72rem;
    --section-clip-top: calc(var(--public-panel-padding-block) + 0.08rem);
    --section-clip-bottom: var(--public-panel-padding-block);
    --section-clip-center-x: 0px;
    position: absolute;
    z-index: 8;
    inset-block: var(--section-clip-top) var(--section-clip-bottom);
    inset-inline-start: calc(var(--section-clip-center-x) - var(--section-clip-hit-width) / 2);
    display: block;
    width: var(--section-clip-hit-width);
    min-width: 44px;
    min-height: 48px;
    padding: 0;
    color: rgb(62 65 62 / 88%);
    background: transparent;
    border: 0;
    cursor: pointer;
    transform: translate3d(var(--section-clip-shift-x), var(--section-clip-shift-y), 0);
    transition: transform 290ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.poem-section-clip-visual {
    position: absolute;
    display: block;
    box-sizing: content-box;
    inset-block: 0;
    inset-inline-start: 50%;
    width: var(--section-edge-visual-width);
    overflow: visible;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgb(255 255 252 / 56%), rgb(237 241 237 / 32%) 48%, rgb(142 150 145 / 25%)),
        rgb(244 247 243 / 26%);
    border: 1px solid rgb(255 255 255 / 58%);
    border-inline-start-color: rgb(255 255 255 / 70%);
    border-inline-end-color: rgb(111 123 116 / 26%);
    border-radius: 0.42rem;
    box-shadow: inset 1px 0 rgb(255 255 255 / 46%), inset -1px 0 rgb(66 78 70 / 12%), -0.06rem 0 0.2rem rgb(43 53 47 / 8%);
    transform: translateX(-50%);
    transition: transform 220ms cubic-bezier(0.22, 0.72, 0.26, 1), background-color 180ms ease, box-shadow 180ms ease;
}

.poem-section-clip-visual::before,
.poem-section-clip-visual::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.poem-section-clip-visual::before {
    inset: 0.38rem 1px;
    border-block: 1px solid rgb(255 255 255 / 34%);
    border-radius: inherit;
    opacity: 0.6;
}

.poem-section-clip-visual::after {
    inset: 0.35rem -0.16rem;
    border-radius: 0.34rem;
    background: rgb(247 255 251 / 20%);
    box-shadow: -0.14rem 0 0.28rem rgb(57 76 64 / 10%);
    opacity: 0;
    transform: scaleX(0.58);
    transform-origin: 100% 50%;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.poem-section-clip-direction-mark {
    position: absolute;
    inset-inline-start: 50%;
    width: 0.48rem;
    height: 0.68rem;
    color: rgb(68 77 70 / 52%);
    fill: none;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.35;
    transform: translateX(-50%);
    transition: color 180ms ease, opacity 180ms ease;
}

.poem-section-clip-direction-mark--top { inset-block-start: 13%; }
.poem-section-clip-direction-mark--upper { inset-block-start: 32%; }
.poem-section-clip-direction-mark--lower { inset-block-start: 61%; }
.poem-section-clip-direction-mark--bottom { inset-block-start: 80%; }

.poem-section-clip-capsule {
    position: absolute;
    z-index: 2;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: block;
    width: 1.14rem;
    height: 2.86rem;
    border-radius: 0.62rem;
    transform: translate(-50%, -50%);
}

.poem-section-clip-inner-plate {
    position: absolute;
    inset: 0;
    display: grid;
    overflow: hidden;
    place-items: center;
    background: linear-gradient(145deg, rgb(255 255 253 / 54%), rgb(230 238 232 / 30%));
    border: 1px solid rgb(255 255 255 / 66%);
    border-radius: inherit;
    box-shadow: 0 0.12rem 0.34rem rgb(52 65 56 / 12%), 0 0.08rem 0.22rem rgb(255 255 255 / 46%) inset;
    backdrop-filter: blur(0.34rem) saturate(70%);
    -webkit-backdrop-filter: blur(0.34rem) saturate(70%);
}

.poem-section-clip-inner-plate::after {
    position: absolute;
    inset: -70% -80%;
    content: "";
    background: linear-gradient(112deg, transparent 44%, rgb(235 255 248 / 0%) 48%, rgb(234 255 248 / 74%) 50%, rgb(235 255 248 / 0%) 52%, transparent 56%);
    opacity: 0;
    transform: translateY(-22%);
}

.poem-section-clip-arrow {
    position: absolute;
    width: 0.82rem;
    height: 0.82rem;
    fill: none;
    stroke: rgb(58 67 61 / 84%);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transition: opacity 150ms ease, transform 180ms ease;
}

.poem-section-clip-arrow--open { opacity: 0; transform: translateX(0.08rem); }
.poem-section-clip-arrow--close { opacity: 0; transform: translateX(-0.08rem); }

.poem-section-clip-shutter {
    position: absolute;
    z-index: 1;
    inset-inline: -1px;
    height: calc(50% - 1px);
    background: linear-gradient(90deg, rgb(255 255 252 / 66%), rgb(228 236 229 / 42%), rgb(131 145 135 / 30%));
    border: 1px solid rgb(255 255 255 / 60%);
    box-shadow: inset 1px 0 rgb(255 255 255 / 46%), inset -1px 0 rgb(69 82 72 / 15%);
    transition: transform 200ms cubic-bezier(0.22, 0.72, 0.26, 1), background-color 180ms ease;
}

.poem-section-clip-shutter--top {
    inset-block-start: -1px;
    border-radius: 0.62rem 0.62rem 0.28rem 0.28rem;
}

.poem-section-clip-shutter--bottom {
    inset-block-end: -1px;
    border-radius: 0.28rem 0.28rem 0.62rem 0.62rem;
}

.poem-section-clip-tooltip {
    position: absolute;
    z-index: 5;
    inset-block-start: 0.7rem;
    inset-inline-start: calc(100% + 0.32rem);
    width: max-content;
    max-width: min(14rem, calc(var(--viewport-width, 100vw) - 2rem));
    padding: 0.36rem 0.5rem;
    color: #fffdf9;
    background: rgb(38 32 29 / 88%);
    border: 1px solid rgb(255 246 215 / 26%);
    border-radius: 0.3rem;
    box-shadow: 0 0.45rem 0.9rem rgb(27 21 18 / 20%);
    font: 500 0.7rem/1.2 var(--font-ui);
    opacity: 0;
    pointer-events: none;
    transform: translate(0.15rem, 0);
    transition: opacity 140ms ease, transform 140ms ease;
}

@media (min-width: 45rem) {
    .poem-section-clip-tooltip {
        inset-inline-start: auto;
        inset-inline-end: calc(100% + 0.32rem);
        transform: translate(-0.15rem, 0);
    }
}

@media (max-width: 60rem) {
    .poem-section-clip-tooltip {
        inset-block-start: auto;
        inset-block-end: calc(100% + 0.7rem);
        inset-inline-start: 0.8rem;
        inset-inline-end: auto;
        transform: none;
    }

    .poem-section-clip[data-tooltip-placement="outside"] .poem-section-clip-tooltip {
        inset-block-start: 0.7rem;
        inset-block-end: auto;
        inset-inline-start: auto;
        inset-inline-end: calc(100% + 0.32rem);
        transform: translate(-0.15rem, 0);
    }
}

.poem-section-clip:focus-visible { outline: 0; }
.poem-section-clip[data-section-contents-state="closed"]:focus-visible .poem-section-clip-visual {
    background-color: rgb(248 255 251 / 42%);
    box-shadow: -0.18rem 0 0.38rem rgb(55 73 61 / 14%), inset 1px 0 rgb(255 255 255 / 58%), inset -1px 0 rgb(70 86 75 / 15%), 0 0 0 2px rgb(73 88 78 / 56%);
    transform: translateX(calc(-50% - 0.16rem));
}
.poem-section-clip[data-section-contents-state="closed"]:focus-visible .poem-section-clip-visual::after { opacity: 1; transform: scaleX(1); }
.poem-section-clip[data-section-contents-state="closed"]:focus-visible .poem-section-clip-shutter--top { transform: translateY(-0.24rem); }
.poem-section-clip[data-section-contents-state="closed"]:focus-visible .poem-section-clip-shutter--bottom { transform: translateY(0.24rem); }
.poem-section-clip[data-section-contents-state="closed"]:focus-visible .poem-section-clip-arrow--open { opacity: 0.94; transform: none; }
.poem-section-clip[data-section-contents-state="closed"]:focus-visible .poem-section-clip-direction-mark { color: rgb(56 74 62 / 76%); }
.poem-section-clip[data-section-contents-state="closed"]:focus-visible .poem-section-clip-inner-plate::after { animation: section-clip-specular-pass 440ms cubic-bezier(0.22, 0.72, 0.26, 1) both; }
.poem-section-clip[data-section-contents-state="closed"]:focus-visible .poem-section-clip-tooltip { opacity: 1; transform: translate(0, 0); }

@media (hover: hover) and (pointer: fine) {
    .poem-section-clip[data-section-contents-state="closed"]:hover .poem-section-clip-visual {
        background-color: rgb(248 255 251 / 42%);
        box-shadow: -0.18rem 0 0.38rem rgb(55 73 61 / 14%), inset 1px 0 rgb(255 255 255 / 58%), inset -1px 0 rgb(70 86 75 / 15%);
        transform: translateX(calc(-50% - 0.16rem));
    }
    .poem-section-clip[data-section-contents-state="closed"]:hover .poem-section-clip-visual::after { opacity: 1; transform: scaleX(1); }
    .poem-section-clip[data-section-contents-state="closed"]:hover .poem-section-clip-shutter--top { transform: translateY(-0.24rem); }
    .poem-section-clip[data-section-contents-state="closed"]:hover .poem-section-clip-shutter--bottom { transform: translateY(0.24rem); }
    .poem-section-clip[data-section-contents-state="closed"]:hover .poem-section-clip-arrow--open { opacity: 0.94; transform: none; }
    .poem-section-clip[data-section-contents-state="closed"]:hover .poem-section-clip-direction-mark { color: rgb(56 74 62 / 76%); }
    .poem-section-clip[data-section-contents-state="closed"]:hover .poem-section-clip-inner-plate::after { animation: section-clip-specular-pass 440ms cubic-bezier(0.22, 0.72, 0.26, 1) both; }
    .poem-section-clip[data-section-contents-state="closed"]:hover .poem-section-clip-tooltip { opacity: 1; transform: translate(0, 0); }
}

@media (max-width: 60rem) and (hover: hover) and (pointer: fine) {
    .poem-section-clip[aria-expanded="false"]:hover .poem-section-clip-tooltip,
    .poem-section-clip[aria-expanded="false"]:focus-visible .poem-section-clip-tooltip { transform: none; }
}

.poem-section-clip[aria-expanded="true"] .poem-section-clip-visual {
    background-color: rgb(246 253 248 / 42%);
    box-shadow: -0.1rem 0 0.28rem rgb(55 73 61 / 10%), inset 1px 0 rgb(255 255 255 / 56%), inset -1px 0 rgb(70 86 75 / 14%);
}
.poem-section-clip[aria-expanded="true"] .poem-section-clip-shutter--top { transform: translateY(-0.18rem); }
.poem-section-clip[aria-expanded="true"] .poem-section-clip-shutter--bottom { transform: translateY(0.18rem); }
.poem-section-clip[data-section-contents-state="opening"] .poem-section-clip-arrow--open,
.poem-section-clip[data-section-contents-state="closing"] .poem-section-clip-arrow--close { opacity: 0.86; transform: none; }
.poem-section-clip[data-section-contents-state="open"] .poem-section-clip-arrow--close { opacity: 0.94; transform: none; }
.poem-section-clip[aria-expanded="true"] .poem-section-clip-arrow--open { opacity: 0; }
.poem-section-clip[aria-expanded="true"] .poem-section-clip-tooltip { display: none; }
.poem-section-clip[data-section-contents-state="closing"] .poem-section-clip-tooltip { display: none; }
.app-shell > .poem-section-clip { position: fixed; z-index: 47; }

@keyframes section-clip-specular-pass {
    0% { opacity: 0; transform: translateY(-24%); }
    38% { opacity: 0.76; }
    100% { opacity: 0; transform: translateY(24%); }
}

.section-contents-panel {
    --section-panel-gap: 0.58rem;
    position: fixed;
    z-index: 46;
    display: flex;
    flex-direction: column;
    width: var(--section-panel-width, min(92vw, 26rem));
    height: var(--section-panel-height, min(88dvh, 42rem));
    max-height: calc(var(--viewport-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.5rem);
    overflow: hidden;
    color: var(--section-panel-text);
    background: var(--section-panel-fill);
    border: 1px solid rgb(255 255 255 / 50%);
    border-radius: 0.5rem;
    box-shadow: 0 1.1rem 2.8rem rgb(43 38 42 / 20%), 0 0.18rem 0.65rem rgb(255 255 255 / 30%) inset, 0 -0.2rem 0.5rem rgb(70 54 54 / 14%) inset;
    backdrop-filter: blur(1.25rem) saturate(76%);
    -webkit-backdrop-filter: blur(1.25rem) saturate(76%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 190ms ease, transform 270ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.section-contents-panel[hidden] { display: none; }
.section-contents-panel.is-side { inset-inline-start: var(--section-panel-left); inset-block-start: var(--section-panel-top); transform: translateX(calc(100% + 0.7rem)) scaleX(0.985); transform-origin: 100% 50%; }
.section-contents-panel.is-overlay { inset-inline-start: 50%; inset-block-start: 50%; transform: translate(calc(-50% + 1.1rem), calc(-50% + 0.58rem)) scale(0.985); transform-origin: 100% 50%; }
.section-contents-panel.is-open { opacity: 1; pointer-events: auto; }
.section-contents-panel.is-side.is-open { transform: translateX(0) scaleX(1); }
.section-contents-panel.is-overlay.is-open { transform: translate(-50%, -50%) scale(1); }

.section-contents-header {
    position: sticky;
    z-index: 1;
    inset-block-start: 0;
    padding: 0.88rem 1rem 0.72rem;
    background: linear-gradient(180deg, rgb(255 255 255 / 36%), rgb(255 255 255 / 10%));
    border-block-end: 1px solid rgb(72 56 56 / 14%);
}

.section-contents-header h2 { max-width: 100%; margin: 0; color: var(--section-panel-text); font: 500 clamp(1.18rem, 1.45vw, 1.48rem)/1.1 var(--font-literary-title); overflow-wrap: anywhere; }
.section-contents-header p { margin: 0.26rem 0 0; color: var(--section-panel-muted); font: 500 0.7rem/1.2 var(--font-ui); }
.section-contents-scroll { min-height: 0; padding: 0.28rem 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgb(89 72 72 / 52%) transparent; }
.section-contents-list { margin: 0; padding: 0; list-style: none; }
.section-contents-item { border-block-end: 1px solid rgb(74 60 54 / 17%); }
.section-contents-item > a,
.section-contents-current { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 0.4rem; align-items: center; width: 100%; min-height: 3.55rem; padding: 0.58rem 0.12rem; color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; text-align: start; text-decoration: none; transition: transform 170ms ease, background 170ms ease, color 170ms ease; }
.section-contents-index { color: var(--section-panel-muted); font: 600 0.66rem/1 var(--font-ui); }
.section-contents-title { min-width: 0; font: 500 clamp(1rem, 1.25vw, 1.14rem)/1.15 var(--font-literary-title); overflow-wrap: anywhere; }
.section-contents-marker { display: block; width: 0.2rem; height: 1.22rem; border-radius: 999rem; background: transparent; }
.section-contents-current .section-contents-marker { background: var(--section-panel-accent); box-shadow: 0 0 0.26rem rgb(183 140 66 / 24%); }
.section-contents-current { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
    .section-contents-item > a:hover,
    .section-contents-current:hover { color: #201d1c; background: rgb(255 255 255 / 23%); transform: translateX(0.13rem); }
    .section-contents-item > a:focus-visible,
    .section-contents-current:focus-visible { color: #201d1c; background: rgb(255 255 255 / 23%); outline: 0; }
}
.section-contents-item > a:focus-visible, .section-contents-current:focus-visible { box-shadow: inset 0 0 0 2px rgb(112 84 45 / 58%); }

.app-shell.is-section-contents-overlay .poem-media-composition > :not(.poem-section-clip),
.app-shell.is-section-contents-overlay .poem-pager,
.app-shell.is-section-contents-overlay .floating-menu,
.app-shell.is-section-contents-overlay .site-copyright--fallback {
    pointer-events: none;
    opacity: 0.29;
    filter: blur(0.28rem) saturate(0.78) brightness(0.92);
    transform: translateX(0.18rem) scale(0.99);
    transition: opacity 220ms ease, filter 220ms ease, transform 260ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.app-shell.is-section-contents-overlay .support-pull-shell {
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}

.app-shell.is-section-contents-overlay .background-scene { filter: brightness(0.91) saturate(0.82); transition: filter 220ms ease; }

@media (max-width: 60rem) {
    .section-contents-panel { border-radius: 0.5rem; }
    .section-contents-header { padding: 0.8rem 0.84rem 0.62rem; }
    .section-contents-scroll { padding: 0.26rem 0.84rem calc(0.9rem + env(safe-area-inset-bottom)); }
    .section-contents-item > a, .section-contents-current { min-height: 3.25rem; }
}

@media (max-width: 44rem) and (orientation: portrait) {
    .section-contents-panel { max-height: calc(var(--viewport-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.25rem); }
}

@media (prefers-reduced-motion: reduce) {
    .poem-section-clip, .poem-section-clip-visual, .poem-section-clip-visual::before, .poem-section-clip-visual::after, .poem-section-clip-capsule, .poem-section-clip-inner-plate, .poem-section-clip-arrow, .poem-section-clip-shutter, .section-contents-panel, .app-shell.is-section-contents-overlay .poem-media-composition > :not(.poem-section-clip), .app-shell.is-section-contents-overlay .poem-pager, .app-shell.is-section-contents-overlay .floating-menu, .app-shell.is-section-contents-overlay .site-copyright--fallback, .app-shell.is-section-contents-overlay .support-pull-shell, .app-shell.is-section-contents-overlay .background-scene { transition-duration: 1ms; }
    .poem-section-clip-inner-plate::after { animation: none !important; }
}

.poem-audio-toggle {
    position: relative;
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    padding: 4px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: transform 170ms ease, filter 170ms ease;
}

.poem-audio-toggle::before {
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--poem-media-control-size);
    height: var(--poem-media-control-size);
    content: "";
    background:
        radial-gradient(circle at 50% 38%, rgb(255 255 255 / 76%), rgb(255 255 255 / 26%) 70%),
        var(--poem-audio-control-bg);
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: 999rem;
    box-shadow:
        0 0.35rem 1rem rgb(67 44 52 / 15%),
        0 0.15rem 0.35rem rgb(255 255 255 / 50%) inset,
        0 -0.18rem 0.4rem rgb(80 38 47 / 11%) inset;
    translate: -50% -50%;
    transition: background 170ms ease, box-shadow 170ms ease;
}

.poem-audio-toggle svg {
    position: relative;
    z-index: 1;
    width: 1.18rem;
    height: 1.18rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.65;
}

.poem-audio-toggle:hover,
.poem-audio-toggle:focus-visible,
.poem-audio-toggle.is-open,
.poem-audio-toggle.is-playing {
    transform: translateY(-0.1rem) scale(1.04);
    filter: brightness(1.035);
}

.poem-audio-toggle.is-open::before,
.poem-audio-toggle.is-playing::before {
    background:
        radial-gradient(circle at 50% 38%, rgb(255 255 255 / 88%), rgb(255 255 255 / 38%) 70%),
        rgb(254 250 249 / 68%);
}

.poem-audio-toggle:active {
    transform: translateY(0.04rem) scale(0.985);
}

.poem-audio-toggle:focus-visible,
.poem-audio-play:focus-visible,
.poem-audio-progress:focus-visible {
    outline: 2px solid #7f3948;
    outline-offset: 2px;
}

.poem-audio-toggle.is-disabled,
.poem-audio-toggle:disabled {
    cursor: not-allowed;
    opacity: var(--poem-audio-control-disabled-opacity);
}

.poem-audio-toggle.is-disabled:hover,
.poem-audio-toggle:disabled:hover,
.poem-audio-toggle.is-disabled:active,
.poem-audio-toggle:disabled:active {
    filter: none;
    transform: none;
}

.poem-audio-tooltip {
    position: absolute;
    z-index: 4;
    inset-inline-end: 0;
    inset-block-end: calc(100% + 0.25rem);
    min-width: max-content;
    padding: 0.36rem 0.5rem;
    color: #fff;
    background: rgb(61 32 37 / 88%);
    border-radius: 0.3rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.16rem);
    transition: opacity 150ms ease, transform 150ms ease;
}

.poem-audio-toggle:hover .poem-audio-tooltip,
.poem-audio-toggle:focus-visible .poem-audio-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.poem-audio-drawer {
    position: relative;
    z-index: 1;
    height: 0;
    margin-block-start: calc(0rem - var(--poem-audio-drawer-overlap));
    overflow: hidden;
    color: var(--color-text);
    background:
        radial-gradient(ellipse at 16% 0%, var(--glass-highlight), transparent 54%),
        linear-gradient(135deg, var(--glass-fill-strong), rgb(255 255 255 / 3%) 58%, rgb(240 232 232 / 4.5%));
    border: 1px solid var(--glass-border);
    border-radius: 0 0 var(--panel-radius) var(--panel-radius);
    box-shadow:
        0 1.25rem 2.4rem rgb(43 38 42 / 12%),
        0 -0.1rem 0.45rem rgb(255 255 255 / 12%) inset,
        0.08rem 0.1rem 0.28rem var(--glass-border-shadow) inset;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) brightness(1.03);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) brightness(1.03);
    opacity: 0;
    pointer-events: none;
    transition:
        height var(--poem-audio-transition-duration) cubic-bezier(0.22, 0.72, 0.26, 1),
        opacity 190ms ease;
}

.poem-audio-drawer.is-open {
    height: var(--poem-audio-player-height);
    opacity: 1;
    pointer-events: auto;
}

.poem-audio-player {
    display: grid;
    min-height: var(--poem-audio-player-height);
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: calc(var(--poem-audio-drawer-overlap) + 0.3rem) 0.75rem 0.35rem;
    transform: translateY(calc(0rem - var(--poem-audio-drawer-overlap)));
    transition: transform var(--poem-audio-transition-duration) cubic-bezier(0.22, 0.72, 0.26, 1);
}

.poem-audio-player.is-open {
    transform: translateY(0);
}

.poem-audio-play {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    padding: 0;
    color: var(--color-text);
    background: rgb(255 255 255 / 30%);
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 999rem;
    cursor: pointer;
}

.poem-audio-play:disabled {
    cursor: wait;
    opacity: 0.58;
}

.poem-audio-play svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.poem-audio-player.is-loading .poem-audio-play svg {
    animation: poem-audio-loading 900ms ease-in-out infinite;
}

.poem-audio-progress {
    width: 100%;
    min-width: 0;
    accent-color: #7f3948;
    cursor: pointer;
}

.poem-audio-progress:disabled {
    cursor: default;
    opacity: 0.5;
}

.poem-audio-time {
    min-width: 5.8rem;
    color: var(--color-text-soft);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    line-height: 1.2;
    text-align: end;
    white-space: nowrap;
}

.poem-audio-player.is-error .poem-audio-time {
    min-width: 10.6rem;
    color: #7f3948;
}

@keyframes poem-audio-loading {
    0%, 100% { opacity: 0.52; transform: scale(0.88); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .poem-bookmark-back,
    .poem-bookmark-fold,
    .poem-bookmark-ribbon-front,
    .poem-bookmark-clasp {
        transition-duration: 120ms;
    }

    .poem-bookmark-ribbon:hover .poem-bookmark-ribbon-upper,
    .poem-bookmark-ribbon:hover .poem-bookmark-ribbon-lower,
    .poem-bookmark-ribbon:focus-visible .poem-bookmark-ribbon-upper,
    .poem-bookmark-ribbon:focus-visible .poem-bookmark-ribbon-lower,
    .poem-bookmark-ribbon.is-setting .poem-bookmark-ribbon-front,
    .poem-bookmark-ribbon.is-clearing .poem-bookmark-ribbon-front {
        animation: none;
    }

    .poem-audio-drawer,
    .poem-audio-player,
    .poem-audio-toggle,
    .poem-audio-toggle::before,
    .poem-share-toggle,
    .poem-share-toggle::before,
    .poem-share-tray,
    .poem-share-action,
    .poem-share-action::before {
        transition-duration: 120ms;
    }

    .poem-audio-player.is-open {
        transform: none;
    }

    .poem-audio-drawer {
        transition: opacity 120ms ease;
    }

    .poem-audio-player.is-loading .poem-audio-play svg {
        animation: none;
    }
}

/* This treatment is intentionally limited to the Home prologue. */
.prologue-panel h1 {
    color: var(--poem-title-color);
    font-family: var(--font-literary-title);
    font-size: var(--scene-prologue-title);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 0.98;
    text-shadow: none;
}

.prologue-panel .poem-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-block-end: 0;
    padding-block-end: var(--poem-content-block-inset);
    padding-inline-end: calc(var(--poem-content-inline-inset) + var(--poem-copyright-rail-size));
    font: var(--prologue-font-profile);
    color: var(--prologue-text-color);
    font-weight: var(--prologue-text-weight);
    font-size: var(--scene-prologue-body);
    font-synthesis: none;
    letter-spacing: 0;
    line-height: 1.54;
    text-shadow: none;
}

.section-list {
    display: grid;
    gap: var(--space-1);
    padding: 0;
    margin: 0;
    list-style: none;
}

.section-list button,
.section-list a,
.section-list span {
    width: 100%;
    padding: 0.8rem 0;
    color: var(--color-text);
    text-align: left;
    background: transparent;
    border: 0;
    border-block-end: 1px solid rgb(80 38 47 / 18%);
    text-shadow: 0 1px 0 rgb(255 255 255 / 26%);
    cursor: pointer;
}

.section-list a,
.section-list span {
    font-size: var(--scene-content-link);
    line-height: 1.42;
}

.section-list button:hover,
.section-list button:focus-visible,
.section-list a:hover,
.section-list a:focus-visible {
    color: #8b3343;
}

.section-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
}

.section-list a,
.section-list span {
    min-width: 0;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.section-list small {
    color: var(--color-text-soft);
    font-family: var(--font-ui);
    font-size: 0.78rem;
}

.empty-state {
    margin: 0;
    color: var(--color-text-soft);
    font-size: clamp(0.95rem, 1.5vw, 1.08rem);
    line-height: 1.55;
}

.social-panel-group {
    display: grid;
    width: min(100%, 32rem);
    grid-template-columns: repeat(2, minmax(7.4rem, 1fr));
    gap: clamp(0.7rem, 1.55vw, 1.15rem);
}

.social-tile {
    display: grid;
    width: auto;
    --glass-fill: rgb(255 255 255 / 4.5%);
    --glass-fill-strong: rgb(255 255 255 / 6.75%);
    --glass-noise-opacity: 0.04;
    --glass-render-density: 0.0525;
    min-height: 6.35rem;
    place-items: center;
    gap: 0.55rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background:
        radial-gradient(ellipse at 18% 12%, rgb(255 255 255 / 9%), transparent 36%),
        linear-gradient(136deg, var(--glass-fill-strong), rgb(255 255 255 / 3%) 48%, rgb(126 79 91 / 3.75%));
    box-shadow:
        0 1.45rem 3.2rem rgb(43 38 42 / 10.5%),
        0 0 0 1px rgb(255 255 255 / 9%) inset,
        inset 0 0 0.75rem rgb(255 255 255 / 9%);
    cursor: pointer;
    text-shadow: 0 1px 0 rgb(255 255 255 / 36%);
}

.social-tile:hover,
.social-tile:focus-visible {
    transform: translateY(-0.16rem);
}

.social-mark {
    display: grid;
    width: 2.35rem;
    aspect-ratio: 1;
    place-items: center;
    color: rgb(255 255 255 / 92%);
    background: rgb(80 38 47 / 56%);
    border-radius: 999rem;
    font-weight: 700;
}

.login-panel {
    --glass-render-density: 0.045;
    width: min(100%, 40rem);
}

.account-details {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.account-details div {
    display: grid;
    gap: 0.18rem;
    padding-block-end: var(--space-2);
    border-block-end: 1px solid rgb(80 38 47 / 16%);
}

.account-details dt {
    color: var(--color-text-soft);
    font-size: 0.78rem;
}

.account-details dd {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
}

.account-actions {
    display: grid;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}

.account-actions .submit-button {
    display: grid;
    place-items: center;
    padding: 0.65rem 0.75rem;
    text-align: center;
    text-decoration: none;
}

.account-link {
    display: block;
    min-height: 2.55rem;
    padding: 0.62rem 0.72rem;
    color: var(--color-text);
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 0.35rem;
    background: rgb(255 255 255 / 7%);
    text-align: center;
    text-decoration: none;
}

.text-button {
    min-height: 2.5rem;
    color: var(--color-text-soft);
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.form-error {
    margin: 0 0 var(--space-2);
    padding: 0.6rem 0.7rem;
    color: #67232f;
    background: rgb(255 239 240 / 52%);
    border: 1px solid rgb(113 36 49 / 26%);
    border-radius: 0.3rem;
    font-size: 0.88rem;
    line-height: 1.4;
}

.login-form:not(.user-form) {
    display: grid;
    gap: var(--space-2);
}

.login-form:not(.user-form) label {
    display: grid;
    gap: 0.45rem;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

.login-form:not(.user-form) input[type="text"],
.login-form:not(.user-form) input[type="password"] {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.65rem 0.75rem;
    color: var(--color-text);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 14%)),
        rgb(255 255 255 / 18%);
    border: 1px solid rgb(255 255 255 / 46%);
    border-radius: 0.35rem;
    box-shadow:
        0 0.65rem 1.4rem rgb(43 38 42 / 8%),
        inset 0 0 0.7rem rgb(255 255 255 / 20%);
    backdrop-filter: blur(0.8rem) saturate(80%);
    -webkit-backdrop-filter: blur(0.8rem) saturate(80%);
}

.check-row {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.submit-button {
    min-height: 2.9rem;
    color: var(--color-page-warm);
    background: #512832;
    border: 0;
    border-radius: 0.35rem;
    cursor: pointer;
}

.account-secondary-button {
    display: inline-grid;
    place-items: center;
    min-height: 2.75rem;
    padding: 0.62rem 0.78rem;
    color: var(--color-text);
    background: rgb(255 255 255 / 12%);
    border: 1px solid rgb(255 255 255 / 38%);
    border-radius: 0.35rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.public-document-body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
}

.public-document-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}

.account-public-page {
    align-items: start;
    min-height: 100dvh;
    padding: clamp(1rem, 4vh, 3.5rem) max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.account-page-panel {
    width: min(100%, 48rem);
    max-height: none;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.account-page-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
}

.account-page-header h1,
.account-page-header p { margin: 0; }
.account-page-header h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.account-page-header p,
.account-hint,
.account-readonly { color: var(--color-text-soft); font-size: 0.88rem; line-height: 1.45; }
.account-page-back { color: var(--color-text); font-size: 0.85rem; white-space: nowrap; }
.account-page-scroll { display: grid; gap: 1.1rem; }
.account-section { display: grid; gap: 0.72rem; padding-block-start: 1rem; border-block-start: 1px solid rgb(255 255 255 / 22%); }
.account-section h2 { margin: 0; font-size: 1.18rem; }
.account-section p { margin: 0; }
.account-form { display: grid; gap: 0.72rem; }
.account-form label { display: grid; gap: 0.32rem; color: var(--color-text-soft); font-size: 0.86rem; }
.account-form input:not([type="checkbox"]):not(.user-form-control) { width: 100%; min-height: 2.75rem; padding: 0.58rem 0.64rem; color: var(--color-text); background: rgb(255 255 255 / 21%); border: 1px solid rgb(255 255 255 / 37%); border-radius: 0.35rem; }
.account-checkbox { grid-template-columns: auto minmax(0, 1fr); align-items: start; cursor: pointer; }
.account-checkbox input { width: 1.1rem; height: 1.1rem; margin: 0.08rem 0 0; }
.account-email-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; }
.account-email-status.is-verified { color: #315d4a; }
.account-email-status.is-unverified { color: #7a4832; }
.account-flash { margin: 0 0 1rem; padding: 0.62rem 0.72rem; color: #315d4a; background: rgb(235 248 240 / 54%); border: 1px solid rgb(54 101 76 / 24%); border-radius: 0.35rem; }
.account-inline-form { display: inline; }
.account-admin-link { display: inline-block; color: var(--color-text); font-weight: 600; }
.account-logout-form { margin: 0; }
.account-compact-card { display: grid; gap: 1rem; max-width: 31rem; padding: clamp(1rem, 3vw, 1.5rem); }
.account-compact-card h1,
.account-compact-card p { margin: 0; }

@media (max-width: 44rem) {
    .account-public-page { padding-block-start: max(1rem, env(safe-area-inset-top)); }
    .account-page-header { align-items: center; }
    .account-page-header h1 { font-size: 1.75rem; }
    .registration-actions { grid-template-columns: 1fr; }
}

.feedback-panel {
    --glass-render-density: 0.055;
    width: clamp(32.5rem, 46vw, 42.5rem);
    max-height: min(76vh, 44rem);
    max-height: min(76dvh, 44rem);
    overflow: hidden;
}

.feedback-intro {
    margin: 0 0 var(--space-3);
    color: var(--color-text-soft);
    font-size: 0.94rem;
    line-height: 1.5;
    text-shadow: 0 1px 0 rgb(255 255 255 / 28%);
}

.feedback-form {
    display: grid;
    gap: 0.48rem;
}

.feedback-form > label {
    margin-block-start: 0.36rem;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

.feedback-form input[type="text"],
.feedback-form textarea,
.feedback-form select {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.65rem 0.75rem;
    color: var(--color-text);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 21%), rgb(255 255 255 / 9%)),
        rgb(255 255 255 / 8%);
    border: 1px solid rgb(255 255 255 / 37%);
    border-radius: 0.35rem;
    box-shadow:
        0 0.55rem 1.25rem rgb(43 38 42 / 7%),
        inset 0 0 0.65rem rgb(255 255 255 / 15%);
    backdrop-filter: blur(0.7rem) saturate(78%);
    -webkit-backdrop-filter: blur(0.7rem) saturate(78%);
}

.feedback-form textarea {
    min-height: 9rem;
    line-height: 1.46;
    resize: vertical;
}

.feedback-form select {
    cursor: pointer;
}

.feedback-form .submit-button {
    margin-block-start: var(--space-2);
}

.feedback-form .submit-button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.feedback-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.field-error {
    margin: 0;
    color: #782c38;
    font-size: 0.82rem;
    line-height: 1.35;
}

.feedback-success {
    display: grid;
    gap: var(--space-2);
    min-block-size: 12rem;
    align-content: center;
}

.feedback-success p {
    margin: 0;
    color: var(--color-text-soft);
    line-height: 1.5;
}

.rights-panel {
    --glass-render-density: 0.06;
    width: min(75vw, 1120px);
    max-height: min(80vh, 80dvh);
    --public-panel-padding-inline: clamp(1.25rem, 2.5vw, 2.2rem);
    --public-panel-padding-block: clamp(1.25rem, 2.5vw, 2.2rem);
    padding: var(--public-panel-padding-block) var(--public-panel-padding-inline);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rights-header {
    padding-block-end: var(--space-2);
    border-block-end: 1px solid rgb(255 255 255 / 28%);
}

.rights-panel h1 {
    margin-block-end: var(--space-1);
    font-size: var(--scene-panel-title);
}

.rights-summary {
    margin: 0;
    color: var(--color-text-soft);
    font-size: clamp(0.86rem, 1.2vw, 1rem);
}

.rights-panel .rights-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-block-end: var(--panel-copyright-safe-block);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: var(--space-3) var(--panel-copyright-safe-block);
    padding-inline-end: 0.45rem;
    scrollbar-color: rgb(80 38 47 / 38%) rgb(255 255 255 / 18%);
    scrollbar-width: thin;
}

.rights-scroll::-webkit-scrollbar {
    width: 0.55rem;
}

.rights-scroll::-webkit-scrollbar-thumb {
    background: rgb(80 38 47 / 34%);
    border-radius: 999rem;
}

.rights-scroll::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 16%);
    border-radius: 999rem;
}

.rights-panel .site-copyright--panel {
    inset-inline-end: 1.35rem;
}

.rights-section {
    display: grid;
    gap: 0.45rem;
    margin-block-end: var(--space-3);
}

.rights-section h2 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--scene-rights-heading);
    font-weight: 650;
    line-height: 1.25;
}

.rights-section p,
.rights-contact {
    margin: 0;
    color: #4d3035;
    font-size: var(--scene-rights-body);
    line-height: 1.56;
}

.rights-contact {
    display: grid;
    gap: 0.35rem;
    padding-block-start: 0.2rem;
    font-style: normal;
}

.rights-quote {
    margin: 0 0 var(--space-3);
    padding: 0.75rem 1rem;
    color: #4d3035;
    border-inline-start: 2px solid rgb(80 38 47 / 24%);
    font-family: var(--font-text);
    font-size: var(--scene-rights-body);
    line-height: 1.56;
}

.rights-quote p,
.rights-quote p + p {
    margin: 0.25rem 0;
}

.rights-image {
    margin: 0 0 var(--space-3);
}

.rights-image img {
    display: block;
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 0.3rem;
}

.rights-image--medium { max-width: min(100%, 38rem); }
.rights-image--left { max-width: min(100%, 32rem); margin-inline-end: auto; }
.rights-image--right { max-width: min(100%, 32rem); margin-inline-start: auto; }

.rights-image figcaption,
.rights-link {
    margin: 0.55rem 0 0;
    color: #4d3035;
    font-size: var(--scene-rights-body);
    line-height: 1.5;
}

.rights-link a,
.rights-image figcaption a,
.rights-section p a,
.rights-quote a {
    color: #6e2635;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.poem-meta {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    color: var(--color-text-soft);
    border-block-start: 1px solid rgb(80 38 47 / 16%);
    font-size: 0.86rem;
}

.poem-meta p {
    margin: 0;
}

.menu-button,
.pager-button {
    position: relative;
    display: grid;
    width: var(--control-size);
    min-width: 44px;
    aspect-ratio: 1;
    place-items: center;
    color: var(--color-text);
    background:
        radial-gradient(circle at 50% 42%, rgb(255 255 255 / 92%), rgb(255 255 255 / 58%) 58%, rgb(255 255 255 / 34%)),
        var(--color-control);
    border: 1px solid rgb(255 255 255 / 88%);
    border-radius: 999rem;
    box-shadow:
        0 0.8rem 1.8rem var(--color-shadow-cool),
        0 0.25rem 0.7rem rgb(255 255 255 / 70%) inset,
        0 -0.35rem 0.75rem rgb(80 38 47 / 10%) inset;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease,
        background 180ms ease;
}

.menu-button:hover,
.menu-button:focus-visible,
.pager-button:not(:disabled):hover,
.pager-button:not(:disabled):focus-visible {
    transform: translateY(-0.16rem) scale(1.025);
    filter: brightness(1.03);
    box-shadow:
        0 1.05rem 2.2rem rgb(80 38 47 / 20%),
        0 0.35rem 0.9rem rgb(255 255 255 / 84%) inset,
        0 -0.28rem 0.7rem rgb(80 38 47 / 12%) inset;
}

.menu-button:active,
.pager-button:not(:disabled):active {
    transform: translateY(0.08rem) scale(0.985);
    box-shadow:
        0 0.35rem 0.8rem rgb(80 38 47 / 12%),
        0 0.18rem 0.5rem rgb(255 255 255 / 58%) inset,
        0 0.22rem 0.8rem rgb(80 38 47 / 16%) inset;
}

.menu-button.is-active {
    color: #fff;
    background:
        radial-gradient(circle at 50% 40%, rgb(127 57 72), rgb(76 36 45) 70%),
        #512832;
}

.menu-button.menu-bookmark {
    color: #765421;
    background:
        radial-gradient(circle at 42% 34%, rgb(255 248 220 / 90%), rgb(244 224 168 / 56%) 60%, rgb(186 142 66 / 28%)),
        var(--color-control);
    border-color: rgb(235 206 132 / 72%);
}

.menu-button.menu-bookmark:hover,
.menu-button.menu-bookmark:focus-visible {
    color: #6b461b;
    background:
        radial-gradient(circle at 44% 28%, rgb(255 253 229 / 96%), rgb(242 216 148 / 65%) 60%, rgb(177 126 49 / 33%)),
        var(--color-control);
}

.tooltip {
    position: absolute;
    inset-inline-start: calc(100% + 0.65rem);
    inset-block-start: 50%;
    translate: 0 -50%;
    min-width: max-content;
    padding: 0.4rem 0.55rem;
    color: white;
    background: rgb(61 32 37 / 88%);
    border-radius: 0.35rem;
    font-size: 0.76rem;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease;
}

.menu-button:hover .tooltip,
.menu-button:focus-visible .tooltip {
    opacity: 1;
    transform: translateX(0);
}

.pager-button:disabled {
    cursor: not-allowed;
    opacity: 0.54;
}

.pager-count {
    display: grid;
    min-width: 3rem;
    place-items: center;
    padding: 0.35rem 0.25rem;
    color: var(--color-text-soft);
    font-size: 0.78rem;
}

.transition-fallback {
    position: absolute;
    inset: -16%;
    opacity: 0;
    background:
        radial-gradient(ellipse at 17% 28%, rgb(22 21 22 / 72%), transparent 19%),
        radial-gradient(ellipse at 74% 32%, rgb(36 34 35 / 66%), transparent 24%),
        radial-gradient(ellipse at 42% 76%, rgb(18 17 18 / 74%), transparent 27%),
        radial-gradient(ellipse at 84% 78%, rgb(65 61 62 / 48%), transparent 25%),
        rgb(36 34 35 / 12%);
    filter: blur(1.15rem) contrast(1.08);
    transform: scale(0.7) rotate(-3deg);
    transition:
        opacity 260ms ease,
        transform 900ms cubic-bezier(0.18, 0.86, 0.25, 1);
}

.transition-layer.is-fallback.is-active .transition-fallback {
    opacity: 0.92;
    transform: scale(1.16) rotate(2deg);
}

@media (max-width: 52rem) {
    .glass-panel {
        --panel-width: clamp(20rem, 72vw, 34rem);
        padding: var(--public-panel-padding-block) var(--public-panel-padding-inline);
    }

    .poem-media-composition {
        width: clamp(20rem, 72vw, 34rem);
    }
}

@media (max-width: 44rem) and (orientation: portrait) {
    .glass-panel {
        --glass-fill: rgb(255 255 255 / 3.375%);
        --glass-fill-strong: rgb(255 255 255 / 4.125%);
        --glass-blur: 0.58rem;
        --glass-noise-opacity: 0.025;
        --glass-render-density: 0.04;
        width: min(92vw, 31rem);
        max-width: calc(var(--viewport-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--mobile-panel-gap));
        max-height: calc(100vh - var(--mobile-bottom-ui-height) - 3.5rem);
        max-height: calc(var(--viewport-height, 100dvh) - var(--mobile-bottom-ui-height) - 3.5rem);
        padding: var(--public-panel-padding-block-portrait) var(--public-panel-padding-inline-portrait);
        box-shadow:
            0 1.1rem 2.5rem rgb(43 38 42 / 9%),
            0 0.22rem 0.65rem rgb(255 255 255 / 7%) inset,
            0 0 0 1px rgb(255 255 255 / 8%) inset;
    }

    .glass-panel::before {
        opacity: 0.42;
    }

    .glass-panel::after {
        opacity: 0.7;
    }

    .rights-panel {
        --public-panel-padding-inline: var(--public-panel-padding-inline-portrait);
        --public-panel-padding-block: var(--public-panel-padding-block-portrait);
        width: calc(var(--viewport-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--space-2));
        max-height: calc(var(--viewport-height, 100dvh) - var(--mobile-bottom-ui-height) - 4.5rem);
    }

    .rights-scroll {
        max-height: calc(var(--viewport-height, 100dvh) - var(--mobile-bottom-ui-height) - 13rem);
    }

    .glass-panel h1 {
        font-size: var(--mobile-scene-title);
        line-height: 1.04;
    }

    .poem-panel:not(.prologue-panel) {
        --poem-content-inline-inset: clamp(0.85rem, 4vw, 1rem);
        --poem-content-block-inset: 0.16rem;
        --poem-title-size: var(--mobile-poem-title);
        --poem-body-size: var(--mobile-poem-body);
        --poem-body-line-height: var(--mobile-poem-body-line-height);
    }

    .prologue-panel h1 {
        font-size: var(--mobile-prologue-title);
        line-height: 1;
    }

    .content-panel h1 {
        font-size: var(--mobile-content-title);
    }

    .content-panel .panel-kicker {
        margin-block-end: 0.45rem;
        font-size: clamp(0.625rem, 2.7vw, 0.75rem);
    }

    .poem-panel {
        --poem-readability-fill: var(--poem-readability-fill-mobile);
        --poem-readability-fill-edge: var(--poem-readability-fill-edge-mobile);
        max-height: min(62dvh, calc(var(--viewport-height, 100dvh) - var(--mobile-bottom-ui-height) - 2.5rem));
    }

    .poem-panel:not(.prologue-panel) {
        max-height: min(66dvh, calc(var(--viewport-height, 100dvh) - var(--mobile-bottom-ui-height) - 2.1rem));
    }

    .poem-panel:not(.prologue-panel) .poem-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .poem-panel:not(.prologue-panel) .poem-pager-host {
        position: relative;
        z-index: 4;
        display: flex;
        flex: 0 0 var(--mobile-poem-pager-touch-size);
        align-items: center;
        justify-content: flex-end;
        min-height: var(--mobile-poem-pager-touch-size);
        padding-inline:
            var(--poem-content-inline-inset)
            calc(var(--bookmark-width) + 1.15rem);
        margin-block: 0 calc(var(--space-1) * 0.12);
    }

    .poem-panel:not(.prologue-panel) .poem-pager-host > .poem-pager {
        position: static;
        z-index: auto;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: var(--mobile-poem-pager-touch-size) minmax(var(--mobile-poem-pager-count-width), auto) var(--mobile-poem-pager-touch-size);
        align-items: center;
        justify-items: center;
        gap: 0.08rem;
        width: auto;
        min-height: var(--mobile-poem-pager-visual-height);
        padding: 0.03rem 0.1rem;
        color: var(--color-text);
        background: rgb(255 255 255 / 24%);
        border: 1px solid rgb(255 255 255 / 46%);
        border-radius: 999rem;
        box-shadow: 0 0.22rem 0.55rem rgb(67 44 52 / 10%), 0 0.08rem 0.24rem rgb(255 255 255 / 38%) inset;
        backdrop-filter: blur(0.48rem) saturate(74%);
        -webkit-backdrop-filter: blur(0.48rem) saturate(74%);
        translate: none;
    }

    .poem-panel:not(.prologue-panel) .poem-pager-host > .poem-pager .pager-button {
        width: var(--mobile-poem-pager-touch-size);
        min-width: var(--mobile-poem-pager-touch-size);
        height: var(--mobile-poem-pager-touch-size);
        margin-block: calc((var(--mobile-poem-pager-visual-height) - var(--mobile-poem-pager-touch-size)) / 2);
        color: var(--color-text);
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .poem-panel:not(.prologue-panel) .poem-pager-host > .poem-pager .pager-button svg {
        width: 1rem;
        height: 1rem;
    }

    .poem-panel:not(.prologue-panel) .poem-pager-host > .poem-pager .pager-button:hover,
    .poem-panel:not(.prologue-panel) .poem-pager-host > .poem-pager .pager-button:focus-visible {
        background: rgb(255 255 255 / 22%);
        box-shadow: 0 0.1rem 0.25rem rgb(67 44 52 / 8%) inset;
        transform: none;
    }

    .poem-panel:not(.prologue-panel) .poem-pager-host > .poem-pager .pager-count {
        min-width: var(--mobile-poem-pager-count-width);
        padding-inline: 0.08rem;
        font-size: 0.7rem;
    }

    .poem-media-composition {
        --poem-audio-player-height: 3.5rem;
        width: min(92vw, 31rem);
        max-width: calc(var(--viewport-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--mobile-panel-gap));
    }

    .poem-share-tray {
        inset-block-start: 100%;
        inset-inline-end: 0;
        display: flex;
        width: auto;
        max-width: min(calc(var(--viewport-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 2.2rem), 14.4rem);
        gap: 0.02rem;
        padding: 0.06rem;
        transform: translateY(-0.2rem) scale(0.96);
        transform-origin: 100% 100%;
    }

    .poem-share.is-open .poem-share-tray {
        transform: translateY(0) scale(1);
    }

    .poem-audio-player {
        grid-template-columns: 2.2rem minmax(0, 1fr);
        grid-template-areas:
            "play progress"
            "play time";
        gap: 0.25rem 0.55rem;
        padding: calc(var(--poem-audio-drawer-overlap) + 0.2rem) 0.65rem 0.25rem;
    }

    .poem-audio-play { grid-area: play; }
    .poem-audio-progress { grid-area: progress; }
    .poem-audio-time { grid-area: time; min-width: 0; font-size: 0.68rem; }

    .poem-audio-player.is-error .poem-audio-time { min-width: 0; }

    .poem-panel:not(.prologue-panel) .poem-body {
        white-space: pre-wrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    .prologue-panel .poem-body {
        font-size: var(--mobile-prologue-body);
        line-height: 1.54;
    }

    .social-panel-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 28rem);
        max-width: calc(var(--viewport-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--mobile-panel-gap));
    }

    .social-panel-group .social-tile {
        width: auto;
        min-width: 0;
    }

    .social-tile {
        --glass-fill: rgb(255 255 255 / 2.625%);
        --glass-fill-strong: rgb(255 255 255 / 3.375%);
        --glass-render-density: 0.035;
        min-height: 5.35rem;
        padding: 0.85rem 0.65rem;
    }

    .section-list a,
    .section-list span {
        padding-block: 0.68rem;
        font-size: var(--mobile-content-link);
    }

    .section-list small,
    .poem-meta,
    .panel-kicker,
    .account-details dt {
        font-size: var(--mobile-metadata);
    }

    .login-panel {
        --glass-fill: rgb(255 255 255 / 3.75%);
        --glass-fill-strong: rgb(255 255 255 / 4.875%);
        --glass-render-density: 0.041;
        width: min(90vw, 25rem);
    }

    .feedback-panel {
        --glass-fill: rgb(255 255 255 / 3.9%);
        --glass-fill-strong: rgb(255 255 255 / 4.9%);
        --glass-render-density: 0.043;
        width: min(92vw, 34rem);
        max-height: calc(var(--viewport-height, 100dvh) - var(--mobile-bottom-ui-height) - 3.5rem);
    }

    .feedback-intro {
        margin-block-end: 0.8rem;
        font-size: 0.88rem;
    }

    .feedback-form textarea {
        min-height: 8rem;
    }

    .login-form:not(.user-form) input[type="text"],
    .login-form:not(.user-form) input[type="password"] {
        background:
            linear-gradient(135deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 12%)),
            rgb(255 255 255 / 14%);
        backdrop-filter: blur(0.55rem) saturate(78%);
        -webkit-backdrop-filter: blur(0.55rem) saturate(78%);
    }

    .tooltip {
        display: none;
    }

    .poem-book {
        perspective: 52rem;
    }
}

@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
    .glass-panel {
        --glass-fill: rgb(255 255 255 / 3%);
        --glass-fill-strong: rgb(255 255 255 / 3.75%);
        --glass-blur: 0.54rem;
        --glass-render-density: 0.035;
        max-height: calc(var(--viewport-height, 100dvh) - 1.5rem);
        padding: var(--public-panel-padding-block-landscape) var(--public-panel-padding-inline-landscape);
    }

    .glass-panel h1 {
        margin-block-end: var(--space-2);
        font-size: clamp(1.25rem, 3.1vw, 1.65rem);
    }

    .poem-panel:not(.prologue-panel) {
        --poem-content-inline-inset: clamp(0.75rem, 1.8vw, 0.95rem);
        --poem-content-block-inset: 0.1rem;
        --poem-title-size: clamp(1.25rem, 3.1vw, 1.65rem);
        --poem-body-size: var(--mobile-poem-body-landscape);
        --poem-body-line-height: var(--mobile-poem-body-landscape-line-height);
    }

    .poem-media-composition {
        --poem-audio-player-height: 3rem;
    }

    .poem-share-tray {
        inset-block-start: calc(100% + 0.22rem);
        inset-block-end: auto;
        inset-inline-end: 0;
        transform: translateY(-0.22rem) scale(0.96);
        transform-origin: 100% 0;
    }

    .poem-share.is-open .poem-share-tray {
        transform: translateY(0) scale(1);
    }

    .poem-media-composition.has-audio .poem-panel {
        max-height: calc(var(--viewport-height, 100dvh) - 1.5rem - var(--poem-audio-player-height) + var(--poem-audio-drawer-overlap));
    }

    .poem-audio-player {
        gap: 0.45rem;
        padding: calc(var(--poem-audio-drawer-overlap) + 0.16rem) 0.6rem 0.2rem;
    }

    .poem-audio-time {
        min-width: 5rem;
        font-size: 0.66rem;
    }

    .prologue-panel h1 {
        font-size: clamp(1.375rem, 3.2vw, 1.75rem);
        line-height: 0.98;
    }

    .prologue-panel .poem-body {
        font-size: clamp(0.9375rem, 2.4vw, 1rem);
        line-height: 1.48;
    }

    .social-panel-group {
        max-width: min(30rem, 72vw);
        grid-template-columns: repeat(4, minmax(5rem, 1fr));
    }

    .login-panel {
        width: min(68vw, 32rem);
    }

    .social-tile {
        --glass-fill: rgb(255 255 255 / 2.625%);
        --glass-fill-strong: rgb(255 255 255 / 3.375%);
        --glass-render-density: 0.035;
        min-height: 4.4rem;
        padding: 0.65rem 0.45rem;
    }

    .rights-panel {
        --public-panel-padding-inline: var(--public-panel-padding-inline-landscape);
        --public-panel-padding-block: var(--public-panel-padding-block-landscape);
        max-height: calc(var(--viewport-height, 100dvh) - 1.5rem);
    }

    .rights-image--left,
    .rights-image--right {
        max-width: 100%;
        margin-inline: 0;
    }

    .rights-scroll {
        max-height: calc(var(--viewport-height, 100dvh) - 6rem);
    }
}

.admin-document {
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--scene-shell-bg, #f3f0ed);
}

.admin-body {
    width: 100%;
    min-width: 0;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--scene-shell-bg, #f3f0ed);
    color: #251f22;
}

.admin-shell {
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    z-index: 10;
    top: max(0.5rem, env(safe-area-inset-top));
    width: min(94vw, 1500px);
    margin: 0 auto 18px;
    padding: 0.55rem 0.7rem;
    background: rgb(244 241 235 / 72%);
    border: 1px solid rgb(255 255 255 / 36%);
    border-radius: 8px;
    backdrop-filter: blur(0.8rem) saturate(80%);
    -webkit-backdrop-filter: blur(0.8rem) saturate(80%);
}

.admin-brand,
.admin-header a {
    color: inherit;
    text-decoration: none;
}

.admin-identity {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.admin-brand {
    font-size: 1rem;
    font-weight: 760;
    letter-spacing: 0;
}

.admin-username {
    overflow: hidden;
    color: #6b5960;
    font-size: 0.78rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.admin-header-actions form {
    margin: 0;
}

.admin-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgb(96 38 58 / 20%);
    border-radius: 6px;
    background: rgb(255 255 255 / 25%);
    color: #53233a;
    font: inherit;
    font-size: 0.86rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.admin-header-action--logout {
    border-color: rgb(143 40 56 / 35%);
    background: rgb(143 40 56 / 10%);
    color: #8f2838;
}

.admin-main {
    width: min(94vw, 1500px);
    min-height: 0;
    margin: 0 auto;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
}

.admin-card {
    min-height: 0;
    max-height: none;
    overflow: visible;
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 8%) 46%, rgb(238 230 232 / 12%));
    box-shadow: 0 28px 80px rgb(54 42 47 / 18%), inset 0 1px 0 rgb(255 255 255 / 42%);
    backdrop-filter: blur(18px) saturate(74%) brightness(1.03);
    -webkit-backdrop-filter: blur(18px) saturate(74%) brightness(1.03);
    padding: clamp(20px, 4vw, 42px);
}

.auth-card {
    max-width: 520px;
    margin: 10dvh auto 0;
}

.admin-form {
    min-height: 0;
    overflow: visible;
    display: grid;
    gap: 16px;
}

.admin-form label {
    display: grid;
    gap: 7px;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    width: 100%;
    border: 1px solid rgb(120 92 102 / 35%);
    border-radius: 8px;
    background: rgb(255 255 255 / 35%);
    color: inherit;
    padding: 11px 12px;
    font: inherit;
}

.admin-form input:focus-visible,
.admin-form textarea:focus-visible,
.admin-form select:focus-visible,
.admin-card a:focus-visible,
.admin-card button:focus-visible {
    outline: 2px solid rgb(96 38 58 / 82%);
    outline-offset: 3px;
}

.admin-form button {
    border: 1px solid rgb(96 38 58 / 35%);
    border-radius: 8px;
    background: rgb(96 38 58 / 88%);
    color: #fff;
    padding: 10px 14px;
    font: inherit;
    cursor: pointer;
}

.form-error,
.admin-warning {
    border-left: 3px solid rgb(125 47 67 / 80%);
    padding: 10px 12px;
    background: rgb(255 255 255 / 28%);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.admin-grid a,
.content-section-list a {
    color: #53233a;
}

.admin-filter-links,
.admin-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.admin-filter-links a,
.admin-pagination a {
    min-height: 2.25rem;
    padding: 0.5rem 0.7rem;
    color: #53233a;
    border: 1px solid rgb(96 38 58 / 22%);
    border-radius: 6px;
    background: rgb(255 255 255 / 22%);
    text-decoration: none;
}

.admin-filter-links a[aria-current="page"],
.admin-pagination a[aria-current="page"] {
    color: #fff;
    background: rgb(96 38 58 / 82%);
}

.admin-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin: 0;
}

.admin-detail-list div {
    min-width: 0;
    padding-block-end: 0.65rem;
    border-block-end: 1px solid rgb(96 38 58 / 14%);
}

.admin-detail-list dt {
    color: #6b5960;
    font-size: 0.78rem;
}

.admin-detail-list dd {
    margin: 0.18rem 0 0;
    overflow-wrap: anywhere;
}

.feedback-admin-body {
    margin-block: 1.5rem;
}

.feedback-admin-body h2 {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
}

.feedback-admin-body > div {
    padding: 0.9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid rgb(96 38 58 / 16%);
    border-radius: 6px;
    background: rgb(255 255 255 / 20%);
    line-height: 1.55;
}

.feedback-admin-actions {
    margin-block-start: 1rem;
}

@media (max-width: 44rem) {
    .poem-media-composition {
        --bookmark-width: 1.16rem;
        --bookmark-length: 3.45rem;
        --bookmark-set-offset: 0.64rem;
    }

    .poem-bookmark-back {
        inset-block-start: -0.48rem;
        inset-inline-end: 0.82rem;
        height: 1.42rem;
    }

    .reading-bookmark-form {
        inset-block-start: -0.61rem;
        inset-inline-end: 0.32rem;
        width: 2.75rem;
        height: calc(var(--bookmark-length) + 1.2rem);
    }

    .poem-bookmark-tooltip {
        display: none;
    }

    .poem-preview-toolbar {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .poem-preview-back-link {
        min-height: 44px;
        margin-inline-start: auto;
        padding-inline: 0.7rem;
    }

    .admin-detail-list {
        grid-template-columns: 1fr;
    }
}

.content-page {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 24px;
}

.content-card {
    width: min(880px, 100%);
}

/* Public document panels retain glass depth without inheriting the denser CMS material. */
.content-page .content-card {
    border-color: rgb(255 255 255 / 32%);
    background: linear-gradient(135deg, rgb(255 255 255 / 13.5%), rgb(255 255 255 / 6%) 46%, rgb(238 230 232 / 9%));
    box-shadow: 0 28px 80px rgb(54 42 47 / 13.5%), inset 0 1px 0 rgb(255 255 255 / 31.5%);
    backdrop-filter: blur(16px) saturate(74%) brightness(1.03);
    -webkit-backdrop-filter: blur(16px) saturate(74%) brightness(1.03);
}

.content-page .content-card h1 {
    font-size: clamp(2.25rem, 2.3vw, 2.75rem);
    line-height: 1.08;
}

.content-page .content-card h2 {
    font-size: clamp(1.0625rem, 1.05vw, 1.3125rem);
}

.admin-toolbar,
.admin-filter,
.admin-actions,
.admin-actions-block,
.admin-inline-form,
.public-poem-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-toolbar {
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-button,
.admin-actions a,
.public-poem-nav a {
    border: 1px solid rgb(96 38 58 / 26%);
    border-radius: 8px;
    color: #53233a;
    padding: 9px 11px;
    text-decoration: none;
}

.admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.admin-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid rgb(80 54 65 / 16%);
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
}

.admin-actions form {
    display: inline;
}

.admin-actions button {
    min-height: 36px;
    padding: 7px 9px;
}

.position-input {
    width: 4rem;
}

.admin-flash {
    border-left: 3px solid rgb(50 110 80 / 82%);
    padding: 10px 12px;
    background: rgb(255 255 255 / 30%);
}

.poem-body-editor {
    font-family: ui-serif, Georgia, serif;
    line-height: 1.6;
    white-space: pre-wrap;
}

.poem-preview-text,
.public-poem-body {
    white-space: pre-wrap;
    font-family: ui-serif, Georgia, serif;
    line-height: 1.75;
}

.poem-preview-text {
    overflow: auto;
    border: 1px solid rgb(80 54 65 / 16%);
    border-radius: 8px;
    padding: 14px;
    background: rgb(255 255 255 / 28%);
}

.public-poem {
    max-width: 760px;
}

.public-poem-nav {
    justify-content: space-between;
    margin-top: 24px;
}

.content-section-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.admin-page-header {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    margin-bottom: 1rem;
}

.admin-page-header h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
}

.admin-page-header--without-back {
    grid-template-columns: minmax(0, 1fr) auto;
}

.admin-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.admin-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(96 38 58 / 24%);
    border-radius: 8px;
    background: rgb(255 255 255 / 18%);
    color: #53233a;
    text-decoration: none;
}

.admin-back-button:hover {
    background: rgb(255 255 255 / 34%);
}

.admin-back-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.admin-intro,
.admin-hint,
.admin-form small,
.poem-editor-section > small {
    color: #6b5960;
    line-height: 1.45;
}

.collection-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 1.15rem 0 1.5rem;
    overflow: hidden;
    border: 1px solid rgb(96 38 58 / 16%);
    border-radius: 8px;
    background: rgb(100 64 76 / 12%);
}

.collection-overview div {
    display: grid;
    gap: 0.3rem;
    min-height: 4.9rem;
    padding: 0.8rem;
    background: rgb(255 255 255 / 18%);
}

.collection-overview span,
.media-detail-list dt {
    color: #6b5960;
    font-size: 0.78rem;
}

.collection-overview strong,
.collection-overview a {
    color: #3f2733;
    overflow-wrap: anywhere;
}

.collection-editor-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collection-editor-description {
    grid-column: 1 / -1;
}

.poem-editor-card {
    max-width: none;
}

.poem-edit-form {
    gap: 1.35rem;
}

.poem-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    gap: clamp(1rem, 3vw, 2.5rem);
}

.poem-editor-column {
    display: grid;
    min-width: 0;
    gap: 0.9rem;
    padding: 0;
    border: 0;
}

.poem-editor-column legend {
    padding: 0;
    margin-bottom: 0.45rem;
    color: #50303d;
    font-size: 1.05rem;
    font-weight: 700;
}

.poem-editor-column label.is-disabled {
    opacity: 0.62;
}

.poem-editor-actions {
    display: grid;
    gap: 0.65rem;
    align-content: end;
    margin-top: auto;
}

.poem-editor-sticky-actions {
    position: sticky;
    z-index: 5;
    bottom: max(0.55rem, env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0.6rem;
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 8px;
    background: rgb(244 241 235 / 86%);
    box-shadow: 0 0.8rem 2rem rgb(54 42 47 / 12%);
    backdrop-filter: blur(0.75rem) saturate(78%);
    -webkit-backdrop-filter: blur(0.75rem) saturate(78%);
}

.poem-editor-sticky-actions .admin-button,
.poem-editor-sticky-actions button {
    min-height: 2.7rem;
}

.poem-editor-actions .admin-button,
.poem-editor-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    text-align: center;
}

.admin-button--primary {
    color: #fff !important;
    background: #673047;
    border-color: #673047 !important;
}

.poem-editor-section {
    padding-top: 1.25rem;
    border-top: 1px solid rgb(80 54 65 / 16%);
}

.poem-editor-section h2 {
    margin: 0 0 0.75rem;
    font-size: 1.18rem;
}

.poem-body-editor {
    min-height: clamp(20rem, 42vh, 26rem);
    resize: vertical;
}

.poem-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.poem-media-slot,
.admin-subform,
.media-detail,
.personal-space-item,
.personal-item-card {
    border: 1px solid rgb(96 38 58 / 18%);
    border-radius: 8px;
    background: rgb(255 255 255 / 16%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%);
}

.poem-media-slot {
    display: grid;
    gap: 0.65rem;
    min-height: 11.5rem;
    padding: 0.9rem;
}

.poem-media-slot h3,
.media-detail h2,
.personal-space-workspace h2,
.personal-space-workspace h3,
.personal-space-workspace h4 {
    margin: 0;
}

.poem-media-slot p {
    margin: 0;
    overflow-wrap: anywhere;
}

.poem-media-slot form {
    margin-top: auto;
}

.youtube-attach-form {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.youtube-attach-form label {
    display: grid;
    gap: 0.4rem;
}

.youtube-attach-form input {
    width: 100%;
    border: 1px solid rgb(120 92 102 / 35%);
    border-radius: 8px;
    background: rgb(255 255 255 / 35%);
    color: inherit;
    padding: 11px 12px;
    font: inherit;
}

.youtube-attach-form small.is-invalid {
    color: #8f2838;
}

.media-library-layout,
.personal-spaces-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.7fr);
    gap: 1rem;
    margin-top: 1rem;
}

.media-library-list,
.personal-readers-list {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.media-asset-card {
    border: 1px solid rgb(96 38 58 / 16%);
    border-radius: 8px;
    background: rgb(255 255 255 / 12%);
}

.media-asset-card.is-selected {
    border-color: rgb(103 48 71 / 65%);
    background: rgb(255 255 255 / 28%);
}

.media-asset-select,
.personal-reader-link {
    display: grid;
    gap: 0.3rem;
    padding: 0.8rem;
    color: inherit;
    text-decoration: none;
}

.media-asset-type,
.personal-item-card > span,
.personal-space-item-type {
    color: #72525e;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.media-asset-select small,
.personal-reader-link small,
.personal-item-card small {
    color: #6b5960;
    overflow-wrap: anywhere;
}

.media-detail {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
}

.media-detail-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.media-detail-list div {
    display: grid;
    gap: 0.15rem;
}

.media-detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.media-add-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.admin-upload-status {
    margin: 0;
    color: #72525e;
    font-size: 0.9rem;
}

.admin-subform {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.media-filter a {
    padding: 0.35rem 0.1rem;
    color: #53233a;
    text-decoration: none;
}

.media-filter a.is-active {
    border-bottom: 2px solid #673047;
    font-weight: 700;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.admin-dashboard-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5.75rem;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid rgb(96 38 58 / 16%);
    border-radius: 8px;
    background: rgb(255 255 255 / 14%);
    color: #3f2733;
    text-decoration: none;
}

.admin-dashboard-link span {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.admin-dashboard-link small {
    color: #6b5960;
    line-height: 1.35;
}

.admin-dashboard-link b {
    flex: 0 0 auto;
    min-width: 2.25rem;
    color: #673047;
    font-size: 1.5rem;
    text-align: right;
}

.admin-deferred-modules {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(80 54 65 / 14%);
}

.admin-deferred-modules h2 {
    margin: 0 0 0.65rem;
    color: #6b5960;
    font-size: 1rem;
    font-weight: 650;
}

.admin-deferred-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-deferred-grid a {
    padding: 0.35rem 0.5rem;
    border: 1px solid rgb(96 38 58 / 14%);
    border-radius: 6px;
    color: #6b5960;
    font-size: 0.84rem;
    text-decoration: none;
}

.personal-spaces-layout {
    grid-template-columns: minmax(13rem, 0.35fr) minmax(0, 1fr);
}

.personal-readers-list {
    padding-right: 1rem;
    border-right: 1px solid rgb(80 54 65 / 16%);
}

.personal-reader-link {
    border: 1px solid transparent;
    border-radius: 8px;
}

.personal-reader-link.is-active {
    border-color: rgb(103 48 71 / 48%);
    background: rgb(255 255 255 / 24%);
}

.personal-space-workspace {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.personal-space-owner {
    display: grid;
    gap: 0.3rem;
}

.personal-space-owner p {
    margin: 0;
}

.personal-space-items-admin {
    display: grid;
    gap: 0.85rem;
}

.personal-admin-tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.personal-admin-tabs a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    color: #53233a;
    border: 1px solid rgb(96 38 58 / 18%);
    border-radius: 6px;
    text-decoration: none;
}

.personal-admin-tabs a.is-active {
    color: #fff;
    background: #673047;
    border-color: #673047;
}

.personal-admin-tabs small {
    min-width: 1.35rem;
    padding: 0.05rem 0.28rem;
    color: inherit;
    background: rgb(255 255 255 / 18%);
    border-radius: 999px;
    font-size: 0.74rem;
    text-align: center;
}

.personal-admin-item-list {
    display: grid;
    gap: 0.7rem;
}

.personal-admin-item-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid rgb(96 38 58 / 18%);
    border-radius: 7px;
    background: rgb(255 255 255 / 11%);
}

.personal-admin-item-summary {
    display: flex;
    gap: 0.7rem;
    min-width: 0;
}

.personal-admin-item-summary > div {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.personal-admin-item-summary p,
.personal-admin-item-summary small {
    margin: 0;
    color: #6b5960;
}

.personal-admin-item-summary p {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.personal-admin-item-summary img {
    width: 4.5rem;
    height: 3.5rem;
    border-radius: 4px;
    object-fit: cover;
}

.personal-admin-item-card details {
    border-top: 1px solid rgb(80 54 65 / 14%);
    padding-top: 0.6rem;
}

.personal-admin-item-card summary {
    width: max-content;
    max-width: 100%;
    cursor: pointer;
    color: #53233a;
}

.personal-admin-item-card details .admin-form {
    margin-top: 0.7rem;
}

.personal-admin-item-actions form {
    margin: 0;
}

.personal-admin-add {
    margin-top: 0.4rem;
}

.personal-item-cards,
.personal-space-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.personal-item-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem;
}

.personal-public-page .content-card {
    max-width: 880px;
}

.personal-space-intro,
.personal-space-item > div {
    white-space: pre-wrap;
    line-height: 1.65;
}

.personal-space-item {
    padding: 1rem;
}

.personal-space-item h2 {
    margin: 0.25rem 0 0.6rem;
    font-size: 1.1rem;
}

.personal-space-media-label {
    margin: 0.8rem 0 0;
    color: #6b5960;
    font-size: 0.9rem;
}

.public-poem-media {
    margin-top: 1.8rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgb(80 54 65 / 16%);
}

.public-poem-media h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.public-poem-media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.media-player-button,
.media-reference {
    min-height: 2.55rem;
    margin: 0;
    padding: 0.55rem 0.75rem;
    color: #53233a;
    background: rgb(255 255 255 / 24%);
    border: 1px solid rgb(96 38 58 / 24%);
    border-radius: 8px;
}

.media-dialog {
    width: min(38rem, calc(100vw - 2rem));
    color: #251f22;
    background: #f6f2f0;
    border: 1px solid rgb(96 38 58 / 28%);
    border-radius: 8px;
    box-shadow: 0 1.5rem 4rem rgb(30 20 25 / 34%);
    padding: 1.25rem;
}

.media-dialog::backdrop {
    background: rgb(42 27 34 / 54%);
}

.media-dialog-close {
    float: right;
}

.media-dialog-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 1rem;
    border: 0;
}

.inline-audio-player {
    width: min(100%, 34rem);
    margin-top: 0.7rem;
    padding: 0.75rem;
    border: 1px solid rgb(96 38 58 / 20%);
    border-radius: 8px;
    background: rgb(255 255 255 / 12%);
}

.inline-audio-player audio {
    display: block;
    width: 100%;
}

.inline-video-player {
    width: min(100%, 42rem);
    margin-top: 0.7rem;
    padding: 0.75rem;
    border: 1px solid rgb(96 38 58 / 20%);
    border-radius: 8px;
    background: rgb(255 255 255 / 12%);
}

.inline-video-player iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Owner-only personal media library. The public panel reuses the same glass material as the scene panels. */
.main-scene[data-scene-key="personal"] .dynamic-content-layer {
    align-items: center;
    justify-items: center;
}

.personal-space-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(72vw, 1080px);
    max-height: min(80dvh, 52rem);
    min-height: min(30rem, 70dvh);
    padding: clamp(1rem, 2.1vw, 1.65rem);
}

.personal-preview-notice {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.7rem;
    color: #53233a;
    background: rgb(255 248 225 / 44%);
    border: 1px solid rgb(128 91 44 / 28%);
    border-radius: 6px;
    font-size: 0.82rem;
}

.personal-space-header {
    display: grid;
    grid-template-columns: 2.55rem minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
    padding-bottom: 1rem;
}

.personal-space-back {
    display: inline-grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    color: var(--color-text);
    background: rgb(255 255 255 / 14%);
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease;
}

.personal-space-back:hover {
    background: rgb(255 255 255 / 25%);
    transform: translateX(-1px);
}

.personal-space-header .panel-kicker {
    margin: 0 0 0.25rem;
}

.personal-space-header h1 {
    margin: 0;
    font-size: clamp(1.65rem, 2.3vw, 2.35rem);
}

.personal-space-intro {
    max-width: 52rem;
    margin: 0.55rem 0 0;
    white-space: pre-wrap;
    line-height: 1.55;
}

.personal-space-scroll {
    min-height: 0;
    padding-right: 0.4rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgb(96 38 58 / 42%) transparent;
    scrollbar-width: thin;
}

.personal-space-scroll::-webkit-scrollbar {
    width: 0.55rem;
}

.personal-space-scroll::-webkit-scrollbar-thumb {
    background: rgb(96 38 58 / 32%);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.personal-category-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding-bottom: 0.2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.personal-category-tab {
    flex: 0 0 auto;
    min-height: 2.35rem;
    padding: 0.48rem 0.75rem;
    color: var(--color-text-soft);
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.personal-category-tab:hover,
.personal-category-tab.is-active {
    color: var(--color-text);
    background: rgb(255 255 255 / 16%);
    border-color: rgb(255 255 255 / 28%);
}

.personal-category-panel {
    min-height: 0;
}

.personal-category-panel[hidden] {
    display: none;
}

.personal-text-grid,
.personal-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.personal-text-tile,
.personal-video-tile,
.personal-media-tile {
    min-width: 0;
    color: var(--color-text);
    background: linear-gradient(135deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 5%));
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
}

.personal-text-tile {
    display: grid;
    gap: 0.45rem;
    min-height: 9.25rem;
    padding: 1rem;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease;
}

.personal-text-tile:hover {
    background: rgb(255 255 255 / 18%);
    transform: translateY(-2px);
}

.personal-text-tile h3,
.personal-media-tile h3,
.personal-video-tile strong {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.3;
}

.personal-text-tile p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-soft);
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.personal-text-tile small,
.personal-media-tile small,
.personal-video-tile small,
.personal-item-meta {
    color: var(--color-text-soft);
    font-size: 0.78rem;
}

.personal-text-detail {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0.4rem 0.35rem 2rem;
}

.personal-text-detail h2 {
    margin: 0.35rem 0 1rem;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.personal-item-meta {
    margin: 0;
}

.personal-text-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.7;
}

.personal-image-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.personal-image-tile {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.35rem;
    color: var(--color-text);
    background: rgb(255 255 255 / 9%);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 7px;
    text-align: left;
}

.personal-image-tile picture,
.personal-image-tile img {
    display: block;
    width: 100%;
}

.personal-image-tile img {
    aspect-ratio: 1 / 0.78;
    border-radius: 4px;
    object-fit: cover;
}

.personal-image-tile span {
    overflow: hidden;
    padding: 0.1rem 0.25rem 0.2rem;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personal-media-list {
    display: grid;
    gap: 0.65rem;
}

.personal-media-tile,
.personal-video-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem;
}

.personal-media-tile > div:first-child,
.personal-video-tile > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.personal-media-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    color: #5e3142;
    background: rgb(255 255 255 / 25%);
    border-radius: 50%;
}

.personal-audio-tile > div:first-child {
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
}

.personal-audio-tile > div:first-child small {
    grid-column: 2;
}

.personal-media-open {
    flex: 0 0 auto;
    min-height: 2.4rem;
    padding: 0.45rem 0.7rem;
    color: #53233a;
    background: rgb(255 255 255 / 24%);
    border: 1px solid rgb(96 38 58 / 24%);
    border-radius: 6px;
}

.personal-audio-player {
    grid-column: 1 / -1;
    width: 100%;
}

.personal-audio-player audio {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
}

.personal-video-tile {
    width: 100%;
    text-align: left;
}

.personal-video-tile > span:last-child {
    flex: 1 1 auto;
}

.personal-media-dialog {
    width: min(72rem, calc(var(--viewport-width, 100vw) - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(var(--viewport-height, 100dvh) - 2rem);
    padding: clamp(0.8rem, 2vw, 1.25rem);
    color: var(--color-text);
    background: linear-gradient(135deg, rgb(247 244 243 / 96%), rgb(230 222 225 / 92%));
    border: 1px solid rgb(255 255 255 / 66%);
    border-radius: 8px;
    box-shadow: 0 1.5rem 4rem rgb(30 20 25 / 44%);
}

.personal-media-dialog::backdrop {
    background: rgb(32 23 28 / 64%);
    backdrop-filter: blur(3px);
}

.personal-media-dialog-header,
.personal-media-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.personal-media-dialog-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.personal-media-dialog-header button,
.personal-media-dialog footer button {
    min-width: 2.6rem;
    min-height: 2.6rem;
    color: #53233a;
    background: rgb(255 255 255 / 48%);
    border: 1px solid rgb(96 38 58 / 22%);
    border-radius: 6px;
}

.personal-media-dialog figure {
    display: grid;
    place-items: center;
    gap: 0.55rem;
    min-height: min(60vh, 42rem);
    margin: 0.7rem 0;
}

.personal-media-dialog picture,
.personal-media-dialog img {
    display: block;
    max-width: 100%;
}

.personal-media-dialog img {
    max-height: min(60vh, 42rem);
    object-fit: contain;
}

.personal-media-dialog figcaption {
    min-height: 1.2em;
    color: #6b5960;
    font-size: 0.85rem;
    text-align: center;
}

.personal-media-dialog footer {
    justify-content: center;
}

.personal-video-player {
    margin-top: 0.8rem;
}

.personal-video-player video,
.personal-video-player iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: #120d10;
}

.personal-video-player a {
    display: inline-block;
    margin-top: 0.65rem;
    color: #53233a;
}

@media (max-width: 44rem) and (orientation: portrait) {
    .personal-space-panel {
        width: calc(var(--viewport-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right) - 1.25rem);
        max-height: calc(var(--viewport-height, 100dvh) - var(--mobile-bottom-ui-height) - env(safe-area-inset-top) - 1.35rem);
        min-height: min(29rem, calc(var(--viewport-height, 100dvh) - var(--mobile-bottom-ui-height) - 1.35rem));
        padding: 0.9rem;
    }

    .personal-space-header {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 0.65rem;
        padding-bottom: 0.75rem;
    }

    .personal-text-grid,
    .personal-video-grid {
        grid-template-columns: 1fr;
    }

    .personal-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .personal-text-tile {
        min-height: 0;
    }

    .personal-media-dialog {
        width: calc(var(--viewport-width, 100vw) - 1rem);
        max-height: calc(var(--viewport-height, 100dvh) - 1rem);
    }

    .personal-media-dialog figure {
        min-height: 0;
    }

    .personal-media-dialog img {
        max-height: calc(var(--viewport-height, 100dvh) - 11rem);
    }
}

@media (max-width: 59rem) and (max-height: 32.5rem) {
    .personal-space-panel {
        width: min(74vw, 62rem);
        max-height: calc(var(--viewport-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);
        min-height: 0;
        padding: 0.75rem 0.9rem;
    }

    .personal-space-header {
        padding-bottom: 0.55rem;
    }

    .personal-space-header h1 {
        font-size: 1.35rem;
    }

    .personal-space-intro {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .personal-category-tabs {
        margin-bottom: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .personal-space-back,
    .personal-category-tab,
    .personal-text-tile {
        transition: none;
    }

    .personal-space-back:hover,
    .personal-text-tile:hover {
        transform: none;
    }
}

.site-block-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.site-block-editor {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgb(96 38 58 / 18%);
    border-radius: 8px;
    background: rgb(255 255 255 / 13%);
}

.site-block-editor:target {
    border-color: rgb(96 38 58 / 52%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%);
}

.site-block-editor .compact-form {
    gap: 0.8rem;
}

.site-block-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem 0.75rem;
}

.site-block-title {
    margin: 0;
    color: #3f2733;
    font-size: 1rem;
    line-height: 1.35;
}

.site-block-title span {
    color: #826b74;
}

.site-block-success {
    margin: 0;
    color: #2f6c53;
    font-size: 0.88rem;
}

.site-block-fields {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.site-block-row {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.site-block-row--meta,
.site-block-row--media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-block-row--accessibility {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.site-block-row--link {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) auto;
    align-items: center;
}

.site-block-fields .site-block-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.site-block-fields .site-block-field--inline {
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
    align-items: center;
}

.site-block-fields .site-block-field--wide {
    grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
}

.site-block-fields .site-block-field--inline small {
    grid-column: 2;
}

.site-block-fields .site-block-field--body textarea {
    min-height: 9rem;
    resize: vertical;
}

.site-block-checkbox {
    display: inline-flex !important;
    align-items: center;
    min-height: 2.75rem;
    margin: 0;
    gap: 0.5rem !important;
    white-space: nowrap;
}

.site-block-checkbox input {
    flex: 0 0 auto;
    width: 1rem !important;
    min-width: 1rem;
    min-height: 1rem !important;
    margin: 0;
    padding: 0 !important;
}

.site-block-actions {
    margin-top: 0.15rem;
}

.site-block-archive-form {
    margin: -3.5rem 0 0 auto;
}

.site-block-archive-form .admin-button {
    min-height: 2.75rem;
}

@media (max-width: 68rem) {
    .site-block-row--link {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-block-row--link .site-block-checkbox {
        grid-column: 1 / -1;
    }

    .site-block-archive-form {
        margin-top: 0;
    }
}

@media (max-width: 44rem), (max-height: 34rem) {
    html.admin-document,
    body.admin-body {
        min-height: 100%;
        height: auto;
    }

    html.admin-document {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.admin-body {
        overflow: visible;
    }

    .admin-shell {
        min-height: 100svh;
        min-height: 100dvh;
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    }

    .admin-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-header {
        align-items: center;
        flex-wrap: wrap;
        min-height: 4.5rem;
        width: 100%;
        margin-bottom: 0.8rem;
        padding: 0.5rem;
        gap: 0.45rem;
        top: max(0.25rem, env(safe-area-inset-top));
    }

    .admin-identity {
        flex: 1 1 auto;
        max-width: calc(100% - 9.5rem);
    }

    .admin-brand {
        font-size: 0.92rem;
    }

    .admin-username {
        font-size: 0.7rem;
    }

    .admin-header-actions {
        flex: 0 0 auto;
        flex-wrap: wrap;
        max-width: 100%;
        gap: 0.25rem;
    }

    .admin-header-action {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.35rem 0.45rem;
        font-size: 0.78rem;
    }

    .admin-form button,
    .admin-button {
        min-height: 44px;
    }

    .admin-main {
        width: 100%;
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
    }

    .admin-card {
        width: 100%;
        padding: var(--admin-mobile-card-padding);
        border-radius: 8px;
    }

    .admin-page-header {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: 0.65rem;
        margin-bottom: 1rem;
    }

    .admin-page-header h1 {
        font-size: var(--admin-mobile-page-title);
    }

    .auth-card > h1 {
        font-size: var(--admin-mobile-page-title);
    }

    .admin-page-header--without-back {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-page-header-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .admin-page-header-actions .admin-button {
        width: 100%;
        text-align: center;
    }

    .admin-card > h2,
    .admin-deferred-modules h2,
    .media-detail h2,
    .personal-space-workspace h2 {
        font-size: var(--admin-mobile-section-title);
    }

    .poem-editor-section h2,
    .poem-editor-column legend,
    .poem-media-slot h3,
    .admin-subform h2 {
        font-size: var(--admin-mobile-group-title);
    }

    .admin-form {
        gap: var(--admin-mobile-form-gap);
    }

    .admin-form label {
        gap: 0.4rem;
    }

    .admin-form input,
    .admin-form select {
        min-height: 44px;
    }

    .poem-edit-form {
        gap: var(--admin-mobile-section-gap);
        padding-bottom: calc(7rem + env(safe-area-inset-bottom));
    }

    .poem-editor-section {
        padding-top: var(--admin-mobile-section-gap);
    }

    .collection-overview,
    .collection-editor-form,
    .poem-editor-grid,
    .media-library-layout,
    .media-add-grid,
    .personal-spaces-layout,
    .personal-item-cards,
    .poem-media-grid {
        grid-template-columns: 1fr;
    }

    .personal-readers-list {
        max-height: 14rem;
        padding-right: 0;
        padding-bottom: 0.75rem;
        overflow: auto;
        border-right: 0;
        border-bottom: 1px solid rgb(80 54 65 / 16%);
    }

    .youtube-attach-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .poem-body-editor {
        min-height: 20rem;
    }

    .site-block-editor {
        padding: 0.9rem;
    }

    .site-block-row--meta,
    .site-block-row--media,
    .site-block-row--accessibility,
    .site-block-row--link {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-block-row--link .site-block-checkbox {
        grid-column: auto;
    }

    .site-block-fields .site-block-field--inline,
    .site-block-fields .site-block-field--wide {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .site-block-fields .site-block-field--inline small {
        grid-column: auto;
    }

    .site-block-checkbox {
        min-height: 2.75rem;
        white-space: normal;
    }

    .site-block-archive-form {
        margin-top: 0;
    }

    .poem-editor-sticky-actions {
        bottom: calc(0.4rem + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        padding: 0.5rem;
    }

    .poem-editor-sticky-actions .admin-button,
    .poem-editor-sticky-actions button {
        width: 100%;
    }

    .poem-editor-sticky-actions .admin-hint {
        grid-column: 1 / -1;
    }

    .media-filter {
        flex-wrap: nowrap;
        gap: 0.7rem;
        margin-right: -0.15rem;
        padding: 0.1rem 0.15rem 0.55rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .media-filter a {
        flex: 0 0 auto;
        min-height: 2.1rem;
        padding: 0.45rem 0.15rem;
    }

    .media-library > .admin-intro {
        margin: 0.4rem 0 0.8rem;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        margin: 1rem 0;
    }

    .admin-dashboard-link {
        min-height: 4.55rem;
        padding: 0.75rem 0.8rem;
    }

    .admin-dashboard-link b {
        font-size: 1.35rem;
    }

    .admin-deferred-modules {
        margin-top: 1.25rem;
    }

    .inline-audio-player,
    .inline-video-player {
        margin-bottom: 5rem;
    }
}

/* Compact account forms share one readable material across public auth flows. */
.user-form-panel,
.login-panel,
.registration-dialog,
.account-page-panel,
.account-compact-card {
    color: var(--form-text);
}

.login-panel h1,
.registration-dialog h2,
.account-page-panel h1,
.account-page-panel h2,
.account-compact-card h1 {
    color: var(--form-text);
    text-shadow: none;
}

.user-form,
.login-form,
.registration-form,
.account-form {
    display: grid;
    gap: var(--form-row-gap);
    color: var(--form-text);
}

.user-field {
    display: grid;
    min-width: 0;
}

.user-form-control {
    width: 100%;
    min-width: 0;
    min-height: var(--form-control-height);
    padding: 0.5rem 0.68rem;
    color: var(--form-text);
    background:
        linear-gradient(180deg, var(--form-control-highlight), transparent 68%),
        var(--form-control-bg);
    border: 1px solid var(--form-control-border);
    border-radius: var(--form-control-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), inset 0 -1px 0 rgb(55 45 44 / 10%);
    font: 400 0.9rem/1.2 var(--font-ui);
    letter-spacing: 0;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.user-form-control::placeholder {
    color: var(--form-placeholder);
    opacity: 1;
}

.user-form-control:focus,
.user-form-control:focus-visible {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 30%), transparent 68%),
        rgb(99 88 86 / 20%);
    border-color: var(--form-focus-ring);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), 0 0 0 0.16rem rgb(78 72 70 / 18%);
    outline: 0;
}

.user-form-control:-webkit-autofill,
.user-form-control:-webkit-autofill:hover,
.user-form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--form-text);
    box-shadow: 0 0 0 1000px rgb(248 245 242 / 94%) inset;
}

.user-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--form-button-height);
    padding: 0.46rem 0.75rem;
    color: var(--form-text);
    background: var(--form-secondary-bg);
    border: 1px solid var(--form-secondary-border);
    border-radius: var(--form-control-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 0.18rem 0.4rem rgb(52 43 42 / 7%);
    cursor: pointer;
    font: 600 var(--form-button-font-size)/1.15 var(--font-ui);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.user-button:hover {
    background: rgb(244 241 237 / 58%);
    border-color: rgb(66 53 51 / 48%);
    transform: translateY(-1px);
}

.user-button:active {
    transform: translateY(0);
}

.user-button:focus-visible,
.user-icon-button:focus-visible {
    outline: 0.16rem solid var(--form-focus-ring);
    outline-offset: 0.14rem;
}

.user-button--primary {
    color: #fffaf7;
    background: #573940;
    border-color: #573940;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 0.28rem 0.58rem rgb(57 41 43 / 18%);
}

.user-button--primary:hover {
    color: #fffaf7;
    background: #67434c;
    border-color: #67434c;
}

.user-button--secondary { color: var(--form-text); }
.user-button--danger { color: #6b343b; background: rgb(255 247 246 / 34%); border-color: rgb(116 55 62 / 38%); }
.user-button--full { width: 100%; }
.user-button--compact { min-height: 2.25rem; padding-inline: 0.58rem; font-size: 0.82rem; }

.user-icon-button {
    display: inline-grid;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0.45rem;
    color: var(--form-text);
    background: rgb(255 255 255 / 21%);
    border: 1px solid rgb(66 52 52 / 30%);
    border-radius: var(--form-control-radius);
    cursor: pointer;
}

.user-icon-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; }
.user-text-link { color: var(--form-text); text-decoration-color: rgb(66 52 52 / 48%); text-underline-offset: 0.16rem; }

.user-checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--form-muted) !important;
    font: 400 0.8rem/1.35 var(--font-ui) !important;
}

.user-checkbox input {
    flex: 0 0 auto;
    width: 1.05rem !important;
    height: 1.05rem !important;
    min-height: 1.05rem !important;
    margin: 0.08rem 0 0 !important;
    accent-color: #573940;
}

.login-panel {
    width: min(100%, 28rem);
    --glass-fill: rgb(255 255 255 / 9%);
    --glass-fill-strong: rgb(255 255 255 / 12%);
}

.login-panel .panel-scroll {
    gap: 0.75rem;
    margin-block-end: 0;
    padding-block-end: 1.45rem;
}
.login-panel h1 { margin-block-end: 0.2rem; font-size: clamp(1.75rem, 3vw, 2.2rem); }
.login-form { gap: var(--form-row-gap); }
.login-secondary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--form-action-gap);
    margin-block-start: 0.25rem;
}
.login-secondary-actions .user-button {
    width: 100%;
    min-height: var(--form-button-height);
    color: var(--form-text);
    font-size: var(--form-button-font-size);
    font-weight: 600;
    text-align: center;
}

.registration-dialog {
    width: min(100%, 38rem);
    max-height: calc(var(--viewport-height, 100dvh) - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: var(--form-panel-padding);
    --glass-fill: rgb(255 255 255 / 11%);
    --glass-fill-strong: rgb(255 255 255 / 14%);
    scrollbar-color: rgb(74 59 59 / 45%) transparent;
}

.registration-dialog .user-icon-button { position: absolute; inset-block-start: 0.72rem; inset-inline-end: 0.72rem; }
.registration-dialog h2 { margin: 0 3rem 0.75rem 0; font: 500 clamp(1.4rem, 2.5vw, 1.8rem)/1.1 var(--font-literary-title); }
.registration-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--form-row-gap); }
.registration-match { min-height: auto; color: var(--form-muted); font-size: 0.78rem; line-height: 1.3; }
.registration-actions { gap: 0.55rem; }
.registration-actions .user-button { width: 100%; }

.account-public-page {
    height: 100dvh;
    min-height: 0;
    padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow: hidden;
}

.account-page-panel {
    display: grid;
    width: min(100%, 70rem);
    height: min(40rem, calc(var(--viewport-height, 100dvh) - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    max-height: none;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.65rem;
    padding: var(--form-panel-padding);
    overflow: hidden;
    border-color: rgb(255 255 255 / 34%);
    box-shadow:
        0 1.3rem 3.6rem rgb(43 38 42 / 9%),
        0 1px 0 rgb(255 255 255 / 28%) inset;
    --glass-fill: rgb(255 255 255 / 8%);
    --glass-fill-strong: rgb(255 255 255 / 11%);
}

.account-page-panel::before {
    background: radial-gradient(ellipse at 12% 0%, rgb(255 255 255 / 12%), transparent 42%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 22%) inset;
    mix-blend-mode: normal;
}

.account-page-panel::after { opacity: 0.62; }

.account-page-header { align-items: center; gap: 0.8rem; margin: 0; }
.account-title-group { min-width: 0; }
.account-page-header h1 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.account-role-chip {
    display: inline-flex;
    margin-block-start: 0.18rem !important;
    color: var(--form-muted) !important;
    font-size: 0.76rem !important;
}
.account-page-back { flex: 0 0 auto; }
.account-flash { margin: 0; color: #315d4a; }
.account-page-panel > .form-error { margin: 0; }

.account-page-scroll {
    display: block;
    min-height: 0;
    padding: 0.1rem 0.3rem calc(0.75rem + env(safe-area-inset-bottom)) 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-color: rgb(74 59 59 / 48%) transparent;
    -webkit-overflow-scrolling: touch;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.4rem);
}

.account-column {
    display: grid;
    align-content: start;
    gap: var(--form-section-gap);
}

.account-section {
    align-content: start;
    gap: var(--form-row-gap);
    padding: 0.2rem 0 0;
    border: 0;
}
.account-column .account-section + .account-section {
    padding-block-start: var(--form-section-gap);
    border-block-start: 1px solid rgb(69 56 54 / 16%);
}
.account-section h2 { color: var(--form-text); font-size: 1.08rem; line-height: 1.2; }
.account-section p { color: var(--form-muted); }
.account-readonly,
.account-hint { color: var(--form-muted); font-size: 0.81rem; line-height: 1.4; }
.account-email-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.42rem 0.55rem; }
.account-email-status { font-size: 0.76rem; }
.account-status-chip {
    width: fit-content;
    padding: 0.2rem 0.44rem;
    background: rgb(116 95 78 / 10%);
    border: 1px solid rgb(105 82 64 / 22%);
    border-radius: 999rem;
    line-height: 1.15;
}
.account-status-chip span { font-size: 0.56rem; }
.account-email-status.is-unverified { color: #714d38; }
.account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--form-row-gap); }
.account-form-grid__full { grid-column: 1 / -1; }
.account-form > .user-button {
    width: auto;
    min-width: 10.5rem;
    justify-self: end;
}
.account-page-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
    margin-top: var(--form-section-gap);
    padding-top: var(--form-row-gap);
    border-top: 1px solid rgb(69 56 54 / 14%);
}
.account-inline-form,
.account-logout-form { display: inline; margin: 0; }

.account-compact-card {
    width: min(100%, 30rem);
    gap: var(--form-section-gap);
    padding: var(--form-panel-padding);
    color: var(--form-text);
    --glass-fill: rgb(255 255 255 / 11%);
    --glass-fill-strong: rgb(255 255 255 / 14%);
}
.account-compact-card h1 { font-size: clamp(1.55rem, 3vw, 2rem) !important; }
.account-compact-card p { color: var(--form-muted); font-size: 0.88rem; line-height: 1.45; }

@media (max-width: 44rem) {
    :root {
        --form-control-height: 2.75rem;
        --form-button-height: 2.75rem;
        --form-row-gap: 0.68rem;
        --form-section-gap: 1rem;
    }

    .login-panel { width: min(92vw, 28rem); }
    .registration-modal { padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)); }
    .registration-dialog { width: 100%; }
    .account-public-page {
        --account-copyright-reserve: 3rem;
        place-items: center;
    }
    .account-page-panel {
        width: 100%;
        height: calc(var(--viewport-height, 100dvh) - var(--account-copyright-reserve) - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    .account-public-page + .site-copyright--fallback {
        inset-block-end: calc(env(safe-area-inset-bottom) + 0.45rem);
    }
    .account-page-scroll { padding-bottom: calc(0.9rem + env(safe-area-inset-bottom)); }
    .account-grid { grid-template-columns: 1fr; gap: var(--form-section-gap); }
    .account-form > .user-button { width: 100%; justify-self: stretch; }
    .account-page-footer { justify-content: stretch; }
    .account-page-back { min-width: 4.7rem; }
}

@media (max-width: 32rem) {
    .registration-fields,
    .account-form-grid { grid-template-columns: 1fr; }
    .account-form-grid__full { grid-column: auto; }
}

@media (max-width: 25rem) {
    .login-secondary-actions { grid-template-columns: 1fr; }
}

@media (max-width: 44rem) and (orientation: landscape) {
    .account-public-page { padding-block: 0.45rem; }
    .account-public-page { --account-copyright-reserve: 2.5rem; }
    .account-page-panel { height: calc(var(--viewport-height, 100dvh) - var(--account-copyright-reserve) - 0.9rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .account-public-page + .site-copyright--fallback {
        inset-inline-start: 50%;
        inset-inline-end: auto;
        inset-block-end: calc(env(safe-area-inset-bottom) + 0.3rem);
        translate: -50% 0;
    }
    .account-page-header h1 { font-size: 1.4rem; }
    .account-page-header .user-button { min-height: 2.25rem; }
    .account-grid { gap: 0.78rem 1rem; }
    .account-section h2 { font-size: 1rem; }
}

@media (min-width: 45rem) and (max-width: 64rem) and (min-height: 48rem) {
    .account-page-panel {
        height: min(43rem, calc(var(--viewport-height, 100dvh) - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    }
}

@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
    .account-public-page {
        --account-copyright-reserve: 2.5rem;
        padding-block: 0.45rem;
    }
    .account-page-panel {
        height: calc(var(--viewport-height, 100dvh) - var(--account-copyright-reserve) - 0.9rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    .account-public-page + .site-copyright--fallback {
        inset-inline-start: 50%;
        inset-inline-end: auto;
        inset-block-end: calc(env(safe-area-inset-bottom) + 0.3rem);
        translate: -50% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-button,
    .user-form-control { transition-duration: 1ms; }
}