.cookie-jar-art {
  position: absolute;
  z-index: 4;
  left: 29.1%;
  top: 35.4%;
  width: 6.1%;
  height: auto;
  pointer-events: none;
  transform-origin: 50% 93%;
  /* Matching filter order keeps both directions interpolable with the room. */
  filter: brightness(1) sepia(0) drop-shadow(1px 2px 1px #42281760);
  transition: filter 1.1s ease;
}
[data-time="night"] .cookie-jar-art {
  filter: brightness(0.64) sepia(0.18) drop-shadow(1px 2px 1px #1e100d80);
}
.cookie-jar-button {
  position: absolute;
  z-index: 5;
  left: 32.15%;
  top: 39%;
  transform: translate(-50%, -50%);
  width: 7%;
  height: 8%;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  border-radius: 45%;
  touch-action: manipulation;
}
.office-stage.cookies-open .cookie-jar-art {
  animation: cookie-jar-wiggle 550ms ease-in-out;
}
.cookie-note {
  position: absolute;
  z-index: 8;
  top: 8%;
  left: 9%;
  width: min(300px, 78%);
  padding: 20px 22px 17px;
  border: 1px solid #d4ac72;
  border-radius: 12px 12px 12px 3px;
  background: #fff6df;
  color: #433220;
  box-shadow: 0 14px 32px #101b1940;
  animation: cookie-note-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cookie-note::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 34%;
  width: 14px;
  height: 14px;
  background: #fff6df;
  border-bottom: 1px solid #d4ac72;
  border-right: 1px solid #d4ac72;
  transform: rotate(45deg);
}
.cookie-note-label,
.cookie-note-footer {
  display: block;
  font:
    10px/1.5 ui-monospace,
    monospace;
  color: #7b5736;
}
.cookie-note p {
  margin: 10px 0 15px;
  color: #65482c;
  font:
    14px/1.5 Portfolio,
    sans-serif;
}
.cookie-note .cookie-note-title {
  margin: 13px 0 6px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: #3f2d1c;
}
.cookie-note-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: #755130;
  font-size: 22px;
}
.cookie-jar-button:focus-visible,
.cookie-note button:focus-visible {
  outline: 2px solid #a8d557;
  outline-offset: 3px;
}
@keyframes cookie-jar-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-6deg);
  }
  65% {
    transform: rotate(4deg);
  }
}
@keyframes cookie-note-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}