:root{--bg-color:#fafafa;--text-color:#111;--text-muted:#777;--border-color:#eaeaea;--accent-color:#000;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:32px;--spacing-xl:64px;--font-sans:"Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-serif:"Cedarville Cursive",cursive}@media (prefers-color-scheme:dark){:root{--bg-color:#111;--text-color:#f5f5f5;--text-muted:#888;--border-color:#2a2a2a;--accent-color:#fff}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.6}h1,h2,h3{font-family:var(--font-serif);font-weight:400;line-height:1.2}.container{max-width:900px;padding:var(--spacing-xl)var(--spacing-md);margin:0 auto}.site-header{text-align:center;margin-bottom:var(--spacing-xl);opacity:0;animation:1s ease-out forwards fadeInDown}.site-header h1{letter-spacing:-1px;margin-bottom:var(--spacing-sm);font-size:3rem}.site-header .subtitle{color:var(--text-muted);font-size:1.1rem}.timeline{gap:var(--spacing-xl);flex-direction:column;display:flex}.year-section{border-top:1px solid var(--border-color);padding-top:var(--spacing-xl)}.year-title{margin-bottom:var(--spacing-lg);color:var(--text-muted);font-size:2.5rem}.photo-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.photo-card{gap:var(--spacing-sm);flex-direction:column;display:flex}.photo-container{aspect-ratio:1;background:linear-gradient(90deg,var(--border-color),var(--bg-color),var(--border-color));background-size:200% 100%;border-radius:4px;width:100%;animation:1.5s linear infinite placeholderShimmer;display:block;overflow:hidden}.photo-img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .5s,transform .4s}.photo-img.loaded{opacity:1}@keyframes placeholderShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.loading-sentinel{width:100%;height:40px}.photo-img:hover{transform:scale(1.03)}.photo-date{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.85rem}.login-container{min-height:100vh;padding:var(--spacing-md);justify-content:center;align-items:center;display:flex}.login-card{text-align:center;width:100%;max-width:400px;padding:var(--spacing-xl)var(--spacing-lg);border:1px solid var(--border-color);background:var(--bg-color);border-radius:8px;box-shadow:0 4px 20px #0000000d}@media (prefers-color-scheme:dark){.login-card{box-shadow:0 4px 20px #0006}}.login-card h1{margin-bottom:var(--spacing-sm);font-size:2rem}.login-card p{color:var(--text-muted);margin-bottom:var(--spacing-lg)}.login-card form{gap:var(--spacing-md);flex-direction:column;display:flex}.input-group input{border:1px solid var(--border-color);width:100%;color:var(--text-color);font-size:1rem;font-family:var(--font-sans);background:0 0;border-radius:4px;padding:12px 16px;transition:border-color .2s}.input-group input:focus{border-color:var(--accent-color);outline:none}.login-card button{background-color:var(--accent-color);width:100%;color:var(--bg-color);cursor:pointer;font-size:1rem;font-weight:500;font-family:var(--font-sans);border:none;border-radius:4px;padding:12px 16px;transition:opacity .2s}.login-card button:hover{opacity:.9}.login-card button:disabled{opacity:.5;cursor:not-allowed}.error-message{margin-top:8px;font-size:.9rem;color:#f33!important}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.empty-state{text-align:center;color:var(--text-muted);padding-top:20vh}.modal-overlay{z-index:1000;width:100vw;height:100vh;padding:var(--spacing-md)0;background-color:#000000e6;justify-content:center;align-items:flex-start;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.modal-close{top:var(--spacing-lg);right:var(--spacing-lg);color:#fff;cursor:pointer;z-index:1001;opacity:.7;background:0 0;border:none;font-size:3rem;line-height:1;transition:opacity .2s;position:absolute}.modal-close:hover{opacity:1}.modal-content{max-width:100%;max-height:100%;padding:0 var(--spacing-md);flex-direction:column;margin:auto;display:flex}.modal-img{object-fit:contain;border-radius:4px;max-width:100%;max-height:80vh;box-shadow:0 4px 20px #00000080}.modal-footer{text-align:center;margin-top:var(--spacing-md)}.modal-date{color:#ccc;font-size:1rem;font-family:var(--font-serif)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.photo-card{gap:var(--spacing-sm);cursor:pointer;flex-direction:column;display:flex}.photo-interaction-panel{margin-top:var(--spacing-md);background:var(--bg-color);color:var(--text-color);border-radius:8px;flex-direction:column;flex-shrink:0;max-height:40vh;display:flex;overflow:hidden;box-shadow:0 2px 10px #0000001a}.photo-interaction-panel.feed-mode{box-shadow:none;margin-top:var(--spacing-sm);background:0 0;max-height:220px}@media (prefers-color-scheme:dark){.photo-interaction-panel{background:#1a1a1a}.photo-interaction-panel.feed-mode{background:0 0}}.reaction-summary-bar{padding:12px var(--spacing-md);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;min-height:52px;display:flex}.active-reactions{scrollbar-width:none;flex:1;gap:8px;display:flex;overflow-x:auto}.active-reactions::-webkit-scrollbar{display:none}.feed-thoughts-counter{color:var(--text-muted);white-space:nowrap;cursor:pointer;background:0 0;border:none;border-radius:20px;margin-left:12px;padding:4px 8px;font-family:inherit;font-size:.9rem;transition:background-color .2s}.feed-thoughts-counter:hover{background-color:#0000000d}@media (prefers-color-scheme:dark){.feed-thoughts-counter:hover{background-color:#ffffff1a}}.feed-mode .reaction-summary-bar{border-bottom:none;padding:8px 0}.reaction-btn{background:var(--border-color);cursor:pointer;border:1px solid #0000;border-radius:20px;flex-shrink:0;align-items:center;gap:6px;padding:6px 12px;font-size:1.1rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275);animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards popIn;display:flex}@keyframes popIn{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.reaction-btn:hover:not(:disabled){background:var(--border-color);transform:scale(1.1)}.reaction-btn.has-reactions{border-color:var(--accent-color);background:#0000000d}@media (prefers-color-scheme:dark){.reaction-btn.has-reactions{background:#ffffff1a}}.reaction-btn:disabled{opacity:.5;cursor:not-allowed}.reaction-btn .count{color:var(--text-color);font-size:.9rem;font-weight:500}.comments-section{flex-direction:column;flex:1;display:flex;overflow:hidden}.comments-list{padding:var(--spacing-md);flex-direction:column;flex:1;gap:12px;display:flex;overflow-y:auto}.comment-bubble{background:var(--border-color);border-radius:12px 12px 12px 2px;align-self:flex-start;max-width:90%;padding:10px 14px}@media (prefers-color-scheme:dark){.comment-bubble{background:#2a2a2a}}.comment-text{font-size:.95rem;line-height:1.4}.comment-date{color:var(--text-muted);margin-top:4px;font-size:.75rem;display:block}.no-comments,.loading-text{text-align:center;color:var(--text-muted);padding:var(--spacing-sm);font-size:.9rem}.comment-form{padding:var(--spacing-md);border-top:1px solid var(--border-color);gap:8px;display:flex}.feed-mode .comment-form{border-top:none;padding:8px 0}.feed-mode .comments-list{max-height:100px;padding:0 0 8px}.comment-form input{border:1px solid var(--border-color);color:var(--text-color);font-family:var(--font-sans);background:0 0;border-radius:20px;flex:1;padding:8px 12px}.comment-form input:focus{border-color:var(--accent-color);outline:none}.comment-form button{background:var(--accent-color);color:var(--bg-color);cursor:pointer;border:none;border-radius:20px;padding:8px 16px;font-weight:500;transition:opacity .2s}.comment-form button:disabled{opacity:.5;cursor:not-allowed}.birthday-balloons-container{pointer-events:none;z-index:100;width:100vw;height:100vh;position:fixed;bottom:-100px;left:0;overflow:hidden}.balloon{opacity:.9;font-size:3rem;animation:10s linear infinite floatUp;position:absolute}.balloon-1{animation-duration:12s;animation-delay:0s;left:10%}.balloon-2{animation-duration:9s;animation-delay:3s;left:30%}.balloon-3{font-size:4rem;animation-duration:15s;animation-delay:1s;left:50%}.balloon-4{animation-duration:11s;animation-delay:2s;left:70%}.balloon-5{animation-duration:13s;animation-delay:5s;left:85%}.balloon-6{font-size:2.5rem;animation-duration:10s;animation-delay:6s;left:20%}@keyframes floatUp{0%{transform:translateY(100vh)rotate(-10deg)}50%{transform:translateY(30vh)rotate(10deg)}to{transform:translateY(-120vh)rotate(-10deg)}}