:root {
    color-scheme: light;
    --bg-top: #25324b;
    --bg-bottom: #121827;
    --paper-ink: #4a3b30;
    --paper-muted: rgba(74, 59, 48, 0.72);
    --paper-border: rgba(102, 82, 61, 0.16);
    --glow: 0 26px 68px rgba(12, 17, 29, 0.38);
    --paper-shadow: 0 10px 24px rgba(82, 60, 39, 0.12);
    --transition-slow: 560ms cubic-bezier(0.22, 0.68, 0.18, 1.01);
    --transition-fast: 220ms ease;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: "Trebuchet MS", Arial, sans-serif;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 32%),
        linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    color: #fff7eb;
}

button,
input,
textarea,
select {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-shell {
    min-height: 100vh;
    padding: 1rem 0.9rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.topbar {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.topbar__eyebrow,
.history-panel__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 247, 231, 0.74);
}

.topbar__title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw + 0.9rem, 2.2rem);
    line-height: 1.05;
    font-weight: 700;
}

.topbar__status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.topbar__chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 247, 231, 0.12);
    border: 1px solid rgba(255, 247, 231, 0.16);
    color: #fff7eb;
    font-size: 0.86rem;
}

.topbar__chip--ghost {
    background: rgba(16, 24, 39, 0.26);
}

.album-stage {
    position: relative;
    width: min(1320px, 100%);
    margin: 0 auto;
}

.book {
    position: relative;
    width: min(100%, 1180px);
    margin: 0 auto;
}

.book__art {
    width: 100%;
    height: auto;
    filter: drop-shadow(var(--glow));
    user-select: none;
    pointer-events: none;
}

.book__viewport {
    position: absolute;
    inset: 16.5% 15.3% 18.1%;
    perspective: 1800px;
    overflow: hidden;
}

.spread-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.book__shadow {
    position: absolute;
    inset: 6% 8%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    background:
        linear-gradient(90deg, transparent 0%, rgba(48, 32, 21, 0.12) 32%, rgba(48, 32, 21, 0.24) 49.5%, rgba(48, 32, 21, 0.12) 67%, transparent 100%);
    filter: blur(16px);
    z-index: 1;
}

.book__shadow.is-active {
    opacity: 1;
}

.spread-layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform, filter, opacity;
}

.spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.55rem, 1.3vw, 1rem);
    width: 100%;
    height: 100%;
    --page-wash-left: rgba(197, 123, 68, 0.08);
    --page-wash-right: rgba(197, 123, 68, 0.08);
}

.spread__page {
    position: relative;
    min-width: 0;
    height: 100%;
    color: var(--paper-ink);
}

.spread__page > * {
    position: absolute;
    z-index: 2;
}

.spread__page::before {
    content: "";
    position: absolute;
    width: 32%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--page-wash-left);
    top: 8%;
    left: 8%;
    filter: blur(36px);
    z-index: 0;
    pointer-events: none;
}

.spread__page--right::before {
    background: var(--page-wash-right);
    top: auto;
    left: auto;
    right: 8%;
    bottom: 16%;
}

.spread--lucky-luke {
    --page-wash-left: rgba(207, 132, 69, 0.11);
    --page-wash-right: rgba(171, 101, 52, 0.11);
}

.spread--schtroumpfs {
    --page-wash-left: rgba(109, 173, 121, 0.1);
    --page-wash-right: rgba(94, 154, 222, 0.1);
}

.spread--foot-2-rue {
    --page-wash-left: rgba(242, 143, 59, 0.1);
    --page-wash-right: rgba(75, 109, 142, 0.1);
}

.spread--ben-10 {
    --page-wash-left: rgba(99, 168, 50, 0.1);
    --page-wash-right: rgba(72, 126, 48, 0.1);
}

.spread--scooby-doo {
    --page-wash-left: rgba(131, 102, 209, 0.1);
    --page-wash-right: rgba(103, 130, 214, 0.1);
}

