*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f4f1e8;color:#354b3e;font:16px/1.5 Georgia,"Times New Roman",serif}.garden{max-width:960px;margin:auto;padding:26px 32px 30px}header{display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid #dad9ca;padding-bottom:16px;font:10px/1.5 Arial,sans-serif;letter-spacing:2px}.signature{color:#536953;text-decoration:none}.edition{color:#97927f}.intro{text-align:center;padding-top:28px}.eyebrow{font:10px Arial,sans-serif;letter-spacing:3px;color:#999079;margin:0 0 12px}h1{font-size:clamp(27px,4.8vw,42px);font-weight:normal;line-height:1.2;margin:0}.intro>p:last-child{color:#818977;font-size:15px;margin:12px 0 0}.canvas{display:block;width:100%;max-width:740px;margin:-12px auto -12px;border:0;padding:0;background:transparent;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}.canvas svg{display:block;width:100%;height:auto;overflow:visible}button:focus-visible,a:focus-visible{outline:2px solid #657d60;outline-offset:5px;border-radius:8px}footer{text-align:center}#garden-status{font-style:italic;color:#8b907e;font-size:14px;min-height:21px;margin:0 0 16px}.new-garden{background:#465e49;color:#fff9ed;border:1px solid #465e49;border-radius:28px;padding:12px 27px;min-height:46px;font:14px Arial,sans-serif;cursor:pointer;transition:background .2s,transform .2s}.new-garden:hover{background:#354c39;transform:translateY(-1px)}.new-garden span{font-size:20px;vertical-align:-1px;margin-right:8px}.hint{font:11px/1.5 Arial,sans-serif;color:#8a8f80;margin:14px 0 0}.notice{text-align:center}.stem{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.3s cubic-bezier(.28,.1,.28,1) forwards;animation-delay:var(--delay)}.unfold{opacity:0;transform:scale(.02);animation:unfold 1.8s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--delay)}@keyframes draw{to{stroke-dashoffset:0}}@keyframes unfold{to{opacity:1;transform:scale(1)}}@media(max-width:520px){.garden{padding:20px 16px 24px}header{font-size:9px;letter-spacing:1.3px}.edition{font-size:8px}.intro{padding-top:28px}.canvas{margin:4px auto 0}.hint{max-width:260px;margin:14px auto 0}}@media(prefers-reduced-motion:reduce){.stem{animation-duration:.8s}.unfold{transform:none;animation-name:fade;animation-duration:.8s}.new-garden{transition:none}}

@keyframes fade{to{opacity:1}}

/* Fit the entire composition into the available window, including controls. */
.garden{height:100vh;height:100dvh;min-height:320px;display:flex;flex-direction:column;padding:16px 24px;gap:8px}
header{flex:none;padding-bottom:10px}
.intro{flex:none;padding-top:10px}
.eyebrow{margin-bottom:6px}
h1{font-size:clamp(25px,4vw,36px)}
.intro>p:last-child{margin:6px 0 0}
.canvas{flex:1 1 0;min-height:0;width:100%;max-width:none;margin:0;display:flex;align-items:center;justify-content:center}
.canvas svg{width:100%;height:100%;max-height:100%;overflow:hidden}
footer{flex:none}
#garden-status{margin:0 0 8px}
.hint{margin:8px auto 0}
@media(max-height:650px){.garden{padding:10px 16px;gap:4px}.intro{padding-top:4px}.eyebrow,.intro>p:last-child,.hint{display:none}header{padding-bottom:6px}h1{font-size:25px}#garden-status{font-size:12px;margin-bottom:5px}.new-garden{padding:8px 22px;min-height:40px}}
@media(max-height:420px){header,.eyebrow,#garden-status{display:none}.garden{padding:6px 12px}h1{font-size:21px}.new-garden{min-height:34px;padding:5px 18px}}