:root{--bg-creme:oklch(98.5% .015 85);--honey-gold:oklch(82% .14 82);--honey-dark:oklch(66% .16 76);--sage-green:oklch(89% .05 130);--sage-dark:oklch(58% .08 135);--pooh-red:oklch(64% .18 30);--pooh-red-light:oklch(76% .11 30);--glass-bg:#fffcf3d1;--glass-border:#c68b592e;--glass-border-sage:#8eac8938;--glass-highlight:#ffffffd9;--shadow-sm:0 2px 10px oklch(35% .08 65/.04);--shadow-md:0 10px 30px oklch(35% .08 65/.08);--shadow-lg:0 20px 50px oklch(35% .08 65/.12);--font-fancy:"Fredoka", "Quicksand", sans-serif;--font-body:"Nunito", "Quicksand", 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-body);background-color:var(--bg-creme);color:oklch(32% .06 65);min-height:100vh;justify-content:center;align-items:center;min-height:-webkit-fill-available;padding:20px 10px;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(100px);opacity:.35;mix-blend-mode:multiply;z-index:1;border-radius:50%;position:absolute}.orb-1{aspect-ratio:1;background-color:var(--honey-gold);width:min(80vw,600px);animation:30s ease-in-out infinite alternate floatOrb;top:-10%;left:-10%}.orb-2{aspect-ratio:1;background-color:var(--sage-green);width:min(75vw,550px);animation:25s ease-in-out infinite alternate-reverse floatOrb;bottom:-10%;right:-10%}@keyframes floatOrb{0%{transform:translate(0)scale(1)}to{transform:translate(50px,50px)scale(1.15)}}.cloud{opacity:.6;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' fill='%23ffffff' opacity='0.75'%3E%3Cpath d='M20 40a15 15 0 0 1 12-14.7 18 18 0 0 1 34.3-3.6 15 15 0 0 1 13.7 18.3H20z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;position:absolute}.cloud-1{width:180px;height:100px;animation:45s linear infinite driftCloud;top:15%;left:-200px}.cloud-2{width:250px;height:150px;animation:65s linear -20s infinite driftCloud;top:50%;left:-300px}.cloud-3{width:140px;height:80px;animation:35s linear -10s infinite driftCloud;top:75%;left:-200px}@keyframes driftCloud{0%{left:-300px}to{left:calc(100vw + 300px)}}.ambient-bee{z-index:5;pointer-events:none;width:28px;height:28px;transition:opacity 1s;animation:3s ease-in-out infinite alternate hoverBee;position:absolute}@keyframes hoverBee{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-6px)rotate(-5deg)}to{transform:translateY(4px)rotate(8deg)}}.music-control-btn{background:var(--glass-bg);border:2px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:99;width:54px;height:54px;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(--honey-gold);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)}.honey-pot-icon{justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:relative}.honey-pot-svg{width:100%;height:100%;transition:transform .4s}.music-control-btn.playing .honey-pot-svg{animation:2s ease-in-out infinite swingPot}@keyframes swingPot{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}.music-note-flow{opacity:0;pointer-events:none;justify-content:space-around;align-items:flex-end;width:25px;height:12px;transition:opacity .3s;display:flex;position:absolute;top:-10px}.music-control-btn.playing .music-note-flow{opacity:1}.music-note-flow span{background-color:var(--honey-dark);border-radius:2px;width:3px;animation:1.2s ease-in-out infinite alternate bounceBar}.music-note-flow span:first-child{height:4px;animation-delay:.1s}.music-note-flow span:nth-child(2){height:10px;animation-delay:.4s}.music-note-flow span:nth-child(3){height:6px;animation-delay:.25s}@keyframes bounceBar{0%{height:2px}to{height:12px}}#envelope-screen{z-index:80;opacity:1;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .8s,transform .8s cubic-bezier(.645,.045,.355,1);display:flex;position:absolute;top:0;left:0}#envelope-screen.hidden{opacity:0;pointer-events:none;transform:scale(.9)translateY(-100px)}.envelope-container{z-index:10;flex-direction:column;justify-content:center;align-items:center;width:min(90vw,400px);transition:transform .3s;display:flex}@media (width<=340px){.envelope-container{transform:scale(.88)}}.envelope-hint{text-align:center;margin-bottom:25px;animation:3s ease-in-out infinite pulseHint}.sparkle-text{font-family:var(--font-fancy);color:var(--honey-dark);text-shadow:0 2px 4px #fffc;font-size:clamp(1.2rem,4.5vw,1.5rem);font-weight:600}.envelope-subtitle{color:oklch(50% .06 65);margin-top:5px;font-size:.9rem;display:block}@keyframes pulseHint{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.envelope-wrapper{background-color:var(--pooh-red-light);width:320px;height:220px;box-shadow:var(--shadow-lg);cursor:pointer;perspective:1000px;border-radius:0 0 16px 16px;position:relative}.envelope{background-color:var(--pooh-red-light);width:100%;height:100%;transform-style:preserve-3d;border-radius:0 0 16px 16px;position:absolute}.flap{border-style:solid;width:0;height:0;position:absolute}.top-flap{border-width:110px 160px 0;border-color:var(--pooh-red) transparent transparent transparent;transform-origin:top;z-index:4;transition:transform .6s ease-in-out,z-index .2s .3s;top:0;left:0}.left-flap{z-index:3;border-width:110px 0 110px 160px;border-color:#0000 #0000 #0000 oklch(65% .17 30/.92);top:0;left:0}.right-flap{z-index:3;border-width:110px 160px 110px 0;border-color:#0000 oklch(65% .17 30/.92) #0000 #0000;top:0;right:0}.bottom-flap{z-index:3;border-width:0 160px 110px;border-color:#0000 #0000 oklch(60% .18 30);border-radius:0 0 16px 16px;bottom:0;left:0}.letter-preview{border:1px dashed var(--honey-gold);z-index:2;background-color:#fffaf0;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:290px;height:190px;padding:20px;transition:transform .7s cubic-bezier(.19,1,.22,1);display:flex;position:absolute;top:15px;left:15px;transform:translateY(0);box-shadow:inset 0 0 12px #c68b5926}.letter-header{text-align:center}.letter-header span{font-family:var(--font-fancy);color:var(--sage-dark);letter-spacing:2px;text-transform:uppercase;font-size:.85rem}.letter-header h3{font-family:var(--font-fancy);color:var(--honey-dark);margin-top:4px;font-size:1.7rem}.wax-seal-btn{cursor:pointer;z-index:5;background:0 0;border:none;justify-content:center;align-items:center;width:64px;height:64px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;top:calc(50% - 30px);left:calc(50% - 30px)}.wax-seal-btn:hover{transform:scale(1.15)rotate(5deg)}.wax-circle{background:radial-gradient(circle,#db3a3a 0%,#a82222 100%);border:3px solid #8f1717;border-radius:50%;justify-content:center;align-items:center;width:54px;height:54px;display:flex;box-shadow:0 4px 10px #0000004d,inset 0 2px 4px #fff6}.seal-icon-svg{width:32px;height:32px}.seal-glow{border:2px solid var(--honey-gold);opacity:.6;pointer-events:none;border-radius:50%;animation:1.8s ease-in-out infinite pulseGlow;position:absolute;inset:-8px}@keyframes pulseGlow{0%{opacity:.8;transform:scale(.9)}to{opacity:0;transform:scale(1.2)}}.click-instruction{font-family:var(--font-fancy);color:var(--pooh-red);letter-spacing:.5px;margin-top:25px;font-size:.95rem;animation:2s ease-in-out infinite floatText}@keyframes floatText{0%,to{opacity:.7;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.envelope-wrapper.open .top-flap{z-index:1;transform:rotateX(180deg)}.envelope-wrapper.open .letter-preview{z-index:4;transform:translateY(-135px)scale(1.02)}.envelope-wrapper.open .wax-seal-btn{opacity:0;pointer-events:none;transform:scale(0)rotate(180deg)}#card-screen{z-index:50;opacity:0;pointer-events:none;justify-content:center;align-items:center;width:100%;min-height:100vh;transition:opacity .8s cubic-bezier(.215,.61,.355,1) .2s,transform .8s cubic-bezier(.215,.61,.355,1) .2s;display:flex;position:relative;transform:translateY(40px)scale(.98)}#card-screen.active{opacity:1;pointer-events:all;transform:translateY(0)scale(1)}.storybook-wrapper{perspective:1500px;width:min(92vw,380px);transition:width .3s}@media (height<=840px){.storybook-wrapper{width:min(92vw,340px)}}@media (height<=740px){.storybook-wrapper{width:min(92vw,305px)}}@media (height<=660px){.storybook-wrapper{width:min(92vw,275px)}}.storybook-card{background:var(--glass-bg);border:1.5px solid var(--glass-border);width:100%;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(16px);corner-shape:squircle;border-radius:24px;flex-direction:column;transition:transform .4s;display:flex;position:relative;overflow:hidden}.card-corner{border:2px solid var(--honey-gold);opacity:.65;z-index:10;pointer-events:none;width:18px;height:18px;position:absolute}.corner-tl{border-bottom:none;border-right:none;border-radius:4px 0 0;top:10px;left:10px}.corner-tr{border-bottom:none;border-left:none;border-radius:0 4px 0 0;top:10px;right:10px}.corner-bl{border-top:none;border-right:none;border-radius:0 0 0 4px;bottom:10px;left:10px}.corner-br{border-top:none;border-left:none;border-radius:0 0 4px;bottom:10px;right:10px}.storybook-pages{grid-template-areas:"overlap";width:100%;padding:16px;display:grid}.story-slide{opacity:0;pointer-events:none;flex-direction:column;grid-area:overlap;justify-content:flex-start;align-items:stretch;height:100%;transition:opacity .5s ease-in-out,transform .6s cubic-bezier(.34,1.56,.64,1);display:flex;transform:scale(.96)translate(30px)}.story-slide.active-slide{opacity:1;pointer-events:all;transform:scale(1)translate(0)}.story-slide.slide-left{transform:scale(.96)translate(-30px)}.slide-media{aspect-ratio:9/16;width:100%;box-shadow:var(--shadow-sm);border:1.5px solid var(--glass-border);border-radius:16px;margin-bottom:12px;position:relative;overflow:hidden}.slide-gif{object-fit:contain;background-color:var(--bg-creme);width:100%;height:100%;display:block}.slide-badge{font-family:var(--font-fancy);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(6px);z-index:5;border-radius:16px;padding:4px 10px;font-size:.72rem;font-weight:600;position:absolute;top:10px;left:10px}.honey-badge{border:1px solid var(--honey-gold);color:oklch(40% .11 70);background-color:oklch(85% .12 82/.85)}.rsvp-badge{border:1px solid var(--pooh-red-light);color:#fff;background-color:oklch(76% .11 30/.85)}.sage-badge{border:1px solid var(--sage-dark);color:var(--sage-dark);background-color:oklch(90% .04 130/.85)}.baby-badge{border:1px solid var(--honey-gold);color:var(--honey-dark);background-color:oklch(95% .03 82/.85)}.slide-content{flex-direction:column;flex-grow:1;justify-content:center;display:flex}.countdown-container{text-align:center;border:1px dashed var(--honey-gold);background-color:#ffc0450f;border-radius:12px;margin-bottom:10px;padding:6px 10px}.countdown-label{font-family:var(--font-fancy);color:var(--honey-dark);margin-bottom:4px;font-size:.78rem;display:block}.countdown-clock{justify-content:center;gap:8px;display:flex}.time-block{flex-direction:column;align-items:center;min-width:42px;display:flex}.time-val{font-family:var(--font-fancy);color:var(--honey-dark);background-color:var(--glass-highlight);border:1px solid var(--glass-border);text-align:center;min-width:36px;box-shadow:var(--shadow-sm);border-radius:6px;padding:2px 6px;font-size:1.15rem;font-weight:700}.time-unit{color:oklch(50% .05 65);text-transform:uppercase;margin-top:2px;font-size:.62rem}.rsvp-prompt-compact{text-align:center;color:oklch(48% .06 65);margin-bottom:10px;font-size:.85rem;font-weight:500;line-height:1.4}.pooh-quote-container{justify-content:center;margin-top:4px;padding:6px 10px;display:flex}.pooh-quote{font-family:var(--font-fancy);text-align:center;color:var(--honey-dark);border-top:1px dashed #c68b5940;width:90%;padding-top:8px;font-size:.8rem;line-height:1.4;display:block}.pooh-quote em{color:oklch(50% .05 65);margin-top:2px;font-size:.68rem;font-style:normal;display:block}.baby-welcome-box-compact{text-align:center;margin-top:4px;padding:8px 10px}.baby-signature-compact{font-family:var(--font-fancy);color:var(--honey-dark);background-color:#ffc0450f;border:1px solid #ffc0451f;border-radius:12px;padding:6px 12px;font-size:.9rem;font-weight:600;display:inline-block}.actions-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.single-action{grid-template-columns:1fr}.action-btn{font-family:var(--font-fancy);cursor:pointer;box-shadow:var(--shadow-sm);border:none;border-radius:10px;justify-content:center;align-items:center;padding:10px 8px;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex}.action-btn span{align-items:center;gap:4px;display:flex}.btn-hover-effect:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-hover-effect:active{transform:translateY(-.5px)}.map-btn{background:linear-gradient(135deg, var(--honey-gold) 0%, oklch(75% .15 82) 100%);border:1px solid var(--honey-dark);color:oklch(30% .1 70)}.map-btn:hover{background:linear-gradient(135deg, oklch(85% .13 82) 0%, var(--honey-gold) 100%)}.calendar-btn{background:linear-gradient(135deg, var(--sage-green) 0%, oklch(83% .05 130) 100%);border:1px solid var(--sage-dark);color:oklch(35% .06 130)}.calendar-btn:hover{background:linear-gradient(135deg, oklch(92% .04 130) 0%, var(--sage-green) 100%)}.whatsapp-btn{background:linear-gradient(135deg, var(--pooh-red) 0%, var(--pooh-red-light) 100%);color:#fff;border:1px solid oklch(50% .15 30);padding:11px 16px;font-size:.9rem}.whatsapp-btn:hover{background:linear-gradient(135deg, var(--pooh-red-light) 0%, var(--pooh-red) 100%);box-shadow:0 6px 15px oklch(64% .18 30/.2)}.storybook-controls{border-top:1px solid var(--glass-border);background-color:#5c3d2e05;justify-content:space-between;align-items:center;gap:8px;padding:12px 18px;display:flex}.nav-control-btn{border:1.5px solid var(--glass-border);background-color:var(--glass-highlight);color:var(--honey-dark);font-family:var(--font-fancy);cursor:pointer;box-shadow:var(--shadow-sm);border-radius:10px;align-items:center;gap:4px;padding:8px 12px;font-size:.78rem;font-weight:600;transition:all .3s;display:flex}.nav-control-btn:not(.disabled):hover{background-color:var(--honey-gold);border-color:var(--honey-dark);color:oklch(30% .1 70);transform:translateY(-1px)}.nav-control-btn.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.nav-control-btn.hidden-btn{opacity:0;pointer-events:none;visibility:hidden}.page-indicators{gap:10px;display:flex}.indicator{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:3px;display:flex}.honey-drop{background-color:#c68b5940;border-radius:0 50% 50%;width:8px;height:8px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:block;transform:rotate(45deg)}.indicator:hover .honey-drop{background-color:var(--honey-gold);transform:rotate(45deg)scale(1.15)}.indicator.active .honey-drop{background-color:oklch(78% .15 82);transform:rotate(45deg)scale(1.3);box-shadow:0 0 8px oklch(78% .15 82/.6)}@media (prefers-reduced-motion:reduce){*,:before,:after{background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:1ms!important;transition-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:-1ms!important}.glow-orb,.cloud,.ambient-bee{display:none!important}#envelope-screen.hidden{transform:none}}