/* Sprout, as drawn.

   One drawing for every Sprout on the site: the one in the app icon. Every
   landmark is the iOS app's (SproutSprite.swift, traced row by row from the
   icon's sprout.png), as a fraction of a square box: a sharp triangle whose
   top is painted dark, dark wedges in its two bottom corners, the lower tier
   and the soil showing under it, two large white eyes that overhang the
   silhouette with their pupils flush right, and an open half-disc smile.
   The numbers are not styling choices; do not round them for tidiness.

   It is built on the markup every page already writes (`.sprout-mascot >
   .sprout-arm + .sprout-face > .sprout-smile`), so nothing that renders
   Sprout had to change, and from CSS only: the error page allows no script
   and no data: images.

   Moods are classes on the mascot (happy, thinking, shocked, excited, proud,
   pointing, and sad). Moments are classes too, added and removed by
   scripts/sprout-life.js and scripts/sprout-guide.js: `sprout-tickled` (a
   giggle), `sprout-blinks`, `sprout-twirls`, `sprout-walks`. Where Sprout
   looks is two numbers, `--sprout-look-x` and `--sprout-look-y`, which
   sprout-life.js moves toward the pointer; the pupils follow them.

   Loaded after layout.css and index.html's own rules (which drew an older
   Sprout and still set its sizes, so everything is reset here), and complete
   without them: the error page loads only this and legal.css. Transform and
   opacity do the moving. Under reduced motion every moment is a still pose. */

