﻿*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Nunito",sans-serif;background:#fff0f5;color:#4a4a4a;line-height:1.6;min-height:100vh}footer{padding:0}header{background:linear-gradient(180deg, #87ceeb 0%, #e6e6fa 100%);text-align:center;padding:60px 20px 80px;position:relative;overflow:hidden}.header-content{position:relative;z-index:2}.baby-icon{font-size:4rem;margin-bottom:10px}h1{font-size:2.5rem;font-weight:800;color:#4a4a4a;margin-bottom:8px}.subtitle{font-size:1.1rem;color:#7a7a7a;font-weight:400}.section-header{text-align:center;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;gap:2px}.section-heading{font-size:1.8rem;font-weight:800;margin:0;padding:0;color:#4a4a4a;line-height:1.2}.section-sub{color:#7a7a7a;font-size:1rem;margin:0;padding:0;line-height:1.4}.clouds{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.cloud{position:absolute;background:hsla(0,0%,100%,.6);border-radius:50px;will-change:transform}.cloud::before,.cloud::after{content:"";position:absolute;background:hsla(0,0%,100%,.6);border-radius:50%}.cloud-1{width:120px;height:40px;top:20%;left:10%;animation:float calc(6.5s*1) ease-in-out infinite}.cloud-1::before{width:50px;height:50px;top:-20px;left:20px}.cloud-2{width:100px;height:35px;top:30%;right:15%;animation:float calc(8s*1) ease-in-out infinite 2s}.cloud-2::before{width:40px;height:40px;top:-18px;left:25px}.cloud-3{width:80px;height:30px;top:15%;right:35%;animation:float calc(7s*1) ease-in-out infinite 4s}.cloud-3::before{width:35px;height:35px;top:-15px;left:15px}.cloud-4{width:60px;height:22px;top:50%;left:30%;animation:float calc(10s*1) ease-in-out infinite 1s}.cloud-4::before{width:28px;height:28px;top:-12px;left:12px}.cloud-5{width:90px;height:32px;top:45%;right:8%;animation:float calc(9s*1) ease-in-out infinite 3s}.cloud-5::before{width:36px;height:36px;top:-16px;left:20px}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}.birth-stats{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;background:#fff;border-radius:16px;padding:24px 32px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-top:-50px;margin-bottom:50px}.stat{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:#7a7a7a;font-weight:700}.stat-value{font-size:1.2rem;font-weight:800;color:#4a4a4a}.traits-section{margin-bottom:60px;padding-top:10px}.traits-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}.trait-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease}.trait-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.1)}.trait-emoji{font-size:2rem;display:block;margin-bottom:10px}.trait-title{font-size:1.1rem;font-weight:700;margin-bottom:8px;color:#4a4a4a}.trait-desc{font-size:.95rem;color:#7a7a7a;line-height:1.5}.growth-section{margin-bottom:60px}.growth-chart{background:#fff;border-radius:16px;padding:16px;box-shadow:0 4px 20px rgba(0,0,0,.06)}.growth-svg{width:100%;height:auto;display:block}.chart-axis-label{font-family:"Nunito",sans-serif;font-size:10px;fill:#7a7a7a;font-weight:600}.chart-value{font-family:"Nunito",sans-serif;font-size:12px;fill:#4a4a4a;font-weight:800}.chart-line{fill:none;stroke:hotpink;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--line-length);stroke-dashoffset:var(--line-length)}.visible .chart-line{animation:draw-line 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards}@keyframes draw-line{to{stroke-dashoffset:0}}.chart-area{fill:url(#area-grad);opacity:0;transition:opacity .8s ease 1.4s}.visible .chart-area{opacity:1}.chart-dot-bg{fill:rgba(255,105,180,.15)}.chart-dot{fill:hotpink;stroke:#fff;stroke-width:2}.chart-point{opacity:0;transition:opacity .5s ease;transition-delay:var(--delay)}.visible .chart-point{opacity:1}@media(max-width: 480px){.growth-chart{padding:16px}}main{max-width:1000px;margin:0 auto;padding:0 20px 60px;position:relative;z-index:2}.timeline-section{margin-bottom:20px}.timeline{position:relative;padding-left:40px}.timeline::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:3px;background:linear-gradient(180deg, #ffb6c1, #e6e6fa, #b5ead7 90%, transparent);border-radius:3px}.milestone-card{background:#fff;border-radius:16px;padding:24px;margin-bottom:30px;box-shadow:0 4px 20px rgba(0,0,0,.06);position:relative;opacity:0;transform:translateY(30px) scaleY(0.9);transform-origin:top center;max-height:70px;overflow:hidden;transition:opacity .6s ease,transform .6s ease,max-height .7s ease}.milestone-card.visible{opacity:1;transform:translateY(0) scaleY(1);max-height:800px;overflow:visible}.milestone-card:hover{transform:translateY(-2px)}.milestone-card::before{content:"";position:absolute;left:-33px;top:28px;width:14px;height:14px;border-radius:50%;border:3px solid hotpink;background:#fff;transition:background .4s cubic-bezier(0.4, 0, 0.2, 1),transform .4s cubic-bezier(0.4, 0, 0.2, 1),box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1)}.milestone-card.active::before{background:hotpink;transform:scale(1.3);box-shadow:0 0 0 3px rgba(255,105,180,.2);animation:pulse 2s ease-in-out infinite}.card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.month-badge{background:linear-gradient(135deg, #ffb6c1, #ff69b4);color:#fff;font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:20px;white-space:nowrap}.card-title{font-size:1.3rem;font-weight:700;color:#4a4a4a}.card-body{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px 24px}.card-section{margin-bottom:0}.card-section.personality{grid-column:1/-1}.card-section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:#7a7a7a;margin-bottom:6px;font-weight:700}.card-section ul{list-style:none;padding:0}.card-section ul li{padding:3px 0;padding-left:20px;position:relative;font-size:.95rem}.card-section ul li::before{content:"✦";position:absolute;left:0;color:hotpink;font-size:.7rem;top:5px}.card-section.moments ul li::before{content:"▸";color:skyblue;font-size:.7rem;top:5px}.card-section.loves ul li::before{content:"♥";color:#e25555;font-size:.75rem;top:5px}.card-section.dislikes ul li::before{content:"✗";color:#999;font-size:.75rem;top:5px}.card-section.personality p{font-style:italic;color:#7a7a7a;font-size:.95rem}@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,105,180,.2)}50%{box-shadow:0 0 0 5px rgba(255,105,180,.08)}}@media(max-width: 768px){.traits-grid{grid-template-columns:repeat(2, 1fr)}.card-body{grid-template-columns:1fr}.birth-stats{gap:20px;padding:20px 24px}}@media(max-width: 480px){header{padding:40px 20px 60px}h1{font-size:2rem}.baby-icon{font-size:3rem}main{padding:0 15px 40px}.birth-stats{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;padding:18px 16px;margin-top:-35px}.stat-value{font-size:1rem}.section-heading{font-size:1.5rem}.growth-chart{padding:5px 10px}.growth-svg{min-height:200px;aspect-ratio:5/4}.traits-grid{grid-template-columns:1fr}.timeline{padding-left:30px}.timeline::before{left:10px}.milestone-card{padding:18px}.milestone-card::before{left:-28px}.milestone-card{opacity:1;transform:none;max-height:none;overflow:visible}}
