html,body,#root{width:100%;height:100%;margin:0}body{color:#f4fbff;background:linear-gradient(160deg,#0c1d2b 0%,#13324a 45%,#08131d 100%);padding:0;font-family:Cormorant Garamond,Iowan Old Style,Palatino Linotype,serif;overflow:hidden}.app{box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-height:100dvh;padding:20px 0;display:flex;position:relative}:root{--shell-pad:clamp(16px, 3vw, 32px)}.scene-shell{width:100%;min-height:100dvh;padding:var(--shell-pad);padding-top:max(var(--shell-pad), env(safe-area-inset-top));padding-right:max(var(--shell-pad), env(safe-area-inset-right));padding-bottom:max(var(--shell-pad), env(safe-area-inset-bottom));padding-left:max(var(--shell-pad), env(safe-area-inset-left));box-sizing:border-box;isolation:isolate;background:linear-gradient(160deg,#0c1d2b 0%,#13324a 45%,#08131d 100%);place-items:center;display:grid;position:relative;overflow:hidden}.scene{perspective:1800px;width:min(92vw,760px);height:min(82dvh,760px);transform-style:preserve-3d;cursor:pointer;outline:none;justify-content:center;align-items:center;margin:0 auto;transition:transform .45s,filter .45s;display:flex;position:relative;overflow:visible}.scene-trigger{cursor:pointer;z-index:4;background:0 0;border:0;margin:0;padding:0;position:absolute;inset:0}.scene-trigger:focus-visible{outline-offset:4px;outline:2px solid #dff6ffe0}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.scene:hover{transform:translateY(-4px)}.scene.is-open{filter:none}.scene.is-open .envelope-image,.scene.is-open .hover-hint{opacity:0;visibility:hidden}.cinematic-vignette,.cinematic-fog,.cinematic-fog-a,.cinematic-fog-b,.cinematic-rays,.scene-spotlight,.shadow-glow,.dust-field{display:none!important}.dust-field{pointer-events:none;position:absolute;inset:0}.dust-particle{background:radial-gradient(circle,#eefafff2,#97c3e447 70%,#0000 100%);border-radius:50%;position:absolute;box-shadow:0 0 14px #96c9ef85}.scene-spotlight{pointer-events:none;filter:blur(18px);background:radial-gradient(circle at 50% 20%,#ecfaff3d,#0000 22%),radial-gradient(circle at 50% 45%,#89bde224,#0000 36%);position:absolute;inset:-20% -18%}.shadow-glow{filter:blur(24px);opacity:.85;z-index:0;background:radial-gradient(circle,#98cdee57,#0000 64%);border-radius:50%;position:absolute;inset:16% 12% 0}.letter-wrapper{z-index:1;justify-content:center;align-items:center;width:min(100%,760px);max-width:calc(100vw - 32px);margin:0 auto;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.invitation-letter{color:#173448;scrollbar-gutter:stable;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:linear-gradient(#f5fbfffa,#e0f2fcfa);border:1px solid #7bb1d438;border-radius:clamp(14px,2vw,18px);width:min(100%,760px);max-height:min(84dvh,920px);margin:0 auto;padding:clamp(28px,4vw,42px) clamp(18px,3vw,28px) clamp(24px,4vw,32px);position:relative;overflow:hidden auto;transform:perspective(1000px)rotateX(1.5deg);box-shadow:0 18px 35px #000e1838,inset 0 1px #ffffffd1}.invitation-letter:after{content:"";opacity:.55;pointer-events:none;background:linear-gradient(110deg,#0000 35%,#ffffff4d 48%,#0000 60%),linear-gradient(#5c93bd0a,#0000 24% 76%,#5c93bd0d);position:absolute;inset:0}.letter-ribbon{opacity:.95;background:linear-gradient(90deg,#0000,#6ea8cf 18%,#d9f0ff 50%,#6ea8cf 82%,#0000);border-radius:999px;width:min(390px,84%);height:6px;position:absolute;inset:18px auto auto 50%;transform:translate(-50%)}.letter-top-image-shell{margin:clamp(20px,2vw,18px) calc(-1*clamp(18px,3vw,26px)) clamp(10px,1.6vw,12px);position:relative;overflow:hidden}.letter-top-image-shell:after{content:"";pointer-events:none;background:linear-gradient(#e0f2fc00 0%,#e0f2fc1a 66%,#e0f2fc47 100%);height:clamp(42px,7vw,72px);position:absolute;bottom:0;left:0;right:0}.letter-top-image-shell:before{content:"";pointer-events:none;background:linear-gradient(#f5fbff52 0%,#f5fbff29 42%,#f5fbff0f 78%,#f5fbff00 100%);height:clamp(48px,8vw,84px);position:absolute;top:0;left:0;right:0}.letter-top-image{object-fit:cover;object-position:center 30%;width:100%;height:clamp(240px,34vw,480px);display:block;-webkit-mask-image:linear-gradient(#0000 0%,#000000ad 14%,#000 30% 72%,#000000ad 88%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000000ad 14%,#000 30% 72%,#000000ad 88%,#0000 100%)}.letter-eyebrow,.letter-meta,.letter-note{text-align:center;margin:0}.letter-eyebrow{color:#2f6c8f;letter-spacing:clamp(.18em,.5vw,.3em);text-transform:uppercase;margin-top:10px;margin-bottom:clamp(24px,4vw,40px);margin-left:20px;font-size:clamp(1.9rem,2vw,1.4rem)}.invitation-letter h1{text-align:center;letter-spacing:-.02em;color:#173f59;margin:0;font-size:clamp(2.4rem,7vw,4.1rem);font-weight:600;line-height:.8}.couple-title{justify-items:center;gap:0;margin:0;display:grid}.couple-name1{margin-right:120px;display:block}.couple-name2{margin-left:120px;display:block}.couple-separator{color:#2f6c8f;margin:clamp(2px,.5vw,6px) 0;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1;display:block}.save-date-title{text-align:center;color:#173f59;letter-spacing:.01em;margin:0;font-size:clamp(1.9rem,5vw,2.8rem)}.invitation-letter p{width:90%;max-width:100%}.letter-copy{text-align:center;color:#38586b;max-width:48ch;margin:clamp(22px,3vw,40px) auto;font-size:clamp(1.5rem,2vw,1.4rem);line-height:1.4}.letter-divider{background:linear-gradient(90deg,#0000,#4a80a6b3,#0000);width:clamp(56px,10vw,72px);height:1px;margin:clamp(14px,2vw,18px) auto}.letter-meta{letter-spacing:clamp(.1em,.25vw,.14em);text-transform:uppercase;color:#2f6c8f;font-size:clamp(1.65rem,1.8vw,1.4rem)}.letter-falta{text-align:center;letter-spacing:clamp(.1em,.25vw,.14em);text-transform:uppercase;color:#2f6c8f;margin:50px auto 0;font-size:clamp(1.95rem,1.8vw,1.4rem);font-weight:bolder}.letter-msg{text-align:center;letter-spacing:clamp(.1em,.25vw,.14em);text-transform:uppercase;color:#2f6c8f;margin-top:50px;margin-bottom:-20px;font-size:clamp(.95rem,1.8vw,1.4rem);font-weight:bolder}.letter-date-row{justify-content:center;align-items:center;gap:clamp(8px,1.4vw,10px);display:flex}.letter-date-row .letter-meta{margin:0}.calendar-icon{color:#2f6c8f;fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:clamp(18px,2vw,20px);height:clamp(18px,2vw,20px)}.countdown{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:clamp(14px,2vw,18px) 0 clamp(18px,3vw,22px);display:grid}.countdown-item{background:#f5fbffe6;border:1px solid #6fa4c433;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:12px 8px;display:flex;box-shadow:0 8px 18px #183f5914}.countdown-value{letter-spacing:.04em;color:#173f59;font-size:clamp(1.55rem,4vw,2.2rem);font-weight:700;line-height:1}.countdown-label{letter-spacing:.16em;text-transform:uppercase;color:#2f6c8f;font-size:clamp(.68rem,1.2vw,.78rem)}.letter-note{color:#37566be0;margin-top:12px;font-size:clamp(.85rem,1.35vw,.95rem)}.invite-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:clamp(16px,2.5vw,18px) 0 4px;display:grid}.invite-action{color:#173f59;letter-spacing:.04em;background:linear-gradient(#f5fbfffa,#e6f4fcfa);border:1px solid #6fa4c447;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:12px 14px;font-size:clamp(1.2rem,1.4vw,.95rem);font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;display:inline-flex;box-shadow:0 8px 18px #183f5914}.invite-action:hover{border-color:#2f6c8f73;transform:translateY(-1px);box-shadow:0 12px 22px #183f591f}.invite-action:focus-visible,.audio-floating-button:focus-visible{outline-offset:2px;outline:2px solid #1a5c82bf}.audio-floating-button{color:#173f59;cursor:pointer;z-index:4;background:linear-gradient(#f5fbfffa,#e6f4fcfa);border:1px solid #2f6c8f73;border-radius:999px;justify-content:center;align-items:center;width:42px;height:42px;min-height:44px;padding:0;display:inline-flex;position:absolute;top:16px;right:16px;box-shadow:0 8px 18px #183f591f}.audio-floating-button svg{fill:currentColor;stroke:none;width:18px;height:18px}.audio-floating-button:hover{transform:translateY(-1px);box-shadow:0 12px 22px #183f5929}.action-icon{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:clamp(18px,2vw,20px);height:clamp(18px,2vw,20px)}.envelope-image{object-fit:contain;z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:min(50%,620px);height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hover-hint{color:#fff8f0c2;letter-spacing:.12em;text-transform:uppercase;white-space:normal;text-align:center;z-index:6;max-width:min(88vw,280px);padding:15px;font-size:clamp(.78rem,1.2vw,.96rem);position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%)}@keyframes driftFog{0%{transform:translate(-1.5%)scale(1)}to{transform:translate(1.5%,-1%)scale(1.06)}}@keyframes raySweep{0%{transform:translate(-1.5%)rotate(-10deg)}to{transform:translate(1.5%)rotate(-10deg)}}@media (prefers-reduced-motion:reduce){.cinematic-fog-a,.cinematic-fog-b,.cinematic-rays,.dust-particle{animation:none!important}}@media (width<=640px){.app{min-height:100dvh;padding:12px 0 20px}.scene-shell{min-height:100dvh;padding:max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom)) 0;justify-content:center;align-items:center;display:flex}.scene{aspect-ratio:auto;width:100%;max-width:none;height:min(72dvh,560px)}.letter-wrapper{justify-content:center;align-items:center;width:100%;max-width:100%;margin:0 auto;display:flex;position:relative!important;top:auto!important;left:auto!important;translate:none!important}.envelope-image{object-position:center;width:min(100%,300px);height:auto;top:50%;left:50%;transform:translate(-50%,-50%)}.hover-hint{font-size:.76rem;top:calc(100% + 14px)}.invitation-letter{box-sizing:border-box;width:100%;max-height:min(80dvh,860px);margin:0 auto;padding:24px 16px 20px;position:relative;left:0;transform:none}.audio-floating-button{width:40px;height:40px;top:12px;right:12px}.letter-ribbon{width:min(280px,82%)}.letter-top-image-shell{margin-left:-16px;margin-right:-16px}.letter-top-image{height:clamp(210px,58vw,330px)}.invitation-letter h1{font-size:clamp(2rem,11vw,3.2rem);line-height:.9}.save-date-title{font-size:clamp(1.8rem,7vw,2.5rem)}.letter-copy{max-width:36ch;font-size:1.05rem}.countdown{box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}.countdown-item{min-width:0;min-height:52px;padding:10px 6px}.invite-actions{grid-template-columns:1fr;justify-items:center}.invite-action{width:min(100%,340px);min-height:44px}}@media (width<=380px){.invitation-letter{padding:18px 12px 16px}.audio-floating-button{width:38px;height:38px;top:10px;right:10px}.invitation-letter h1{font-size:clamp(1.85rem,10.2vw,2.6rem)}.letter-copy{font-size:1rem}}@media (width>=641px) and (width<=1024px){.scene{width:min(88vw,680px)}.invitation-letter{max-height:min(82svh,900px);padding:clamp(24px,3vw,30px) clamp(18px,2.2vw,22px) clamp(20px,2.8vw,24px)}.countdown{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=1200px){.scene{width:min(88vw,700px)}.invitation-letter{max-height:min(80svh,900px)}.letter-top-image{height:clamp(300px,30vw,520px)}}