:root{--cream:#fff8f4;--paper:#fffdf9;--blush:#fbe6eb;--pink:#f5cbd6;--rose:#d8738c;--red:#ad2448;--red-dark:#831936;--ink:#492833;--muted:#875d6a;--line:#e6b5c2;--shadow:0 24px 60px rgba(126,33,63,.17)}
*{box-sizing:border-box}
html{min-height:100%;scrollbar-color:#d8aab3 #f8e7e6}
body{margin:0;min-height:100svh;background-image:radial-gradient(circle at 50% 34%,rgba(255,250,245,.83),transparent 47%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Cpath d='M18 17c-3-5-10-2-8 4l8 8 8-8c2-6-5-9-8-4z' fill='%23b53c5d' fill-opacity='.18'/%3E%3Cpath d='M72 59c-2-4-8-2-7 3l7 7 7-7c1-5-5-7-7-3z' fill='%23b53c5d' fill-opacity='.13'/%3E%3Ccircle cx='50' cy='27' r='1.2' fill='%23b53c5d' fill-opacity='.2'/%3E%3C/svg%3E"),linear-gradient(145deg,#fff2f0 0%,#fbe1e8 55%,#f7d4df 100%);background-size:auto,92px 92px,auto;background-attachment:fixed;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible{outline:3px solid var(--red-dark);outline-offset:5px}
[hidden]{display:none!important}
.shell{width:min(100%,720px);min-height:100svh;margin:auto;padding:24px clamp(18px,5vw,48px) 18px;display:flex;flex-direction:column;position:relative;isolation:isolate}
.shell:before{content:"";position:absolute;inset:15px 9px;z-index:-1;border:1px solid rgba(172,41,72,.13);border-radius:26px;pointer-events:none}
.topline,.footer{display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.26em;color:var(--muted)}
.topline{padding:5px 8px}.topline-mark{font-size:24px;line-height:10px;color:var(--red);font-weight:400;letter-spacing:0}.footer{justify-content:center;gap:8px;padding-top:18px;padding-bottom:7px}.footer span{color:var(--red);font-size:15px;line-height:0}
.scene{width:100%;flex:1;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:22px 0 12px;animation:scene-in .42s both}
.scene.is-active{display:flex}
.eyebrow{display:block;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:24px}
h1,h2,p{margin:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;width:100%}h1{font-size:clamp(38px,7vw,58px);line-height:1.08;max-width:540px}h2{font-size:clamp(34px,6.6vw,52px);line-height:1.13;max-width:570px}
.button{min-height:54px;padding:14px 25px;border-radius:100px;border:1px solid transparent;font-weight:700;font-size:15px;letter-spacing:.01em;display:inline-flex;align-items:center;justify-content:center;gap:22px;box-shadow:0 7px 17px rgba(134,33,59,.1);transition:transform .2s,box-shadow .2s,background .2s}.button:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(134,33,59,.17)}.button:active{transform:translateY(1px)}.button-primary{background:var(--red);color:white}.button-primary:hover{background:var(--red-dark)}.button-soft{background:rgba(255,255,255,.7);color:var(--red-dark);border-color:var(--line);box-shadow:none}.button-soft:hover{background:white}.button span{font-size:18px;font-weight:400}.hint{font-size:12px;color:var(--muted);letter-spacing:.1em;margin-top:22px}
.ambient{position:fixed;color:rgba(172,41,72,.28);pointer-events:none;font-family:Georgia,serif;z-index:0;animation:float 6s ease-in-out infinite}.ambient-one{top:23%;left:max(3%,calc(50% - 440px));font-size:37px;transform:rotate(-15deg)}.ambient-two{top:31%;right:max(5%,calc(50% - 460px));font-size:37px;animation-delay:-2s}.ambient-three{bottom:19%;right:max(3%,calc(50% - 430px));font-size:22px;animation-delay:-3.5s}
.scene-opening{justify-content:center;padding-top:10px}.opening-copy{margin-bottom:35px}.opening-copy .eyebrow{margin-bottom:14px}.envelope-button{border:0;background:transparent;padding:10px;width:min(88vw,380px);height:240px;display:grid;place-items:center;filter:drop-shadow(0 22px 24px rgba(129,51,69,.19));transition:transform .25s}.envelope-button:hover:not(:disabled){transform:translateY(-5px) rotate(-1deg)}.envelope-button:active:not(:disabled){transform:scale(.98)}.envelope{position:relative;display:block;width:100%;height:220px;perspective:700px}.envelope-back,.envelope-front,.envelope-flap,.letter-peek{position:absolute;display:block}.envelope-back{inset:25px 0 0;background:#e9bfc4;border-radius:8px}.letter-peek{left:9%;right:9%;top:36px;height:156px;background:var(--paper);border-radius:6px;box-shadow:0 3px 10px rgba(120,57,75,.08);z-index:2;display:grid;place-items:start center;padding-top:29px;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.letter-heart{font-family:Georgia,serif;font-size:27px;color:var(--red)}.envelope-front{inset:25px 0 0;z-index:4;background:#f2ced1;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border-radius:7px}.envelope-front:after{content:"";position:absolute;inset:0;background:#f6d9d9;clip-path:polygon(0 100%,50% 48%,100% 100%)}.envelope-flap{left:0;right:0;top:25px;height:117px;z-index:5;background:#e8b6bf;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:center top;transition:transform .65s cubic-bezier(.2,.8,.2,1),z-index 0s .3s}.seal{position:absolute;z-index:6;left:50%;top:133px;transform:translate(-50%,-50%);background:var(--red);color:#fff3f0;font:24px Georgia,serif;width:47px;height:47px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 7px rgba(102,36,54,.18);transition:opacity .2s}.scene-opening.is-open .envelope-flap{transform:rotateX(180deg);z-index:1}.scene-opening.is-open .letter-peek{transform:translateY(-73px)}.scene-opening.is-open .seal{opacity:0}.scene-opening.is-open .envelope-button{filter:drop-shadow(0 14px 17px rgba(129,51,69,.13))}.letter-message{margin-top:13px;animation:scene-in .45s both}.letter-message p{font:italic 20px Georgia,serif;margin-bottom:22px}.scene-opening.is-open .opening-copy{opacity:.15;transition:opacity .45s}
.scene-question .eyebrow,.scene-no .eyebrow,.scene-gift .eyebrow,.scene-notes .eyebrow{margin-bottom:25px}.question-art{width:112px;height:112px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.42);margin-bottom:34px;box-shadow:inset 0 0 0 11px rgba(255,255,255,.25)}.question-art span{font:68px Georgia,serif;color:var(--red);transform:rotate(-12deg)}.scene-question h2{max-width:580px}.choices{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:36px}.scene-no p{font:20px/1.5 Georgia,serif;max-width:460px;margin:20px 0 34px;color:#70515b}.small-heart{font:88px Georgia,serif;color:var(--rose);line-height:1;margin-bottom:27px;transform:rotate(10deg)}
.scene-gift h2{margin-bottom:20px}.gift-button{border:0;background:transparent;width:285px;height:265px;display:grid;place-items:center;padding:10px;filter:drop-shadow(0 18px 17px rgba(134,33,59,.16));transition:transform .2s}.gift-button:hover:not(:disabled){transform:translateY(-7px)}.gift-button:active:not(:disabled){transform:scale(.97)}.gift-box{display:block;width:212px;height:190px;position:relative}.gift-body{position:absolute;left:16px;right:16px;top:70px;bottom:0;background:#d993a1;border:2px solid #bd6e7d;border-radius:3px 3px 10px 10px}.gift-lid{position:absolute;left:0;right:0;top:51px;height:42px;background:#e8abb3;border:2px solid #bd6e7d;border-radius:5px;z-index:3;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.gift-ribbon-vertical{position:absolute;z-index:4;width:31px;left:calc(50% - 15.5px);top:52px;bottom:0;background:#a92c49;pointer-events:none;transition:clip-path .3s}.gift-ribbon-horizontal{position:absolute;z-index:4;left:17px;right:17px;top:117px;height:24px;background:#a92c49;pointer-events:none}.gift-bow{position:absolute;top:12px;width:60px;height:45px;border:11px solid #a92c49;border-radius:60% 60% 50% 50%;z-index:5;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.bow-left{left:48px;transform:rotate(24deg)}.bow-right{right:48px;transform:rotate(-24deg)}.scene-gift.is-open .gift-lid{transform:translateY(-76px) rotate(-9deg)}.scene-gift.is-open .bow-left{transform:translateY(-76px) rotate(7deg)}.scene-gift.is-open .bow-right{transform:translateY(-76px) rotate(-41deg)}.scene-gift.is-open .gift-ribbon-vertical{clip-path:inset(43px 0 0 0)}
.scene-notes{gap:0}.note-stack{width:min(100%,440px);height:320px;position:relative;margin:16px 0 34px}.stack-sheet,.note-card{position:absolute;inset:0;border:1px solid #eddbd0;border-radius:6px;background:var(--paper);box-shadow:var(--shadow)}.stack-sheet-one{transform:rotate(-5deg) translate(-2px,6px);background:#f4dadb}.stack-sheet-two{transform:rotate(4deg) translate(4px,4px);background:#fff3ee}.note-card{width:100%;padding:29px 29px 25px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:var(--ink);text-align:center;transition:transform .2s,opacity .2s}.note-card:hover{transform:translateY(-5px) rotate(-.5deg)}.note-card:active{transform:scale(.985)}.note-card.turning{opacity:0;transform:translateX(35px) rotate(6deg)}.note-number,.note-tap{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.note-heart{position:absolute;top:23px;right:24px;color:var(--red);font:27px Georgia,serif}.note-text{font:clamp(25px,5vw,36px)/1.2 Georgia,serif;letter-spacing:-.03em;max-width:355px}.note-tap{font-weight:400}.note-tap span{font-size:16px}
.scene-final{padding-top:35px}.scene-final .eyebrow{margin-bottom:25px}.keepsake{width:min(100%,405px);padding:16px 16px 20px;background:var(--paper);box-shadow:0 24px 56px rgba(107,46,61,.19);transform:rotate(-1.5deg);animation:keepsake-in .8s both}.photo-wrap{width:100%;aspect-ratio:500/540;overflow:hidden;background:#efd8d8}.photo-wrap img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 31%}.keepsake-copy{padding:19px 8px 3px}.keepsake h2{font-size:clamp(28px,5vw,38px);line-height:1.13}.keepsake p{font:italic 23px Georgia,serif;color:var(--red);margin-top:11px}.signature{display:block;color:var(--muted);font:14px Georgia,serif;margin-top:15px}
@keyframes scene-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}@keyframes keepsake-in{from{opacity:0;transform:translateY(22px) rotate(3deg) scale(.96)}to{opacity:1;transform:rotate(-1.5deg) scale(1)}}
@media(max-width:560px){.shell{padding:21px 24px 14px}.shell:before{inset:12px 8px}.scene{padding-top:12px}.opening-copy{margin-bottom:18px}.envelope-button{height:215px}.envelope{transform:scale(.83)}.scene-opening.is-open .opening-copy{display:none}.scene-opening.is-open .letter-message{margin-top:19px}.choices{flex-direction:column;width:min(100%,300px)}.choices .button{width:100%}.note-stack{height:300px;margin:10px 0 27px}.note-card{padding:23px}.scene-final{padding-top:18px}.keepsake{width:min(100%,350px)}}
@media(max-height:700px){.scene-opening .opening-copy h1{font-size:clamp(32px,6vw,46px)}.opening-copy{margin-bottom:10px}.envelope-button{height:195px}.envelope{transform:scale(.78)}.scene-final{justify-content:flex-start}.scene-final .eyebrow{margin-bottom:13px}.keepsake{max-width:340px}.photo-wrap{aspect-ratio:500/420}.keepsake-copy{padding-top:12px}.keepsake h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Valentine stationery details. */
.shell:before{border-color:rgba(164,36,72,.22);background:linear-gradient(180deg,rgba(255,253,249,.23),rgba(255,246,246,.13));box-shadow:inset 0 0 0 5px rgba(255,255,255,.16)}
.eyebrow:before,.eyebrow:after{content:"♥";font-size:10px;letter-spacing:0;color:var(--rose);margin:0 12px;vertical-align:1px}
.ambient{font-size:22px;opacity:.75}.ambient-one{top:20%;left:max(2%,calc(50% - 420px))}.ambient-two{top:32%;right:max(3%,calc(50% - 440px))}.ambient-three{bottom:16%;right:max(2%,calc(50% - 430px))}
.button-primary{background:linear-gradient(135deg,#bf3156,var(--red-dark));box-shadow:0 9px 22px rgba(131,25,54,.2)}
.button-primary:hover{background:linear-gradient(135deg,#c94467,#942341)}
.question-art{background:radial-gradient(circle,#fffdfa 0%,#ffe9ef 72%);border:2px solid #edbdca;box-shadow:0 0 0 9px rgba(255,250,248,.46),0 12px 26px rgba(131,25,54,.08)}
.question-art span{font-family:Arial,Helvetica,sans-serif;font-size:52px;transform:rotate(-11deg)}
.no-emblem{width:120px;height:120px;display:grid;place-items:center;margin:1px 0 30px;background:radial-gradient(circle,#fffdfa,#ffe1e9);border:2px solid #eeb8c8;border-radius:50%;box-shadow:0 0 0 10px rgba(255,255,255,.42),0 12px 27px rgba(131,25,54,.1);position:relative}
.no-emblem span{font:58px Arial,Helvetica,sans-serif;transform:rotate(-8deg)}
.no-emblem:after{content:"♥";position:absolute;right:-23px;top:8px;color:var(--red);font-size:22px;transform:rotate(18deg)}
.scene-no p{margin-top:18px}
.note-stack{height:350px;margin:10px 0 30px}
.stack-sheet-one{background:#f1bccb}.stack-sheet-two{background:#ffe8ed}
.note-card{padding:27px 25px 22px;display:grid;grid-template-rows:20px 105px 115px 18px;justify-items:center;align-content:space-between;align-items:center;gap:0;overflow:hidden;background:linear-gradient(160deg,#fffdf9 0%,#fff8f7 100%);border-color:#e6adb9}
.note-card:before{content:"";position:absolute;inset:10px;border:1px dashed rgba(184,67,99,.34);border-radius:3px;pointer-events:none}
.note-number{align-self:start;position:relative;z-index:1}
.note-mood{width:96px;height:96px;display:grid;place-items:center;border:1px solid #efc0cd;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffdf9,#ffe2ea);box-shadow:0 9px 19px rgba(173,36,72,.12),inset 0 0 0 6px rgba(255,255,255,.5);font:52px Arial,Helvetica,sans-serif;line-height:1;transform:rotate(-7deg);position:relative;z-index:1}
.note-text{font-size:clamp(25px,5vw,33px);line-height:1.14;max-width:355px;position:relative;z-index:1}
.note-heart{font-size:23px;top:17px;right:21px}
.note-tap{align-self:end;position:relative;z-index:1}
.keepsake{background:#fffdf9;border:1px solid #edc4cc;box-shadow:0 24px 60px rgba(131,25,54,.22)}
.keepsake-copy:before{content:"♥  ♥  ♥";display:block;margin:1px 0 11px;color:var(--rose);font-size:11px;letter-spacing:10px}
.keepsake p{margin-top:13px}.signature{margin-top:17px}
@media(max-width:560px){.scene-no h2{font-size:clamp(31px,8vw,42px)}.note-stack{height:340px;margin:8px 0 26px}.note-card{padding:23px 20px 20px;grid-template-rows:18px 94px 116px 16px}.note-mood{width:88px;height:88px;font-size:48px}.note-text{font-size:clamp(25px,6vw,30px)}.note-tap{font-size:10px}.eyebrow:before,.eyebrow:after{margin:0 8px}}
@media(max-height:700px){.note-stack{height:320px}.note-card{grid-template-rows:17px 80px 112px 15px}.note-mood{width:76px;height:76px;font-size:42px}.note-text{font-size:clamp(23px,5vw,29px)}.no-emblem{width:100px;height:100px;margin-bottom:21px}.no-emblem span{font-size:48px}}
h2[tabindex="-1"]:focus{outline:none}

/* The message stays at the exact center while the card changes. */
.note-stack{margin-bottom:12px}
.note-card{display:block;padding:0;touch-action:pan-y;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease,box-shadow .25s ease}
.note-card:not(.turning):hover{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px);box-shadow:0 28px 65px rgba(126,33,63,.23)}
.note-card.turning,.note-card.turning:hover{opacity:0;transform:translateX(var(--turn-distance,-35px)) rotate(var(--turn-angle,-5deg)) scale(.95)}
.note-number{position:absolute;top:22px;left:50%;transform:translateX(-50%);white-space:nowrap}
.note-mood{position:absolute;top:51px;left:50%;width:68px;height:68px;font-size:40px;transform:translateX(-50%) rotate(-7deg)}
.note-text{position:absolute;top:50%;left:26px;right:26px;width:auto;max-width:none;transform:translateY(-50%);text-align:center;margin:0 auto;display:block}
.note-tap{position:absolute;bottom:20px;left:14px;right:14px;text-align:center;white-space:normal}
.note-progress{min-height:26px;display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 17px;color:#d5a6b3}
.note-progress span{font-size:14px;line-height:1;transition:transform .24s,color .24s}
.note-progress span.is-filled{color:var(--red);transform:scale(1.16)}
.note-actions{display:flex;gap:11px;width:min(100%,360px);justify-content:center}
.note-actions .button{flex:1;min-width:0;padding-left:15px;padding-right:15px}
.note-actions #previous-button{flex:.8}.note-actions #next-button{flex:1.2}
.button-soft:disabled{opacity:.46;cursor:default;transform:none;box-shadow:none}
.note-burst{position:absolute;inset:0;overflow:visible;pointer-events:none}
.note-burst span,.photo-hearts span{position:absolute;left:50%;top:52%;color:#c73458;font:22px Georgia,serif;opacity:0;animation:heart-fly .75s ease-out var(--heart-delay,0ms) forwards}
.gift-button{position:relative}
.scene-gift.is-open .gift-button:after{content:"♥  ✦  ♥";position:absolute;top:1px;left:50%;transform:translateX(-50%);color:var(--red);font-size:22px;white-space:nowrap;animation:gift-spark .65s ease-out both;pointer-events:none}
.envelope-button{position:relative}
.scene-opening.is-open .envelope-button:after{content:"♡  ♥  ♡";position:absolute;top:-15px;left:50%;transform:translateX(-50%);color:var(--red);font-size:19px;white-space:nowrap;animation:gift-spark .8s ease-out both;pointer-events:none}
.photo-wrap{position:relative}
.photo-heart-button{position:absolute;right:12px;bottom:12px;width:46px;height:46px;display:grid;place-items:center;border:1px solid #f0bac7;border-radius:50%;background:rgba(255,251,248,.95);color:var(--red);font-size:26px;box-shadow:0 4px 14px rgba(60,20,32,.25);transition:transform .2s,background .2s}
.photo-heart-button:hover{transform:scale(1.12);background:#fff3f6}.photo-heart-button:active{transform:scale(.96)}.photo-heart-button.popping{animation:heart-pop .55s ease}
.photo-hearts{position:absolute;inset:0;overflow:hidden;pointer-events:none}.photo-hearts span{left:85%;top:83%;color:white;text-shadow:0 1px 5px var(--red)}
@keyframes heart-fly{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--heart-x)), -115px) scale(1.25)}}
@keyframes gift-spark{0%{opacity:0;translate:0 18px;scale:.65}40%{opacity:1}100%{opacity:0;translate:0 -35px;scale:1.1}}
@keyframes heart-pop{0%,100%{scale:1}45%{scale:1.28}}
@media(max-width:560px){.note-stack{margin-bottom:9px}.note-progress{margin-bottom:13px}.note-mood{top:47px;width:64px;height:64px;font-size:38px}.note-text{left:19px;right:19px}.note-actions{width:min(100%,320px)}}
@media(max-height:700px){.note-mood{top:44px;width:61px;height:61px;font-size:36px}.note-progress{margin-bottom:10px}.note-actions .button{min-height:49px}}

/* Touch-friendly love details. */
.topline-heart{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(173,36,72,.25);border-radius:50%;background:rgba(255,249,249,.78);color:var(--red);font:22px Georgia,serif;letter-spacing:0;box-shadow:0 5px 14px rgba(173,36,72,.1);transition:transform .25s,background .25s,box-shadow .25s}
.topline-heart:hover{transform:scale(1.11);background:#fff7f9;box-shadow:0 8px 20px rgba(173,36,72,.2)}
.topline-heart:active{transform:scale(.94)}.topline-heart.is-blooming{background:#ffd8e4;animation:heart-pop .75s ease}
.shell:after{content:"♥     ♡     ♥     ♡     ♥";position:absolute;top:80px;left:50%;transform:translateX(-50%);color:#d9879b;font:12px Georgia,serif;letter-spacing:10px;white-space:nowrap;opacity:.42;pointer-events:none}
.scene-opening{position:relative;isolation:isolate}
.scene-opening:before{content:"♡";position:absolute;z-index:-1;left:50%;top:48%;transform:translate(-50%,-50%);font:clamp(330px,76vw,560px)/1 Georgia,serif;color:rgba(173,36,72,.065);pointer-events:none}
.seal{animation:seal-beat 3s ease-in-out infinite}
.scene-opening.is-open .seal{animation:none}
.question-art{animation:gentle-heartbeat 3.4s ease-in-out infinite}
.gift-body:after{content:"♥";position:absolute;right:21px;top:18px;color:#fff2f4;font:26px Georgia,serif;opacity:.9}
.photo-heart-button:not(.popping){animation:heart-hint 3s ease-in-out infinite}
.heart-shower{position:fixed;inset:0;z-index:12;overflow:hidden;pointer-events:none}
.falling-heart{position:absolute;top:-35px;color:#c83b61;font-family:Georgia,serif;font-size:var(--fall-size,16px);opacity:0;text-shadow:0 2px 8px rgba(255,255,255,.7);animation:heart-fall 3.3s ease-in var(--fall-delay,0ms) forwards}
.touch-heart{position:absolute;color:#b7264b;font:18px Georgia,serif;opacity:0;animation:touch-heart-rise .85s ease-out forwards}
@keyframes seal-beat{0%,85%,100%{scale:1}91%{scale:1.07}}
@keyframes gentle-heartbeat{0%,78%,100%{transform:scale(1)}86%{transform:scale(1.035)}}
@keyframes heart-hint{0%,100%{box-shadow:0 4px 14px rgba(60,20,32,.25),0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 4px 14px rgba(60,20,32,.25),0 0 0 10px rgba(255,255,255,0)}}
@keyframes heart-fall{0%{opacity:0;transform:translate(0,0) rotate(-15deg) scale(.7)}12%{opacity:.75}85%{opacity:.72}100%{opacity:0;transform:translate(var(--fall-drift,20px),105vh) rotate(22deg) scale(1.15)}}
@keyframes touch-heart-rise{0%{opacity:0;transform:translate(-50%,-20%) scale(.65)}20%{opacity:.9}100%{opacity:0;transform:translate(-50%,-85px) scale(1.25)}}
@media(max-width:560px){.shell:after{top:70px;letter-spacing:5px;font-size:10px}.scene-opening:before{font-size:330px}}