@media (hover: none) and (pointer: coarse) and (max-width: 1024px) and (orientation: landscape) {
  html,
  body[data-qse-route="/avatar-store"] {
    background: #071a64 !important;
  }

  body[data-qse-route="/avatar-store"] {
    overflow: hidden !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overscroll-behavior: none !important;
  }

  body[data-qse-route="/avatar-store"] main {
    height: 100svh !important;
    min-height: 0 !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    padding: 3.85rem .6rem .45rem !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child {
    min-height: 4.1rem !important;
    height: 4.1rem !important;
    margin-bottom: .46rem !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child h1 {
    font-size: 1.55rem !important;
    line-height: .95 !important;
    white-space: nowrap !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child p,
  body[data-qse-route="/avatar-store"] main > div:first-child button {
    font-size: .55rem !important;
    line-height: 1 !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child button {
    margin-bottom: .28rem !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child > div:last-child {
    border-width: 2px !important;
    border-radius: .82rem !important;
    padding: .28rem .52rem !important;
    box-shadow: 0 3px 0 #b45309 !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child > div:last-child svg {
    width: .74rem !important;
    height: .74rem !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child > div:last-child span {
    font-size: .82rem !important;
    line-height: 1 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 {
    display: grid !important;
    grid-template-columns: 11.6rem minmax(0, 1fr) 12rem !important;
    gap: .55rem !important;
    height: calc(100svh - 8.86rem) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type,
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2),
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-width: 3px !important;
    border-radius: 1rem !important;
    padding: .48rem !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    background: rgba(255,255,255,.96) !important;
    padding: .5rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type > p,
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) > div:first-child p,
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) > div:first-child div:last-child,
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > div:first-child p {
    letter-spacing: .18em !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type > div {
    grid-template-columns: 1fr !important;
    gap: .42rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type button {
    border-width: 2px !important;
    border-radius: .9rem !important;
    min-height: 4.65rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type button > div {
    aspect-ratio: 16 / 9 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type button div div {
    padding: .55rem !important;
    padding-top: 1.6rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) > div:first-child {
    margin-bottom: .5rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) [class*="space-y"] {
    gap: .6rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) [class*="grid-cols"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .42rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) button {
    border-width: 2px !important;
    border-radius: .92rem !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) button > div {
    aspect-ratio: 3 / 3.7 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) button > div > div {
    padding: .48rem !important;
    padding-top: 2rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 h2 {
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 p {
    font-size: .52rem !important;
    line-height: 1.08 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 .text-lg {
    font-size: .74rem !important;
    line-height: 1 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 .text-xs,
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 .text-\[10px\] {
    font-size: .46rem !important;
    line-height: 1.05 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside > div:first-child {
    margin-bottom: .38rem !important;
    border-width: 2px !important;
    border-radius: .95rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside > div:first-child [class*="aspect-"] {
    max-height: 8.35rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside h2 {
    font-size: .94rem !important;
    line-height: 1 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside p {
    font-size: .46rem !important;
    line-height: 1.08 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside .mt-4 {
    margin-top: .42rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside .rounded-3xl.bg-slate-100 {
    border-radius: .9rem !important;
    padding: .44rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside .grid.grid-cols-3 {
    gap: .32rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside .grid.grid-cols-3 button {
    border-radius: .58rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside .grid.grid-cols-3 button > div:last-child {
    padding: .28rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside video {
    height: 3.25rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside button.mt-5,
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside .mt-5 {
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    margin-top: .46rem !important;
    font-size: .54rem !important;
    border-radius: .7rem !important;
    box-shadow: 0 3px 0 #b45309 !important;
  }

  body[data-qse-route="/avatar-store"] .fixed.bottom-4.left-4 {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 820px) and (orientation: landscape) {
  body[data-qse-route="/avatar-store"] main {
    padding: 3.58rem .48rem .36rem !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child {
    min-height: 3.35rem !important;
    height: 3.35rem !important;
    margin-bottom: .34rem !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child h1 {
    font-size: 1.05rem !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child p,
  body[data-qse-route="/avatar-store"] main > div:first-child button {
    font-size: .42rem !important;
  }

  body[data-qse-route="/avatar-store"] main > div:first-child > div:last-child {
    padding: .22rem .42rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 {
    grid-template-columns: 9.8rem minmax(0, 1fr) 9.7rem !important;
    gap: .36rem !important;
    height: calc(100svh - 7.63rem) !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type,
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2),
  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside {
    border-width: 2px !important;
    border-radius: .86rem !important;
    padding: .36rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:first-of-type button {
    min-height: 4.15rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) [class*="grid-cols"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .34rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > section:nth-of-type(2) button > div {
    aspect-ratio: 3 / 3.45 !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 h2 {
    font-size: .78rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 p {
    font-size: .42rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 .text-lg {
    font-size: .58rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside > div:first-child [class*="aspect-"] {
    max-height: 6.35rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside h2 {
    font-size: .72rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid.gap-5 > aside video {
    height: 2.8rem !important;
  }
}