:root {
  --ink: #fff1ec;
  --muted: #d3b7c1;
  --quiet: #af8e9f;
  --pink: #fac1c5;
  --rose: #ef9cad;
  --gold: #e6c9a8;
  --bg: #1c101e;
  --glass: rgba(47, 24, 44, .64);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-height: 100svh; color: var(--ink); font-family: 'DM Sans', 'Trebuchet MS', Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff4cb; outline-offset: 5px; }
button:disabled { cursor: wait; }
::selection { background: #ffb4c9; color: #38162e; }
.skip-link { position: fixed; z-index: 300; top: 0; left: 12px; transform: translateY(-140%); padding: 12px 20px; color: #221321; background: #ffebda; border-radius: 10px; }
.skip-link:focus { transform: translateY(12px); }
.sky { position: fixed; z-index: -1; inset: 0; overflow: hidden; background: radial-gradient(ellipse 72% 92% at 5% 25%, #3a1c37 0%, transparent 68%), radial-gradient(ellipse 74% 86% at 91% 91%, #392038 0%, transparent 70%), linear-gradient(124deg, #160f1d 0%, #291628 56%, #1c1021 100%); }
.sky::before { content: ''; position: absolute; inset: 0; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); pointer-events: none; }
.sky__nebula { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .52; animation: nebula 15s ease-in-out infinite alternate; }
.sky__nebula--one { width: 38vw; height: 44vw; min-width: 350px; min-height: 350px; background: radial-gradient(circle, #963b61a3, #51233c33 64%, transparent 75%); left: -13vw; top: 10vh; }
.sky__nebula--two { width: 42vw; height: 40vw; min-width: 330px; min-height: 330px; background: radial-gradient(circle, #8e4d7482, #64263d14 65%, transparent 80%); right: -18vw; bottom: -20vh; animation-delay: -7s; }
.sky__haze { position: absolute; left: 50%; top: 50%; width: min(860px, 75vw); height: min(860px, 75vw); transform: translate(-50%, -50%); background: radial-gradient(circle, #8a395b14 0%, transparent 68%); }
.stars, .petals, .ambient-hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.star { position: absolute; width: var(--size); height: var(--size); background: #fff5ec; border-radius: 50%; opacity: var(--opacity); box-shadow: 0 0 9px 1px #ffe4cf55; animation: twinkle var(--duration) ease-in-out var(--delay) infinite alternate; }
.star--cross { background: transparent; box-shadow: none; }
.star--cross::before, .star--cross::after { content: ''; position: absolute; left: 50%; top: 50%; background: #ffe7dd; transform: translate(-50%, -50%); border-radius: 100%; box-shadow: 0 0 10px #ffdfd3bb; }
.star--cross::before { width: 1px; height: 10px; }
.star--cross::after { width: 10px; height: 1px; }
.petal { position: absolute; left: var(--x); bottom: -10vh; width: var(--size); height: calc(var(--size) * 1.48); border-radius: 82% 10% 75% 15%; background: linear-gradient(135deg, #ffe1d5a6, #e685ad72); box-shadow: 0 0 11px #ffb6c333; opacity: 0; transform: rotate(var(--rotation)); animation: petal-fly var(--time) linear var(--delay) infinite; }
.fireworks { position: fixed; z-index: 40; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.fireworks.is-active { opacity: 1; }
.ambient-hearts { position: fixed; z-index: 12; }
.floating-heart { position: absolute; bottom: -50px; left: var(--x); font-size: var(--size); color: var(--color); opacity: 0; text-shadow: 0 0 15px #ffb1cb90; animation: floating-heart var(--time) ease-in-out forwards; }
.site-wrap { min-height: 100svh; width: 100%; display: flex; flex-direction: column; position: relative; z-index: 2; }
.site-header { position: relative; z-index: 30; width: 100%; max-width: 1550px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 31px clamp(22px, 5.1vw, 88px) 16px; }
.signature { display: inline-flex; align-items: center; gap: 12px; font-family: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif; font-size: 24px; font-weight: 500; letter-spacing: -.55px; color: #fbe7e1; white-space: nowrap; }
.signature strong { color: #f9b7c4; font-weight: 600; font-style: italic; }
.signature__mark { width: 33px; height: 33px; color: var(--rose); display: grid; place-items: center; }
.signature__mark svg { width: 30px; height: 30px; }
.signature__dot { color: #eab5b8; }
.header-actions { display: flex; align-items: center; gap: 25px; }
.header-actions__note { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-style: italic; color: #c9aabb; }
.sound-button { color: #f0d5d6; background: #f4c8dc12; border: 1px solid #f6ced536; height: 40px; border-radius: 100px; display: inline-flex; gap: 9px; align-items: center; padding: 0 16px; cursor: pointer; transition: border-color .3s, background .3s, transform .3s; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.sound-button:hover { background: #f4c8dc26; border-color: #f6ced58c; transform: translateY(-2px); }
.sound-icon { width: 17px; height: 17px; }
.sound-button__indicator { border-radius: 50%; width: 5px; height: 5px; background: #77545d; }
.sound-button[aria-pressed="true"] .sound-button__indicator { background: #ffd2ac; box-shadow: 0 0 8px #ffd2ac; }
.main-content { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; }
.story-layout { width: min(100%, 1450px); margin: 0 auto; padding: clamp(20px, 4vh, 50px) clamp(22px, 6vw, 105px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(430px, 1fr); align-items: center; gap: clamp(30px, 5vw, 95px); }
.illustration-area { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; min-width: 0; }
.rose-display { width: min(100%, 490px); aspect-ratio: 1 / 1.11; position: relative; display: grid; place-items: center; isolation: isolate; transform-style: preserve-3d; transition: transform .5s var(--ease); }
.rose-display::before { content: ''; position: absolute; inset: 12% 9% 10%; background: radial-gradient(ellipse at 50% 43%, #cc647e46 0%, #a13e6820 44%, transparent 68%); border-radius: 50%; filter: blur(20px); animation: halo-breathe 6s ease-in-out infinite; }
.rose-display__outer-orbit { position: absolute; inset: 5%; border: 1px solid #eabac52c; border-radius: 49% 51% 54% 46% / 49% 50% 50% 51%; transform: rotate(23deg); animation: orbit 33s linear infinite; }
.rose-display__outer-orbit::before, .rose-display__outer-orbit::after { content: ''; position: absolute; height: 5px; width: 5px; border-radius: 50%; background: #ffddc8; box-shadow: 0 0 10px 2px #ffbea9; }
.rose-display__outer-orbit::before { top: 17%; left: 12%; }
.rose-display__outer-orbit::after { bottom: 19%; right: 12%; width: 3px; height: 3px; }
.rose-display__inner-orbit { position: absolute; inset: 12% 14%; border: 1px solid #e9b6c622; border-radius: 50%; transform: rotate(-26deg); animation: orbit 24s linear infinite reverse; }
.rose-display__halo { position: absolute; inset: 18%; background: radial-gradient(circle, #ff9fae22, transparent 69%); border-radius: 50%; filter: blur(23px); }
.rose-display__flower { pointer-events: none; position: relative; z-index: 2; width: min(96%, 460px); height: 100%; object-fit: contain; filter: drop-shadow(5px 24px 30px #0c07148c) drop-shadow(0 0 28px #e89caa23); animation: rose-float 5.5s ease-in-out infinite; }
.rose-display__spark { position: absolute; z-index: 3; width: 4px; height: 4px; background: #ffe4dc; border-radius: 50%; box-shadow: 0 0 17px 3px #ffe4ceaa; animation: twinkle 2.8s ease-in-out infinite alternate; }
.rose-display__spark--1 { left: 13%; top: 30%; animation-delay: -.6s; }
.rose-display__spark--2 { right: 10%; top: 25%; width: 3px; height: 3px; animation-delay: -2.3s; }
.rose-display__spark--3 { left: 26%; bottom: 19%; animation-delay: -1.3s; }
.rose-display__spark--4 { right: 24%; bottom: 28%; width: 2px; height: 2px; animation-delay: -.9s; }
.rose-display__spark--5 { left: 50%; top: 6%; width: 3px; height: 3px; animation-delay: -2s; }
.illustration-caption { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: -11px; max-width: 450px; text-align: center; }
.illustration-caption__dash { height: 1px; background: linear-gradient(90deg, transparent, #e9b7c587); width: 32px; flex: 0 0 32px; }
.illustration-caption__dash:last-child { transform: rotate(180deg); }
.illustration-caption p { color: #ebcbd3; font: italic 19px/1.38 'Cormorant Garamond', Georgia, serif; letter-spacing: .01em; margin: 0; min-width: 0; transition: opacity .24s ease; }
.card-column { min-width: 0; }
.story-card { position: relative; min-height: 540px; border-radius: 30px; isolation: isolate; background: linear-gradient(146deg, #593148aa 0%, #422438bb 49%, #351d34c9 100%); border: 1px solid #f5c6d447; box-shadow: 0 22px 75px #07020b59, 0 1px 0 #ffffff0c inset, 0 0 100px #ef869d08 inset; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); overflow: clip; }
.story-card::before { content: ''; position: absolute; inset: 1px; border-radius: 29px; pointer-events: none; background: linear-gradient(152deg, #fff2e91b, transparent 29% 71%, #f9b4c411); }
.story-card::after { content: ''; position: absolute; width: 90%; left: 5%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #fbd9d0ac, transparent); pointer-events: none; }
.story-card__light { position: absolute; pointer-events: none; right: -10%; top: -25%; width: 60%; height: 60%; border-radius: 50%; background: #efa2be12; filter: blur(35px); }
.card-body { position: relative; z-index: 1; padding: clamp(34px, 4vw, 59px) clamp(29px, 4.2vw, 61px); min-height: 540px; display: flex; align-items: center; }
.screen { width: 100%; animation: enter-screen .8s var(--ease) both; }
.screen.is-leaving { animation: leave-screen .23s ease-in both; pointer-events: none; }
.small-label { display: inline-flex; gap: 10px; align-items: center; color: #eac7c5; letter-spacing: .17em; text-transform: uppercase; font-size: 10px; font-weight: 700; line-height: 1.4; }
.small-label__star { color: #eebca7; font-size: 15px; line-height: 1; }
.intro-heading { margin-top: 22px; font-family: 'Cormorant Garamond', Georgia, serif; }
.intro-heading__line { font-size: clamp(57px, 6.2vw, 92px); letter-spacing: -.052em; line-height: .88; font-weight: 500; }
.intro-heading h1 { font-size: clamp(88px, 10vw, 135px); letter-spacing: -.072em; line-height: 1.03; margin: 0 0 0 -4px; font-weight: 500; font-style: italic; color: #ffc5c4; text-shadow: 0 4px 45px #e59b9b1f; }
.heading-period { color: #f1d4a6; }
.mini-flourish { display: flex; gap: 10px; align-items: center; width: 129px; margin: 16px 0 27px; color: #eeb2bb; }
.mini-flourish > span { height: 1px; flex: 1; background: #e4bac17c; }
.mini-flourish svg { width: 11px; height: 11px; }
.intro-copy, .question-copy { max-width: 414px; margin: 0 0 32px; color: #e4cbd2; font-size: 14px; line-height: 1.95; letter-spacing: .008em; }
.intro-copy em { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; color: #ffe2d3; }
.primary-button { position: relative; width: max-content; max-width: 100%; min-height: 57px; border-radius: 100px; border: 1px solid #ffe8d966; padding: 15px 25px 15px 29px; color: #3b2232; background: linear-gradient(114deg, #ffe5d6 0%, #ffd7d1 50%, #f5b9c5 100%); box-shadow: 0 10px 29px #22091254, 0 4px 21px #ffc5d533 inset, 0 0 28px #fbc3bd0c; display: inline-flex; align-items: center; justify-content: center; gap: 24px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .025em; transition: box-shadow .3s, transform .36s var(--ease), filter .36s ease; }
.primary-button svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .3s var(--ease); }
.primary-button:hover { transform: translateY(-4px); box-shadow: 0 15px 37px #210a155c, 0 4px 21px #ffc5d533 inset, 0 0 25px #f9c5bc44; filter: brightness(1.05); }
.primary-button:hover svg { transform: translateX(4px); }
.primary-button:active { transform: translateY(0) scale(.98); }
.under-button { margin: 22px 0 0; display: flex; align-items: center; gap: 8px; color: #bc9eae; font-size: 11px; letter-spacing: .02em; }
.under-button svg { width: 14px; height: 14px; color: #e2a5b0; }
.below-card { display: flex; justify-content: space-between; align-items: center; min-height: 58px; gap: 10px; padding: 12px 18px; color: #bc9ca8; font-size: 10px; letter-spacing: .055em; }
.below-card__hearts { color: #efb1bd; font-family: Georgia, serif; font-size: 16px; white-space: nowrap; }
.site-footer { width: 100%; max-width: 1550px; margin: 0 auto; padding: 10px clamp(22px, 5.1vw, 88px) 23px; display: flex; gap: 12px; align-items: center; justify-content: space-between; color: #b28fa4; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; letter-spacing: .015em; }
.site-footer span:nth-child(2) { color: #d6a1ac; }
/* Three chapters */
.progress-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 27px; }
.progress-header__count { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: #f0c9c7; }
.progress-header__count span { color: #b68da0; font-size: 15px; }
.progress-track { display: flex; gap: 7px; }
.progress-track i { height: 3px; width: clamp(23px, 4vw, 42px); border-radius: 100px; background: #e5a4b633; transition: background .4s, box-shadow .4s; }
.progress-track i.is-complete { background: #f3b9b8; box-shadow: 0 0 9px #ffd0c94d; }
.question-eyebrow { font-family: 'Cormorant Garamond', Georgia, serif; color: #f1cfbb; font-size: 22px; font-style: italic; margin: 0 0 17px; }
.question-title { font: 500 clamp(42px, 4.4vw, 63px)/1.035 'Cormorant Garamond', Georgia, serif; letter-spacing: -.035em; margin: 0 0 23px; color: #ffefea; max-width: 500px; }
.question-title em { color: #f6b1bb; font-weight: 500; }
.question-copy { min-height: 83px; max-width: 420px; margin-bottom: 28px; }
.question-actions { min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; position: relative; }
.question-actions .primary-button { min-height: 54px; padding: 15px 22px; gap: 17px; }
.secondary-button { border: 1px solid #eac1c240; background: #d99cba10; color: #e9c7d1; border-radius: 50px; min-height: 52px; padding: 13px 20px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .3s, border-color .3s, transform .22s var(--ease); }
.secondary-button:hover { background: #dbadc427; border-color: #ffcfdb66; }
.secondary-button.is-sneaky { position: relative; transform: translate(var(--move-x, 0px), var(--move-y, 0px)) rotate(var(--rotation, 0deg)); z-index: 5; }
.secondary-button.is-sneaky:focus-visible { transform: none !important; }
.playful-note { font-size: 10px; color: #cda8b6; min-height: 19px; margin-top: 13px; opacity: .9; }
.question-endnote { color: #b8a0ac; font-size: 10px; line-height: 1.7; min-height: 19px; margin: 12px 0 0; }
/* Finale */
.final-heading { color: #ffe8e1; font: 500 clamp(57px, 6vw, 83px)/.98 'Cormorant Garamond', Georgia, serif; letter-spacing: -.045em; margin: 6px 0 18px; }
.final-heading em { display: block; font-size: 1.16em; color: #fcbac4; font-weight: 500; }
.final-copy { font-size: 14px; color: #f1d0d8; line-height: 1.88; margin: 0 0 20px; max-width: 430px; }
.final-promise { font: italic 25px/1.2 'Cormorant Garamond', Georgia, serif; color: #ffe1d7; margin: 0 0 29px; }
.final-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.final-actions .primary-button { min-height: 52px; gap: 11px; padding: 12px 21px; }
.text-button { cursor: pointer; background: transparent; border: none; color: #f1c4ce; font-size: 12px; padding: 12px 8px; text-decoration: underline; text-decoration-color: #d9a3b98a; text-underline-offset: 4px; transition: color .3s; }
.text-button:hover { color: #fff7eb; }
.final-heart { width: 66px; height: 66px; margin-bottom: 15px; display: grid; place-items: center; color: #ffc5c8; filter: drop-shadow(0 0 18px #fd9fac70); animation: heart-beat 2.3s ease-in-out infinite; }
.final-heart svg { width: 61px; height: 61px; }
.final-heart--quiet { animation: none; filter: none; }
.final-heart--quiet svg { width: 46px; height: 46px; }
.final-heading--quiet { font-size: clamp(48px, 6vw, 72px); line-height: 1.04; }
.quiet-copy { max-width: 430px; margin-bottom: 30px; }
/* Letter overlay */
.letter-overlay { position: fixed; z-index: 100; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; place-items: center; padding: 26px 18px; }
.letter-overlay[hidden] { display: none; }
.letter-overlay__backdrop { position: fixed; z-index: -1; inset: 0; background: #150e1ee8; backdrop-filter: blur(16px); }
.letter-dialog { position: relative; width: min(100%, 610px); margin: auto; padding: clamp(35px, 6vw, 65px); background: linear-gradient(160deg, #fff6e9 0%, #f9e5df 100%); color: #6a4052; border-radius: 7px 35px 7px 35px; border: 1px solid #fffaf3; box-shadow: 0 30px 110px #070208bd; animation: paper-unfold .6s var(--ease) both; }
.letter-dialog::before { content: ''; pointer-events: none; position: absolute; inset: 13px; border: 1px solid #d5a9a47d; border-radius: 2px 25px 2px 25px; }
.letter-dialog__close { position: absolute; right: 20px; top: 18px; height: 34px; width: 34px; border: none; border-radius: 50%; background: #8b5b6844; color: #764955; display: grid; place-items: center; cursor: pointer; }
.letter-dialog__close svg { width: 17px; }
.letter-dialog__kicker { display: block; text-align: center; text-transform: uppercase; font-size: 10px; letter-spacing: .16em; font-weight: 700; }
.letter-dialog__seal { text-align: center; font: 35px Georgia, serif; margin: 12px 0 0; color: #be667c; }
.letter-dialog h2 { font: italic 500 clamp(47px, 6vw, 62px)/1.08 'Cormorant Garamond', Georgia, serif; text-align: center; margin: 6px 0 25px; color: #6a334e; }
.letter-dialog p { position: relative; font-size: 13px; line-height: 1.94; margin: 0 0 17px; color: #684855; }
.letter-dialog p strong { color: #873853; }
.letter-dialog__last { font: italic 25px/1.3 'Cormorant Garamond', Georgia, serif !important; color: #8d415b !important; }
.letter-dialog__signature { text-align: right; font: italic 26px 'Cormorant Garamond', Georgia, serif; color: #87465b; margin-top: 25px; }
.letter-dialog__signature span { color: #d67e89; }
.noscript { position: fixed; z-index: 999; bottom: 0; width: 100%; padding: 16px; background: #fff1e7; color: #401b31; text-align: center; }
/* Motion */
@keyframes nebula { from { transform: translate(-3%, -4%) scale(.95); } to { transform: translate(7%, 8%) scale(1.09); } }
@keyframes twinkle { from { opacity: calc(var(--opacity, .6) * .25); transform: scale(.66); } to { opacity: var(--opacity, .9); transform: scale(1.2); } }
@keyframes petal-fly { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--rotation)); } 9% { opacity: .52; } 72% { opacity: .42; } 100% { opacity: 0; transform: translate3d(var(--drift), -112vh, 0) rotate(calc(var(--rotation) + 600deg)); } }
@keyframes orbit { to { transform: rotate(383deg); } }
@keyframes halo-breathe { 0%,100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes rose-float { 0%,100% { transform: translateY(3px) rotate(-1deg); } 50% { transform: translateY(-11px) rotate(1deg); } }
@keyframes enter-screen { from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes leave-screen { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } }
@keyframes heart-beat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.13); } 26% { transform: scale(1.02); } 39% { transform: scale(1.09); } 53% { transform: scale(1); } }
@keyframes floating-heart { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6) rotate(-12deg); } 14% { opacity: .8; } 76% { opacity: .65; } 100% { opacity: 0; transform: translate3d(var(--drift), -93vh, 0) scale(1.4) rotate(20deg); } }
@keyframes paper-unfold { from { opacity: 0; transform: translateY(27px) rotateX(9deg) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes finale-glow { from { box-shadow: 0 24px 80px #09000c7a, 0 0 40px #f097a324; } to { box-shadow: 0 24px 80px #09000c7a, 0 0 100px #f097a352; } }
.story-card.is-celebrating { animation: finale-glow 2.4s ease-in-out infinite alternate; }
/* Responsive */
@media (max-width: 1120px) {
 .story-layout { padding-inline: 40px; grid-template-columns: minmax(0, .82fr) minmax(400px, 1fr); gap: 24px; }
 .card-body { padding: 38px; }
 .question-title { font-size: clamp(42px, 4vw, 58px); }
}
@media (max-width: 790px) {
 .site-header { padding: 18px 22px 6px; }
 .story-layout { grid-template-columns: 1fr; gap: 0; padding: 0 19px 22px; max-width: 560px; }
 .illustration-area { margin: -7px auto 12px; width: 100%; }
 .rose-display { width: clamp(205px, 57vw, 305px); aspect-ratio: 1 / .96; }
 .rose-display__flower { height: 118%; width: 118%; }
 .rose-display__outer-orbit { inset: 2%; }
 .illustration-caption { display: none; }
 .story-card { min-height: 0; border-radius: 24px; }
 .story-card::before { border-radius: 23px; }
 .card-body { padding: 34px 30px 37px; min-height: 0; }
 .intro-heading { margin-top: 16px; }
 .intro-heading__line { font-size: 64px; }
 .intro-heading h1 { font-size: clamp(88px, 16vw, 112px); }
 .intro-copy, .question-copy { line-height: 1.76; font-size: 14px; }
 .question-title { font-size: clamp(43px, 9vw, 62px); }
 .site-footer { max-width: 560px; padding: 0 22px 15px; font-size: 13px; }
 .below-card { min-height: 49px; }
}
@media (max-width: 430px) {
 .site-header { padding: 16px 17px 2px; }
 .signature { font-size: 22px; gap: 7px; }
 .signature__mark { width: 25px; height: 25px; }
 .signature__mark svg { width: 25px; height: 25px; }
 .header-actions__note { display: none; }
 .sound-button { padding: 0 12px; height: 36px; }
 .story-layout { padding: 0 13px 16px; }
 .rose-display { width: min(64vw, 264px); }
 .illustration-area { margin: 0 auto 0; }
 .card-body { padding: 30px 24px 30px; }
 .small-label { font-size: 9px; letter-spacing: .12em; }
 .intro-heading__line { font-size: clamp(55px, 14vw, 63px); }
 .intro-heading h1 { font-size: clamp(82px, 23vw, 104px); }
 .mini-flourish { margin: 7px 0 17px; }
 .intro-copy { margin-bottom: 23px; }
 .primary-button { min-height: 52px; padding: 13px 20px; font-size: 11px; gap: 13px; }
 .under-button { margin-top: 15px; font-size: 10px; }
 .progress-header { margin-bottom: 17px; }
 .question-eyebrow { margin-bottom: 10px; font-size: 20px; }
 .question-title { font-size: clamp(41px, 11.2vw, 50px); margin-bottom: 16px; }
 .question-copy { min-height: 0; margin-bottom: 22px; }
 .question-actions { gap: 10px 7px; }
 .question-actions .primary-button { padding: 12px 17px; min-height: 50px; }
 .secondary-button { padding: 11px 14px; min-height: 47px; font-size: 11px; }
 .final-heading { font-size: 56px; }
 .final-copy { font-size: 13px; line-height: 1.72; }
 .final-promise { font-size: 22px; }
 .site-footer { padding: 0 16px 13px; font-size: 12px; }
 .site-footer span:nth-child(2) { display: none; }
}
@media (max-width: 360px) {
 .rose-display { width: 190px; }
 .card-body { padding: 26px 18px; }
 .question-title { font-size: 38px; }
 .final-heading { font-size: 49px; }
 .site-footer { font-size: 11px; }
}
@media (min-width: 791px) and (max-height: 780px) { .story-layout { padding-block: 6px; } .rose-display { width: min(37vw, 440px); } .story-card, .card-body { min-height: 500px; } .site-header { padding-top: 20px; } .site-footer { padding-bottom: 14px; } }
@media (max-width: 790px) and (max-height: 740px) { .rose-display { width: 205px; } .card-body { padding-block: 25px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .petals, .ambient-hearts { display: none; } }