.spread--pierrafeu {
    --page-wash-left: rgba(201, 107, 89, 0.1);
    --page-wash-right: rgba(232, 165, 94, 0.1);
}

.page__header {
    top: 5%;
    left: 8%;
    right: 8%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
}

.page__header-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    min-width: 0;
}

.page__pill,
.page__serial,
.page__stamp,
.page__tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.56rem;
    padding: 0.14rem 0.54rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--paper-border);
    box-shadow: 0 8px 18px rgba(80, 58, 30, 0.06);
    font-size: clamp(0.56rem, 0.72vw, 0.72rem);
    line-height: 1.1;
}

.page__pill {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page__serial,
.page__stamp {
    color: var(--paper-muted);
}

.page__copy {
    top: 14%;
    left: 8%;
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.page__copy--tight {
    left: 11%;
    width: 32%;
}

.page__title {
    margin: 0;
    font-size: clamp(0.92rem, 1.4vw, 1.44rem);
    line-height: 1.04;
}

.page__subtitle {
    margin: 0;
    font-size: clamp(0.88rem, 1.12vw, 1.08rem);
    line-height: 1.08;
}

.page__role {
    margin: 0;
    font-size: clamp(0.62rem, 0.8vw, 0.76rem);
    font-weight: 700;
    color: var(--paper-muted);
}

.page__note {
    margin: 0;
    color: rgba(74, 59, 48, 0.82);
    font-size: clamp(0.58rem, 0.78vw, 0.74rem);
    line-height: 1.3;
}

.page__tag-cloud {
    top: 31%;
    left: 8%;
    width: 28%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.page__collage {
    display: contents;
}

.sticker-slot {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.sticker-slot--left {
    top: 22%;
    left: 50%;
    width: 26%;
}

.sticker-slot--right {
    top: 22%;
    right: 13%;
    width: 26%;
}

.page__scene-card,
.page__mini-card,
.page__ticket {
    padding: 0.46rem 0.56rem;
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--paper-border);
    box-shadow: var(--paper-shadow);
    color: rgba(74, 59, 48, 0.86);
}

.page__scene-card {
    left: 8%;
    bottom: 12%;
    width: 27%;
    transform: rotate(-1.3deg);
}

.page__scene-card--right {
    left: 11%;
    width: 28%;
    transform: rotate(1.2deg);
}

.page__card-label {
    display: block;
    margin-bottom: 0.12rem;
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(74, 59, 48, 0.64);
}

.page__scene-card p,
.page__mini-card,
.page__ticket {
    margin: 0;
    font-size: clamp(0.56rem, 0.74vw, 0.72rem);
    line-height: 1.26;
}

.page__mini-card {
    width: 27%;
    min-height: 3.4rem;
    display: flex;
    align-items: center;
}

[data-theme-memory] {
    left: 48%;
    bottom: 11%;
    transform: rotate(1.5deg);
}

[data-character-tagline] {
    left: 11%;
    top: 34%;
    transform: rotate(-1.4deg);
}

.page__mini-card--accent {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        var(--paper-shadow);
}

.page__ticket {
    right: 13%;
    bottom: 12%;
    width: 28%;
    min-height: 3.2rem;
    padding-left: 0.9rem;
    transform: rotate(1deg);
    position: absolute;
}

.page__ticket::before {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: 0.46rem;
    bottom: 0.46rem;
    width: 2px;
    border-radius: 999px;
    background: rgba(74, 59, 48, 0.14);
}

.slot {
    width: 100%;
    display: grid;
    justify-items: center;
    grid-template-rows: auto auto;
    gap: 0.26rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.slot:disabled {
    cursor: progress;
}

.slot--left {
    --slot-tilt: -3deg;
}

.slot--right {
    --slot-tilt: 2.8deg;
}

.slot__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 0.76;
    filter: drop-shadow(0 8px 14px rgba(71, 60, 49, 0.16));
    transform: rotate(var(--slot-tilt, 0deg));
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.slot__visual::before,
.slot__visual::after {
    content: "";
    position: absolute;
    top: -3%;
    width: 20%;
    height: 7%;
    border-radius: 0.28rem;
    background: rgba(255, 250, 237, 0.72);
    border: 1px solid rgba(155, 128, 99, 0.12);
    box-shadow: 0 4px 8px rgba(95, 73, 53, 0.08);
    z-index: 5;
    pointer-events: none;
}

.slot__visual::before {
    left: 12%;
    transform: rotate(-7deg);
}

.slot__visual::after {
    right: 12%;
    transform: rotate(7deg);
}

.slot__surface,
.slot__camera {
    position: absolute;
    user-select: none;
    pointer-events: none;
}

.slot__surface {
    inset: 0;
    z-index: 1;
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(251, 241, 220, 0.98) 0%, rgba(243, 226, 195, 0.98) 100%);
    border: 1px solid rgba(174, 141, 103, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 0 0 2px rgba(255, 248, 235, 0.28);
}

.slot__surface::after {
    content: "";
    position: absolute;
    inset: 6.5%;
    border-radius: 0.82rem;
    border: 1.5px dashed rgba(124, 94, 62, 0.46);
}

.slot__camera {
    width: 20%;
    max-width: none;
    left: 40%;
    top: 40%;
    z-index: 4;
    opacity: 0.42;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.slot__photo-mask {
    position: absolute;
    inset: 9.5% 10.5% 14% 10.5%;
    border-radius: 0.74rem;
    overflow: hidden;
    background: rgba(255, 247, 231, 0.92);
    box-shadow: inset 0 0 0 1px rgba(73, 57, 40, 0.08);
    z-index: 2;
}

.slot__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.slot.has-photo .slot__photo {
    opacity: 1;
}

.slot.has-photo .slot__camera {
    opacity: 0;
    transform: scale(0.9);
}

.slot__busy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 5;
    border-radius: 1rem;
    background: rgba(255, 247, 231, 0.48);
    color: var(--paper-ink);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.slot.is-uploading .slot__busy {
    opacity: 1;
}

.slot__meta {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    width: min(100%, 8rem);
    text-align: center;
}

.slot__name {
    font-size: clamp(0.64rem, 0.84vw, 0.82rem);
    font-weight: 700;
}

.slot__status {
    font-size: clamp(0.5rem, 0.72vw, 0.66rem);
    color: var(--paper-muted);
}

.slot:hover .slot__visual,
.slot:focus-visible .slot__visual {
    transform: translateY(-2px) rotate(var(--slot-tilt, 0deg));
    filter: drop-shadow(0 12px 18px rgba(71, 60, 49, 0.22));
}

.slot:hover .slot__camera,
.slot:focus-visible .slot__camera {
    opacity: 0.58;
    transform: scale(1.02);
}

.slot:hover .slot__photo,
.slot:focus-visible .slot__photo {
    transform: scale(1.02);
}

.slot:focus-visible {
    outline: 2px solid rgba(71, 60, 49, 0.4);
    outline-offset: 0.2rem;
    border-radius: 1rem;
}

.book__footer {
    position: absolute;
    left: 50%;
    bottom: 7.8%;
    transform: translateX(-50%);
    width: min(64%, 29rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: rgba(255, 247, 231, 0.92);
}

.book__progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: clamp(0.72rem, 0.9vw, 0.88rem);
    text-shadow: 0 8px 18px rgba(10, 16, 28, 0.4);
}

.book__dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: rgba(255, 247, 231, 0.82);
}

.book__camera {
    min-height: 2.1rem;
    padding: 0.28rem 0.9rem;
    border: 1px solid rgba(255, 247, 231, 0.24);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.38);
    color: #fff7eb;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.book__camera:hover,
.book__camera:focus-visible {
    background: rgba(255, 247, 231, 0.14);
    transform: translateY(-1px);
}

.nav-button {
    position: absolute;
    bottom: 11.1%;
    z-index: 3;
    width: clamp(2.15rem, 3.6vw, 2.9rem);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0.62;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-button--left {
    left: 9.2%;
}

.nav-button--right {
    right: 9.2%;
}

.nav-button:disabled {
    opacity: 0.25;
    cursor: default;
}

.nav-button:hover:not(:disabled),
.nav-button:focus-visible:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    opacity: 0.9;
}

.nav-button__crop {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 999px;
}

.nav-button__crop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.history-panel {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 1rem;
    border-radius: 1.2rem;
    background: rgba(255, 247, 231, 0.08);
    border: 1px solid rgba(255, 247, 231, 0.12);
    box-shadow: 0 18px 36px rgba(10, 16, 28, 0.12);
}

.history-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.9rem;
}

.history-panel__title {
    margin: 0;
    font-size: 1.12rem;
}

.history-panel__copy {
    margin: 0;
    max-width: 34rem;
    color: rgba(255, 247, 231, 0.78);
    font-size: 0.9rem;
    line-height: 1.45;
}

.history-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.85rem;
}

.history-item {
    padding: 0.65rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 247, 231, 0.12);
    background: rgba(17, 24, 39, 0.28);
    color: #fff7eb;
    text-align: left;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.history-item:hover,
.history-item:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 247, 231, 0.22);
    background: rgba(255, 247, 231, 0.12);
}

