*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:linear-gradient(0deg,#2d1d27,#120b12);--color-glass:linear-gradient(270deg,#f0c5d5,#c88ea8);--color-water:linear-gradient(270deg,#4f79b5,#6ab2df)}body{align-items:flex-end;background-image:var(--color-bg);display:flex;justify-content:center;min-height:100vh;overflow:hidden}body:before{animation:hearts-rise 24s linear infinite;color:#ffbbd524;content:"♥     ♥         ♥    ♥     ♥         ♥\a   ♥        ♥      ♥        ♥\a♥        ♥       ♥   ♥        ♥\a    ♥       ♥       ♥       ♥\a♥     ♥         ♥    ♥     ♥         ♥\a   ♥        ♥      ♥        ♥\a♥        ♥       ♥   ♥        ♥";font-size:clamp(18px,2.2vmin,30px);letter-spacing:3.8vmin;line-height:2.1;transform:rotate(-6deg) scale(1.08);transform-origin:center}body:after,body:before{inset:-12vmax;pointer-events:none;position:fixed;white-space:pre;z-index:0}body:after{animation:hearts-rise 30s linear infinite;animation-delay:-9s;color:#ffaacc1a;content:"♥   ♥     ♥     ♥   ♥     ♥\a  ♥     ♥      ♥     ♥\a♥       ♥   ♥   ♥       ♥   ♥\a    ♥     ♥      ♥     ♥\a♥  ♥     ♥     ♥  ♥     ♥\a  ♥     ♥      ♥     ♥\a♥       ♥   ♥   ♥       ♥   ♥";font-size:clamp(16px,2vmin,26px);letter-spacing:4.2vmin;line-height:2.4;transform:rotate(5deg) scale(1.03);transform-origin:center}.flower{position:relative;z-index:1}.letter{background:transparent;border:0;bottom:.8vmin;cursor:pointer;height:16vmin;left:66%;overflow:hidden;padding:0;transform:rotate(-16deg);transform-origin:bottom left;transition:transform .65s ease,left .65s ease,bottom .65s ease,width .65s ease,height .65s ease;width:12vmin;z-index:8}.letter,.letter__back{clip-path:polygon(12% 6%,88% 0,98% 92%,0 100%);position:absolute}.letter__back{background:linear-gradient(to bottom right,#ffd2a6,#ff9a4e 68%,#d96a1d);border-radius:1.2vmin;box-shadow:-.8vmin 1.4vmin 2.5vmin #00000047;inset:0;z-index:1}.letter__flap{background:linear-gradient(180deg,#ffe1c4,#ffad66 80%);border-radius:.8vmin;clip-path:polygon(0 0,100% 0,50% 100%);height:6.5vmin;left:.6vmin;position:absolute;right:.6vmin;top:.2vmin;transform-origin:top;transition:transform .65s ease;z-index:3}.letter__paper{align-items:center;background:#fff8ef;border-radius:.9vmin;bottom:1.2vmin;display:flex;flex-direction:column;gap:.55vmin;height:12vmin;left:1.2vmin;opacity:0;overflow:hidden;padding:.8vmin;position:absolute;right:1.2vmin;transform:translateY(8.3vmin);transition:transform .7s ease,opacity .26s ease;z-index:2}.letter__cat{border:.15vmin solid #f2a15e;border-radius:.7vmin;height:100%;-o-object-fit:cover;object-fit:cover;opacity:0;transform:scale(.9);transition:opacity .35s ease .28s,transform .35s ease .28s;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.letter__slider{border-radius:.7vmin;flex:0 0 auto;height:7.2vmin;overflow:hidden;touch-action:pan-y;width:100%}.letter__track{display:flex;height:100%;transition:transform .42s ease;width:100%}.letter__slide{height:100%;min-width:100%}.letter__text{color:#8b4a1f;font-size:1.05vmin;font-weight:600;line-height:1.25;max-width:100%;opacity:0;overflow-wrap:anywhere;text-align:center;transform:translateY(.8vmin);transition:opacity .35s ease .34s,transform .35s ease .34s;white-space:normal;word-break:break-word}.letter--open{bottom:auto;clip-path:none;height:40vmin;left:50%;overflow:visible;position:fixed;top:50%;transform:translate(-50%,-50%) rotate(-2deg);width:30vmin;z-index:70}.letter--open .letter__flap{transform:rotateX(180deg);z-index:0}.letter--open .letter__paper{gap:.8vmin;height:31vmin;opacity:1;overflow-y:auto;padding:1.2vmin;transform:translateY(-15.8vmin);z-index:4}.letter--open .letter__cat{height:100%}.letter--open .letter__slider{height:20vmin}.letter--open .letter__text{font-size:clamp(12px,1.35vmin,18px);line-height:1.35}.letter--open .letter__cat,.letter--open .letter__text{opacity:1;transform:translateY(0) scale(1)}.letter:focus-visible{outline:.2vmin solid #ffd8e6;outline-offset:.35vmin}.tap-hint{animation:hint-pulse 2.2s ease-in-out infinite;color:#ffeef680;font-size:clamp(11px,1.45vmin,18px);left:50%;letter-spacing:.09em;pointer-events:none;position:fixed;text-shadow:0 0 1.8vmin rgba(255,225,238,.12);text-transform:lowercase;top:16%;transform:translate(-50%);z-index:6}.flower__glass{background-image:var(--color-glass);clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);height:30vmin;opacity:.8;position:relative;width:20vmin}.flower__glass:after{background-color:#7b4d66;height:2vmin}.flower__glass:after,.flower__glass:before{bottom:0;content:"";left:0;position:absolute;width:100%}.flower__glass:before{background-image:var(--color-water);height:15vmin}.f-wrapper{bottom:2vmin;left:45%;position:absolute}.f-wrapper--2{bottom:5%;left:50%;transform:rotate(20deg);transform-origin:10% left}.f-wrapper--3{bottom:5%;left:30%;transform:rotate(-10deg);transform-origin:10% left}.f-wrapper--3 .flower__line{height:45vmin;position:relative}.f-wrapper--3 .flower__line:after{border:2vmin solid #5f4357;border-bottom:transparent;border-left:transparent;border-radius:10vmin 10vmin 0 0;content:"";height:6vmin;left:0;position:absolute;top:0;transform:translate(-69%,-30%) rotate(-5deg);width:6vmin}.f-wrapper--3 .flower__line:before{background-color:#5f4357;border-radius:2vmin;content:"";height:2vmin;left:-40%;position:absolute;top:-1%;transform:translate(-100%,-80%) rotate(-20deg);transform-origin:right;width:6vmin}.f-wrapper--3 .flower__line{background-image:linear-gradient(0deg,#7a5d6e,#5f4357)}.f-wrapper--2 .flower__line{height:45vmin}.f-wrapper--2 .f{transform:translate(-50%) rotate(20deg)}.f-wrapper--3 .f{transform:translate(-350%,-50%) rotate(-120deg)}.f-wrapper--2 .flower__leaf:not(:first-child){background-image:linear-gradient(180deg,#ffbe7a,#f38737,#4a281a 99%);height:10vmin;width:3.8vmin}.f-wrapper--3 .flower__leaf:not(:first-child){background-image:linear-gradient(180deg,#ff8e8e,#e24a4a,#451f27 99%);height:10vmin;width:3.8vmin}.f-wrapper--3 .flower__leaf--1{background-color:#f26f6f;bottom:2vmin;height:10vmin;width:8vmin}.f-wrapper--2 .flower__leaf--1{background-color:#f59b44;bottom:2vmin;height:10vmin;width:8vmin}.f-wrapper--2 .f .flower__leaf--8{background-image:linear-gradient(to left bottom,#ffd199,#b45a20);bottom:3vmin;height:9vmin;left:-30%;transform:rotate(-50deg);width:10vmin}.f-wrapper--3 .f .flower__leaf--8{background-image:linear-gradient(to left bottom,#ffacac,#a33348);height:9vmin;left:-10%!important;width:10vmin}.flower__line{background-image:linear-gradient(to left top,#f5bfd1 20%,#7a5d6e,#5f4357);border-radius:4vmin;height:56vmin;width:2vmin}.f{height:2vmin;top:1vmin;transform:translate(-50%) rotate(-10deg);width:2vmin}.f,.flower__leaf{left:50%;position:absolute}.flower__leaf{animation:open-flower 2s 1s backwards;background-image:linear-gradient(180deg,#ffd2df,#e8a3bd,#3b2432 99%);bottom:2vmin;clip-path:ellipse(50% 50% at 50% 50%);height:14vmin;transform:translate(-50%);transform-origin:center bottom;width:5vmin}.flower__leaf--1{animation:open-flowe--middle 1.4s 1s backwards;background-color:#f1b0c8;background-image:none;border-radius:50%/80% 80% 20% 20%;bottom:3vmin;height:12vmin;width:10vmin}.flower__leaf--2{transform:translate(-50%) rotate(-30deg)}.flower__leaf--3{transform:translate(-50%) rotate(-50deg)}.flower__leaf--4{transform:translate(-50%) rotate(-70deg)}.flower__leaf--5{transform:translate(-50%) rotate(30deg)}.flower__leaf--6{transform:translate(-50%) rotate(50deg)}.flower__leaf--7{transform:translate(-50%) rotate(70deg)}.flower__leaf--8{background-image:linear-gradient(to left bottom,#ffd4e2,#e5a2bb,#6f4159 98%);border-radius:10vmin 2vmin;bottom:6vmin;clip-path:none;height:11vmin;left:-30%;transform:rotate(-55deg);width:13vmin}.flower__fall-down--yellow{animation:flower-fall-down-yellow 8s linear 1.2s forwards}.flower__fall-down--pink{animation:flower-fall-down-pink 5s linear 1.2s forwards}.flower__fall-down--purple{animation:flower-fall-down-purple 6s linear 1.2s forwards,flower-falling 6s linear 7.2s infinite;bottom:4vmin}@keyframes open-flower{0%{transform:translate(-50%) rotate(0)}}@keyframes open-flowe--middle{0%{opacity:0;transform:translate(-50%) scale(0)}}@keyframes flower-fall-down-pink{0%{transform:rotate(-55deg)}50%{transform:rotateX(-100deg)}to{transform:translate(2vmin,28vmin)}}@keyframes flower-fall-down-yellow{0%{transform:rotate(-55deg)}50%{bottom:3vmin;transform:rotateX(-100deg)}to{transform:translate(2vmin,70vmin) rotate(150deg)}}@keyframes flower-fall-down-purple{0%{transform:rotate(-50deg)}25%{bottom:1vmin;perspective:0;transform:rotateX(-100deg)}50%{perspective:0;transform:translate(-30vmin,2vmin) rotate(90deg)}75%{perspective:0;transform:translate(-34vmin,-2vmin)}to{transform:translate(-34vmin,-2vmin) rotateY(-80deg) rotateX(35deg);transform-origin:center}}@keyframes flower-falling{0%,to{transform:translate(-34vmin,-2vmin) rotateY(-80deg) rotateX(35deg);transform-origin:center}25%{transform:translate(-34.4vmin,-2vmin) rotateY(-84deg) rotateX(35deg);transform-origin:center}50%{transform:translate(-32vmin,-4.2vmin) rotateY(-80deg) rotateX(35deg);transform-origin:center}75%{transform:translate(-36vmin,1.1vmin) rotateY(-80deg) rotateX(35deg);transform-origin:center}}@keyframes letter-jiggle{0%{transform:rotate(-16deg)}35%{transform:rotate(-12deg)}70%{transform:rotate(-18deg)}to{transform:rotate(-16deg)}}@keyframes hint-pulse{0%,to{opacity:.35}50%{opacity:.78}}@keyframes hearts-rise{0%{opacity:0;transform:translateY(22%) rotate(-4deg) scale(1.04)}15%{opacity:1}to{opacity:0;transform:translateY(-24%) rotate(-4deg) scale(1.04)}}@media(max-width:768px){.letter{height:20vmin;left:64%;width:15vmin}.letter.letter--open{aspect-ratio:3/4;bottom:auto;height:auto;left:50%;max-height:88vh;top:50%;transform:translate(-50%,-50%) rotate(0);width:min(72vw,360px)}.letter--open .letter__paper{bottom:1.8vmin;gap:1.2vmin;height:calc(100% - 6.5vmin);left:1.8vmin;padding:1.6vmin;right:1.8vmin;transform:translateY(-35%)}.letter--open .letter__cat{height:100%}.letter--open .letter__slider{height:48%}.letter--open .letter__text{font-size:clamp(14px,3.7vw,19px);line-height:1.3}.tap-hint{font-size:clamp(12px,3.5vw,17px);top:12%}}@media(max-width:420px){.letter.letter--open{aspect-ratio:3/4;bottom:auto;height:auto;left:50%;max-height:86vh;top:50%;width:80vw}.letter--open .letter__cat{height:100%}.letter--open .letter__slider{height:46%}.letter--open .letter__text{font-size:clamp(13px,4.2vw,17px)}}