:root{--zg-toolbar-bg:#ffffffeb;--zg-toolbar-border:#00000014;--zg-toolbar-shadow:0 2px 16px #0000001a;--zg-btn-bg:transparent;--zg-btn-hover:#0000000f;--zg-btn-active:#6366f11f;--zg-btn-active-color:#6366f1;--zg-btn-color:#64748b;--zg-btn-danger-color:#ef4444;--zg-text:#334155;--zg-text-muted:#64748b;--zg-slider-track:#e2e8f0;--zg-slider-thumb:#6366f1;--zg-overlay-bg:#00000073;--zg-instructions-bg:#fffffff5;--zg-instructions-text:#334155;--zg-picker-bg:#fff;--zg-picker-border:#0000001a;--zg-picker-shadow:0 8px 24px #0000001f;--zg-swatch-border:#00000026;--zg-swatch-active-border:#6366f1;--zg-border-color:#5a4a3a;--zg-border-inner:#6b5740;--zg-element-hover:#0000000a;--zg-element-active:#6366f114;--zg-garden-bg:#2a2018}._zg-container{width:100%;height:100vh;cursor:crosshair;background:var(--zg-garden-bg);-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:contain;height:100dvh;position:relative;overflow:hidden}._zg-border{border-style:solid;border-width:6px;border-color:var(--zg-border-color);box-shadow:inset 0 0 0 2px var(--zg-border-inner), 0 0 20px #0000004d;border-radius:4px;position:absolute;top:8px;bottom:8px;left:8px;right:8px;overflow:hidden}#_zg-canvas{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}._zg-instructions{background:var(--zg-overlay-bg);z-index:20;justify-content:center;align-items:center;animation:.3s _zg-fadeIn;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}._zg-instructions-content{background:var(--zg-instructions-bg);text-align:center;border-radius:16px;max-width:340px;padding:2rem 2.5rem;box-shadow:0 8px 40px #0003}._zg-instructions-icon{background:var(--zg-btn-active);width:56px;height:56px;color:var(--zg-btn-active-color);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 1rem;display:flex}._zg-instructions-icon svg{width:28px;height:28px}._zg-instructions-content p{color:var(--zg-instructions-text);margin:0 0 1.25rem;font-size:.938rem;line-height:1.6}._zg-instructions-btn{background:var(--zg-btn-active-color);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:none;border-radius:8px;justify-content:center;align-items:center;min-height:44px;padding:.625rem 2rem;font-size:.875rem;font-weight:500;transition:opacity .2s;display:inline-flex}._zg-instructions-btn:hover{opacity:.9}@keyframes _zg-fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width:768px){._zg-border{border-width:4px;top:4px;bottom:4px;left:4px;right:4px}._zg-instructions-content{max-width:calc(100% - 2rem);margin:0 1rem;padding:1.5rem}}@media (max-width:480px){._zg-border{border-width:3px;top:2px;bottom:2px;left:2px;right:2px}._zg-instructions-content{padding:1.25rem 1rem}._zg-instructions-content p{font-size:.875rem}}._zg-toolbar{top:calc(12px + env(safe-area-inset-top));background:var(--zg-toolbar-bg);-webkit-backdrop-filter:blur(12px);border-style:solid;border-width:1px;border-color:var(--zg-toolbar-border);box-shadow:var(--zg-toolbar-shadow);z-index:10;border-radius:12px;align-items:center;gap:4px;max-width:calc(100% - 16px);padding:6px 10px;transition:opacity .3s;display:flex;position:absolute;left:50%;transform:translate(-50%)}._zg-toolbar-group{align-items:center;gap:2px;display:flex}._zg-toolbar-divider{background:var(--zg-toolbar-border);width:1px;height:24px;margin:0 4px}._zg-tool-btn{background:var(--zg-btn-bg);width:36px;height:36px;color:var(--zg-btn-color);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:none;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s;display:flex}._zg-tool-btn svg{width:16px;height:16px}._zg-tool-btn:hover{background:var(--zg-btn-hover);color:var(--zg-text)}._zg-tool-btn._zg-tool-active{background:var(--zg-btn-active);color:var(--zg-btn-active-color)}._zg-tool-btn._zg-tool-danger:hover{color:var(--zg-btn-danger-color);background:#ef44441a}._zg-slider-group{gap:6px;padding:0 4px}._zg-slider-label{color:var(--zg-text-muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;font-size:.688rem;font-weight:500}._zg-slider{-webkit-appearance:none;appearance:none;background:var(--zg-slider-track);cursor:pointer;touch-action:pan-x;-webkit-tap-highlight-color:transparent;border-radius:2px;outline:none;width:70px;height:4px}._zg-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--zg-slider-thumb);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #00000026}._zg-slider::-moz-range-thumb{background:var(--zg-slider-thumb);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #00000026}._zg-slider-value{color:var(--zg-text-muted);text-align:center;min-width:14px;font-size:.75rem;font-weight:600}@media (max-width:768px){._zg-toolbar{top:calc(8px + env(safe-area-inset-top));border-radius:10px;flex-wrap:wrap;justify-content:center;gap:4px 2px;max-width:calc(100% - 12px);padding:4px 6px}._zg-tool-btn{border-radius:8px;width:40px;height:40px}._zg-tool-btn svg{width:16px;height:16px}._zg-toolbar-divider{height:24px;margin:0 2px}._zg-slider-group{display:none}}@media (max-width:480px){._zg-toolbar{gap:2px;padding:4px 5px}._zg-tool-btn{width:38px;height:38px}}._zg-theme-picker{background:var(--zg-picker-bg);border-style:solid;border-width:1px;border-color:var(--zg-picker-border);box-shadow:var(--zg-picker-shadow);z-index:15;border-radius:12px;min-width:200px;animation:.15s _zg-slideDown;position:absolute;top:60px;left:50%;overflow:hidden;transform:translate(-50%)}._zg-theme-picker-header{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--zg-picker-border);color:var(--zg-text);justify-content:space-between;align-items:center;padding:10px 14px;font-size:.8rem;font-weight:600;display:flex}._zg-theme-close{width:32px;height:32px;color:var(--zg-text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;display:flex}._zg-theme-close:hover{color:var(--zg-text)}._zg-theme-close svg{width:12px;height:12px}._zg-theme-options{gap:8px;padding:12px 14px;display:flex}._zg-theme-option{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:2px solid #0000;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;padding:2px;transition:border-color .15s;display:flex}._zg-theme-option:hover{border-color:var(--zg-swatch-border)}._zg-theme-option._zg-theme-active{border-color:var(--zg-swatch-active-border)}._zg-theme-swatch{border-style:solid;border-width:1px;border-color:var(--zg-swatch-border);border-radius:50%;width:28px;height:28px;display:block}@keyframes _zg-slideDown{0%{opacity:0;transform:translate(-50%)translateY(-4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}._zg-container[data-tool=rake],._zg-container[data-tool=wave],._zg-container[data-tool=circle]{cursor:crosshair}._zg-container[data-tool=smooth]{cursor:grab}._zg-container[data-tool=smooth]:active{cursor:grabbing}._zg-container[data-tool=place]{cursor:copy}._zg-container._zg-night{--zg-garden-bg:#0f0e0c}._zg-container._zg-night ._zg-border{border-color:#3a3028;box-shadow:inset 0 0 0 2px #4a4030,0 0 30px #00000080}._zg-container._zg-night #_zg-canvas{filter:brightness(.55)saturate(.75)}._zg-container._zg-night ._zg-toolbar{background:#141c26eb;border-color:#ffffff0f}._zg-container._zg-night ._zg-tool-btn{color:#94a3b8}._zg-container._zg-night ._zg-tool-btn:hover{color:#e2e8f0;background:#ffffff14}._zg-container._zg-night ._zg-tool-btn._zg-tool-active{color:#818cf8;background:#6366f133}._zg-container._zg-night ._zg-toolbar-divider{background:#ffffff14}._zg-container._zg-night ._zg-slider-label,._zg-container._zg-night ._zg-slider-value{color:#94a3b8}._zg-container._zg-night ._zg-slider{background:#ffffff1f}._zg-container._zg-night ._zg-theme-picker,._zg-container._zg-night ._zg-element-picker{background:#1a2232;border-color:#ffffff14}._zg-container._zg-night ._zg-theme-picker-header{color:#e2e8f0;border-bottom-color:#ffffff14}._zg-container._zg-night ._zg-theme-close{color:#94a3b8}._zg-container._zg-night ._zg-element-btn{color:#cbd5e1}._zg-container._zg-night ._zg-element-btn:hover{background:#ffffff0f}._zg-container._zg-night ._zg-element-name{color:#94a3b8}@media (max-width:768px){._zg-theme-picker{top:calc(60px + env(safe-area-inset-top));min-width:200px;max-width:calc(100% - 24px)}._zg-theme-options{flex-wrap:wrap;justify-content:center}}@media (max-width:480px){._zg-theme-picker{top:calc(96px + env(safe-area-inset-top))}}._zg-element-group{position:relative}._zg-element-picker{background:var(--zg-picker-bg);border-style:solid;border-width:1px;border-color:var(--zg-picker-border);box-shadow:var(--zg-picker-shadow);z-index:15;border-radius:12px;width:280px;padding:8px;display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}._zg-element-picker._zg-element-picker-open{animation:.15s _zg-slideDown;display:block}._zg-element-grid{grid-template-columns:repeat(2,1fr);gap:4px;display:grid}._zg-element-btn{cursor:pointer;color:var(--zg-text);text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;min-height:40px;padding:8px 10px;font-size:.75rem;font-weight:500;transition:background .15s;display:flex}._zg-element-btn:hover{background:var(--zg-element-hover)}._zg-element-btn._zg-element-active{background:var(--zg-element-active);color:var(--zg-btn-active-color)}._zg-element-name{color:var(--zg-text-muted);font-size:.688rem}._zg-element-btn._zg-element-active ._zg-element-name{color:var(--zg-btn-active-color)}._zg-element-preview{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;display:flex}._zg-preview-stone-s{background:radial-gradient(at 35% 35%,#b0a89a,#7a746c);border-radius:50% 45% 50% 48%;width:18px;height:14px}._zg-preview-stone-l{background:radial-gradient(at 35% 35%,#a09890,#6a645c);border-radius:48% 52% 45% 50%;width:24px;height:18px}._zg-preview-stone-g{background-color:#0000;background-image:radial-gradient(at 30% 40%,#a09890 40%,#0000 41%),radial-gradient(at 60% 60%,#8a8478 45%,#0000 46%),radial-gradient(#9a9488 35%,#0000 36%);background-position:2px 4px,12px 8px,8px 2px;background-repeat:no-repeat;background-size:14px 12px,12px 10px,10px 10px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box}._zg-preview-bonsai{background-color:#0000;background-image:radial-gradient(circle at 50% 30%,#3d7a3d 40%,#0000 41%),linear-gradient(90deg,#5a4a3a 40%,#0000 41%);background-position:5px 2px,12px 12px;background-repeat:no-repeat;background-size:16px 12px,3px 12px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:relative}._zg-preview-bamboo{background:linear-gradient(90deg,#5a8a4a 30%,#7ab86a 50%,#5a8a4a 70%);border-radius:2px;width:6px;height:22px;box-shadow:6px 0 #6aa85a,-6px 2px #5a8a4a}._zg-preview-moss{background-color:#0000;background-image:radial-gradient(circle,#4a8a4a 30%,#0000 31%),radial-gradient(circle,#5a9a5a 25%,#0000 26%),radial-gradient(circle,#3a7a3a 35%,#0000 36%),radial-gradient(circle,#4a8a4a 20%,#0000 21%);background-position:4px 6px,12px 4px,8px 12px,16px 10px;background-repeat:no-repeat;background-size:8px 8px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box}._zg-preview-lantern{background-color:#0000;background-image:linear-gradient(135deg,#6a645c,#9a9488),linear-gradient(#8a8278,#6a645c);background-position:6px 4px,11px 10px;background-repeat:no-repeat;background-size:14px 6px,4px 10px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border-bottom:3px solid #8a8278;position:relative}._zg-preview-basin{background:radial-gradient(circle,#6496aacc 35%,#8a8278 36%,#6a645c 85%);border-radius:50%;width:22px;height:22px}._zg-preview-stepping{background:linear-gradient(135deg,#a09890,#7a7470);border-radius:50% 48% 52% 46%;width:22px;height:16px}._zg-preview-cherry{background-color:#0000;background-image:radial-gradient(circle at 50% 40%,#ffb4c3cc 35%,#0000 36%),radial-gradient(circle at 35% 55%,#ffc8d299 25%,#0000 26%),radial-gradient(circle at 65% 55%,#ffbec8b3 20%,#0000 21%),linear-gradient(90deg,#5a3a2a 40%,#0000 41%);background-position:4px 2px,2px 8px,16px 6px,12px 14px;background-repeat:no-repeat;background-size:18px 14px,10px 10px,10px 10px,2px 10px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box}@media (max-width:768px){._zg-element-picker{top:calc(60px + env(safe-area-inset-top));-webkit-overflow-scrolling:touch;width:calc(100% - 24px);max-width:320px;max-height:calc(100dvh - 120px);position:fixed;left:50%;right:auto;overflow-y:auto;transform:translate(-50%)}._zg-element-btn{min-height:44px;padding:8px;font-size:.75rem}._zg-element-preview{width:24px;height:24px}}@media (max-width:480px){._zg-element-picker{top:calc(96px + env(safe-area-inset-top));max-height:calc(100dvh - 140px)}._zg-element-grid{gap:4px}}