.history-item__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 0.86;
    overflow: hidden;
    border-radius: 0.85rem;
    background: rgba(255, 247, 231, 0.14);
    margin-bottom: 0.55rem;
}

.history-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-item__badge {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    min-height: 1.55rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.76);
    font-size: 0.68rem;
    display: inline-flex;
    align-items: center;
}

.history-item__meta {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

.history-item__title {
    font-size: 0.82rem;
    font-weight: 700;
}

.history-item__caption {
    font-size: 0.72rem;
    color: rgba(255, 247, 231, 0.74);
}

.history-empty {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(17, 24, 39, 0.24);
    color: rgba(255, 247, 231, 0.82);
    text-align: center;
}

.toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    background: rgba(255, 247, 231, 0.94);
    color: var(--paper-ink);
    box-shadow: 0 18px 36px rgba(10, 16, 28, 0.24);
}

.turn-next-out {
    animation: turn-next-out var(--transition-slow) forwards;
}

.turn-next-in {
    animation: turn-next-in var(--transition-slow) forwards;
}

.turn-prev-out {
    animation: turn-prev-out var(--transition-slow) forwards;
}

.turn-prev-in {
    animation: turn-prev-in var(--transition-slow) forwards;
}

@keyframes turn-next-out {
    from {
        transform: rotateY(0deg) scale(1);
        filter: brightness(1);
        opacity: 1;
    }

    to {
        transform: rotateY(-88deg) translateX(-1.5%);
        filter: brightness(0.84);
        opacity: 0.88;
    }
}

