:root {
  color-scheme: light;
  --page: #fff;
  --ink: #655046;
  --sky: #acd7e7;
  --sun: #fff0b4;
  --cloud: #fffdf1;
  --cloud-shade: #e0edf0;
  --wood: #bd916b;
  --wood-light: #dfbb92;
  --wood-dark: #a37b5c;
  --wood-edge: #926f55;
  --wall-shadow: #f4f0ec;
  --glass-light: #d8edf2;
  --mat: #dfaaa0;
  --mat-edge: #c68f86;
  --mat-light: #edc5b6;
  --mat-shadow: #f2e9e5;
  --fur-outline: #635046;
  --fur-white: #fff1d9;
  --fur-shade: #e7d1b2;
  --fur-orange: #d99a5c;
  --fur-dark: #846754;
  --ear-pink: #e9ad9a;
  --nose: #bc7e73;
  --heart: #c98283;
  background: var(--page);
  color: var(--ink);
}

:root[data-time="dawn"] {
  --page: #f8f5fa;
  --ink: #71616d;
  --sky: #b1b8d1;
  --sky-horizon: #e3b9c0;
  --sky-glow: #f0cfb9;
  --sun: #fff0ca;
  --cloud: #eee3e8;
  --cloud-shade: #d5cbdc;
  --glass-light: #d3cfe0;
  --wood: #b7a08d;
  --wood-light: #d9c0ac;
  --wood-dark: #9d887b;
  --wood-edge: #8b786f;
  --wall-shadow: #eee8ef;
  --mat: #d2a5ad;
  --mat-edge: #b98c99;
  --mat-light: #e4bdc1;
  --mat-shadow: #ece5ed;
}

:root[data-time="dusk"] {
  --page: #fbf2ec;
  --ink: #795955;
  --sky: #a994b7;
  --sky-horizon: #dc9f9b;
  --sky-glow: #efbc91;
  --sun: #ffe0a5;
  --cloud: #f3cfbf;
  --cloud-shade: #dfb1ae;
  --glass-light: #cebacd;
  --wood: #b78a6d;
  --wood-light: #e3b492;
  --wood-dark: #9c705b;
  --wood-edge: #8c6556;
  --wall-shadow: #f0e2dc;
  --mat: #d99b95;
  --mat-edge: #ba7e7d;
  --mat-light: #eeb6a7;
  --mat-shadow: #efe0d9;
  --fur-white: #ffebce;
  --fur-shade: #e7c5a4;
}

:root[data-time="night"] {
  color-scheme: dark;
  --page: #232b39;
  --ink: #c7bfb6;
  --sky: #3c506e;
  --cloud: #a8b6ca;
  --wood: #8c796b;
  --wood-light: #ad9780;
  --wood-dark: #6d615c;
  --wood-edge: #594f4c;
  --wall-shadow: #202733;
  --glass-light: #536783;
  --mat: #a28285;
  --mat-edge: #7d666e;
  --mat-light: #b69996;
  --mat-shadow: #202733;
  --fur-outline: #504747;
  --fur-white: #e0d5c2;
  --fur-shade: #bdaf9b;
  --fur-orange: #b78b63;
  --fur-dark: #7a675d;
  --ear-pink: #bc9187;
  --nose: #aa7e7b;
  --heart: #d5a0a0;
}

