@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=DM+Sans:wght@500;600;700&display=swap');

:root {
  color-scheme: light;
  --barn: #8f2f22;
  --barn-dark: #572017;
  --cream: #fff4d3;
  --paper: #f6dfae;
  --ink: #35261d;
  --blue: #315f78;
  --yellow: #e5a62b;
  --shadow: rgba(66, 35, 16, .28);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #d9b86f; font-family: "DM Sans", system-ui, sans-serif; }
button { font: inherit; }

.farm {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(330px, 540px) 1fr;
  align-items: center;
  gap: 0;
  padding: clamp(1rem, 4vw, 4rem);
  background:
    linear-gradient(90deg, rgba(255, 244, 211, .86) 0%, rgba(255, 244, 211, .58) 38%, rgba(255,255,255,0) 66%),
    url("assets/storybook-farm-grandpa-grandma.jpg") center / cover no-repeat;
  overflow: hidden;
  position: relative;
}

.calculator {
  position: relative;
  width: min(100%, 470px);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 4px solid #4c2518;
  border-radius: 26px 26px 20px 20px;
  background:
    linear-gradient(100deg, rgba(255,255,255,.08), transparent 32%),
    repeating-linear-gradient(0deg, #8f2f22 0, #8f2f22 22px, #872a1f 23px, #872a1f 25px);
  box-shadow: 0 20px 45px var(--shadow), inset 0 0 0 5px rgba(255,255,255,.1);
  z-index: 2;
  justify-self: end;
  transform: translateX(clamp(40px, 14vw, 210px));
}

.animal-runway {
  position: absolute;
  inset: auto 0 clamp(8px, 4vh, 46px);
  height: clamp(120px, 24vh, 230px);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.scene-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.showcase-panel {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  z-index: 20;
  width: min(94vw, 620px);
  padding: .75rem .9rem;
  border: 3px solid #4c2518;
  border-radius: 16px;
  color: #35261d;
  background: rgba(255, 244, 211, .96);
  box-shadow: 0 12px 30px rgba(55, 29, 15, .28);
  transform: translateX(-50%);
  backdrop-filter: blur(7px);
}
.showcase-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.showcase-heading strong { font-family: "Bree Serif", serif; font-size: 1.05rem; }
.showcase-count { font-size: .78rem; font-weight: 800; color: #7b4a2e; }
.showcase-label { margin: .2rem 0 .55rem; min-height: 2.5em; font-size: .92rem; line-height: 1.25; }
.showcase-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.showcase-button {
  min-height: 38px;
  border: 2px solid #6f3526;
  border-radius: 9px;
  color: #fff8df;
  background: #8f2f22;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.showcase-button:hover, .showcase-button:focus-visible { background: #a83b2c; outline: 3px solid rgba(49, 95, 120, .35); }
.showcase-button.secondary { color: #572017; background: #efd38e; }

.discovery-banner {
  position: absolute;
  top: max(.65rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  width: min(calc(100% - 1.5rem), 920px);
  min-height: 42px;
  padding: .4rem .75rem;
  border: 2px solid rgba(76, 37, 24, .7);
  border-radius: 999px;
  color: #4c2518;
  background: rgba(255, 244, 211, .94);
  box-shadow: 0 7px 18px rgba(55, 29, 15, .2);
  transform: translateX(-50%);
  backdrop-filter: blur(7px);
}
.discovery-banner p { margin: 0; text-align: center; font-size: .84rem; font-weight: 800; }
.returning-visitor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: #4c2518;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.returning-visitor button {
  min-height: 30px;
  padding: .25rem .65rem;
  border: 2px solid rgba(76, 37, 24, .52);
  border-radius: 999px;
  color: #4c2518;
  background: #efd38e;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}
.returning-visitor button:hover,
.returning-visitor button:focus-visible { background: #fff4d3; outline: 3px solid rgba(255,255,255,.28); }
.scene-cow.hammer {
  left: 51%;
  top: 29%;
  width: clamp(88px, 10vw, 158px);
  animation: hammerShuffle 5.8s cubic-bezier(.32,.7,.32,1) forwards;
}

@keyframes hammerShuffle {
  0%, 100% { opacity: 0; transform: translateY(35px) scale(.65); }
  8%, 92% { opacity: 1; }
  16% { transform: translate(-38px, 0) rotate(-7deg) scale(1); }
  28% { transform: translate(42px, -5px) rotate(7deg) scale(1.04); }
  40% { transform: translate(-48px, 0) rotate(-8deg) scaleX(-1); }
  52% { transform: translate(46px, -8px) rotate(8deg) scaleX(-1); }
  64% { transform: translate(-42px, 0) rotate(-7deg) scale(1); }
  76% { transform: translate(38px, -7px) rotate(7deg) scale(1.04); }
  88% { transform: translate(0, 0) rotate(0) scale(.96); }
}
.scene-event {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.scene-event img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 5px rgba(48, 28, 12, .22));
}
.scene-cow {
  left: 50%;
  top: 35%;
  width: clamp(58px, 6.5vw, 108px);
  transform-origin: 50% 100%;
  animation: pastureFistPump 5.2s ease-in-out forwards;
}
.scene-sheep {
  left: 59%;
  top: 37%;
  width: clamp(52px, 5.8vw, 94px);
  transform-origin: 50% 100%;
  animation: pastureMacarena 6.4s ease-in-out forwards;
}
.scene-fish {
  left: 38.5%;
  top: 34%;
  width: clamp(42px, 5vw, 80px);
  animation: pondLeap 3.6s cubic-bezier(.25,.72,.35,1) forwards;
}
.scene-birds,
.scene-bats {
  left: 0;
  top: 9%;
  width: clamp(180px, 25vw, 370px);
  animation: skyFly 7.5s linear forwards;
}
.scene-bats { top: 16%; animation-duration: 6.2s; filter: sepia(.25) brightness(.68); }
.scene-squirrel {
  left: 0;
  top: 0;
  z-index: 4;
  width: clamp(95px, 12vw, 165px);
  animation: squirrelVault 4.4s cubic-bezier(.32,.68,.32,1) forwards;
}
.scene-coyote {
  left: 0;
  bottom: 2%;
  z-index: 3;
  width: clamp(140px, 19vw, 250px);
  animation: wildlifeRun 5.1s linear forwards;
}
.scene-bear {
  right: 4%;
  bottom: -3%;
  z-index: 3;
  width: clamp(145px, 19vw, 260px);
  transform-origin: 50% 100%;
  animation: bearBoogie 6.5s ease-in-out forwards;
}

@keyframes pastureFistPump {
  0%, 100% { opacity: 0; transform: translateY(32px) scale(.45) rotate(-5deg); }
  12%, 86% { opacity: 1; }
  24%, 46%, 68% { transform: translateY(0) scale(1) rotate(-8deg); }
  34%, 57%, 79% { transform: translateY(-11px) scale(1.04) rotate(8deg); }
}
@keyframes pastureMacarena {
  0%, 100% { opacity: 0; transform: translateY(28px) scale(.5); }
  10%, 90% { opacity: 1; }
  20% { transform: translateY(0) rotate(-10deg) scale(1); }
  35% { transform: translateY(-7px) rotate(9deg) scale(1.03); }
  50% { transform: translateY(0) rotate(-7deg) scaleX(-1); }
  66% { transform: translateY(-8px) rotate(10deg) scaleX(-1); }
  82% { transform: translateY(0) rotate(-6deg) scale(1); }
}
@keyframes pondLeap {
  0%, 100% { opacity: 0; transform: translate(0, 34px) scale(.3) rotate(-32deg); }
  10%, 88% { opacity: 1; }
  42% { transform: translate(70px, -92px) scale(1) rotate(10deg); }
  70% { transform: translate(122px, -16px) scale(.72) rotate(42deg); }
}
@keyframes skyFly {
  0% { opacity: 0; transform: translateX(-110%) translateY(18px) scale(.72); }
  7%, 92% { opacity: .95; }
  48% { transform: translateX(46vw) translateY(-16px) scale(1); }
  100% { opacity: 0; transform: translateX(110vw) translateY(12px) scale(.78); }
}
@keyframes squirrelVault {
  0% { opacity: 0; transform: translate(-130px, 72vh) rotate(-12deg) scale(.55); }
  8% { opacity: 1; }
  43% { transform: translate(43vw, 18vh) rotate(8deg) scale(1); }
  55% { transform: translate(51vw, 28vh) rotate(-4deg) scale(.9); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate(108vw, 68vh) rotate(18deg) scale(.64); }
}
@keyframes wildlifeRun {
  0% { opacity: 0; transform: translateX(-110%) scale(.8); }
  7%, 93% { opacity: 1; }
  100% { opacity: 0; transform: translateX(110vw) scale(1); }
}
@keyframes bearBoogie {
  0%, 100% { opacity: 0; transform: translateY(105%) rotate(0deg) scale(.7); }
  12%, 88% { opacity: 1; }
  25% { transform: translateY(0) rotate(-8deg) scale(1); }
  40% { transform: translateY(-13px) rotate(8deg) scale(1.04); }
  55% { transform: translateY(0) rotate(-7deg) scaleX(-1); }
  72% { transform: translateY(-10px) rotate(8deg) scaleX(-1); }
}
.animal-reaction {
  --animal-size: clamp(92px, 13vw, 178px);
  --run-time: 5.2s;
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--animal-size);
  opacity: 0;
  will-change: transform, opacity;
  animation: animalCross var(--run-time) linear forwards;
}
.animal-reaction.reverse { animation-name: animalCrossReverse; }
.animal-reaction img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px rgba(48, 28, 12, .3));
  transform-origin: 50% 100%;
  animation: animalScamper .34s ease-in-out infinite alternate;
}
.animal-reaction.sneak img { animation-duration: .72s; }
.animal-reaction.dash { --run-time: 3.5s; }

@keyframes animalCross {
  0% { opacity: 0; transform: translateX(calc(-1 * var(--animal-size))); }
  5%, 94% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(100vw + var(--animal-size))); }
}
@keyframes animalCrossReverse {
  0% { opacity: 0; transform: translateX(calc(100vw + var(--animal-size))) scaleX(-1); }
  5%, 94% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(-1 * var(--animal-size))) scaleX(-1); }
}
@keyframes animalScamper {
  from { transform: translateY(3px) rotate(-2deg) scaleY(.97); }
  to { transform: translateY(-7px) rotate(2deg) scaleY(1.02); }
}