@keyframes turn-next-in {
    from {
        transform: rotateY(88deg) translateX(1.5%);
        filter: brightness(0.82);
        opacity: 0.88;
    }

    to {
        transform: rotateY(0deg) translateX(0);
        filter: brightness(1);
        opacity: 1;
    }
}

@keyframes turn-prev-out {
    from {
        transform: rotateY(0deg) scale(1);
        filter: brightness(1);
        opacity: 1;
    }

    to {
        transform: rotateY(88deg) translateX(1.5%);
        filter: brightness(0.84);
        opacity: 0.88;
    }
}

@keyframes turn-prev-in {
    from {
        transform: rotateY(-88deg) translateX(-1.5%);
        filter: brightness(0.82);
        opacity: 0.88;
    }

    to {
        transform: rotateY(0deg) translateX(0);
        filter: brightness(1);
        opacity: 1;
    }
}

@media (max-width: 960px) {
    .app-shell {
        padding: 0.9rem 0.6rem 1.25rem;
    }

    .book__viewport {
        inset: 16.2% 15.1% 18%;
    }

    .page__copy {
        width: 38%;
    }

    .page__copy--tight {
        width: 34%;
    }

    .page__tag-cloud {
        width: 30%;
    }

    .sticker-slot--left,
    .sticker-slot--right {
        width: 28%;
    }

    .page__scene-card,
    .page__mini-card,
    .page__ticket {
        width: 29%;
    }

    .book__footer {
        width: min(72%, 29rem);
    }

    .nav-button {
        bottom: 11%;
    }
}

