: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:none}
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:5px;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}
.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:700%;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% / 7);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}

/* ---------- 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;font-size:clamp(10px,2.7vw,13px);letter-spacing:.12em;color:#98776a;text-align:center}

/* ---------- Gallery ---------- */
.gallery-screen{background:linear-gradient(180deg,#27304a 0%,#39415d 48%,#766578 100%);color:#fff;padding:calc(var(--safe-top) + 2vh) clamp(16px,4.5vw,24px) calc(var(--safe-bottom) + 2vh);perspective:1000px}
.gallery-sky{position:absolute;inset:0;overflow:hidden}.gallery-sky::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,transparent 0 18%,rgba(19,24,42,.2) 50%,rgba(14,17,30,.54) 100%)}
.moon{position:absolute;right:11%;top:7%;font-size:44px;color:#f4dfb8;text-shadow:0 0 28px rgba(255,226,171,.65);animation:moonFloat 4s ease-in-out infinite alternate}@keyframes moonFloat{to{transform:translateY(8px)}}
.starfield{position:absolute;inset:-10%;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.4px),radial-gradient(circle,#e9c68f 0 1px,transparent 1.5px);background-size:31px 38px,47px 52px;background-position:0 0,10px 17px;opacity:.48;animation:starDrift 20s linear infinite}
.gallery-title{position:relative;z-index:3;text-align:center;height:15%}.gallery-title span{font-family:Georgia,serif;font-size:clamp(8px,2.2vw,11px);letter-spacing:.28em;color:#d8c2a0}.gallery-title h2{font-weight:500;font-size:clamp(27px,7.2vw,38px);letter-spacing:.12em;margin:1vh 0 .4vh}.gallery-title p{font-size:clamp(10px,2.7vw,13px);letter-spacing:.06em;color:#ddd2d3;margin:0}
.gallery-orbit{position:relative;z-index:5;height:67%;width:100%;transform-style:preserve-3d}
.gallery-card{position:absolute;left:50%;top:50%;width:74%;height:83%;transform:translate(-50%,-50%);transition:transform .7s cubic-bezier(.22,.78,.25,1),opacity .6s ease,filter .6s ease;transform-style:preserve-3d;opacity:1}
.gallery-card::before{content:"";position:absolute;inset:-12px;border:1px solid rgba(220,191,145,.56);border-radius:28px;background:linear-gradient(145deg,rgba(255,250,235,.16),rgba(226,186,135,.06));box-shadow:0 24px 45px rgba(0,0,0,.25)}
.gallery-card p{position:absolute;left:8%;right:8%;bottom:4.5%;margin:0;text-align:center;font-size:clamp(12px,3.3vw,17px);letter-spacing:.13em;color:#f4e4ca;text-shadow:0 2px 6px rgba(0,0,0,.38)}
.gallery-art{position:absolute;inset:3%;border-radius:19px;overflow:hidden;background:#e7d4c5;box-shadow:inset 0 0 0 8px rgba(250,234,210,.72),inset 0 0 0 10px rgba(172,126,78,.6)}
.gallery-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(22,25,44,.55));pointer-events:none}
.art-1{background:url('assets/generated/story-meeting.png') center/cover}
.art-2{background:url('assets/generated/story-nearer.png') center/cover}
.art-3{background:url('assets/generated/story-together.png') center/cover}
.art-4{background:url('assets/generated/story-wedding.png') center/cover}
.art-5{background:radial-gradient(circle at 50% 25%,rgba(255,244,210,.95),transparent 22%),linear-gradient(180deg,#adb5cb,#efd4c3 64%,#c69d8b)}
.frame-couple{position:absolute;left:50%;bottom:4%;width:96%;height:88%;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center}.frame-couple img{height:112%;width:116%;object-fit:contain;filter:drop-shadow(0 11px 10px rgba(26,24,32,.24))}.frame-couple.close{transform:translateX(-50%) scale(1.08)}.frame-couple.reverse{transform:translateX(-50%) scaleX(-1)}.frame-couple.silhouette{filter:saturate(.7) contrast(.92)}.frame-couple.final{transform:translateX(-50%) scale(1.06)}
.gallery-card.active{transform:translate(-50%,-50%) translateZ(120px) rotateY(0);z-index:5}
.gallery-card.prev{transform:translate(-94%,-50%) translateZ(-110px) rotateY(22deg) scale(.72);opacity:.6;filter:brightness(.74);z-index:3}
.gallery-card.next{transform:translate(-6%,-50%) translateZ(-110px) rotateY(-22deg) scale(.72);opacity:.6;filter:brightness(.74);z-index:3}
.gallery-card.far-prev{transform:translate(-125%,-50%) translateZ(-250px) rotateY(30deg) scale(.55);opacity:.13;z-index:1}.gallery-card.far-next{transform:translate(25%,-50%) translateZ(-250px) rotateY(-30deg) scale(.55);opacity:.13;z-index:1}.gallery-card.hidden-card{opacity:0;transform:translate(-50%,-50%) translateZ(-300px) scale(.4);pointer-events:none}
.gallery-indicator{position:absolute;z-index:7;bottom:8.7%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:13px;color:#efdec5}.gallery-indicator i{display:block;width:54px;height:1px;background:rgba(239,222,197,.58)}.gallery-guide{position:absolute;z-index:7;left:4%;right:4%;bottom:calc(var(--safe-bottom) + .4vh);text-align:center;margin:0;font-size:clamp(9px,2.5vw,12px);letter-spacing:.09em;color:#d9cbd0}

/* ---------- 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)}
.info-footer{position:relative;z-index:4;margin:auto 0 0;font-size:clamp(11px,3vw,14px);letter-spacing:.12em;color:#8e6b60}

/* ---------- 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)}

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}}