:root{--bg-cream:oklch(98.5% .012 75);--bg-sand:oklch(95.5% .02 70);--coffee-dark:oklch(28% .04 45);--coffee-medium:oklch(46% .08 50);--coffee-accent:oklch(62% .12 45);--rose-subtle:oklch(80% .07 15);--gold-warm:oklch(82% .13 75);--glass-bg:#fffcf8e0;--glass-border:#8e5a3c2e;--glass-highlight:#fffffff2;--shadow-sm:0 4px 12px oklch(25% .04 45/.06);--shadow-md:0 12px 32px oklch(25% .04 45/.12);--shadow-lg:0 24px 60px oklch(25% .04 45/.18);--font-serif:"Playfair Display", "Cormorant Garamond", Georgia, serif;--font-sans:"Outfit", "Nunito", system-ui, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;height:-webkit-fill-available}body{font-family:var(--font-sans);background-color:var(--bg-cream);color:var(--coffee-dark);min-height:100vh;justify-content:center;align-items:center;min-height:-webkit-fill-available;padding:20px 12px;display:flex;position:relative;overflow-x:hidden}#app-container{width:100%;max-width:480px;min-height:100vh;z-index:10;flex-direction:column;justify-content:center;align-items:center;min-height:-webkit-fill-available;display:flex;position:relative}#ambient-background{z-index:0;pointer-events:none;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.glow-orb{filter:blur(90px);opacity:.45;mix-blend-mode:multiply;z-index:1;border-radius:50%;position:absolute}.orb-1{aspect-ratio:1;background-color:var(--coffee-accent);width:min(80vw,550px);animation:25s ease-in-out infinite alternate floatOrb;top:-10%;left:-10%}.orb-2{aspect-ratio:1;background-color:var(--rose-subtle);width:min(75vw,500px);animation:22s ease-in-out infinite alternate-reverse floatOrb;bottom:-10%;right:-10%}@keyframes floatOrb{0%{transform:translate(0)scale(1)}to{transform:translate(40px,40px)scale(1.12)}}.ambient-bean{z-index:5;pointer-events:none;opacity:.25;width:24px;height:24px;animation:4s ease-in-out infinite alternate floatBean;position:absolute}@keyframes floatBean{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-8px)rotate(-10deg)}to{transform:translateY(6px)rotate(12deg)}}.music-control-btn{background:var(--glass-bg);border:1.5px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);cursor:pointer;z-index:99;width:52px;height:52px;box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;top:20px;right:20px}.music-control-btn:hover{box-shadow:var(--shadow-lg);border-color:var(--coffee-accent);transform:scale(1.1)}.music-control-btn:active{transform:scale(.95)}.music-control-btn.hidden{opacity:0;pointer-events:none;transform:translateY(-20px)scale(.8)}.coffee-cup-icon{justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:relative}.coffee-cup-svg{width:100%;height:100%;transition:transform .4s}.music-control-btn.playing .coffee-cup-svg{animation:2.5s ease-in-out infinite pulseCup}@keyframes pulseCup{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.steam-flow{opacity:0;justify-content:space-around;width:20px;height:10px;display:flex;position:absolute;top:-6px}.music-control-btn.playing .steam-flow{opacity:1}.steam-flow span{background:var(--coffee-accent);border-radius:2px;width:3px;height:8px;animation:1.2s ease-in-out infinite steamAnim;display:inline-block}.steam-flow span:nth-child(2){height:11px;animation-delay:.3s}.steam-flow span:nth-child(3){height:7px;animation-delay:.6s}@keyframes steamAnim{0%,to{opacity:.3;transform:translateY(0)scaleY(.6)}50%{opacity:.9;transform:translateY(-4px)scaleY(1.2)}}#envelope-screen{justify-content:center;align-items:center;width:100%;transition:opacity .6s,transform .6s;display:flex}#envelope-screen.hidden{opacity:0;pointer-events:none;display:none;transform:scale(.92)translateY(-20px)}.envelope-container{flex-direction:column;align-items:center;gap:24px;width:100%;display:flex}.envelope-hint{text-align:center;animation:1s fadeInDown}.sparkle-text{font-family:var(--font-serif);color:var(--coffee-dark);letter-spacing:.5px;font-size:1.35rem;font-weight:700}.envelope-subtitle{color:var(--coffee-medium);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px;font-size:.95rem;font-weight:600;display:block}.envelope-wrapper{perspective:1000px;cursor:pointer;width:min(340px,88vw);height:230px;position:relative}.envelope{width:100%;height:100%;box-shadow:var(--shadow-lg);background:#efe4d6;border:1px solid #8e5a3c33;border-radius:12px;position:relative;overflow:visible}.flap{z-index:3;width:0;height:0;position:absolute}.top-flap{transform-origin:top;z-index:5;border-top:130px solid #dfcdbd;border-left:170px solid #0000;border-right:170px solid #0000;transition:transform .6s cubic-bezier(.4,0,.2,1);top:0;left:0}@media (width<=400px){.top-flap{border-top-width:32vw;border-left-width:44vw;border-right-width:44vw}}.left-flap{z-index:3;border-top:115px solid #0000;border-bottom:115px solid #0000;border-left:170px solid #e6d7c7;border-radius:12px 0 0 12px;top:0;left:0}.right-flap{z-index:3;border-top:115px solid #0000;border-bottom:115px solid #0000;border-right:170px solid #e2d2c1;border-radius:0 12px 12px 0;top:0;right:0}.bottom-flap{z-index:4;border-bottom:125px solid #d8c5b3;border-left:170px solid #0000;border-right:170px solid #0000;border-radius:0 0 12px 12px;bottom:0;left:0}.letter-preview{z-index:2;background:#fffdfc;border-radius:8px;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:20px;transition:transform .8s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;inset:15px 20px;box-shadow:0 -3px 10px #0000000d}.letter-header span{letter-spacing:2px;text-transform:uppercase;color:var(--coffee-accent);text-align:center;font-size:.8rem;font-weight:600;display:block}.letter-header h3{font-family:var(--font-serif);color:var(--coffee-dark);text-align:center;margin-top:2px;font-size:1.25rem}.wax-seal-btn{cursor:pointer;z-index:10;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:68px;height:68px;transition:transform .3s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.wax-seal-btn:hover{transform:translate(-50%,-50%)scale(1.08)}.wax-circle{background:radial-gradient(circle at 35% 35%,#8b3a3a,#5a1e1e);border:1px solid #ffc8c833;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex;box-shadow:0 4px 15px #5a1e1e66,inset 0 2px 4px #ffffff4d}.seal-icon-svg{width:72%;height:72%}.envelope-wrapper.open .top-flap{z-index:1;transform:rotateX(180deg)}.envelope-wrapper.open .letter-preview{transform:translateY(-80px)scale(1.05)}.click-instruction{color:var(--coffee-medium);font-size:.95rem;font-weight:600;animation:2s ease-in-out infinite pulseInstruction}@keyframes pulseInstruction{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}#card-screen{opacity:0;width:100%;transition:opacity .6s,transform .6s;display:none}#card-screen.active{opacity:1;animation:.7s cubic-bezier(.16,1,.3,1) forwards fadeInUp;display:block}.storybook-wrapper{justify-content:center;width:100%;display:flex}.storybook-card{background:var(--glass-bg);border:1.5px solid var(--glass-border);-webkit-backdrop-filter:blur(16px);width:100%;box-shadow:var(--shadow-lg);border-radius:24px;flex-direction:column;gap:16px;padding:16px;display:flex;position:relative;overflow:hidden}.slide-media{aspect-ratio:9/16;width:100%;box-shadow:var(--shadow-md);background:#000;border-radius:18px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.slide-video{object-fit:cover;opacity:0;z-index:1;width:100%;height:100%;transition:opacity .3s;display:block;position:absolute;top:0;left:0}.slide-video.active-video{opacity:1;z-index:2}.smoke-loop-video{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.slide-badge{color:#fffdfc;letter-spacing:.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#2c1a10bf;border:1px solid #fff3;border-radius:20px;padding:6px 14px;font-size:.8rem;font-weight:600;position:absolute;top:14px;left:14px}.replay-btn{color:#fffdfc;-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:20;background:#2c1a10cc;border:1px solid #ffffff40;border-radius:20px;align-items:center;gap:6px;padding:7px 14px;font-size:.82rem;font-weight:600;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;position:absolute;bottom:14px;right:14px;box-shadow:0 4px 12px #0000004d}.replay-btn:hover{background:#2c1a10f2;transform:scale(1.05)}.replay-btn.hidden{opacity:0;pointer-events:none;transform:translateY(8px)scale(.9)}.slide-content{flex-direction:column;gap:14px;padding:4px 6px;display:flex}.event-details-badge{text-align:center;border:1px solid var(--glass-border);background:#efe4d680;border-radius:14px;padding:10px 14px}.event-place-name{font-family:var(--font-serif);color:var(--coffee-dark);font-size:1.15rem;font-weight:700}.event-address{color:var(--coffee-medium);margin-top:3px;font-size:.88rem}.countdown-container{border:1px solid var(--glass-border);text-align:center;box-shadow:var(--shadow-sm);background:#fffdf9;border-radius:16px;padding:12px 10px}.countdown-label{color:var(--coffee-accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:.85rem;font-weight:600;display:block}.countdown-clock{justify-content:center;gap:8px;display:flex}.time-block{background:var(--bg-cream);border:1px solid #8e5a3c1f;border-radius:10px;flex-direction:column;align-items:center;min-width:58px;padding:6px 4px;display:flex}.time-val{font-family:var(--font-serif);color:var(--coffee-dark);font-size:1.35rem;font-weight:700;line-height:1.1}.time-unit{color:var(--coffee-medium);text-transform:uppercase;letter-spacing:.5px;font-size:.7rem}.actions-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.action-btn{cursor:pointer;box-shadow:var(--shadow-sm);border:none;border-radius:14px;justify-content:center;align-items:center;gap:6px;padding:12px 14px;font-size:.92rem;font-weight:600;text-decoration:none;transition:all .25s;display:flex}.btn-hover-effect:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-hover-effect:active{transform:translateY(0)}.map-btn{color:#fffdfc;background:#3a2312}.map-btn:hover{background:#25160b}.calendar-btn{color:var(--coffee-dark);border:1.5px solid var(--coffee-accent);background:#fffdfc}.calendar-btn:hover{background:#f8f2ea}.stories-link-banner{text-align:center;padding-top:4px}.stories-btn{color:var(--coffee-accent);background:#8e5a3c14;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:.88rem;font-weight:600;text-decoration:none;transition:background .2s;display:inline-flex}.stories-btn:hover{background:#8e5a3c26}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}