#ovl.love-story-overlay { overflow: hidden; background: #b50b1c url('https://fnnwwqcvrhmefilduzih.supabase.co/storage/v1/object/public/relive-showcase/showcase/assets/bg.webp') center/cover; container-type: size; display: grid; place-items: center; }
#phone.wedding-background-ready #ovl.love-story-overlay { background: #b50b1c url('https://fnnwwqcvrhmefilduzih.supabase.co/storage/v1/object/public/relive-showcase/showcase/assets/bg.webp') center/cover; }
#phone.story-world #app { visibility: hidden; pointer-events: none; }
/* Scale the 762 × 1600 composition uniformly; never stretch its two axes. */
.love-story { position: relative; width: min(100cqw, 47.625cqh); height: min(100cqh, 209.973753cqw); min-height: 0; container-type: size; overflow: hidden; isolation: isolate; color: #fff; background: transparent; outline: none; }
.love-shape-defs { position: absolute; pointer-events: none; }
.love-close { position: absolute; z-index: 5; top: 2%; right: 5%; width: 32px; height: 32px; color: #ffffffb3; font: 600 24px var(--sans); }
.love-years { position: absolute; left: 13.5%; top: 10.6%; width: 73.5%; height: 5.5%; display: flex; }
.love-years::before { content: ''; position: absolute; top: .43cqh; left: 12.5%; right: 12.5%; height: 1px; background: #ffffff70; }
.love-years button { position: relative; flex: 1; color: #ffffff66; font: 600 3cqh/1 var(--sans); padding-top: 1.9cqh; transition: color .3s; }
.love-years button span { position: absolute; top: 0; left: calc(50% - .4cqh); width: .8cqh; height: .8cqh; border: 1px solid #ffffff55; border-radius: 50%; background: #b66e73; transition: background .3s; }
.love-years button[aria-current="step"] { color: #fff; }
.love-years button[aria-current="step"] span { background: #fff; }
.love-story .personal-player { top: 18.2%; left: 15.5%; width: 66%; height: 4.8%; gap: 7%; }
.love-story .personal-play { width: 6%; }
.love-audio-upload { position: absolute; top: 19%; right: 6%; padding: .5cqh; color: #ffffff99; font: 600 1.35cqh var(--sans); }
.love-viewport { position: absolute; top: 26.4375%; bottom: 9.25%; left: 0; width: 100%; overflow: hidden; touch-action: pan-y; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; cursor: grab; }
.love-viewport.is-swiping { cursor: grabbing; }
.love-track { display: flex; width: 100%; height: 100%; transform: translateX(calc(var(--story-slide, 0) * -100%)); transition: transform 650ms cubic-bezier(.22,1,.36,1); }
.love-slide { flex: 0 0 100%; height: 100%; min-width: 0; padding: 0 4.593176%; }
.love-card { position: relative; height: 100%; overflow: hidden; border-radius: 18% / 11%; clip-path: url(#loveCardShape); background: #c661665c; backdrop-filter: blur(.5cqh); -webkit-backdrop-filter: blur(.5cqh); }
.love-card-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; fill: none; stroke: #ffffff80; stroke-width: 1px; }
.love-card-outline path { vector-effect: non-scaling-stroke; }
.love-card h2 { position: absolute; top: 7.8%; width: 100%; text-align: center; font: 400 3.65cqh/1.15 var(--serif); }
.love-quote { position: absolute; top: 15.85%; left: 8.95%; width: 7.37%; height: 3.79%; }
.love-lead, .love-body { position: absolute; left: 17.2%; width: 77%; font: 600 1.625cqh/1.17 var(--sans); }
.love-lead { top: 18.95%; }
.love-body { top: 29%; }
.love-characters { position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden; mask-image: linear-gradient(transparent, #000 5%); -webkit-mask-image: linear-gradient(transparent, #000 5%); }
.love-characters svg, .love-characters img { display: block; width: 100%; height: 100%; pointer-events: none; }
.love-characters img { object-fit: contain; object-position: bottom; }
.love-characters [hidden] { display: none; }
.love-characters.has-upload { mask-image: none; -webkit-mask-image: none; padding: 0 2%; }
.love-join { position: absolute; z-index: 2; top: 87.5%; left: 25%; width: 50%; height: 8.85%; border-radius: 999px; border: 1px solid #ffffff50; background: linear-gradient(100deg,#920008 0%,#cc252d 38%,#ff8a90 100%); box-shadow: inset 0 2px 8px #ffffff25; color: white; font: 400 2cqh var(--serif); }
.love-pagination { position: absolute; top: 93.4%; left: 29.5%; width: 41%; height: 2%; display: flex; gap: 4%; align-items: center; }
.love-pagination button { position: relative; height: 100%; flex: 1; transition: flex .45s; }
.love-pagination button::after { content: ''; position: absolute; height: .6cqh; left: 0; right: 0; top: calc(50% - .3cqh); background: #ffffff66; border-radius: 999px; }
.love-pagination button[aria-current="step"] { flex: 5; }
.love-pagination button[aria-current="step"]::after { background: white; }
.love-feedback { position: absolute; z-index: 6; bottom: 2%; left: 10%; width: 80%; text-align: center; font: 600 11px/1.3 var(--sans); }
.love-feedback:not(:empty) { padding: 8px; background: #760512e8; border-radius: 8px; }
.love-story button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .love-track, .love-pagination button { transition: none; } }

/* Photographs replace the original character illustrations. */
.love-characters img { object-fit: cover; object-position: center 38%; }
/* The couple's four chapters use the same media-first story composition. */
#ovl.love-story-overlay,#phone.wedding-background-ready #ovl.love-story-overlay{display:block;background:#fff7e3}
.love-story{width:100%;height:100%;background:#fff7e3}.love-story::before{content:'Meera & Arjun';position:absolute;top:27px;left:17px;z-index:6;font:600 13px var(--sans);color:#fffaf0;text-shadow:0 1px 5px #365663}
.love-close{top:20px;right:13px;z-index:8;color:#fffaf0;background:#36566333;border-radius:50%}
.love-viewport{inset:0;width:100%;height:100%}.love-slide{padding:0}.love-card{border-radius:0;clip-path:none;background:#dceef4;backdrop-filter:none;-webkit-backdrop-filter:none;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 25px 120px;isolation:isolate}.love-card-outline,.love-quote{display:none}.love-card::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,#101010ed 0%,#10101099 25%,#10101000 50%);pointer-events:none}
.love-card .love-characters,.love-card .love-characters.has-upload{position:absolute;inset:0;height:100%!important;width:100%;padding:0;mask-image:none;-webkit-mask-image:none;z-index:0}.love-card .love-characters img{width:100%;height:100%;object-fit:cover;object-position:center}
.love-card h2,.love-card .love-lead,.love-card .love-body{position:relative;inset:auto;width:100%;z-index:2;color:#fffaf0;text-align:left;text-shadow:0 1px 4px #36566380}.love-card h2{font:400 clamp(28px,8cqw,40px)/1.1 var(--serif);margin:0 0 15px}.love-card .love-lead,.love-card .love-body{font:500 clamp(12px,3.5cqw,15px)/1.5 var(--sans)}.love-card .love-lead{margin-bottom:12px}.love-card .love-body{max-height:28cqh;overflow-y:auto}
.love-years{top:61px;left:15px;width:calc(100% - 30px);height:30px;z-index:6}.love-years::before,.love-years button span{display:none}.love-years button{padding:0;font:600 11px var(--sans);color:#fffaf099;text-shadow:0 1px 4px #365663}.love-years button[aria-current="step"]{color:#fffaf0}
.love-pagination{top:9px;left:11px;width:calc(100% - 22px);height:4px;z-index:7;gap:4px}.love-pagination button,.love-pagination button[aria-current="step"]{flex:1}.love-pagination button::after{height:3px;top:0}.love-story .personal-player{top:auto;bottom:24px;left:20px;width:calc(100% - 40px);height:30px;z-index:6}.love-card .love-join{position:relative;inset:auto;z-index:3;width:100%;height:auto;min-height:44px;margin-top:18px;border-radius:99px;font:600 13px var(--sans);flex:none}.love-feedback{bottom:66px}

.love-card .love-characters{top:0!important;bottom:0!important}