:root {
    color-scheme: dark;
    --ink: #f0d8c3;
    --muted: #9d7f70;
    --red: #ff3d23;
    --amber: #ffad32;
    --panel: rgba(24, 8, 7, .68);
    --line: rgba(255, 181, 139, .2);
    --mono: 'Space Mono', 'JetBrains Mono', Consolas, monospace;
    --serif: 'Noto Serif SC', 'Songti SC', serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #050202;
}

body {
    color: var(--ink);
    font-family: var(--serif);
    -webkit-font-smoothing: antialiased;
}

button,
a {
    color: inherit;
    font: inherit;
}

button {
    border: 0;
}

.film-archive {
    position: fixed;
    inset: 0;
    min-width: 280px;
    overflow: hidden;
    background: #090303;
    isolation: isolate;
}

#filmCanvas {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: default;
    touch-action: none;
}

.film-archive.is-hovering #filmCanvas {
    cursor: pointer;
}

.film-archive.is-dragging #filmCanvas {
    cursor: grabbing;
}

.scene-grade,
.scene-grain {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}

.scene-grade {
    background:
        linear-gradient(180deg, rgba(43, 3, 2, .36), transparent 26%, transparent 66%, rgba(20, 0, 0, .3)),
        radial-gradient(ellipse at 50% 43%, transparent 26%, rgba(12, 0, 0, .42) 72%, rgba(0, 0, 0, .84) 120%),
        rgba(93, 10, 4, .09);
    mix-blend-mode: multiply;
}

.scene-grain {
    opacity: .23;
    background-image:
        repeating-radial-gradient(circle at 13% 31%, rgba(255, 255, 255, .16) 0 .45px, transparent .6px 3px),
        repeating-linear-gradient(91deg, transparent 0 5px, rgba(255, 255, 255, .018) 5px 6px);
    background-size: 4px 4px, 37px 100%;
    mix-blend-mode: soft-light;
    animation: grainShift .22s steps(2) infinite;
}

@keyframes grainShift {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-1px, 1px); }
    66% { transform: translate(1px, -1px); }
}

.archive-ui {
    opacity: 0;
    transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

body.archive-ready .archive-ui {
    opacity: 1;
}

html.fonts-loading .archive-ui {
    visibility: hidden;
}

.boot-curtain {
    position: absolute;
    z-index: 100;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: clamp(1rem, 3vw, 2.2rem);
    background:
        radial-gradient(circle at 50% 42%, rgba(123, 13, 7, .19), transparent 40%),
        #080303;
    color: #b48b77;
    font: 500 .58rem/1.4 var(--mono);
    letter-spacing: .17em;
    transition: opacity .72s ease, visibility .72s;
}

body.archive-ready .boot-curtain {
    visibility: hidden;
    opacity: 0;
}

.boot-route {
    align-self: flex-start;
    color: #d14d36;
}

.boot-copy {
    display: flex;
    width: min(19rem, 64vw);
    flex-direction: column;
    gap: .55rem;
    align-items: flex-end;
}

.boot-progress {
    display: block;
    width: 100%;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 209, 180, .13);
}

.boot-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: #e55a3c;
    transform: scaleX(.04);
    transform-origin: left center;
    transition: transform .45s ease;
}

.develop-curtain {
    position: absolute;
    z-index: 80;
    inset: 0;
    display: grid;
    visibility: hidden;
    place-items: end center;
    padding-bottom: 2.4rem;
    background: rgba(5, 1, 1, .96);
    color: #c46b58;
    font: 500 .54rem/1 var(--mono);
    letter-spacing: .2em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .72s ease, visibility .72s;
}

.develop-curtain.is-active {
    visibility: visible;
    opacity: 1;
}

.develop-curtain span::after {
    content: '';
    display: inline-block;
    width: .7em;
    animation: developingDots 1.05s steps(4) infinite;
}

@keyframes developingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75%, 100% { content: '...'; }
}

.archive-header {
    position: absolute;
    z-index: 12;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
    pointer-events: none;
}

.archive-meta {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
}

.route-mark,
.roll-meta,
.back-link,
.table-link,
.roll-card,
.roll-index,
.archive-controls,
.frame-status,
.sound-toggle {
    font-family: var(--mono);
    text-transform: uppercase;
}

