*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select,input,summary{font:inherit;color:inherit}button,select,summary{cursor:pointer}button{border:0;touch-action:manipulation}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}button:active{transform:scale(.96)}button:disabled{opacity:.25;cursor:default}[hidden]{display:none!important}dialog{max-width:calc(100vw - 40px);width:360px;padding:26px;border:0;border-radius:16px;color:inherit;background:var(--paper);box-shadow:0 20px 80px #0003}dialog::backdrop{background:#17232266}dialog h2{font-size:20px;margin:0 0 16px}dialog p{font-size:13px;line-height:1.6;opacity:.65}dialog>div{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}dialog button{padding:12px 18px;border-radius:8px;background:transparent}dialog #confirm{background:var(--ink);color:var(--paper)}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:root{--paper:#f4f4e9;--ink:#425942;color:var(--ink)}#app{position:relative;width:100%;height:100dvh;isolation:isolate}.garden{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 12%,#fff5d9,transparent 65%),#e5ecd9;transition:background .5s}.garden[data-season="1"]{background:radial-gradient(ellipse at 78% 12%,#fff1c7,transparent 65%),#ddebd1}.garden[data-season="2"]{background:radial-gradient(ellipse at 78% 12%,#fff0d4,transparent 65%),#ebe3cf}.garden[data-season="3"]{background:radial-gradient(ellipse at 78% 12%,#365260,transparent 65%),#1e333c}#app:has([data-season="3"]){--ink:#d5e1c9;--paper:#243e45}canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:calc(20px + env(safe-area-inset-top)) 26px 16px;pointer-events:none;background:linear-gradient(var(--paper),transparent)}h1{margin:0;font-size:16px;font-weight:550;letter-spacing:-.5px}.actions{display:flex;align-items:center;gap:5px;pointer-events:auto}.actions select{border:0;background:transparent;font-size:13px;min-height:44px;padding:8px}.actions option{background:var(--paper)}.actions button{width:44px;height:44px;font-size:26px;background:transparent}#hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .45s}#hint p{font-size:15px;color:var(--ink);opacity:.65;letter-spacing:-.4px}.bottom{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;align-items:center;pointer-events:none;padding:35px 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper))}.tools{display:flex;align-items:center;justify-content:center;gap:20px;pointer-events:auto}.tool{position:relative;display:flex;align-items:center;flex-direction:column;gap:7px;min-width:48px;padding:8px 4px 13px;background:transparent;color:var(--ink);font-size:12px;opacity:.55;transition:opacity .15s,transform .15s}.tool.selected,.tool:hover{opacity:1}.tool.selected:after{content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor}.tool .icon{height:30px;line-height:30px;font-size:30px}.tool[data-brush="0"] .icon{color:#6c914c}.tool[data-brush="1"] .icon{color:#cc819d}.tool[data-brush="2"] .icon{color:#a77d5b}.tool[data-brush="3"] .icon{color:#8e9381}#save-state{height:19px;padding-top:6px;font-size:10px;opacity:.55}@media(max-width:480px){header{padding:calc(10px + env(safe-area-inset-top)) 15px 12px}h1{font-size:15px}.tools{gap:14px}.tool{font-size:11px}.bottom{padding-top:26px}}@media(max-height:500px){header{padding-top:6px}.bottom{padding-top:10px;padding-bottom:5px}.tools{gap:24px}.tool{flex-direction:row;gap:8px;padding:6px}#save-state{height:14px;padding:0}}

#app{color:var(--ink)}