@property --sprout-look-x { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --sprout-look-y { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

.sprout-mascot {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--sprout-size, 64px);
    height: var(--sprout-size, 64px);
    overflow: visible;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    /* The icon's colours, sampled from sprout.png: the trunk from just under
       its dark tip to its base, the lower tier, the dark trim, the pupils. */
    --sprout-leaf: #b8ed76;
    --sprout-leaf-shade: #8dc55b;
    --sprout-skirt: #87c058;
    --sprout-bark: #322315;
    --sprout-pupil: #212936;
    --sprout-tear: #7cc4f2;
    --sprout-blush: rgba(238, 112, 104, 0.78);
    /* Where the pupils sit, as a share of how far they can travel in the
       white (-100% to 100%): the icon rests flush right. sprout-life.js moves
       --sprout-look-x around -13% (it centred the first drawing's eyes); from
       there 7% is a pupil's whole travel. */
    --sprout-gaze-x: clamp(-100%, 100% + (var(--sprout-look-x) + 13%) * 14.3, 100%);
    --sprout-gaze-y: clamp(-100%, var(--sprout-look-y) * 8.33, 100%);
    transition: --sprout-look-x 260ms cubic-bezier(0.22, 1, 0.36, 1), --sprout-look-y 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The body, traced from the icon (sprout.png, row by row): a sharp triangle,
   apex at 49.7% across and 11.2% down, base at 78% from 13.9% to 88.1% (the
   icon leans a touch to the right); its top painted dark to 18.6% (the same
   triangle, not a separate cap) and dark wedges in its bottom corners from
   72.2% down. Under it the lower tier flares in straight lines from 32.8%-
   69.3% across to 24.5%-77.6% at 92.2%, and rounds off at 96.6%: green down
   to an arc (86% at its sides, 89% in the middle), the soil's dark below.
   The box runs from the apex to the soil's foot. */
.sprout-mascot::before {
    content: "";
    position: absolute;
    left: 13.9%;
    top: 11.2%;
    width: 74.2%;
    height: 85.4%;
    background:
        linear-gradient(180deg, var(--sprout-bark) 8.67%, transparent 8.67%),
        linear-gradient(66.7deg, var(--sprout-bark) 52.6%, transparent 52.6%) 0 76.63% / 12% 6.79% no-repeat,
        linear-gradient(-66.7deg, var(--sprout-bark) 52.6%, transparent 52.6%) 100% 76.63% / 12% 6.79% no-repeat,
        radial-gradient(40.43% 58.26% at 50% 2.48%, var(--sprout-skirt) calc(100% - 0.6px), transparent 100%) 0 100% / 100% 21.78% no-repeat,
        linear-gradient(180deg, transparent 84%, var(--sprout-bark) 84%),
        linear-gradient(180deg, var(--sprout-leaf) 8.67%, var(--sprout-leaf-shade) 78.22%);
    clip-path: polygon(48.25% 0, 100% 78.22%, 74.66% 78.22%, 85.85% 94.85%, 83.02% 96.02%, 81.67% 96.72%,
        80.19% 97.31%, 78.17% 97.89%, 76.01% 98.48%, 73.18% 99.06%, 68.33% 99.77%, 50% 100%,
        26.95% 99.77%, 24.12% 99.06%, 21.29% 98.48%, 19.14% 97.89%, 17.79% 97.31%, 16.31% 96.72%,
        14.96% 96.02%, 14.29% 94.85%, 25.47% 78.22%, 0 78.22%);
    /* The old body's border, radius and shadow, which index.html and the app
       header's logo still give it. */
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
}

/* Two feet, seen only when Sprout walks, just under the soil. */
.sprout-mascot::after {
    content: "";
    position: absolute;
    left: 35%;
    top: 99%;
    width: 13%;
    height: 7%;
    border-radius: 50%;
    background: var(--sprout-bark);
    box-shadow: calc(var(--sprout-size, 64px) * 0.19) 0 0 var(--sprout-bark);
    opacity: 0;
    pointer-events: none;
}

/* The face covers the whole box, so the eyes and the smile sit where the
   icon has them. */
.sprout-mascot .sprout-face {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
}

/* The eyes, white and large, overhanging the body: 15.6% and 16.1% wide,
   13.5% tall, at slightly different heights as in the icon, each with a
   pupil 8.3% by 12% that fills most of it. */
.sprout-mascot .sprout-face::before,
.sprout-mascot .sprout-face::after {
    content: "";
    position: absolute;
    height: 13.5%;
    aspect-ratio: auto;
    border-radius: 50%;
    /* A hairline in the trim colour. The icon's eyes sit on its red plate;
       where they overhang onto the site's cream (the dock, the dialogs) a
       bare white melted into it. */
    box-shadow: 0 0 0 max(0.5px, calc(var(--sprout-size, 64px) * 0.011)) rgba(50, 35, 21, 0.3);
    translate: none;
    transform-origin: 50% 50%;
}

.sprout-mascot .sprout-face::before {
    left: 25.5%;
    right: auto;
    top: 39.6%;
    width: 15.6%;
    background:
        radial-gradient(26.6% 44.4% at calc(50% + var(--sprout-gaze-x) * 0.234) calc(50% + var(--sprout-gaze-y) * 0.056),
            var(--sprout-pupil) calc(100% - 0.6px), transparent 100%),
        #fff;
}

.sprout-mascot .sprout-face::after {
    left: 59.4%;
    right: auto;
    top: 39.1%;
    width: 16.1%;
    background:
        radial-gradient(25.8% 44.4% at calc(50% + var(--sprout-gaze-x) * 0.242) calc(50% + var(--sprout-gaze-y) * 0.056),
            var(--sprout-pupil) calc(100% - 0.6px), transparent 100%),
        #fff;
}

/* The open smile: a true half-disc, flat side up, 20.8% wide. */
.sprout-mascot .sprout-smile {
    position: absolute;
    left: 40.6%;
    top: 71.9%;
    bottom: auto;
    width: 20.8%;
    height: 10.4%;
    border: 0;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: var(--sprout-bark);
    transform: none;
    transform-origin: 50% 0;
}

/* Cheeks, under the eyes, blushing only while Sprout giggles. */
.sprout-mascot .sprout-smile::before,
.sprout-mascot .sprout-smile::after {
    content: "";
    position: absolute;
    top: -172%;
    width: 42.6%;
    aspect-ratio: 1.5;
    border-radius: 50%;
    background: var(--sprout-blush);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
}

.sprout-mascot .sprout-smile::before { left: -56.3%; right: auto; }
.sprout-mascot .sprout-smile::after { left: 107.8%; right: auto; }

/* The icon has no arm: this one comes out only to point or wave. */
.sprout-mascot .sprout-arm {
    position: absolute;
    z-index: 2;
    left: 74.5%;
    right: auto;
    top: 55%;
    width: 24%;
    height: 6%;
    border-radius: 999px;
    background: var(--sprout-bark);
    opacity: 0;
    transform-origin: left center;
    transform: rotate(-22deg);
}

/* ── Moods ───────────────────────────────────────────────────────────────── */
/* `.sprout-thinking` is also the chat's row of typing dots, whose rule pulses
   every span inside it as a red dot. The parts above set their own sizes and
   colours over it; the pulse and the row's spacing are undone here. */
.sprout-mascot.sprout-thinking {
    gap: 0;
    min-width: 0;
    padding: 0;
    /* Looking up and to the left. */
    --sprout-look-x: -27%;
    --sprout-look-y: -12%;
}

.sprout-mascot.sprout-thinking span { animation: none; }

.sprout-mascot.sprout-thinking .sprout-smile {
    left: 45.04%;
    top: 72.5%;
    width: 12%;
    height: 6%;
    transform: rotate(-8deg);
}

/* Shocked: the eyes open wider, the pupils in the middle, the mouth an O. */
.sprout-mascot.sprout-shocked { --sprout-look-x: -20%; --sprout-look-y: 0%; }

.sprout-mascot.sprout-shocked .sprout-face::before,
.sprout-mascot.sprout-shocked .sprout-face::after {
    scale: 1.12;
}

.sprout-mascot.sprout-shocked .sprout-smile {
    left: 46.54%;
    top: 72%;
    width: 9%;
    height: 9%;
    border: 0;
    border-radius: 50%;
}

.sprout-mascot.sprout-proud .sprout-smile,
.sprout-mascot.sprout-excited .sprout-smile {
    left: 38.54%;
    width: 25%;
    height: 12.5%;
}

/* Sad, for the error pages and the app's "Oops" Sprout: eyes cast down, the
   half-disc turned over into a frown, and one tear from under the left eye. */
.sprout-mascot.sprout-sad { --sprout-look-x: -20%; --sprout-look-y: 12%; }

.sprout-mascot.sprout-sad .sprout-smile {
    left: 43.04%;
    top: 75%;
    width: 16%;
    height: 8%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.sprout-mascot.sprout-sad .sprout-smile::before { opacity: 0; }

.sprout-mascot.sprout-sad .sprout-smile::after {
    top: -281%;
    left: -101%;
    width: 43.75%;
    aspect-ratio: 0.78;
    border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
    background: linear-gradient(#bfe6ff, var(--sprout-tear));
    opacity: 0;
}

/* ── Life ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    /* A blink, asked for by the script at uneven gaps (and by the tickle). */
    .sprout-mascot.sprout-blinks .sprout-face::before,
    .sprout-mascot.sprout-blinks .sprout-face::after {
        animation: sproutBlinkOnce 180ms ease-in-out both;
    }

    /* The sad Sprout breathes slowly, sighs, and lets one tear go. */
    .sprout-mascot.sprout-sad.sprout-alive {
        animation: sproutSigh 5.6s ease-in-out infinite;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-sad.sprout-alive .sprout-smile::after {
        animation: sproutTear 5.6s ease-in infinite;
    }

    .sprout-mascot.sprout-sad.sprout-alive .sprout-face::before,
    .sprout-mascot.sprout-sad.sprout-alive .sprout-face::after {
        animation: sproutSadBlink 5.6s ease-in-out infinite;
    }

    /* Tickled: a giggle. Eyes shut into happy arcs, the mouth opens wide, the
       cheeks blush, and the whole of Sprout squirms from the feet. */
    .sprout-mascot.sprout-tickled {
        animation: sproutGiggle 720ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-twirls {
        animation: sproutTwirl 760ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-walks {
        animation: sproutWaddle 360ms ease-in-out infinite;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-walks::after {
        opacity: 1;
        animation: sproutSteps 360ms ease-in-out infinite;
    }

    /* Moments a resting Sprout has now and then (sprout-life.js): a hop, a
       zoom in and out, and a happy shimmy. */
    .sprout-mascot.sprout-hops {
        animation: sproutHop 700ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-pops {
        animation: sproutPop 620ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-wiggles {
        animation: sproutGiggle 720ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }

    /* More of them (owner, 2026-10-11: "not just waving"): a look round, a
       nod, a stretch with the eyes shut, a lean to peek, a think, a little
       dance and a start. Where the eyes look is animated here too: an
       animation outranks the look the pointer writes inline. */
    .sprout-mascot.sprout-looks { animation: sproutLookAround 1600ms ease-in-out both; }

    .sprout-mascot.sprout-nods {
        animation: sproutNod 860ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-stretches {
        animation: sproutStretch 1000ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-stretches .sprout-face::before,
    .sprout-mascot.sprout-stretches .sprout-face::after {
        animation: sproutEyesShut 1000ms ease-in-out both;
    }

    .sprout-mascot.sprout-leans {
        animation: sproutLean 1260ms cubic-bezier(0.45, 0, 0.25, 1) both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-ponders {
        animation: sproutPonder 1760ms ease-in-out both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-bounces {
        animation: sproutBounce 920ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }

    .sprout-mascot.sprout-surprised {
        animation: sproutStartle 960ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
        transform-origin: 50% 100%;
    }
}

/* The faces two of the moments make: thinking (the small mouth to one side)
   and a start (wide eyes, a small O). */
.sprout-mascot.sprout-ponders .sprout-smile {
    left: 45.04%;
    top: 72.5%;
    width: 12%;
    height: 6%;
    transform: rotate(-8deg);
}

.sprout-mascot.sprout-surprised .sprout-face::before,
.sprout-mascot.sprout-surprised .sprout-face::after { scale: 1.12; }

.sprout-mascot.sprout-surprised .sprout-smile {
    left: 46.54%;
    top: 72%;
    width: 9%;
    height: 9%;
    border-radius: 50%;
}

/* Happy arcs for eyes, at each eye's own height. */
.sprout-mascot.sprout-tickled .sprout-face::before,
.sprout-mascot.sprout-tickled .sprout-face::after {
    height: 7%;
    background: none;
    box-shadow: none;
    border-top: max(1.5px, calc(var(--sprout-size, 64px) * 0.035)) solid var(--sprout-pupil);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.sprout-mascot.sprout-tickled .sprout-face::before { top: 42.85%; }
.sprout-mascot.sprout-tickled .sprout-face::after { top: 42.33%; }

.sprout-mascot.sprout-tickled .sprout-smile { transform: scale(1.22); }

.sprout-mascot.sprout-tickled .sprout-smile::before,
.sprout-mascot.sprout-tickled .sprout-smile::after {
    opacity: 1;
    animation: none;
}

@keyframes sproutBlinkOnce {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

@keyframes sproutSadBlink {
    0%, 44%, 50%, 100% { transform: scaleY(1); }
    47% { transform: scaleY(0.1); }
}

@keyframes sproutSigh {
    0%, 100% { transform: scale(1, 1); }
    38% { transform: scale(0.985, 1.03); }
    58% { transform: scale(1.02, 0.955); }
    74% { transform: scale(1, 1); }
}

@keyframes sproutTear {
    0%, 52% { opacity: 0; transform: translateY(0) scale(0.5); }
    60% { opacity: 1; transform: translateY(0) scale(1); }
    86% { opacity: 1; transform: translateY(260%) scale(1); }
    94%, 100% { opacity: 0; transform: translateY(330%) scale(0.8); }
}

@keyframes sproutGiggle {
    0% { transform: rotate(0deg) scale(1, 1); }
    12% { transform: rotate(-9deg) scale(1.08, 0.9); }
    28% { transform: rotate(8deg) scale(0.95, 1.06); }
    44% { transform: rotate(-7deg) scale(1.05, 0.94); }
    60% { transform: rotate(6deg) scale(0.97, 1.04); }
    78% { transform: rotate(-3deg) scale(1.02, 0.98); }
    100% { transform: rotate(0deg) scale(1, 1); }
}

/* A hop with a turn: the flat drawing flips through its edge and back. */
@keyframes sproutTwirl {
    0% { transform: translateY(0) scale(1, 1); }
    14% { transform: translateY(4%) scale(1.1, 0.86); }
    38% { transform: translateY(-46%) scale(-0.2, 1.08); }
    56% { transform: translateY(-52%) scale(-1, 1.04); }
    74% { transform: translateY(-30%) scale(0.2, 1.06); }
    90% { transform: translateY(3%) scale(1.08, 0.9); }
    100% { transform: translateY(0) scale(1, 1); }
}

/* Crouch, up, a squash on landing. */
@keyframes sproutHop {
    0% { transform: translateY(0) scale(1, 1); }
    18% { transform: translateY(0) scale(1.12, 0.86); }
    44% { transform: translateY(-34%) scale(0.92, 1.1); }
    60% { transform: translateY(-38%) scale(1, 1); }
    82% { transform: translateY(0) scale(1.12, 0.88); }
    100% { transform: translateY(0) scale(1, 1); }
}

/* Zooms toward you and settles back. */
@keyframes sproutPop {
    0% { transform: scale(1); }
    34% { transform: scale(1.24); }
    60% { transform: scale(0.94); }
    80% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* -13% is looking straight out (see --sprout-gaze-x). */
@keyframes sproutLookAround {
    0%, 100% { --sprout-look-x: -13%; --sprout-look-y: 0%; }
    18%, 40% { --sprout-look-x: -27%; --sprout-look-y: -4%; }
    58%, 82% { --sprout-look-x: 1%; --sprout-look-y: 2%; }
}

/* Two dips of the head: "yes, yes". */
@keyframes sproutNod {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    22% { transform: translateY(3%) scale(1.04, 0.93); }
    42% { transform: translateY(-2%) scale(0.98, 1.03); }
    62% { transform: translateY(3%) scale(1.04, 0.93); }
    82% { transform: translateY(0) scale(1, 1); }
}

/* Crouch, stretch up tall, settle. */
@keyframes sproutStretch {
    0%, 100% { transform: scale(1, 1); }
    24% { transform: scale(1.1, 0.88); }
    52%, 66% { transform: scale(0.9, 1.16); }
    84% { transform: scale(1.04, 0.97); }
}

@keyframes sproutEyesShut {
    0%, 36%, 80%, 100% { transform: scaleY(1); }
    46%, 70% { transform: scaleY(0.12); }
}

/* Over to one side to peek at something, hold, and back. */
@keyframes sproutLean {
    0%, 100% { transform: rotate(0deg) translateX(0); --sprout-look-x: -13%; }
    28%, 72% { transform: rotate(9deg) translateX(4%); --sprout-look-x: 1%; }
}

/* A think: eyes up and to the side, head tipped, then a small "aha" hop. */
@keyframes sproutPonder {
    0%, 100% { transform: rotate(0deg) translateY(0); --sprout-look-x: -13%; --sprout-look-y: 0%; }
    16%, 70% { transform: rotate(-5deg) translateY(0); --sprout-look-x: -27%; --sprout-look-y: -12%; }
    82% { transform: rotate(0deg) translateY(-9%); --sprout-look-x: -13%; --sprout-look-y: 0%; }
    92% { transform: rotate(0deg) translateY(0) scale(1.05, 0.95); }
}

/* Two quick bounces, side to side. */
@keyframes sproutBounce {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    16% { transform: translateY(-14%) rotate(-7deg) scale(0.96, 1.05); }
    32% { transform: translateY(0) rotate(0deg) scale(1.08, 0.92); }
    50% { transform: translateY(-14%) rotate(7deg) scale(0.96, 1.05); }
    66% { transform: translateY(0) rotate(0deg) scale(1.08, 0.92); }
    82% { transform: translateY(0) scale(1, 1); }
}

/* A start: a jump back with the eyes wide. */
@keyframes sproutStartle {
    0%, 100% { transform: translate(0, 0) scale(1, 1); --sprout-look-x: -13%; }
    14% { transform: translate(-6%, -12%) scale(0.95, 1.06); --sprout-look-x: -20%; }
    30% { transform: translate(-6%, 0) scale(1.06, 0.94); }
    70% { transform: translate(-6%, 0) scale(1, 1); --sprout-look-x: -20%; }
}

@keyframes sproutWaddle {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    25% { transform: rotate(0deg) translateY(-5%); }
    50% { transform: rotate(5deg) translateY(0); }
    75% { transform: rotate(0deg) translateY(-5%); }
}

/* The feet take turns: as the left one lifts, the right (its shadow) is
   planted, and the other way round. */
@keyframes sproutSteps {
    0%, 100% {
        transform: translateY(0);
        box-shadow: calc(var(--sprout-size, 64px) * 0.19) calc(var(--sprout-size, 64px) * -0.028) 0 var(--sprout-bark);
    }
    50% {
        transform: translateY(-40%);
        box-shadow: calc(var(--sprout-size, 64px) * 0.19) calc(var(--sprout-size, 64px) * 0.028) 0 var(--sprout-bark);
    }
}

/* ── Touching Sprout ─────────────────────────────────────────────────────── */
/* On the public pages a Sprout can be tickled (scripts/sprout-life.js). It
   says so to the hand only: it stays decoration to a keyboard and a screen
   reader, and a Sprout inside a button or a link is that control's. */
:is(.public-home, .otf-sg) .sprout-mascot {
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.public-home :is(a, button, [role="button"]) .sprout-mascot { cursor: inherit; }

/* What Sprout says. Placed by the script above the mascot it belongs to;
   on the error page it is in the markup, shown by legal.css. */
.sprout-says {
    position: absolute;
    z-index: 10000;
    padding: 8px 14px 9px;
    border: 1.5px solid rgba(140, 21, 21, 0.18);
    border-radius: 16px;
    background: #fffdf0;
    box-shadow: 0 12px 28px rgba(20, 12, 6, 0.32);
    color: #2f251c;
    font: 850 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: sproutSaysIn 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Under Sprout instead, when there is no room above. */
.sprout-says.is-below { transform-origin: 50% 0; }

.sprout-says.is-below::after {
    top: -6px;
    bottom: auto;
    transform: rotate(225deg);
}

.sprout-says::after {
    content: "";
    position: absolute;
    left: calc(50% - 5px + var(--sprout-says-tail, 0px));
    bottom: -6px;
    width: 9px;
    height: 9px;
    border-right: inherit;
    border-bottom: inherit;
    background: inherit;
    transform: rotate(45deg);
}

@keyframes sproutSaysIn {
    0% { opacity: 0; transform: translateY(6px) scale(0.7); }
    14% { opacity: 1; transform: translateY(-2px) scale(1.04); }
    22%, 82% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
    .sprout-says { animation: sproutSaysStill 1500ms linear both; }

    @keyframes sproutSaysStill {
        0%, 90% { opacity: 1; }
        100% { opacity: 0; }
    }
}