.route-mark {
    color: #f06043;
    font-size: .55rem;
    letter-spacing: .14em;
}

.roll-meta {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    color: #bb8b77;
    font-size: clamp(.45rem, .75vw, .57rem);
    letter-spacing: .13em;
    line-height: 1.35;
}

#rollSerial {
    color: #e5b8a0;
}

.table-link {
    display: none;
    width: max-content;
    margin-top: .55rem;
    padding: 0;
    background: transparent;
    color: #a97964;
    font-size: .5rem;
    letter-spacing: .14em;
    cursor: pointer;
    pointer-events: auto;
}

.film-archive:not([data-mode="table"]):not([data-mode="loading"]) .table-link {
    display: block;
}

.table-link:hover,
.table-link:focus-visible,
.back-link:hover,
.back-link:focus-visible {
    color: #f3c5a7;
    outline: none;
}

.back-link {
    color: #9b7768;
    font-size: .49rem;
    letter-spacing: .13em;
    text-decoration: none;
    pointer-events: auto;
}

.roll-card {
    position: absolute;
    z-index: 12;
    top: 50%;
    right: clamp(1rem, 5vw, 5rem);
    display: flex;
    width: min(17rem, 29vw);
    min-height: 7rem;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(255, 161, 116, .08);
    background: linear-gradient(90deg, rgba(82, 12, 7, .52), rgba(42, 6, 4, .22));
    color: #d9a28a;
    transform: translateY(-50%) translateX(1rem);
    pointer-events: none;
}

body.archive-ready .roll-card {
    transform: translateY(-50%) translateX(0);
}

.roll-card-index {
    margin-bottom: .58rem;
    color: #bd725a;
    font-size: .48rem;
    letter-spacing: .18em;
}

.roll-card strong {
    font-family: var(--serif);
    font-size: clamp(.9rem, 1.6vw, 1.28rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .08em;
    text-transform: none;
}

.roll-card span:last-child {
    margin-top: .7rem;
    color: #8f6557;
    font-size: .46rem;
    letter-spacing: .15em;
}

.film-archive[data-mode="table"] .roll-card,
.film-archive[data-mode="loading"] .roll-card,
.film-archive[data-mode="developing"] .roll-card {
    visibility: hidden;
    opacity: 0;
}

.roll-index {
    position: absolute;
    z-index: 13;
    bottom: max(3.9rem, calc(env(safe-area-inset-bottom) + 3rem));
    left: 50%;
    display: flex;
    gap: .45rem;
    transform: translateX(-50%);
    transition: opacity .45s ease, visibility .45s, transform .45s ease;
}

.roll-index button {
    display: inline-flex;
    max-width: 13rem;
    align-items: center;
    gap: .48rem;
    padding: .42rem .58rem;
    border: 1px solid rgba(228, 157, 123, .1);
    background: rgba(27, 7, 5, .23);
    color: #947064;
    font-size: .43rem;
    letter-spacing: .08em;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.roll-index button span {
    color: #d2654c;
}

.roll-index button:hover,
.roll-index button:focus-visible {
    border-color: rgba(239, 175, 143, .38);
    background: rgba(86, 16, 10, .32);
    color: #e0ae96;
    outline: none;
}

.film-archive:not([data-mode="table"]) .roll-index {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, .5rem);
    pointer-events: none;
}

.archive-controls {
    position: absolute;
    z-index: 14;
    bottom: max(.85rem, env(safe-area-inset-bottom));
    left: 50%;
    display: flex;
    min-width: min(30rem, 74vw);
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    transform: translateX(-50%);
}

.action-row {
    display: flex;
    gap: .42rem;
    justify-content: center;
}

.archive-action {
    display: none;
    min-width: 5.4rem;
    padding: .47rem .7rem;
    border: 1px solid rgba(240, 173, 139, .3);
    background: rgba(21, 5, 4, .55);
    color: #e5b49b;
    font: 500 .49rem/1 var(--mono);
    letter-spacing: .14em;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.archive-action:hover,
.archive-action:focus-visible,
.archive-action[aria-pressed="true"] {
    border-color: rgba(255, 189, 151, .66);
    background: rgba(122, 29, 18, .38);
    color: #ffd7bd;
    outline: none;
}

.film-archive[data-mode="negative"] .archive-action,
.film-archive[data-mode="developed"] .archive-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.film-archive[data-mode="developed"] .develop-action,
.film-archive.is-empty .archive-action {
    display: none;
}

.interaction-hint {
    margin: 0;
    color: #a87665;
    font-size: clamp(.42rem, .7vw, .52rem);
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
}

.feed-progress {
    display: none;
    width: min(24rem, 52vw);
    height: 1px;
    overflow: hidden;
    background: rgba(235, 165, 132, .1);
}

.film-archive[data-mode="negative"] .feed-progress,
.film-archive[data-mode="developed"] .feed-progress {
    display: block;
}

.feed-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #8b2619, #f58c61);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s linear;
}

.frame-status {
    position: absolute;
    z-index: 13;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: none;
    gap: .75rem;
    align-items: center;
    color: #9d6e5c;
    font-size: .45rem;
    letter-spacing: .14em;
}

.film-archive[data-mode="negative"] .frame-status,
.film-archive[data-mode="developed"] .frame-status {
    display: flex;
}

#resolutionStatus[data-quality="loading"] {
    color: #e88b63;
    animation: qualityPulse .9s ease-in-out infinite;
}

