:root{
  --ink:#4f372f;
  --muted:#9b7468;
  --rose:#d98f8a;
  --rose-dark:#b96562;
  --paper:#fbf6ee;
  --paper-2:#f3e8dc;
  --gold:#b88951;
  --night:#26304b;
  --screen-w:min(100vw,520px);
  --safe-top:max(16px,env(safe-area-inset-top));
  --safe-bottom:max(18px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#ded7cf;color:var(--ink);font-family:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;touch-action:pan-y}
button{font:inherit;color:inherit}
body{display:grid;place-items:center}
#app{position:relative;width:var(--screen-w);height:100vh;height:100svh;overflow:hidden;background:#f8efe5 url('assets/generated/watercolor-paper-background-v2.png') center/cover no-repeat;box-shadow:0 0 45px rgba(74,50,43,.19);isolation:isolate}
.paper-noise{position:absolute;inset:0;z-index:99;pointer-events:none;opacity:.16;mix-blend-mode:multiply;background-image:radial-gradient(circle at 15% 20%,rgba(100,68,52,.16) 0 .55px,transparent .7px),radial-gradient(circle at 70% 75%,rgba(100,68,52,.12) 0 .5px,transparent .65px);background-size:7px 7px,11px 11px}
.screen,.opening-stage{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}

/* ---------- Opening: three-layer invitation sequence ---------- */
.opening-stage{z-index:50;background:#fbf5ed url('assets/generated/watercolor-paper-background-v2.png') center/cover no-repeat;transition:opacity .72s ease,visibility .72s ease}
.opening-stage::after{content:"";position:absolute;z-index:0;inset:0;background:rgba(255,251,246,.24);pointer-events:none;transition:background .8s ease}
.petal-field{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.petal-field i{position:absolute;width:10px;height:18px;border-radius:90% 12% 86% 14%;background:linear-gradient(145deg,#f2b7b4,#fff0e9);box-shadow:inset 0 0 0 1px rgba(181,106,104,.12);opacity:.64;animation:petalDrift 7s ease-in-out infinite}.petal-field i:nth-child(1){left:12%;top:22%}.petal-field i:nth-child(2){right:13%;top:16%;animation-delay:-2s}.petal-field i:nth-child(3){left:7%;top:64%;animation-delay:-4s}.petal-field i:nth-child(4){right:9%;top:55%;animation-delay:-1s}.petal-field i:nth-child(5){right:20%;bottom:8%;animation-delay:-5s}
@keyframes petalDrift{50%{transform:translate3d(12px,18px,0) rotate(48deg);opacity:.35}}
.opening-title{position:absolute;z-index:4;top:calc(var(--safe-top) + 4.2vh);left:7%;right:7%;text-align:center;transition:opacity .8s ease,transform .8s ease}
.eyebrow{font-family:Georgia,serif;font-size:clamp(9px,2.35vw,12px);letter-spacing:.34em;color:#9b6f59}
.opening-title h1{margin:2.1vh 0 .55vh;font-weight:500;font-size:clamp(31px,8.8vw,48px);letter-spacing:.12em;color:#6f453b;text-shadow:0 4px 16px rgba(112,74,55,.08)}
.opening-title h1 em{font-style:normal;color:var(--rose);font-size:.7em;margin:0 .12em}
.opening-title p{margin:1vh 0 0;font-size:clamp(25px,7.2vw,38px);letter-spacing:.16em;color:#7c4f43}
.couple-wrap{position:absolute;z-index:2;left:0;right:0;bottom:1.5vh;height:82%;transition:opacity 1.15s .2s ease,transform 1.15s cubic-bezier(.22,.8,.3,1),filter 1.15s ease}
.opening-couple{position:absolute;left:50%;bottom:0;width:min(106%,510px);height:100%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 17px 20px rgba(74,45,38,.14))}
.soft-ground{position:absolute;left:13%;right:13%;bottom:1.5%;height:8%;background:radial-gradient(ellipse,rgba(120,84,66,.13),transparent 67%);filter:blur(8px)}
.opening-story-copy{position:absolute;z-index:3;top:calc(var(--safe-top) + 9vh);left:8%;right:8%;text-align:center;color:#8a5d50;opacity:0;transform:translateY(12px);transition:opacity .75s .55s ease,transform .75s .55s ease}.opening-story-copy p{margin:.4vh 0;font-size:clamp(15px,4vw,20px);letter-spacing:.16em}.opening-story-copy span{display:block;margin-top:1vh;color:#d48682;font-size:22px}
.envelope-button{position:absolute;z-index:8;left:50%;top:55.8%;width:min(42vw,218px);aspect-ratio:720/470;border:0;background:none;padding:0;cursor:pointer;opacity:0;transform:translate(-50%,-50%) perspective(900px) rotateX(38deg) rotateZ(.5deg);transform-style:preserve-3d;will-change:transform,opacity}
.envelope-button:focus-visible{outline:none}
.envelope-shell{display:block;position:absolute;inset:0;transform-style:preserve-3d;filter:drop-shadow(0 14px 14px rgba(99,60,52,.18))}
.env-back{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(.97) saturate(.93) contrast(.96)}
.env-front{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(.97) saturate(.93) contrast(.96)}
.env-flap{position:absolute;z-index:5;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 15.3%;transform:rotateX(0deg);backface-visibility:visible;filter:brightness(.97) saturate(.93) contrast(.96);will-change:transform,filter}
.wax-seal{position:absolute;z-index:7;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(.96) saturate(.88);will-change:transform,opacity}
.letter-sheet{position:absolute;z-index:2;left:11%;right:11%;top:0%;height:180%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;text-align:center;border:1px solid rgba(184,137,81,.44);border-radius:7px;color:#8a4f43;background:#fffaf1 url('assets/generated/invitation-card-watercolor-v3.png') center/100% 100% no-repeat;box-shadow:0 7px 13px rgba(81,48,38,.11);opacity:0;transform:translateY(20%) scale(.92);will-change:transform,opacity}
.letter-sheet::before,.letter-sheet::after{content:"";position:absolute;pointer-events:none}.letter-sheet::before{inset:9px;border:1px solid rgba(184,137,81,.28);border-radius:7px}.letter-sheet::after{inset:16px 24px;background:radial-gradient(circle at 10% 10%,rgba(221,155,151,.18),transparent 24%),radial-gradient(circle at 88% 84%,rgba(199,159,107,.13),transparent 24%)}
.letter-sheet small,.letter-sheet b,.letter-sheet i,.letter-sheet strong,.letter-sheet em{position:relative;z-index:1}.letter-sheet small{font-family:Georgia,serif;font-size:clamp(4px,1.3vw,7px);letter-spacing:.28em;color:#a57a62}.letter-sheet b{font-size:clamp(12px,3.5vw,18px);font-weight:500;letter-spacing:.1em}.letter-sheet i{font-size:clamp(5px,1.6vw,8px);font-style:normal;letter-spacing:.14em}.letter-sheet strong{font-family:Georgia,serif;font-size:clamp(9px,2.8vw,15px);font-weight:400;letter-spacing:.13em}.letter-sheet em{font-size:clamp(4px,1.25vw,7px);font-style:normal;letter-spacing:.08em;color:#987064}
.opening-target{position:absolute;z-index:9;left:calc(50% + 9vw);top:calc(55.8% + 23px);width:31px;height:31px;border:1.5px solid rgba(126,82,70,.84);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;transition:opacity .45s ease,transform .45s ease;box-shadow:0 2px 7px rgba(93,58,49,.12)}.opening-target::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#8c5e50;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,247,238,.75)}.opening-target::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(211,125,122,.62);border-radius:50%;animation:targetPulse 1.8s ease-out infinite}
@keyframes targetPulse{72%,100%{transform:scale(1.55);opacity:0}}
.opening-hint{position:absolute;z-index:10;left:calc(50% + 16vw);top:calc(55.8% + 100px);bottom:auto;transform:translateX(-50%);display:block;font-size:clamp(16px,4.2vw,18px);line-height:1.35;letter-spacing:.06em;color:#744d43;transition:opacity .45s ease}.opening-hint-label{position:relative;z-index:1;display:block;white-space:nowrap;text-align:center;text-shadow:0 1px 3px rgba(255,249,240,.72);transform:translateY(15px)}.opening-hint-arrow{position:absolute;z-index:0;left:calc(50% - 25px);bottom:calc(100% - 14px);width:min(30vw,118px);height:84px;overflow:visible;transform:translateX(-50%);color:#8b5d53;pointer-events:none}.opening-hint-arrow path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.opening-hint-arrow .arrow-line{stroke-width:5.6;opacity:.88}.opening-hint-arrow .arrow-head{stroke-width:5.4;opacity:.98}
@keyframes tapPulse{70%,100%{transform:scale(1.8);opacity:0}}
.gesture-hint{position:absolute;z-index:20;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:7px;color:#8d665b;font-size:clamp(11px,3vw,15px);letter-spacing:.12em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .55s ease}.gesture-hint img{width:30px;height:37px;opacity:.78}.gesture-up{bottom:calc(var(--safe-bottom) + 3vh)}.gesture-left{bottom:calc(var(--safe-bottom) + 1.2vh)}.gesture-left img{width:35px;height:25px;animation:leftCue 1.8s ease-in-out infinite}.gesture-up img{animation:upCue 1.8s ease-in-out infinite}
.gesture-left span,.gesture-up span,.opening-next-hint span,.story-swipe,.gallery-guide{padding:8px 13px;border:1px solid rgba(255,255,255,.94);border-radius:999px;background:rgba(79,55,47,.46);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);font-size:clamp(13px,3.6vw,17px);line-height:1.35;letter-spacing:.1em;box-shadow:0 3px 10px rgba(68,43,35,.12)}
.opening-next-hint{bottom:calc(var(--safe-bottom) + 2.2vh)}.opening-next-hint img{width:35px;height:25px;animation:leftCue 1.8s ease-in-out infinite}
@keyframes upCue{50%{transform:translateY(-8px)}}@keyframes leftCue{50%{transform:translateX(-8px)}}
@keyframes envelopeFocus{0%{opacity:0;transform:translate(-50%,-50%) perspective(900px) rotateX(38deg) rotateZ(.5deg) scale(1)}14%{opacity:1;transform:translate(-50%,-50%) perspective(900px) rotateX(38deg) rotateZ(.5deg) scale(1)}100%{opacity:1;transform:translate(-50%,-50%) translateY(-5vh) perspective(900px) rotateX(0deg) rotateZ(0deg) scale(2.2)}}
@keyframes sealDrop{0%,12%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate3d(92px,142px,0) rotate(76deg) scale(.72)}}
.opening-stage.is-focused .opening-title{opacity:0;transform:translateY(-20px)}
.opening-stage.is-focused::after{background:rgba(255,251,246,.56)}
.opening-stage.is-focused .opening-story-copy{opacity:1;transform:translateY(0)}
.opening-stage.is-focused .couple-wrap{opacity:.16;transform:scale(.96);filter:blur(.45px)}
.opening-stage.is-focused .envelope-button{animation:envelopeFocus 1.55s cubic-bezier(.2,.78,.25,1) forwards}
.opening-stage.is-focused .wax-seal{animation:sealDrop .88s .82s cubic-bezier(.28,.08,.35,1) forwards}
.opening-stage.is-focused .opening-target{opacity:0;transform:translate(-50%,-50%) scale(.74)}
.opening-stage.is-focused .opening-hint{opacity:0}
.opening-stage.is-ready .gesture-up{opacity:1}
@keyframes flapOpen{0%,49%{z-index:5}0%{filter:brightness(.97) saturate(.93) contrast(.96);transform:rotateX(0deg)}50%,100%{z-index:1}100%{filter:brightness(.84) saturate(.85) contrast(.95);transform:rotateX(178deg)}}
@keyframes shellDescend{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,12.8vh,0)}}
@keyframes cardRise{0%,12%{opacity:0;clip-path:inset(0 0 62% 0);transform:translateY(20%) scale(.92)}24%{opacity:1;clip-path:inset(0 0 48% 0);transform:translateY(-15%) scale(.96)}42%{clip-path:inset(0 0 12% 0)}50%{clip-path:inset(0 0 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(-79%) scale(1.1,1.16)}}
@keyframes letterContentReveal{0%{opacity:0}100%{opacity:1}}
.opening-stage.is-opening .gesture-up{opacity:0}
.opening-stage.is-opening .opening-story-copy{opacity:0;transition-delay:0s}
.opening-stage.is-opening .env-flap{animation:flapOpen .78s cubic-bezier(.18,.56,.22,1) forwards}
.opening-stage.is-opening .env-front{transform-origin:50% 100%;transform:scaleY(1.025)}
.opening-stage.is-opening .envelope-shell{animation:shellDescend 2.25s .56s cubic-bezier(.2,.68,.3,1) forwards}
.opening-stage.is-opening .letter-sheet{animation:cardRise 2.15s .44s cubic-bezier(.18,.82,.22,1) forwards}
.opening-stage.is-opening .letter-sheet>small,.opening-stage.is-opening .letter-sheet>b,.opening-stage.is-opening .letter-sheet>i,.opening-stage.is-opening .letter-sheet>strong,.opening-stage.is-opening .letter-sheet>em{animation:letterContentReveal .38s 1.12s ease both}
.opening-stage.is-complete .opening-next-hint{opacity:1}
.opening-stage.is-done{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- Track / screens ---------- */
/* Keep the watercolor paper on the fixed app canvas; invitation/story content can slide over it. */
.page-track{position:absolute;z-index:1;inset:0;display:flex;width:500%;height:100%;transform:translate3d(0,0,0);transition:transform .72s cubic-bezier(.22,.78,.25,1);will-change:transform}
.screen{position:relative;inset:auto;flex:0 0 calc(100% / 5);height:100%}
.story-mount{display:contents}
.invitation-screen{background:transparent;padding:0}
.invitation-ghost{position:absolute;z-index:1;left:50%;top:12%;width:90%;height:65%;object-fit:contain;transform:translateX(-50%);opacity:.17;filter:saturate(.8)}
.invitation-card{position:absolute;z-index:4;left:50%;top:22%;width:69%;height:51%;transform:translateX(-50%);border:1px solid rgba(174,130,83,.52);border-radius:7px;padding:3.3vh 7% 2.8vh;text-align:center;background:#fffaf1 url('assets/generated/invitation-card-watercolor-v3.png') center/100% 100% no-repeat;box-shadow:0 18px 34px rgba(88,59,46,.16);overflow:hidden}
.tiny-star{position:absolute;color:#c59b67}.t1{left:12%;top:12%}.t2{right:13%;top:20%;font-size:22px}
.invitation-topline{font-family:Georgia,serif;font-size:clamp(8px,2.2vw,11px);letter-spacing:.35em;color:#9a745f}
.invite-preface{font-size:clamp(9px,2.6vw,13px);line-height:1.65;color:#866a5f;margin:1.8vh 2% .8vh;letter-spacing:.06em}
.invitation-card h2{font-size:clamp(27px,8vw,41px);font-weight:500;letter-spacing:.1em;margin:.8vh 0 .55vh;color:#72473e}
.heart-line{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--rose);font-size:20px}.heart-line span{width:52px;height:1px;background:linear-gradient(90deg,transparent,#c79a76)}.heart-line span:last-child{transform:scaleX(-1)}
.couple-names{font-size:clamp(16px,4.8vw,25px);letter-spacing:.17em;margin:1.1vh 0 .7vh}.couple-names i{font-style:normal;color:var(--rose);font-size:.68em}
.invitation-card time{display:block;font-family:Georgia,serif;font-size:clamp(20px,6.2vw,32px);letter-spacing:.12em;color:#a27155}
.invite-location{margin-top:.9vh;font-size:clamp(9px,2.6vw,13px);letter-spacing:.06em;color:#7e6256}
.mini-couple{height:27%;min-height:135px;margin:1.7vh auto 0;display:flex;align-items:flex-end;justify-content:center;position:relative}
.mini-couple::before{content:"";position:absolute;bottom:1%;width:65%;height:15%;border-radius:50%;background:radial-gradient(ellipse,rgba(133,91,74,.16),transparent 66%);filter:blur(4px)}
.mini-couple img{height:118%;max-width:115%;object-fit:contain;position:relative;z-index:2}
.invite-closing{position:absolute;left:7%;right:7%;bottom:4%;font-size:clamp(8px,2.35vw,12px);letter-spacing:.07em;color:#8f6c5e}
.final-envelope{position:absolute;z-index:auto;left:4%;bottom:3.5%;width:min(92vw,478px);aspect-ratio:720/470;pointer-events:none}.final-env-back{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(.97) saturate(.93) contrast(.96) drop-shadow(0 18px 22px rgba(92,53,48,.13))}.final-env-flap{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 15.3%;transform:rotateX(178deg);backface-visibility:visible;filter:brightness(.84) saturate(.85) contrast(.95)}.final-env-front{position:absolute;z-index:5;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(.97) saturate(.93) contrast(.96)}
.gesture-left.visible{opacity:1}

/* ---------- Film introduction and playback ---------- */
.film-intro-screen{display:grid;place-items:center;padding:calc(var(--safe-top) + 28px) clamp(24px,7vw,40px) calc(var(--safe-bottom) + 28px);background:transparent;isolation:isolate}
.film-intro-screen::before,.film-intro-screen::after{content:"";position:absolute;pointer-events:none}.film-intro-screen::before{inset:4.4%;border:1px solid rgba(176,132,87,.35);border-radius:28px}.film-intro-screen::after{inset:6.4%;border:1px solid rgba(176,132,87,.14);border-radius:22px}
.film-intro-wash{display:none}
.film-intro-card{position:relative;z-index:2;width:min(100%,395px);padding:clamp(38px,9vh,68px) clamp(23px,7vw,40px) clamp(32px,7vh,52px);text-align:center;background:rgba(255,251,245,.66);border:1px solid rgba(176,132,87,.28);border-radius:28px;box-shadow:0 22px 42px rgba(93,57,47,.10);backdrop-filter:blur(5px)}
.film-intro-mark{display:block;color:#c57476;font:400 27px/1 Georgia,serif}.film-intro-eyebrow{margin:17px 0 13px;color:#a17b64;font:10px/1.5 Georgia,serif;letter-spacing:.28em}.film-intro-card h2{margin:0;color:#734b41;font-size:clamp(28px,7.3vw,38px);font-weight:500;line-height:1.45;letter-spacing:.11em}.film-intro-card>p:not(.film-intro-eyebrow){margin:19px auto 27px;color:#917066;font-size:clamp(12px,3.3vw,15px);line-height:1.9;letter-spacing:.08em}.film-intro-card small{display:block;margin-top:17px;color:#9a7161;font-size:clamp(13px,3.4vw,15px);letter-spacing:.08em;line-height:1.55}
.film-start-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:174px;min-height:51px;padding:0 25px;border:0;border-radius:999px;color:#fff;background:linear-gradient(135deg,#d88c88,#b96261);box-shadow:0 12px 23px rgba(184,91,88,.25);cursor:pointer;font:inherit;font-size:15px;letter-spacing:.14em;transition:transform .2s ease,box-shadow .2s ease}.film-start-button:active{transform:scale(.98) translateY(1px);box-shadow:0 7px 15px rgba(184,91,88,.22)}.film-start-button:focus-visible{outline:3px solid rgba(185,101,98,.34);outline-offset:4px}.film-start-icon{font-family:Arial,sans-serif;font-size:12px;letter-spacing:0}
.film-screen{position:relative;background:#000;color:#fff}.film-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#000}.invitation-film{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:#000;pointer-events:none;outline:none}.invitation-film::-webkit-media-controls{display:none!important}.film-tap-target{position:absolute;z-index:2;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}.film-tap-target:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:-7px}
.skip-film-button{position:absolute;z-index:4;top:calc(var(--safe-top) + 13px);right:calc(14px + env(safe-area-inset-right));min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.62);border-radius:999px;background:rgba(39,27,30,.43);color:#fff;font:inherit;font-size:clamp(12px,3.1vw,14px);letter-spacing:.08em;backdrop-filter:blur(8px);cursor:pointer;transition:transform .18s ease,background .18s ease}.skip-film-button:active{transform:scale(.97);background:rgba(39,27,30,.62)}.skip-film-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.film-pause-hint,.film-continue-hint{position:absolute;z-index:3;left:50%;margin:0;transform:translateX(-50%);padding:9px 15px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(18,14,14,.42);color:#fff;backdrop-filter:blur(7px);font-size:clamp(10px,2.7vw,12px);letter-spacing:.08em;white-space:nowrap;pointer-events:none}.film-pause-hint{top:50%;transform:translate(-50%,-50%);padding:12px 21px;font-size:clamp(16px,4.4vw,20px);letter-spacing:.1em}.film-pause-hint[hidden]{display:none}.film-continue-hint{bottom:calc(var(--safe-bottom) + 15px);opacity:0;transition:opacity .35s ease}.film-continue-hint.visible{opacity:1}

.photo-viewer{position:absolute;z-index:190;inset:0;overflow:hidden;background:rgba(47,33,35,.94);backdrop-filter:blur(12px)}.photo-viewer[hidden]{display:none}.photo-viewer-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 10px);touch-action:none;cursor:grab}.photo-viewer-stage:active{cursor:grabbing}.photo-viewer-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}.photo-viewer-close{position:absolute;z-index:2;top:calc(var(--safe-top) + 13px);right:calc(14px + env(safe-area-inset-right));min-height:38px;padding:0 15px;border:1px solid rgba(255,255,255,.66);border-radius:999px;background:rgba(49,34,37,.5);color:#fff;backdrop-filter:blur(8px);cursor:pointer;font:inherit;font-size:14px;letter-spacing:.08em}.photo-viewer-close:active{transform:scale(.97)}.photo-viewer-close:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- Story vinyl screens ---------- */
.story-screen{background:transparent;padding:calc(var(--safe-top) + 2.1vh) clamp(18px,5.5vw,29px) calc(var(--safe-bottom) + 3vh);display:flex;flex-direction:column;align-items:center}
.story-screen::before{content:"";position:absolute;inset:0;background:transparent;pointer-events:none}
.story-head{position:relative;z-index:2;text-align:center;width:100%;height:13%;min-height:84px}
.story-index{display:block;font-family:Georgia,serif;font-size:clamp(9px,2.35vw,12px);letter-spacing:.27em;color:#ae8069;margin-bottom:.8vh}
.story-head h2{margin:0;font-size:clamp(23px,6.5vw,34px);font-weight:500;letter-spacing:.08em}
.story-head p{margin:.8vh 4% 0;color:#897065;font-size:clamp(10px,2.8vw,14px);line-height:1.55;letter-spacing:.05em}
.record-stage{position:relative;z-index:3;width:min(92vw,445px);aspect-ratio:1;margin-top:.8vh}
.record{position:absolute;inset:2.5%;border-radius:50%;background-image:url('assets/svg/vinyl.svg');background-size:cover;filter:drop-shadow(0 22px 23px rgba(54,38,32,.27));transform:rotate(0deg);will-change:transform}
.story-screen.playing .record{animation:spinRecord 8s linear infinite}
@keyframes spinRecord{to{transform:rotate(360deg)}}
.record::after{content:"";position:absolute;inset:25%;border-radius:50%;box-shadow:0 0 0 7px rgba(233,213,195,.8),0 0 0 9px rgba(91,70,62,.18)}
.scene-window{position:absolute;z-index:5;inset:27%;border-radius:50%;overflow:hidden;background:linear-gradient(180deg,#dfe7ef,#f4dacb);box-shadow:inset 0 0 18px rgba(36,29,35,.26)}
.scene-window::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 55%,rgba(26,31,50,.2));pointer-events:none}
.scene-landscape{position:absolute;inset:0;background:linear-gradient(180deg,#aebfd2 0 48%,#d9c0a6 49% 100%)}
.scene-landscape::before{content:"";position:absolute;left:-5%;right:-5%;bottom:19%;height:28%;background:radial-gradient(ellipse at 12% 100%,#8a9d77 0 28%,transparent 29%),radial-gradient(ellipse at 42% 100%,#98a87f 0 33%,transparent 34%),radial-gradient(ellipse at 77% 100%,#84967b 0 31%,transparent 32%)}
.scene-stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px);background-size:21px 25px;opacity:.5;animation:starDrift 8s linear infinite}
@keyframes starDrift{to{background-position:30px 10px}}
.scene-illustration{position:absolute;z-index:3;inset:-1%;width:102%;height:102%;object-fit:cover;filter:saturate(.92) contrast(.98)}
.scene-window.scene-1 .scene-illustration{animation:meetCouple 4s ease-in-out infinite alternate}
@keyframes meetCouple{to{transform:scale(1.04)}}
.scene-window.scene-2{background:linear-gradient(180deg,#7b85a5,#efcdbb)}
.scene-window.scene-2 .scene-illustration{animation:nearer 3.8s ease-in-out infinite alternate}
@keyframes nearer{to{transform:translateY(-3%) scale(1.035)}}
.scene-window.scene-2 .heart-orbit{position:absolute;left:50%;top:25%;width:15px;height:15px;margin-left:-7px;color:#e48f92;animation:heartOrbit 3.2s ease-in-out infinite}
.scene-window.scene-2 .heart-orbit::before{content:"♥";font-size:18px}
@keyframes heartOrbit{50%{transform:translateY(-12px) scale(1.18);opacity:.5}}
.scene-window.scene-3{background:linear-gradient(180deg,#8494ad,#efd8c4)}
.scene-window.scene-3::before{content:"";position:absolute;width:35%;aspect-ratio:1;left:33%;top:22%;border:2px solid rgba(255,235,205,.8);border-radius:50%;box-shadow:0 0 22px rgba(255,218,168,.8);animation:ringGlow 2.3s ease-in-out infinite}
@keyframes ringGlow{50%{transform:scale(1.1);opacity:.55}}
.scene-window.scene-4{background:linear-gradient(180deg,#d9c9e3,#f4d8cf)}
.scene-window.scene-4::before{content:"";position:absolute;left:15%;right:15%;bottom:12%;height:72%;border:7px solid rgba(250,235,219,.86);border-bottom:0;border-radius:50% 50% 0 0;box-shadow:0 0 18px rgba(255,255,255,.7)}
.scene-window.scene-4 .petal{position:absolute;width:7px;height:12px;border-radius:90% 10% 90% 10%;background:#f3a6ad;animation:petalFall 3s linear infinite}.scene-window.scene-4 .p1{left:20%;top:-10%;animation-delay:.4s}.scene-window.scene-4 .p2{left:55%;top:-8%;animation-delay:1.1s}.scene-window.scene-4 .p3{left:78%;top:-13%;animation-delay:2s}
@keyframes petalFall{to{transform:translate(20px,190px) rotate(360deg);opacity:.1}}
.tonearm{position:absolute;z-index:7;right:-2%;top:2%;width:32%;height:74%;object-fit:contain;transform-origin:68% 9%;transform:rotate(-3deg);filter:drop-shadow(0 10px 7px rgba(48,37,31,.23));transition:transform .7s ease}
.story-screen.playing .tonearm{transform:rotate(7deg)}
.player{position:relative;z-index:5;width:94%;margin-top:1.2vh;color:#76574d}
.progress-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-family:Arial,sans-serif;font-size:10px;color:#9b7568}
.progress{position:relative;height:3px;background:rgba(115,82,69,.2);border-radius:99px;overflow:visible}.progress i{display:block;height:100%;width:0;background:var(--rose-dark);border-radius:99px}.progress b{position:absolute;left:0;top:50%;width:10px;height:10px;border-radius:50%;background:#d37d7a;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(211,125,122,.12)}
.controls{display:flex;justify-content:center;align-items:center;gap:clamp(22px,8vw,44px);margin-top:2.2vh}.controls button{border:0;background:none;padding:6px;font-size:21px;cursor:pointer}.controls .play-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#d98e8b,#bf6b68);color:white;box-shadow:0 11px 25px rgba(178,91,87,.27);font-family:Arial,sans-serif;font-size:18px}.play-btn .pause-mark{display:none}.story-screen.playing .play-btn .play-mark{display:none}.story-screen.playing .play-btn .pause-mark{display:inline}
.story-swipe{margin:2vh 0 0;text-align:center}

/* ---------- Gallery ---------- */
.gallery-screen{display:flex;flex-direction:column;background:#f8efe5 url('assets/generated/watercolor-paper-background-v2.png') center/cover no-repeat;color:#704a40;padding:calc(var(--safe-top) + 2vh) clamp(16px,4.5vw,24px) calc(var(--safe-bottom) + 2vh)}
.gallery-screen::before{content:"";position:absolute;inset:1.8%;border:1px solid rgba(186,139,96,.32);border-radius:26px;pointer-events:none}.gallery-sky{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 8% 16%,rgba(237,185,180,.18),transparent 25%),radial-gradient(circle at 92% 84%,rgba(227,171,164,.12),transparent 26%)}.gallery-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,250,244,.1),rgba(236,201,191,.08));pointer-events:none}
.moon{display:none}@keyframes moonFloat{to{transform:translateY(8px)}}
.starfield{display:none}
.gallery-title{position:relative;z-index:3;flex:0 0 auto;padding:0 0 1.8vh;text-align:center}.gallery-title span{font-family:Georgia,serif;font-size:clamp(8px,2.2vw,11px);letter-spacing:.28em;color:#ac7965}.gallery-title h2{font-weight:500;font-size:clamp(27px,7.2vw,38px);letter-spacing:.12em;margin:1vh 0 .4vh;color:#7c5044}.gallery-title p{font-size:clamp(10px,2.7vw,13px);letter-spacing:.06em;color:#9a7467;margin:0}
.gallery-scroll{position:relative;z-index:5;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 2px calc(var(--safe-bottom) + 12px);touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gallery-scroll::-webkit-scrollbar{display:none}
.photo-masonry{column-count:2;column-gap:9px}.masonry-photo{break-inside:avoid;margin:0 0 9px;padding:5px;border:1px solid rgba(187,140,102,.36);border-radius:15px;background:rgba(255,251,245,.8);box-shadow:0 8px 18px rgba(120,79,66,.10)}.masonry-photo img{display:block;width:100%;height:auto;border-radius:10px;background:#e8c7bb}
.gallery-continue-button{display:block;width:100%;min-height:48px;margin:14px 0 2px;border:0;border-radius:999px;color:#fff;background:linear-gradient(135deg,#d88c88,#bb6562);box-shadow:0 10px 20px rgba(184,91,88,.22);cursor:pointer;font:inherit;font-size:15px;letter-spacing:.14em}.gallery-continue-button:active{transform:scale(.985)}.gallery-continue-button:focus-visible{outline:3px solid rgba(185,101,98,.34);outline-offset:4px}

/* ---------- Information ---------- */
.info-screen{background:#f8efe5 url('assets/generated/watercolor-paper-background-v2.png') center/cover no-repeat;padding:calc(var(--safe-top) + 2.7vh) clamp(22px,7vw,37px) calc(var(--safe-bottom) + 2vh);display:flex;flex-direction:column;align-items:center}
.info-screen::before{content:"";position:absolute;inset:1.8%;border:1px solid rgba(176,132,87,.35);border-radius:26px;pointer-events:none}.info-screen::after{content:"";position:absolute;inset:3.2%;border:1px solid rgba(176,132,87,.16);border-radius:20px;pointer-events:none}
.info-title{position:relative;z-index:3;text-align:center}.info-title span{font-family:Georgia,serif;font-size:clamp(8px,2.1vw,11px);letter-spacing:.28em;color:#a17b64}.info-title h2{margin:1.1vh 0 .5vh;font-size:clamp(27px,7.8vw,41px);font-weight:500;letter-spacing:.14em}.info-title h2 b{font-weight:400;color:var(--rose)}.info-title p{margin:0;color:#947268;font-size:clamp(10px,2.8vw,14px);letter-spacing:.07em}
.info-date{position:relative;z-index:3;margin:2vh 0 1.8vh;text-align:center;color:#885749}.info-date strong{font-family:Georgia,serif;font-weight:400;font-size:clamp(46px,13vw,68px)}.info-date i{font-style:normal;color:#d59b86;margin:0 8px}.info-date span{display:block;margin-top:-.7vh;font-family:Georgia,serif;font-size:clamp(10px,2.7vw,14px);letter-spacing:.18em;color:#ad826c}
.info-panel{position:relative;z-index:3;width:100%;padding:2.2vh 5%;border-radius:23px;background:rgba(255,252,246,.68);border:1px solid rgba(176,132,87,.25);box-shadow:0 16px 30px rgba(90,60,48,.08);backdrop-filter:blur(4px)}
.info-row{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;padding:1.2vh 0}.info-row+ .info-row{border-top:1px solid rgba(170,126,89,.17)}.info-row img{width:28px;height:28px;color:#b76d68;filter:sepia(.4) saturate(1.2)}.info-row b{font-size:clamp(12px,3.25vw,16px);font-weight:500;letter-spacing:.08em}.info-row p{font-size:clamp(12px,3.25vw,16px);margin:.45vh 0 .2vh;line-height:1.5}.info-row small{font-size:clamp(10px,2.7vw,13px);color:#98766a}.info-note{text-align:center;border-top:1px dashed rgba(170,126,89,.26);padding-top:1.2vh;margin-top:.6vh;font-size:clamp(9px,2.5vw,12px);color:#a17969;letter-spacing:.07em}
.info-actions{position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:1.8vh}.info-actions button{height:46px;border-radius:999px;cursor:pointer;letter-spacing:.12em;font-size:clamp(12px,3.2vw,15px)}.primary-btn{border:0;color:#fff;background:linear-gradient(135deg,#d88c88,#bb6562);box-shadow:0 10px 20px rgba(184,91,88,.22)}.secondary-btn{border:1px solid rgba(171,118,89,.55);background:rgba(255,251,245,.7);color:#825b4d}
.attendance{position:relative;z-index:4;width:100%;margin-top:1.7vh;text-align:center}.attendance>span{font-size:clamp(10px,2.7vw,13px);color:#9a7568;letter-spacing:.12em}.attendance>div{display:flex;justify-content:center;gap:12px;margin-top:1vh}.attendance button{border:0;background:none;padding:7px 14px;color:#856253;border-bottom:1px solid rgba(133,98,83,.28);font-size:clamp(11px,3vw,14px);cursor:pointer}.attendance button.selected{color:var(--rose-dark);border-color:var(--rose-dark)}.attendance button:disabled{opacity:.5;cursor:wait}
.info-footer{position:relative;z-index:4;margin:auto 0 0;color:#815e52;font-size:clamp(14px,3.7vw,17px);letter-spacing:.12em;text-align:center;-webkit-text-stroke:.45px rgba(255,255,255,.88);paint-order:stroke fill;text-shadow:0 1px 3px rgba(255,252,247,.88)}.special-thanks-button{position:relative;z-index:4;align-self:center;margin-top:11px;padding:6px 18px;border:1px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(140,95,82,.34);color:#805e52;cursor:pointer;font:inherit;font-size:clamp(13px,3.4vw,15px);letter-spacing:.18em;-webkit-text-stroke:.35px rgba(255,255,255,.86);paint-order:stroke fill;text-shadow:0 1px 3px rgba(255,252,247,.82);box-shadow:0 3px 9px rgba(117,73,61,.10)}.special-thanks-button:active{transform:translateY(1px)}.special-thanks-button:focus-visible{outline:2px solid rgba(185,101,98,.4);outline-offset:4px}

/* ---------- Global controls ---------- */
.music-toggle{position:absolute;z-index:80;right:calc(12px + env(safe-area-inset-right));top:calc(var(--safe-top) + 5px);width:42px;height:42px;border-radius:50%;border:1px solid rgba(154,109,87,.36);background:rgba(255,250,244,.78);display:grid;place-items:center;box-shadow:0 5px 18px rgba(80,51,43,.12);backdrop-filter:blur(8px);cursor:pointer}.music-toggle img{width:20px;height:20px;filter:sepia(.5) saturate(.9)}.music-toggle.is-muted::after{content:"";position:absolute;width:24px;height:1.5px;background:#a35f5c;transform:rotate(-45deg)}
.toast{position:absolute;z-index:100;left:50%;bottom:calc(var(--safe-bottom) + 4vh);transform:translate(-50%,18px);padding:10px 18px;border-radius:999px;background:rgba(64,48,43,.86);color:white;font-size:13px;letter-spacing:.05em;opacity:0;pointer-events:none;transition:.3s ease;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
.rsvp-modal{position:fixed;z-index:160;inset:0;display:grid;place-items:center;padding:22px;background:rgba(67,45,39,.35);backdrop-filter:blur(5px)}.rsvp-modal[hidden]{display:none}.rsvp-modal-card{width:min(100%,390px);padding:30px 26px 25px;text-align:center;color:#76574d;background:#fffaf1 url('assets/generated/watercolor-paper-background-v2.png') center/cover;border:1px solid rgba(176,132,87,.5);border-radius:24px;box-shadow:0 25px 60px rgba(54,36,30,.25);animation:modalArrive .3s cubic-bezier(.22,.78,.25,1) both}.rsvp-modal-mark{display:block;color:#c57476;font:400 28px/1 Georgia,serif}.rsvp-modal-card h2{margin:11px 0 7px;color:#7e4a45;font-size:25px;font-weight:500;letter-spacing:.1em}.rsvp-modal-card p{margin:0;color:#8d6b5f;font-size:14px;line-height:1.65;letter-spacing:.06em}.rsvp-name-field{display:grid;gap:8px;margin:20px 0 8px;text-align:left;color:#815e52;font-size:13px;letter-spacing:.08em}.rsvp-name-field input{width:100%;box-sizing:border-box;height:44px;padding:0 12px;color:#60463d;background:#fffdf7;border:1px solid rgba(176,132,87,.55);border-radius:10px;font:16px inherit;outline:none}.rsvp-name-field input:focus{border-color:#bd706b;box-shadow:0 0 0 3px rgba(189,112,107,.16)}.rsvp-modal-error{min-height:20px!important;color:#a1464c!important;font-size:12px!important}.rsvp-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.rsvp-modal-actions button{min-height:44px;border-radius:12px;cursor:pointer;font:inherit;letter-spacing:.08em}.rsvp-cancel{border:1px solid rgba(155,112,91,.7);color:#825b4d;background:rgba(255,251,245,.7)}.rsvp-confirm{border:0;color:#fff;background:linear-gradient(135deg,#d88c88,#bb6562);box-shadow:0 10px 20px rgba(184,91,88,.22)}.rsvp-modal-actions button:disabled{opacity:.55;cursor:wait}@keyframes modalArrive{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.thanks-modal{position:absolute;z-index:185;inset:0;display:grid;place-items:center;padding:22px;background:rgba(76,49,45,.38);backdrop-filter:blur(7px)}.thanks-modal[hidden]{display:none}.thanks-modal-card{position:relative;width:min(100%,400px);padding:38px 28px 32px;text-align:center;color:#76574d;background:#fffaf1 url('assets/generated/watercolor-paper-background-v2.png') center/cover;border:1px solid rgba(181,134,94,.54);border-radius:25px;box-shadow:0 25px 60px rgba(64,40,34,.26);animation:modalArrive .3s cubic-bezier(.22,.78,.25,1) both}.thanks-modal-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(181,134,94,.24);border-radius:17px;pointer-events:none}.thanks-modal-close{position:absolute;z-index:1;top:15px;right:17px;padding:4px 8px;border:0;background:transparent;color:#9a7161;cursor:pointer;font:inherit;font-size:12px;letter-spacing:.08em}.thanks-modal-close:focus-visible{outline:2px solid rgba(185,101,98,.38);outline-offset:2px}.thanks-modal-mark,.thanks-modal-eyebrow,.thanks-modal-card h2,.thanks-modal-copy,.thanks-modal-rule,.thanks-modal-tech-title,.thanks-modal-tech{position:relative;z-index:1}.thanks-modal-mark{display:block;color:#c57476;font:400 28px/1 Georgia,serif}.thanks-modal-eyebrow{margin:14px 0 7px;color:#ae8069;font:10px/1.4 Georgia,serif;letter-spacing:.25em}.thanks-modal-card h2{margin:0;color:#7c4b43;font-size:clamp(26px,7vw,33px);font-weight:500;letter-spacing:.13em}.thanks-modal-copy{margin:18px 0 0!important;color:#8b695d!important;font-size:clamp(13px,3.45vw,15px)!important;line-height:1.85!important;letter-spacing:.075em!important}.thanks-modal-rule{width:54px;height:1px;margin:20px auto 14px;background:rgba(179,130,94,.55)}.thanks-modal-tech-title{margin:0;color:#a0715e;font-size:12px;letter-spacing:.18em}.thanks-modal-tech{margin:8px auto 0!important;color:#805e53!important;font:12px/1.8 Georgia,"Songti SC",serif!important;letter-spacing:.04em!important}

body.is-loading #app{visibility:hidden}.loading-screen{position:fixed;z-index:200;inset:0;display:grid;place-items:center;color:#76574d;background:#f8efe5 url('assets/generated/watercolor-paper-background-v2.png') center/cover no-repeat;transition:opacity .55s ease,visibility .55s ease}.loading-screen::before{content:"";position:absolute;inset:5%;border:1px solid rgba(176,132,87,.28);border-radius:30px;pointer-events:none}.loading-content{position:relative;width:min(72vw,310px);text-align:center}.loading-mark{display:block;margin-bottom:16px;color:#c57476;font:400 32px/1 Georgia,serif;animation:loadingPulse 1.8s ease-in-out infinite}.loading-content p{margin:0;color:#76574d;font-size:clamp(14px,3.8vw,17px);letter-spacing:.13em}.loading-progress{height:5px;margin:22px 0 10px;overflow:hidden;border-radius:999px;background:rgba(151,106,87,.18)}.loading-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d88c88,#b66a6b);transition:width .22s ease}.loading-content>span:last-child{font:11px Georgia,serif;letter-spacing:.16em;color:#a17b64}.loading-screen.is-ready{opacity:0;visibility:hidden;pointer-events:none}@keyframes loadingPulse{50%{transform:scale(1.12);opacity:.56}}

@media (max-height:720px){
  .opening-title{top:calc(var(--safe-top) + 2vh)}
  .opening-title h1{margin-top:1.3vh}
  .couple-wrap{height:62%}
  .envelope-button{top:66.8%}
  .opening-target{top:calc(66.8% + 23px)}
  .opening-hint{top:calc(66.8% + 100px)}
  .invitation-card{height:91%;padding-top:3.5vh}.mini-couple{height:24%;margin-top:1vh}.invite-preface{margin-top:1.8vh}
  .story-head{height:12%;min-height:72px}.record-stage{width:min(75vh,92vw)}.controls{margin-top:1.3vh}.story-swipe{margin-top:1vh}
  .gallery-title{height:13%}.gallery-orbit{height:68%}.gallery-card{height:86%}
  .info-date{margin:1vh 0}.info-panel{padding-top:1.2vh;padding-bottom:1.2vh}.info-row{padding:.8vh 0}.info-actions{margin-top:1vh}.attendance{margin-top:1vh}
}
@media (min-width:521px){#app{border-radius:28px;height:min(100svh,920px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.12s!important}}