html,body{height:100%}body{color:#1a1a1a;background:linear-gradient(#eaf1e2 0%,#dbe7cd 100%);flex-direction:column;margin:0;font-family:system-ui,sans-serif;line-height:1.6;display:flex}a{color:#0b5fff}main{flex:1;display:flex;position:relative}#garden{box-sizing:border-box;touch-action:none;cursor:pointer;background-image:radial-gradient(circle at 20% 30%,#0000001a 0 1px,#0000 1px),radial-gradient(circle at 65% 65%,#ffffff0f 0 1px,#0000 1px),repeating-linear-gradient(115deg,#0000000d 0 6px,#0000 6px 12px),linear-gradient(#6b4423 0%,#3f2712 100%),repeating-linear-gradient(90deg,#6b4226 0 8px,#5a3620 8px 9px,#4a2f18 9px 10px);background-position:0 0,4px 4px,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,no-repeat,repeat;background-size:15px 15px,19px 19px,auto,auto,auto;background-clip:content-box,content-box,content-box,content-box,border-box;border-radius:1rem;flex:1;margin:1rem;padding:.75rem;position:relative;overflow:hidden;box-shadow:inset 0 0 1.5rem #00000059,0 8px 20px #00000047}.garden-sign{z-index:1;color:#2d1c0ee0;pointer-events:none;background:linear-gradient(#d9b177 0%,#c49760 100%);border:1.5px solid #28180c8c;border-radius:4px 7px 5px 8px;margin:0;padding:.35rem .7rem;font-family:Segoe Print,Bradley Hand,Comic Sans MS,cursive;font-size:1rem;font-weight:400;position:absolute;top:1.4rem;left:1.1rem;transform:rotate(-2deg);box-shadow:0 2px 4px #00000038}.garden-sign:before{content:"";background:#5a3620;width:.3rem;height:.9rem;position:absolute;top:100%;left:50%;transform:translate(-50%)}.garden-sign:after{content:"";aspect-ratio:5/2;background:radial-gradient(closest-side,#1e12088c,#0000 80%);border-radius:50%;width:1rem;position:absolute;top:calc(100% + .7rem);left:50%;transform:translate(-50%,-55%)}.garden-decor{pointer-events:none;position:absolute;inset:0}.decor-item{aspect-ratio:1;width:1.5rem;position:absolute;bottom:1rem}.decor-stone{width:1.3rem}.decor-sm{width:.95rem}.decor-lg{width:1.8rem}.decor-top-right{inset:1rem 1rem auto auto}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.plant-dot{--plant-size:.4rem;--plant-color:#4d3319;--plant-glow:.05rem;--growth:0;height:var(--plant-size);aspect-ratio:120/140;filter:drop-shadow(0 0 var(--plant-glow) var(--plant-color));pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.plant-dot svg{width:100%;height:100%;display:block;overflow:visible}.plant-dot:before{content:"";aspect-ratio:5/2;background:radial-gradient(closest-side,#1e12088c,#0000 80%);border-radius:50%;width:55%;position:absolute;top:100%;left:50%;transform:translate(-50%,-55%)}.plant-dot:after{content:"";aspect-ratio:3;background:radial-gradient(closest-side,#140c0680,#0000 75%);width:65%;position:absolute;top:100%;left:50%;transform:translate(-50%,-20%)}.plant-dot [data-phase=seed]{opacity:clamp(0, calc((.1 - var(--growth)) * 10), 1)}.plant-dot [data-phase=a]{opacity:clamp(0, calc((var(--growth) - .05) * 8), 1);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(clamp(.2, calc(.2 + var(--growth) * 3), 1))}.plant-dot [data-phase=b]{opacity:clamp(0, calc((var(--growth) - .3) * 6), 1);transform-box:fill-box;transform-origin:50%;transform:scale(clamp(.3, calc((var(--growth) - .2) * 3), 1))}.plant-dot [data-phase=c]{opacity:clamp(0, calc((var(--growth) - .56) * 6), 1);transform-box:fill-box;transform-origin:50%;transform:scale(clamp(.3, calc((var(--growth) - .46) * 3), 1))}.plant-dot [data-phase=d]{opacity:clamp(0, calc((var(--growth) - .78) * 7), 1);transform-box:fill-box;transform-origin:50%;transform:scale(clamp(.3, calc((var(--growth) - .68) * 3), 1))}.plant-dot [data-grow-line]{fill:none;stroke-linecap:round}.plant-dot [data-phase=a][data-grow-line]{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--growth) - .05) * 8, 1))}.plant-dot [data-phase=c][data-grow-line]{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--growth) - .56) * 6, 1))}.plant-dot ellipse,.plant-dot circle,.plant-dot path:not([data-grow-line]){stroke:#281e1473;stroke-width:1.3px;stroke-linejoin:round}.plant-tree [data-phase=b],.plant-mushroom [data-phase=b]{transform-origin:50% 100%}.tool-tray{background:linear-gradient(#5a3620eb,#3a2214eb);border:1.5px solid #28180cb3;border-radius:.9rem;flex-wrap:wrap;gap:.3rem;padding:.3rem;display:flex;position:absolute;bottom:1.75rem;left:1.75rem;box-shadow:0 2px 6px #00000059}.tool-button{all:unset;box-sizing:border-box;cursor:pointer;color:#e8d5b4e0;background-color:#00000026;border-radius:50%;justify-content:center;align-items:center;width:2.2rem;height:2.2rem;transition:background-color .15s,transform .15s;display:flex;box-shadow:inset 0 1px 2px #0000004d}.tool-button svg{width:1.4rem;height:1.4rem}.tool-button:hover{background-color:#ffffff1a}.tool-button[aria-pressed=true]{color:#281a0c;background-color:#ffd682d9;transform:scale(1.08)}.tool-button:focus-visible{outline-offset:2px;outline:2px solid #0b5fff}.tool-button[data-tool=clear]{background-color:#c45a3c38;margin-left:.55rem;position:relative}.tool-button[data-tool=clear]:hover{background-color:#c45a3c59}.tool-button[data-tool=clear]:before{content:"";background:#e8d5b44d;width:1.5px;position:absolute;top:15%;bottom:15%;left:-.32rem}@keyframes plant-remove{0%{opacity:1;transform:translate(-50%,-100%)scale(1)}to{opacity:0;transform:translate(-50%,-100%)scale(.5)}}.plant-dot.removing{animation:.25s forwards plant-remove}.water-droplet{--droplet-size:.35rem;width:var(--droplet-size);height:var(--droplet-size);pointer-events:none;background:#c6e6facc;border-radius:50% 50% 50% 0;animation:.55s ease-out forwards water-droplet-fall;position:absolute;transform:translate(-50%,-50%)rotate(45deg);box-shadow:0 0 .2rem #c6e6fa80}@keyframes water-droplet-fall{0%{opacity:.9;transform:translate(-50%,-50%)rotate(45deg)scale(1)}to{opacity:0;transform:translate(-50%,calc(.6rem - 50%))rotate(45deg)scale(.6)}}
