#growth .growth-heading{max-width:800px;margin:0 auto 28px;text-align:center}
#growth .growth-heading h2{font-size:28px;line-height:1.4}
#growth .growth-heading p{font-size:14px;line-height:1.9}
#growth .growth-heading p>span{display:block}
#growth .growth-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center;padding:28px;background:#f6f8f5;border:1px solid #e0e7e0}
#growth .growth-art{min-width:0;background:#fff;border:1px solid #e5ebe4;overflow:hidden}
#growth .growth-svg{display:block;width:100%;height:auto;max-height:640px}
#growth .growth-art-note{margin:0;padding:0 20px 20px;font-size:12px;line-height:1.7;text-align:center;color:#607269}
#growth .growth-controls{min-width:0;display:flex;flex-direction:column}
#growth .growth-mode{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
#growth button{font-family:inherit;font-size:14px;font-weight:700;line-height:1.5;border:1px solid #afc1b4;border-radius:3px;padding:9px 14px;cursor:pointer;color:#345b4b;background:white;min-height:44px}
#growth button[aria-pressed=true]{background:#315e49;border-color:#315e49;color:white}
#growth button:hover{border-color:#234d38}
#growth button:focus-visible,#growth input:focus-visible{outline:3px solid #cd9d46;outline-offset:3px}
#growth .growth-player{order:-1;margin-bottom:20px;padding:0 0 18px;border-bottom:1px solid #d7e2d8}
#growth .growth-player-buttons{display:flex;gap:8px}
#growth .growth-play{min-width:104px}
#growth .growth-scrub-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin:15px 0 4px;font-size:13px;line-height:1.7;color:#607269}
#growth output{font-weight:700;color:#315e49}
#growth input[type=range]{display:block;width:100%;height:28px;margin:0;accent-color:#315e49;cursor:pointer}
#growth .growth-steps{display:block;list-style:none;margin:0;padding:0}
#growth .growth-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:13px 0;border:0;border-bottom:1px solid #dee7de;opacity:.65}
#growth .growth-steps li.is-active{opacity:1}
#growth .growth-steps li.is-past{opacity:.85}
#growth .growth-steps li>span{width:30px;height:30px;display:grid;place-items:center;font:700 13px/1 Arial,sans-serif;color:#45684f;background:#e9eee6}
#growth .growth-steps li.is-active>span{background:#315e49;color:#fff}
#growth .growth-steps strong{font-size:15px;line-height:1.6;color:#304b3a}
#growth .growth-steps p{font-size:14px;line-height:1.7;color:#586c60;margin:3px 0 0}
/* The player owns animation state, with no legacy looping keyframes. */
#growth .root-path,#growth .vine-path,#growth .tendril-path,#growth .growth-leaf,#growth .growth-flower,#growth .growth-fruit,#growth .fruit-stem{animation:none;transition:none;opacity:1;transform:none}
#growth .root-path{stroke:#dfedda;stroke-width:2.7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--roots,0))}
#growth .vine-path{fill:none;stroke:#60844c;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--vine,0))}
#growth .vine-upper{stroke-dashoffset:calc(1 - var(--upper,0))}
#growth .tendril-path{stroke:#759658;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--tendrils,0))}
#growth .growth-leaf{fill:#668f51;stroke:none;transform-box:view-box;transform-origin:0 0}
#growth .growth-leaf>path{fill:none;stroke:#b4ce8f;stroke-width:1.2}
#growth .growth-flower{fill:#f3cc57;stroke:#d0ac43;stroke-width:1;transform-box:view-box;transform-origin:0 0}
#growth .growth-flower circle{fill:#a18336;stroke:none}
#growth .growth-fruit{transform-box:view-box;transform-origin:0 0}
#growth .growth-fruit ellipse{fill:#a8b57a;stroke:#7e9160;stroke-width:2}
#growth .growth-fruit path{fill:none;stroke:#e4dfb3;stroke-width:1.7}
#growth .growth-canopy{pointer-events:none;overflow:visible}
#growth .canopy-vine{fill:none;stroke:#628849;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#growth .canopy-vine-back{stroke:#527c50;stroke-width:8;opacity:.48}
#growth .canopy-branch{fill:none;stroke:#638b52;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
#growth .canopy-leaf{transform-box:view-box;transform-origin:0 0;opacity:0}
#growth .canopy-leaf-body{fill:#6d9859;stroke:#466f48;stroke-width:1}
#growth .canopy-leaf-vein{fill:none;stroke:#c1d59e;stroke-width:1.15;stroke-linecap:round}
#growth .canopy-fruit{transform-box:view-box;transform-origin:0 0}
#growth .canopy-fruit .fruit-stem{stroke:#527a49;stroke-width:2.5;fill:none;stroke-dasharray:1;stroke-dashoffset:1}
#growth .canopy-flower{fill:#f4cf62;stroke:#c69d3e;stroke-width:1;transform-box:view-box;transform-origin:0 0}
#growth .canopy-flower circle{fill:#a77d2c;stroke:none}
#growth .canopy-melon{opacity:0;transform-box:view-box;transform-origin:0 0}
#growth .canopy-melon ellipse{fill:url(#canopy-fruit);stroke:#5c784e;stroke-width:1.8}
#growth .canopy-melon path{fill:none;stroke:#e8e6b7;stroke-width:1.1;stroke-linecap:round}
#growth .fruit-stem{stroke:#60844c;stroke-width:4;fill:none;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--flower,0))}
#growth[data-mode=basic] .growth-upper-only{visibility:hidden}
#growth[data-mode=extended] .growth-crop-node{transform:translateY(-180px)}
#growth .growth-view-switch{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 24px}
#growth .growth-panel{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;padding:28px;gap:32px;background:#f5f6f1}
#growth .growth-art{border:0;background:#fff}
#growth .diagram-caption{font-size:13px;line-height:1.7;letter-spacing:.04em;margin:0;padding:22px 20px 0;color:#5b6b60;text-align:center}
#growth .root-detail-svg{width:100%;height:auto;display:block}
#growth .growth-shared-defs{position:absolute;overflow:hidden;pointer-events:none}
#growth .root-callout circle{fill:#fff;stroke:#49684e;stroke-width:2}
#growth .root-callout text{fill:#315e49;font:700 27px Arial,sans-serif;text-anchor:middle;dominant-baseline:central}
#growth .detail-root{fill:none;stroke:#977646;stroke-width:5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--detail-main,0))}
#growth .detail-root-side{stroke-width:3.5;stroke-dashoffset:calc(1 - var(--detail-side,0))}
#growth .detail-root-fine{stroke-width:2.2;stroke-dashoffset:calc(1 - var(--detail-fine,0))}
#growth .root-motion-caption{font-size:16px;font-weight:700;line-height:1.7;text-align:center;color:#315e49;padding:14px 20px;margin:0 18px 20px;background:#f1f6ee}
#growth .root-explanation h3{font-size:23px;line-height:1.6;margin:10px 0 14px;text-wrap:balance}
#growth .root-explanation>p:not(.eyebrow){font-size:14px;line-height:1.9;margin:0 0 20px;color:#526255}
#growth .root-parts{list-style:none;margin:0 0 24px;padding:0}
#growth .root-parts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid #dce3d9}
#growth .root-parts li>span{width:28px;height:28px;display:grid;place-items:center;border:1px solid #78917c;border-radius:50%;font:700 14px Arial,sans-serif;color:#315e49;background:#fff}
#growth .root-parts strong{font-size:15px;line-height:1.7}
#growth .root-parts p{font-size:14px;line-height:1.7;margin:3px 0 0;color:#586c60}
#growth .root-mode-note{font-size:12px;line-height:1.7;color:#607269;margin:-7px 0 16px}
#growth[data-view=roots] .growth-steps{display:none}
#growth[data-view=plant] .root-explanation,#growth[data-view=plant] .root-mode-note{display:none}
#growth [hidden]{display:none!important}
@media(max-width:850px){#growth .growth-panel{grid-template-columns:1fr;gap:25px}#growth .growth-art{width:100%;max-width:530px;margin:auto}#growth .growth-controls{width:100%;max-width:650px;margin:auto}#growth .growth-svg{max-height:570px}}
@media(max-width:620px){#growth .growth-panel{padding:14px;gap:24px}#growth .growth-heading h2{font-size:23px}#growth .growth-heading br{display:none}#growth .growth-art-note{padding:0 12px 14px}#growth .growth-mode{gap:6px}#growth button{padding:9px 12px}}
@media(max-width:620px){#growth .growth-panel{padding:0;background:transparent;border:0}#growth .growth-art{border:1px solid #e0e7e0}#growth .root-explanation h3{font-size:22px}#growth .growth-controls{padding:20px;background:#f5f6f1}#growth .root-motion-caption{font-size:14px;margin:0 12px 16px;padding:10px}#growth .diagram-caption{font-size:12px;padding:16px 8px 0}}