* {
  box-sizing:border-box}
body {
  margin:0;
  background:#bda77e;
  color:#fff8e9;
  font:14px system-ui;
  overflow:hidden}
.room {
  position:fixed;
  inset:0;
  background:url('assets/room.webp') center/cover no-repeat}
.room:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#38291e18,transparent 35%,#30221632);
  pointer-events:none}
.scene {
  position:absolute;
  width:min(49vw,690px);
  height:auto;
  bottom:7%;
  left:50%;
  transform:translateX(-50%);
  filter:drop-shadow(0 20px 12px #43240b22)}
.breathe {
  transform-origin:300px 420px;
  animation:breathe 4s ease-in-out infinite}
.head {
  transform-origin:300px 300px;
  animation:nod 1.8s ease-in-out infinite}
.arm {
  transform-origin:399px 336px;
  animation:tap 1.8s infinite}
.ripple {
  transform-origin:300px 461px;
  animation:ripple 1.8s infinite;
  opacity:0}
.tail {
  transform-origin:385px 435px;
  animation:tail 5s ease-in-out infinite}
.steam {
  stroke:#fff9e1;
  stroke-width:2;
  fill:none;
  opacity:.35;
  animation:steam 5s infinite}
.ui {
  position:fixed;
  z-index:4;
  left:0;
  right:0;
  top:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 36px;
  transition:opacity 1s}
.brand {
  font-family:Georgia,serif;
  font-size:22px;
  letter-spacing:.09em;
  text-shadow:0 2px 16px #312013}
.brand small {
  display:block;
  font:9px system-ui;
  letter-spacing:.32em;
  margin-top:8px;
  text-transform:uppercase}
.buttons {
  display:flex;
  gap:10px}
button {
  border:1px solid #fff6;
  border-radius:30px;
  background:#44302030;
  backdrop-filter:blur(15px);
  color:#fff9ec;
  padding:11px 17px;
  font:12px system-ui;
  cursor:pointer}
button:hover {
  background:#44302070}
button:focus-visible {
  outline:3px solid #fff;
  outline-offset:4px}
.caption {
  position:fixed;
  bottom:22px;
  left:0;
  right:0;
  text-align:center;
  opacity:.7;
  font:italic 13px Georgia,serif;
  letter-spacing:.08em;
  transition:opacity 1s}
.hidden .buttons {
  opacity:0;
  pointer-events:none}
.buttons {
  transition:opacity 1s}
.paused * {
  animation-play-state:paused!important}
@keyframes breathe {
  50% {
  transform:scale(1.012,1.019)}
}
@keyframes nod {
  0%,45%,100% {
  transform:rotate(-1deg)}
60% {
  transform:translateY(3px) rotate(1deg)}
}
@keyframes tap {
  0%,25%,100% {
  transform:rotate(-27deg)}
48% {
  transform:rotate(12deg)}
54% {
  transform:rotate(12deg)}
72% {
  transform:rotate(-27deg)}
}
@keyframes ripple {
  0%,48% {
  opacity:0;
  transform:scale(.75)}
54% {
  opacity:.45}
85%,100% {
  opacity:0;
  transform:scale(1.35)}
}
@keyframes tail {
  50% {
  transform:rotate(7deg)}
}
@keyframes steam {
  50% {
  transform:translateY(-14px);
  opacity:.15}
}
@media(max-aspect-ratio:1/1) {
  .scene {
  width:94vw;
  bottom:13%}
.ui {
  padding:22px}
.brand {
  font-size:18px}
.buttons {
  gap:6px}
button {
  padding:10px}
.room {
  background-position:58% center}
}
@media(prefers-reduced-motion:reduce) {
  .breathe,.head,.tail,.steam {
  animation:none}
}

.scene {
  aspect-ratio:1;
  bottom:7%;
  width:min(43vw,620px);
  filter:drop-shadow(0 18px 12px #43240b30);
  animation:none}
.chibi {
  position:relative;
  width:100%;
  height:100%;
  background:url('assets/chibi-base.webp') center/contain no-repeat;
  animation:none}
.swing {
  position:absolute;
  left:25%;
  top:59.75%;
  width:35%;
  height:17.5%;
  object-fit:contain;
  transform-origin:17% 30%;
  animation:gentle-tap calc(2000ms / 3) ease-in-out infinite;
  pointer-events:none}
@keyframes gentle-tap {
  0%,14%,100% {
  transform:rotate(-43deg)}
48%,53% {
  transform:rotate(-15deg)}
88% {
  transform:rotate(-43deg)}
}
@media(max-aspect-ratio:1/1) {
  .scene {
  width:91vw;
  bottom:13%}
}
#pause {
  width:48px;
  height:48px;
  padding:0;
  display:grid;
  place-items:center;
  flex-shrink:0}
#pause svg {
  display:block}