.love-letter{--env-w:clamp(14rem, 62vw, 16.5rem);isolation:isolate;width:min(100%,26rem);padding:calc(var(--env-w) * .5) 0 .9rem;justify-items:center;margin:-.4rem 0 0;display:grid;position:relative}.love-letter__envelope{width:var(--env-w);aspect-ratio:1.6;background:linear-gradient(#cdb6f7,#c3a8f4);border-radius:8px;animation:3.8s ease-in-out infinite love-bob;position:relative;box-shadow:0 2px #221a2c24,0 14px 26px #3a28163d}.love-letter__flap{clip-path:polygon(0 100%,50% 0,100% 100%);background:linear-gradient(#c4a6f5,#a47ded);height:56%;position:absolute;bottom:calc(100% - 1px);left:0;right:0}.love-letter__photos{height:0;clip-path:inset(-60rem 0 calc(var(--env-w) / 1.6 * -.78 + 3px) 0);position:absolute;bottom:78%;left:0;right:0}.love-letter__photo{--pw:calc(var(--env-w) * .24);z-index:var(--row);bottom:0;left:calc(50% - var(--pw) / 2 + var(--x) * var(--env-w) * .22);width:var(--pw);padding:calc(var(--pw) * .06) calc(var(--pw) * .06) calc(var(--pw) * .16);transform-origin:50% 100%;rotate:var(--tilt);translate:0 calc(var(--row) * var(--pw) * .62);animation:love-pick 4.2s ease-in-out calc(var(--n) * .6s) infinite;background:#fffdf8;border-radius:2px;position:absolute;box-shadow:0 2px 5px #221a2c40}.love-letter__photo:after{content:"";height:calc(var(--env-w) * .5);background:#fffdf8;position:absolute;top:calc(100% - 1px);left:0;right:0;box-shadow:1px 0 2px #221a2c2e,-1px 0 2px #221a2c2e}.love-letter__shot{aspect-ratio:1/1.15;background:var(--tone);display:block;position:relative;overflow:hidden}.love-letter__shot img{left:var(--px);width:var(--iw);max-width:none;height:auto;margin-top:var(--py);position:absolute;top:0}.love-letter__front{z-index:2;filter:drop-shadow(0 -1.5px #7438c959);position:absolute;inset:0}.love-letter__pocket{clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);background:linear-gradient(170deg,#d9c6fa,#b896f2);border-radius:8px;position:absolute;inset:0;box-shadow:inset 0 -3px #7438c940}.love-letter__to,.love-letter__from{color:#3a1d68;font-family:var(--font-hand);font-size:calc(var(--env-w) * .085);font-weight:700;line-height:1;position:absolute;bottom:10%}.love-letter__to{left:8%;rotate:-4deg}.love-letter__from{right:8%;rotate:3deg}.love-letter__seal{z-index:3;width:calc(var(--env-w) * .19);filter:drop-shadow(1px 2px 1px #221a2c4d);animation:2.4s ease-in-out infinite love-beat;position:absolute;top:54%;left:50%;translate:-50% -50%}.love-letter__seal circle{fill:#4b1f8f}.love-letter__seal path{fill:#f7a8c8}.love-letter__heart{z-index:-1;filter:drop-shadow(2px 3px #221a2c1f);animation:love-rise var(--d) ease-in-out var(--delay) infinite;position:absolute}.love-letter__heart--pink{fill:#f2a3c3}.love-letter__heart--lilac{fill:#c9b2f5}.love-letter__heart--purple{fill:#8b5cf6}@keyframes love-bob{0%,to{transform:translateY(0)rotate(-1.5deg)}50%{transform:translateY(-7px)rotate(1deg)}}@keyframes love-pick{0%,16%,to{transform:translateY(0)}7%{transform:translateY(-16%)}}@keyframes love-beat{0%,60%,to{transform:scale(1)}70%{transform:scale(1.14)}80%{transform:scale(.98)}}@keyframes love-rise{0%{opacity:0;transform:translateY(14px)scale(.85)rotate(-8deg)}25%,65%{opacity:1}to{opacity:0;transform:translateY(-46px)scale(1.05)rotate(10deg)}}.quiz[data-look=love]{isolation:isolate;position:relative}.quiz[data-look=love]:not([data-playing]) .quiz__lead,.quiz[data-look=love]:not([data-playing]) .quiz__hero .eyebrow{color:var(--text)}.quiz[data-look=love] .quiz__doodle:nth-child(3n+1){fill:#f7a8c8}.quiz[data-look=love] .quiz__doodle:nth-child(3n+2){fill:#fffdf8}.quiz[data-look=love] .quiz__doodle:nth-child(3n){fill:#e0577f}.quiz[data-look=love] .quiz__burst i{clip-path:path("M11 20 C4 14.5 1.5 10.5 3.2 6.6 C5 2.8 9.2 3 11 6.6 C12.8 3 17 2.8 18.8 6.6 C20.5 10.5 18 14.5 11 20 Z");background:#e0577f}.quiz[data-look=love] .quiz__burst i:nth-child(3n+1){background:#f7a8c8}.quiz[data-look=love] .quiz__burst i:nth-child(3n+2){background:#b48af0}@media (prefers-reduced-motion:reduce){.love-letter__envelope,.love-letter__photo,.love-letter__seal,.love-letter__heart{animation:none}}