:root {
    --night: #080a20;
    --night-soft: #171536;
    --paper: #fffaf2;
    --paper-rose: #faedf2;
    --ink: #473445;
    --ink-soft: #715c6c;
    --gold: #b69132;
    --gold-light: #f0d980;
    --lavender: #9f8bcc;
    --rose: #d58ba5;
    --focus: #fff4ad;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background: #211a22;
}

body {
    display: grid;
    place-items: center;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
}

button {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.ecard-player {
    width: 100%;
    height: 100dvh;
    max-width: 34rem;
    position: relative;
    overflow: hidden;
    background: var(--night);
    box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.48);
    isolation: isolate;
}

.sealed-screen,
.delivery-scene,
.card-world {
    position: absolute;
    inset: 0;
}

.sealed-screen {
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #fff8e9;
    background:
        radial-gradient(circle at 50% 28%, rgba(172, 137, 76, 0.28), transparent 23rem),
        radial-gradient(circle at 15% 85%, rgba(159, 139, 204, 0.2), transparent 22rem),
        linear-gradient(155deg, #10112b, #050717 70%);
    text-align: center;
    transition: opacity 500ms ease, visibility 500ms;
}

.sealed-screen.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.sealed-stars,
.delivery-night,
.page-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sealed-stars i,
.delivery-night i,
.page-sky i {
    width: var(--s);
    height: var(--s);
    position: absolute;
    top: var(--y);
    left: var(--x);
    display: block;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 calc(var(--s) * 1.6) rgba(240, 217, 128, 0.72);
    opacity: 0.4;
}

.sealed-envelope {
    width: min(76vw, 18rem);
    aspect-ratio: 1.48;
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: 2.3rem;
    border: 1px solid rgba(240, 217, 128, 0.75);
    border-radius: 0.35rem;
    color: #795c20;
    background: linear-gradient(145deg, #fffef9, #f3e7d8);
    filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.42));
}

.sealed-envelope::before,
.sealed-envelope::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sealed-envelope::before {
    clip-path: polygon(0 0, 50% 58%, 100% 0);
    background: rgba(192, 158, 104, 0.18);
}

.sealed-envelope::after {
    inset: 4%;
    border: 1px solid rgba(182, 145, 50, 0.5);
    border-radius: 0.2rem;
}

.sealed-envelope-name {
    z-index: 2;
    margin-top: 2.9rem;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: clamp(1.8rem, 9vw, 2.9rem);
}

.sealed-wax {
    width: 3rem;
    height: 3rem;
    position: absolute;
    z-index: 3;
    top: 45%;
    left: 50%;
    display: grid;
    place-items: center;
    border-radius: 46% 54% 51% 49%;
    color: #f4cf7a;
    background: #7d2944;
    box-shadow: inset 0 -0.35rem rgba(68, 12, 32, 0.25), 0 0.3rem 0.8rem rgba(72, 25, 40, 0.3);
    transform: translate(-50%, -50%);
}

