#site.static-edition .animated-home {
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  touch-action: pan-y pinch-zoom;
}

#site.static-edition .animated-home > :is(img, video, canvas) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  pointer-events: none;
}

#home-loop-video { z-index: 0; }
#home-effects-canvas { z-index: 1; }

#site.static-edition .home-live-lettering {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: #253d50;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
}

.home-live-lettering > * {
  position: absolute;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.home-live-title {
  left: 43.75%;
  top: 22.222222%;
  width: 15.234375%;
  height: 7.777778%;
  font-size: 3.67cqw;
  font-weight: 800;
  letter-spacing: -.045em;
  text-shadow: 0 .025em .035em #ffffff80;
}

.home-live-english {
  left: 45.585938%;
  top: 30.416667%;
  width: 11.835938%;
  height: 1.875%;
  color: #365d55;
  font: 600 1.08cqw/1 Georgia, "Times New Roman", serif;
  letter-spacing: .025em;
}

.home-live-subtitle {
  left: 44.453125%;
  top: 35.555556%;
  width: 14.53125%;
  height: 1.458333%;
  font-size: .73cqw;
  font-weight: 600;
  letter-spacing: .045em;
}

.home-building-sign {
  left: 24.53125%;
  top: 36.527777778%;
  width: 5.46875%;
  height: 3.611111111%;
  object-fit: contain;
  transform: none;
  text-shadow: none;
  pointer-events: none;
}

.home-pavilion-sign {
  left: 51.953125%;
  top: 59.722222%;
  width: 2.34375%;
  height: 4.166667%;
  color: #563b27;
  font-size: 2.12cqw;
  font-weight: 500;
  transform: skewY(-3deg);
}

#site.static-edition .animated-home .home-hotspot-layer {
  display: block;
  z-index: 3;
}

#site.static-edition .animated-home .home-hotspot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .34em;
  width: max(var(--hotspot-width), 46px);
  height: max(var(--hotspot-height), 19px);
  left: var(--hotspot-left);
  top: var(--hotspot-top);
  transform: translate(-50%, -50%);
  color: #594b3c;
  background: #fff6e8;
  border: max(.06cqw, 1px) solid #ccbda8;
  box-shadow: 0 .1cqw .15cqw #63544025;
  font: 600 clamp(8px, 1.22cqw, 23px)/1 "STKaiti", "KaiTi", "Noto Serif SC", serif;
  text-decoration: none;
  white-space: nowrap;
}

#site.static-edition .animated-home .home-hotspot:is(:hover, :focus-visible) {
  background: #fff9ef;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #fff7e9, 0 0 0 4px #54715b;
}

.animated-home .home-hotspot svg {
  width: 1.16em;
  height: 1.16em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#site.static-edition .animated-home .patterns { --hotspot-left: 8.59375%; --hotspot-top: 71.597222%; --hotspot-width: 6.875%; --hotspot-height: 4.861111%; }
#site.static-edition .animated-home .reading { --hotspot-left: 24.902344%; --hotspot-top: 77.534722%; --hotspot-width: 6.679688%; --hotspot-height: 5.069444%; }
#site.static-edition .animated-home .learning { --hotspot-left: 49.570313%; --hotspot-top: 76.180556%; --hotspot-width: 6.171875%; --hotspot-height: 5%; }
#site.static-edition .animated-home .playing { --hotspot-left: 76.152344%; --hotspot-top: 36.909722%; --hotspot-width: 6.757813%; --hotspot-height: 5.069444%; }
#site.static-edition .animated-home .sheets { --hotspot-left: 89.394531%; --hotspot-top: 63.159722%; --hotspot-width: 6.914063%; --hotspot-height: 5.208333%; }

.home-animation-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1480px;
  margin: 16px auto 0;
  padding: 0 20px;
  color: #52665c;
  font-size: 13px;
}

.home-animation-controls button {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #cbd7c1;
  border-radius: 999px;
  background: #fffdf5;
  color: #315746;
  font: inherit;
  cursor: pointer;
}

.home-animation-controls button:focus-visible { outline: 3px solid #477ea3; outline-offset: 3px; }
.home-animation-controls button:hover:not(:disabled) { background: #eaf1df; }
.home-animation-controls button:disabled { opacity: .58; cursor: default; }
#home-animation-status { flex-basis: 100%; text-align: center; line-height: 1.6; min-height: 1.6em; }

@media (max-width: 700px) {
  .home-animation-controls { gap: 8px; padding-inline: 12px; font-size: 12px; }
  .home-animation-controls button { padding-inline: 12px; }
  #site.static-edition .animated-home .home-hotspot { gap: .2em; }
}

@media print {
  .home-animation-controls { display: none !important; }
}