/* Original, scalable grove artwork. The host is one viewport; its world is two. */
.grove-scene,
.grove-scene * { box-sizing: border-box; }
.grove-scene {
  --grove-travel-duration: 900ms;
  --grove-ink: #315d4e;
  --grove-sky-top: #bfdeed;
  --grove-sky-middle: #e2edf0;
  --grove-sky-horizon: #f5f0d9;
  --grove-cloud-color: #fffdf0;
  --grove-cloud-opacity: .74;
  --grove-weather-cloud-opacity: 0;
  --grove-sun-color: #ffe7a0;
  --grove-sun-highlight: #fff6d3;
  --grove-sun-opacity: 1;
  --grove-far-hill: #c2d8d0;
  --grove-near-hill: #abcdb6;
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: var(--grove-sky-top);
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
}
/* A still viewport sky sits behind the travelling world. Clouds can never
   wash over the trees, buildings or care controls in the panorama above it. */
.grove-sky { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--grove-sky-top), var(--grove-sky-middle) 55%, var(--grove-sky-horizon) 84%); }
.grove-celestial { position: absolute; z-index: 1; inset: 0; }
.grove-sun { position: absolute; top: clamp(292px, 33vh, 320px); left: 64%; width: 74px; height: 74px; border: 1px solid #f3d28d80; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 34% 31%, var(--grove-sun-highlight), var(--grove-sun-color) 73%); box-shadow: 0 0 0 9px #ffe9a51a, 0 0 30px 12px #ffe9a521; opacity: var(--grove-sun-opacity); transition: opacity 1.6s ease; }
.grove-sun::after { content: ''; position: absolute; top: 13px; left: 15px; width: 17px; height: 8px; border-radius: 50%; background: #fffbed73; transform: rotate(-35deg); }
.grove-clouds { position: absolute; z-index: 2; inset: 0; overflow: hidden; color: var(--grove-cloud-color); pointer-events: none; }
.grove-cloud { position: absolute; width: clamp(170px, 24vw, 360px); height: auto; opacity: var(--grove-cloud-opacity); animation: grove-cloud-drift 65s ease-in-out infinite; }
.grove-cloud-one { top: 22%; left: 2%; }
.grove-cloud-two { top: 14%; right: -3%; width: clamp(190px, 27vw, 410px); animation-duration: 83s; animation-delay: -25s; }
.grove-cloud-three { top: 49%; left: 35%; width: clamp(120px, 17vw, 250px); opacity: calc(var(--grove-cloud-opacity) * .55); animation-duration: 76s; animation-delay: -38s; }
.grove-cloud-weather-one { top: 41%; left: 7%; width: clamp(240px, 35vw, 520px); opacity: var(--grove-weather-cloud-opacity); animation-duration: 96s; }
.grove-cloud-weather-two { top: 43%; right: 5%; width: clamp(210px, 28vw, 420px); opacity: var(--grove-weather-cloud-opacity); animation-duration: 88s; animation-delay: -41s; }
html[data-room-phase="dawn"] .grove-scene { --grove-sky-top: #e7d4cf; --grove-sky-middle: #f2e4d2; --grove-sky-horizon: #f7ebce; --grove-sun-color: #f2ba7d; --grove-sun-highlight: #ffe8b4; --grove-cloud-color: #fff0db; --grove-far-hill: #c4d0bd; --grove-near-hill: #a9bba2; }
html[data-room-phase="dusk"] .grove-scene { --grove-sky-top: #afb9d1; --grove-sky-middle: #e4cbd0; --grove-sky-horizon: #f0d7bb; --grove-sun-color: #efa680; --grove-sun-highlight: #ffdfb1; --grove-cloud-color: #f5e1d4; --grove-far-hill: #acb6c0; --grove-near-hill: #95b3ae; }
html[data-room-phase="night"] .grove-scene { --grove-sky-top: #14283e; --grove-sky-middle: #28495a; --grove-sky-horizon: #48686b; --grove-sun-opacity: 0; --grove-cloud-color: #6d8795; --grove-cloud-opacity: .3; --grove-far-hill: #365460; --grove-near-hill: #345c5c; }
html[data-room-weather="clouds"] .grove-clouds { --grove-weather-cloud-opacity: .58; }
html[data-room-weather="clouds"] .grove-sun { opacity: calc(var(--grove-sun-opacity) * .8); }
html[data-room-weather="rain"] .grove-clouds,
html[data-room-weather="storm"] .grove-clouds { --grove-cloud-opacity: .8; --grove-weather-cloud-opacity: .82; color: #c5d4d8; }
html[data-room-weather="rain"] .grove-sun,
html[data-room-weather="storm"] .grove-sun { opacity: calc(var(--grove-sun-opacity) * .3); }
html[data-room-weather="fog"] .grove-clouds { --grove-cloud-opacity: .48; --grove-weather-cloud-opacity: .4; }
html[data-room-weather="fog"] .grove-sun { opacity: calc(var(--grove-sun-opacity) * .45); }
html[data-room-weather="snow"] .grove-clouds { --grove-cloud-opacity: .85; --grove-weather-cloud-opacity: .54; }
html[data-room-phase="night"][data-room-weather="rain"] .grove-clouds,
html[data-room-phase="night"][data-room-weather="storm"] .grove-clouds { color: #526b7c; --grove-cloud-opacity: .5; --grove-weather-cloud-opacity: .45; }
.grove-panorama {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 200%;
  height: 100%;
  transform: translateX(0);
  transition: transform var(--grove-travel-duration) cubic-bezier(.45, 0, .15, 1);
}
.grove-scene[data-location="market"] .grove-panorama { transform: translateX(-50%); }
.grove-hills,
.grove-landscape { position: absolute; inset: 0; width: 100%; height: 100%; }
.grove-hills { z-index: 0; }
.grove-hills-far { fill: var(--grove-far-hill); opacity: .78; }
.grove-hills-near { fill: var(--grove-near-hill); opacity: .9; }
.grove-landscape { z-index: 1; }
.grove-room,
.grove-village { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 50%; height: 100%; overflow: hidden; }
.grove-village { left: 50%; }
.grove-tree { position: absolute; z-index: 1; bottom: 0; width: clamp(290px, 37vw, 670px); height: 100%; max-height: 1100px; overflow: visible; }
.grove-tree-left { left: -4%; }
.grove-tree-right { right: -5%; transform: scaleX(-1); }
.grove-tree-right > g { transform: none; }
.grove-room .grove-tree-right { right: -12%; width: clamp(230px, 31vw, 560px); opacity: .91; }
.grove-village .grove-tree-left { left: -15%; }
.grove-village .grove-tree-right { right: -14%; }
.grove-home-details { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: min(28vh, 250px); }
.grove-undergrowth { position: absolute; z-index: 2; bottom: -7px; width: clamp(230px, 37vw, 520px); height: auto; }
.grove-undergrowth-room-left { left: -8%; }
.grove-undergrowth-room-right { right: -15%; transform: scaleX(-1); }
.grove-undergrowth-village-left { left: -17%; }
.grove-undergrowth-village-right { right: -17%; transform: scaleX(-1); }
.grove-drifting-leaf { position: absolute; z-index: 2; width: 12px; height: 21px; border-radius: 2px 90% 2px 90%; background: #9bc56e; opacity: .75; transform: rotate(40deg); }
.grove-drifting-leaf-one { top: 30%; left: 35%; animation: grove-leaf-drift 17s ease-in-out infinite; }
.grove-drifting-leaf-two { top: 54%; left: 78%; width: 8px; height: 15px; background: #c8ce8c; animation: grove-leaf-drift 21s -9s ease-in-out infinite; }
.grove-village-heading { position: absolute; z-index: 2; top: clamp(118px, 18vh, 195px); right: 15%; left: 15%; color: var(--grove-ink); text-align: center; text-shadow: 0 2px 12px #edf2d9; }
.grove-village-heading > span { display: block; margin-bottom: 12px; color: #537f64; font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.grove-village-heading h2 { margin: 0; color: #315d4e; font-family: ui-rounded, "Trebuchet MS", sans-serif; font-size: clamp(28px, 3.3vw, 47px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.grove-village-heading p { margin: 12px 0 0; color: #5a7c64; font-size: 13px; font-weight: 500; line-height: 1.5; }
.grove-buildings { position: absolute; z-index: 3; right: 13%; bottom: 20px; left: 13%; display: flex; align-items: flex-end; justify-content: center; gap: clamp(24px, 8vw, 130px); }
.grove-building {
  position: relative;
  display: flex;
  flex: 0 1 420px;
  min-width: 0;
  max-width: min(36vw, 420px);
  padding: 0;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-radius: 34px;
  outline-offset: 5px;
  color: var(--grove-ink);
  background: none;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.grove-building-eggs { flex-basis: 336px; max-width: min(29vw, 336px); }
.grove-building-art { display: block; width: 100%; height: auto; max-height: min(55vh, 460px); overflow: visible; transform: translateY(0); transform-origin: 50% 90%; filter: drop-shadow(0 8px 4px rgba(70, 105, 61, .04)); transition: transform 220ms ease, filter 220ms ease; }
.grove-building:hover { border: 0; background: none; box-shadow: none; }
.grove-building:hover .grove-building-art,
.grove-building:focus-visible .grove-building-art { transform: translateY(-7px); filter: drop-shadow(0 13px 6px rgba(57, 99, 58, .17)); }
.grove-building:focus-visible { outline: 3px solid #4c8463; background: rgba(241, 245, 206, .18); }
.grove-building:active .grove-building-art { transform: translateY(-2px) scale(.987); }
.grove-building-caption { display: grid; min-width: 190px; padding: 7px 18px 12px; justify-items: center; gap: 3px; border: 1px solid rgba(249, 249, 217, .48); border-radius: 20px; background: rgba(237, 237, 194, .81); box-shadow: 0 3px 0 rgba(87, 123, 60, .06); line-height: 1.35; }
.grove-building-caption > strong { color: #3c664d; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.grove-building-caption > span { color: #688163; font-size: 10px; font-weight: 500; }
.grove-building-caption > b { margin-top: 5px; color: #466e51; font-size: 10px; font-weight: 800; }
.grove-building-caption > b > span { padding-left: 6px; }
.grove-return { position: absolute; z-index: 5; top: 103px; left: 31px; display: flex; min-height: 44px; padding: 9px 17px; align-items: center; gap: 10px; border: 1px solid rgba(242, 244, 209, .56); border-radius: 24px; color: #3f6e55; background: rgba(229, 237, 203, .87); box-shadow: 0 3px 0 rgba(66, 112, 77, .06); font-family: inherit; font-size: 12px; font-weight: 800; pointer-events: auto; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.grove-return > span { font-size: 18px; line-height: 1; }
.grove-return:hover { color: #2f634a; background: #eff2d3; transform: translateX(-2px); }
.grove-return:focus-visible { outline: 3px solid #4c8463; outline-offset: 4px; }

@keyframes grove-leaf-drift { 0%, 100% { transform: translate(0, 0) rotate(35deg); } 45% { transform: translate(26px, 40px) rotate(90deg); } 75% { transform: translate(5px, 71px) rotate(125deg); } }
@keyframes grove-cloud-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(24px); } }

@media (min-width: 1600px) {
  .grove-tree { width: 39vw; }
  .grove-buildings { bottom: 28px; gap: 9vw; }
  .grove-building { max-width: 450px; }
  .grove-building-eggs { max-width: 370px; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .grove-village-heading { top: 112px; }
  .grove-village-heading > span { margin-bottom: 7px; font-size: 8px; }
  .grove-village-heading h2 { font-size: 31px; }
  .grove-village-heading p { margin-top: 7px; font-size: 11px; }
  .grove-building-art { max-height: 48vh; }
  .grove-building-caption { padding: 6px 15px 9px; }
  .grove-building-caption > strong { font-size: 15px; }
  .grove-building-caption > span { display: none; }
}
@media (max-width: 700px) {
  .grove-sun { top: 280px; left: 58%; width: 56px; height: 56px; box-shadow: 0 0 0 7px #ffe9a514, 0 0 23px 9px #ffe9a51a; }
  .grove-sun::after { top: 10px; left: 11px; width: 12px; height: 6px; }
  .grove-cloud-one { top: 19%; left: -13%; width: 48vw; }
  .grove-cloud-two { top: 15%; right: -23%; width: 51vw; }
  .grove-cloud-three { top: 53%; left: 5%; width: 40vw; }
  .grove-cloud-weather-one { top: 43%; left: -38%; width: 76vw; }
  .grove-cloud-weather-two { top: 47%; right: -38%; width: 70vw; }
  .grove-tree { width: max(70vw, 58vh); min-width: 0; height: 105%; }
  .grove-tree-left { left: -65%; }
  .grove-room .grove-tree-right { right: -68%; width: max(70vw, 58vh); min-width: 0; }
  .grove-village .grove-tree-left { left: -72%; }
  .grove-village .grove-tree-right { right: -72%; }
  .grove-village-heading { top: clamp(235px, 38vh, 345px); right: 8%; left: 8%; }
  .grove-village-heading > span { margin-bottom: 9px; font-size: 8px; letter-spacing: .15em; }
  .grove-village-heading h2 { font-size: clamp(27px, 7.6vw, 38px); }
  .grove-village-heading p { max-width: 235px; margin: 9px auto 0; font-size: 11px; line-height: 1.5; }
  .grove-buildings { right: 3%; bottom: 24px; left: 3%; gap: 2%; }
  .grove-building { flex-basis: 52%; max-width: 52%; border-radius: 20px; }
  .grove-building-eggs { flex-basis: 46%; max-width: 46%; }
  .grove-building-art { max-height: 41vh; }
  .grove-building-caption { min-width: 0; width: 96%; padding: 9px 5px 10px; border-radius: 13px; gap: 4px; }
  .grove-building-caption > strong { font-size: 15px; }
  .grove-building-caption > span { min-height: 24px; max-width: 133px; font-size: 9px; }
  .grove-building-caption > b { margin-top: 2px; font-size: 9px; }
  .grove-building-caption > b > span { padding-left: 2px; }
  .grove-undergrowth { width: 73vw; }
  .grove-undergrowth-room-left { left: -38%; }
  .grove-undergrowth-room-right { right: -46%; }
  .grove-undergrowth-village-left { left: -48%; }
  .grove-undergrowth-village-right { right: -48%; }
  .grove-return { top: 123px; left: 15px; min-height: 40px; padding: 9px 13px; gap: 8px; font-size: 10px; }
  .grove-home-details { width: 170%; max-width: none; left: -41%; }
}
@media (max-width: 700px) and (max-height: 630px) {
  .grove-village-heading { top: 174px; }
  .grove-village-heading > span,
  .grove-village-heading p { display: none; }
  .grove-village-heading h2 { font-size: 25px; }
  .grove-buildings { bottom: 12px; }
  .grove-building-art { max-height: 37vh; }
  .grove-building-caption > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grove-panorama { transition-duration: 1ms; }
  .grove-drifting-leaf,
  .grove-cloud { animation: none; }
  .grove-sun { transition: none; }
  .grove-building-art,
  .grove-return { transition: none; }
}