.gate-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.gate-card{background:#fefaf4e0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(232,180,160,.4);border-radius:4px;padding:3.5rem 3rem;max-width:420px;width:100%;text-align:center;box-shadow:0 4px 32px #a05a4a17,0 1px 4px #a05a4a0f,inset 0 1px #ffffffe6;animation:card-rise .8s cubic-bezier(.16,1,.3,1) both}@keyframes card-rise{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}.gate-ornament{font-size:.75rem;color:var(--blush);letter-spacing:.5em;margin-bottom:1rem;animation:card-rise .8s .1s cubic-bezier(.16,1,.3,1) both}.gate-subtitle{font-family:Lora,serif;font-style:italic;font-size:.85rem;color:var(--text-light);letter-spacing:.08em;margin-bottom:.5rem;animation:card-rise .8s .15s cubic-bezier(.16,1,.3,1) both}.gate-title{font-family:Cormorant Garamond,serif;font-size:clamp(2.8rem,6vw,3.8rem);font-weight:300;color:var(--text-dark);line-height:1;margin-bottom:1rem;letter-spacing:-.01em;animation:card-rise .8s .2s cubic-bezier(.16,1,.3,1) both}.gate-hint-text{font-size:.82rem;color:var(--text-light);margin-bottom:2rem;letter-spacing:.04em;animation:card-rise .8s .25s cubic-bezier(.16,1,.3,1) both}.gate-form{display:flex;flex-direction:column;gap:.75rem;animation:card-rise .8s .3s cubic-bezier(.16,1,.3,1) both}.gate-form.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.input-wrapper{position:relative}.gate-input{width:100%;padding:.85rem 1.2rem;background:#fdf6eccc;border:1px solid rgba(201,125,106,.3);border-radius:3px;font-family:Lora,serif;font-size:1rem;color:var(--text-dark);outline:none;transition:border-color .2s,box-shadow .2s;text-align:center;letter-spacing:.15em}.gate-input::placeholder{color:var(--text-light);font-style:italic;letter-spacing:.05em}.gate-input:focus{border-color:var(--blush);box-shadow:0 0 0 3px #e8b4a033}.gate-input:disabled{opacity:.6}.gate-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1.5rem;background:var(--rose);color:#fff;border:none;border-radius:3px;font-family:Cormorant Garamond,serif;font-size:1.1rem;font-weight:400;letter-spacing:.1em;cursor:pointer;transition:background .2s,transform .15s,opacity .2s;min-height:48px}.gate-btn:hover:not(:disabled){background:var(--deep-rose);transform:translateY(-1px)}.gate-btn:active:not(:disabled){transform:translateY(0)}.gate-btn:disabled{opacity:.75;cursor:default}.btn-icon{transition:transform .2s}.gate-btn:hover:not(:disabled) .btn-icon{transform:translate(4px)}.loading-dots{display:flex;gap:3px;align-items:center}.loading-dots span{animation:blink 1.2s infinite;font-size:1.4rem;line-height:1}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}.gate-wrong{margin-top:.75rem;font-size:.85rem;color:var(--rose);font-style:italic;animation:card-rise .3s ease both}.gate-deco{margin-top:2rem;color:var(--blush);font-size:.9rem;letter-spacing:.2em;animation:card-rise .8s .35s cubic-bezier(.16,1,.3,1) both}.letter-wrapper{max-width:720px;margin:0 auto;padding:3rem 1.5rem 5rem;animation:rise .9s cubic-bezier(.16,1,.3,1) both}@keyframes rise{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.letter-header{text-align:center;margin-bottom:3rem}.header-deco{font-size:.7rem;color:var(--blush);letter-spacing:.5em;margin-bottom:1.2rem}.letter-for{font-family:Cormorant Garamond,serif;font-weight:300;font-size:clamp(3rem,8vw,5rem);color:var(--text-dark);line-height:1;letter-spacing:-.02em}.header-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--blush),transparent);margin:1.5rem auto 0}.photos-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;margin-bottom:3.5rem}.photo-card{display:flex;flex-direction:column;gap:.6rem;animation:rise .7s cubic-bezier(.16,1,.3,1) both;opacity:0;animation-fill-mode:both;cursor:pointer}.photo-frame{border-radius:3px;overflow:hidden;background:var(--parchment);aspect-ratio:4 / 5;position:relative}.photo-expand-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#3a2a2240;opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.photo-card:hover .photo-expand-hint{opacity:1}.photo-skeleton{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,var(--parchment) 25%,rgba(232,180,160,.25) 50%,var(--parchment) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.photo-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .4s ease;opacity:0}.photo-frame.loaded .photo-img{opacity:1}.photo-frame.loaded .photo-skeleton{display:none}.photo-card:hover .photo-img{transform:scale(1.04)}.photo-caption{font-size:.78rem;color:var(--text-light);font-style:italic;text-align:center;letter-spacing:.03em}.photo-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:#3a2a22d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:fade-in .35s ease both;cursor:pointer}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.photo-modal-inner{position:relative;max-width:520px;width:100%;animation:modal-rise .4s cubic-bezier(.16,1,.3,1) both;cursor:default}@keyframes modal-rise{0%{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.photo-modal-img{width:100%;border-radius:4px;display:block;box-shadow:0 8px 48px #0006}.photo-modal-caption{font-family:Lora,serif;font-style:italic;font-size:.9rem;color:#fdf6ecd9;text-align:center;margin-top:1rem;letter-spacing:.03em}.photo-modal-close{position:absolute;top:-1rem;right:-1rem;width:32px;height:32px;border-radius:50%;background:var(--rose);color:#fff;border:none;font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s;box-shadow:0 2px 8px #0003}.photo-modal-close:hover{background:var(--deep-rose);transform:scale(1.1)}.letter-body{background:#fefaf4b8;border:1px solid rgba(232,180,160,.25);border-radius:4px;padding:clamp(2rem,5vw,3.5rem);box-shadow:0 2px 24px #a05a4a12,inset 0 1px #ffffffd9;animation:rise .9s .2s cubic-bezier(.16,1,.3,1) both}.letter-greeting{font-family:Cormorant Garamond,serif;font-size:1.5rem;font-weight:400;font-style:italic;color:var(--rose);margin-bottom:1.8rem}.letter-paragraph{font-size:1.02rem;line-height:1.9;color:var(--text-mid);margin-bottom:1.4rem}.letter-closing{margin-top:2.5rem;border-top:1px solid rgba(232,180,160,.3);padding-top:1.8rem}.closing-line{font-family:Cormorant Garamond,serif;font-size:1.1rem;font-style:italic;color:var(--text-light);margin-bottom:.4rem}.letter-signature{font-family:Cormorant Garamond,serif;font-size:1.4rem;font-weight:600;color:var(--rose);letter-spacing:.02em}.letter-footer{text-align:center;margin-top:3rem;font-size:1.4rem;opacity:.6;animation:rise .9s .5s cubic-bezier(.16,1,.3,1) both}@media (max-width: 500px){.photos-section{grid-template-columns:1fr 1fr}.letter-body{padding:1.5rem}}.music-bar{display:flex;align-items:center;gap:.9rem;background:#fefaf4d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(232,180,160,.35);border-radius:50px;padding:.55rem 1.2rem .55rem .55rem;margin-bottom:.75rem;width:fit-content;margin-left:auto;margin-right:auto;box-shadow:0 2px 16px #a05a4a1a;animation:rise .8s .1s cubic-bezier(.16,1,.3,1) both}.music-bar-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--rose);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:background .2s,transform .15s;opacity:.5}.music-bar-btn.ready{opacity:1}.music-bar-btn.ready:not(.playing):after{content:"";position:absolute;width:38px;height:38px;border-radius:50%;border:2px solid var(--rose);animation:pulse-ring 1.8s ease-out infinite;pointer-events:none}@keyframes pulse-ring{0%{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}.music-bar-btn:hover{background:var(--deep-rose);transform:scale(1.08)}.music-bar-icon{font-size:1rem;color:#fff;position:absolute;transition:opacity .2s}.music-bar-btn.playing .music-bar-icon{opacity:0}.music-bars{display:flex;align-items:flex-end;gap:2.5px;height:16px;opacity:0;transition:opacity .2s}.music-bar-btn.playing .music-bars{opacity:1}.music-bars span{display:block;width:3px;border-radius:2px;background:#fff;animation:bar .9s ease-in-out infinite}.music-bars span:nth-child(1){height:6px;animation-delay:0s}.music-bars span:nth-child(2){height:12px;animation-delay:.2s}.music-bars span:nth-child(3){height:8px;animation-delay:.4s}.music-bars span:nth-child(4){height:5px;animation-delay:.1s}@keyframes bar{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.music-bar-info{display:flex;flex-direction:column;gap:.1rem}.music-bar-title{font-family:Cormorant Garamond,serif;font-size:.95rem;font-weight:600;color:var(--text-dark);letter-spacing:.02em}.music-bar-sub{font-family:Lora,serif;font-size:.72rem;font-style:italic;color:var(--text-light)}.music-hint-container{position:relative;height:1.8rem;margin-bottom:2rem}.music-hint,.music-hint-btn{position:absolute;left:0;right:0;top:0;margin:0;font-family:Lora,serif;font-size:.75rem;font-style:italic;color:var(--text-light);text-align:center;letter-spacing:.04em;opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}.music-hint-btn{background:none;border:none;cursor:pointer;width:100%;transition:color .2s,opacity .6s ease,transform .6s ease}.music-hint-btn:hover{color:var(--rose)}.music-hint.hidden{opacity:0;transform:translateY(-6px);pointer-events:none}.music-hint-btn.hidden{opacity:0;transform:translateY(6px);pointer-events:none}.lyric-overlay{position:fixed;bottom:0;left:0;right:0;z-index:100;text-align:center;padding:1.2rem 1.5rem 1.8rem;background:linear-gradient(to top,rgba(253,246,236,.97) 65%,transparent 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}.lyric-overlay.lyric-visible{opacity:1;transform:translateY(0);pointer-events:all}.lyric-content{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;min-height:2.8rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.lyric-content.lyric-content-visible{opacity:1;transform:translateY(0)}.lyric-placeholder{display:flex;align-items:center;justify-content:center;gap:.5rem}.lyric-note{font-size:1.1rem;color:var(--blush);animation:note-float 2s ease-in-out infinite}.lyric-note:nth-child(1){animation-delay:0s}.lyric-note:nth-child(2){animation-delay:.4s;font-size:.85rem}.lyric-note:nth-child(3){animation-delay:.8s}@keyframes note-float{0%,to{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}.lyric-text{animation:lyric-change .4s ease both}@keyframes lyric-change{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.lyric-pt{font-family:Cormorant Garamond,serif;font-size:1.15rem;font-weight:600;color:var(--text-dark);margin-bottom:.2rem;letter-spacing:.01em}.lyric-en{font-family:Lora,serif;font-size:.8rem;font-style:italic;color:var(--text-light)}.lyric-footer{display:flex;justify-content:center;margin-top:.7rem}.lyric-footer-floating{position:fixed;bottom:1.5rem;left:0;right:0;display:flex;justify-content:center;z-index:200;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .5s ease,transform .5s ease}.lyric-footer-floating.lyric-floating-visible{opacity:1;transform:translateY(0);pointer-events:all}.lyric-toggle-btn{background:none;border:none;font-family:Lora,serif;font-size:.7rem;font-style:italic;color:var(--text-light);cursor:pointer;padding:.2rem .6rem;border-radius:20px;transition:color .2s,background .2s,opacity .2s;opacity:.7}.lyric-toggle-btn:hover{opacity:1;color:var(--rose);background:#e8b4a01a}.lyric-toggle-show{background:var(--rose);border:none;color:#fff;opacity:1;padding:.45rem 1.2rem;font-size:.75rem;box-shadow:0 2px 16px #a05a4a40;letter-spacing:.04em}.lyric-toggle-show:hover{background:var(--deep-rose);color:#fff;opacity:1}@media (max-width: 500px){.lyric-overlay{padding:1rem 1rem 1.4rem}.lyric-pt{font-size:1rem}.lyric-en{font-size:.75rem}.photo-modal-inner{max-width:100%}}.meaning-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:#3a2a22b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;animation:fade-in .35s ease both;cursor:pointer}.meaning-modal-inner{position:relative;background:var(--warm-white);border:1px solid rgba(232,180,160,.35);border-radius:4px;padding:2.5rem 2rem;max-width:420px;width:100%;text-align:center;box-shadow:0 8px 48px #3a2a2233;animation:modal-rise .4s cubic-bezier(.16,1,.3,1) both;cursor:default}.meaning-text{font-family:Lora,serif;font-size:.95rem;line-height:1.8;color:var(--text-mid);margin-bottom:1.2rem}.meaning-quote{font-style:italic;color:var(--rose);font-size:.9rem;border-top:1px solid rgba(232,180,160,.3);padding-top:1.2rem;margin-bottom:1.8rem}.meaning-close{position:absolute;top:-1rem;right:-1rem;width:32px;height:32px;border-radius:50%;background:var(--rose);color:#fff;border:none;font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s;box-shadow:0 2px 8px #0003}.meaning-close:hover{background:var(--deep-rose);transform:scale(1.1)}.days-together{font-family:Cormorant Garamond,serif;font-size:1rem;font-style:italic;color:var(--text-light);margin-top:.6rem;letter-spacing:.04em}.app{min-height:100vh;opacity:0;transition:opacity .6s ease}.app.fade-in{opacity:1}:root{--cream: #fdf6ec;--warm-white: #fefaf4;--parchment: #f5e6d0;--blush: #e8b4a0;--rose: #c97d6a;--deep-rose: #a05a4a;--amber: #d4956a;--text-dark: #3a2a22;--text-mid: #6b4a3a;--text-light: #9e7060}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;min-height:100vh}body{font-family:Lora,Georgia,serif;background-color:var(--cream);color:var(--text-dark);background-image:radial-gradient(ellipse at 20% 20%,rgba(232,180,160,.18) 0%,transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(212,149,106,.13) 0%,transparent 55%),radial-gradient(ellipse at 60% 10%,rgba(245,230,208,.25) 0%,transparent 45%);background-attachment:fixed}#root{min-height:100vh;display:flex;flex-direction:column}