/* Pets — Mote (1a) and Slide (1c).

   Colours are tokens so the same two creatures work on paper and in
   the dark. Defaults below are the notebook values, because
   notebook.html carries no data-theme attribute; the other two
   editions override them.

   Hidden entirely below 900px: fixed-position creatures cover content
   on a phone, and the capture-phase pointer handlers fight scrolling. */

:root{
  --pet-stroke:#2b2a26;
  --pet-fill:#faf4e6;
  --pet-eye:#f7f1e0;
  --pet-accent:#0e6e7e;
  --pet-bub:#faf4e6;
  --pet-bub-edge:#d9cfb6;
  --pet-bub-ink:#3a4f52;
  --pet-font:Caveat,cursive;
  --pet-size:17px;
  --pet-shadow:0 1px 1px rgba(70,55,25,.12),0 6px 14px -6px rgba(70,55,25,.22)}
[data-theme="dark"]{
  --pet-stroke:#E4E9ED;
  --pet-fill:#12171C;
  --pet-eye:#0B0E11;
  --pet-accent:#2DD4BF;
  --pet-bub:#12171C;
  --pet-bub-edge:#1E262E;
  --pet-bub-ink:#E4E9ED;
  --pet-font:"IBM Plex Mono",monospace;
  --pet-size:12px;
  --pet-shadow:0 6px 20px -6px rgba(0,0,0,.6)}
[data-theme="light"]{
  --pet-stroke:#12171C;
  --pet-fill:#FFFFFF;
  --pet-eye:#F6F7F6;
  --pet-accent:#0D9488;
  --pet-bub:#FFFFFF;
  --pet-bub-edge:#E3E7E5;
  --pet-bub-ink:#12171C;
  --pet-font:"IBM Plex Mono",monospace;
  --pet-size:12px;
  --pet-shadow:0 6px 18px -6px rgba(18,23,28,.18)}
.pet{
  position:fixed;
  left:0;
  top:0;
  z-index:58;
  pointer-events:none;
  will-change:transform}
.pet svg{
  overflow:visible}
.pet .bub{
  position:absolute;
  bottom:100%;
  left:0;
  margin-bottom:8px;
  width:200px;
  background:var(--pet-bub);
  border:1px solid var(--pet-bub-edge);
  box-shadow:var(--pet-shadow);
  padding:8px 11px;
  font-family:var(--pet-font);
  font-size:var(--pet-size);
  line-height:1.35;
  color:var(--pet-bub-ink);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .26s ease-out,transform .26s ease-out}
.pet button{
  pointer-events:auto;
  background:transparent;
  border:0;
  padding:0;
  line-height:0;
  cursor:pointer}
.pet button:focus-visible{
  outline:2px solid var(--pet-accent);
  outline-offset:4px}
@keyframes moteBob{
  0%,100%{
  transform:translateY(0) rotate(-1deg)}
50%{
  transform:translateY(-3px) rotate(1deg)}
}
@keyframes moteWalk{
  0%,100%{
  transform:translateY(0) rotate(-3deg)}
50%{
  transform:translateY(-5px) rotate(3deg)}
}
@keyframes petBlink{
  0%,90%,100%{
  transform:scaleY(1)}
95%{
  transform:scaleY(.1)}
}
@keyframes slideFloat{
  0%,100%{
  transform:translateY(0) rotate(-1deg)}
50%{
  transform:translateY(-4px) rotate(1deg)}
}
@keyframes slideKick{
  0%,100%{
  transform:rotate(-15deg)}
50%{
  transform:rotate(13deg)}
}
@media (max-width:899px){
  .pet{
  display:none!important}
}