:root {
  background: #000;
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

.player-page {
  touch-action: none;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.pet-home {
  width: min(100vmin, 720px);
  aspect-ratio: 1;
}

.pet-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #dbec42;
}

.pet-link {
  display: block;
  width: 55%;
}

.pet-link:focus-visible,
.demo-entry:focus-visible,
.confirm-action:focus-visible,
.player-control:focus-visible,
.library-entry-star:focus-visible {
  outline: 3px solid #161321;
  outline-offset: 4px;
}

.pet {
  display: block;
  width: 100%;
  height: auto;
}

.demo-launcher .pet-screen {
  position: relative;
}

.demo-entry {
  position: absolute;
  display: block;
}

.demo-entry img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.demo-entry-pet {
  top: 30%;
  left: 5%;
  width: 40%;
}

.demo-entry-manual {
  top: 23.611111%;
  left: 48%;
  width: 48%;
}

.music-category .pet-screen {
  position: relative;
  overflow: hidden;
}

.category-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    #000 25%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    #000 25%,
    #000 100%
  );
}

.category-scroll::-webkit-scrollbar {
  display: none;
}

/* Keep the category surface vertically scrollable as more shelves are added. */
.category-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 120%;
  pointer-events: none;
}

.category-status,
.category-item,
.category-item img {
  position: absolute;
  display: block;
}

.category-status {
  z-index: 2;
}

.category-scroll {
  z-index: 1;
}

.category-status,
.category-item img {
  height: auto;
  user-select: none;
}

.category-clock {
  top: 6.388889%;
  left: 32.916667%;
  width: 34.166667%;
}

.category-signal {
  top: 9.027778%;
  left: 69.166667%;
  width: 14.166667%;
}

.category-battery {
  top: 9.166667%;
  left: 16.666667%;
  width: 14.166667%;
}

.category-item {
  width: 33.333333%;
}

.category-item-children {
  top: 23.333333%;
  left: 12.222222%;
  aspect-ratio: 120 / 120;
}

.category-item-story {
  top: 23.333333%;
  left: 54.166667%;
  aspect-ratio: 120 / 120;
}

.category-item-guoxue {
  top: 71.666667%;
  left: 12.222222%;
  aspect-ratio: 120 / 103;
}

.category-item-english {
  top: 71.666667%;
  left: 54.166667%;
  aspect-ratio: 120 / 103;
}

.category-icon {
  inset: 0 auto auto 0;
  width: 100%;
}

.category-label {
  top: 100%;
  left: 25%;
  width: 50%;
}

.category-item-children,
.category-item-story {
  cursor: pointer;
}

.story-category .pet-screen {
  position: relative;
  overflow: hidden;
}

.story-scroll {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    #000 25%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    #000 25%,
    #000 100%
  );
}

.story-scroll::-webkit-scrollbar {
  display: none;
}

.story-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 120%;
  pointer-events: none;
}

.story-title,
.story-item,
.story-item img {
  position: absolute;
  display: block;
}

.story-title,
.story-item img {
  height: auto;
  user-select: none;
}

.story-title {
  z-index: 2;
  top: 9.722222%;
  left: 41.666667%;
  width: 16.666667%;
}

.story-item {
  width: 33.333333%;
  aspect-ratio: 124 / 160;
  cursor: pointer;
}

.story-item-bedtime {
  top: 27.777778%;
  left: 10.555556%;
}

.story-item-adventure {
  top: 27.777778%;
  left: 56.111111%;
}

.story-item-books {
  top: 72.222222%;
  left: 10.555556%;
}

.story-item-fantasy {
  top: 72.222222%;
  left: 56.111111%;
}

.story-icon {
  top: 0;
  left: 0;
  width: 100%;
}

.story-label {
  top: 66%;
  left: 0;
  width: 100%;
}

.story-label-adventure {
  width: 100%;
}

.story-text-label {
  position: absolute;
  top: 66%;
  left: 0;
  width: 100%;
  color: #000;
  font-size: clamp(18px, 4.2vw, 30px);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.story-item:focus-visible {
  outline: 3px solid #161321;
  outline-offset: 4px;
}

.play-confirm .pet-screen {
  position: relative;
}

.song-selection-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #000;
}