* { box-sizing: border-box; }
body { margin: 0; }
.nap {
  min-height: 100svh;
  padding: 64px 20px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wordmark { margin: 0 0 32px; line-height: 0; }
.wordmark svg { display: block; width: 295px; height: 45px; }
.scene { position: relative; width: 576px; max-width: 100%; }
.room { display: block; width: 100%; height: auto; overflow: visible; }
.pet {
  position: absolute;
  left: 35.4%;
  top: 62.5%;
  width: 34.4%;
  height: 25.7%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pet:disabled { cursor: default; }
.pet:focus-visible { outline: none; }
.scene:has(.pet:focus-visible) .mat-light { fill: var(--ink); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sky { fill: var(--sky); }
.sky-horizon, .sky-glow { display: none; }
.sky-horizon { fill: var(--sky-horizon); }
.sky-glow { fill: var(--sky-glow); }
[data-time="dawn"] .sky-horizon, [data-time="dawn"] .sky-glow,
[data-time="dusk"] .sky-horizon, [data-time="dusk"] .sky-glow { display: initial; }
.sun { fill: var(--sun); }
[data-sun-visible="false"] .sun-orbit { display: none; }
.cloud { fill: var(--cloud); }
.cloud-shade { fill: var(--cloud-shade); }
.wood { fill: var(--wood); }
.wood-light { fill: var(--wood-light); }
.wood-dark { fill: var(--wood-dark); }
.wood-edge { fill: var(--wood-edge); }
.wall-shadow { fill: var(--wall-shadow); }
.glass-light { fill: var(--glass-light); }
.mat { fill: var(--mat); }
.mat-edge { fill: var(--mat-edge); }
.mat-light { fill: var(--mat-light); }
.mat-shadow { fill: var(--mat-shadow); }
.fur-outline { fill: var(--fur-outline); }
.fur-white { fill: var(--fur-white); }
.fur-orange { fill: var(--fur-orange); }
.fur-dark { fill: var(--fur-dark); }
.fur-shade { fill: var(--fur-shade); }
.ear-pink { fill: var(--ear-pink); }
.nose { fill: var(--nose); }
.moon { fill: #ede4c9; }
.star { fill: #bbc6d7; }
.night-sky { display: none; }
[data-time="night"] .night-sky { display: initial; }
[data-time="night"] .day-sky { display: none; }
[data-time="dawn"] .night-sky, [data-time="dusk"] .night-sky { display: initial; }
[data-time="dawn"] .moon, [data-time="dusk"] .moon { display: none; }
[data-time="dawn"] .night-sky, [data-time="dusk"] .night-sky { opacity: .35; }

.body { animation: breathe 4.8s steps(1, end) infinite; }
.head { animation: head-rest 4.8s steps(1, end) infinite; }
.ear { animation: ear-twitch 19s steps(1, end) infinite; }
.tail { animation: tail-tip 23s steps(1, end) infinite; }
.sleep { animation: sleep 6s steps(1, end) infinite; }
.sleep-two { animation-delay: -2s; }
.sleep-three { animation-delay: -4s; }
.sleep-symbols { opacity: .7; }
.cloud-one { animation: drift 48s steps(8, end) infinite alternate; }
.cloud-two { animation: drift 65s steps(8, end) infinite alternate-reverse; }
.star-one { animation: twinkle 7s steps(1, end) infinite; }
.star-two { animation: twinkle 9s steps(1, end) infinite reverse; }
.awake-eyes { display: none; }
.heart { fill: var(--heart); opacity: 0; }
.is-petted .sleepy-eyes { display: none; }
.is-petted .awake-eyes { display: initial; }
.is-petted .head { animation: look-up 2.2s steps(1, end) both; }
.is-petted .sleep-symbols { visibility: hidden; }
.is-petted .heart { animation: affection 2.2s steps(1, end) both; }

@keyframes breathe { 0%, 70%, 100% { transform: translateY(0); } 25%, 55% { transform: translateY(-1px); } }
@keyframes head-rest { 0%, 70%, 100% { transform: translateY(0); } 35%, 55% { transform: translateY(-1px); } }
@keyframes ear-twitch { 0%, 82%, 87%, 100% { transform: translateY(0); } 83%, 86% { transform: translateY(-1px); } }
@keyframes tail-tip { 0%, 84%, 91%, 100% { transform: translateY(0); } 85%, 90% { transform: translateY(-1px); } }
@keyframes sleep { 0%, 100% { opacity: 0; transform: translateY(2px); } 20% { opacity: 1; transform: translateY(1px); } 55% { opacity: 1; transform: translateY(-1px); } 80% { opacity: 0; transform: translateY(-3px); } }
@keyframes drift { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
@keyframes twinkle { 0%, 70%, 100% { opacity: 1; } 75%, 90% { opacity: .45; } }
@keyframes look-up { 0%, 85% { transform: translateY(-2px); } 90%, 100% { transform: translateY(0); } }
@keyframes affection { 0% { opacity: 0; translate: 0 0; } 10% { opacity: 1; translate: 0 -2px; } 35% { opacity: 1; translate: 0 -5px; } 65% { opacity: 1; translate: 0 -8px; } 85%, 100% { opacity: 0; translate: 0 -10px; } }

@media (max-width: 639px) {
  .nap { padding: 48px 16px 64px; }
  .wordmark { margin-bottom: 28px; }
  .wordmark svg { width: 236px; height: 36px; }
  .scene { width: 384px; }
}
@media (max-height: 520px) and (min-width: 640px) {
  .nap { padding: 24px 20px; }
  .wordmark { margin-bottom: 12px; }
  .scene { width: 384px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .sleep-one, .sleep-two { display: none; }
  .is-petted .heart { opacity: 1; translate: 0 -5px; }
}