@font-face {
            font-family: 'Dancing Script';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('../assets/fonts/dancing-script-400.woff2?v=latin1') format('woff2');
        }

        @font-face {
            font-family: 'Dancing Script';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('../assets/fonts/dancing-script-700.woff2?v=latin1') format('woff2');
        }

        @font-face {
            font-family: 'Playfair Display';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('../assets/fonts/playfair-display-400.woff2?v=latin1') format('woff2');
        }

        @font-face {
            font-family: 'Playfair Display';
            font-style: italic;
            font-weight: 400;
            font-display: swap;
            src: url('../assets/fonts/playfair-display-400-italic.woff2?v=latin1') format('woff2');
        }

        @font-face {
            font-family: 'Playfair Display';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('../assets/fonts/playfair-display-700.woff2?v=latin1') format('woff2');
        }

        :root {
            --velvet0: #05040b;
            --velvet1: #0b0614;
            --velvet2: #120a22;
            --gold0: rgba(255, 215, 0, 0.22);
            --gold1: rgba(255, 215, 0, 0.42);
            --gold2: rgba(255, 215, 0, 0.85);
        }

        body {
            margin: 0;
            overflow: hidden;
            background: #0f0f1a;
            font-family: 'Playfair Display', serif;
        }

        .font-sans,
        .font-serif {
            font-family: 'Playfair Display', serif !important;
        }

        .title-text,
        .topper-text {
            font-family: 'Dancing Script', cursive !important;
        }

        .letter-text,
        .gift-ps,
        .letter-hint,
        .end-text {
            font-family: 'Playfair Display', serif !important;
        }

        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        #ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        #letter-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(8, 8, 12, 0.65);
            opacity: 0;
            pointer-events: none;
            transition: opacity 700ms ease;
            z-index: 260;
        }

        #letter-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        #letter-overlay.closing {
            opacity: 0;
            pointer-events: none;
        }

        .letter-stage {
            position: relative;
            width: min(880px, 92vw);
            height: min(86vh, 980px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 420ms ease;
        }

        .envelope {
            position: absolute;
            left: 50%;
            bottom: 10%;
            width: min(520px, 82vw);
            height: min(320px, 40vh);
            transform: translateX(-50%) translateY(50px) scale(0.96);
            opacity: 0;
            cursor: pointer;
            transform-style: preserve-3d;
            perspective: 1200px;
            z-index: 2;
            transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 600ms ease;
        }

        .envelope .env-back {
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background:
                radial-gradient(240px 160px at 20% 20%, rgba(255,255,255,0.35), rgba(0,0,0,0) 60%),
                linear-gradient(180deg, #f6e6cf, #e4c39b);
            box-shadow:
                0 24px 50px rgba(0,0,0,0.35),
                inset 0 0 0 1px rgba(120, 80, 40, 0.18),
                inset 0 18px 24px rgba(255,255,255,0.2),
                inset 0 -18px 30px rgba(0,0,0,0.08);
            z-index: 1;
        }

        .envelope .env-front {
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background:
                radial-gradient(220px 140px at 80% 0%, rgba(255,255,255,0.35), rgb(255, 255, 255) 60%),
                linear-gradient(180deg, #f1d8b2, #dfb786);
            clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.45),
                inset 0 -10px 18px rgba(0,0,0,0.08);
            z-index: 3;
        }

        .envelope .env-flap {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 62%;
            background:
                radial-gradient(240px 160px at 50% 10%, rgba(255,255,255,0.5), rgba(0,0,0,0) 60%),
                linear-gradient(180deg, #f9ecd8, #e8caa3);
            clip-path: polygon(0 0, 50% 70%, 100% 0);
            transform-origin: top center;
            transform: rotateX(0deg);
            transition: none;
            transform-style: preserve-3d;
            backface-visibility: visible;
            box-shadow:
                inset 0 -8px 16px rgba(0,0,0,0.12);
            z-index: 4;
            will-change: transform, filter;
        }

        .envelope .env-flap::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(210, 170, 120, 0.55), rgba(160, 120, 80, 0.75));
            clip-path: polygon(0 0, 50% 70%, 100% 0);
            transform: rotateX(180deg);
            backface-visibility: hidden;
        }

        .envelope .env-seal {
            position: absolute;
            left: 50%;
            top: 54%;
            width: 54px;
            height: 54px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), rgba(255,255,255,0) 45%),
                linear-gradient(180deg, #e55a7a, #b3224e);
            box-shadow:
                0 8px 16px rgba(0,0,0,0.25),
                inset 0 0 0 2px rgba(255,255,255,0.25);
            z-index: 5;
        }

        .envelope::after {
            content: "";
            position: absolute;
            inset: 10px;
            border-radius: 12px;
            border: 1px solid rgba(120, 80, 40, 0.15);
            pointer-events: none;
        }

        .envelope-frame {
            position: absolute;
            left: 50%;
            top: 50%;
            width: min(840px, 92vw);
            height: min(84vh, 980px);
            transform: translate(-50%, -50%);
            overflow: hidden;
            pointer-events: none;
            z-index: 4;
            isolation: isolate;
        }

        .envelope-frame::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 72%;
            width: 72%;
            height: 12px;
            transform: translateX(-50%);
            background: linear-gradient(180deg, rgba(90, 60, 30, 0.45), rgba(0,0,0,0));
            filter: blur(2px);
            opacity: 0.6;
            pointer-events: none;
            z-index: 7;
        }

        .envelope-frame::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 10%;
            width: min(520px, 82vw);
            height: min(320px, 40vh);
            transform: translateX(-50%);
            background:
                radial-gradient(220px 140px at 80% 0%, rgba(255,255,255,0.35), rgba(0,0,0,0) 60%),
                linear-gradient(180deg, #f1d8b2, #dfb786);
            clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.45),
                inset 0 -10px 18px rgba(0,0,0,0.08);
            pointer-events: none;
            z-index: 6;
        }

        .letter-paper {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 100%;
            padding: clamp(20px, 3.5vw, 44px);
            border-radius: 18px;
            color: #5b3a2e;
            background:
                radial-gradient(900px 600px at 20% 20%, rgba(255, 255, 255, 0.45), rgba(0,0,0,0) 60%),
                radial-gradient(800px 520px at 80% 10%, rgba(255, 240, 220, 0.65), rgba(0,0,0,0) 62%),
                linear-gradient(180deg, #f7ecd7, #f2e2c6 60%, #eed7b6);
            box-shadow:
                0 40px 120px rgba(0,0,0,0.45),
                inset 0 0 0 1px rgba(120, 80, 40, 0.18),
                inset 0 18px 40px rgba(255,255,255,0.18);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform-origin: 50% 100%;
            transform: translate(-50%, 82%) scaleY(0.02) scaleX(0.94) rotateX(12deg);
            clip-path: inset(96% 0 0 0);
            opacity: 1;
            pointer-events: none;
            transition: none;
            z-index: 2;
            will-change: transform, filter, clip-path;
        }

        #letter-overlay.closing .letter-stage {
            transform: translateY(6px);
        }

        #letter-overlay.closing .letter-paper {
            transform: translate(-50%, -50%) scale(0.98);
            filter: blur(0.4px);
            transition: transform 420ms ease, filter 420ms ease;
        }

        .letter-sheet {
            position: relative;
            z-index: 1;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            transform-origin: 50% 100%;
            transform: scaleY(0.62) rotateX(6deg);
            will-change: transform, filter;
        }

        .letter-paper::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                repeating-linear-gradient(45deg, rgba(120, 90, 50, 0.05) 0 2px, rgba(255,255,255,0) 2px 6px),
                radial-gradient(3px 3px at 20% 30%, rgba(90, 60, 30, 0.10), rgba(0,0,0,0));
            opacity: 0.35;
            mix-blend-mode: multiply;
            pointer-events: none;
        }

        .letter-paper::after {
            content: "";
            position: absolute;
            inset: 12px;
            border-radius: 12px;
            border: 1px solid rgba(120, 80, 40, 0.18);
            pointer-events: none;
        }

        .letter-text {
            position: relative;
            z-index: 1;
            font-size: 14px;
            line-height: 1.6;
            white-space: pre-wrap;
            overflow: auto;
            padding-right: 10px;
            flex: 1;
        }

        .letter-photo {
            width: min(260px, 55vw);
            height: auto;
            border-radius: 14px;
            display: block;
            margin: 0 auto 14px;
            box-shadow:
                0 18px 40px rgba(0,0,0,0.25),
                inset 0 0 0 1px rgba(120, 80, 40, 0.25);
            filter: saturate(1.05) contrast(1.02);
        }

        .letter-gift-card {
            margin-top: 20px;
            padding-top: 18px;
            border-top: 1px solid rgba(120, 80, 40, 0.2);
            text-align: center;
        }

        .letter-gift-card .gift-ps {
            font-size: 13px;
            color: #5b3a2e;
            margin-bottom: 12px;
            font-style: italic;
        }

        .letter-gift-card .gift-card-img {
            width: min(280px, 70vw);
            height: auto;
            border-radius: 12px;
            display: block;
            margin: 0 auto;
            box-shadow:
                0 12px 32px rgba(0,0,0,0.2),
                inset 0 0 0 1px rgba(120, 80, 40, 0.15);
            opacity: 0;
            transform: translateY(10px) scale(0.98);
            transition: opacity 500ms ease, transform 600ms ease;
        }

        .letter-text.typing::after {
            content: "|";
            margin-left: 4px;
            animation: caretBlink 1s steps(2) infinite;
        }

        .gift-ps.typing::after {
            content: "|";
            margin-left: 4px;
            animation: caretBlink 1s steps(2) infinite;
        }

        .letter-gift-card.show-card .gift-card-img {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .letter-hint {
            position: absolute;
            right: 26px;
            bottom: 20px;
            font-size: 0.7rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(90, 60, 40, 0.6);
            z-index: 1;
            opacity: 0;
            transition: opacity 400ms ease;
        }

        #letter-overlay.visible .letter-hint {
            opacity: 1;
            transition-delay: 5.2s;
        }

        #letter-overlay.visible .envelope {
            opacity: 1;
            animation: envelopeEnter 700ms cubic-bezier(.22, 1, .36, 1) forwards,
                       envelopeSlideAside 1.25s cubic-bezier(.22, 1, .36, 1) forwards;
            animation-delay: 0s, 1.9s;
        }

        #letter-overlay.visible .envelope-frame::before {
            animation: pocketLineSlideAside 1.25s cubic-bezier(.22, 1, .36, 1) forwards;
            animation-delay: 1.9s;
        }

        #letter-overlay.visible .envelope-frame::after {
            animation: pocketSlideAside 1.25s cubic-bezier(.22, 1, .36, 1) forwards;
            animation-delay: 1.9s;
        }

        #letter-overlay.visible .envelope .env-flap {
            animation: flapOpen 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
            animation-delay: 0.1s;
        }

        #letter-overlay.visible .letter-paper {
            pointer-events: auto;
            animation: letterSlideOut 3.2s cubic-bezier(.22, 1, .36, 1) forwards;
            animation-delay: 1.35s;
        }

        #letter-overlay.visible .letter-sheet {
            animation: letterUnfold 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
            animation-delay: 3.6s;
        }

        @keyframes envelopeEnter {
            0% { transform: translateX(-50%) translateY(60px) scale(0.96); }
            60% { transform: translateX(-50%) translateY(-10px) scale(1.02); }
            100% { transform: translateX(-50%) translateY(0) scale(1); }
        }

        @keyframes envelopeSlideAside {
            0% {
                left: 50%;
                transform: translateX(-50%) translateY(0) scale(1);
            }
            60% {
                left: 70%;
                transform: translateX(-50%) translateY(6px) scale(0.94);
            }
            100% {
                left: 78%;
                transform: translateX(-50%) translateY(10px) scale(0.9);
            }
        }

        @keyframes pocketSlideAside {
            0% {
                left: 50%;
                opacity: 1;
                transform: translateX(-50%) translateY(0) scale(1);
            }
            60% {
                left: 70%;
                opacity: 0.7;
                transform: translateX(-50%) translateY(6px) scale(0.95);
            }
            100% {
                left: 78%;
                opacity: 0;
                transform: translateX(-50%) translateY(10px) scale(0.92);
            }
        }

        @keyframes pocketLineSlideAside {
            0% {
                left: 50%;
                opacity: 0.6;
                transform: translateX(-50%);
            }
            60% {
                left: 70%;
                opacity: 0.35;
                transform: translateX(-50%);
            }
            100% {
                left: 78%;
                opacity: 0;
                transform: translateX(-50%);
            }
        }

        @keyframes flapOpen {
            0% {
                transform: translateZ(2px) rotateX(0deg);
                filter: brightness(1);
            }
            60% {
                transform: translateZ(2px) rotateX(-40deg);
                filter: brightness(1.05);
            }
            100% {
                transform: translateZ(2px) rotateX(-165deg) translateY(-8px);
                filter: brightness(1.08);
            }
        }

        @keyframes letterSlideOut {
            0% {
                transform: translate(-50%, 82%) scaleY(0.02) scaleX(0.94) rotateX(12deg);
                clip-path: inset(96% 0 0 0);
                filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
            }
            26% {
                transform: translate(-50%, 68%) scaleY(0.06) scaleX(0.95) rotateX(11deg);
                clip-path: inset(88% 0 0 0);
                filter: drop-shadow(0 10px 16px rgba(0,0,0,0.16));
            }
            42% {
                transform: translate(-50%, 68%) scaleY(0.06) scaleX(0.95) rotateX(11deg);
                clip-path: inset(88% 0 0 0);
                filter: drop-shadow(0 10px 16px rgba(0,0,0,0.16));
            }
            62% {
                transform: translate(-50%, 32%) scaleY(0.22) scaleX(0.97) rotateX(8deg);
                clip-path: inset(70% 0 0 0);
                filter: drop-shadow(0 18px 26px rgba(0,0,0,0.2));
            }
            78% {
                transform: translate(-50%, -6%) scaleY(0.55) scaleX(0.99) rotateX(5deg);
                clip-path: inset(35% 0 0 0);
                filter: drop-shadow(0 24px 32px rgba(0,0,0,0.24));
            }
            92% {
                transform: translate(-50%, calc(-50% - 2px)) scaleY(0.92) scaleX(1) rotateX(2deg);
                clip-path: inset(4% 0 0 0);
                filter: drop-shadow(0 30px 38px rgba(0,0,0,0.28));
            }
            100% {
                transform: translate(-50%, -50%) scaleY(1) scaleX(1) rotateX(0deg);
                clip-path: inset(0);
                filter: drop-shadow(0 26px 34px rgba(0,0,0,0.22));
            }
        }

        @keyframes letterUnfold {
            0% {
                transform: scaleY(0.62) rotateX(6deg);
                filter: brightness(0.98);
            }
            70% {
                transform: scaleY(1) rotateX(0deg);
                filter: brightness(1.02);
            }
            100% {
                transform: scaleY(1) rotateX(0deg);
                filter: brightness(1);
            }
        }

        #cake-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(900px 620px at 50% 35%, rgba(255, 214, 226, 0.18), rgba(8, 8, 12, 0.75) 70%),
                rgba(8, 8, 12, 0.7);
            opacity: 0;
            pointer-events: none;
            transition: opacity 700ms ease;
            z-index: 270;
        }

        #cake-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .cake-stage {
            position: relative;
            width: min(700px, 96vw);
            height: min(640px, 86vh);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            outline: none;
            text-align: center;
            opacity: 0;
            transform: translateY(10px) scale(0.98);
            transition: transform 600ms ease, opacity 600ms ease;
        }

        .cake-stage:focus-visible {
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
            border-radius: 18px;
        }

        #cake-overlay.visible .cake-stage {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .cake {
            position: relative;
            width: min(460px, 90vw);
            height: min(310px, 46vh);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            transform: scale(1.16);
            transform-origin: center bottom;
            will-change: transform;
        }

        .cake-shadow {
            position: absolute;
            bottom: -26px;
            width: 72%;
            height: 36px;
            background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0));
            filter: blur(6px);
        }

        .cake-plate {
            position: absolute;
            bottom: -18px;
            width: 90%;
            height: 28px;
            background: linear-gradient(180deg, #f8f1e8, #e6d8c9);
            border: 2px solid rgba(200, 182, 165, 0.9);
            border-radius: 999px;
            box-shadow: 0 10px 18px rgba(0,0,0,0.2);
        }

        .cake-tier {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            border-radius: 22px;
            box-shadow: 0 10px 16px rgba(0,0,0,0.18);
            border: 1px solid rgba(150, 110, 80, 0.18);
            overflow: hidden;
        }

        .tier-base {
            bottom: 0;
            width: 100%;
            height: 150px;
            background: linear-gradient(180deg, #f6c1ad, #e9a58e);
        }

        .tier-mid {
            bottom: 82px;
            width: 82%;
            height: 112px;
            background: linear-gradient(180deg, #f7c9b6, #eab09a);
        }

        .tier-top {
            bottom: 156px;
            width: 62%;
            height: 88px;
            background: linear-gradient(180deg, #f9d4c4, #efb8a4);
        }

        .icing {
            position: absolute;
            top: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(180deg, #fff8f3, #f9dccf);
            clip-path: polygon(0 0, 100% 0, 100% 65%, 85% 70%, 70% 82%, 55% 68%, 40% 82%, 25% 65%, 10% 72%, 0 65%);
            box-shadow: inset 0 -6px 0 rgba(236, 199, 182, 0.6);
        }

        .sprinkles {
            position: absolute;
            inset: 10px 14px 14px 14px;
            background-image:
                radial-gradient(circle, #f36fa1 2px, transparent 2px),
                radial-gradient(circle, #ffd166 2px, transparent 2px),
                radial-gradient(circle, #7fd8be 2px, transparent 2px);
            background-size: 28px 28px;
            background-position: 2px 4px, 10px 16px, 18px 10px;
            opacity: 0.6;
        }

        .fireworks {
            position: absolute;
            inset: -180px -220px 0;
            pointer-events: none;
            overflow: visible;
            z-index: 7;
        }

        .firework-projectile {
            position: absolute;
            bottom: 6px;
            width: 4px;
            height: 130px;
            border-radius: 999px;
            opacity: 0;
            transform: translate(-50%, 90px) scaleY(0.25);
            transform-origin: 50% 100%;
            background: linear-gradient(
                to top,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 206, 124, 0.45) 30%,
                rgba(255, 236, 185, 0.95) 100%
            );
            filter: drop-shadow(0 0 10px rgba(255, 190, 120, 0.8));
        }

        .firework-projectile::after {
            content: "";
            position: absolute;
            top: -8px;
            left: 50%;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            transform: translateX(-50%);
            background: radial-gradient(circle, #fff6d9 0%, #ffd166 55%, rgba(255, 145, 77, 0.8) 100%);
            box-shadow: 0 0 12px rgba(255, 205, 125, 0.95);
        }

        .firework-projectile.p1 { left: 22%; }
        .firework-projectile.p2 { left: 76%; }
        .firework-projectile.p3 { left: 50%; }
        .firework-projectile.p4 { left: 14%; }
        .firework-projectile.p5 { left: 86%; }

        .firework {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.2);
            filter: drop-shadow(0 0 12px rgba(255, 220, 180, 0.55));
        }

        .firework.f1 {
            top: 18%;
            left: 22%;
            box-shadow:
                0 -52px 0 #ffd166,
                36px -36px 0 #ff7ac8,
                52px 0 0 #7bdff2,
                36px 36px 0 #ffd166,
                0 52px 0 #ff7ac8,
                -36px 36px 0 #7bdff2,
                -52px 0 0 #ffd166,
                -36px -36px 0 #ff7ac8;
        }

        .firework.f2 {
            top: 12%;
            left: 76%;
            box-shadow:
                0 -46px 0 #ff9f1c,
                32px -32px 0 #f15bb5,
                46px 0 0 #00bbf9,
                32px 32px 0 #ff9f1c,
                0 46px 0 #f15bb5,
                -32px 32px 0 #00bbf9,
                -46px 0 0 #ff9f1c,
                -32px -32px 0 #f15bb5;
        }

        .firework.f3 {
            top: 24%;
            left: 50%;
            box-shadow:
                0 -58px 0 #ffd166,
                40px -40px 0 #ff7ac8,
                58px 0 0 #7bdff2,
                40px 40px 0 #ffd166,
                0 58px 0 #ff7ac8,
                -40px 40px 0 #7bdff2,
                -58px 0 0 #ffd166,
                -40px -40px 0 #ff7ac8;
        }

        .firework.f4 {
            top: 30%;
            left: 14%;
            box-shadow:
                0 -44px 0 #8de969,
                31px -31px 0 #7bdff2,
                44px 0 0 #ffe066,
                31px 31px 0 #8de969,
                0 44px 0 #7bdff2,
                -31px 31px 0 #ffe066,
                -44px 0 0 #8de969,
                -31px -31px 0 #7bdff2;
        }

        .firework.f5 {
            top: 32%;
            left: 86%;
            box-shadow:
                0 -42px 0 #ff6b6b,
                30px -30px 0 #ffd166,
                42px 0 0 #7bdff2,
                30px 30px 0 #ff6b6b,
                0 42px 0 #ffd166,
                -30px 30px 0 #7bdff2,
                -42px 0 0 #ff6b6b,
                -30px -30px 0 #ffd166;
        }

        .cake-topper {
            position: absolute;
            left: 50%;
            bottom: 236px;
            transform: translateX(-50%);
            z-index: 6;
            pointer-events: none;
        }

        .topper-text {
            position: relative;
            display: inline-block;
            padding: 7px 18px 8px;
            border-radius: 999px;
            font-family: 'Dancing Script', cursive;
            font-size: 2rem;
            line-height: 1;
            color: #fff8fd;
            letter-spacing: 0.02em;
            background: linear-gradient(180deg, #ff9dc7, #e861a4);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.45),
                0 8px 16px rgba(0, 0, 0, 0.22);
            text-shadow: 0 1px 0 rgba(145, 45, 95, 0.35);
        }

        .topper-text::before,
        .topper-text::after {
            content: "";
            position: absolute;
            bottom: -26px;
            width: 3px;
            height: 26px;
            border-radius: 999px;
            background: linear-gradient(180deg, #f8efe6, #d8c8b6);
            box-shadow: 0 0 0 1px rgba(150, 120, 90, 0.2);
        }

        .topper-text::before {
            left: 22px;
        }

        .topper-text::after {
            right: 22px;
        }

        .age-badge {
            position: absolute;
            left: 50%;
            bottom: 186px;
            transform: translateX(-50%);
            z-index: 6;
            min-width: 62px;
            height: 36px;
            padding: 0 12px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Dancing Script', cursive;
            font-size: 1.45rem;
            color: #7f3a54;
            background: linear-gradient(180deg, #fff8f4, #f3dfd2);
            border: 1px solid rgba(180, 140, 112, 0.45);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.8),
                0 6px 12px rgba(0, 0, 0, 0.18);
            letter-spacing: 0.03em;
        }

        .candles {
            position: absolute;
            left: 50%;
            bottom: 230px;
            transform: translateX(-50%);
            display: flex;
            gap: 14px;
            z-index: 5;
        }

        .candle {
            position: relative;
            width: 10px;
            height: 50px;
            border-radius: 6px;
            background: repeating-linear-gradient(90deg, #ffd6e0 0 4px, #ff8fb1 4px 8px);
            box-shadow: inset 0 -4px 6px rgba(0,0,0,0.12);
            border: 1px solid rgba(190, 110, 130, 0.35);
        }

        .candle::before {
            content: "";
            position: absolute;
            top: -10px;
            left: 50%;
            width: 2px;
            height: 10px;
            transform: translateX(-50%);
            background: #5b3a2e;
        }

        .flame {
            position: absolute;
            top: -30px;
            left: 50%;
            width: 16px;
            height: 24px;
            transform: translateX(-50%);
            background:
                radial-gradient(circle at 45% 40%, rgba(255,255,255,0.95), rgba(255,205,120,0.8) 50%, rgba(255,120,60,0.2) 72%);
            border-radius: 50% 50% 45% 45%;
            filter: drop-shadow(0 0 8px rgba(255,170,80,0.7));
            animation: flameFlicker 1.4s infinite;
        }

        .smoke {
            position: absolute;
            top: -30px;
            left: 50%;
            width: 14px;
            height: 24px;
            transform: translateX(-50%);
            opacity: 0;
            background: radial-gradient(circle at 50% 35%, rgba(220,220,220,0.65), rgba(220,220,220,0));
            filter: blur(1px);
        }

        .cake-prompt {
            font-size: 0.9rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.75);
        }

        @media (max-width: 640px) {
            .cake-stage {
                width: min(640px, 96vw);
                height: min(600px, 84vh);
            }

            .cake {
                transform: scale(1.04);
            }

            .cake-topper {
                bottom: 222px;
            }

            .topper-text {
                font-size: 1.65rem;
                padding: 6px 14px 7px;
            }

            .age-badge {
                bottom: 176px;
                min-width: 56px;
                height: 32px;
                font-size: 1.3rem;
            }
        }

        #cake-overlay.blown .firework {
            animation: fireworkBurst 1200ms ease-out forwards;
        }

        #cake-overlay.blown .firework.f1 {
            animation-delay: 480ms;
        }

        #cake-overlay.blown .firework.f2 {
            animation-delay: 600ms;
        }

        #cake-overlay.blown .firework.f3 {
            animation-delay: 720ms;
        }

        #cake-overlay.blown .firework.f4 {
            animation-delay: 840ms;
        }

        #cake-overlay.blown .firework.f5 {
            animation-delay: 960ms;
        }

        #cake-overlay.blown .firework-projectile {
            animation: fireworkProjectile 520ms cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
        }

        #cake-overlay.blown .firework-projectile.p2 {
            animation-delay: 120ms;
        }

        #cake-overlay.blown .firework-projectile.p3 {
            animation-delay: 240ms;
        }

        #cake-overlay.blown .firework-projectile.p4 {
            animation-delay: 360ms;
        }

        #cake-overlay.blown .firework-projectile.p5 {
            animation-delay: 480ms;
        }

        #cake-overlay.blown .flame {
            opacity: 0;
            transform: translateX(-50%) translateY(8px) scale(0.2);
            transition: opacity 200ms ease, transform 300ms ease;
        }

        #cake-overlay.blown .smoke {
            opacity: 1;
            animation: smokeRise 1.6s ease-out forwards;
        }

        #cake-overlay.blown .cake-prompt {
            color: rgba(255, 255, 255, 0.9);
        }

        @keyframes flameFlicker {
            0% { transform: translateX(-50%) scale(1) rotate(0deg); }
            40% { transform: translateX(-50%) scale(0.92) rotate(-2deg); }
            70% { transform: translateX(-50%) scale(1.05) rotate(2deg); }
            100% { transform: translateX(-50%) scale(1) rotate(0deg); }
        }

        @keyframes smokeRise {
            0% { opacity: 0; transform: translateX(-50%) translateY(0); }
            30% { opacity: 0.6; }
            100% { opacity: 0; transform: translateX(-50%) translateY(-34px); }
        }

        @keyframes fireworkProjectile {
            0% {
                opacity: 0;
                transform: translate(-50%, 95px) scaleY(0.2);
            }
            10% {
                opacity: 1;
            }
            75% {
                opacity: 1;
                transform: translate(-50%, -210px) scaleY(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -248px) scaleY(1.05);
            }
        }

        @keyframes fireworkBurst {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
            15% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
            45% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
        }

        #end-screen {
            position: fixed;
            inset: 0;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 900ms ease;
            z-index: 400;
        }

        #end-screen.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .end-text {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.4rem, 4vw, 2.6rem);
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.85);
        }

        .chapter-end-content { text-align: center; }
        .chapter-end-content .end-text { margin-bottom: 28px; }
        .chapter-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
        .chapter-action {
            border: 1px solid rgba(255, 236, 198, 0.52);
            border-radius: 999px;
            padding: 11px 18px;
            color: rgba(255, 248, 235, 0.9);
            font-family: 'Playfair Display', serif;
            font-size: 0.7rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.06);
            cursor: pointer;
            transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
        }
        .chapter-action:hover, .chapter-action:focus-visible { transform: translateY(-2px); border-color: rgba(255, 226, 170, 0.92); background: rgba(255, 214, 155, 0.14); outline: none; }


        .letter-text::-webkit-scrollbar {
            width: 8px;
        }

        .letter-text::-webkit-scrollbar-thumb {
            background: rgba(140, 90, 50, 0.35);
            border-radius: 8px;
        }

        .letter-text::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.2);
        }

        @media (max-width: 640px) {
            .letter-paper {
                padding: 18px;
            }

            .letter-text {
                font-size: 0.95rem;
                line-height: 1.6;
            }

            .letter-gift-card {
                margin-top: 14px;
                padding-top: 12px;
            }

            .letter-gift-card .gift-ps {
                font-size: 0.75rem;
                margin-bottom: 8px;
            }

            .letter-gift-card .gift-card-img {
                width: min(200px, 58vw);
                border-radius: 10px;
                box-shadow:
                    0 10px 24px rgba(0,0,0,0.18),
                    inset 0 0 0 1px rgba(120, 80, 40, 0.12);
            }
        }

        @keyframes caretBlink {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }

        .title-text {
            font-family: 'Dancing Script', cursive;
            color: #ffffff;
            text-shadow: 0 0 10px rgba(255, 20, 147, 0.9), 0 0 20px rgba(255, 105, 180, 0.8);
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1.5s ease-out, transform 1.5s ease-out;
        }

        .title-text.visible {
            opacity: 1;
            transform: translateY(0);
            animation: textFloat 6s ease-in-out infinite alternate;
        }

        .birthday-word {
            display: inline-block;
            margin-left: 0.08em;
        }

        .birthday-b {
            display: inline-block;
            transform: translateY(-0.03em);
            font-size: 0.98em;
        }

        @keyframes textFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-15px); }
        }

        /* ---------- Start Screen: Luxury 3D Gift Box ---------- */
        #start-screen {
            position: absolute;
            inset: 0;
            z-index: 200;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
            transition: opacity 1s ease;
            overflow: hidden;
            --px: 0;
            --py: 0;
            background:
                /* spotlight */
                radial-gradient(900px 680px at 50% 38%, rgba(255, 209, 230, 0.16), rgba(0,0,0,0) 62%),
                radial-gradient(1200px 900px at 50% 35%, rgba(255, 189, 214, 0.10), rgba(0,0,0,0) 60%),
                radial-gradient(900px 700px at 70% 65%, rgba(255, 71, 126, 0.10), rgba(0,0,0,0) 62%),
                linear-gradient(180deg, #071027, #020207 70%, #000);
        }

        /* Fullscreen overlay layers for effects */
        #confetti-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 50;
            contain: layout style paint;
            will-change: transform;
        }

        #dust-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 15;
        }

        /* Fullscreen velvet fill used during zoom-in */
        #zoom-fill {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0;
            pointer-events: none;
            background:
                radial-gradient(800px 600px at 50% 45%, rgba(255, 215, 0, 0.12), rgba(0,0,0,0) 60%),
                radial-gradient(900px 700px at 60% 55%, rgba(255, 105, 180, 0.10), rgba(0,0,0,0) 60%),
                radial-gradient(2px 2px at 30% 35%, rgba(255,255,255,0.12) 0 40%, rgba(255,255,255,0) 41%),
                radial-gradient(2px 2px at 70% 55%, rgba(255,255,255,0.10) 0 40%, rgba(255,255,255,0) 41%),
                radial-gradient(2px 2px at 50% 70%, rgba(255,255,255,0.08) 0 40%, rgba(255,255,255,0) 41%),
                radial-gradient(1200px 900px at 50% 50%, var(--velvet1), var(--velvet0));
            filter: saturate(1.1) contrast(1.05);
        }

        #color-wash {
            position: absolute;
            inset: -12%;
            pointer-events: none;
            z-index: 1;
            opacity: 0.4;
            background:
                radial-gradient(900px 600px at 25% 35%, rgba(255, 200, 170, 0.28), rgba(0,0,0,0) 60%),
                radial-gradient(1000px 700px at 70% 55%, rgba(255, 140, 210, 0.22), rgba(0,0,0,0) 62%),
                radial-gradient(1200px 900px at 50% 50%, rgba(120, 90, 255, 0.18), rgba(0,0,0,0) 65%);
            filter: saturate(1.1);
            animation: washShift 24s ease-in-out infinite;
            transform: translate3d(calc(var(--px) * 5px), calc(var(--py) * 4px), 0);
            transition: transform 260ms ease-out;
        }

        @keyframes washShift {
            0% { filter: saturate(1.05) hue-rotate(0deg); opacity: 0.35; }
            50% { filter: saturate(1.2) hue-rotate(12deg); opacity: 0.55; }
            100% { filter: saturate(1.05) hue-rotate(0deg); opacity: 0.35; }
        }

        #starfield {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            opacity: 0.25;
            background-image:
                radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.6), rgba(0,0,0,0)),
                radial-gradient(1.2px 1.2px at 120px 80px, rgba(255,255,255,0.55), rgba(0,0,0,0)),
                radial-gradient(1px 1px at 60px 140px, rgba(255,255,255,0.45), rgba(0,0,0,0)),
                radial-gradient(1.4px 1.4px at 200px 20px, rgba(255,255,255,0.5), rgba(0,0,0,0));
            background-size: 240px 240px, 280px 280px, 320px 320px, 360px 360px;
            animation: starDrift 40s linear infinite;
            transform: translate3d(calc(var(--px) * 4px), calc(var(--py) * 3px), 0);
            transition: transform 260ms ease-out;
        }

        @keyframes starDrift {
            0% { background-position: 0 0, 0 0, 0 0, 0 0; }
            100% { background-position: 240px 160px, -280px 220px, 320px -180px, -360px -240px; }
        }

        #mist-layer {
            position: absolute;
            inset: -14%;
            pointer-events: none;
            z-index: 4;
            opacity: 0.35;
            background:
                radial-gradient(600px 420px at 20% 70%, rgba(255, 240, 230, 0.30), rgba(0,0,0,0) 70%),
                radial-gradient(700px 520px at 80% 30%, rgba(255, 210, 220, 0.24), rgba(0,0,0,0) 70%),
                radial-gradient(900px 700px at 50% 50%, rgba(120, 120, 200, 0.18), rgba(0,0,0,0) 70%);
            filter: blur(14px);
            mix-blend-mode: screen;
            animation: mistFlow 30s ease-in-out infinite;
            transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 0);
            transition: transform 260ms ease-out;
        }

        @keyframes mistFlow {
            0% { opacity: 0.25; transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 0) scale(1); }
            50% { opacity: 0.5; transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 8px), 0) scale(1.04); }
            100% { opacity: 0.25; transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 0) scale(1); }
        }

        #bokeh-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 2;
            opacity: 0.55;
            transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0);
            transition: transform 240ms ease-out;
        }

        .bokeh {
            position: absolute;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(255,255,255,0) 62%);
            mix-blend-mode: screen;
            filter: blur(6px);
            opacity: 0.4;
            animation: bokehFloat var(--dur, 16s) ease-in-out infinite;
        }

        .bokeh.b1 { width: 220px; height: 220px; left: 8%; top: 12%; --dur: 18s; opacity: 0.35; }
        .bokeh.b2 { width: 160px; height: 160px; right: 10%; top: 8%; --dur: 20s; opacity: 0.3; }
        .bokeh.b3 { width: 280px; height: 280px; left: 6%; bottom: 10%; --dur: 22s; opacity: 0.32; }
        .bokeh.b4 { width: 180px; height: 180px; right: 18%; bottom: 16%; --dur: 19s; opacity: 0.28; }
        .bokeh.b5 { width: 120px; height: 120px; left: 42%; top: 6%; --dur: 17s; opacity: 0.25; }
        .bokeh.b6 { width: 200px; height: 200px; right: 38%; bottom: 4%; --dur: 21s; opacity: 0.3; }

        @keyframes bokehFloat {
            0% { transform: translate3d(0, 0, 0) scale(1); }
            50% { transform: translate3d(14px, -10px, 0) scale(1.05); }
            100% { transform: translate3d(-10px, 12px, 0) scale(1); }
        }

        #cinematic-vignette,
        #light-sweep {
            position: absolute;
            inset: -12%;
            pointer-events: none;
            opacity: 0;
            z-index: 6;
        }

        #cinematic-vignette {
            background:
                radial-gradient(900px 620px at 50% 40%, rgba(255, 240, 225, 0.22), rgba(0,0,0,0) 60%),
                radial-gradient(1400px 900px at 50% 50%, rgba(0, 0, 0, 0.35), rgba(0,0,0,0) 58%),
                radial-gradient(1200px 900px at 50% 55%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
            mix-blend-mode: multiply;
            transition: opacity 900ms ease;
            transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 4px), 0);
            will-change: transform;
        }

        #film-grain {
            position: absolute;
            inset: -20%;
            pointer-events: none;
            z-index: 18;
            opacity: 0.06;
            mix-blend-mode: soft-light;
            background-image:
                radial-gradient(rgba(255,255,255,0.16) 0.5px, rgba(0,0,0,0) 0.6px),
                radial-gradient(rgba(0,0,0,0.22) 0.6px, rgba(0,0,0,0) 0.8px);
            background-size: 3px 3px, 4px 4px;
            animation: grainShift 0.9s steps(2) infinite;
        }

        @keyframes grainShift {
            0% { transform: translate3d(0, 0, 0); }
            50% { transform: translate3d(-4%, 3%, 0); }
            100% { transform: translate3d(3%, -2%, 0); }
        }

        #flare-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 12;
            opacity: 0;
            mix-blend-mode: screen;
        }

        #flare-layer .flare {
            position: absolute;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(255,255,255,0.15) 45%, rgba(255,255,255,0) 70%);
            filter: blur(1px);
            opacity: 0;
        }

        #flare-layer .flare.f1 { width: 220px; height: 220px; left: 42%; top: 36%; }
        #flare-layer .flare.f2 { width: 120px; height: 120px; left: 58%; top: 44%; }
        #flare-layer .flare.f3 { width: 300px; height: 300px; left: 30%; top: 30%; }

        #flare-layer .flare::after {
            content: "";
            position: absolute;
            inset: -40%;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(255, 210, 140, 0.35), rgba(255,255,255,0) 70%);
            opacity: 0.6;
        }

        @keyframes flarePulse {
            0% { transform: scale(0.7); opacity: 0; filter: blur(2px); }
            30% { transform: scale(1.05); opacity: 0.9; filter: blur(0.5px); }
            100% { transform: scale(1.25); opacity: 0; filter: blur(3px); }
        }

        #start-screen.cinematic #cinematic-vignette {
            opacity: 0.9;
        }

        #start-screen.cinematic #color-wash {
            opacity: 0.7;
        }

        #start-screen.cinematic #starfield {
            opacity: 0.35;
        }

        #start-screen.cinematic #mist-layer {
            opacity: 0.45;
        }

        #start-screen.cinematic #bokeh-layer {
            opacity: 0.8;
        }

        #start-screen.cinematic #film-grain {
            opacity: 0.1;
        }

        #start-screen.opening-boost #color-wash {
            opacity: 0.9;
        }

        #start-screen.opening-boost #mist-layer {
            opacity: 0.7;
        }

        #start-screen.opening-flare #flare-layer {
            opacity: 1;
        }

        #start-screen.opening-flare #flare-layer .flare {
            animation: flarePulse 1.8s ease-out forwards;
        }

        #start-screen.opening-flare #flare-layer .flare.f2 {
            animation-delay: 0.15s;
        }

        #start-screen.opening-flare #flare-layer .flare.f3 {
            animation-delay: 0.3s;
        }

        #start-screen.cinematic .gift-stage {
            border-color: rgba(255,255,255,0.12);
            box-shadow:
                0 46px 140px rgba(0,0,0,0.68),
                inset 0 1px 0 rgba(255,255,255,0.12);
        }

        #start-screen.zooming #zoom-fill {
            animation: zoomFillIn 1400ms 900ms cubic-bezier(.22, 1, .36, 1) forwards;
        }

        @keyframes zoomFillIn {
            0% { opacity: 0; transform: scale(0.96); }
            60% { opacity: 1; transform: scale(1); }
            100% { opacity: 1; transform: scale(1.02); }
        }

        .gift-stage {
            position: relative;
            width: min(560px, 92vw);
            padding: 44px 26px 34px;
            border-radius: 26px;
            border: 1px solid rgba(255,255,255,0.08);
            background:
                radial-gradient(900px 520px at 50% 18%, rgba(255,255,255,0.08), rgba(0,0,0,0) 65%),
                radial-gradient(420px 220px at 50% 95%, rgba(255, 215, 0, 0.10), rgba(0,0,0,0) 65%),
                linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
            box-shadow:
                0 38px 110px rgba(0,0,0,0.62),
                inset 0 1px 0 rgba(255,255,255,0.08);
            backdrop-filter: blur(6px) saturate(1.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            overflow: hidden;
            z-index: 10;
        }

        .gift-stage .gift-halo {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 430px;
            height: 260px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background:
                radial-gradient(circle, rgba(255, 220, 180, 0.40), rgba(255, 220, 180, 0.08) 45%, rgba(0,0,0,0) 70%);
            filter: blur(18px);
            opacity: 0.7;
            animation: haloPulse 5.6s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        #glint-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        .glint {
            position: absolute;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
            transform: rotate(45deg);
            opacity: 0.45;
            filter: blur(0.4px);
            animation: glintTwinkle 4.8s ease-in-out infinite;
        }

        .glint.g1 { left: 18%; top: 24%; animation-delay: -1s; }
        .glint.g2 { right: 22%; top: 18%; animation-delay: -2.4s; }
        .glint.g3 { left: 30%; bottom: 20%; animation-delay: -3s; }
        .glint.g4 { right: 28%; bottom: 24%; animation-delay: -1.6s; }
        .glint.g5 { left: 52%; top: 10%; animation-delay: -2.1s; }

        @keyframes glintTwinkle {
            0% { transform: scale(0.7) rotate(45deg); opacity: 0.2; }
            40% { transform: scale(1) rotate(45deg); opacity: 0.7; }
            100% { transform: scale(0.7) rotate(45deg); opacity: 0.2; }
        }

        .gift-stage .stage-content {
            position: relative;
            z-index: 2;
        }

        @keyframes haloPulse {
            0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
            50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.02); }
            100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
        }

        #start-screen.zooming .gift-stage {
            animation: stageGhost 1300ms 900ms cubic-bezier(.22, 1, .36, 1) forwards;
        }

        @keyframes stageGhost {
            0% { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border-color: rgba(255,255,255,0.10); box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
            100% { background: rgba(0,0,0,0); border-color: rgba(255,255,255,0.0); box-shadow: 0 0 0 rgba(0,0,0,0); }
        }

        .gift-stage::before {
            content: "";
            position: absolute;
            inset: -140px;
            background:
                radial-gradient(circle at 45% 34%, rgba(255,255,255,0.12), rgba(0,0,0,0) 58%),
                radial-gradient(circle at 55% 62%, rgba(255,105,180,0.10), rgba(0,0,0,0) 60%),
                radial-gradient(circle at 50% 50%, rgba(255,215,0,0.06), rgba(0,0,0,0) 62%);
            pointer-events: none;
        }

        /* (confetti-layer is fullscreen; defined above near #start-screen) */

        /* Magic Dust particles */
        .dust {
            position: absolute;
            left: 50%;
            top: 46%;
            width: calc(var(--s, 2) * 1px);
            height: calc(var(--s, 2) * 1px);
            border-radius: 999px;
            background: radial-gradient(circle, rgba(255, 248, 214, 0.95), rgba(255, 248, 214, 0) 72%);
            box-shadow:
                0 0 10px rgba(255, 215, 0, 0.30),
                0 0 26px rgba(255, 215, 0, 0.16);
            mix-blend-mode: screen;
            opacity: 0.65;
            transform: translate3d(calc(var(--ox, 0) * 1px), calc(var(--oy, 0) * 1px), 0);
            will-change: transform, opacity, filter;
            animation:
                dustDrift var(--dur, 6s) ease-in-out infinite alternate,
                dustFlicker var(--tw, 3.6s) ease-in-out infinite;
        }

        @keyframes dustDrift {
            0% {
                transform: translate3d(calc(var(--ox, 0) * 1px - 14px), calc(var(--oy, 0) * 1px - 10px), 0);
            }
            100% {
                transform: translate3d(calc(var(--ox, 0) * 1px + 12px), calc(var(--oy, 0) * 1px + 14px), 0);
            }
        }

        @keyframes dustFlicker {
            0%, 100% { opacity: 0.12; filter: blur(0.55px) brightness(0.95); }
            35% { opacity: 0.85; filter: blur(0.15px) brightness(1.12); }
            70% { opacity: 0.40; filter: blur(0.40px) brightness(1.02); }
        }

        /* Fade helpers for the transition */
        #start-screen.opened #dust-layer {
            opacity: 0;
            transition: opacity 1100ms ease;
        }

        #start-screen.opened .gift-stage {
            opacity: 0;
            transform: translateY(10px) scale(0.98);
            filter: blur(1.5px);
            transition: opacity 1100ms ease, transform 1100ms ease, filter 1100ms ease;
        }

        .gift3d {
            position: relative;
            width: 250px;
            height: 240px;
            transform-style: preserve-3d;
            perspective: 980px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            z-index: 10;
        }

        /* Ambient glow + blurred “floor shadow” beneath the gift (breathes with float) */
        .ambient-glow {
            position: absolute;
            left: 50%;
            bottom: 24px;
            width: 310px;
            height: 118px;
            transform: translateX(-50%) translateZ(-120px);
            border-radius: 999px;
            background:
                /* dark floor shadow core */
                radial-gradient(closest-side, rgba(0,0,0,0.62), rgba(0,0,0,0) 70%),
                /* pink aura */
                radial-gradient(closest-side, rgba(255, 71, 126, 0.44), rgba(255, 71, 126, 0.14) 55%, rgba(0,0,0,0) 76%),
                radial-gradient(closest-side, rgba(255, 182, 193, 0.18), rgba(0,0,0,0) 72%);
            filter: blur(10px);
            opacity: 0.60;
            mix-blend-mode: screen;
            pointer-events: none;
            animation: underGlow 2.8s ease-in-out infinite;
        }

        @keyframes underGlow {
            0% { opacity: 0.48; transform: translateX(-50%) translateZ(-120px) scale(0.94); }
            50% { opacity: 0.72; transform: translateX(-50%) translateZ(-120px) scale(1.05); }
            100% { opacity: 0.48; transform: translateX(-50%) translateZ(-120px) scale(0.94); }
        }

        .gift3d:focus-visible {
            outline: 3px solid rgba(255, 105, 180, 0.85);
            outline-offset: 10px;
            border-radius: 18px;
        }

        .gift3d .gift3d-group {
            position: absolute;
            inset: 0;
            transform-style: preserve-3d;
            transform: translateZ(0) rotateX(16deg) rotateY(-26deg);
            filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
            will-change: transform, filter;
            animation: giftFloat 2.8s ease-in-out infinite;
        }

        .gift3d.ready .gift3d-group {
            filter:
                drop-shadow(0 18px 40px rgba(0,0,0,0.55))
                drop-shadow(0 0 26px rgba(255, 105, 180, 0.25));
        }

        @keyframes giftFloat {
            0% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg); }
            50% { transform: translateY(-10px) translateZ(0) rotateX(16deg) rotateY(-26deg); }
            100% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg); }
        }

        .gift3d.wobble .gift3d-group {
            animation: giftFloat 2.8s ease-in-out infinite, giftWobble 420ms ease-in-out;
        }

        @keyframes giftWobble {
            0% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(0deg); }
            20% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(-4deg); }
            40% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(4deg); }
            65% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(-2deg); }
            100% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(0deg); }
        }

        .gift3d:hover .gift3d-group,
        .gift3d.hovering .gift3d-group {
            filter:
                drop-shadow(0 18px 45px rgba(0,0,0,0.65))
                drop-shadow(0 0 38px rgba(255, 105, 180, 0.38))
                drop-shadow(0 0 18px rgba(255, 215, 0, 0.22));
            animation: giftFloat 2.8s ease-in-out infinite, giftHoverShake 700ms ease-in-out infinite;
        }

        .gift3d:hover .ambient-glow,
        .gift3d.hovering .ambient-glow {
            opacity: 0.78;
            filter: blur(7px) saturate(1.1);
        }

        @keyframes giftHoverShake {
            0% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(0deg); }
            25% { transform: translateY(-2px) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(-2deg); }
            50% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(2deg); }
            75% { transform: translateY(-1px) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(-1deg); }
            100% { transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) rotateZ(0deg); }
        }

        .cube {
            position: absolute;
            left: 50%;
            transform-style: preserve-3d;
            transform: translateX(-50%);
        }

        .cube .face {
            position: absolute;
            backface-visibility: hidden;
            transform-style: preserve-3d;
            border-radius: 12px;
            /* beveled cardboard edge */
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.10),
                inset 0 1px 0 rgba(255,255,255,0.22),
                inset 0 -1px 0 rgba(0,0,0,0.28),
                inset 1px 0 0 rgba(255,255,255,0.10),
                inset -1px 0 0 rgba(0,0,0,0.18);
        }

        /* face lighting overlay (per-face tuned via CSS vars) */
        .cube .face::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background:
                linear-gradient(180deg,
                    rgba(255,255,255,var(--hl, 0.18)) 0%,
                    rgba(255,255,255,0) 38%,
                    rgba(0,0,0,var(--sh, 0.22)) 100%
                ),
                radial-gradient(140px 100px at 30% 30%, rgba(255,255,255, var(--spec, 0.10)), rgba(255,255,255,0) 62%);
            mix-blend-mode: overlay;
            opacity: 0.9;
        }

        /* lighting tuning: make top lighter, sides shaded */
        .gift3d-base .face.top,
        .gift3d-lid .face.top { --hl: 0.28; --sh: 0.16; --spec: 0.18; }

        .gift3d-base .face.front { --hl: 0.22; --sh: 0.18; --spec: 0.14; }
        .gift3d-base .face.left  { --hl: 0.18; --sh: 0.24; --spec: 0.12; }
        .gift3d-base .face.right { --hl: 0.14; --sh: 0.30; --spec: 0.10; }
        .gift3d-base .face.back  { --hl: 0.16; --sh: 0.28; --spec: 0.10; }

        .gift3d-lid .face.front { --hl: 0.26; --sh: 0.16; --spec: 0.16; }
        .gift3d-lid .face.left  { --hl: 0.18; --sh: 0.24; --spec: 0.12; }
        .gift3d-lid .face.right { --hl: 0.14; --sh: 0.30; --spec: 0.10; }
        .gift3d-lid .face.back  { --hl: 0.18; --sh: 0.26; --spec: 0.10; }

        /* Base */
        .gift3d-base {
            --w: 204px;
            --h: 126px;
            --d: 170px;
            width: var(--w);
            height: var(--h);
            top: 96px;
        }

        .gift3d-base .face.front,
        .gift3d-base .face.back {
            width: var(--w);
            height: var(--h);
        }
        .gift3d-base .face.left,
        .gift3d-base .face.right {
            width: var(--d);
            height: var(--h);
        }
        .gift3d-base .face.top,
        .gift3d-base .face.bottom {
            width: var(--w);
            height: var(--d);
        }

        .gift3d-base .face.front { transform: translateZ(calc(var(--d) / 2)); }
        .gift3d-base .face.back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
        .gift3d-base .face.right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
        .gift3d-base .face.left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
        .gift3d-base .face.top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
        .gift3d-base .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

        /* Lid */
        .gift3d-lid {
            --w: 220px;
            --h: 58px;
            --d: 186px;
            width: var(--w);
            height: var(--h);
            top: 44px;
            transform-origin: 50% 100%;
            transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
            will-change: transform, opacity;
        }

        /* subtle contact shadow where lid sits on base */
        .gift3d-lid::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 100%;
            width: calc(var(--w) - 26px);
            height: 18px;
            transform: translateX(-50%) translateZ(40px);
            background:
                radial-gradient(closest-side, rgba(0,0,0,0.52), rgba(0,0,0,0)),
                linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
            filter: blur(7px);
            opacity: 0.42;
            pointer-events: none;
        }

        .gift3d:hover:not(.opening) .gift3d-lid::after,
        .gift3d.peeking:not(.opening) .gift3d-lid::after {
            opacity: 0.14;
        }

        .gift3d-base,
        .gift3d-lid {
            transform-style: preserve-3d;
        }

        .gift3d.slamming .gift3d-lid {
            transition-duration: 120ms;
            transition-timing-function: cubic-bezier(.45, 0, .75, 1);
        }

        .gift3d-lid .face.front,
        .gift3d-lid .face.back {
            width: var(--w);
            height: var(--h);
        }
        .gift3d-lid .face.left,
        .gift3d-lid .face.right {
            width: var(--d);
            height: var(--h);
        }
        .gift3d-lid .face.top,
        .gift3d-lid .face.bottom {
            width: var(--w);
            height: var(--d);
        }

        .gift3d-lid .face.front { transform: translateZ(calc(var(--d) / 2)); }
        .gift3d-lid .face.back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
        .gift3d-lid .face.right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
        .gift3d-lid .face.left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
        .gift3d-lid .face.top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
        .gift3d-lid .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

        /* Materials (premium pink cardboard + ribbon insets) */
        .gift3d-base .face.front {
            background:
                /* ribbon insets */
                linear-gradient(90deg, rgba(255,215,0,0) 0 44%, rgba(255,215,0,0.85) 44% 56%, rgba(255,215,0,0) 56% 100%),
                linear-gradient(180deg, rgba(255,215,0,0) 0 48%, rgba(255,215,0,0.75) 48% 56%, rgba(255,215,0,0) 56% 100%),
                /* subtle vignette + spec band */
                radial-gradient(220px 140px at 40% 20%, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%),
                radial-gradient(260px 200px at 50% 120%, rgba(0,0,0,0.22), rgba(0,0,0,0) 55%),
                linear-gradient(180deg, #ff6a97, #ff2b6d);
        }
        .gift3d-base .face.right {
            background:
                linear-gradient(90deg, rgba(255,215,0,0) 0 44%, rgba(255,215,0,0.85) 44% 56%, rgba(255,215,0,0) 56% 100%),
                radial-gradient(220px 150px at 35% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 62%),
                radial-gradient(260px 200px at 60% 120%, rgba(0,0,0,0.28), rgba(0,0,0,0) 56%),
                linear-gradient(180deg, #ff4f88, #ff2062);
        }
        .gift3d-base .face.left {
            background:
                linear-gradient(90deg, rgba(255,215,0,0) 0 44%, rgba(255,215,0,0.85) 44% 56%, rgba(255,215,0,0) 56% 100%),
                radial-gradient(220px 150px at 35% 20%, rgba(255,255,255,0.16), rgba(255,255,255,0) 62%),
                radial-gradient(260px 200px at 60% 120%, rgba(0,0,0,0.32), rgba(0,0,0,0) 56%),
                linear-gradient(180deg, #ff3f7c, #ff165a);
        }
        .gift3d-base .face.back {
            background:
                linear-gradient(90deg, rgba(255,215,0,0) 0 44%, rgba(255,215,0,0.85) 44% 56%, rgba(255,215,0,0) 56% 100%),
                linear-gradient(180deg, rgba(255,215,0,0) 0 48%, rgba(255,215,0,0.75) 48% 56%, rgba(255,215,0,0) 56% 100%),
                radial-gradient(260px 200px at 50% 120%, rgba(0,0,0,0.26), rgba(0,0,0,0) 56%),
                linear-gradient(180deg, #ff4f88, #ff2466);
        }

        /* Open rim on top so you can peek inside */
        .gift3d-base .face.top {
            border-radius: 14px;
            background:
                /* inner rim highlight */
                radial-gradient(circle at 50% 56%, rgba(0,0,0,0) 0 55%, rgba(255,255,255,0.22) 56% 61%, rgba(0,0,0,0.0) 62% 100%),
                /* rim edge darkening for thickness */
                radial-gradient(circle at 50% 55%, rgba(0,0,0,0) 0 56%, rgba(0,0,0,0.22) 57% 66%, rgba(255,105,180,0.16) 67% 100%),
                linear-gradient(90deg, rgba(255,215,0,0) 0 46%, rgba(255,215,0,0.85) 46% 54%, rgba(255,215,0,0) 54% 100%),
                linear-gradient(180deg, rgba(255,215,0,0) 0 46%, rgba(255,215,0,0.78) 46% 54%, rgba(255,215,0,0) 54% 100%),
                radial-gradient(180px 130px at 30% 38%, rgba(255,255,255,0.28), rgba(255,255,255,0) 64%),
                radial-gradient(260px 200px at 55% 130%, rgba(0,0,0,0.32), rgba(0,0,0,0) 56%),
                linear-gradient(180deg, #ff82ae, #ff3b7b);
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.12),
                inset 0 14px 26px rgba(0,0,0,0.22),
                0 8px 18px rgba(0,0,0,0.25);
        }

        .gift3d-base .face.bottom {
            background: linear-gradient(180deg, #d21b53, #8f0b35);
            opacity: 0.95;
        }

        .gift3d-lid .face.front {
            background:
                linear-gradient(90deg, rgba(255,215,0,0) 0 46%, rgba(255,215,0,0.90) 46% 54%, rgba(255,215,0,0) 54% 100%),
                radial-gradient(180px 120px at 35% 25%, rgba(255,255,255,0.30), rgba(255,255,255,0) 62%),
                radial-gradient(260px 200px at 60% 130%, rgba(0,0,0,0.24), rgba(0,0,0,0) 56%),
                linear-gradient(180deg, #ff97bb, #ff3f7d);
        }
        .gift3d-lid .face.right {
            background:
                linear-gradient(90deg, rgba(255,215,0,0) 0 46%, rgba(255,215,0,0.90) 46% 54%, rgba(255,215,0,0) 54% 100%),
                radial-gradient(260px 200px at 60% 130%, rgba(0,0,0,0.26), rgba(0,0,0,0) 56%),
                linear-gradient(180deg, #ff86b1, #ff2d6f);
        }
        .gift3d-lid .face.left {
            background:
                linear-gradient(90deg, rgba(255,215,0,0) 0 46%, rgba(255,215,0,0.90) 46% 54%, rgba(255,215,0,0) 54% 100%),
                radial-gradient(260px 200px at 60% 130%, rgba(0,0,0,0.30), rgba(0,0,0,0) 56%),
                linear-gradient(180deg, #ff79a5, #ff286a);
        }
        .gift3d-lid .face.back {
            background:
                linear-gradient(90deg, rgba(255,215,0,0) 0 46%, rgba(255,215,0,0.90) 46% 54%, rgba(255,215,0,0) 54% 100%),
                radial-gradient(260px 200px at 60% 130%, rgba(0,0,0,0.26), rgba(0,0,0,0) 56%),
                linear-gradient(180deg, #ff86b1, #ff2d6f);
        }
        .gift3d-lid .face.top {
            border-radius: 16px;
            background:
                /* corner bloom + satin-like spec */
                radial-gradient(220px 150px at 30% 30%, rgba(255,255,255,0.38), rgba(255,255,255,0) 66%),
                radial-gradient(260px 200px at 60% 130%, rgba(0,0,0,0.26), rgba(0,0,0,0) 56%),
                /* ribbon stripes */
                linear-gradient(90deg, rgba(255,215,0,0) 0 47%, rgba(255,215,0,0.90) 47% 53%, rgba(255,215,0,0) 53% 100%),
                linear-gradient(180deg, rgba(255,215,0,0) 0 47%, rgba(255,215,0,0.82) 47% 53%, rgba(255,215,0,0) 53% 100%),
                /* subtle highlight band */
                linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.22) 44%, rgba(255,255,255,0) 62%),
                linear-gradient(180deg, #ffb7d8, #ff4b89);
        }
        .gift3d-lid .face.bottom {
            background: linear-gradient(180deg, #c91a52, #7d072f);
            opacity: 0.96;
        }

        /* --- Interior: velvet + magical core (peek hint) --- */
        .interior-core {
            position: absolute;
            inset: 0;
            transform-style: preserve-3d;
            pointer-events: none;
        }

        .interior-floor {
            position: absolute;
            left: 0;
            top: -12px;
            width: var(--w);
            height: var(--d);
            transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 14px));
            border-radius: 12px;
            background:
                radial-gradient(160px 120px at 50% 40%, rgba(255,215,0,0.10), rgba(0,0,0,0) 65%),
                radial-gradient(2px 2px at 20% 35%, rgba(255,255,255,0.10) 0 40%, rgba(255,255,255,0) 41%),
                radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.08) 0 40%, rgba(255,255,255,0) 41%),
                radial-gradient(2px 2px at 45% 70%, rgba(255,255,255,0.06) 0 40%, rgba(255,255,255,0) 41%),
                radial-gradient(240px 160px at 50% 55%, var(--velvet2), var(--velvet0));
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.06),
                inset 0 22px 40px rgba(0,0,0,0.55);
            opacity: 0.95;
        }

        .inner-glow {
            position: absolute;
            left: 0;
            top: -12px;
            width: var(--w);
            height: var(--d);
            transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 12px));
            border-radius: 12px;
            background: radial-gradient(circle at 50% 45%, rgba(255,215,0,0.75), rgba(255,215,0,0.18) 35%, rgba(0,0,0,0) 70%);
            filter: blur(0.2px);
            opacity: 0.25;
            transition: opacity 260ms ease, filter 260ms ease;
        }

        .spill-light {
            position: absolute;
            left: 50%;
            top: 4px;
            width: 280px;
            height: 240px;
            transform: translateX(-50%) translateZ(128px);
            background: radial-gradient(circle at 50% 60%, rgba(255,215,0,0.50), rgba(255,215,0,0.10) 45%, rgba(0,0,0,0) 72%);
            filter: blur(12px);
            opacity: 0;
            transition: opacity 200ms ease, filter 200ms ease;
            mix-blend-mode: screen;
        }

        .magic-orb {
            position: absolute;
            left: 50%;
            top: 38px;
            width: 48px;
            height: 48px;
            transform: translateX(-50%) translateZ(60px);
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0) 35%),
                radial-gradient(circle at 50% 55%, rgba(255,215,0,0.95), rgba(255,215,0,0.15) 52%, rgba(0,0,0,0) 70%);
            box-shadow:
                0 0 30px rgba(255, 215, 0, 0.35),
                0 0 70px rgba(255, 215, 0, 0.20);
            filter: blur(0.2px);
            animation: coreFloat 2.6s ease-in-out infinite;
            opacity: 0.88;
        }

        .magic-heart {
            position: absolute;
            left: 50%;
            top: 34px;
            width: 22px;
            height: 22px;
            transform: translateX(-50%) translateZ(78px) rotate(45deg);
            background: linear-gradient(180deg, #ff9ac0, #ff3b7e);
            border-radius: 6px;
            box-shadow:
                0 0 18px rgba(255, 105, 180, 0.35),
                0 0 42px rgba(255, 215, 0, 0.18);
            animation: heartPulse 1.6s ease-in-out infinite;
            opacity: 0.9;
        }

        .magic-heart::before,
        .magic-heart::after {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            background: inherit;
            border-radius: 50%;
        }

        .magic-heart::before { left: -11px; top: 0; }
        .magic-heart::after { left: 0; top: -11px; }

        @keyframes coreFloat {
            0% { transform: translateX(-50%) translateZ(60px) translateY(0); }
            50% { transform: translateX(-50%) translateZ(60px) translateY(-8px); }
            100% { transform: translateX(-50%) translateZ(60px) translateY(0); }
        }

        @keyframes heartPulse {
            0% { transform: translateX(-50%) translateZ(78px) rotate(45deg) scale(0.95); filter: brightness(1); }
            50% { transform: translateX(-50%) translateZ(78px) rotate(45deg) scale(1.05); filter: brightness(1.15); }
            100% { transform: translateX(-50%) translateZ(78px) rotate(45deg) scale(0.95); filter: brightness(1); }
        }

        .gift3d.opening .magic-orb {
            animation: orbBloom 1400ms 200ms ease-out forwards;
        }

        .gift3d.opening .magic-heart {
            animation: heartBloom 1400ms 260ms ease-out forwards;
        }

        @keyframes orbBloom {
            0% { transform: translateX(-50%) translateZ(60px) translateY(0) scale(1); opacity: 0.9; filter: blur(0.2px) brightness(1); }
            45% { transform: translateX(-50%) translateZ(90px) translateY(-10px) scale(1.35); opacity: 1; filter: blur(0.4px) brightness(1.35); }
            100% { transform: translateX(-50%) translateZ(120px) translateY(-14px) scale(1.6); opacity: 0; filter: blur(1.2px) brightness(1.6); }
        }

        @keyframes heartBloom {
            0% { transform: translateX(-50%) translateZ(78px) rotate(45deg) scale(1); opacity: 0.9; filter: brightness(1); }
            45% { transform: translateX(-50%) translateZ(100px) rotate(45deg) scale(1.4); opacity: 1; filter: brightness(1.4); }
            100% { transform: translateX(-50%) translateZ(130px) rotate(45deg) scale(1.7); opacity: 0; filter: brightness(1.6); }
        }

        /* Peek: lid cracks open + interior glow spills */
        .gift3d:hover:not(.opening) .gift3d-lid,
        .gift3d.peeking:not(.opening) .gift3d-lid {
            transform: translateX(-50%) translateY(-3px) translateZ(18px) rotateX(-30deg);
        }

        .gift3d:hover:not(.opening) .inner-glow,
        .gift3d.peeking:not(.opening) .inner-glow {
            opacity: 0.78;
            filter: blur(0.1px);
        }

        .gift3d:hover:not(.opening) .spill-light,
        .gift3d.peeking:not(.opening) .spill-light {
            opacity: 0.88;
            filter: blur(14px);
        }

        /* Ribbon overlay (step 1 animates this off) */
        .ribbon-wrap {
            position: absolute;
            left: 50%;
            top: 44px;
            width: 230px;
            height: 180px;
            transform: translateX(-50%) translateZ(92px);
            pointer-events: none;
            z-index: 50;
            transform-style: preserve-3d;
            will-change: transform, opacity;
        }

        .ribbon-wrap * { pointer-events: none; }

        .ribbon-strap {
            position: absolute;
            left: 50%;
            top: 0;
            width: 22px;
            height: 100%;
            transform: translateX(-50%);
            border-radius: 14px;
            /* satin gold: high-contrast center shine */
            background:
                linear-gradient(90deg,
                    rgba(185, 126, 18, 0.95) 0%,
                    rgba(255, 211, 107, 0.95) 22%,
                    rgba(255, 248, 214, 0.98) 49%,
                    rgba(255, 211, 107, 0.95) 64%,
                    rgba(160, 105, 10, 0.95) 100%
                ),
                linear-gradient(180deg, rgba(255,255,255,0.30), rgba(0,0,0,0.18));
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.32),
                inset 0 10px 16px rgba(255,255,255,0.18),
                inset 0 -12px 18px rgba(0,0,0,0.18),
                0 10px 18px rgba(0,0,0,0.30);
            opacity: 0.96;
            background-size: 140% 100%, 100% 100%;
            animation: ribbonShimmer 2.8s ease-in-out infinite;
        }

        .ribbon-band {
            position: absolute;
            left: 0;
            top: 54%;
            width: 100%;
            height: 18px;
            transform: translateY(-50%);
            border-radius: 14px;
            background:
                linear-gradient(90deg,
                    rgba(185, 126, 18, 0.95) 0%,
                    rgba(255, 211, 107, 0.95) 22%,
                    rgba(255, 248, 214, 0.98) 49%,
                    rgba(255, 211, 107, 0.95) 64%,
                    rgba(160, 105, 10, 0.95) 100%
                ),
                linear-gradient(180deg, rgba(255,255,255,0.26), rgba(0,0,0,0.16));
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.30),
                inset 0 10px 16px rgba(255,255,255,0.14),
                inset 0 -12px 18px rgba(0,0,0,0.16),
                0 10px 18px rgba(0,0,0,0.28);
            opacity: 0.94;
            background-size: 140% 100%, 100% 100%;
            animation: ribbonShimmer 2.8s ease-in-out infinite;
        }

        @keyframes ribbonShimmer {
            0% { background-position: 0% 0%, 0% 0%; filter: saturate(1.05) brightness(1.02); }
            50% { background-position: 100% 0%, 0% 0%; filter: saturate(1.12) brightness(1.10); }
            100% { background-position: 0% 0%, 0% 0%; filter: saturate(1.05) brightness(1.02); }
        }

        .bow {
            position: absolute;
            left: 50%;
            top: -12px;
            width: 132px;
            height: 90px;
            transform: translateX(-50%);
            filter: drop-shadow(0 12px 20px rgba(0,0,0,0.38));
        }

        .bow .tail {
            position: absolute;
            top: 44px;
            width: 20px;
            height: 56px;
            border-radius: 10px 10px 16px 16px;
            background:
                linear-gradient(90deg,
                    rgba(185, 126, 18, 0.95) 0%,
                    rgba(255, 211, 107, 0.95) 22%,
                    rgba(255, 248, 214, 0.98) 49%,
                    rgba(255, 211, 107, 0.95) 64%,
                    rgba(160, 105, 10, 0.95) 100%
                ),
                linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.20));
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.28),
                inset 0 10px 14px rgba(255,255,255,0.18),
                inset 0 -12px 16px rgba(0,0,0,0.20);
            transform-origin: 50% 0%;
            animation: tailFlutter 2.2s ease-in-out infinite;
        }

        .bow .tail.left { left: 46px; transform: rotate(14deg); animation-delay: -0.6s; }
        .bow .tail.right { right: 46px; transform: rotate(-14deg); animation-delay: -1.1s; }

        .bow .tail::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -1px;
            width: 70%;
            height: 18px;
            transform: translateX(-50%) rotate(45deg);
            background: rgba(0,0,0,0.10);
            border-radius: 4px;
            opacity: 0.18;
        }

        @keyframes tailFlutter {
            0% { transform: rotate(var(--r, 12deg)) translateY(0px); }
            50% { transform: rotate(calc(var(--r, 12deg) * -1)) translateY(2px); }
            100% { transform: rotate(var(--r, 12deg)) translateY(0px); }
        }

        .bow .loop {
            position: absolute;
            top: 18px;
            width: 62px;
            height: 38px;
            border-radius: 22px;
            background:
                linear-gradient(90deg,
                    rgba(185, 126, 18, 0.95) 0%,
                    rgba(255, 211, 107, 0.95) 24%,
                    rgba(255, 248, 214, 0.98) 50%,
                    rgba(255, 211, 107, 0.95) 66%,
                    rgba(160, 105, 10, 0.95) 100%
                ),
                radial-gradient(42px 26px at 30% 35%, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%),
                linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.18));
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.30),
                inset 0 12px 14px rgba(255,255,255,0.18),
                inset 0 -14px 18px rgba(0,0,0,0.20);
            transform-origin: 70% 70%;
            animation: loopFlutter 1.8s ease-in-out infinite;
        }

        .bow .loop.left { left: 6px; transform: rotate(-18deg); animation-delay: -0.2s; }
        .bow .loop.right { right: 6px; transform: rotate(18deg); transform-origin: 30% 70%; animation-delay: -0.9s; }

        @keyframes loopFlutter {
            0% { filter: brightness(1); transform: rotate(var(--a, 18deg)) scale(1); }
            50% { filter: brightness(1.08); transform: rotate(calc(var(--a, 18deg) * -1)) scale(1.02); }
            100% { filter: brightness(1); transform: rotate(var(--a, 18deg)) scale(1); }
        }

        .bow .loop.left { --a: -18deg; }
        .bow .loop.right { --a: 18deg; }
        .bow .tail.left { --r: 12deg; }
        .bow .tail.right { --r: -12deg; }

        .bow .knot {
            position: absolute;
            left: 50%;
            top: 32px;
            width: 26px;
            height: 26px;
            transform: translateX(-50%);
            border-radius: 10px;
            background:
                linear-gradient(90deg,
                    rgba(185, 126, 18, 0.95) 0%,
                    rgba(255, 211, 107, 0.95) 26%,
                    rgba(255, 248, 214, 0.98) 52%,
                    rgba(255, 211, 107, 0.95) 68%,
                    rgba(160, 105, 10, 0.95) 100%
                ),
                linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.18));
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.34),
                inset 0 10px 12px rgba(255,255,255,0.18),
                inset 0 -12px 14px rgba(0,0,0,0.20);
        }

        .bow .knot::after {
            content: "";
            position: absolute;
            inset: 5px;
            border-radius: 8px;
            background: rgba(255,255,255,0.26);
        }

        /* Hanging handwritten tag */
        .gift-tag {
            position: absolute;
            right: -14px;
            top: 52px;
            width: 66px;
            height: 42px;
            transform: rotate(-10deg);
            background:
                radial-gradient(2px 2px at 18% 28%, rgba(0,0,0,0.06) 0 35%, rgba(0,0,0,0) 36%),
                radial-gradient(2px 2px at 56% 62%, rgba(0,0,0,0.05) 0 35%, rgba(0,0,0,0) 36%),
                radial-gradient(2px 2px at 74% 38%, rgba(0,0,0,0.05) 0 35%, rgba(0,0,0,0) 36%),
                linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,245,245,0.90));
            border-radius: 10px;
            box-shadow:
                0 14px 26px rgba(0,0,0,0.30),
                inset 0 0 0 1px rgba(0,0,0,0.10);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transform-origin: 10% 0%;
            animation: tagSwing 2.6s ease-in-out infinite;
        }

        .gift-tag::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 14px;
            height: 14px;
            background: linear-gradient(135deg, rgba(0,0,0,0) 0 48%, rgba(0,0,0,0.10) 49% 52%, rgba(255,255,255,0.98) 53% 100%);
            border-bottom-right-radius: 10px;
            opacity: 0.45;
            pointer-events: none;
        }

        .gift-tag::before {
            content: "";
            position: absolute;
            left: 10px;
            top: -16px;
            width: 2px;
            height: 18px;
            background: rgba(255, 211, 107, 0.95);
            box-shadow: 0 0 0 1px rgba(160,105,10,0.22);
            transform: rotate(8deg);
            border-radius: 2px;
        }

        .gift-tag .tag-hole {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: rgba(0,0,0,0.10);
            box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
            position: absolute;
            left: 10px;
            top: 9px;
        }

        .gift-tag .tag-text {
            font-family: 'Dancing Script', cursive;
            font-weight: 700;
            font-size: 16px;
            color: #c2185b;
            text-shadow: 0 1px 0 rgba(255,255,255,0.7);
            transform: translateY(1px);
            letter-spacing: 0.02em;
        }

        @keyframes tagSwing {
            0% { transform: rotate(-12deg); }
            50% { transform: rotate(-2deg); }
            100% { transform: rotate(-12deg); }
        }

        /* Opening sequence */
        .gift3d.opening .gift3d-group {
            animation: none;
        }

        .gift3d.opening .ribbon-wrap {
            animation: ribbonOff 820ms cubic-bezier(.2, 1, .3, 1) forwards;
        }

        @keyframes ribbonOff {
            0% { transform: translateX(-50%) translateZ(92px) scale(1); opacity: 1; filter: blur(0px); }
            55% { transform: translateX(-50%) translateZ(106px) scale(0.98) rotateZ(-6deg) translateY(-8px); opacity: 0.92; }
            100% { transform: translateX(-50%) translateZ(140px) scale(0.84) rotateZ(18deg) translateY(-42px); opacity: 0; filter: blur(2px); }
        }

        .gift3d.opening .gift3d-lid {
            animation: lidFly3d 1400ms 280ms cubic-bezier(.22, 1, .36, 1) forwards;
        }

        @keyframes lidFly3d {
            0% { transform: translateX(-50%) translateY(0) translateZ(0) rotateX(0deg) rotateZ(0deg); opacity: 1; }
            55% { transform: translateX(-50%) translateY(-60px) translateZ(60px) rotateX(52deg) rotateZ(-6deg); opacity: 1; }
            100% { transform: translateX(-50%) translateY(-140px) translateZ(140px) rotateX(78deg) rotateZ(8deg); opacity: 0; }
        }

        .gift3d.opening .inner-glow {
            animation: innerBloom 1400ms 260ms ease-out forwards;
        }

        .gift3d.opening .spill-light {
            animation: spillBloom 1600ms 320ms ease-out forwards;
        }

        @keyframes innerBloom {
            0% { opacity: 0.25; filter: blur(0.2px) brightness(1); }
            45% { opacity: 1; filter: blur(0.5px) brightness(1.25); }
            100% { opacity: 0; filter: blur(1.2px) brightness(1.4); }
        }

        @keyframes spillBloom {
            0% { opacity: 0; filter: blur(12px) brightness(1); }
            45% { opacity: 0.95; filter: blur(18px) brightness(1.25); }
            100% { opacity: 0; filter: blur(22px) brightness(1.4); }
        }

        /* Zoom into the box instead of fading it out */
        .gift3d.opening.zooming .gift3d-group {
            animation: zoomIntoBox 1600ms 900ms cubic-bezier(.22, 1, .36, 1) forwards;
        }

        @keyframes zoomIntoBox {
            0% {
                transform: translateY(0) translateZ(0) rotateX(16deg) rotateY(-26deg) scale(1);
                filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
                opacity: 1;
            }
            55% {
                transform: translateY(-6px) translateZ(160px) rotateX(6deg) rotateY(-6deg) scale(3.6);
                filter:
                    drop-shadow(0 26px 60px rgba(0,0,0,0.55))
                    drop-shadow(0 0 64px rgba(255, 215, 0, 0.28))
                    brightness(1.12);
                opacity: 1;
            }
            75% {
                transform: translateY(-10px) translateZ(220px) rotateX(2deg) rotateY(-2deg) scale(4.4);
                filter:
                    drop-shadow(0 22px 50px rgba(0,0,0,0.45))
                    drop-shadow(0 0 72px rgba(255, 215, 0, 0.30))
                    brightness(1.18);
                opacity: 1;
            }
            100% {
                transform: translateY(-16px) translateZ(320px) rotateX(0deg) rotateY(0deg) scale(9.2);
                filter:
                    drop-shadow(0 0 0 rgba(0,0,0,0))
                    drop-shadow(0 0 80px rgba(255, 215, 0, 0.22))
                    brightness(1.05);
                opacity: 0.08;
            }
        }

        .click-text {
            color: white;
            font-size: 1.5rem;
            animation: pulse 2s infinite;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-weight: 600;
            text-shadow:
                0 0 12px rgba(255, 215, 180, 0.35),
                0 0 28px rgba(255, 215, 180, 0.20);
        }

        @keyframes pulse {
            0% { opacity: 0.55; }
            50% { opacity: 1; }
            100% { opacity: 0.55; }
        }

        .confetti {
            position: absolute;
            left: var(--x);
            top: var(--y);
            width: var(--w, 8px);
            height: var(--h, 14px);
            background: var(--c);
            border-radius: 2px;
            transform: translate3d(-50%, -50%, 0) rotate(var(--r));
            opacity: 1;
            box-shadow: 0 3px 10px rgba(0,0,0,0.18);
            mix-blend-mode: normal;
            will-change: transform, opacity;
            animation: confettiPop var(--d, 1100ms) cubic-bezier(.16, 1, .3, 1) forwards;
        }

        @keyframes confettiPop {
            0% {
                transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) rotate(var(--r)) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate3d(-50%, -50%, 0) translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--r) + 720deg)) scale(0.9);
                opacity: 0;
            }
        }

        /* Sparkle effect */
        .sparkle {
            position: absolute;
            background: white;
            border-radius: 50%;
            pointer-events: none;
            animation: float-up 4s linear forwards;
        }

        @keyframes float-up {
            0% { transform: translateY(0) scale(0); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(-100px) scale(0); opacity: 0; }
        }

        /* =====================
           High-end 3D Gift Box Overhaul (Overrides)
           ===================== */

        /* Add subtle interactive tilt to kill the “flat 2D” look */
        .gift3d {
            perspective: 1200px;
            transform-style: preserve-3d;
            transform: rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
            transition: transform 140ms ease-out;
            will-change: transform;
        }
        .gift3d.opening {
            transition: none;
            transform: none;
        }

        /* Stronger, richer shadow stack and “photographic” contrast */
        .gift3d .gift3d-group {
            transform: translateZ(0) rotateX(18deg) rotateY(-34deg);
            filter:
                drop-shadow(0 22px 55px rgba(0,0,0,0.62))
                drop-shadow(0 0 26px rgba(255, 105, 180, 0.20));
        }

        /* Make the cube faces read as thick, premium cardboard */
        .cube .face {
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow:
                inset 0 0 0 1px rgba(0,0,0,0.10),
                inset 0 1px 0 rgba(255,255,255,0.24),
                inset 0 -2px 0 rgba(0,0,0,0.28),
                inset 2px 0 0 rgba(255,255,255,0.10),
                inset -2px 0 0 rgba(0,0,0,0.18),
                0 1px 0 rgba(255,255,255,0.05);
        }

        /* Subtle paper texture + animated sheen (no images) */
        .cube .face::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background:
                /* paper micro-texture */
                repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0 2px, rgba(0,0,0,0.018) 2px 4px),
                /* gentle specular sweep */
                linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 46%, rgba(255,255,255,0) 62%);
            background-size: auto, 260px 100%;
            background-position: 0 0, -320px 0;
            mix-blend-mode: soft-light;
            opacity: 0.45;
            animation: faceSheen 6.8s ease-in-out infinite;
        }

        @keyframes faceSheen {
            0% { background-position: 0 0, -320px 0; }
            55% { background-position: 0 0, 360px 0; }
            100% { background-position: 0 0, 360px 0; }
        }

        /* Stronger light model per face: top brighter, sides shaded */
        .cube .face::after {
            opacity: 1;
            mix-blend-mode: soft-light;
        }

        /* Retune lighting contrast to look more “3D” */
        .gift3d-base .face.top,
        .gift3d-lid .face.top { --hl: 0.40; --sh: 0.12; --spec: 0.26; }

        .gift3d-base .face.front { --hl: 0.26; --sh: 0.20; --spec: 0.18; }
        .gift3d-base .face.left  { --hl: 0.18; --sh: 0.34; --spec: 0.12; }
        .gift3d-base .face.right { --hl: 0.12; --sh: 0.42; --spec: 0.10; }
        .gift3d-base .face.back  { --hl: 0.16; --sh: 0.38; --spec: 0.12; }

        .gift3d-lid .face.front { --hl: 0.30; --sh: 0.16; --spec: 0.22; }
        .gift3d-lid .face.left  { --hl: 0.18; --sh: 0.34; --spec: 0.12; }
        .gift3d-lid .face.right { --hl: 0.12; --sh: 0.42; --spec: 0.10; }
        .gift3d-lid .face.back  { --hl: 0.16; --sh: 0.38; --spec: 0.12; }

        /* Slightly richer ambient glow under the gift */
        .ambient-glow {
            opacity: 0.62;
            filter: blur(7px) saturate(1.12);
        }

        /* Give the satin ribbon even more “glassy” highlight */
        .ribbon-strap, .ribbon-band {
            filter: saturate(1.12) contrast(1.06);
        }

        /* Boost the “gap” spill light for a more cinematic peek */
        .gift3d:hover:not(.opening) .spill-light,
        .gift3d.peeking:not(.opening) .spill-light {
            opacity: 0.95;
            filter: blur(16px);
        }

        @media (max-width: 420px) {
            .gift3d {
                width: 220px;
                height: 225px;
            }
        }

        /* Birthday chapters — the new front door to every year. */
        #chapter-select {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: grid;
            place-items: center;
            overflow: hidden;
            isolation: isolate;
            color: #fff9f0;
            background:
                radial-gradient(circle at 50% 40%, rgba(171, 109, 180, 0.2), transparent 30%),
                radial-gradient(circle at 18% 82%, rgba(227, 166, 88, 0.12), transparent 24%),
                linear-gradient(145deg, #07050f 0%, #180c24 55%, #090610 100%);
            pointer-events: none;
            transition: opacity 900ms ease, visibility 900ms step-end;
        }

        #chapter-select::before,
        #chapter-select::after {
            content: '';
            position: absolute;
            inset: -15%;
            z-index: -1;
            pointer-events: none;
        }

        #chapter-select::before {
            background: radial-gradient(ellipse at 50% 105%, rgba(206, 113, 181, 0.18), transparent 45%);
            transition: opacity 1200ms ease;
        }

        #chapter-select:not(.chapter-ready)::before { opacity: 0; }

        #chapter-select::after {
            background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.68) 100%);
        }

        #chapter-select.chapter-ready {
            pointer-events: auto;
        }

        #chapter-select:focus { outline: none; }

        #chapter-select.entering {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        #chapter-select.chapter-open {
            opacity: 0;
            pointer-events: none;
        }

        #chapter-select.chapter-open .chapter-star,
        #chapter-select.chapter-open .chapter-year.current .chapter-orb {
            animation-play-state: paused;
        }

        #chapter-frame {
            position: fixed;
            inset: 0;
            z-index: 1150;
            width: 100%;
            height: 100%;
            border: 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            background: #05040b;
            transition: opacity 650ms ease, visibility 650ms step-end;
        }

        #chapter-frame.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity 650ms ease;
        }

        .chapter-loading { position: fixed; inset: 0; z-index: 1160; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; box-sizing: border-box; padding: 28px; background: #05040b; color: #ead9ee; text-align: center; animation: chapter-loading-arrive 240ms ease both; }
        .chapter-loading[hidden] { display: none; }
        .chapter-loading p { max-width: 380px; margin: 0; font: 13px/1.7 system-ui, sans-serif; letter-spacing: 0.03em; }
        .chapter-loading-orbit { width: 28px; height: 28px; border: 1px solid #b685ca38; border-top-color: #e7bfef; border-radius: 50%; animation: chapter-loading-turn 1.2s linear infinite; }
        .chapter-loading button { min-height: 44px; margin-top: 8px; padding: 10px 18px; border: 1px solid #bf91cb55; border-radius: 999px; color: #d9bddf; background: #21132c; font: 11px/1.5 system-ui, sans-serif; cursor: pointer; }
        .chapter-loading button:hover { border-color: #dfb4e9; background: #34203f; }
        .chapter-loading button:focus-visible { outline: 2px solid #f7d49d; outline-offset: 5px; }
        @keyframes chapter-loading-turn { to { transform: rotate(360deg); } }
        @keyframes chapter-loading-arrive { from { opacity: 0; } to { opacity: 1; } }
        @media (prefers-reduced-motion: reduce) { .chapter-loading, .chapter-loading-orbit { animation: none; } }

        #welcome-screen {
            position: fixed;
            inset: 0;
            z-index: 1200;
            display: grid;
            place-items: center;
            overflow: hidden auto;
            align-items: safe center;
            color: #fff8eb;
            background:
                radial-gradient(circle at 50% 45%, rgba(154, 88, 171, 0.22), transparent 28%),
                linear-gradient(145deg, #07050f, #170a22 55%, #08050f);
            transition: opacity 900ms ease, visibility 900ms step-end;
        }

        #welcome-screen::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0.7;
            background: radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.42) 100%);
        }

        #welcome-screen.leaving { opacity: 0; visibility: hidden; pointer-events: none; }
        #welcome-screen.leaving .welcome-content { animation: chapter-content-depart 260ms ease both; }
        #welcome-screen.leaving .welcome-button.dodging { opacity: 0; transition: opacity 220ms ease; }
        .welcome-content { position: relative; z-index: 1; padding: 28px; text-align: center; animation: chapter-arrive 1.2s cubic-bezier(.2,.8,.2,1) both; }
        .welcome-kicker { margin: 0 0 14px; color: #e6c793; font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; }
        .welcome-title { margin: 0; font-family: 'Dancing Script', cursive; font-size: clamp(4rem, 11vw, 8rem); line-height: 0.85; text-shadow: 0 4px 34px rgba(255, 177, 213, 0.26); }
        .welcome-line { max-width: 390px; margin: 24px auto 34px; color: rgba(255, 246, 236, 0.7); font-size: clamp(0.95rem, 2vw, 1.1rem); font-style: italic; line-height: 1.6; }
        .welcome-button { border: 1px solid rgba(246, 213, 151, 0.7); border-radius: 999px; padding: 14px 28px; color: #fff5e5; font: inherit; font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase; background: rgba(242, 193, 112, 0.09); cursor: pointer; transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease; }
        .welcome-button.dodging { transition: left 420ms cubic-bezier(.2,.75,.2,1), top 420ms cubic-bezier(.2,.75,.2,1), transform 220ms ease, background 220ms ease, box-shadow 220ms ease; }
        .welcome-button:hover, .welcome-button:focus-visible { transform: translateY(-3px); background: rgba(242, 193, 112, 0.2); box-shadow: 0 0 28px rgba(255, 204, 130, 0.22); outline: none; }
        .welcome-constellations { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .welcome-constellation { position: absolute; width: min(260px, 35vw); color: rgba(244, 210, 145, 0.55); filter: drop-shadow(0 0 9px rgba(255, 203, 126, 0.32)); animation: constellation-float var(--duration) ease-in-out var(--delay) infinite alternate; }
        .welcome-constellation line { stroke: currentColor; stroke-width: 1; opacity: 0.48; }
        .welcome-constellation circle { fill: #fff1c7; }
        .welcome-constellation.one { top: 11%; left: 7%; --duration: 8s; --delay: -2s; }
        .welcome-constellation.two { right: 6%; bottom: 10%; width: min(310px, 42vw); color: rgba(236, 180, 219, 0.48); --duration: 10s; --delay: -6s; }
        .welcome-constellation.three { top: 18%; right: 10%; width: min(165px, 24vw); color: rgba(244, 210, 145, 0.36); --duration: 7s; --delay: -4s; }

        .chapter-scroll {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: grid;
            place-items: center;
            align-items: safe center;
            box-sizing: border-box;
            padding: 24px 0;
            overflow: hidden auto;
        }

        .chapter-shell {
            position: relative;
            z-index: 1;
            width: min(1050px, 92vw);
            text-align: center;
            opacity: 0;
            transform: translateY(22px) scale(0.98);
        }

        #chapter-select.chapter-ready .chapter-shell {
            animation: chapter-arrive 1.2s cubic-bezier(.2, .8, .2, 1) both;
        }

        #chapter-select.chapter-open .chapter-shell {
            animation: chapter-content-depart 240ms ease both;
        }

        #chapter-select.chapter-returning .chapter-shell {
            animation: chapter-arrive 1s cubic-bezier(.2, .8, .2, 1) 550ms both;
        }

        #chapter-stars {
            position: absolute;
            inset: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1400ms ease 140ms;
        }

        #chapter-select.chapter-ready #chapter-stars { opacity: 1; }

        .chapter-star {
            position: absolute;
            bottom: -10vh;
            left: var(--x);
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background: rgba(255, 238, 206, var(--alpha));
            box-shadow: 0 0 calc(var(--size) * 4) rgba(255, 195, 222, 0.8);
            animation: chapter-star-drift var(--duration) linear var(--delay) infinite;
        }

        .chapter-kicker {
            margin: 0 0 10px;
            color: #e6c793;
            font-size: 0.72rem;
            font-family: 'Playfair Display', serif;
            letter-spacing: 0.35em;
            text-transform: uppercase;
        }

        .chapter-heading {
            margin: 0;
            color: #fff8eb;
            font-family: 'Dancing Script', cursive;
            font-size: clamp(3.2rem, 8vw, 7rem);
            font-weight: 700;
            line-height: 0.92;
            text-shadow: 0 4px 30px rgba(255, 177, 213, 0.25);
        }

        .chapter-subtitle {
            max-width: 500px;
            margin: 19px auto 52px;
            color: rgba(255, 246, 236, 0.7);
            font-size: clamp(0.9rem, 2vw, 1.08rem);
            font-style: italic;
            line-height: 1.6;
        }

        .chapter-years {
            --chapter-orb-size: clamp(62px, 10vw, 110px);
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            align-items: start;
            gap: clamp(8px, 2vw, 28px);
        }

        .chapter-years::before {
            content: '';
            position: absolute;
            top: calc(var(--chapter-orb-size) / 2 + 1px);
            right: 7%;
            left: 7%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(233, 194, 134, 0.7) 12%, rgba(255, 224, 182, 0.7) 88%, transparent);
            box-shadow: 0 0 12px rgba(242, 187, 114, 0.35);
        }

        .chapter-year {
            position: relative;
            z-index: 1;
            min-width: 0;
            border: 0;
            padding: 0;
            color: inherit;
            font: inherit;
            background: transparent;
        }

        .chapter-year:not(:disabled) { cursor: pointer; }
        #chapter-select a.chapter-year { text-decoration: none; }

        .chapter-year:focus-visible { outline: 2px solid #f7d49d; outline-offset: 8px; border-radius: 50%; }

        .chapter-orb {
            display: grid;
            width: var(--chapter-orb-size);
            height: var(--chapter-orb-size);
            margin: 0 auto;
            place-items: center;
            border: 1px solid rgba(255, 233, 195, 0.52);
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.34), rgba(247, 167, 210, 0.13) 42%, rgba(44, 18, 64, 0.75) 75%), #2c1240;
            box-shadow: 0 0 0 6px rgba(255, 225, 180, 0.04), 0 0 29px rgba(237, 141, 196, 0.14);
            color: #fff7e9;
            font-family: 'Dancing Script', cursive;
            font-size: clamp(1.85rem, 4vw, 3.25rem);
            line-height: 1;
            transition: transform 320ms ease, background 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
        }

        .chapter-year:not(:disabled):hover .chapter-orb,
        .chapter-year:not(:disabled):focus-visible .chapter-orb {
            transform: translateY(-10px) scale(1.08);
            border-color: rgba(255, 246, 213, 0.95);
            background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.72), rgba(255, 189, 223, 0.42) 40%, rgba(98, 33, 91, 0.86) 75%), #62215b;
            box-shadow: 0 0 0 8px rgba(255, 224, 180, 0.08), 0 0 42px rgba(246, 161, 208, 0.54);
        }

        .chapter-year.current .chapter-orb { animation: chapter-pulse 2.8s ease-in-out infinite; }
        .chapter-year.current:hover .chapter-orb,
        .chapter-year.current:focus-visible .chapter-orb { animation: none; }

        .chapter-label {
            display: block;
            min-height: 2.5em;
            margin-top: 18px;
            color: rgba(255, 245, 231, 0.88);
            font-size: clamp(0.65rem, 1.4vw, 0.84rem);
            letter-spacing: 0.12em;
            line-height: 1.35;
            text-transform: uppercase;
        }

        .chapter-year:not(:disabled):hover .chapter-label { color: #f8d69f; }
        .chapter-year:disabled { opacity: 0.48; }
        .chapter-year:disabled .chapter-orb { border-style: dashed; filter: saturate(0.55); }

        .chapter-hint {
            margin: 50px 0 0;
            color: rgba(255, 245, 231, 0.42);
            font-size: 0.68rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }

        .timeline-experiment {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            width: min(580px, 100%);
            box-sizing: border-box;
            margin: 28px auto 0;
            padding: 20px 22px;
            border: 1px solid rgba(209, 178, 235, 0.23);
            border-radius: 16px;
            background: linear-gradient(115deg, rgba(73, 41, 93, 0.35), rgba(21, 14, 38, 0.58));
            text-align: left;
        }
        .timeline-experiment time { color: #d9bddf; font: 10px/1.6 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
        .timeline-experiment h2 { margin: 5px 0; color: #fff1ea; font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 400; line-height: 1.4; }
        .timeline-experiment p { margin: 0; color: rgba(255, 246, 236, 0.66); font-size: 0.78rem; line-height: 1.6; }
        .universe-link { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 12px; min-height: 44px; box-sizing: border-box; padding: 10px 16px; border: 1px solid rgba(234, 205, 255, 0.45); border-radius: 10px; background: rgba(164, 113, 190, 0.12); color: #f5e1ff; font: 12px/1.5 system-ui, sans-serif; text-decoration: none; transition: background 200ms ease, border-color 200ms ease; }
        .universe-link:hover { background: rgba(164, 113, 190, 0.26); border-color: #e8cbff; }
        .universe-link:focus-visible { outline: 2px solid #f7d49d; outline-offset: 5px; }
        @media (max-width: 490px) {
            .timeline-experiment { align-items: stretch; flex-direction: column; gap: 14px; padding: 17px; margin-top: 24px; }
            .universe-link { width: 100%; }
        }
        @media (prefers-reduced-motion: reduce) { .universe-link { transition: none; } }

        @keyframes chapter-arrive { from { opacity: 0; transform: translateY(22px) scale(0.98); } to { opacity: 1; transform: none; } }
        @keyframes chapter-content-depart { from { opacity: var(--departure-opacity, 1); transform: var(--departure-transform, none); } to { opacity: 0; transform: translateY(-12px); } }
        @keyframes constellation-float { from { transform: translate3d(-4px, 5px, 0) rotate(-1deg); opacity: 0.36; } to { transform: translate3d(7px, -8px, 0) rotate(1deg); opacity: 0.75; } }
        @keyframes chapter-star-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--drift), -120vh, 0); } }
        @keyframes chapter-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(255, 225, 180, 0.04), 0 0 29px rgba(237, 141, 196, 0.14); } 50% { box-shadow: 0 0 0 12px rgba(255, 225, 180, 0.08), 0 0 48px rgba(244, 166, 208, 0.46); } }

        @media (max-width: 620px) {
            .chapter-subtitle { margin-bottom: 38px; }
            .chapter-years { --chapter-orb-size: min(62px, calc((92vw - 26px) / 5)); gap: 4px; }
            .chapter-years::before { right: 4%; left: 4%; }
            .chapter-label { margin-top: 12px; font-size: 0.56rem; letter-spacing: 0.06em; }
            .chapter-hint { margin-top: 35px; font-size: 0.58rem; }
        }

        .timeline-paused .chapter-star,
        .timeline-paused .chapter-year.current .chapter-orb,
        .timeline-paused .welcome-constellation { animation-play-state: paused; }

        @media (max-height: 420px) {
            .chapter-scroll { padding: 16px 0; }
            .chapter-subtitle { margin: 16px auto 24px; }
            .chapter-label { margin-top: 12px; }
            .chapter-hint { margin-top: 24px; }
        }

        @media (prefers-reduced-motion: reduce) {
            #welcome-screen, #chapter-select, #chapter-frame, #chapter-stars,
            .welcome-button, .chapter-orb { transition: none; }
            .welcome-content, .welcome-constellation,
            #welcome-screen.leaving .welcome-content,
            #chapter-select.chapter-open .chapter-shell,
            #chapter-select.chapter-returning .chapter-shell,
            #chapter-select.chapter-ready .chapter-shell,
            .chapter-year.current .chapter-orb, .chapter-star { animation: none; }
            #chapter-select.chapter-ready .chapter-shell { opacity: 1; transform: none; }
            .chapter-star { bottom: auto; top: var(--rest-y); }
        }

        /* Chapter 18: an empty memory book, ready for this year's story. */
        #chapter-18-experience {
            position: fixed;
            inset: 0;
            z-index: 950;
            display: grid;
            place-items: center;
            overflow: hidden;
            visibility: hidden;
            opacity: 0;
            color: #f8f0df;
            background:
                radial-gradient(circle at 50% 10%, rgba(142, 103, 216, 0.22), transparent 28%),
                radial-gradient(circle at 80% 92%, rgba(255, 184, 105, 0.12), transparent 25%),
                linear-gradient(155deg, #050611, #100c26 54%, #080512);
            transition: opacity 950ms ease, visibility 950ms step-end;
        }

        #chapter-18-experience.visible { visibility: visible; opacity: 1; transition: opacity 950ms ease; }

        #chapter-18-experience::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.55;
            background-image: radial-gradient(circle, rgba(255, 241, 207, 0.85) 0 1px, transparent 1.5px);
            background-size: 117px 117px;
            mask-image: radial-gradient(ellipse at center, black, transparent 80%);
        }

        .chapter18-shell {
            position: relative;
            z-index: 1;
            width: min(900px, 92vw);
            text-align: center;
        }

        .chapter18-intro { position: relative; z-index: 3; pointer-events: auto; transition: opacity 600ms ease, transform 600ms ease; }
        .chapter18-experience.opened .chapter18-intro { opacity: 0; transform: translateY(-16px); pointer-events: none; }
        .chapter18-eyebrow { margin: 0 0 12px; color: #e7c47e; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; }
        .chapter18-title { margin: 0; font-family: 'Dancing Script', cursive; font-size: clamp(4rem, 10vw, 8rem); line-height: 0.78; text-shadow: 0 0 36px rgba(199, 165, 255, 0.36); }
        .chapter18-line { max-width: 430px; margin: 24px auto 34px; color: rgba(252, 244, 230, 0.72); font-size: clamp(1rem, 2vw, 1.18rem); font-style: italic; line-height: 1.55; }

        .chapter18-button {
            position: relative;
            z-index: 4;
            border: 1px solid rgba(245, 211, 140, 0.72);
            border-radius: 999px;
            padding: 13px 27px;
            color: #fff4dc;
            font: inherit;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            background: rgba(242, 193, 112, 0.08);
            cursor: pointer;
            touch-action: manipulation;
            transition: transform 240ms ease, background 240ms ease, box-shadow 240ms ease;
        }

        .chapter18-button:hover, .chapter18-button:focus-visible { transform: translateY(-3px); background: rgba(242, 193, 112, 0.19); box-shadow: 0 0 28px rgba(255, 204, 130, 0.2); outline: none; }

        .memory-book {
            position: absolute;
            top: 50%;
            left: 50%;
            width: min(760px, 92vw);
            height: min(495px, 63vh);
            min-height: 390px;
            transform: translate(-50%, -42%) scale(0.82);
            opacity: 0;
            pointer-events: none;
            perspective: 1800px;
            transition: opacity 750ms ease 180ms, transform 850ms cubic-bezier(.18,.85,.2,1) 180ms;
        }

        .chapter18-experience.opened .memory-book { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

        .memory-book-cover, .memory-book-pages {
            position: absolute;
            inset: 0;
            border-radius: 10px 20px 20px 10px;
        }

        .memory-book-cover {
            display: grid;
            place-items: center;
            color: #eecf8d;
            background: linear-gradient(135deg, #372044, #160d2a 48%, #2e1736);
            border: 1px solid rgba(240, 205, 137, 0.45);
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55), inset 0 0 45px rgba(255, 211, 139, 0.08);
            transform-origin: left center;
            transition: transform 1200ms cubic-bezier(.2,.7,.15,1);
        }

        .chapter18-experience.opened .memory-book-cover { transform: perspective(1800px) rotateY(-154deg); }
        .memory-book-cover::before { content: '18'; position: absolute; opacity: 0.16; font-family: 'Dancing Script', cursive; font-size: 18rem; line-height: 1; }
        .memory-book-cover-title { position: relative; z-index: 1; font-family: 'Dancing Script', cursive; font-size: clamp(2.8rem, 7vw, 5rem); text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); }

        .memory-book-pages {
            overflow: hidden;
            background: linear-gradient(90deg, #d6c7aa, #f7edda 6%, #fff9eb 50%, #efe0c4 100%);
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4), inset 0 0 38px rgba(91, 52, 84, 0.1);
        }

        .memory-book-pages::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(75, 44, 55, 0.15); box-shadow: 0 0 14px rgba(0, 0, 0, 0.12); }
        .memory-page { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding: clamp(35px, 7vw, 82px); color: #3e273b; opacity: 0; transform: translateX(42px); pointer-events: none; transition: opacity 500ms ease, transform 500ms ease; }
        .memory-page.active { opacity: 1; transform: none; pointer-events: auto; }
        .memory-page.memory-photo-page { padding: 26px 30px 56px; }
        .memory-photo-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 36px; width: 100%; height: 100%; min-height: 0; margin: 0; }
        .memory-photo-frame { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%; }
        .memory-photo-frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-sizing: border-box; padding: 5px; border: 1px solid #b69a61; background: #fff9eb; box-shadow: 0 5px 16px rgba(75, 44, 55, 0.16); }
        .memory-photo-caption { min-width: 0; text-align: center; }
        .memory-page .memory-photo-caption h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.12; }
        .memory-page .memory-photo-caption .memory-page-number { margin: 0 0 18px; font-size: 0.65rem; font-style: normal; }
        .chapter18-experience.opened .memory-photo-page.active .memory-photo-spread { animation: memory-photo-reveal 900ms ease both; }
        @keyframes memory-photo-reveal { from { opacity: 0; } to { opacity: 1; } }
        @media (max-width: 620px) {
            .memory-page.memory-photo-page { padding: 18px 20px 44px; }
            .memory-photo-spread { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
            .memory-page .memory-photo-caption .memory-page-number { margin: 0 0 5px; font-size: 0.55rem; }
            .memory-page .memory-photo-caption h2 { font-size: 1.7rem; }
            .memory-page .memory-photo-caption p { margin: 7px 0 0; font-size: 0.85rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            .chapter18-experience.opened .memory-photo-page.active .memory-photo-spread { animation: none; }
        }
        .memory-page-number { margin: 0 0 12px; color: #946d65; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; }
        .memory-page h2 { margin: 0; color: #442e49; font-family: 'Dancing Script', cursive; font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 700; line-height: 1; }
        .memory-page p { max-width: 400px; margin: 22px 0 0; color: #654c58; font-size: clamp(0.9rem, 2vw, 1.08rem); font-style: italic; line-height: 1.65; }
        .memory-advice { max-width: 590px; margin-top: 14px; }
        .memory-page .memory-advice p { max-width: none; margin: 10px 0 0; font-family: 'Playfair Display', serif; font-size: clamp(0.82rem, 1.65vw, 0.98rem); line-height: 1.5; }
        .memory-poem { max-width: 440px; margin: 26px 0 0; color: #50354d; font-family: 'Playfair Display', serif; font-size: clamp(1rem, 2.1vw, 1.22rem); font-style: italic; line-height: 1.85; text-align: center; }
        .memory-page .memory-placeholder { display: grid; width: min(300px, 70vw); height: min(130px, 18vh); margin-top: 25px; place-items: center; border: 1px dashed rgba(105, 71, 82, 0.42); border-radius: 5px; color: rgba(85, 56, 68, 0.62); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
        .memory-page-nav { position: absolute; right: 28px; bottom: 20px; left: 28px; display: flex; align-items: center; justify-content: space-between; color: #815d63; font-size: 0.72rem; letter-spacing: 0.1em; }
        .memory-page-nav button { border: 0; color: inherit; font: inherit; letter-spacing: inherit; background: none; cursor: pointer; }
        .memory-page-nav button:hover, .memory-page-nav button:focus-visible { color: #3d263f; outline: none; }
        .memory-page-nav button:disabled { visibility: hidden; }

        .chapter18-finale { position: fixed; inset: 0; box-sizing: border-box; overflow: hidden; background: #070510; opacity: 0; pointer-events: none; transition: opacity 850ms ease; }
        .chapter18-experience.finished .memory-book, .chapter18-experience.finished .chapter18-intro { opacity: 0; pointer-events: none; }
        .chapter18-experience.finished .chapter18-finale { opacity: 1; pointer-events: auto; }
        .chapter18-lotus-frame { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #070510; }
        .chapter18-lotus-signature { position: absolute; z-index: 2; bottom: 28px; left: 28px; margin: 0; color: rgba(247, 211, 149, 0.5); font-size: 0.62rem; font-style: normal; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0; transform: translateY(8px); }
        .chapter18-finale .chapter-actions { position: absolute; z-index: 2; right: 22px; bottom: 20px; margin: 0; visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; }
        .chapter18-experience.finished .chapter18-lotus-signature { animation: chapter18-controls-in 800ms ease 6900ms forwards; }
        .chapter18-experience.finished .chapter18-finale .chapter-actions { animation: chapter18-controls-in 800ms ease 7100ms forwards; pointer-events: auto; }
        .chapter18-finale .chapter-action { color: #fff4dc; background: rgba(255, 217, 160, 0.08); }
        @keyframes chapter18-controls-in { 0% { visibility: hidden; opacity: 0; transform: translateY(8px); } 1% { visibility: visible; } 100% { visibility: visible; opacity: 1; transform: none; } }

        @media (max-width: 620px) {
            .memory-book { height: min(520px, 68vh); min-height: 380px; }
            .memory-page { padding: 34px 24px; }
            .memory-page .memory-advice p { font-size: clamp(0.72rem, 3vw, 0.82rem); line-height: 1.38; }
            .memory-page-nav { right: 15px; bottom: 14px; left: 15px; font-size: 0.62rem; }
            .chapter18-lotus-signature { right: 16px; bottom: 70px; left: 16px; text-align: center; }
            .chapter18-finale .chapter-actions { right: 14px; bottom: 14px; left: 14px; }
        }