.fox-character {
  position: absolute;
  top: var(--bar-height, 43px);
  left: 50%;
  width: min(88vw, calc((100vh - 44px) * .9));
  width: min(88vw, calc((100dvh - 44px) * .9));
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
  user-select: none;
  -webkit-user-select: none;
}

.fox-body, .fox-eyes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.fox-body { object-fit: contain; }
.fox-eyes { overflow: visible; }
.fox-pupil { will-change: transform; }
.fox-lids { opacity: 0; }
.fox-character.is-blinking .fox-lids { opacity: 1; }
.fox-character.is-blinking .fox-pupil { opacity: 0; }

@media (max-width: 600px) {
  .fox-character {
    top: auto;
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 50px));
    width: min(100vw, calc((100vh - 218px) * .667));
    width: min(100vw, calc((100dvh - 218px) * .667));
  }
  .desktop-files {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    top: calc(var(--bar-height) + env(safe-area-inset-top) + 14px);
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
  }
  .desktop-column { display: contents; }
  .desktop-file { width: 100%; pointer-events: auto; }
}

@media (max-height: 510px) and (min-width: 601px) {
  .fox-character {
    width: min(66vw, calc((100vh - 44px) * .9));
    width: min(66vw, calc((100dvh - 44px) * .9));
  }
}

@media (pointer: coarse) {
  .window-header { min-height: 49px; }
  .window-control { width: 44px; height: 44px; }
  .window-controls { left: 4px; }
  .dock-file { width: 44px; height: 44px; }
}