/* Webrys lives inside the illustration. Nothing floats over the page. */
.rys-habitat {
  --rys-size: 132px;
  position: relative;
  width: var(--rys-size);
  height: calc(var(--rys-size) * .958333);
  isolation: isolate;
  flex: 0 0 auto;
  -webkit-user-select: none;
  user-select: none;
}
.rys-character {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 45%;
  background: transparent;
  color: #282528;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.rys-character > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rys-character:focus-visible { outline: 2px solid #c66542; outline-offset: 2px; background: #ff80540c; }
.rys-body { transform-origin: 122px 203px; }
.rys-head { transform-origin: 122px 145px; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.rys-ear-left { transform-origin: 83px 66px; }
.rys-ear-right { transform-origin: 168px 66px; }
.rys-eyes { transform-origin: 122px 100px; }
.rys-tail { transform-origin: 155px 193px; }
.rys-paw-wave { transform-origin: 146px 164px; }
.rys-habitat.is-awake .rys-body { animation: rys-breathe 6.8s ease-in-out infinite; }
.rys-habitat.is-awake .rys-character:hover .rys-head,
.rys-habitat.is-awake .rys-character:focus-visible .rys-head { transform: rotate(-3deg) translateY(-1px); }
.rys-habitat.is-blinking .rys-eyes { animation: rys-blink .24s ease-in-out; }
.rys-habitat.is-greeting .rys-paw-wave { animation: rys-wave 1.35s cubic-bezier(.4,0,.2,1); }
.rys-habitat.is-greeting .rys-paw-pad { animation: rys-show-pad 1.35s ease-in-out; }
.rys-habitat.is-greeting .rys-ear-right { animation: rys-ear-hello 1.35s ease-in-out; }
.rys-habitat.is-greeting .rys-tail { animation: rys-tail-hello 1.35s ease-in-out; }
.rys-habitat:not(.is-awake) .rys-head { transition: none; }
.rys-habitat:not(.is-awake) :is(.rys-body,.rys-eyes,.rys-paw-wave,.rys-paw-pad,.rys-ear-right,.rys-tail) { animation: none !important; }
.rys-note {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 2;
  display: block;
  width: max-content;
  max-width: 178px;
  margin-bottom: 1px;
  padding: 9px 13px;
  border: 1px solid #e2c9b8;
  border-radius: 13px 13px 13px 3px;
  background: #fffaf0;
  color: #59423b;
  box-shadow: 0 5px 16px #5639230a;
  font-family: var(--sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .2s ease, transform .3s ease;
}
.rys-habitat.has-note .rys-note { opacity: 1; transform: translate(-50%, 0); }
.rys-habitat:not(.is-awake) .rys-note { transition: none; }
@keyframes rys-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.008,1.016); } }
@keyframes rys-blink { 0%,100% { transform: scaleY(1); } 43%,57% { transform: scaleY(.08); } }
@keyframes rys-wave {
  0%,100% { transform: translate(0,0) rotate(0); }
  26% { transform: translate(14px,-3px) rotate(-145deg); }
  41% { transform: translate(14px,-3px) rotate(-127deg); }
  57% { transform: translate(14px,-3px) rotate(-146deg); }
  74% { transform: translate(14px,-3px) rotate(-129deg); }
}
@keyframes rys-show-pad { 0%,12%,92%,100% { opacity: 0; } 25%,80% { opacity: 1; } }
@keyframes rys-ear-hello { 0%,100% { transform: rotate(0); } 25% { transform: rotate(8deg); } 45% { transform: rotate(-3deg); } 65% { transform: rotate(4deg); } }
@keyframes rys-tail-hello { 0%,100% { transform: rotate(0); } 33% { transform: rotate(-8deg); } 65% { transform: rotate(3deg); } }
@media (max-width: 759px) { .rys-habitat { --rys-size: 112px; } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .rys-habitat * { animation: none !important; transition: none !important; }
}
html[data-motion="off"] .rys-habitat * { animation: none !important; transition: none !important; }