:root{color-scheme:light;--ink:#553d59;--rose:#ad647f;--paper:#fff8ee;--lavender:#e8d9eb}*{box-sizing:border-box}body{margin:0;background:#faf1e7;color:var(--ink);font-family:Georgia,serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{color:inherit;font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #764b8d;outline-offset:-3px}button:disabled{opacity:.4;cursor:default}.garden-app{position:fixed;inset:0;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;padding-top:env(safe-area-inset-top);background:var(--paper)}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:radial-gradient(ellipse at top,#f1e3ef00,#e5ccdc44),var(--paper);z-index:2}header>div{text-align:center}h1{font-weight:400;font-size:clamp(23px,5vw,40px);margin:0}header p{margin:4px 0 0;font-size:clamp(11px,2.7vw,15px);line-height:1.3}.round{flex:none;display:grid;place-items:center;background:#e7d8e9;border:1px solid #d1b7d0;color:var(--ink);border-radius:50%;width:46px;height:46px;font-size:27px;text-decoration:none}.scene{min-height:0;position:relative;background:#d9e4c2 url('/assets/garden/storybook-garden-landscape.png') center center/100% 100% no-repeat;overflow:hidden;isolation:isolate;touch-action:manipulation}.beds{position:absolute;left:14%;right:14%;top:49%;bottom:10%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));align-items:stretch}.spot{padding:0;position:relative;background:transparent;border:0;min-height:0;min-width:0;display:grid;place-items:center;border-radius:45%;isolation:isolate}.spot.empty:before{content:'';position:absolute;width:44%;height:24%;border-radius:50%;bottom:10%;background:radial-gradient(ellipse,#593b2ccc,#7c512e55 65%,transparent 70%);box-shadow:0 3px 0 #e5b38166}.spot img{position:absolute;max-width:110%;width:auto;height:130%;max-height:170px;bottom:6%;pointer-events:none;filter:drop-shadow(0 2px 1px #66402b33);z-index:1}.spot .seed{display:block;width:10px;height:7px;background:#eed1a0;border-radius:70% 30%;transform:rotate(-25deg);align-self:end;margin-bottom:18%}.spot .sprout{height:65%;opacity:.95}.spot .sprout.big{height:95%}.spot.ready:after{content:'✦';font-size:18px;color:#fff4bb;text-shadow:0 1px 3px #906c2d;position:absolute;right:1%;top:-12%;z-index:2}.spot.selected{background:#ffffff18}.basket{position:absolute;right:12px;top:10px;padding:5px 12px;background:#fff8eeed;border:1px solid #dbc0b8;border-radius:20px;font:17px system-ui;z-index:2}.basket span{font-size:25px}.butterfly{position:absolute;left:22%;top:30%;font-size:27px;pointer-events:none;animation:float 6s ease-in-out infinite}#effect{position:absolute;pointer-events:none;font-size:30px;transform:translate(-50%,-90%);opacity:0}#effect.show{animation:splash .65s ease-out}.controls{background:linear-gradient(#f8eff3,#ebddeb);border-top:1px solid #dcc6d5;padding:8px max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));z-index:3}.seed-panel{display:flex;gap:8px;max-width:700px;margin:0 auto 7px;height:80px}.seed-tabs{display:flex;flex-direction:column;justify-content:center;gap:3px}.seed-tabs button{font-family:system-ui,sans-serif;font-size:12px;min-height:36px;padding:4px 10px;background:#fffaf2;border:1px solid #d6bbcb;border-radius:12px}.seed-tabs button[aria-pressed=true]{background:#a5627a;color:white}.seed-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;flex:1}.seed-choices button{min-width:0;border:1px solid #ddc6cb;background:#fffaf1;border-radius:15px;font-size:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:2px}.seed-choices button img{height:48px;width:60px;object-fit:contain;pointer-events:none}.seed-choices button[aria-pressed=true]{border:2px solid #ac657c;background:#fff3e7}.tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-width:700px;margin:auto}.tools button{min-width:0;border:1px solid #d6bccc;background:#fff8ed;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 2px;min-height:74px;font-size:clamp(11px,2.8vw,16px)}.tools img{width:49px;height:43px;object-fit:contain;pointer-events:none}.tool-icon{height:43px;display:grid;place-items:center;font-size:32px;line-height:1}.tools button[aria-pressed=true]{box-shadow:inset 0 0 0 2px #b76d88;background:#fff0eb}.status-row{display:flex;justify-content:space-between;gap:8px;max-width:900px;margin:5px auto 0;font:11px/1.35 system-ui,sans-serif;min-height:28px;align-items:center}.status-row p{margin:0;flex:1}#save-status{font-size:10px;text-align:right;max-width:100px}#tool-note{height:80px;display:flex;align-items:center;justify-content:center;text-align:center;max-width:700px;margin:0 auto 7px;padding:8px;font-size:15px}#tool-note[hidden],[hidden]{display:none!important}@keyframes float{50%{transform:translate(20px,-12px) rotate(10deg)}}@keyframes splash{0%{opacity:0;transform:translate(-50%,-30%)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%)}}@media(min-width:800px){.beds{left:17%;right:17%}.spot img{height:140%}.controls{padding-top:10px}header{padding-top:10px;padding-bottom:10px}}@media(orientation:landscape) and (max-height:600px){.garden-app{grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:auto minmax(0,1fr)}header{grid-column:1/-1;padding:4px 10px}h1{font-size:24px}header p{margin:0;font-size:12px}.round{width:40px;height:40px}.scene{grid-column:1;grid-row:2}.controls{grid-column:2;grid-row:2;border-left:1px solid #dcc6d5;border-top:0;display:flex;flex-direction:column;padding:7px;min-height:0}.seed-panel{flex-direction:column;height:125px;min-height:125px;width:100%;gap:4px;margin-bottom:5px}.seed-tabs{flex-direction:row}.seed-tabs button{min-height:32px;flex:1}.seed-choices{gap:3px}.seed-choices button{font-size:10px;padding:0}.seed-choices button img{width:42px;height:43px}.tools{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:4px}.tools button{min-height:48px;font-size:11px;border-radius:12px;flex-direction:row;gap:2px}.tools img{width:26px;height:29px}.tool-icon{font-size:24px;height:29px}.tools #undo{min-height:48px}.status-row{display:block;margin-top:auto;padding-top:4px;font-size:10px}#save-status{display:block;max-width:none;text-align:left;margin-top:3px}#tool-note{height:125px;min-height:125px;font-size:13px}.spot img{max-height:115px}.beds{left:16%;right:16%}}@media(prefers-reduced-motion:reduce){.butterfly{animation:none}#effect.show{animation:none}}

@media(orientation:portrait){.scene{background-image:url("/assets/garden/storybook-garden-portrait.png")}}

/* Storybook Garden visual theme; existing planting positions and controls retained. */
:root{--ink:#491c3d;--rose:#ab596f;--paper:#fffaf3;--lavender:#eee0ed}
header{background:radial-gradient(ellipse at 50% 0%,#fbe6e9 0,transparent 80%),var(--paper);border-bottom:1px solid #e9bdc6;box-shadow:0 2px 10px #491c3d08}
header h1{letter-spacing:-.7px}
header p{color:#674d60}
.round{background:#fff4ed;border-color:#e9bdc6;color:var(--ink);box-shadow:0 2px 0 #e6c7ca30}
.controls{background:linear-gradient(#fffaf3,#faeef0);border-color:#e9bdc6}
.seed-tabs button,.seed-choices button,.tools button{background:#fffaf3;border-color:#e9bdc6;color:var(--ink);box-shadow:0 2px 0 #e6c7ca25}
.seed-tabs button[aria-pressed=true]{background:var(--rose);color:white}
.seed-choices button[aria-pressed=true]{border-color:var(--rose);background:#fcecef}
.tools button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--rose);background:#fcecef}
.basket{background:#fffaf3ed;border-color:#e9bdc6;color:var(--ink)}
.status-row{color:#674d60}

/* Keep artwork and planting coordinates together at the image's natural ratio. */
.scene{background:radial-gradient(ellipse at center,#f5ead5,#fffaf3)!important}
.garden-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;isolation:isolate;border-radius:12px;box-shadow:0 0 0 1px #e9bdc640}
.garden-background{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:-1}

.garden-rotate{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));background:radial-gradient(ellipse at top,#fbe6e9,transparent 75%),#fffaf3;color:#491c3d;text-align:center;overflow:auto}
.garden-rotate>div{max-width:520px}
.rotate-phone-art{display:block;font:52px/1 system-ui,sans-serif;color:#ab596f;margin-bottom:12px}
.garden-rotate h2{font:400 clamp(23px,5vw,32px)/1.15 Georgia,serif;margin:0 0 12px}
.garden-rotate p{font:14px/1.5 system-ui,sans-serif;margin:8px 0;color:#674d60}
.garden-rotate p.rotate-reassurance{font-size:12px}

.header-spacer{width:46px;flex:none}.basket{cursor:pointer;color:var(--ink)}
#harvest-dialog{position:fixed;inset:0;margin:auto;width:min(480px,calc(100% - 28px));max-height:90dvh;overflow:auto;padding:26px 22px;border:1px solid #e9bdc6;border-radius:24px;background:#fffaf3;color:#491c3d;text-align:center;box-shadow:0 16px 70px #491c3d30}
#harvest-dialog::backdrop{background:#491c3d50}
#harvest-dialog h2{font:400 32px Georgia,serif;margin:0 20px 8px}
#harvest-dialog p{font:13px/1.5 system-ui,sans-serif;color:#674d60}
.harvest-close{position:absolute;right:10px;top:8px;border:0;background:none;width:40px;height:40px;font-size:28px}
.harvest-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.harvest-items>div{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 5px;border:1px solid #e9bdc6;border-radius:16px;background:#fceef0}
.harvest-items img{width:64px;height:64px;object-fit:contain}.harvest-items span{font:13px system-ui,sans-serif}.harvest-items strong{font:400 28px Georgia,serif}
.harvest-done{border:0;border-radius:30px;background:#ab596f;color:white;min-height:44px;padding:12px 22px;font:14px system-ui,sans-serif}
@media(orientation:landscape) and (max-height:600px){.header-spacer{width:40px}}

.garden-canvas{border-radius:0;box-shadow:none}