#resolutionStatus[data-quality="full"] {
    color: #d7b986;
}

@keyframes qualityPulse {
    50% { opacity: .35; }
}

.sound-toggle {
    position: absolute;
    z-index: 14;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(2.35rem, calc(env(safe-area-inset-bottom) + 1.8rem));
    padding: .35rem 0;
    background: transparent;
    color: #8e6457;
    font-size: .43rem;
    letter-spacing: .15em;
    cursor: pointer;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
    color: #e7aa8d;
    outline: none;
}

.print-viewer {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: grid;
    visibility: hidden;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease, visibility .5s;
}

.print-viewer.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.print-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 44%, rgba(102, 24, 15, .34), transparent 48%),
        rgba(4, 1, 1, .91);
    cursor: zoom-out;
    backdrop-filter: blur(10px);
}

.printed-frame {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(74vw, 66rem);
    max-height: 78vh;
    margin: 0;
    grid-template-rows: 1rem minmax(0, 1fr) 1rem auto;
    padding: .7rem .85rem .8rem;
    border: 1px solid rgba(219, 160, 127, .22);
    background: #160b08;
    box-shadow: 0 2rem 7rem rgba(0, 0, 0, .7);
    transform: rotate(-.65deg) scale(.94);
    transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

.print-viewer.is-active .printed-frame {
    transform: rotate(-.15deg) scale(1);
}

.printed-perforation {
    background: repeating-linear-gradient(90deg, #160b08 0 1.1rem, #060202 1.1rem 1.58rem, #160b08 1.58rem 2.25rem);
}

.printed-image-shell {
    position: relative;
    display: grid;
    min-height: 0;
    overflow: hidden;
    place-items: center;
    background: #050202;
}

.printed-image-shell img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(78vh - 6rem);
    object-fit: contain;
    opacity: 0;
    transform: scale(1.018);
    transition: opacity .48s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}

.printed-image-shell img.is-ready {
    opacity: 1;
    transform: scale(1);
}

.print-loading {
    position: absolute;
    color: #9d6857;
    font: .46rem/1 var(--mono);
    letter-spacing: .17em;
    transition: opacity .25s ease;
}

.print-loading.is-hidden {
    opacity: 0;
}

.printed-frame figcaption {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .75rem .15rem 0;
    color: #9e7565;
    font: .48rem/1.5 var(--mono);
    letter-spacing: .12em;
}

.printed-frame figcaption strong {
    overflow: hidden;
    color: #d8a58e;
    font-family: var(--serif);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.print-nav,
.print-close,
.print-play {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(225, 160, 128, .22);
    background: rgba(24, 7, 5, .55);
    color: #b98975;
    font: .5rem/1 var(--mono);
    letter-spacing: .14em;
    cursor: pointer;
    backdrop-filter: blur(5px);
}

.print-nav:hover,
.print-nav:focus-visible,
.print-close:hover,
.print-close:focus-visible,
.print-play:hover,
.print-play:focus-visible,
.print-play[aria-pressed="true"] {
    border-color: rgba(255, 191, 158, .58);
    color: #f0bda4;
    outline: none;
}

.print-nav {
    top: 50%;
    display: grid;
    width: 3rem;
    height: 4.6rem;
    place-items: center;
    font-size: .85rem;
    transform: translateY(-50%);
}

.print-prev { left: max(1rem, 4vw); }
.print-next { right: max(1rem, 4vw); }
.print-close { right: max(1rem, 4vw); bottom: 1.15rem; padding: .55rem .7rem; }
.print-play { left: max(1rem, 4vw); bottom: 1.15rem; padding: .55rem .7rem; }

.webgl-fallback {
    position: absolute;
    z-index: 200;
    inset: 0;
    place-content: center;
    padding: 2rem;
    background: #080303;
    color: #d6aa95;
    text-align: center;
}

.webgl-fallback:not([hidden]) {
    display: grid;
}

.webgl-fallback strong {
    font-size: 1rem;
    letter-spacing: .08em;
}

.webgl-fallback p {
    color: #8f6a5b;
    font-size: .7rem;
}

.webgl-fallback a {
    margin-top: 1rem;
    color: #e6a386;
    font-size: .65rem;
}

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

@media (max-width: 820px) {
    .roll-card {
        top: auto;
        right: 1rem;
        bottom: 6.3rem;
        width: min(13rem, 48vw);
        min-height: auto;
        padding: .7rem .8rem;
        transform: none;
    }

    body.archive-ready .roll-card {
        transform: none;
    }

    .roll-card strong {
        font-size: .76rem;
    }

    .roll-index {
        bottom: 4.15rem;
        width: calc(100vw - 1.2rem);
        gap: .25rem;
    }

    .roll-index button {
        min-width: 0;
        flex: 1;
        justify-content: center;
        padding: .42rem .32rem;
        font-size: 0;
    }

    .roll-index button span {
        font-size: .5rem;
    }

    .archive-controls {
        min-width: min(32rem, 94vw);
    }

    .frame-status {
        right: .7rem;
        bottom: 4.25rem;
        flex-direction: column;
        gap: .2rem;
        align-items: flex-end;
    }

    .sound-toggle {
        right: .7rem;
        bottom: 5.95rem;
    }

    .printed-frame {
        width: calc(100vw - 4.6rem);
        max-height: 76vh;
    }

    .print-prev { left: .35rem; }
    .print-next { right: .35rem; }
}

@media (max-width: 560px) {
    .archive-header {
        padding: max(.75rem, env(safe-area-inset-top)) .75rem .75rem;
    }

    .archive-meta {
        gap: .65rem;
    }

    .back-link {
        max-width: 5.5rem;
        text-align: right;
    }

    .roll-meta {
        max-width: 47vw;
    }

    .roll-card {
        right: .65rem;
        bottom: 6.1rem;
        width: min(12rem, 56vw);
    }

    .roll-card-index,
    .roll-card span:last-child {
        font-size: .4rem;
    }

    .archive-action {
        min-width: 4.5rem;
        padding: .44rem .5rem;
        font-size: .43rem;
    }

    .interaction-hint {
        max-width: 88vw;
        line-height: 1.5;
    }

    .frame-status,
    .sound-toggle {
        display: none !important;
    }

    .printed-frame {
        width: calc(100vw - 1rem);
        max-height: 72vh;
        padding: .45rem;
    }

    .printed-frame figcaption {
        grid-template-columns: 1fr auto;
        gap: .45rem;
    }

    .printed-frame figcaption span:first-child {
        display: none;
    }

    .printed-frame figcaption strong {
        text-align: left;
    }

    .print-nav {
        top: auto;
        bottom: 3.65rem;
        width: 2.65rem;
        height: 2.5rem;
        transform: none;
    }

    .print-prev { left: .7rem; }
    .print-next { right: .7rem; }
    .print-close { right: .7rem; bottom: .7rem; }
    .print-play { left: .7rem; bottom: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .scene-grain {
        animation: none;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
.roll-index { max-height: 42vh; overflow-y: auto; }