@import"https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&display=swap";:root{--font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--bg: #faf7f2;--surface: #ffffff;--surface-alt: #f5f1eb;--border: #e8e3db;--border-light: #f0ece6;--text: #1a1a18;--text-secondary: #6b6860;--text-tertiary: #9b978e;--sage: #4a6b42;--sage-light: #e8f0e5;--sage-dark: #365031;--copper: #c4956a;--copper-light: #faf0e6;--copper-dark: #a57a52;--rose: #c47a7a;--rose-light: #fae8e8;--sky: #6a9bc4;--sky-light: #e8f0fa;--radius: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);--shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes typing{0%,60%{opacity:.3}30%{opacity:1}}@keyframes confettiDrop{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(60px) rotate(360deg);opacity:0}}@keyframes growUp{0%{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app{min-height:100vh;display:flex;flex-direction:column;padding-bottom:80px}.nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff2}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border:none;background:none;cursor:pointer;color:var(--text-tertiary);font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:.02em;transition:color .2s;-webkit-tap-highlight-color:transparent}.nav-item.active{color:var(--sage)}.nav-icon{font-size:22px;line-height:1}.page{flex:1;padding:24px 20px;max-width:600px;margin:0 auto;width:100%;animation:fadeIn .3s ease}h1,h2,h3{font-family:var(--font-heading);font-weight:400;line-height:1.2}h1{font-size:2rem;color:var(--text)}h2{font-size:1.5rem;color:var(--text)}h3{font-size:1.15rem;color:var(--text)}.text-secondary{color:var(--text-secondary)}.text-sm{font-size:.85rem}.text-xs{font-size:.75rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border:none;border-radius:var(--radius);font-family:var(--font-body);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.btn-primary{background:var(--sage);color:#fff}.btn-primary:hover{background:var(--sage-dark)}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:var(--sage-light);color:var(--sage-dark)}.btn-outline{background:transparent;color:var(--sage);border:1.5px solid var(--sage)}.btn-outline:hover{background:var(--sage-light)}.btn-ghost{background:transparent;color:var(--text-secondary);padding:8px 16px}.btn-ghost:hover{color:var(--text);background:var(--surface-alt)}.btn-block{width:100%}.btn-lg{padding:16px 32px;font-size:1.05rem;border-radius:var(--radius-lg)}.btn:disabled{opacity:.4;cursor:not-allowed}.welcome-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;background:linear-gradient(170deg,var(--bg) 0%,var(--sage-light) 50%,var(--copper-light) 100%);animation:fadeIn .6s ease}.mascot-container{position:relative;margin-bottom:28px;animation:float 3s ease-in-out infinite}.mascot-circle{width:100px;height:100px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:52px;box-shadow:var(--shadow-lg);border:3px solid var(--sage-light)}.mascot-sparkle{position:absolute;font-size:16px;animation:pulse 2s ease-in-out infinite}.mascot-sparkle:nth-child(2){top:-4px;right:-4px}.mascot-sparkle:nth-child(3){bottom:4px;left:-8px;animation-delay:.5s}.mascot-sparkle:nth-child(4){top:10px;left:-12px;animation-delay:1s}.welcome-title{font-family:var(--font-heading);font-size:2.6rem;margin-bottom:8px;letter-spacing:-.02em}.welcome-title em{font-style:italic;color:var(--sage)}.welcome-subtitle{color:var(--text-secondary);font-size:1.05rem;max-width:320px;margin:0 auto 36px;line-height:1.7}.welcome-features{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;margin-bottom:36px;text-align:left}.welcome-feature{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);border:1px solid rgba(255,255,255,.5);font-size:.9rem;color:var(--text-secondary);animation:fadeInUp .5s ease backwards}.welcome-feature:nth-child(1){animation-delay:.2s}.welcome-feature:nth-child(2){animation-delay:.35s}.welcome-feature:nth-child(3){animation-delay:.5s}.welcome-feature-icon{font-size:20px;flex-shrink:0}.onboarding-page{min-height:100vh;display:flex;flex-direction:column;padding:20px;max-width:520px;margin:0 auto;width:100%}.onboarding-progress{display:flex;gap:6px;margin-bottom:28px;padding:0 4px}.onboarding-dot{flex:1;height:4px;border-radius:100px;background:var(--border);transition:all .4s ease;overflow:hidden}.onboarding-dot.done{background:var(--sage)}.onboarding-dot.current{background:var(--border)}.onboarding-dot.current:after{content:"";display:block;height:100%;background:var(--sage);border-radius:100px;animation:growUp .5s ease forwards}.mascot-chat{display:flex;gap:12px;margin-bottom:28px;animation:slideInLeft .4s ease}.mascot-avatar{width:44px;height:44px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;box-shadow:var(--shadow);border:2px solid var(--sage-light)}.chat-bubble{background:var(--surface);border:1px solid var(--border);border-radius:4px var(--radius-lg) var(--radius-lg) var(--radius-lg);padding:16px 18px;flex:1;box-shadow:var(--shadow)}.chat-title{font-family:var(--font-heading);font-size:1.3rem;margin-bottom:6px;line-height:1.3}.chat-helper{color:var(--text-secondary);font-size:.88rem;line-height:1.55}.chat-typing{display:flex;gap:5px;padding:16px 18px}.chat-typing span{width:8px;height:8px;border-radius:50%;background:var(--text-tertiary);animation:typing 1.2s ease-in-out infinite}.chat-typing span:nth-child(2){animation-delay:.2s}.chat-typing span:nth-child(3){animation-delay:.4s}.onboarding-options{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;animation:fadeInUp .4s ease .2s backwards}.onboarding-option{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s;text-align:left;font-family:var(--font-body);-webkit-tap-highlight-color:transparent;width:100%}.onboarding-option:hover{border-color:var(--sage);background:var(--sage-light);transform:translate(4px)}.onboarding-option.selected{border-color:var(--sage);background:var(--sage-light);box-shadow:0 0 0 1px var(--sage)}.option-icon{font-size:24px;flex-shrink:0;width:36px;text-align:center}.option-content{flex:1}.option-label{font-weight:600;font-size:.95rem;margin-bottom:2px}.option-desc{font-size:.82rem;color:var(--text-secondary);line-height:1.4}.option-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:13px;color:transparent}.onboarding-option.selected .option-check{background:var(--sage);border-color:var(--sage);color:#fff;animation:bounceIn .3s ease}.multi-hint{text-align:center;font-size:.78rem;color:var(--text-tertiary);margin-bottom:14px;font-weight:500}.onboarding-nav{display:flex;gap:10px;margin-top:auto;padding-top:12px}.onboarding-nav .btn{flex:1}.celebration-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;background:linear-gradient(170deg,var(--bg) 0%,var(--sage-light) 40%,var(--copper-light) 100%);animation:fadeIn .6s ease;position:relative;overflow:hidden}.confetti-container{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;animation:confettiDrop 2.5s ease-in forwards}.celebration-icon{font-size:72px;margin-bottom:20px;animation:bounceIn .6s ease .3s backwards}.celebration-title{font-family:var(--font-heading);font-size:2rem;margin-bottom:12px;animation:fadeInUp .5s ease .5s backwards}.celebration-subtitle{color:var(--text-secondary);font-size:1rem;max-width:320px;margin:0 auto 12px;line-height:1.6;animation:fadeInUp .5s ease .65s backwards}.celebration-type{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:100px;border:1px solid var(--border);font-weight:700;font-size:1rem;color:var(--sage-dark);margin-bottom:32px;animation:bounceIn .5s ease .8s backwards}.celebration-expect{max-width:340px;margin:0 auto 36px;animation:fadeInUp .5s ease .9s backwards}.expect-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:10px}.expect-list{display:flex;flex-direction:column;gap:8px}.expect-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ffffffb3;border-radius:var(--radius);font-size:.88rem;color:var(--text-secondary);text-align:left;animation:fadeInUp .4s ease backwards}.expect-item:nth-child(1){animation-delay:1s}.expect-item:nth-child(2){animation-delay:1.1s}.expect-item:nth-child(3){animation-delay:1.2s}.expect-icon{font-size:18px;flex-shrink:0}.hero{text-align:center;padding:48px 0 40px}.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--sage-light);color:var(--sage-dark);border-radius:100px;font-size:.8rem;font-weight:600;margin-bottom:20px}.hero h1{font-size:2.4rem;margin-bottom:12px;letter-spacing:-.01em}.hero h1 em{font-style:italic;color:var(--sage)}.hero-subtitle{color:var(--text-secondary);font-size:1rem;max-width:340px;margin:0 auto 32px;line-height:1.6}.features{display:flex;flex-direction:column;gap:12px;margin-top:32px}.feature-card{display:flex;align-items:flex-start;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:left;width:100%;font-family:var(--font-body);-webkit-tap-highlight-color:transparent;transition:all .2s;cursor:pointer}.feature-card:hover{border-color:var(--sage);background:var(--sage-light);transform:translateY(-1px);box-shadow:var(--shadow-md)}.feature-card:active{transform:translateY(0)}.feature-icon{font-size:24px;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface-alt);border-radius:10px}.feature-card h3{font-family:var(--font-body);font-size:.95rem;font-weight:600;margin-bottom:2px}.feature-card p{font-size:.82rem;color:var(--text-secondary);line-height:1.5}.quiz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.quiz-step-label{font-size:.8rem;font-weight:600;color:var(--text-tertiary);letter-spacing:.05em;text-transform:uppercase}.quiz-progress-bar{height:4px;background:var(--border);border-radius:100px;margin-bottom:32px;overflow:hidden}.quiz-progress-fill{height:100%;background:var(--sage);border-radius:100px;transition:width .4s ease}.quiz-question-title{font-size:1.4rem;margin-bottom:8px}.quiz-helper{color:var(--text-secondary);font-size:.9rem;margin-bottom:24px;line-height:1.5}.quiz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}.quiz-option{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s;text-align:left;font-family:var(--font-body);-webkit-tap-highlight-color:transparent}.quiz-option:hover{border-color:var(--sage);background:var(--sage-light)}.quiz-option.selected{border-color:var(--sage);background:var(--sage-light);box-shadow:0 0 0 1px var(--sage)}.quiz-option-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:12px}.quiz-option.selected .quiz-option-check{background:var(--sage);border-color:var(--sage);color:#fff}.quiz-option-icon{font-size:22px;flex-shrink:0}.quiz-option-content{flex:1}.quiz-option-label{font-weight:600;font-size:.95rem;margin-bottom:1px}.quiz-option-desc{font-size:.82rem;color:var(--text-secondary);line-height:1.4}.quiz-nav{display:flex;gap:10px}.quiz-nav .btn{flex:1}.quiz-multi-hint{text-align:center;font-size:.8rem;color:var(--text-tertiary);margin-bottom:16px}.profile-hero{text-align:center;padding:32px 20px;background:linear-gradient(135deg,var(--sage-light),var(--copper-light));border-radius:var(--radius-xl);margin-bottom:24px;border:1px solid var(--border)}.profile-coach-msg{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;background:var(--sage-light);border:1px solid #c5dcc0;border-radius:var(--radius);margin-bottom:24px;animation:slideInLeft .4s ease}.profile-coach-avatar{font-size:24px;flex-shrink:0}.profile-coach-text{font-size:.9rem;color:var(--text-secondary);line-height:1.6}.profile-coach-text strong{color:var(--sage-dark)}.profile-type-visual{width:72px;height:72px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--surface);border-radius:50%;box-shadow:var(--shadow-md)}.profile-type-name{font-family:var(--font-heading);font-size:1.8rem;margin-bottom:4px}.profile-type-desc{color:var(--text-secondary);font-size:.9rem;max-width:300px;margin:0 auto}.chars-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}.char-card{padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center}.char-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:4px}.char-value{font-family:var(--font-heading);font-size:1.1rem;color:var(--sage-dark)}.section-title{font-family:var(--font-body);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:12px;margin-top:28px}.needs-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.need-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius);font-size:.9rem}.need-icon{font-size:18px;flex-shrink:0}.products-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:12px}.products-col{display:flex;flex-direction:column;gap:10px}.product-card-title{font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}.use-title{color:var(--sage-dark)}.avoid-title{color:var(--rose)}.product-item{padding:12px 14px;border-radius:var(--radius);border:1px solid}.product-item.use-item{background:var(--sage-light);border-color:#c5dcc0}.product-item.avoid-item{background:var(--rose-light);border-color:#e8c5c5}.product-item-name{font-weight:600;font-size:.9rem;margin-bottom:4px}.product-item-what{font-size:.8rem;color:var(--text-secondary);line-height:1.4;margin-bottom:4px}.product-item-why{font-size:.78rem;color:var(--text-tertiary);line-height:1.4;font-style:italic}.product-item.use-item .product-item-why{color:var(--sage-dark);opacity:.7}.product-item.avoid-item .product-item-why{color:var(--rose);opacity:.7}.concerns-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.concern-badge{padding:6px 12px;background:var(--copper-light);color:var(--copper-dark);border-radius:100px;font-size:.8rem;font-weight:500}.profile-actions{display:flex;gap:10px;margin-top:28px}.profile-actions .btn{flex:1}.routine-intro{margin-bottom:24px}.routine-intro h2{margin-bottom:6px}.routine-intro p{color:var(--text-secondary);font-size:.9rem}.routine-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--surface-alt);padding:4px;border-radius:var(--radius);border:1px solid var(--border)}.routine-tab{flex:1;padding:10px 12px;border:none;border-radius:8px;background:transparent;font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--text-tertiary);cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.routine-tab:hover{color:var(--text-secondary)}.routine-tab.active{background:var(--surface);color:var(--sage-dark);box-shadow:var(--shadow)}.routine-tab-content{animation:fadeIn .25s ease}.routine-tab-note{color:var(--text-secondary);font-size:.88rem;margin-bottom:20px;padding:12px 14px;background:var(--copper-light);border:1px solid #f0dcc6;border-radius:var(--radius)}.routine-day{margin-bottom:20px}.routine-day-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.routine-day-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--sage-light);border-radius:10px;font-size:18px}.routine-day-name{font-family:var(--font-heading);font-size:1.15rem}.routine-day-freq{font-size:.78rem;color:var(--text-tertiary)}.routine-steps{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--border-light);margin-left:17px;padding-left:20px}.routine-step{position:relative;padding:12px 0}.routine-step:before{content:"";position:absolute;left:-25px;top:18px;width:10px;height:10px;background:var(--sage);border-radius:50%;border:2px solid var(--bg)}.routine-step-title{font-weight:600;font-size:.9rem;margin-bottom:3px}.routine-step-desc{font-size:.82rem;color:var(--text-secondary);line-height:1.5}.routine-step-tip{margin-top:8px;padding:8px 12px;background:var(--sky-light);border-left:3px solid var(--sky);border-radius:0 8px 8px 0;font-size:.8rem;color:var(--text-secondary);line-height:1.5}.routine-tips{margin-top:28px}.routine-tip{display:flex;gap:10px;padding:14px;background:var(--copper-light);border:1px solid #f0dcc6;border-radius:var(--radius);margin-bottom:8px}.routine-tip-icon{font-size:18px;flex-shrink:0}.routine-tip-text{font-size:.85rem;color:var(--text-secondary);line-height:1.5}.diy-list{display:flex;flex-direction:column;gap:12px}.diy-card{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);border-left:3px solid var(--copper)}.diy-name{font-weight:700;font-size:.95rem;margin-bottom:8px;color:var(--copper-dark)}.diy-recipe{font-size:.85rem;color:var(--text-secondary);line-height:1.5;margin-bottom:8px}.diy-recipe-label{font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary);display:block;margin-bottom:2px}.diy-what{font-size:.85rem;font-weight:500;color:var(--text-secondary);line-height:1.5;margin-bottom:4px;margin-top:8px}.diy-why{font-size:.8rem;color:var(--copper-dark);opacity:.75;line-height:1.5;font-style:italic}.progress-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.progress-coach{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;background:var(--sage-light);border:1px solid #c5dcc0;border-radius:var(--radius);margin-bottom:20px;font-size:.88rem;color:var(--text-secondary);line-height:1.6}.progress-goal{padding:16px;background:linear-gradient(135deg,var(--sage-light),var(--copper-light));border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:20px;text-align:center}.progress-goal-icon{font-size:36px;margin-bottom:8px}.progress-goal h3{font-family:var(--font-body);font-weight:700;font-size:1rem;margin-bottom:4px;color:var(--sage-dark)}.progress-goal p{font-size:.85rem;color:var(--text-secondary);line-height:1.5}.progress-streak{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:.82rem;font-weight:600;color:var(--copper-dark)}.milestone-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,var(--sage-light),var(--copper-light));border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;animation:bounceIn .5s ease}.milestone-icon{font-size:28px;flex-shrink:0}.milestone-text{font-size:.88rem;color:var(--text-secondary);line-height:1.5}.milestone-text strong{color:var(--sage-dark)}.upload-area{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:32px 20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:24px;background:var(--surface)}.upload-area:hover{border-color:var(--sage);background:var(--sage-light)}.upload-icon{font-size:32px;margin-bottom:8px}.upload-text{font-weight:600;font-size:.95rem;margin-bottom:4px}.upload-hint{font-size:.8rem;color:var(--text-tertiary)}.progress-empty{text-align:center;padding:40px 20px}.progress-empty-icon{font-size:48px;margin-bottom:12px}.progress-empty h3{font-family:var(--font-body);font-weight:600;margin-bottom:6px}.progress-empty p{color:var(--text-secondary);font-size:.9rem}.timeline{display:flex;flex-direction:column;gap:16px}.timeline-entry{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}.timeline-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.timeline-info{padding:14px 16px}.timeline-date{font-size:.78rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}.timeline-note{font-size:.88rem;color:var(--text-secondary);line-height:1.5}.timeline-actions{display:flex;justify-content:flex-end;padding:0 16px 12px}.timeline-delete{background:none;border:none;color:var(--text-tertiary);font-size:.78rem;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:var(--font-body)}.timeline-delete:hover{color:var(--rose);background:var(--rose-light)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:flex-end;justify-content:center;z-index:200;animation:fadeIn .2s ease}.modal{background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:24px 20px max(24px,env(safe-area-inset-bottom));width:100%;max-width:500px;max-height:80vh;overflow-y:auto;animation:slideUp .3s ease}.modal h3{margin-bottom:16px}.modal textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:var(--font-body);font-size:.9rem;resize:vertical;min-height:80px;margin-bottom:16px;background:var(--surface-alt);color:var(--text)}.modal textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 2px var(--sage-light)}.modal-actions{display:flex;gap:10px}.modal-actions .btn{flex:1}@media(min-width:640px){.page{padding:32px 24px}.welcome-title{font-size:3rem}.chars-grid,.quiz-options{gap:12px}}