keyhome-page-loop {
  display:block;
  width:160px;
  max-width:100%;
  aspect-ratio:5 / 3;
  flex:none;
  color:#123b5a;
}
.page-loop-control {
  display:block;
  position:relative;
  width:100%;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.page-loop-control:focus-visible { outline:2px solid #1462ff; outline-offset:4px; }
.page-loop-art { display:block; width:100%; height:auto; overflow:hidden; }
.page-loop-glyph {
  position:absolute;
  top:2px;
  right:2px;
  width:19px;
  height:19px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eff4f6;
}
.page-loop-glyph::after {
  content:'';
  width:0;
  height:0;
  border-left:6px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  margin-left:2px;
}
.page-loop-control[data-playing] .page-loop-glyph::after {
  width:3px;
  height:7px;
  margin:0;
  border:0;
  border-inline:2px solid currentColor;
  box-sizing:content-box;
}
.page-loop-motion { animation-play-state:paused !important; }
keyhome-page-loop[data-running] .page-loop-motion { animation-play-state:running !important; }
.page-loop-sun { animation:page-loop-daylight 7s ease-in-out infinite; }
.page-loop-curtain { transform-origin:60px 22px; animation:page-loop-breeze 6s ease-in-out infinite; }
.page-loop-leaves { transform-box:fill-box; transform-origin:50% 100%; animation:page-loop-leaf 6.5s ease-in-out infinite; }
.page-loop-key { transform-origin:73px 49px; animation:page-loop-handover 6s ease-in-out infinite; }
.page-loop-window-one { animation:page-loop-window 8s ease-in-out infinite; }
.page-loop-window-two { animation:page-loop-window 8s ease-in-out -4s infinite; }
.page-loop-tree { transform-origin:122px 78px; animation:page-loop-leaf 7s ease-in-out infinite; }
.page-loop-wave { transform-origin:98px 72px; animation:page-loop-greeting 6s ease-in-out infinite; }
.page-loop-chat { animation:page-loop-conversation 6s ease-in-out infinite; }
.page-loop-reply { animation:page-loop-answer 6s ease-in-out infinite; }
@keyframes page-loop-daylight { 0%,100% { opacity:.72; } 50% { opacity:1; } }
@keyframes page-loop-breeze { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(-3deg); } }
@keyframes page-loop-leaf { 0%,100% { transform:rotate(-2deg); } 50% { transform:rotate(3deg); } }
@keyframes page-loop-handover { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-3px) rotate(5deg); } }
@keyframes page-loop-window { 0%,100% { opacity:.25; } 35%,65% { opacity:1; } }
@keyframes page-loop-greeting { 0%,22%,65%,100% { transform:rotate(0deg); } 35%,53% { transform:rotate(12deg); } 44% { transform:rotate(-4deg); } }
@keyframes page-loop-conversation { 0%,100% { transform:translateY(0); } 45%,65% { transform:translateY(-3px); } }
@keyframes page-loop-answer { 0%,100% { transform:translateY(0); opacity:.8; } 45%,65% { transform:translateY(-2px); opacity:1; } }
@media print {
  .page-loop-motion { animation:none !important; transform:none !important; opacity:1 !important; }
  .page-loop-glyph { display:none; }
}