.rooster-pop {
  position: absolute;
  top: -92px;
  left: 70%;
  width: 142px;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 155px) scale(.22) rotate(-7deg);
  transform-origin: 50% 100%;
}
.rooster-pop img { display: block; width: 100%; height: auto; filter: drop-shadow(0 7px 6px rgba(61,31,12,.24)); }
.rooster-pop.show { animation: roosterPerch 9.2s cubic-bezier(.2,.75,.28,1) forwards; }

@keyframes roosterPerch {
  0% { opacity: 0; transform: translate(-50%, 155px) scale(.22) rotate(-6deg); }
  5% { opacity: 1; transform: translate(-50%, 16px) scale(.74) rotate(-2deg); }
  14% { transform: translate(-50%, 10px) scaleX(.82) scaleY(.7) rotate(5deg); }
  22% { transform: translate(-50%, 8px) scaleX(.68) scaleY(.78) rotate(-5deg); }
  34% { transform: translate(-50%, 10px) scale(.74) rotate(0deg); }
  43% { transform: translate(-50%, 10px) scaleX(.82) scaleY(.7) rotate(5deg); }
  52% { transform: translate(-50%, 8px) scaleX(.68) scaleY(.78) rotate(-4deg); }
  64% { transform: translate(-50%, 12px) scaleX(.78) scaleY(.72) rotate(2deg); }
  78% { transform: translate(-50%, 10px) scale(.74) rotate(0deg); }
  92% { opacity: 1; transform: translate(-50%, 12px) scale(.74) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, 155px) scale(.22) rotate(5deg); }
}

