*{box-sizing:border-box}html,body{color:#2a2a2a;background:radial-gradient(circle at 50% 30%,#f6efda 0%,#e1d6ba 100%);height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app{flex-direction:column;justify-content:center;align-items:center;gap:18px;min-height:100%;padding:32px 20px;display:flex}h1{letter-spacing:-.5px;margin:0;font-size:clamp(28px,6vw,44px);font-weight:700}.bonsai-stage{aspect-ratio:1/1.1;background:radial-gradient(circle at 70% 18%,#ffeca88c 0%,#ffeca800 55%),linear-gradient(#fff8e6 0%,#ede0b8 100%);border-radius:28px;place-items:center;width:min(440px,92vw);display:grid;position:relative;overflow:hidden;box-shadow:0 30px 60px #503c1e38,inset 0 0 0 1px #ffffffb3}.bonsai-stage svg{transform-origin:bottom;--leaf-color:#549f41;--leaf-light:#75d572;--leaf-dark:#3e7029;--soil-color:#58412d;--moss-color:#5f913b;width:92%;height:92%;display:block}.bonsai-stage svg .foliage,.bonsai-stage svg .fallen-leaves,.bonsai-stage svg .sun-halo,.bonsai-stage svg .soil ellipse:first-child,.bonsai-stage svg .moss{transition:fill .8s,opacity .8s,transform .8s}.bonsai-stage svg .sun-halo,.bonsai-stage svg .fallen-leaves{opacity:0}.bonsai-stage svg .droplets{opacity:0;pointer-events:none}.bonsai-stage svg.is-watering .droplets{animation:1.1s ease-in forwards rain}.bonsai-stage svg.is-watering .soil ellipse:first-child{filter:brightness(.85)}@keyframes rain{0%{opacity:0;transform:translateY(-30px)}20%{opacity:1}to{opacity:0;transform:translateY(140px)}}.bonsai-stage svg.is-sunning .sun-halo{animation:1s ease-out sunFlash}@keyframes sunFlash{0%{filter:brightness();transform:scale(1)}35%{filter:brightness(1.6);transform:scale(1.08)}to{filter:brightness();transform:scale(1)}}.stats{gap:18px;width:min(440px,92vw);display:flex}.stat{flex-direction:column;flex:1;gap:6px;display:flex}.stat-label{color:#5d5343;letter-spacing:.2px;font-size:13px;font-weight:600}.bar{--fill:50%;background:#00000014;border-radius:999px;height:10px;position:relative;overflow:hidden}.bar:after{content:"";width:var(--fill);border-radius:999px;transition:width .5s;position:absolute;inset:0}.bar--water:after{background:linear-gradient(90deg,#6fb1e8,#2f78c4)}.bar--sun:after{background:linear-gradient(90deg,#ffd16a,#f08a2a)}.caption{text-align:center;color:#5d5343;letter-spacing:.3px;margin:0;font-size:14px;font-weight:600}.controls{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn{color:#fff;cursor:pointer;border:0;border-radius:999px;padding:13px 26px;font-size:15px;font-weight:700;transition:transform .15s,box-shadow .15s,filter .15s}.btn:hover{filter:brightness(1.05);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn--water{background:linear-gradient(135deg,#6fb1e8,#2f78c4);box-shadow:0 8px 20px #2f78c459}.btn--sun{background:linear-gradient(135deg,#ffd16a,#f08a2a);box-shadow:0 8px 20px #f08a2a59}