body { position: relative; }
.site-footer { position: relative; }
.site-footer .footer-top { padding-right: 68px; }
.footer-vine { position: absolute; top: 16px; right: 24px; z-index: 4; width: 56px; height: 64px; }
.vine-water { display: block; width: 56px; height: 64px; padding: 0; background: none; border: none; cursor: pointer; }
.vine-water svg { width: 56px; height: 64px; shape-rendering: crispEdges; image-rendering: pixelated; }
.vine-water:disabled { cursor: default; }
.vine-hint { position: absolute; right: 0; bottom: calc(100% + 5px); font-size: 10px; line-height: 1.3; white-space: nowrap; color: #46523b; opacity: 0; pointer-events: none; transition: opacity .2s; }
.vine-reset, .vine-peek { position: absolute; top: 63px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: none; border: none; color: #46523b; font-size: 17px; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .2s; }
.vine-reset { left: -16px; }
.vine-peek { right: -16px; }
.footer-vine:hover .vine-hint, .footer-vine:focus-within .vine-hint, .footer-vine:hover .vine-reset, .footer-vine:focus-within .vine-reset, .footer-vine.is-grown .vine-reset, .footer-vine.is-grown .vine-peek, .vine-reset:focus, .vine-peek:focus { opacity: 1; pointer-events: auto; }
.footer-vine button:hover, .footer-vine .vine-peek:hover { rotate: 0deg; scale: 1; transform: none; box-shadow: none; }
.vine-layer { --vine-cut: 0px; position: absolute; top: 0; right: 0; width: 76px; z-index: 3; pointer-events: none; overflow: hidden; opacity: .9; clip-path: inset(var(--vine-cut) 0 0 0); transition: clip-path 1.2s cubic-bezier(.2,.6,.3,1); }
.vine-layer svg { display: block; width: 100%; height: 100%; pointer-events: none; shape-rendering: crispEdges; image-rendering: pixelated; }
.vine-stem, .vine-stem-highlight, .vine-tendril { fill: none; stroke-linecap: butt; stroke-linejoin: miter; }
.vine-stem { stroke: #354f2d; stroke-width: 4; }
.vine-stem-highlight { stroke: #82a556; stroke-width: 2; }
.vine-tendril { stroke: #628241; stroke-width: 2; }
.vine-leaf { stroke: #354f2d; stroke-width: 2; stroke-linejoin: miter; }
.vine-top-bubble { position: absolute; top: 8px; right: 28px; z-index: 4; padding: 10px 14px; max-width: 190px; background: #fffef2; border: 2px solid #141414; border-radius: 0; box-shadow: 4px 4px #141414; font-family: monospace; font-size: 12px; font-weight: 700; line-height: 1.3; pointer-events: none; }
.vine-top-bubble:after { content: ''; position: absolute; right: -7px; top: 13px; width: 10px; height: 10px; background: #fffef2; border-right: 2px solid #141414; border-top: 2px solid #141414; rotate: 45deg; }
.vine-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .vine-layer, .vine-hint, .vine-reset, .vine-peek { transition: none; } }