.hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:38px;padding-top:46px;padding-bottom:38px;min-height:596px}
.love-intro{min-width:0;position:relative;padding:8px 0;isolation:isolate}
.love-intro:before{content:'';position:absolute;inset:1px 10px 49px;border:1px solid #e8d8cb;background:#f4e9dd;border-radius:22px;transform:rotate(3deg);z-index:-1}
.love-story{--love-duration:12s;position:relative;isolation:isolate;border:1px solid #e8d6cb;border-radius:18px;background:linear-gradient(145deg,#fffaf3,#f9eee7 75%,#f4e8e2);box-shadow:0 15px 38px #8a665315,0 2px 5px #92705e08;overflow:hidden;padding:22px 21px 0}
.love-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:7px;letter-spacing:1.8px;color:#987d6d}
.love-topline>span:first-child{display:flex;align-items:center;gap:7px}
.love-topline i{height:5px;width:5px;background:#bb8490;border-radius:50%;box-shadow:0 0 0 3px #eac7cb55}
.love-scene-number{font-size:7px;letter-spacing:1px;color:#b39985;white-space:nowrap}
.love-canvas{width:calc(100% + 24px);margin-left:-12px;height:auto;display:block;stroke:none;fill:none;margin-top:5px;overflow:visible}
.love-canvas text{font-family:'Caveat',cursive;font-size:24px;stroke:none}
.love-character-labels text{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:3px}
.love-dot-move,.love-shadow-dot,.love-label-dot{transform:translate(44px,0)}
.love-bot-move,.love-shadow-bot,.love-label-bot{transform:translate(-34px,0)}
.love-dot-tilt{transform:rotate(8deg)}
.love-bot-tilt{transform:rotate(-8deg)}
.love-bubble{opacity:0}
.love-character-sprite{filter:drop-shadow(0 4px 3px #78593d10)}
.love-blush,.love-held-heart{opacity:1}
.love-main-heart{transform:scale(1.1);transform-origin:0 0}
.love-flying-heart{opacity:.75;transform:translateY(-12px)}
.love-caption{position:relative;min-height:32px;margin:-2px 0 0;text-align:center;font-size:13px;letter-spacing:2px;color:#947061}
.love-caption>span{position:absolute;inset:0;opacity:0}
.love-caption>.love-caption-three{opacity:1}
.love-bottomline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 17px;margin-top:3px;border-top:1px dashed #e3d0c1}
.love-bottomline>.handwritten{font-size:19px;color:#b08a78;white-space:nowrap}
.love-controls{display:flex;align-items:center;gap:4px}
.love-controls button{min-height:34px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:9px;color:#957c6e;padding:6px 8px;border:1px solid transparent;border-radius:6px;white-space:nowrap}
.love-controls button:hover{background:#f2e2d8;border-color:#e8d0c2;color:#8a5f62}
.love-controls button:disabled{cursor:default;opacity:.6;background:transparent;border-color:transparent}
.love-controls button>span:first-child{font-size:14px;line-height:1}
.love-controls [data-love-icon]{width:12px;font-size:9px!important;letter-spacing:-1px}
.love-progress{height:3px;margin:0 -21px;background:#efddd4;overflow:hidden}
.love-progress>span{display:block;height:100%;background:linear-gradient(90deg,#c9d8be,#d396a2);transform-origin:left;transform:scaleX(1)}
.love-cast{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 9px 0;color:#ac9180;font-size:8px;letter-spacing:.2px}
.love-cast-people{display:flex;align-items:center;gap:10px}
.love-cast-people a{display:flex;align-items:center;gap:6px;color:#8c7465;font-size:10px}
.love-cast-people img{border:2px solid #fffaf3;border-radius:50%;object-fit:cover;box-shadow:0 1px 4px #9b7d6720}
.love-cast-heart{font-size:17px;color:#c28e96}

.love-story[data-motion=full] .love-dot-move,.love-story[data-motion=full] .love-shadow-dot,.love-story[data-motion=full] .love-label-dot{animation:love-dot-approach var(--love-duration) both}
.love-story[data-motion=full] .love-bot-move,.love-story[data-motion=full] .love-shadow-bot,.love-story[data-motion=full] .love-label-bot{animation:love-bot-approach var(--love-duration) both}
.love-story[data-motion=full] .love-dot-tilt{animation:love-dot-nuzzle var(--love-duration) both}
.love-story[data-motion=full] .love-bot-tilt{animation:love-bot-nuzzle var(--love-duration) both}
.love-story[data-motion=full] .love-blush{animation:love-blush var(--love-duration) both}
.love-story[data-motion=full] .love-bubble-dot{animation:love-hello-dot var(--love-duration) both}
.love-story[data-motion=full] .love-bubble-bot{animation:love-hello-bot var(--love-duration) both}
.love-story[data-motion=full] .love-main-heart{animation:love-heart-bloom var(--love-duration) both}
.love-story[data-motion=full] .love-held-heart{animation:love-held-heart var(--love-duration) both}
.love-story[data-motion=full] .love-flying-heart-one{animation:love-fly-one var(--love-duration) both}
.love-story[data-motion=full] .love-flying-heart-two{animation:love-fly-two var(--love-duration) both}
.love-story[data-motion=full] .love-flying-heart-three{animation:love-fly-three var(--love-duration) both}
.love-story[data-motion=full] .love-caption-one{animation:love-caption-one var(--love-duration) both}
.love-story[data-motion=full] .love-caption-two{animation:love-caption-two var(--love-duration) both}
.love-story[data-motion=full] .love-caption-three{animation:love-caption-three var(--love-duration) both}
.love-story[data-motion=full] .love-progress>span{animation:love-progress var(--love-duration) linear both}
.love-story[data-paused=true] *{animation-play-state:paused!important}

@keyframes love-dot-approach{0%,16%{transform:translate(-35px,0)}23%{transform:translate(-29px,-7px)}32%{transform:translate(5px,0)}39%{transform:translate(16px,-5px)}47%{transform:translate(33px,0)}55%,100%{transform:translate(44px,0)}}
@keyframes love-bot-approach{0%,23%{transform:translate(35px,0)}31%{transform:translate(25px,-5px)}40%{transform:translate(0,0)}48%{transform:translate(-17px,-5px)}56%,100%{transform:translate(-34px,0)}}
@keyframes love-dot-nuzzle{0%,17%{transform:rotate(-5deg)}24%,41%{transform:rotate(0)}49%{transform:rotate(5deg)}58%{transform:rotate(10deg)}65%{transform:rotate(6deg)}73%,100%{transform:rotate(8deg)}}
@keyframes love-bot-nuzzle{0%,26%{transform:rotate(5deg)}33%,46%{transform:rotate(0)}54%{transform:rotate(-5deg)}62%{transform:rotate(-10deg)}69%{transform:rotate(-6deg)}77%,100%{transform:rotate(-8deg)}}
@keyframes love-blush{0%,34%{opacity:0}44%,100%{opacity:1}}
@keyframes love-hello-dot{0%,6%{opacity:0;transform:translateY(6px)}12%,24%{opacity:1;transform:translateY(0)}32%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes love-hello-bot{0%,14%{opacity:0;transform:translateY(6px)}21%,31%{opacity:1;transform:translateY(0)}39%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes love-heart-bloom{0%,45%{opacity:0;transform:translateY(12px) scale(.1)}54%{opacity:1;transform:translateY(0) scale(1.3)}60%{opacity:1;transform:scale(.95)}68%{opacity:1;transform:scale(1.2)}77%,100%{opacity:1;transform:scale(1.1)}}
@keyframes love-held-heart{0%,49%{opacity:0;transform:translateY(6px) scale(.4)}58%{opacity:1;transform:translateY(0) scale(1.15)}67%,100%{opacity:1;transform:scale(1)}}
@keyframes love-fly-one{0%,55%{opacity:0;transform:translate(12px,22px) scale(.2)}65%{opacity:1;transform:translate(0,0) scale(1)}85%,100%{opacity:.75;transform:translate(-8px,-15px) scale(1)}}
@keyframes love-fly-two{0%,61%{opacity:0;transform:translate(-12px,22px) scale(.2)}72%{opacity:1;transform:translate(0,0) scale(1)}90%,100%{opacity:.75;transform:translate(8px,-15px) scale(1)}}
@keyframes love-fly-three{0%,68%{opacity:0;transform:translate(0,22px) scale(.2)}79%{opacity:1;transform:translate(0,0) scale(1)}97%,100%{opacity:.75;transform:translate(0,-12px) scale(1)}}
@keyframes love-caption-one{0%{opacity:0;transform:translateY(5px)}7%,24%{opacity:1;transform:translateY(0)}32%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes love-caption-two{0%,27%{opacity:0;transform:translateY(5px)}35%,49%{opacity:1;transform:translateY(0)}57%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes love-caption-three{0%,51%{opacity:0;transform:translateY(5px)}60%,100%{opacity:1;transform:translateY(0)}}
@keyframes love-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:900px) and (min-width:561px){.hero{gap:25px}.love-story{padding:18px 14px 0}.love-topline{font-size:6px;letter-spacing:.9px}.love-scene-number{font-size:6px}.love-bottomline{gap:4px;flex-wrap:wrap;justify-content:center;padding:10px 0}.love-bottomline>.handwritten{font-size:18px}.love-controls button{font-size:8px;min-height:31px}.love-cast{flex-wrap:wrap;justify-content:center;margin:12px 4px 0;gap:7px}.love-progress{margin-left:-14px;margin-right:-14px}}
@media(max-width:560px){.hero{display:flex;flex-direction:column;gap:26px;padding:27px 0 30px}.hero-copy{width:100%}.love-intro{order:-1;width:100%;max-width:430px;padding-top:3px}.love-story{border-radius:14px;padding:17px 15px 0}.love-intro:before{inset:0 9px 39px;border-radius:16px;transform:rotate(2deg)}.love-topline{font-size:6px;letter-spacing:1px}.love-topline i{width:4px;height:4px}.love-scene-number{font-size:6px;letter-spacing:.5px}.love-canvas{margin-top:4px}.love-caption{font-size:11px;min-height:25px;margin-top:-2px;letter-spacing:1.5px}.love-bottomline{padding:8px 0 11px;gap:5px}.love-bottomline>.handwritten{font-size:17px}.love-controls{gap:0}.love-controls button{padding:5px 7px;min-height:33px;font-size:8px}.love-progress{margin-left:-15px;margin-right:-15px}.love-cast{margin:13px 3px 0;font-size:7px;gap:8px}.love-cast-people{gap:7px}.love-cast-people a{font-size:9px;gap:4px}.love-cast-people img{width:23px;height:23px}.hero h1{margin-top:15px}.hero-eyebrow{font-size:6px}.hero-meta{line-height:1.8}}
@media(max-width:360px){.love-topline{font-size:5px;letter-spacing:.8px}.love-scene-number{font-size:5px}.love-bottomline>.handwritten{font-size:15px}.love-controls button{padding:4px 5px;font-size:7px}.love-cast{font-size:6px;gap:6px}.love-cast-people a{font-size:8px}.love-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.love-story *{animation:none!important;transition:none!important}.love-dot-move,.love-shadow-dot{transform:translate(44px,0)}.love-bot-move,.love-shadow-bot{transform:translate(-34px,0)}.love-bubble,.love-caption-one,.love-caption-two{opacity:0}.love-caption-three,.love-blush,.love-main-heart,.love-held-heart{opacity:1}}
