@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--color-sage: #9CAF88;--color-green-dark: #1A2F1A;--color-beige: #F5F5DC;--color-earth: #D2B48C;--color-off-white: #FAF9F6;--bg-app: var(--color-beige);--bg-card: #FFFFFF;--text-primary: var(--color-green-dark);--text-secondary: #5C705C;--accent: var(--color-sage);--accent-foreground: var(--color-off-white);--font-family: "Inter", system-ui, -apple-system, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--space-2: .5rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--radius-lg: 24px;--radius-full: 9999px;--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:dark){:root{--bg-app: #0F1C0F;--bg-card: #1A2F1A;--text-primary: var(--color-off-white);--text-secondary: #9CAF88}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:#000;color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;display:flex;justify-content:center;min-height:100vh}::-webkit-scrollbar{width:0px;background:transparent}button{font-family:inherit;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}h1,h2,h3,h4{font-weight:500;letter-spacing:-.02em}#root{width:100%;max-width:480px;min-height:100vh;background-color:var(--bg-app);position:relative;overflow-x:hidden;box-shadow:0 0 50px #0000001a;display:flex;flex-direction:column}.app-container{flex:1;display:flex;flex-direction:column;padding-bottom:80px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease-out forwards}.onboarding-container{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-8);background-color:var(--bg-app);text-align:center}.onboarding-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-6)}.icon-placeholder{min-height:80px;display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.onboarding-text{font-size:var(--text-2xl);color:var(--text-primary);max-width:80%;line-height:1.3}.onboarding-subtext{font-size:var(--text-base);color:var(--text-secondary);max-width:90%}.dots{display:flex;gap:var(--space-2);margin-top:var(--space-8)}.dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-earth);opacity:.3;transition:var(--transition-smooth)}.dot.active{background-color:var(--color-sage);opacity:1;transform:scale(1.2)}.next-button{background-color:var(--color-green-dark);color:var(--color-off-white);padding:var(--space-4) var(--space-8);border-radius:var(--radius-lg);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8);box-shadow:0 4px 12px #2f4f4f33;transition:var(--transition-smooth)}.next-button:active{transform:scale(.98)}.plant-container{position:relative;width:200px;height:300px;display:flex;justify-content:center;align-items:flex-end}.plant-svg{filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}.soil{position:absolute;bottom:0;width:120px;height:20px;background:#0000000d;border-radius:50%;filter:blur(4px)}.stem-anim{stroke-dasharray:300;stroke-dashoffset:300;animation:growStem 2s ease-out forwards}@keyframes growStem{to{stroke-dashoffset:0}}.leaf-group{opacity:0;transform-origin:center;transform:scale(0);animation:bloom 1s ease-out 1s forwards}.bloom-1{animation-delay:.5s}.bloom-2{animation-delay:1.5s}.bloom-3{animation-delay:2.5s}@keyframes bloom{to{opacity:1;transform:scale(1)}}.flower{opacity:0;transform-origin:100px 100px;animation:rotateBloom 3s ease-in-out infinite alternate,bloom 1s ease-out 2s forwards}@keyframes rotateBloom{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}.garden-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:var(--space-8);padding-top:var(--space-8);background:radial-gradient(circle at center 60%,var(--bg-app) 0%,#E8E6D9 100%)}.garden-header{text-align:center;opacity:.8;width:100%}.header-top{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:var(--space-2)}.garden-header h1{font-size:var(--text-xl);color:var(--text-primary);margin:0}.settings-btn{position:absolute;right:0;color:var(--text-secondary);opacity:.6;transition:opacity .3s}.settings-btn:hover{opacity:1}.date-display{font-size:var(--text-sm);color:var(--text-secondary);text-transform:capitalize}.garden-center{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.garden-actions{width:100%;padding-bottom:var(--space-8);display:flex;justify-content:center}.reflect-cta{background-color:var(--color-sage);color:var(--color-off-white);font-size:var(--text-lg);padding:var(--space-4) var(--space-8);border-radius:50px;box-shadow:0 10px 25px -5px #8a9a5b66;transition:all .3s ease;position:relative;overflow:hidden}.reflect-cta:hover{transform:translateY(-2px);box-shadow:0 15px 30px -5px #8a9a5b80}.reflect-cta:active{transform:scale(.98)}.reflection-view{flex:1;display:flex;flex-direction:column;padding:var(--space-8);background:var(--bg-app)}.back-button{align-self:flex-start;color:var(--text-secondary);padding:var(--space-2);margin-left:-8px;margin-bottom:var(--space-8)}.reflection-form{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--space-8);margin-bottom:20%}.prompt-text{font-size:var(--text-2xl);color:var(--text-primary);font-weight:500;line-height:1.4}.reflection-input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.1);padding:var(--space-4) 0;font-size:var(--text-lg);font-family:var(--font-family);color:var(--text-primary);resize:none;outline:none;transition:border-color .3s}.reflection-input:focus{border-bottom-color:var(--color-sage)}.reflection-input::placeholder{color:var(--text-secondary);opacity:.5}.action-area{display:flex;justify-content:flex-end;margin-top:var(--space-4)}.submit-button{background-color:var(--color-sage);color:var(--color-off-white);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:all .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.submit-button.active{opacity:1;transform:scale(1);pointer-events:auto}.saving-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-view{flex:1;padding:var(--space-8);padding-bottom:100px;background:var(--bg-app);overflow-y:auto}.progress-title{font-size:var(--text-2xl);color:var(--text-primary);margin-bottom:var(--space-8)}.timeline{display:flex;flex-direction:column;gap:var(--space-8);position:relative}.timeline-item{position:relative;padding-left:var(--space-8)}.timeline-line{position:absolute;left:7px;top:24px;bottom:-40px;width:2px;background-color:var(--color-earth);opacity:.3}.timeline-item:last-child .timeline-line{display:none}.timeline-dot{position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background-color:var(--color-sage);border:4px solid var(--bg-app);box-shadow:0 0 0 1px var(--color-sage)}.timeline-dot.start{background-color:var(--color-earth);box-shadow:0 0 0 1px var(--color-earth)}.timeline-content{display:flex;flex-direction:column;gap:var(--space-2)}.timeline-date{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);font-weight:600}.timeline-text{font-size:var(--text-base);color:var(--text-primary);line-height:1.4}.timeline-preview{margin-top:var(--space-4);background-color:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-4);height:160px;overflow:hidden;box-shadow:0 4px 12px #00000008}.bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;height:80px;background-color:var(--bg-card);display:flex;justify-content:space-around;align-items:center;border-top:1px solid rgba(0,0,0,.05);z-index:100;padding-bottom:20px}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-secondary);text-decoration:none;font-size:10px;transition:var(--transition-smooth)}.nav-item.active{color:var(--color-sage);transform:translateY(-2px)}