.sealed-kicker,
.page-eyebrow,
.contribution-chip,
.cover-content > p {
    margin: 0;
    color: var(--gold-light);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.sealed-screen h1 {
    max-width: 12ch;
    margin: 0.8rem 0 1.5rem;
    font-size: clamp(2.5rem, 12vw, 4.5rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.open-card-button {
    min-height: 3.25rem;
    padding: 0.75rem 1.4rem;
    border: 1px solid rgba(240, 217, 128, 0.75);
    border-radius: 999px;
    color: #171126;
    background: linear-gradient(135deg, #fff4bd, #d5a94b);
    cursor: pointer;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 850;
}

.open-card-button:hover {
    filter: brightness(1.08);
}

.sealed-note {
    max-width: 25rem;
    margin: 1rem 0 0;
    color: rgba(255, 248, 233, 0.64);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.72rem;
}

.delivery-scene {
    z-index: 20;
    visibility: hidden;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(circle at 70% 18%, rgba(103, 92, 171, 0.35), transparent 18rem),
        linear-gradient(180deg, #080a20, #14102b 62%, #2b1830);
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease, visibility 380ms;
}

.delivery-scene.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.delivery-scene.is-finished {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.delivery-moon {
    width: 6.5rem;
    height: 6.5rem;
    position: absolute;
    top: 11%;
    right: 10%;
    border-radius: 50%;
    background: #fff4c8;
    box-shadow: 0 0 4rem rgba(255, 236, 175, 0.42);
    opacity: 0.38;
}

.magic-lantern {
    width: 5rem;
    height: 7rem;
    position: absolute;
    z-index: 5;
    top: 23%;
    left: 50%;
    border: 0.48rem solid #98733c;
    border-top-width: 0.85rem;
    border-radius: 0.4rem 0.4rem 1.4rem 1.4rem;
    box-shadow: inset 0 0 2rem #ffd778, 0 0 4rem rgba(255, 211, 103, 0.32);
    transform: translateX(-50%);
}

.magic-lantern::before {
    content: "";
    width: 3rem;
    height: 1.5rem;
    position: absolute;
    top: -2.2rem;
    left: 50%;
    border: 0.28rem solid #98733c;
    border-bottom: 0;
    border-radius: 2rem 2rem 0 0;
    transform: translateX(-50%);
}

.magic-lantern i {
    position: absolute;
    inset: 0.35rem;
    border-radius: 0.2rem 0.2rem 0.8rem 0.8rem;
    background: radial-gradient(circle at 50% 70%, #fff8b7, #dd9845 48%, #3f2630 82%);
}

.magic-lantern b {
    width: 9rem;
    height: 9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 238, 169, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.magic-stream {
    width: 16rem;
    height: 18rem;
    position: absolute;
    z-index: 6;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.magic-stream i {
    --sx: 0rem;
    --sy: 8rem;
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    top: 0;
    left: 50%;
    border-radius: 50%;
    background: #fff1a6;
    box-shadow: 0 0 1rem #f3bf53;
    opacity: 0;
}

.magic-stream i:nth-child(1) { --sx: -5rem; --sy: 7rem; }
.magic-stream i:nth-child(2) { --sx: 4.5rem; --sy: 8rem; }
.magic-stream i:nth-child(3) { --sx: -2.5rem; --sy: 11rem; }
.magic-stream i:nth-child(4) { --sx: 5.5rem; --sy: 12rem; }
.magic-stream i:nth-child(5) { --sx: -6rem; --sy: 13rem; }
.magic-stream i:nth-child(6) { --sx: 1rem; --sy: 14rem; }
.magic-stream i:nth-child(7) { --sx: -1rem; --sy: 9rem; }
.magic-stream i:nth-child(8) { --sx: 6rem; --sy: 10rem; }
.magic-stream i:nth-child(9) { --sx: -4rem; --sy: 15rem; }
.magic-stream i:nth-child(10) { --sx: 3.2rem; --sy: 15.5rem; }

.delivery-envelope {
    --envelope: #7b2944;
    width: min(78vw, 20rem);
    aspect-ratio: 1.48;
    position: absolute;
    z-index: 8;
    top: 50%;
    left: 50%;
    perspective: 65rem;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.delivery-envelope.is-midnight { --envelope: #263449; }
.delivery-envelope.is-sand { --envelope: #b98d64; }

.delivery-envelope-back,
.delivery-envelope-front,
.delivery-envelope-flap,
.delivery-letter {
    position: absolute;
}

.delivery-envelope-back {
    inset: 0;
    border-radius: 0.4rem;
    background: var(--envelope);
    box-shadow: 0 2rem 3.5rem rgba(0, 0, 0, 0.42);
}

.delivery-envelope-front {
    z-index: 4;
    inset: 0;
    clip-path: polygon(0 18%, 50% 66%, 100% 18%, 100% 100%, 0 100%);
    border-radius: 0.4rem;
    background: var(--envelope);
    background: linear-gradient(145deg, color-mix(in srgb, var(--envelope), white 14%), var(--envelope));
}

.delivery-envelope-flap {
    z-index: 5;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 50% 64%);
    background: var(--envelope);
    background: color-mix(in srgb, var(--envelope), white 17%);
    transform-origin: 50% 0;
}

.delivery-seal {
    width: 3rem;
    height: 3rem;
    position: absolute;
    z-index: 7;
    top: 47%;
    left: 50%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #f7d985;
    background: #5b1730;
    transform: translate(-50%, -50%);
}

.delivery-letter {
    z-index: 3;
    inset: 8% 8% 4%;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    color: var(--ink);
    border: 1px solid #d3ad53;
    border-radius: 0.2rem;
    background: linear-gradient(150deg, #fffef9, #f8edf1);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25);
    text-align: center;
}

.delivery-letter span {
    font-size: clamp(1.25rem, 7vw, 2.1rem);
    line-height: 1.05;
}

.delivery-caption {
    position: absolute;
    z-index: 11;
    right: 0;
    bottom: calc(3.8rem + env(safe-area-inset-bottom));
    left: 0;
    margin: 0;
    color: rgba(255, 249, 229, 0.82);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-align: center;
}

.skip-delivery {
    min-height: 2.7rem;
    position: absolute;
    z-index: 12;
    right: 1rem;
    bottom: calc(0.8rem + env(safe-area-inset-bottom));
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: white;
    background: rgba(8, 10, 32, 0.62);
    cursor: pointer;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.72rem;
}

.delivery-scene.is-running .magic-lantern {
    animation: lantern-delivery 3.7s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.delivery-scene.is-running .magic-lantern b {
    animation: lantern-ring 2.4s ease-out both;
}

.delivery-scene.is-running .magic-stream i {
    animation: magic-particle 1.6s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.delivery-scene.is-running .magic-stream i:nth-child(2n) { animation-delay: 120ms; }
.delivery-scene.is-running .magic-stream i:nth-child(3n) { animation-delay: 240ms; }
.delivery-scene.is-running .magic-stream i:nth-child(5n) { animation-delay: 360ms; }

.delivery-scene.is-running .delivery-envelope {
    animation: envelope-form 3.7s cubic-bezier(0.16, 0.78, 0.22, 1) both;
}

.delivery-scene.is-opening .delivery-envelope-flap {
    animation: delivery-flap 850ms cubic-bezier(0.25, 0.7, 0.2, 1) forwards;
}

.delivery-scene.is-opening .delivery-seal {
    animation: delivery-seal-break 450ms ease-in forwards;
}

.delivery-scene.is-opening .delivery-letter {
    animation: delivery-letter-rise 1.45s cubic-bezier(0.16, 0.78, 0.22, 1) 520ms forwards;
}

@keyframes lantern-delivery {
    0% { opacity: 0; transform: translateX(-50%) translateY(2rem) scale(0.65); filter: brightness(0.6); }
    18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    43% { filter: brightness(1.55); transform: translateX(-50%) rotate(-2deg) scale(1.08); }
    58% { opacity: 0.18; transform: translateX(-50%) translateY(1rem) scale(0.55); }
    100% { opacity: 0; transform: translateX(-50%) translateY(1rem) scale(0.5); }
}

@keyframes lantern-ring {
    0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
    48% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

@keyframes magic-particle {
    0%, 14% { opacity: 0; transform: translate(0, 0) scale(0.25); }
    35% { opacity: 1; }
    82% { opacity: 0.9; transform: translate(var(--sx), var(--sy)) scale(1); }
    100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.2); }
}

@keyframes envelope-form {
    0%, 32% { opacity: 0; filter: blur(0.65rem); transform: translate(-50%, -50%) rotate(12deg) scale(0.08); }
    55% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) rotate(-4deg) scale(1.05); }
    68%, 100% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes delivery-flap {
    to { transform: rotateX(178deg); filter: brightness(0.72); }
}

@keyframes delivery-seal-break {
    to { opacity: 0; transform: translate(-50%, -50%) rotate(24deg) scale(1.6); }
}

@keyframes delivery-letter-rise {
    0% { transform: translateY(0) scale(1); }
    62% { transform: translateY(-62%) scale(1.2); }
    100% { opacity: 0; transform: translateY(-75%) scale(3.4); }
}

.card-world {
    z-index: 10;
    visibility: hidden;
    background: var(--night);
    opacity: 0;
    transition: opacity 600ms ease, visibility 600ms;
}

.card-world.is-visible {
    visibility: visible;
    opacity: 1;
}

.page-stack,
.card-page {
    position: absolute;
    inset: 0;
}

.page-stack {
    perspective: 90rem;
}

.card-page {
    display: none;
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 5%, rgba(255, 255, 255, 0.95), transparent 42%),
        radial-gradient(circle at 94% 12%, rgba(213, 139, 165, 0.2), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(159, 139, 204, 0.2), transparent 32%),
        linear-gradient(155deg, #fffdf8, #f9edf2);
    backface-visibility: hidden;
}

.card-page.is-active {
    display: block;
}

.card-world.background-ivory .card-page{background-color:#fff7e8}.card-world.background-rose .card-page{background-color:#f2d9dd}.card-world.background-midnight .card-page{background-color:#172039;color:#fff}.card-world.background-sage .card-page{background-color:#dce5d7}.card-world.background-sky .card-page{background-color:#dceaf0}.card-world.border-none .gold-frame{display:none}.card-world.border-paper .gold-frame{border-color:rgba(80,66,52,.28);box-shadow:inset 0 0 1.2rem rgba(80,66,52,.1)}.card-world.turn-folio .page-turn-copy{transform-origin:left center}.card-world.turn-soft .page-turn-copy{animation-duration:900ms;filter:blur(.2px)}

.card-page.is-active .page-sky i {
    animation: star-arrival 620ms ease-out var(--d) both;
}

.page-sky i {
    background: #c39a38;
    box-shadow: 0 0 calc(var(--s) * 1.5) rgba(182, 145, 50, 0.58);
    opacity: 0.24;
}

@keyframes star-arrival {
    from { opacity: 0; transform: scale(0.2) rotate(-45deg); }
    to { opacity: 0.34; transform: scale(1) rotate(0); }
}

.gold-frame {
    position: absolute;
    z-index: 2;
    inset: 3.3%;
    border: 1px solid rgba(182, 145, 50, 0.75);
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 0.35rem rgba(255, 255, 255, 0.42), inset 0 0 0 0.42rem rgba(182, 145, 50, 0.28);
    pointer-events: none;
}

.corner-sprig {
    position: absolute;
    z-index: 3;
    color: var(--gold);
    font-size: clamp(4rem, 18vw, 7rem);
    opacity: 0.55;
}

.corner-sprig-left {
    top: 2%;
    left: 3%;
    transform: rotate(-35deg);
}

.corner-sprig-right {
    right: 3%;
    bottom: 4%;
    transform: rotate(145deg);
}

.cover-content,
.page-content {
    min-height: 100%;
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 9% 6rem;
    text-align: center;
}

.card-page.is-active .cover-content > *,
.card-page.is-active .page-content > * {
    animation: content-rise 520ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.card-page.is-active .cover-content > *:nth-child(2),
.card-page.is-active .page-content > *:nth-child(2) { animation-delay: 70ms; }
.card-page.is-active .cover-content > *:nth-child(3),
.card-page.is-active .page-content > *:nth-child(3) { animation-delay: 140ms; }
.card-page.is-active .cover-content > *:nth-child(4),
.card-page.is-active .page-content > *:nth-child(4) { animation-delay: 210ms; }
.card-page.is-active .cover-content > *:nth-child(5),
.card-page.is-active .page-content > *:nth-child(5) { animation-delay: 280ms; }

@keyframes content-rise {
    from { opacity: 0; transform: translateY(0.9rem); }
    to { opacity: 1; transform: translateY(0); }
}

.cover-star,
.finale-star {
    color: var(--gold);
    font-size: 5rem;
    line-height: 1;
    text-shadow: 0 0 1.6rem rgba(182, 145, 50, 0.35);
}

.cover-content h2,
.page-content h2 {
    max-width: 11ch;
    margin: 0.55rem 0 0;
    font-size: clamp(3.2rem, 15vw, 5.5rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.9;
}

.gold-rule {
    width: min(80%, 18rem);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.5rem 0;
    color: var(--gold);
}

.gold-rule i {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.cover-content blockquote {
    max-width: 22ch;
    margin: 0;
    color: var(--ink-soft);
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: clamp(1.6rem, 7vw, 2.45rem);
    line-height: 1.1;
}

.cover-content small {
    max-width: 30ch;
    margin-top: 1.2rem;
    color: var(--ink-soft);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.72rem;
}

.orbit-mark {
    width: 8.5rem;
    height: 8.5rem;
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: 2rem;
    color: var(--gold);
    font-size: 3.6rem;
}

.orbit-mark::before,
.orbit-mark i {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(182, 145, 50, 0.5);
    border-radius: 50%;
    transform: rotate(32deg) scaleY(0.42);
}

.orbit-mark i {
    transform: rotate(-32deg) scaleY(0.42);
}

.page-eyebrow,
.contribution-chip {
    color: #876a2c;
}

.quote-content blockquote {
    max-width: 23ch;
    margin: 1.25rem 0 0;
    font-size: clamp(1.65rem, 7vw, 2.7rem);
    font-weight: 600;
    line-height: 1.28;
}

.quote-page-image {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    object-fit: contain;
    background: #080808;
}

.quote-page-image[hidden] { display: none; }
.quote-content[hidden] { display: none !important; }
.page-quote.has-quote-image .page-sky,
.page-quote.has-quote-image .gold-frame { display: none; }

.quote-audio-button {
    width: 2.65rem;
    height: 2.65rem;
    position: absolute;
    right: 1rem;
    bottom: 5.2rem;
    z-index: 8;
    display: grid;
    place-items: center;
    padding: 0 0 0 0.12rem;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    color: #fff;
    background: rgba(12,12,12,.68);
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.25);
    backdrop-filter: blur(.35rem);
    cursor: pointer;
}

.quote-audio-button[hidden] { display: none; }
.quote-audio-button.is-playing { padding-left: 0; }

.script-line,
.finale-script {
    margin: 1.5rem 0 0;
    color: #8b6927;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: clamp(1.5rem, 7vw, 2.2rem);
}

.contribution-chip {
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(182, 145, 50, 0.6);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}

.memory-photo {
    width: min(72%, 17rem);
    margin: 1.2rem 0 0;
    padding: 0.65rem 0.65rem 2.2rem;
    background: #fffdf8;
    box-shadow: 0 1.3rem 2.5rem rgba(92, 61, 78, 0.24);
    transform: rotate(-2.5deg);
}

.memory-art {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #a9d1de 0 56%, #95a976 56% 100%);
}

.memory-art::before,
.memory-art::after,
.memory-art i {
    content: "";
    position: absolute;
    bottom: -12%;
    border-radius: 48% 48% 0 0;
    background: #53694a;
}

.memory-art::before { width: 70%; height: 47%; left: -20%; transform: rotate(18deg); }
.memory-art::after { width: 80%; height: 52%; right: -24%; transform: rotate(-12deg); }
.memory-art i { width: 30%; height: 38%; left: 35%; bottom: -5%; background: #6f7e55; }

.memory-sun {
    width: 3.4rem;
    height: 3.4rem;
    position: absolute;
    top: 13%;
    right: 14%;
    border-radius: 50%;
    background: #ffe18a;
    box-shadow: 0 0 2rem rgba(255, 225, 138, 0.75);
}

.memory-photo figcaption {
    margin-top: 0.7rem;
    color: #846927;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 1.1rem;
}

.message-content h2,
.video-content h2,
.voice-content h2 {
    max-width: 17ch;
    margin-top: 1.2rem;
    font-size: clamp(1.7rem, 7vw, 2.7rem);
    line-height: 1.05;
}

.message-content > p:not(.contribution-chip),
.media-note,
.finale-content > p:not(.page-eyebrow) {
    max-width: 33ch;
    margin: 0.8rem 0 0;
    color: var(--ink-soft);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(0.82rem, 3.4vw, 1rem);
    line-height: 1.55;
}

.designed-photo-grid {
    width: min(78%, 19rem);
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

.designed-photo {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 0.42rem solid #fffdf8;
    background: #e8ddcf;
    box-shadow: 0 0.9rem 1.7rem rgba(92, 61, 78, 0.22);
}

.designed-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.designed-photo-one { aspect-ratio: 4 / 3; transform: rotate(-1.6deg); }
.designed-photo-two,
.designed-photo-three { display: none; }

.designed-quote {
    display: none;
    max-width: 21ch;
    margin: 1rem 0 0;
    color: #715526;
    font: 600 clamp(1.35rem, 6vw, 2.2rem)/1.18 Georgia, serif;
}

.page-message.layout-photo-collage .message-content {
    justify-content: flex-start;
    padding-top: 4.6rem;
}

.page-message.layout-photo-collage .designed-photo-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 0.72fr;
    width: min(82%, 21rem);
    height: min(48vh, 23rem);
}

.page-message.layout-photo-collage .designed-photo {
    aspect-ratio: auto;
    display: block;
    transform: none;
}

.page-message.layout-photo-collage .designed-photo-one { grid-column: 1 / -1; }
.page-message.layout-photo-collage .message-content h2 { margin-top: 0.85rem; font-size: clamp(1.45rem, 6vw, 2.25rem); }
.page-message.layout-photo-collage .message-content > p:not(.contribution-chip) { display: none; }

.page-message.layout-personal-letter .designed-photo-grid,
.page-message.layout-personal-letter .designed-quote { display: none; }

.page-message.layout-personal-letter .message-content {
    align-items: flex-start;
    padding-inline: 14%;
    text-align: left;
}

.page-message.layout-personal-letter .contribution-chip { align-self: center; }
.page-message.layout-personal-letter .message-content h2 {
    max-width: 12ch;
    margin-top: 2rem;
    color: #6f273a;
    font: 500 clamp(2.5rem, 12vw, 4.5rem)/0.95 Georgia, serif;
}

.page-message.layout-personal-letter .message-content > p:not(.contribution-chip) {
    max-width: 34ch;
    margin-top: 1.4rem;
    color: #534851;
    font-family: Georgia, serif;
    font-size: clamp(1rem, 4vw, 1.25rem);
    line-height: 1.7;
}

.contribution-content { gap: 1rem; overflow-y: auto; }
.contribution-content h2 { max-width: 16ch; font-size: clamp(1.8rem, 8vw, 3.3rem); }
.contribution-content .contribution-message { max-width: 34ch; margin: 0; white-space: pre-line; line-height: 1.6; overflow-wrap: anywhere; }
.contribution-content .contribution-media { display: block; max-width: 100%; max-height: 42%; object-fit: contain; border-radius: 0.8rem; }
.contribution-content audio.contribution-media { width: 100%; }

.page-message.layout-quote-photo .designed-photo-grid {
    width: min(55%, 14rem);
}

.page-message.layout-quote-photo .designed-photo-one {
    aspect-ratio: 1;
    border-radius: 50%;
    transform: none;
}

.page-message.layout-quote-photo .designed-quote { display: block; }
.page-message.layout-quote-photo .message-content h2,
.page-message.layout-quote-photo .message-content > p:not(.contribution-chip) { display: none; }

.reaction-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1rem;
}

.reaction-row span {
    padding: 0.25rem 0.55rem;
    border: 1px solid rgba(71, 52, 69, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.72rem;
}

.video-placeholder {
    width: min(60%, 14rem);
    aspect-ratio: 9 / 14;
    position: relative;
    overflow: hidden;
    margin-top: 1.2rem;
    border: 1px solid rgba(182, 145, 50, 0.5);
    border-radius: 1rem;
    background: linear-gradient(160deg, #30264b, #7e5370);
    box-shadow: 0 1.3rem 2.5rem rgba(60, 39, 58, 0.28);
}

.video-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 22%, rgba(240, 217, 128, 0.35), transparent 34%);
}

.video-person {
    width: 55%;
    height: 64%;
    position: absolute;
    bottom: 0;
    left: 50%;
    border-radius: 50% 50% 8% 8%;
    background: #bc897e;
    transform: translateX(-50%);
}

.video-person i {
    width: 56%;
    aspect-ratio: 1;
    position: absolute;
    top: -23%;
    left: 22%;
    border-radius: 50%;
    background: #d7a091;
}

.video-person b {
    width: 68%;
    height: 28%;
    position: absolute;
    top: -30%;
    left: 16%;
    border-radius: 50% 50% 25% 25%;
    background: #38282f;
}

.video-placeholder button {
    width: 4rem;
    height: 4rem;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #6b4d1b;
    background: rgba(255, 248, 219, 0.92);
    box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.32);
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.video-placeholder button span {
    margin-left: 0.2rem;
}

.video-placeholder p {
    position: absolute;
    right: 0;
    bottom: 1rem;
    left: 0;
    margin: 0;
    color: white;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.65rem;
    text-align: center;
}

.video-placeholder.is-playing .video-person {
    animation: video-wave 850ms ease-in-out 3 alternate;
}

.video-placeholder.is-playing button {
    opacity: 0.35;
}

@keyframes video-wave {
    to { transform: translateX(-50%) rotate(2deg) translateY(-0.3rem); }
}

.voice-orbit {
    width: 8rem;
    height: 8rem;
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(182, 145, 50, 0.42);
    border-radius: 50%;
    color: var(--gold);
    font-size: 4.5rem;
    box-shadow: 0 0 2.5rem rgba(182, 145, 50, 0.16);
}

.voice-note {
    width: min(92%, 23rem);
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0.85rem;
    border: 1px solid rgba(182, 145, 50, 0.48);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.62);
}

.voice-note button {
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    color: white;
    background: linear-gradient(145deg, #e0bd61, #8f681c);
    cursor: pointer;
}

.voice-wave {
    height: 2.4rem;
    display: flex;
    align-items: center;
    gap: 0.12rem;
}

.voice-wave i {
    width: 2px;
    height: var(--h);
    flex: 1;
    border-radius: 999px;
    background: #d9c391;
}

.voice-note.is-speaking .voice-wave i {
    animation: voice-pulse 500ms ease-in-out alternate infinite;
}

.voice-note.is-speaking .voice-wave i:nth-child(2n) { animation-delay: 100ms; }
.voice-note.is-speaking .voice-wave i:nth-child(3n) { animation-delay: 180ms; }

@keyframes voice-pulse {
    to { height: 95%; background: var(--gold); }
}

.voice-note time {
    color: var(--ink-soft);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.68rem;
}

.finale-content h2 {
    max-width: 10ch;
}

.confetti-field {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.confetti-field i {
    width: 0.55rem;
    height: 1rem;
    position: absolute;
    top: -8%;
    left: var(--cx);
    display: block;
    background: linear-gradient(140deg, #f6d979, #c29027);
    opacity: 0;
}

.confetti-field i:nth-child(3n) { background: linear-gradient(140deg, #eda8bd, #b45f84); }
.confetti-field i:nth-child(4n) { background: linear-gradient(140deg, #c7b7eb, #8066b8); }

.page-finale.is-active .confetti-field i {
    animation: confetti-fall 3.4s cubic-bezier(0.2, 0.6, 0.3, 1) var(--cd) both;
}

@keyframes confetti-fall {
    0% { opacity: 0; transform: translateY(0) rotate(0); }
    10% { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(110vh) rotate(var(--cr)); }
}

.card-topbar,
.card-navigation {
    position: absolute;
    z-index: 30;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.card-topbar {
    top: 0;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: calc(0.65rem + env(safe-area-inset-top)) 0.65rem 0.65rem;
}

.card-topbar button,
.card-navigation button {
    min-height: 2.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(83, 65, 50, 0.32);
    border-radius: 999px;
    color: #322a2d;
    background: rgba(255, 250, 238, 0.9);
    box-shadow: 0 0.3rem 1rem rgba(48, 29, 41, 0.12);
    cursor: pointer;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 750;
}

.card-navigation {
    bottom: 0;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.7rem calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(32, 22, 30, 0.48));
}

.card-navigation button {
    min-width: 5.3rem;
}

.page-dots {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

.page-dots button {
    width: 0.55rem;
    min-width: 0;
    height: 0.55rem;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(255, 250, 238, 0.85);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.page-dots button.is-active {
    background: #fff8e5;
    transform: scale(1.3);
}

.player-status {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.page-turn-copy {
    position: absolute;
    z-index: 25;
    inset: 0;
    display: block;
    overflow: hidden;
    transform-origin: left center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    box-shadow: 0 0 2.5rem rgba(61, 38, 48, 0.34);
    will-change: transform, opacity, filter;
    pointer-events: none;
}

.page-turn-copy::after {
    content: "";
    width: 32%;
    position: absolute;
    z-index: 50;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(70, 45, 55, 0), rgba(70, 45, 55, 0.32) 72%, rgba(255, 255, 255, 0.42));
    transform: translateZ(0.1rem);
    pointer-events: none;
}

.page-turn-copy.is-back::after {
    right: auto;
    left: 0;
    background: linear-gradient(270deg, rgba(70, 45, 55, 0), rgba(70, 45, 55, 0.28) 72%, rgba(255, 255, 255, 0.38));
}

.page-turn-copy .card-page {
    display: block;
}

.page-turn-copy.is-forward {
    animation: page-turn-forward 650ms cubic-bezier(0.3, 0.06, 0.24, 1) forwards;
}

.page-turn-copy.is-back {
    transform-origin: right center;
    animation: page-turn-back 620ms cubic-bezier(0.3, 0.06, 0.24, 1) forwards;
}

@keyframes page-turn-forward {
    0% { opacity: 1; transform: rotateY(0) skewY(0); filter: brightness(1); }
    38% { opacity: 1; transform: rotateY(-38deg) skewY(-1.2deg) translateZ(0.7rem); filter: brightness(0.94); }
    72% { opacity: 1; transform: rotateY(-91deg) skewY(-2.2deg) translateZ(1.5rem) scaleX(0.98); filter: brightness(0.82); }
    100% { opacity: 0; transform: rotateY(-116deg) skewY(-1deg) translateZ(1.9rem) scale(0.97); filter: brightness(0.76); }
}

@keyframes page-turn-back {
    0% { opacity: 0; transform: rotateY(116deg) skewY(1deg) translateZ(1.9rem) scale(0.97); filter: brightness(0.76); }
    30% { opacity: 1; transform: rotateY(89deg) skewY(2deg) translateZ(1.5rem) scaleX(0.98); filter: brightness(0.84); }
    66% { opacity: 1; transform: rotateY(34deg) skewY(1deg) translateZ(0.6rem); filter: brightness(0.95); }
    100% { opacity: 1; transform: rotateY(0) skewY(0); filter: brightness(1); }
}

.ecard-player.is-edge {
    animation: edge-nudge 240ms ease;
}

@keyframes edge-nudge {
    35% { transform: translateX(-0.35rem); }
    70% { transform: translateX(0.25rem); }
}

@media (min-width: 35rem) {
    .ecard-player {
        height: min(100dvh, 58rem);
        border-radius: 1rem;
    }
}

/* One continuous envelope and one continuous cover image. */
.journey-object {
    --journey-envelope: #263449;
    width: min(82%, 27.9rem);
    aspect-ratio: 1.48;
    position: absolute;
    z-index: 42;
    top: 34%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

.journey-object.is-claret { --journey-envelope: #7b2944; }
.journey-object.is-sand { --journey-envelope: #b58a62; }
.journey-object.is-pearl { --journey-envelope: #e5dccb; }
.journey-object.is-sage { --journey-envelope: #748675; }
.journey-object.is-charcoal { --journey-envelope: #292b31; }
.journey-object.is-rose { --journey-envelope: #bd7883; }

.journey-envelope-back,
.journey-envelope-front,
.journey-envelope-flap,
.journey-card {
    position: absolute;
    border-radius: 0.42rem;
}

.journey-envelope-back {
    z-index: 4;
    inset: 0;
    background: color-mix(in srgb, var(--journey-envelope), black 7%);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.46);
}

.journey-card {
    width: 74%;
    height: 84%;
    z-index: 3;
    top: 50%;
    left: 50%;
    overflow: hidden;
    background: #080a20;
    opacity: 1;
    transform: translate(-50%, -50%);
    transform-origin: 50% 58%;
}

.journey-card > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.journey-envelope-front {
    z-index: 4;
    inset: 0;
    clip-path: polygon(0 18%, 50% 67%, 100% 18%, 100% 100%, 0 100%);
    background: linear-gradient(145deg, color-mix(in srgb, var(--journey-envelope), white 14%), var(--journey-envelope));
}

.journey-envelope-flap {
    z-index: 5;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 50% 65%);
    background: color-mix(in srgb, var(--journey-envelope), white 17%);
    backface-visibility: hidden;
    transform-origin: 50% 0;
}

.journey-name {
    position: absolute;
    z-index: 6;
    right: 12%;
    bottom: 13%;
    left: 12%;
    color: #f8dea0;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: clamp(1.5rem, 7vw, 2.5rem);
    line-height: 1;
    text-align: center;
    text-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.36);
}

.journey-wax {
    width: 3.1rem;
    height: 3.1rem;
    position: absolute;
    z-index: 7;
    top: 48%;
    left: 50%;
    display: grid;
    place-items: center;
    border-radius: 48% 52% 45% 55%;
    color: #ffe39a;
    background: #742441;
    box-shadow: inset 0 -0.35rem rgba(50, 8, 22, 0.28), 0 0.35rem 0.9rem rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
}

.sealed-screen {
    padding-top: min(46vh, 25rem);
}

.delivery-scene.has-film .delivery-film {
    filter: brightness(0.82) saturate(1.2);
    transform: scale(1.04);
}

.delivery-scene.has-film.is-fal-film .delivery-film {
    filter: none;
    transform: scale(1);
}

.journey-object.is-delivering {
    animation: one-envelope-delivery 5s cubic-bezier(0.28, 0.05, 0.2, 1) both;
}

.journey-object[data-delivery-template="airmail-drop"].is-delivering {
    animation: airmail-envelope-sync 5.15s linear both;
}

.journey-object[data-delivery-template="balloon-rise"].is-delivering {
    animation: balloon-envelope-sync 5.15s linear both;
}

.journey-object[data-delivery-template="magic-lantern"].is-delivering {
    animation: lantern-envelope-sync 5.15s linear both;
}

.journey-object[data-delivery-template="vintage-train"].is-delivering {
    animation: train-envelope-sync 5.15s linear both;
}

.journey-object[data-delivery-template="fal-gift-box"].is-delivering {
    animation: fal-gift-box-envelope-sync 5.17s linear both;
}

.journey-object[data-delivery-template="fal-balloon-lift"].is-delivering {
    animation: fal-balloon-envelope-sync 5.17s linear both;
}

.journey-object[data-delivery-template="fal-candle-glow"].is-delivering {
    animation: fal-candle-envelope-sync 5.17s linear both;
}

.journey-object[data-delivery-template="fal-flower-bloom"].is-delivering {
    animation: fal-flower-envelope-sync 5.17s linear both;
}

.journey-object[data-delivery-template="fal-stork-delivery"].is-delivering {
    animation: fal-stork-envelope-sync 5.17s linear both;
}

.journey-object.is-opening {
    top: 50%;
    left: 50%;
}

.journey-object.is-opening .journey-envelope-back {
    animation: one-envelope-back 3.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.journey-object.is-opening .journey-envelope-front {
    animation: one-envelope-vanish 3.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.journey-object.is-opening .journey-envelope-flap {
    animation: one-envelope-flap 3.2s cubic-bezier(0.3, 0.04, 0.2, 1) both;
}

.journey-object.is-opening .journey-wax {
    animation: one-envelope-wax 3.2s ease both;
}

.journey-object.is-opening .journey-name {
    animation: one-envelope-name 3.2s ease both;
}

.journey-object.is-opening .journey-card {
    animation: one-card-expand 3.2s cubic-bezier(0.16, 0.76, 0.18, 1) both;
}

.journey-object.is-complete {
    visibility: hidden;
}

.journey-card.is-cover-art {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: 0;
    opacity: 1;
    transform: none;
}

@keyframes one-envelope-delivery {
    0% { top: 34%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
    20% { top: 40%; left: 23%; transform: translate(-50%, -50%) rotate(-9deg) scale(0.58); }
    48% { top: 27%; left: 76%; transform: translate(-50%, -50%) rotate(7deg) scale(0.66); }
    72% { top: 43%; left: 36%; transform: translate(-50%, -50%) rotate(-4deg) scale(0.82); }
    100% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes airmail-envelope-sync {
    0% {
        top: 30%;
        left: 62%;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(4deg) scale(0.035);
    }
    8% {
        top: 31%;
        left: 61%;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(8deg) scale(0.04);
    }
    13% {
        top: 36%;
        left: 59%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(12deg) scale(0.085);
    }
    23% {
        top: 45%;
        left: 55%;
        transform: translate(-50%, -50%) rotate(18deg) scale(0.15);
    }
    36% {
        top: 57%;
        left: 44%;
        transform: translate(-50%, -50%) rotate(-13deg) scale(0.25);
    }
    49% {
        top: 45%;
        left: 63%;
        transform: translate(-50%, -50%) rotate(12deg) scale(0.36);
    }
    62% {
        top: 57%;
        left: 38%;
        transform: translate(-50%, -50%) rotate(-9deg) scale(0.5);
    }
    75% {
        top: 47%;
        left: 55%;
        transform: translate(-50%, -50%) rotate(6deg) scale(0.7);
    }
    88% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-2deg) scale(1.02);
    }
    96% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0) scale(1.35);
    }
    100% {
        top: 50%;
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0) scale(1);
    }
}

@keyframes balloon-envelope-sync {
    0%, 22% {
        top: 45%;
        left: 30%;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-5deg) scale(0.035);
    }
    29% {
        top: 46%;
        left: 31%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-5deg) scale(0.06);
    }
    41% {
        top: 55%;
        left: 38%;
        transform: translate(-50%, -50%) rotate(8deg) scale(0.16);
    }
    55% {
        top: 63%;
        left: 61%;
        transform: translate(-50%, -50%) rotate(14deg) scale(0.3);
    }
    70% {
        top: 49%;
        left: 63%;
        transform: translate(-50%, -50%) rotate(-7deg) scale(0.47);
    }
    84% {
        top: 56%;
        left: 42%;
        transform: translate(-50%, -50%) rotate(-4deg) scale(0.7);
    }
    95% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(1deg) scale(1.18);
    }
    100% {
        top: 50%;
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0) scale(1);
    }
}

@keyframes lantern-envelope-sync {
    0%, 28% {
        top: 70%;
        left: 27%;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-12deg) scale(0.035);
    }
    36% {
        top: 62%;
        left: 38%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-8deg) scale(0.09);
    }
    48% {
        top: 42%;
        left: 63%;
        transform: translate(-50%, -50%) rotate(36deg) scale(0.2);
    }
    61% {
        top: 47%;
        left: 72%;
        transform: translate(-50%, -50%) rotate(112deg) scale(0.32);
    }
    73% {
        top: 61%;
        left: 61%;
        transform: translate(-50%, -50%) rotate(198deg) scale(0.48);
    }
    84% {
        top: 57%;
        left: 43%;
        transform: translate(-50%, -50%) rotate(286deg) scale(0.68);
    }
    94% {
        top: 50%;
        left: 51%;
        transform: translate(-50%, -50%) rotate(354deg) scale(1.08);
    }
    100% {
        top: 50%;
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}

@keyframes train-envelope-sync {
    0%, 26% {
        top: 43%;
        left: 36%;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-4deg) scale(0.04);
    }
    29% {
        top: 43%;
        left: 36%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-4deg) scale(0.07);
    }
    38% {
        top: 56%;
        left: 27%;
        transform: translate(-50%, -50%) rotate(-12deg) scale(0.16);
    }
    51% {
        top: 66%;
        left: 43%;
        transform: translate(-50%, -50%) rotate(8deg) scale(0.29);
    }
    64% {
        top: 56%;
        left: 65%;
        transform: translate(-50%, -50%) rotate(13deg) scale(0.44);
    }
    77% {
        top: 46%;
        left: 43%;
        transform: translate(-50%, -50%) rotate(-7deg) scale(0.64);
    }
    90% {
        top: 50%;
        left: 51%;
        transform: translate(-50%, -50%) rotate(2deg) scale(0.97);
    }
    96% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0) scale(1.28);
    }
    100% {
        top: 50%;
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0) scale(1);
    }
}

@keyframes fal-gift-box-envelope-sync {
    0%, 40% { top: 55%; left: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.08); }
    52% { top: 55%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(0.16); }
    70% { top: 53%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(0.48); }
    88% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1.08); }
    100% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes fal-balloon-envelope-sync {
    0%, 34% { top: 81%; left: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(-2deg) scale(0.05); }
    43% { top: 80%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(0.12); }
    65% { top: 73%; left: 50%; transform: translate(-50%, -50%) rotate(2deg) scale(0.28); }
    84% { top: 59%; left: 50%; transform: translate(-50%, -50%) rotate(-1deg) scale(0.68); }
    100% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes fal-candle-envelope-sync {
    0%, 34% { top: 57%; left: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.1); }
    46% { top: 57%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(0.24); }
    72% { top: 54%; left: 50%; transform: translate(-50%, -50%) rotate(0) scale(0.62); }
    100% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes fal-flower-envelope-sync {
    0%, 55% { top: 53%; left: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.04); }
    66% { top: 53%; left: 50%; opacity: 0.88; transform: translate(-50%, -50%) rotate(0) scale(0.14); }
    82% { top: 51%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(0.48); }
    100% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes fal-stork-envelope-sync {
    0%, 36% { top: 67%; left: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.06); }
    48% { top: 68%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(0.18); }
    68% { top: 67%; left: 50%; transform: translate(-50%, -50%) rotate(0) scale(0.42); }
    86% { top: 57%; left: 50%; transform: translate(-50%, -50%) rotate(0) scale(0.78); }
    100% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes one-envelope-vanish {
    0%, 58% { opacity: 1; transform: scale(1); }
    72%, 100% { opacity: 0; transform: scale(0); }
}

@keyframes one-envelope-back {
    0%, 34% { z-index: 4; opacity: 1; transform: scale(1); }
    35%, 58% { z-index: 1; opacity: 1; transform: scale(1); }
    72%, 100% { z-index: 1; opacity: 0; transform: scale(0); }
}

@keyframes one-envelope-flap {
    0%, 24% { opacity: 1; transform: rotateX(0) scale(1); }
    43%, 58% { z-index: 2; opacity: 1; transform: rotateX(178deg) scale(1); }
    72%, 100% { z-index: 2; opacity: 0; transform: rotateX(178deg) scale(0); }
}

@keyframes one-envelope-wax {
    0%, 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    34%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(30deg) scale(1.65); }
}

@keyframes one-envelope-name {
    0%, 26% { opacity: 1; }
    40%, 100% { opacity: 0; }
}

@keyframes one-card-expand {
    0%, 31% { width: 74%; height: 84%; z-index: 3; top: 50%; border-radius: 0.42rem; opacity: 1; }
    38% { width: 74%; height: 84%; z-index: 3; top: 36%; border-radius: 0.42rem; opacity: 1; }
    56%, 72% { width: 74%; height: 84%; z-index: 8; top: -48%; border-radius: 0.42rem; opacity: 1; }
    100% { width: 100vw; height: 100dvh; z-index: 8; top: 50%; border-radius: 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ecard-player:not(.motion-enabled) *,
    .ecard-player:not(.motion-enabled) *::before,
    .ecard-player:not(.motion-enabled) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ecard-player:not(.motion-enabled) .delivery-caption {
        display: none;
    }
}

/* Still-feeling cinematic delivery and full-card experience */
.player-brand {
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top));
    left: 50%;
    z-index: 4;
    margin: 0;
    color: rgba(255, 248, 233, 0.76);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.delivery-film,
.delivery-film-shade {
    position: absolute;
    inset: 0;
}

.delivery-film {
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #080a20;
}

.delivery-scene.has-film.is-airmail .delivery-film {
    object-fit: contain;
    background: #10141b;
}

.delivery-film-shade {
    z-index: 2;
    background: linear-gradient(180deg, rgba(5, 7, 23, 0.08), transparent 45%, rgba(5, 7, 23, 0.76));
    pointer-events: none;
}

.delivery-scene.has-film .delivery-night,
.delivery-scene.has-film .delivery-moon,
.delivery-scene.has-film .magic-lantern,
.delivery-scene.has-film .magic-stream,
.delivery-scene.has-film .delivery-envelope {
    display: none;
}

.delivery-scene:not(.has-film) .delivery-film,
.delivery-scene:not(.has-film) .delivery-film-shade {
    display: none;
}

.delivery-scene.is-airmail .magic-lantern,
.delivery-scene.is-airmail .magic-stream {
    display: none;
}

.delivery-scene.is-airmail:not(.has-film)::before {
    content: "✈";
    position: absolute;
    z-index: 6;
    top: 24%;
    left: -7rem;
    color: #fff3cf;
    font-size: 4.6rem;
    filter: drop-shadow(0 0.8rem 1rem rgba(0, 0, 0, 0.35));
    transform: rotate(-8deg);
}

.delivery-scene.is-airmail:not(.has-film)::after {
    content: "";
    width: 13rem;
    position: absolute;
    z-index: 5;
    top: 33%;
    left: -13rem;
    border-top: 2px dashed rgba(255, 248, 225, 0.55);
    transform: rotate(-7deg);
}

.delivery-scene.is-airmail:not(.has-film).is-running::before {
    animation: airmail-flight 3.8s cubic-bezier(0.2, 0.65, 0.28, 1) both;
}

.delivery-scene.is-airmail:not(.has-film).is-running::after {
    animation: airmail-trail 3.8s cubic-bezier(0.2, 0.65, 0.28, 1) both;
}

@keyframes airmail-flight {
    0% { opacity: 0; transform: translateX(0) translateY(3rem) rotate(-8deg) scale(0.75); }
    15% { opacity: 1; }
    72% { opacity: 1; transform: translateX(calc(100vw + 6rem)) translateY(-2rem) rotate(-4deg) scale(1); }
    100% { opacity: 0; transform: translateX(calc(100vw + 12rem)) translateY(-3rem) rotate(-4deg) scale(0.9); }
}

@keyframes airmail-trail {
    0% { opacity: 0; transform: translateX(0) rotate(-7deg); }
    18% { opacity: 1; }
    72% { opacity: 0.65; transform: translateX(calc(100vw + 5rem)) rotate(-7deg); }
    100% { opacity: 0; transform: translateX(calc(100vw + 10rem)) rotate(-7deg); }
}

.delivery-scene .delivery-caption,
.delivery-scene .skip-delivery {
    z-index: 12;
}

.reveal-scene {
    position: absolute;
    z-index: 18;
    inset: 0;
    visibility: hidden;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 221, 134, 0.28), transparent 30rem),
        linear-gradient(155deg, #111436, #060817 76%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 360ms;
    perspective: 80rem;
}

.reveal-scene.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.reveal-halo {
    width: 25rem;
    height: 25rem;
    position: absolute;
    top: 44%;
    left: 50%;
    border: 1px solid rgba(255, 225, 145, 0.32);
    border-radius: 50%;
    box-shadow: 0 0 5rem rgba(255, 205, 93, 0.14), inset 0 0 4rem rgba(255, 205, 93, 0.12);
    transform: translate(-50%, -50%) scale(0.55);
}

.reveal-envelope {
    --reveal-envelope: #1f315f;
    width: min(82vw, 24rem);
    aspect-ratio: 1.48;
    position: absolute;
    z-index: 5;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

.reveal-envelope.is-claret { --reveal-envelope: #7b2944; }
.reveal-envelope.is-sand { --reveal-envelope: #b58a62; }

.reveal-envelope-back,
.reveal-envelope-front,
.reveal-envelope-flap,
.reveal-card {
    position: absolute;
    inset: 0;
    border-radius: 0.45rem;
}

.reveal-envelope-back {
    background: color-mix(in srgb, var(--reveal-envelope), black 8%);
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.52);
}

.reveal-card {
    z-index: 2;
    inset: 6% 13% 8%;
    overflow: hidden;
    background: #101530;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.42);
    transform-origin: 50% 85%;
}

.reveal-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.reveal-envelope-front {
    z-index: 4;
    clip-path: polygon(0 18%, 50% 67%, 100% 18%, 100% 100%, 0 100%);
    background: linear-gradient(145deg, color-mix(in srgb, var(--reveal-envelope), white 14%), var(--reveal-envelope));
}

.reveal-envelope-flap {
    z-index: 5;
    clip-path: polygon(0 0, 100% 0, 50% 65%);
    background: color-mix(in srgb, var(--reveal-envelope), white 17%);
    backface-visibility: hidden;
    transform-origin: 50% 0;
}

.reveal-scene.is-open .reveal-envelope-flap {
    z-index: 1;
}

.reveal-image-card {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    background: #080a20;
    opacity: 0;
    pointer-events: none;
    transform: translateY(22%) scale(0.2);
    transform-origin: 50% 58%;
}

.reveal-image-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.reveal-scene.is-open .reveal-image-card {
    z-index: 8;
}

.reveal-scene.is-running .reveal-image-card {
    animation: reveal-image-from-envelope 3.2s cubic-bezier(0.18, 0.72, 0.18, 1) both;
}

.reveal-wax {
    width: 3.25rem;
    height: 3.25rem;
    position: absolute;
    z-index: 7;
    top: 48%;
    left: 50%;
    display: grid;
    place-items: center;
    border-radius: 48% 52% 45% 55%;
    color: #ffe39a;
    background: #742441;
    box-shadow: inset 0 -0.35rem rgba(50, 8, 22, 0.28);
    transform: translate(-50%, -50%);
}

.reveal-caption {
    position: absolute;
    z-index: 12;
    right: 1.5rem;
    bottom: calc(4.7rem + env(safe-area-inset-bottom));
    left: 1.5rem;
    margin: 0;
    color: rgba(255, 248, 233, 0.82);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.reveal-scene .skip-delivery {
    z-index: 15;
}

.reveal-scene.is-running .reveal-halo {
    animation: reveal-halo 3.7s ease-out both;
}

.reveal-scene.is-running .reveal-envelope {
    animation: reveal-envelope-arrive 3.7s cubic-bezier(0.18, 0.72, 0.22, 1) both;
}

.reveal-scene.is-running .reveal-envelope-flap {
    animation: reveal-flap 3.7s cubic-bezier(0.35, 0.05, 0.2, 1) both;
}

.reveal-scene.is-running .reveal-wax {
    animation: reveal-wax-break 3.7s ease both;
}

.reveal-scene.is-running .reveal-card {
    animation: reveal-card-rise 3.7s cubic-bezier(0.17, 0.75, 0.18, 1) both;
}

.reveal-scene.reveal-soft-fold.is-running .reveal-envelope {
    animation-name: reveal-soft-fold;
}

.reveal-scene.reveal-wax-seal.is-running .reveal-wax {
    animation-name: reveal-wax-dramatic;
}

@keyframes reveal-halo {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
    50% { opacity: 1; }
    100% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes reveal-envelope-arrive {
    0% { opacity: 0; transform: translate(-50%, -36%) rotate(-7deg) scale(0.72); }
    24% { opacity: 1; transform: translate(-50%, -50%) rotate(2deg) scale(1.03); }
    38%, 58% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0); }
}

@keyframes reveal-flap {
    0%, 34% { transform: rotateX(0deg); }
    52%, 100% { transform: rotateX(178deg); filter: brightness(0.68); }
}

@keyframes reveal-wax-break {
    0%, 31% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    43%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(24deg) scale(1.65); }
}

@keyframes reveal-image-from-envelope {
    0%, 34% {
        border-radius: 0.45rem;
        opacity: 0;
        transform: translateY(22%) scale(0.2);
    }
    39% {
        border-radius: 0.35rem;
        opacity: 1;
        transform: translateY(20%) scale(0.2);
    }
    58% {
        border-radius: 0.25rem;
        opacity: 1;
        transform: translateY(5%) scale(0.38);
    }
    88%, 100% {
        border-radius: 0;
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes reveal-soft-fold {
    0% { opacity: 0; transform: translate(-50%, -45%) rotateY(-25deg) scale(0.72); }
    35% { opacity: 1; transform: translate(-50%, -50%) rotateY(0) scale(1); }
    75% { transform: translate(-50%, -50%) rotateY(0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotateY(88deg) scale(1.1); }
}

@keyframes reveal-wax-dramatic {
    0%, 38% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    48% { box-shadow: 0 0 3rem #ffd979; transform: translate(-50%, -50%) scale(1.35); }
    65%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(2); }
}

.cover-art-image,
.cover-art-shade {
    position: absolute;
    inset: 0;
}

.cover-art-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cover-art-image[hidden] { display: none !important; }

.page-cover .cover-art-image { filter: none !important; }
.page-cover .cover-art-shade,
.page-cover .page-sky,
.page-cover .gold-frame,
.page-cover .corner-sprig,
.page-cover .cover-star,
.page-cover .gold-rule,
.page-cover .cover-content small { display: none !important; }

.page-cover .cover-content {
    min-height: 100%;
    justify-content: flex-end;
    padding: 2rem 8% 5.4rem;
    color: #fff;
    text-shadow: 0 .12rem .55rem rgba(0,0,0,.9), 0 0 1.2rem rgba(0,0,0,.55);
}

.page-cover .cover-content > p {
    margin: 0 0 .25rem;
    font-size: clamp(.7rem, 2.8vw, .9rem);
    letter-spacing: .08em;
}

.page-cover .cover-content h2 {
    margin: 0;
    font-size: clamp(2rem, 8vw, 3.2rem);
}

.page-cover .cover-content blockquote {
    max-width: 26ch;
    margin: .45rem 0 0;
    color: #fff !important;
    font-size: clamp(.9rem, 3.5vw, 1.2rem);
    line-height: 1.2;
}

.page-cover.cover-position-top .cover-content { justify-content: flex-start; padding-top: 5.4rem; padding-bottom: 2rem; }
.page-cover.cover-position-centre .cover-content { justify-content: center; padding-block: 2rem; }
.page-cover.cover-position-bottom .cover-content { justify-content: flex-end; }
.page-cover.cover-text-elegant-serif .cover-content blockquote { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; }
.page-cover.cover-text-handwritten .cover-content blockquote { font-family: "Segoe Print", "Bradley Hand", cursive; font-style: normal; font-weight: 600; }
.page-cover.cover-text-modern-bold .cover-content blockquote { font-family: system-ui, sans-serif; font-style: normal; font-weight: 850; letter-spacing: -.03em; text-transform: uppercase; }
.page-cover.cover-text-minimal .cover-content blockquote { font-family: system-ui, sans-serif; font-style: normal; font-weight: 500; letter-spacing: .08em; }
.custom-layout-layer { position: absolute; inset: 0; z-index: 12; overflow: hidden; pointer-events: none; }
.custom-layout-element { position: absolute; display: block; }
.custom-layout-element.is-text { padding: .2rem; color: #fff; font: 700 clamp(.7rem,3vw,1.1rem)/1.2 Georgia,"Times New Roman",serif; text-shadow: 0 .08rem .35rem rgba(0,0,0,.9); overflow-wrap: anywhere; }
.custom-layout-element.is-image { height: auto; max-height: 45%; object-fit: contain; }

/* Keep cover copy hidden during delivery; animate only after the card itself is visible. */
.page-cover .cover-content > * {
    opacity: 0;
    animation: none !important;
}

.card-world.is-visible .page-cover.is-active .cover-art-image {
    animation: cover-image-settle 1.15s cubic-bezier(.2,.72,.2,1) both;
}

.card-world.is-visible .page-cover.is-active .cover-content > p {
    animation: cover-copy-enter .72s cubic-bezier(.18,.76,.22,1) .24s both !important;
}

.card-world.is-visible .page-cover.is-active .cover-content > h2 {
    animation: cover-copy-enter .82s cubic-bezier(.18,.76,.22,1) .4s both !important;
}

.card-world.is-visible .page-cover.is-active .cover-content > blockquote {
    animation: cover-copy-enter .82s cubic-bezier(.18,.76,.22,1) .58s both !important;
}

@keyframes cover-image-settle {
    from { opacity: .72; transform: scale(1.025); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes cover-copy-enter {
    from { opacity: 0; transform: translateY(1.1rem); filter: blur(.22rem); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .card-world.is-visible .page-cover.is-active .cover-art-image,
    .card-world.is-visible .page-cover.is-active .cover-content > * {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none !important;
    }
}

.cover-art-shade {
    z-index: 1;
    background: linear-gradient(180deg, rgba(3, 12, 40, 0.12), rgba(3, 9, 30, 0.08) 45%, rgba(3, 8, 26, 0.86));
}

.theme-celestial .page-cover .cover-content {
    justify-content: flex-end;
    color: #fff8e7;
    text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.55);
}

.theme-celestial .page-cover .cover-content blockquote,
.theme-celestial .page-cover .cover-content small {
    color: #fff3d1;
}

.theme-celestial .page-cover .cover-star,
.theme-celestial .page-cover .corner-sprig {
    display: none;
}

.memory-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 55% 70%;
}

.memory-art:has(img)::before,
.memory-art:has(img)::after,
.memory-art:has(img) > i,
.memory-art:has(img) .memory-sun {
    display: none;
}

.finale-brand {
    margin-top: 2rem;
    color: rgba(71, 52, 69, 0.55);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.finale-logo {
    width:min(72%,18rem);
    max-height:9rem;
    object-fit:contain;
    margin:0 auto 1.4rem;
}

.finale-link {
    min-height:3rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:1.5rem;
    padding:.7rem 1.2rem;
    border:1px solid currentColor;
    border-radius:999px;
    color:inherit;
    font-weight:800;
    text-decoration:none;
}

.finale-link:hover { background:rgba(255,255,255,.12); }

.theme-garden .card-page {
    background:
        radial-gradient(circle at 10% 0, rgba(186, 111, 119, 0.18), transparent 34%),
        linear-gradient(145deg, #fffaf0, #f5e6dc);
}

.theme-garden .gold-frame { border-color: rgba(115, 125, 86, 0.65); }
.theme-garden .page-sky i { background: #81915d; box-shadow: none; }
.theme-garden .page-cover .cover-art-image { filter: sepia(0.22) saturate(0.76) brightness(1.08); }
.theme-garden .page-cover .cover-art-shade { background: linear-gradient(180deg, rgba(255,250,240,.05), rgba(54,39,32,.72)); }
.theme-garden .page-eyebrow,
.theme-garden .contribution-chip,
.theme-garden .script-line,
.theme-garden .finale-script { color: #687444; }

.theme-celebration .card-page {
    color: #201a35;
    background:
        radial-gradient(circle at 12% 12%, #ffd85a 0 9%, transparent 9.4%),
        radial-gradient(circle at 88% 20%, #ff7ea5 0 7%, transparent 7.4%),
        linear-gradient(145deg, #fff8d7, #e9dcff);
}

.theme-celebration .gold-frame { border: 0.35rem solid #f05286; box-shadow: inset 0 0 0 0.3rem #ffd65b; }
.theme-celebration .page-sky i { background: #7553c8; box-shadow: none; }
.theme-celebration .page-cover .cover-art-image { filter: saturate(1.28) contrast(1.06); }
.theme-celebration .page-cover .cover-art-shade { background: linear-gradient(180deg, rgba(255, 85, 145, .05), rgba(38, 15, 72, .77)); }
.theme-celebration .cover-content h2,
.theme-celebration .page-content h2 { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 900; letter-spacing: -0.07em; }
.theme-celebration .page-eyebrow,
.theme-celebration .contribution-chip,
.theme-celebration .script-line,
.theme-celebration .finale-script { color: #9e2258; }

:is(.theme-rose-velvet, .theme-coastal-linen, .theme-heritage-parchment, .theme-lavender-haze, .theme-evergreen-library, .theme-terracotta-glow, .theme-ink-ivory, .theme-champagne-silk, .theme-sunrise-watercolour) .card-page {
    color: var(--mood-ink);
    background: var(--mood-page);
}

:is(.theme-rose-velvet, .theme-coastal-linen, .theme-heritage-parchment, .theme-lavender-haze, .theme-evergreen-library, .theme-terracotta-glow, .theme-ink-ivory, .theme-champagne-silk, .theme-sunrise-watercolour) .gold-frame { border-color: var(--mood-frame); }
:is(.theme-rose-velvet, .theme-coastal-linen, .theme-heritage-parchment, .theme-lavender-haze, .theme-evergreen-library, .theme-terracotta-glow, .theme-ink-ivory, .theme-champagne-silk, .theme-sunrise-watercolour) .page-sky i { background: var(--mood-accent); box-shadow: none; }
:is(.theme-rose-velvet, .theme-coastal-linen, .theme-heritage-parchment, .theme-lavender-haze, .theme-evergreen-library, .theme-terracotta-glow, .theme-ink-ivory, .theme-champagne-silk, .theme-sunrise-watercolour) .page-cover .cover-art-image { filter: var(--mood-image-filter); }
:is(.theme-rose-velvet, .theme-coastal-linen, .theme-heritage-parchment, .theme-lavender-haze, .theme-evergreen-library, .theme-terracotta-glow, .theme-ink-ivory, .theme-champagne-silk, .theme-sunrise-watercolour) .page-cover .cover-art-shade { background: var(--mood-cover-shade); }
:is(.theme-rose-velvet, .theme-coastal-linen, .theme-heritage-parchment, .theme-lavender-haze, .theme-evergreen-library, .theme-terracotta-glow, .theme-ink-ivory, .theme-champagne-silk, .theme-sunrise-watercolour) :is(.page-eyebrow, .contribution-chip, .script-line, .finale-script) { color: var(--mood-accent); }

.theme-rose-velvet {
    --mood-ink: #4c2331; --mood-accent: #8e3f58; --mood-frame: rgba(142,63,88,.62); --mood-image-filter: saturate(.9) sepia(.08); --mood-cover-shade: linear-gradient(180deg, rgba(84,20,42,.02), rgba(61,15,31,.8));
    --mood-page: repeating-linear-gradient(112deg, rgba(106,42,62,.025) 0 1px, transparent 1px 5px), radial-gradient(circle at 12% 8%, rgba(191,91,119,.18), transparent 34%), linear-gradient(145deg, #fff6f2, #ecd0d4);
}
.theme-coastal-linen {
    --mood-ink: #244c51; --mood-accent: #3f7b80; --mood-frame: rgba(63,123,128,.58); --mood-image-filter: saturate(.82) brightness(1.04); --mood-cover-shade: linear-gradient(180deg, rgba(217,244,241,.03), rgba(20,61,67,.75));
    --mood-page: repeating-linear-gradient(0deg, rgba(36,82,86,.035) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 1px, transparent 1px 5px), linear-gradient(150deg, #f2faf6, #cfe4e4);
}
.theme-heritage-parchment {
    --mood-ink: #513a24; --mood-accent: #795533; --mood-frame: rgba(121,85,51,.68); --mood-image-filter: sepia(.28) saturate(.72); --mood-cover-shade: linear-gradient(180deg, rgba(95,61,29,.03), rgba(54,35,20,.8));
    --mood-page: radial-gradient(circle at 12% 18%, rgba(110,70,34,.1), transparent 24%), repeating-linear-gradient(3deg, rgba(86,57,29,.035) 0 1px, transparent 1px 6px), linear-gradient(145deg, #f7ecd4, #e6d1aa);
}
.theme-lavender-haze {
    --mood-ink: #473a56; --mood-accent: #735c8b; --mood-frame: rgba(115,92,139,.58); --mood-image-filter: saturate(.82) hue-rotate(-5deg); --mood-cover-shade: linear-gradient(180deg, rgba(230,219,241,.03), rgba(52,38,68,.76));
    --mood-page: radial-gradient(circle at 78% 20%, rgba(255,255,255,.72), transparent 22%), radial-gradient(circle at 20% 44%, rgba(178,151,203,.32), transparent 36%), linear-gradient(155deg, #f7f1fa, #dcd0e8);
}
.theme-evergreen-library {
    --mood-ink: #183d33; --mood-accent: #2e6655; --mood-frame: rgba(155,123,66,.72); --mood-image-filter: saturate(.78) contrast(1.03); --mood-cover-shade: linear-gradient(180deg, rgba(17,64,52,.03), rgba(7,39,31,.82));
    --mood-page: repeating-linear-gradient(90deg, rgba(20,61,51,.027) 0 1px, transparent 1px 3px), radial-gradient(circle at 90% 8%, rgba(187,157,94,.18), transparent 30%), linear-gradient(145deg, #f4f1df, #d7dfc7);
}
.theme-terracotta-glow {
    --mood-ink: #613526; --mood-accent: #a34f37; --mood-frame: rgba(163,79,55,.62); --mood-image-filter: sepia(.12) saturate(.9); --mood-cover-shade: linear-gradient(180deg, rgba(198,107,75,.02), rgba(83,35,23,.78));
    --mood-page: radial-gradient(circle at 88% 10%, rgba(240,170,103,.3), transparent 30%), repeating-radial-gradient(circle at 20% 30%, rgba(79,39,24,.04) 0 1px, transparent 1px 6px), linear-gradient(145deg, #fff0dc, #e7b49a);
}
.theme-ink-ivory {
    --mood-ink: #171717; --mood-accent: #222; --mood-frame: rgba(23,23,23,.72); --mood-image-filter: grayscale(.32) contrast(1.08); --mood-cover-shade: linear-gradient(180deg, transparent, rgba(0,0,0,.82));
    --mood-page: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 5px), linear-gradient(145deg, #fffdf6, #eee9dd);
}
.theme-ink-ivory :is(.cover-content h2, .page-content h2) { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 850; letter-spacing: -.045em; }
.theme-champagne-silk {
    --mood-ink: #55442e; --mood-accent: #987643; --mood-frame: rgba(152,118,67,.62); --mood-image-filter: sepia(.1) saturate(.8) brightness(1.03); --mood-cover-shade: linear-gradient(180deg, rgba(239,220,180,.02), rgba(65,48,28,.76));
    --mood-page: linear-gradient(118deg, transparent 20%, rgba(255,255,255,.5) 31%, transparent 43%), repeating-linear-gradient(90deg, rgba(120,91,45,.025) 0 1px, transparent 1px 4px), linear-gradient(145deg, #fff9ea, #e9d9b9);
}
.theme-sunrise-watercolour {
    --mood-ink: #5b3b48; --mood-accent: #8c5d75; --mood-frame: rgba(140,93,117,.52); --mood-image-filter: saturate(.9) brightness(1.04); --mood-cover-shade: linear-gradient(180deg, rgba(245,196,172,.02), rgba(78,42,58,.74));
    --mood-page: radial-gradient(ellipse at 15% 20%, rgba(248,178,132,.58), transparent 38%), radial-gradient(ellipse at 84% 25%, rgba(133,184,202,.46), transparent 40%), radial-gradient(ellipse at 50% 82%, rgba(248,212,153,.4), transparent 44%), #f7e6df;
}

@media (min-width: 35rem) {
    .player-page:not(.is-preview) .ecard-player {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        border-radius: 0;
    }

    .player-page:not(.is-preview) .cover-content,
    .player-page:not(.is-preview) .page-content {
        padding-inline: max(9%, calc((100vw - 58rem) / 2));
    }

    .player-page:not(.is-preview) .memory-photo {
        width: min(38vh, 22rem);
    }

    .player-page:not(.is-preview) .video-placeholder {
        width: min(31vh, 15rem);
    }
}

/* Text quote artwork: the creator tiles and recipient page share these treatments. */
.page-quote[class*="quote-style-"]:not(.has-quote-image) {
    color: var(--quote-ink);
    background: var(--quote-bg) !important;
}

.page-quote[class*="quote-style-"] .gold-frame { border-color: color-mix(in srgb,var(--quote-accent),transparent 34%); }
.page-quote[class*="quote-style-"] .page-sky,
.page-quote[class*="quote-style-"] .orbit-mark,
.page-quote[class*="quote-style-"] .page-eyebrow,
.page-quote[class*="quote-style-"] .script-line { display:none; }
.page-quote[class*="quote-style-"] .quote-content blockquote { margin-inline:auto; color:var(--quote-ink); font-family:var(--quote-title-font,Georgia,"Times New Roman",serif); font-size:clamp(1.45rem,5.5vw,2.3rem); text-align:center; }
.page-quote.quote-style-sepia-keepsake { --quote-ink:#5b442d; --quote-accent:#7a4f2c; --quote-title-font:Georgia,"Times New Roman",serif; --quote-bg:repeating-linear-gradient(4deg,rgba(92,60,31,.025) 0 1px,transparent 1px 6px),linear-gradient(145deg,#fbf1d9,#ead7b8); }
.page-quote.quote-style-midnight-stars { --quote-ink:#f5edcf; --quote-accent:#d9c27f; --quote-title-font:Georgia,"Times New Roman",serif; --quote-bg:linear-gradient(145deg,#111a2e,#2a3957); }
.page-quote.quote-style-editorial-journey { --quote-ink:#292a27; --quote-accent:#873442; --quote-title-font:ui-sans-serif,system-ui,sans-serif; --quote-bg:linear-gradient(90deg,transparent 0 12%,rgba(124,41,49,.1) 12% 12.4%,transparent 12.4%),#f5f1e8; }
.page-quote.quote-style-editorial-journey .quote-content blockquote { font-weight:760; letter-spacing:-.035em; }
.page-quote.quote-style-sage-botanical { --quote-ink:#3d4a36; --quote-accent:#56714a; --quote-title-font:Georgia,"Times New Roman",serif; --quote-bg:linear-gradient(145deg,#f7f5eb,#dce7d5); }
.page-quote.quote-style-rose-vellum { --quote-ink:#633441; --quote-accent:#963e59; --quote-title-font:"Brush Script MT","Segoe Script",Georgia,serif; --quote-bg:repeating-linear-gradient(115deg,rgba(119,49,67,.018) 0 1px,transparent 1px 6px),linear-gradient(145deg,#fff7f3,#ecd2d8); }
.page-quote.quote-style-rose-vellum .quote-content blockquote { font-weight:500; line-height:1.18; }
.page-quote.quote-style-sunrise-watercolour { --quote-ink:#5a4343; --quote-accent:#a64e43; --quote-title-font:Georgia,"Times New Roman",serif; --quote-bg:linear-gradient(155deg,#fff5df,#edc9bd 58%,#d9e5e9); }
.page-quote.quote-style-blue-embrace { --quote-ink:#344e5c; --quote-accent:#416d82; --quote-title-font:Georgia,"Times New Roman",serif; --quote-bg:repeating-linear-gradient(90deg,rgba(42,86,106,.022) 0 1px,transparent 1px 6px),linear-gradient(145deg,#f4f8f7,#d2e1e8); }

/* Still Feeling brand ending: intentionally independent of the selected card theme. */
.card-world .page-finale {
    color:#382a31;
    background:
        radial-gradient(ellipse at 92% 10%,rgba(221,164,190,.52),transparent 36%),
        radial-gradient(ellipse at 78% 24%,rgba(238,193,169,.46),transparent 34%),
        radial-gradient(ellipse at 12% 82%,rgba(203,180,227,.28),transparent 36%),
        linear-gradient(155deg,#fffaf4,#f0e8dc 72%);
}
.card-world .page-finale::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 89% 7%,#fff 0 2px,transparent 3px),
        radial-gradient(circle at 82% 17%,#f2b3cb 0 2px,transparent 3px),
        radial-gradient(circle at 12% 72%,#d7b9df 0 2px,transparent 3px);
    opacity:.9;
}
.card-world .page-finale .gold-frame { border-color:rgba(168,80,117,.3); }
.card-world .page-finale .page-sky i { background:#c75b7a; box-shadow:none; opacity:.34; }
.card-world .page-finale .finale-content { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(2rem,8vw,4rem); text-align:center; }
.card-world .page-finale .finale-logo { width:min(82%,19rem); max-height:none; display:block; margin:0 auto 1.65rem; object-fit:contain; }
.card-world .page-finale .finale-content h2 { max-width:14ch; margin:0; color:#382a31; font-family:"Playfair Display",Georgia,"Times New Roman",serif; font-size:clamp(1.55rem,7vw,2.5rem); font-weight:500; letter-spacing:-.025em; line-height:1.12; }
.card-world .page-finale .finale-link { min-height:3rem; margin-top:1.65rem; padding:.75rem 1.25rem; border:0; color:#fff; background:#a85075; box-shadow:0 .45rem 1.2rem rgba(90,44,64,.18); font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif; font-size:.78rem; }
.card-world .page-finale .finale-link:hover { background:#8f3f61; }

/* Image protection must not change the continuous cover's positioning or block controls. */
.journey-card.protected-image-host { position:absolute!important; pointer-events:none!important; }
.card-page.protected-image-host { position:absolute!important; inset:0!important; }
/* StillFeeling poem paper: shared gentle colours, with a clear reading centre. */
.card-world .card-page.page-message.layout-personal-letter {
    color: #293c43;
    background:
        radial-gradient(ellipse at 0% 10%, rgba(103,190,181,.38), transparent 43%),
        radial-gradient(ellipse at 100% 12%, rgba(185,157,218,.38), transparent 42%),
        radial-gradient(ellipse at 0% 95%, rgba(154,192,223,.38), transparent 43%),
        radial-gradient(ellipse at 100% 93%, rgba(232,165,186,.35), transparent 43%),
        radial-gradient(ellipse at 50% 110%, rgba(232,204,136,.29), transparent 38%),
        #fffdf9;
}
.card-world .page-message.layout-personal-letter .page-sky { display: none; }
.card-world .page-message.layout-personal-letter .gold-frame {
    inset: 4%;
    border: 1px solid rgba(158,133,83,.26);
    border-radius: 1.1rem;
    box-shadow: inset 0 0 0 .35rem rgba(255,255,255,.3);
}
.card-world .page-message.layout-personal-letter .message-content {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: center;
    justify-content: safe center;
    padding: 5rem clamp(1.5rem, 8vw, 6rem) 6rem;
    text-align: center;
    scrollbar-width: thin;
}
.card-world .page-message.layout-personal-letter .contribution-chip {
    align-self: center;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #416b6b;
    font-size: .72rem;
    letter-spacing: .16em;
}
.card-world .page-message.layout-personal-letter .message-content h2 {
    max-width: 22ch;
    margin: 1rem 0 0;
    flex-shrink: 0;
    color: #345d62;
    font: 500 clamp(1.6rem, 6.5vw, 2.7rem)/1.2 Georgia, serif;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.card-world .page-message.layout-personal-letter .message-content > p:not(.contribution-chip) {
    width: 100%;
    max-width: 40ch;
    margin: 1.5rem 0 0;
    flex-shrink: 0;
    color: #293c43;
    font: 400 clamp(1.15rem, 4.8vw, 1.65rem)/1.8 Georgia, serif;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
@media (max-height: 500px) {
    .card-world .page-message.layout-personal-letter .message-content {
        padding-top: 3.8rem;
        padding-bottom: 5rem;
    }
}