.song-selection-image {
  position: absolute;
  top: -22.916667%;
  left: -39.444444%;
  display: block;
  width: 190.694444%;
  max-width: none;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.song-selection-star {
  position: absolute;
  z-index: 1;
  top: 22.5%;
  left: 25.138889%;
  width: 48.75%;
  height: 63.611111%;
  border-radius: 4%;
  cursor: pointer;
}

.song-selection-star:focus-visible {
  outline: 3px solid #161321;
  outline-offset: 4px;
}

.confirm-art,
.confirm-action {
  position: absolute;
  display: block;
  height: auto;
}

.confirm-art {
  pointer-events: none;
  user-select: none;
}

.confirm-chicken {
  z-index: 1;
  top: 19.166667%;
  left: 62.777778%;
  width: 25%;
}

.confirm-dialog-frame {
  z-index: 2;
  top: 18.194444%;
  left: 4.305556%;
  width: 91.666667%;
}

.confirm-star {
  z-index: 4;
  top: 27.638889%;
  left: 19.861111%;
  width: 13.611111%;
}

.confirm-notes {
  z-index: 3;
  top: 41.666667%;
  left: 22.222222%;
  width: 7.222222%;
}

.confirm-prompt {
  z-index: 3;
  top: 47.777778%;
  left: 32.361111%;
  width: 38.888889%;
}

.confirm-action {
  z-index: 3;
  width: 24.166667%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.confirm-action img {
  display: block;
  width: 100%;
  height: auto;
}

.confirm-cancel {
  top: 56.111111%;
  left: 26.388889%;
}

.confirm-play {
  top: 56.111111%;
  left: 51.111111%;
}

.music-player .pet-screen {
  position: relative;
  touch-action: none;
}

.player-art,
.player-progress,
.player-control {
  position: absolute;
  display: block;
}

.player-art,
.player-progress img,
.player-control img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.player-cover {
  top: 8.055556%;
  left: 32.777778%;
  width: 34.444444%;
}

.player-title {
  top: 46.805556%;
  left: 35.277778%;
  width: 29.166667%;
}

.player-progress {
  top: 58.333333%;
  left: 17.777778%;
  width: 64.444444%;
}

.player-control {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.player-control img {
  pointer-events: none;
}

.player-previous,
.player-next {
  top: 71.944444%;
  width: 15.555556%;
}

.player-previous {
  left: 15.277778%;
}

.player-next {
  left: 68.888889%;
}

.player-play {
  top: 60.833333%;
  left: 30.833333%;
  width: 38.055556%;
}

.music-library .pet-screen {
  position: relative;
}

.library-title,
.library-entry img {
  position: absolute;
  display: block;
}

.library-title,
.library-entry img {
  height: auto;
  user-select: none;
}

.library-title {
  top: 9.722222%;
  left: 41.25%;
  width: 17.5%;
}

.library-list {
  position: absolute;
  top: 22.5%;
  left: 0;
  width: 100%;
  height: 77.5%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.library-list::-webkit-scrollbar {
  display: none;
}

.library-list.is-dragging,
.library-list.is-dragging .library-entry-star {
  cursor: grabbing;
}

.library-list-content {
  width: 100%;
}

.library-entry {
  position: relative;
  display: block;
  left: 10.833333%;
  width: 78.055556%;
  aspect-ratio: 281 / 92;
}

.library-entry + .library-entry {
  margin-top: 4.444444%;
}

.library-entry img {
  pointer-events: none;
}

.library-frame {
  inset: 0 auto auto 0;
  width: 100%;
}

.library-entry-star {
  cursor: pointer;
}

.library-song-star {
  top: 29.891304%;
  left: 29.359431%;
  width: 41.637011%;
}

.library-song-tigers {
  top: 29.347826%;
  left: 22.419929%;
  width: 55.516014%;
}

.library-song-abc {
  top: 31.521739%;
  left: 28.469751%;
  width: 43.41637%;
}