:root{--bg-from: #f3e8ff;--bg-to: #e8d5f5;--glass-bg: rgba(255, 255, 255, .25);--glass-border: rgba(255, 255, 255, .5);--glass-shadow: 0 8px 32px 0 rgba(216, 191, 216, .6);--glass-blur: blur(16px);--accent: #a855f7;--accent-soft: #d8b4fe;--accent-dark: #7c3aed;--text-primary: #3b1a5a;--text-secondary: #7c5a9a;--text-light: #b39dbd;--font-heading: "Cormorant Garamond", "Playfair Display", serif;--font-body: "Poppins", sans-serif;--radius: 20px;--radius-sm: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-body);color:var(--text-primary);background:linear-gradient(135deg,#f3e8ff,#e8d5f5 40%,#fce4ec,#e8d5f5);background-attachment:fixed;overflow:hidden;-webkit-user-select:none;user-select:none}body:before{content:"";position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.15) 0%,transparent 70%);top:-200px;left:-200px;animation:floatOrb 15s ease-in-out infinite;pointer-events:none;z-index:0}body:after{content:"";position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.12) 0%,transparent 70%);bottom:-150px;right:-150px;animation:floatOrb 18s ease-in-out infinite reverse;pointer-events:none;z-index:0}@keyframes floatOrb{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-40px) scale(1.1)}}.glass{position:relative;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:var(--radius);border:1px solid transparent;box-shadow:var(--glass-shadow);background-clip:padding-box;transition:var(--transition)}.glass:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius);padding:1px;background:linear-gradient(135deg,#fff9,#ffffff26 40%,#d8bfd81a 60%,#d8bfd880);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}.glass>*{position:relative;z-index:2}.glass:hover{transform:translateY(-4px);box-shadow:0 16px 48px #a855f740,0 8px 32px #d8bfd8b3}h1,h2,h3{font-family:var(--font-heading);color:var(--text-primary);font-weight:600}h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.15}h2{font-size:clamp(1.6rem,4vw,2.4rem)}h3{font-size:clamp(1.2rem,3vw,1.7rem)}p{line-height:1.8;color:var(--text-secondary)}.animated-heading{display:flex;flex-wrap:wrap;justify-content:center;gap:0}.animated-heading__char{display:inline-block;opacity:0;transform:translate(-18px);animation:letterIn .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes letterIn{to{opacity:1;transform:translate(0)}}.fade-in{opacity:0;transform:translateY(16px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}.fade-in--visible{opacity:1;transform:translateY(0)}.app-container{display:flex;height:100vh;position:relative;z-index:1;overflow:hidden}.sections-scroller{flex:1;height:100vh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.sections-scroller::-webkit-scrollbar{display:none}.section{scroll-snap-align:start;scroll-snap-stop:always;min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;box-sizing:border-box;text-align:center;gap:2.5rem;position:relative}.section__subtitle{font-size:1.1rem;color:var(--text-secondary);max-width:600px;line-height:1.8}.navbar{position:fixed;right:2rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;z-index:1000;padding:1.2rem .8rem;border-radius:40px;background:#fff3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);box-shadow:0 8px 32px #d8bfd866}.navbar__dot-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.navbar__dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent-soft);background:#ffffff80;cursor:pointer;transition:var(--transition);padding:0}.navbar__dot:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.2)}.navbar__dot--active{background:var(--accent-dark);border-color:var(--accent-dark);transform:scale(1.4);box-shadow:0 0 14px #7c3aedcc}.navbar__tooltip{position:absolute;right:40px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);padding:.5rem 1rem;border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;font-weight:500;white-space:nowrap;opacity:0;transform:translate(10px);pointer-events:none;transition:var(--transition)}.navbar__dot-wrapper:hover .navbar__tooltip{opacity:1;transform:translate(0)}.login-page{min-height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;z-index:1}.login-card{width:100%;max-width:440px;padding:3.5rem 2.5rem;display:flex;flex-direction:column;align-items:center;gap:1.8rem;text-align:center}.login-card__heart{font-size:3.5rem;animation:heartbeat 2s ease infinite;filter:drop-shadow(0 4px 12px rgba(168,85,247,.4))}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.login-hint{font-size:1.15rem;color:var(--text-secondary);line-height:1.8}.login-form{display:flex;flex-direction:column;gap:1.2rem;width:100%}.login-input{padding:1rem 1.2rem;border-radius:var(--radius-sm);border:1.5px solid var(--glass-border);background:#ffffff73;font-family:var(--font-body);font-size:1.05rem;color:var(--text-primary);outline:none;transition:var(--transition);width:100%;text-align:center}.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px #a855f733}.login-btn{padding:1rem 2rem;border-radius:var(--radius-sm);border:none;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-family:var(--font-body);font-size:1.05rem;font-weight:600;cursor:pointer;transition:var(--transition);letter-spacing:.03em;box-shadow:0 6px 20px #a855f74d}.login-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px #a855f780}.login-error{color:#db2777;font-size:.95rem;font-weight:500;animation:shake .4s ease}.shake{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem;width:100%;max-width:860px}.media-card{overflow:hidden;padding:1rem;display:flex;flex-direction:column;align-items:center}.media-iframe{width:100%;aspect-ratio:16/9;border:none;border-radius:var(--radius-sm);display:block;background:#ffffff1a;box-shadow:0 4px 20px #0000000d}.timeline{position:relative;width:100%;max-width:640px;display:flex;flex-direction:column;gap:2.5rem;padding:1.5rem 0}.timeline__line{position:absolute;left:28px;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,var(--accent-soft),#ec4899,var(--accent-soft));border-radius:3px;opacity:.6}.timeline__item{display:flex;align-items:flex-start;gap:1.5rem;cursor:pointer;text-align:left;outline:none}.timeline__node{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--glass-bg);box-shadow:0 4px 16px #d8bfd866;transition:var(--transition)}.timeline__item:hover .timeline__node{transform:scale(1.15);box-shadow:0 0 20px #a855f799}.timeline__icon{font-size:1.7rem}.timeline__content{flex:1;padding:1.5rem 1.8rem;transition:var(--transition)}.timeline__item:hover .timeline__content{box-shadow:0 12px 36px #a855f733}.timeline__date{font-size:.8rem;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-weight:600;display:block}.timeline__title{font-family:var(--font-heading);font-size:1.3rem;margin:.4rem 0 .2rem;color:var(--text-primary)}.timeline__desc{color:var(--text-secondary);font-size:1rem;margin-top:.6rem;line-height:1.8;animation:slideDownFade .4s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideDownFade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.emotions-field{position:relative;width:100%;height:440px;max-width:800px;border-radius:var(--radius);overflow:hidden}.emotion-orb{position:absolute;font-size:2.8rem;background:none;border:none;cursor:pointer;animation:floatOrbSlow 6s ease-in-out infinite;transition:transform .3s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 6px 16px rgba(168,85,247,.45));line-height:1;padding:.2rem;outline:none}.emotion-orb:hover{transform:scale(1.35) rotate(8deg)!important;filter:drop-shadow(0 8px 24px rgba(168,85,247,.7))}@keyframes floatOrbSlow{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#3b1a5a59;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeOverlay .35s ease}@keyframes fadeOverlay{0%{opacity:0}to{opacity:1}}.modal{max-width:440px;width:90%;padding:3rem 2.2rem;text-align:center;animation:slideUp .4s cubic-bezier(.34,1.56,.64,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal__title{font-family:var(--font-heading);font-size:1.5rem;margin-bottom:1.2rem;color:var(--accent-dark)}.modal__close{position:absolute;top:1.2rem;right:1.2rem;background:#a855f71f;border:none;color:var(--text-secondary);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:10}.modal__close:hover{background:var(--accent);color:#fff;transform:rotate(90deg)}.emotion-modal{display:flex;flex-direction:column;align-items:center;gap:1.2rem}.emotion-modal__icon{font-size:3.5rem;animation:heartbeat 1.5s ease infinite}.emotion-modal__text{font-size:1.15rem;color:var(--text-primary);line-height:1.9;font-style:italic;font-weight:500}.jar-container{display:flex;flex-direction:column;align-items:center;gap:2.5rem;width:100%}.jar-wrapper{cursor:pointer;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:1.2rem;outline:none;transition:var(--transition)}.jar-wrapper:hover{transform:translateY(-8px) scale(1.05)}.jar-svg{width:200px;filter:drop-shadow(0 12px 32px rgba(168,85,247,.35));transition:var(--transition)}.jar-wrapper:hover .jar-svg{filter:drop-shadow(0 16px 40px rgba(168,85,247,.5))}.jar-label{padding:.65rem 1.8rem;font-size:.95rem;color:var(--accent-dark);font-weight:600;border-radius:50px;box-shadow:0 4px 16px #d8bfd866}.love-slip{padding:2rem 2.5rem;max-width:440px;width:90%;text-align:center}.love-slip__text{font-family:var(--font-heading);font-size:1.3rem;color:var(--text-primary);font-style:italic;line-height:1.8;font-weight:500}.love-slip__icon{font-size:.9rem;color:var(--text-light);display:block;margin-top:1rem;font-weight:500}.slip-appear{animation:slipOut .7s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes slipOut{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.envelopes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem;width:100%;max-width:860px}.envelope{padding:2.2rem 1.8rem 1.8rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1.5rem;background:var(--glass-bg);border-top:4px solid var(--env-color, var(--accent-soft));outline:none;perspective:1000px}.envelope__flap-container{width:80px;height:50px;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.envelope__flap{width:100%;height:100%;clip-path:polygon(0 0,100% 0,50% 100%);background:var(--env-color, var(--accent-soft));opacity:.85;transform-origin:top center;transition:transform .6s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 8px #0000001a}.envelope--open .envelope__flap{transform:rotateX(180deg);opacity:.5;filter:brightness(.9)}.envelope__body{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:100%}.envelope__icon{font-size:2.2rem;transition:var(--transition)}.envelope:hover .envelope__icon{transform:scale(1.2)}.envelope__label{font-size:.95rem;color:var(--text-primary);font-weight:500;text-align:center;line-height:1.6}.envelope__hint{font-size:.75rem;color:var(--text-light);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.spin-canvas-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.8rem;z-index:10}.spin-canvas{border-radius:50%;box-shadow:0 0 0 8px #fff9,0 12px 48px #a855f759;background:#ffffff40;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.spin-pointer{font-size:2.8rem;filter:drop-shadow(0 6px 12px rgba(168,85,247,.5));animation:pointerBounce 1.5s ease-in-out infinite;z-index:20;color:#db2777;margin-bottom:-1rem}@keyframes pointerBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.spin-btn{padding:1.1rem 3.5rem;border-radius:50px;border:none;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-family:var(--font-body);font-size:1.15rem;font-weight:600;cursor:pointer;transition:var(--transition);letter-spacing:.04em;box-shadow:0 8px 24px #a855f766}.spin-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 32px #a855f780}.spin-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.spin-counter{font-size:.95rem;color:var(--text-secondary);font-weight:600}.spin-footer{font-size:.85rem;color:var(--text-secondary);font-style:italic;max-width:440px;text-align:center;line-height:1.8;border-radius:var(--radius-sm);padding:.8rem 1.8rem}.win-modal{display:flex;flex-direction:column;align-items:center;gap:1.2rem}.win-modal__emoji{font-size:3.5rem;animation:heartbeat 1s ease infinite}.win-modal__prize{font-family:var(--font-heading);font-size:1.4rem;color:var(--accent-dark);font-weight:600}.win-modal__note{font-size:1rem;color:var(--text-secondary);font-weight:500}@media (max-width: 768px){.navbar{right:auto;bottom:1.5rem;top:auto;transform:translate(-50%);left:50%;flex-direction:row;padding:.8rem 1.2rem;border-radius:40px}.navbar__tooltip{bottom:40px;right:auto;left:50%;transform:translateY(10px) translate(-50%)}.navbar__dot-wrapper:hover .navbar__tooltip{opacity:1;transform:translateY(0) translate(-50%)}.section{padding:3rem 1.5rem 6rem}.media-grid{grid-template-columns:1fr}.envelopes-grid{grid-template-columns:1fr;max-width:360px}}