@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root {
    color-scheme: light;
    --pink: #f9dce8;
    --pink-soft: #fff1f6;
    --pink-paper: #fffafd;
    --pink-deep: #c94e78;
    --berry: #71384f;
    --muted: #9b7182;
    --white: #fff;
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: clip; overflow-y: scroll; scroll-behavior: smooth; }
body { margin: 0; color: var(--berry); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.valentine-page { min-height: 100vh; overflow-x: clip; overflow-y: visible; background: var(--pink-soft); }
.valentine-header { position: absolute; z-index: 2; top: 0; left: 0; display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 25px clamp(20px, 6vw, 84px); color: #85566b; font-size: .7rem; }
.valentine-home { padding: 10px 15px; border: 1px solid #ecc4d3; border-radius: 30px; background: #fff9fc; transition: background .2s, transform .2s; }
.valentine-home:hover { transform: translateY(-2px); background: #fff; }
.valentine-home span { margin-right: 5px; color: var(--pink-deep); }
.header-date { letter-spacing: .15em; font-size: .58rem; font-weight: 700; }
.header-date span { padding: 0 5px; color: var(--pink-deep); }
.valentine-opening { position: relative; display: flex; min-height: 0; flex-direction: column; align-items: center; justify-content: center; padding: 135px 22px 82px; overflow: hidden; background: radial-gradient(ellipse at 50% 34%, #fff 0, #fff9fc 36%, #f9dce8 100%); text-align: center; }
.valentine-opening::before, .valentine-opening::after { position: absolute; width: 480px; height: 480px; border: 1px solid #fff9; border-radius: 50%; content: ''; pointer-events: none; }
.valentine-opening::before { top: -300px; left: -180px; }
.valentine-opening::after { right: -230px; bottom: -300px; width: 580px; height: 580px; }
.opening-kicker, .section-kicker { margin: 0 0 17px; color: var(--pink-deep); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.opening-kicker span { padding: 0 5px; }
.valentine-opening h1 { width: min(100%, 800px); margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.9rem, 7vw, 5.35rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.04; text-wrap: balance; }
.valentine-opening h1 span { color: var(--pink-deep); font-style: italic; }
.opening-note { width: min(100%, 500px); margin: 16px 0 25px; padding-inline: 8px; color: var(--muted); font-family: 'Playfair Display', Georgia, serif; font-size: .92rem; font-style: italic; line-height: 1.65; }
.film-frame { position: relative; width: min(560px, calc(100vw - 46px)); padding: 15px 11px; border: 1px solid #eab3c7; background: #c94e78; box-shadow: 0 14px 28px #a540631a; }
.film-holes { height: 9px; background: repeating-linear-gradient(90deg, #fff8fc 0 12px, transparent 12px 23px); }
.film-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 9px 0; }
.film-photo { min-width: 0; margin: 0; padding: 4px 4px 7px; background: #fffafd; }
.film-photo img, .film-placeholder { display: grid; width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.film-placeholder { place-items: center; background: repeating-linear-gradient(135deg, #fff5f9, #fff5f9 9px, #f9dce8 9px, #f9dce8 18px); color: #d47b99; font-family: 'Playfair Display', Georgia, serif; font-size: 2.3rem; }
.film-photo:first-child img { object-position: 38% center; }
.film-photo:nth-child(2) img { object-position: center 42%; }
.film-photo:last-child img { object-position: 72% center; }
.film-photo figcaption { overflow: hidden; padding-top: 6px; color: #986b7e; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(.45rem, 1.5vw, .62rem); font-style: italic; text-overflow: ellipsis; white-space: nowrap; }
.flower { position: absolute; color: #dc7b9a; text-shadow: 0 4px 14px #c94e7824; }
.flower-top-left { top: 20%; left: max(6%, calc((100% - 900px) / 2)); font-size: 2rem; transform: rotate(-17deg); }
.favorite-music { display: grid; place-items: center; padding: 48px 20px; background: #f5eef0; }
.music-player { width: min(380px, 100%); padding: 24px 26px 18px; border: 1px solid #302d2e; background: #151414; box-shadow: 0 24px 60px #371c2a35; color: #f4f1f2; text-align: left; }
.music-cover { position: relative; display: grid; width: 100%; aspect-ratio: 0.84; place-items: center; overflow: hidden; background: radial-gradient(circle at 28% 25%, #dfacc3, transparent 38%), linear-gradient(145deg, #71384f, #242021 70%); }
.music-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-cover img[hidden] { display: none; }
.music-cover-placeholder { color: #ffffffad; font-size: 5rem; }
.music-player-details { padding-top: 19px; }
.music-kicker { margin: 0 0 5px; color: #aaa4a7; font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.music-player h2 { overflow: hidden; margin: 0; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.music-artist { margin: 4px 0 13px; color: #b6afb2; font-size: .76rem; }
.music-timeline { min-width: 0; }
.music-timeline input { display: block; width: 100%; height: 5px; margin: 6px 0 4px; accent-color: #e8e4e6; cursor: pointer; }
.music-timeline input:disabled { cursor: not-allowed; opacity: .5; }
.music-timeline input:focus-visible, .music-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.music-times { display: flex; justify-content: space-between; color: #e2dfe0; font-size: .62rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.music-controls { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 10px; }
.music-controls button { display: grid; flex: 0 0 auto; place-items: center; padding: 0; border: 0; background: transparent; color: #e4e0e1; cursor: pointer; }
.music-controls button:disabled { cursor: not-allowed; opacity: .4; }
.music-controls .music-mode-button { width: 28px; height: 32px; border-radius: 6px; font-size: 1.15rem; }
.music-controls .spotify-code-trigger { font-size: 1.45rem; }
.music-controls .music-skip-button { width: 32px; height: 36px; font-size: 1.05rem; }
.music-controls .music-play { width: 54px; height: 54px; border-radius: 50%; background: #f4f1f2; color: #151414; font-size: 1.25rem; transition: transform .18s; }
.music-controls .music-play:hover:not(:disabled) { transform: scale(1.06); }
.music-controls button.is-active { color: #a7e7bf; }
.music-status { min-height: 1.5em; margin: 12px 0 0; color: #aaa4a7; font-size: .61rem; line-height: 1.5; }
.music-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; color: #aaa4a7; font-size: .61rem; }
.music-add-link { color: #f4f1f2; text-decoration: underline; text-underline-offset: 3px; }
.music-add-link:hover { color: #a7e7bf; }
.spotify-code-dialog { position: fixed; inset: 50% auto auto 50%; width: min(520px, calc(100vw - 32px)); max-height: min(85vh, 620px); margin: 0; padding: 0; overflow: auto; border: 1px solid #f2bfd2; background: #fff7fa; box-shadow: 0 24px 70px #30162288; color: #71384f; transform: translate(-50%, -50%); }
.spotify-code-dialog::backdrop { background: #24151dcc; backdrop-filter: blur(4px); }
.spotify-code-content { position: relative; padding: 32px clamp(18px, 5vw, 38px) 30px; text-align: center; }
.spotify-code-close { position: absolute; top: 10px; right: 12px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #ebc4d2; border-radius: 50%; background: #fff; color: #71384f; font: 1.4rem 'DM Sans', sans-serif; cursor: pointer; }
.spotify-code-content .music-kicker { margin-top: 10px; color: #a5406a; }
.spotify-code-content h2 { margin: 7px 0 20px; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600; }
.spotify-code-image { display: block; width: 100%; height: auto; border: 8px solid #f9dce8; box-shadow: 0 8px 25px #71384f24; }
.spotify-code-hint { max-width: 350px; margin: 16px auto 0; color: #8c6475; font-size: .74rem; line-height: 1.6; }
.spotify-code-dialog[open] { animation: spotify-code-pop .18s ease-out both; }
@keyframes spotify-code-pop { from { opacity: 0; } to { opacity: 1; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.music-form-page .valentine-header { position: relative; }
.add-music-main { display: grid; min-height: calc(100vh - 90px); place-items: start center; padding: 48px 20px 80px; }
.add-music-card { width: min(560px, 100%); padding: clamp(22px, 5vw, 38px); border: 1px solid #ecc4d3; background: #fffafd; box-shadow: 0 20px 55px #71384f16; }
.add-music-card h1 { margin: 0 0 9px; color: #71384f; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 600; letter-spacing: -.04em; }
.add-music-intro { margin: 0 0 24px; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.music-form-errors { margin: 0 0 18px; padding: 12px 16px; border: 1px solid #e8aabb; background: #fff1f4; color: #8a344d; font-size: .76rem; line-height: 1.6; }
.music-form { display: grid; gap: 17px; }
.music-form-field { display: grid; gap: 7px; color: #77445c; font-size: .74rem; font-weight: 700; }
.music-form-field input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #e7cad5; border-radius: 3px; background: #fff; color: #51303f; font: 400 .8rem 'DM Sans', sans-serif; }
.music-form-field input[type="file"] { padding: 9px; font-size: .68rem; }
.music-form-field small { color: #9b7887; font-size: .63rem; font-weight: 400; line-height: 1.5; }
.music-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.music-form-submit { min-height: 42px; padding: 10px 17px; border: 0; background: var(--pink-deep); color: #fff; font: 700 .72rem 'DM Sans', sans-serif; cursor: pointer; }
.music-form-submit:hover { background: #b83f69; }
.music-form-back { color: #874b65; font-size: .7rem; text-decoration: underline; text-underline-offset: 3px; }
.scrapbook-section { display: flex; flex-direction: column; align-items: center; padding: 92px 20px 105px; background: #fff; text-align: center; }
.scrapbook-section .section-kicker { margin-bottom: 13px; }
.scrapbook-section h2 { margin: 0 0 43px; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.13; }
.scrapbook-section h2 em { color: var(--pink-deep); font-weight: 600; }
.scrapbook-intro { margin: -27px 0 25px; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.scrapbook-status { width: min(520px, 100%); margin: 0 0 22px; padding: 12px 16px; border: 1px solid #efc4d4; background: #fff3f8; color: #874b65; font-size: .78rem; line-height: 1.6; }
.scrapbook-spread { display: grid; width: min(250mm, 100%); grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: clamp(7px, 2vw, 15px); }
.scrapbook-arrow { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid #ecc0d1; border-radius: 50%; background: #fff7fb; box-shadow: 0 5px 15px #a5406314; color: var(--pink-deep); font-family: 'DM Sans', sans-serif; font-size: 1.65rem; line-height: 1; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.scrapbook-arrow:hover { transform: scale(1.08); background: #fce7ef; box-shadow: 0 8px 20px #a5406320; }
.scrapbook-arrow:disabled { border-color: #f0e2e8; background: #fff; box-shadow: none; color: #d9bec9; cursor: not-allowed; }
.scrapbook-book { position: relative; width: min(210mm, 100%); min-width: 0; margin-left: auto; perspective: 1000px; }
.scrapbook-page { position: relative; width: 100%; aspect-ratio: 21 / 14.8; padding: 0; overflow: hidden; border: 1mm solid #fff; background: #fff3f8; box-shadow: 1mm 1mm 0 #e8a2ba, 2mm 2mm 0 #f4c9d8, 0 20px 45px #86415920; transform: rotate(-1deg); }
.scrapbook-ring-group { position: absolute; z-index: 4; left: -1.5%; display: flex; width: 3%; height: 20.946%; flex-direction: column; justify-content: space-between; }
.scrapbook-rings-top { top: 13.514%; }
.scrapbook-rings-bottom { top: 64.865%; }
.scrapbook-ring-group span { display: block; width: 100%; height: 12.903%; border: clamp(1px, .5vw, 1mm) solid #ba7891; border-right-color: #ecc4d3; border-radius: 50%; background: linear-gradient(180deg, #fff, #f5dce6); box-shadow: 0 1px 2px #69364d42; }
.scrapbook-page.turning-out-left { transform-origin: left center; animation: scrapbook-turn-out-left .32s ease-in forwards; }
.scrapbook-page.turning-in-left { transform-origin: left center; animation: scrapbook-turn-in-left .32s ease-out both; }
.scrapbook-page.turning-out-reverse { transform-origin: left center; animation: scrapbook-turn-in-left .32s ease-in reverse forwards; }
.scrapbook-page.turning-in-reverse { transform-origin: left center; animation: scrapbook-turn-out-left .32s ease-out reverse both; }
.scrapbook-page::after { position: absolute; z-index: 2; inset: 2mm; border: 1px dashed #db7a9a; content: ''; pointer-events: none; }
.paperclip { position: absolute; z-index: 3; top: -15px; left: 50%; width: 22px; height: 33px; border: 3px solid #d67a98; border-radius: 14px; transform: translateX(-50%) rotate(8deg); }
.scrapbook-page-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.doll-easter-egg { position: absolute; z-index: 4; top: 23%; left: 36%; width: 29%; height: 34%; padding: 0; border: 0; background: transparent; clip-path: polygon(8% 23%, 14% 11%, 29% 4%, 48% 0, 66% 6%, 77% 18%, 72% 27%, 72% 57%, 83% 71%, 100% 86%, 87% 100%, 59% 93%, 43% 79%, 30% 100%, 15% 82%, 5% 64%, 0 42%); cursor: pointer; }
.doll-easter-egg:focus-visible { outline: 3px solid #c94e78; outline-offset: 2px; background: #ffffff18; }
.doll-easter-egg[hidden] { display: none; }
.scrapbook-placeholder { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: repeating-linear-gradient(135deg, #fffafd, #fffafd 12px, #fff3f8 12px, #fff3f8 24px); color: #a46a82; }
.scrapbook-placeholder > span { color: var(--pink-deep); font-family: 'Playfair Display', Georgia, serif; font-size: 3rem; }
.scrapbook-placeholder strong { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(.82rem, 3vw, 1.05rem); font-weight: 600; }
.scrapbook-placeholder small { font-size: .58rem; }
.scrapbook-page-flower, .scrapbook-page-heart { position: absolute; z-index: 3; color: var(--pink-deep); text-shadow: 0 2px 8px #fff; }
.scrapbook-page-flower { top: 12px; right: 16px; font-size: 1.2rem; }
.scrapbook-page-heart { right: 15px; bottom: 12px; font-size: 1.2rem; }
.paper-spec { margin: 20px 0 0; color: #a17a8b; font-size: .63rem; letter-spacing: .09em; }
.paper-spec span { padding: 0 5px; color: var(--pink-deep); }
.doll-chat { position: fixed; inset: 50% auto auto 50%; width: min(520px, calc(100vw - 32px)); max-height: min(80vh, 560px); margin: 0; padding: 0; overflow: hidden; border: 1px solid #efc4d4; border-radius: 16px; background: #fffafd; box-shadow: 0 20px 65px #38152655; color: var(--berry); text-align: left; transform: translate(-50%, -50%); }
.doll-chat[open] { animation: doll-chat-pop .22s ease-out both; }
.doll-chat::backdrop { background: #38152680; backdrop-filter: blur(3px); }
.doll-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px 12px; border-bottom: 1px solid #f3dbe4; background: #fff3f8; }
.doll-chat-header .section-kicker { margin: 0 0 4px; font-size: .55rem; }
.doll-chat-header h3 { margin: 0; color: #71384f; font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; }
.doll-chat-close { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #ecc4d3; border-radius: 50%; background: #fffafd; color: #a33d64; font: 1.4rem 'DM Sans', sans-serif; cursor: pointer; }
.doll-chat-messages { display: flex; max-height: 230px; min-height: 104px; flex-direction: column; gap: 9px; overflow-y: auto; padding: 14px; }
.doll-chat-message { max-width: 86%; margin: 0; padding: 9px 12px; border-radius: 14px; color: #71475a; font-size: .78rem; line-height: 1.55; overflow-wrap: anywhere; }
.doll-chat-message-bot { align-self: flex-start; border: 1px solid #f1d5e0; border-bottom-left-radius: 4px; background: #fff1f6; }
.doll-chat-message-user { align-self: flex-end; border-bottom-right-radius: 4px; background: #c94e78; color: #fff; }
.doll-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #f3dbe4; background: #fff8fb; }
.doll-chat-form input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid #eac6d4; border-radius: 999px; background: #fff; color: #71384f; font: inherit; font-size: .75rem; }
.doll-chat-form input:focus-visible, .doll-chat-form button:focus-visible, .doll-chat-close:focus-visible { outline: 3px solid #d8799a; outline-offset: 2px; }
.doll-chat-form button { flex: none; padding: 0 15px; border: 0; border-radius: 999px; background: #c94e78; color: #fff; font: 600 .72rem 'DM Sans', sans-serif; cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.love-letter { position: relative; display: grid; min-height: 600px; place-items: center; padding: 80px 20px; overflow: hidden; background: #f8d8e5; }
.love-letter::before, .love-letter::after { position: absolute; width: 380px; height: 380px; border: 1px solid #fff8; border-radius: 50%; content: ''; }
.love-letter::before { top: -240px; right: -100px; }
.love-letter::after { bottom: -270px; left: -80px; width: 500px; height: 500px; }
.letter-card { position: relative; z-index: 1; width: min(610px, 100%); padding: clamp(30px, 7vw, 65px); border: 1px solid #f2c6d6; background: #fffafd; box-shadow: 0 25px 60px #9747651a; }
.letter-seal { position: absolute; top: -21px; right: 28px; display: grid; width: 43px; height: 43px; place-items: center; border: 4px solid #fffafd; border-radius: 50%; background: var(--pink-deep); color: #fff; }
.letter-card .section-kicker { margin-bottom: 15px; }
.letter-card h2 { margin: 0 0 21px; color: var(--pink-deep); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.2rem, 6vw, 3.3rem); font-style: italic; font-weight: 600; }
.letter-card > p:not(.section-kicker) { color: #896678; font-size: .86rem; line-height: 1.9; }
.letter-card .letter-signoff { margin: 25px 0 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; }
.letter-signoff strong { display: inline-block; margin-top: 5px; color: var(--pink-deep); font-size: 1.2rem; }
.letter-flower { position: absolute; right: 7%; bottom: 5%; color: #fff9; font-size: 9rem; }
.valentine-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 24px clamp(20px, 6vw, 84px); background: #71384f; color: #ffeef5; font-size: .64rem; }
.valentine-footer > span span { color: #f3a9c2; }
.valentine-footer a { color: #ffe0eb; text-decoration: underline; text-decoration-color: #df91ac; text-underline-offset: 4px; }
@keyframes scrapbook-turn-out-left {
    0% { transform: rotateY(0) rotate(-1deg); box-shadow: 1mm 1mm 0 #e8a2ba, 2mm 2mm 0 #f4c9d8, 0 20px 45px #86415920; }
    55% { box-shadow: 12px 4px 22px #71384f35; }
    100% { transform: rotateY(-88deg) rotate(-1deg); box-shadow: 12px 4px 22px #71384f35; }
}
@keyframes scrapbook-turn-in-left {
    0% { transform: rotateY(88deg) rotate(-1deg); box-shadow: 12px 4px 22px #71384f35; }
    45% { box-shadow: 12px 4px 22px #71384f35; }
    100% { transform: rotateY(0) rotate(-1deg); box-shadow: 1mm 1mm 0 #e8a2ba, 2mm 2mm 0 #f4c9d8, 0 20px 45px #86415920; }
}
@keyframes doll-chat-pop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 600px) {
    .valentine-header { padding: 17px 16px; }
    .valentine-home { padding: 9px 11px; font-size: .63rem; }
    .header-date { max-width: 130px; font-size: .48rem; text-align: right; }
    .valentine-opening { padding: 108px 14px 58px; }
    .valentine-opening h1 { font-size: clamp(2.8rem, 12vw, 4.4rem); }
    .opening-kicker { font-size: .52rem; letter-spacing: .13em; }
    .opening-note { max-width: 300px; margin: 13px 0 21px; font-size: .83rem; line-height: 1.6; }
    .film-frame { width: calc(100vw - 30px); padding: 14px 8px; }
    .film-photos { gap: 5px; padding: 7px 0; }
    .film-holes { height: 7px; background: repeating-linear-gradient(90deg, #fff8fc 0 8px, transparent 8px 16px); }
    .film-photo { padding: 3px 3px 5px; }
    .film-photo figcaption { font-size: .43rem; }
    .favorite-music { padding: 30px 15px; }
    .music-player { width: min(360px, 100%); padding: 18px 18px 15px; }
    .music-cover { aspect-ratio: .88; }
    .music-controls { gap: 5px; }
    .music-controls .music-mode-button { width: 25px; }
    .music-controls .spotify-code-trigger { font-size: 1.35rem; }
    .music-controls .music-skip-button { width: 29px; }
    .music-controls .music-play { width: 50px; height: 50px; }
    .add-music-main { min-height: calc(100vh - 70px); padding: 32px 16px 56px; }
    .add-music-card { padding: 22px 18px; }
    .flower-top-left { top: 14%; left: 5%; font-size: 1.4rem; }
    .scrapbook-section { padding: 72px 16px 82px; }
    .scrapbook-section h2 { margin-bottom: 37px; font-size: 2.2rem; }
    .scrapbook-intro { margin-top: -22px; font-size: .74rem; }
    .scrapbook-spread { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
    .scrapbook-arrow { width: 44px; height: 44px; font-size: 1.35rem; }
    .doll-chat-form { gap: 6px; padding: 10px; }
    .doll-chat-form button { padding-inline: 12px; }
    .love-letter { min-height: 540px; padding: 65px 16px; }
    .letter-card > p:not(.section-kicker) { font-size: .8rem; }
    .valentine-footer { align-items: flex-start; flex-direction: column; font-size: .59rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .doll-chat[open] { animation: none; }
}