.brand { display: flex; gap: .9rem; align-items: center; color: var(--cream); margin-bottom: 1rem; text-shadow: 0 2px 0 var(--barn-dark); }
.brand-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--cream); font-size: 2.4rem; box-shadow: inset 0 0 0 4px var(--yellow), 0 3px 0 var(--barn-dark); }
.eyebrow { margin: 0 0 .15rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: 0; font-family: "Bree Serif", Georgia, serif; font-size: clamp(2.15rem, 6vw, 3.35rem); line-height: .82; font-weight: 400; letter-spacing: -.035em; }
h1 span { color: #ffd763; }

.screen-wrap { background: #d8dfb5; border: 4px solid #4f4934; border-radius: 14px; padding: .75rem 1rem .65rem; box-shadow: inset 0 3px 8px rgba(54,48,28,.35), 0 4px 0 var(--barn-dark); margin-bottom: 1rem; }
.screen-top { min-height: 26px; display: flex; align-items: center; justify-content: space-between; color: #545b3c; font-size: .9rem; font-weight: 700; }
.sound { min-width: 108px; min-height: 38px; border: 2px solid rgba(49,60,35,.38); border-radius: 10px; background: rgba(255,255,255,.58); color: #303924; font-weight: 800; cursor: pointer; }
.display { display: block; width: 100%; min-height: 58px; overflow: hidden; text-align: right; white-space: nowrap; text-overflow: ellipsis; color: #283222; font-family: "Bree Serif", Georgia, serif; font-size: clamp(2.6rem, 9vw, 4.5rem); line-height: 1; }
.hen-message { color: #596145; text-align: right; font-size: .78rem; font-weight: 700; }

.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.55rem, 2vw, .75rem); }
.key { min-height: clamp(54px, 9vh, 68px); border: 0; border-radius: 13px; color: #39251a; background: var(--cream); font-family: "Bree Serif", Georgia, serif; font-size: clamp(1.35rem, 4vw, 1.8rem); cursor: pointer; box-shadow: 0 5px 0 #b89252, 0 8px 8px rgba(50,25,12,.24); transition: transform .08s, box-shadow .08s, filter .15s; }
.key:hover { filter: brightness(1.06); }
.key:active, .key.pressed { transform: translateY(4px) rotate(-1deg); box-shadow: 0 1px 0 #b89252, 0 3px 4px rgba(50,25,12,.2); }
.key:focus-visible, .sound:focus-visible { outline: 4px solid #7fc6e4; outline-offset: 2px; }
.key-op { color: white; background: var(--blue); box-shadow: 0 5px 0 #173a4d, 0 8px 8px rgba(50,25,12,.24); }
.key-utility { background: #efc04e; box-shadow: 0 5px 0 #9e6818, 0 8px 8px rgba(50,25,12,.24); }
.key-equals { color: white; background: #4f842f; box-shadow: 0 5px 0 #285018, 0 8px 8px rgba(50,25,12,.24); }
.key-zero { grid-column: span 2; }
.character-card { align-self: end; justify-self: end; width: 220px; height: 210px; position: relative; z-index: 3; pointer-events: none; }
.egg { position: absolute; right: 15%; bottom: 8%; width: 110px; height: 140px; display: grid; place-items: center; border: 4px solid #8b683b; border-radius: 52% 48% 46% 54% / 62% 61% 39% 38%; background: radial-gradient(circle at 34% 28%, white 0 8%, #fff5d8 9% 58%, #e2c98e 100%); box-shadow: 0 14px 20px rgba(59,39,19,.25); opacity: 0; transform: translate(105px, -150px) rotate(0deg) scale(.58); transform-origin: 50% 58%; }
.egg span { color: var(--barn); font-family: "Bree Serif", serif; font-size: 3.5rem; }
.egg.laid { animation: rollFromCoop 1.8s cubic-bezier(.24,.72,.32,1) forwards; }
.cluck { position: absolute; top: 0; right: 0; padding: .7rem 1rem; border: 3px solid #4e2b1b; border-radius: 50%; color: var(--barn); background: var(--cream); font-family: "Bree Serif", serif; font-size: 1.4rem; opacity: 0; transform: rotate(8deg) scale(.5); }
.cluck.show { animation: cluck .9s ease-out; }

@keyframes rollFromCoop {
  0% { opacity: 0; transform: translate(105px, -150px) rotate(0deg) scale(.48); }
  10% { opacity: 1; transform: translate(92px, -137px) rotate(-55deg) scale(.55); }
  34% { opacity: 1; transform: translate(35px, -86px) rotate(-300deg) scale(.64); }
  60% { opacity: 1; transform: translate(-65px, -38px) rotate(-610deg) scale(.7); }
  82% { opacity: 1; transform: translate(-158px, -7px) rotate(-850deg) scale(.72); }
  90% { opacity: 1; transform: translate(-188px, -16px) rotate(-1015deg) scale(.68, .75); }
  96% { opacity: 1; transform: translate(-202px, -5px) rotate(-1060deg) scale(.72, .66); }
  100% { opacity: 1; transform: translate(-205px, -9px) rotate(-1080deg) scale(.7); }
}
@keyframes cluck { 20%, 75% { opacity: 1; transform: rotate(8deg) scale(1); } 100% { opacity: 0; transform: translateY(-20px) rotate(4deg) scale(.9); } }

@media (max-width: 820px) {
  .farm {
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    padding: 4.2rem .65rem clamp(235px, 35svh, 330px);
    background-size: auto 54%;
    background-position: right bottom;
  }
  .farm::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,235,184,.42) 0 48%, rgba(255,235,184,.05) 72%); }
  .calculator { width: min(100%, 440px); justify-self: center; transform: none; padding: .9rem; }
  .scene-layer { top: 0; bottom: auto; height: 156px; z-index: 12; overflow: visible; }
  .animal-runway { top: 0; bottom: auto; height: 156px; z-index: 11; overflow: visible; }
  .animal-reaction { --animal-size: clamp(96px, 25vw, 136px); --run-time: 6.2s; }
  .scene-cow { left: 54%; top: auto; bottom: 18%; }
  .scene-sheep { left: 69%; top: auto; bottom: 17%; }
  .scene-fish { left: 42%; top: auto; bottom: 17%; }
  .scene-birds, .scene-bats { top: 52%; }
  .scene-bear { right: -2%; bottom: -2%; }
  .rooster-pop { top: -36px; left: 73%; width: 106px; }
  .brand { margin-bottom: .65rem; }
  .brand-mark { width: 50px; height: 50px; font-size: 1.9rem; }
  h1 { font-size: clamp(1.9rem, 7vw, 2.55rem); }
  .screen-wrap { margin-bottom: .7rem; padding: .55rem .75rem; }
  .display { min-height: 48px; }
  .keys { gap: .48rem; }
  .key { min-height: clamp(42px, 6svh, 50px); }
  .character-card { display: none; }
}

@media (max-width: 480px) {
  .farm {
    min-height: 980px;
    justify-items: center;
    padding: 4.35rem .45rem 420px;
    background: #efd18b url("assets/storybook-farm-grandpa-grandma.jpg") right bottom / auto 410px no-repeat;
    overflow: hidden;
  }
  .farm::before { display: none; }
  .calculator {
    width: min(calc(100vw - .9rem), 370px);
    justify-self: center;
    padding: .58rem;
    border-width: 3px;
    border-radius: 18px 18px 14px 14px;
    box-shadow: 0 12px 28px rgba(66,35,16,.3), inset 0 0 0 3px rgba(255,255,255,.1);
  }
  .brand { gap: .45rem; margin-bottom: .42rem; }
  .brand-mark { width: 39px; height: 39px; flex: 0 0 39px; font-size: 1.45rem; box-shadow: inset 0 0 0 3px var(--yellow), 0 2px 0 var(--barn-dark); }
  .eyebrow { margin-bottom: .08rem; font-size: .54rem; letter-spacing: .06em; }
  h1 { font-size: clamp(1.45rem, 6.2vw, 1.75rem); line-height: .84; }
  .screen-wrap { margin-bottom: .48rem; padding: .36rem .48rem .3rem; border-width: 3px; border-radius: 10px; box-shadow: inset 0 2px 6px rgba(54,48,28,.3), 0 3px 0 var(--barn-dark); }
  .screen-top { min-height: 22px; font-size: .7rem; }
  .sound { min-width: 85px; min-height: 29px; padding: .18rem .35rem; border-radius: 8px; font-size: .7rem; }
  .display { min-height: 38px; font-size: clamp(2.1rem, 11vw, 3rem); }
  .hen-message { font-size: .65rem; }
  .keys { gap: .32rem; }
  .key { min-height: clamp(39px, 5.35svh, 45px); border-radius: 9px; font-size: 1.2rem; box-shadow: 0 3px 0 #b89252, 0 5px 6px rgba(50,25,12,.2); }
  .key-op { box-shadow: 0 3px 0 #173a4d, 0 5px 6px rgba(50,25,12,.2); }
  .key-utility { box-shadow: 0 3px 0 #9e6818, 0 5px 6px rgba(50,25,12,.2); }
  .key-equals { box-shadow: 0 3px 0 #285018, 0 5px 6px rgba(50,25,12,.2); }
  .discovery-banner {
    top: max(.3rem, env(safe-area-inset-top));
    width: calc(100% - .6rem);
    min-height: 0;
    padding: .28rem .4rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .3rem;
    border-radius: 12px;
  }
  .discovery-banner p { flex: 1 1 auto; text-align: left; font-size: .62rem; line-height: 1.12; }
  .returning-visitor { flex: 0 0 auto; flex-wrap: wrap; max-width: 132px; gap: .18rem; font-size: .6rem; line-height: 1; }
  .returning-visitor span { flex: 1 0 100%; text-align: center; }
  .returning-visitor button { min-height: 24px; padding: .12rem .38rem; border-width: 1px; font-size: .62rem; }
  .scene-layer { top: 456px; bottom: auto; height: 156px; z-index: 12; overflow: visible; }
  .animal-runway { top: 456px; bottom: auto; height: 156px; z-index: 11; overflow: visible; }
  .animal-reaction { --animal-size: clamp(104px, 31vw, 136px); --run-time: 6.2s; }
  .scene-cow { left: 12%; bottom: 0; }
  .scene-cow.hammer { left: 10%; top: auto; bottom: 0; width: 108px; }
  .scene-sheep { left: 42%; bottom: 0; }
  .scene-fish { left: 18%; bottom: 8%; }
  .scene-birds, .scene-bats { top: 5%; }
  .scene-bear { right: -4%; bottom: 0; }
  .scene-coyote { bottom: 0; }
  .rooster-pop { left: 70%; width: 88px; }
  .showcase-panel { padding: .6rem; }
  .showcase-controls { grid-template-columns: repeat(3, 1fr); }
  .showcase-button:last-child { grid-column: span 2; }
}

.farm.phone-animal-stage .scene-layer {
  bottom: auto;
  height: 156px;
  z-index: 12;
  overflow: visible;
}
.farm.phone-animal-stage .animal-runway {
  bottom: auto;
  height: 156px;
  z-index: 11;
  overflow: visible;
}
.farm.phone-animal-stage .animal-reaction {
  --animal-size: clamp(104px, 24vw, 142px);
  --run-time: 6.2s;
}
.farm.phone-animal-stage .scene-cow { top: auto; bottom: 0; }
.farm.phone-animal-stage .scene-cow.hammer { top: auto; bottom: 0; }
.farm.phone-animal-stage .scene-sheep { top: auto; bottom: 0; }
.farm.phone-animal-stage .scene-fish { top: auto; bottom: 8%; }
.farm.phone-animal-stage .scene-bear,
.farm.phone-animal-stage .scene-coyote { bottom: 0; }

@media (max-height: 900px) and (min-width: 821px) {
  .farm { align-items: center; padding: 3.9rem clamp(1rem, 3vw, 2rem) .75rem; }
  .calculator {
    width: min(100%, 430px);
    padding: .8rem 1rem;
    border-radius: 22px 22px 18px 18px;
    transform: translateX(clamp(28px, 10vw, 140px));
  }
  .brand { gap: .65rem; margin-bottom: .55rem; }
  .brand-mark { width: 48px; height: 48px; font-size: 1.85rem; }
  .eyebrow { font-size: .66rem; }
  h1 { font-size: 2.35rem; line-height: .86; }
  .screen-wrap { margin-bottom: .55rem; padding: .4rem .7rem .35rem; border-width: 3px; }
  .screen-top { min-height: 22px; font-size: .78rem; }
  .sound { min-width: 95px; min-height: 32px; font-size: .76rem; }
  .display { min-height: 44px; font-size: clamp(2.3rem, 6vw, 3.5rem); }
  .hen-message { font-size: .7rem; }
  .keys { gap: .42rem; }
  .key { min-height: clamp(40px, 6vh, 48px); font-size: 1.3rem; }
  .returning-visitor button { min-height: 28px; padding-block: .2rem; }
  .animal-runway { bottom: 4px; height: clamp(100px, 20vh, 160px); }
  .scene-cow { left: 11%; top: 46%; }
  .scene-sheep { left: 19%; top: 48%; }
  .scene-fish { left: 15%; top: 55%; }
  .rooster-pop { top: -34px; width: 100px; }
  .character-card { width: 180px; height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .animal-runway { display: none; }
  .scene-layer { display: none; }
}