@media (max-width: 720px) {
    .topbar {
        gap: 0.6rem;
    }

    .topbar__status {
        justify-content: flex-start;
    }

    .book__viewport {
        inset: 16.25% 15.2% 18.1%;
    }

    .spread {
        gap: 0.18rem;
    }

    .spread__page::before {
        width: 28%;
        filter: blur(20px);
    }

    .page__header {
        top: 3.5%;
        left: 4%;
        right: 4%;
        gap: 0.18rem;
    }

    .page__header-stack {
        gap: 0.14rem;
    }

    .page__pill,
    .page__serial,
    .page__stamp,
    .page__tag {
        min-height: 1rem;
        padding: 0.06rem 0.26rem;
        font-size: 0.33rem;
        box-shadow: 0 4px 10px rgba(80, 58, 30, 0.04);
    }

    .page__copy {
        top: 12%;
        left: 5%;
        width: 41%;
        gap: 0.08rem;
    }

    .page__copy--tight {
        left: 8%;
        width: 36%;
    }

    .page__title {
        font-size: 0.58rem;
    }

    .page__subtitle {
        font-size: 0.5rem;
    }

    .page__role,
    .page__note,
    .page__scene-card p,
    .page__mini-card,
    .page__ticket {
        font-size: 0.34rem;
        line-height: 1.18;
    }

    .page__card-label {
        margin-bottom: 0.05rem;
        font-size: 0.28rem;
        letter-spacing: 0.08em;
    }

    .page__tag-cloud {
        top: 26%;
        left: 5%;
        width: 30%;
        gap: 0.12rem;
    }

    .sticker-slot--left {
        top: 19%;
        left: 48%;
        width: 30%;
    }

    .sticker-slot--right {
        top: 19%;
        right: 9%;
        width: 30%;
    }

    .page__scene-card,
    .page__mini-card,
    .page__ticket {
        padding: 0.18rem 0.22rem;
        border-radius: 0.38rem;
    }

    .page__scene-card {
        left: 5%;
        bottom: 8%;
        width: 31%;
    }

    .page__scene-card--right {
        left: 8%;
        width: 32%;
    }

    .page__mini-card {
        min-height: 1.8rem;
        width: 30%;
    }

    [data-theme-memory] {
        left: 46%;
        bottom: 9%;
    }

    [data-character-tagline] {
        left: 8%;
        top: 31%;
    }

    .page__ticket {
        right: 9%;
        bottom: 8%;
        width: 31%;
        min-height: 1.7rem;
        padding-left: 0.44rem;
    }

    .page__ticket::before {
        left: 0.2rem;
        top: 0.2rem;
        bottom: 0.2rem;
    }

    .slot {
        gap: 0.1rem;
    }

    .slot__meta {
        width: 100%;
    }

    .slot__name {
        font-size: 0.35rem;
    }

    .slot__status {
        font-size: 0.29rem;
    }

    .slot__busy {
        font-size: 0.34rem;
    }

    .book__footer {
        width: min(82%, 30rem);
        bottom: 6.7%;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }

    .book__progress {
        justify-content: center;
        text-align: center;
        font-size: 0.58rem;
    }

    .book__camera {
        min-height: 1.7rem;
        padding: 0.16rem 0.56rem;
        font-size: 0.56rem;
    }

    .nav-button {
        width: 1.65rem;
        bottom: 10.8%;
    }

    .nav-button--left {
        left: 8.5%;
    }

    .nav-button--right {
        right: 8.5%;
    }

    .history-panel {
        padding: 0.85rem;
    }

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