@scope (body:is([data-ui-release="176"], [data-ui-release="177"])) {
  /* The room, not an empty main wrapper, receives the remaining first-viewport height. */
  :scope[data-active-panel="home"] #avatar-scene {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0 !important;
  }

  :scope[data-active-panel="home"] #main-screen {
    flex: 0 0 auto !important;
    width: 100%;
    padding: 0;
  }

  :scope[data-active-panel="home"] #panel-home {
    width: 100%;
    gap: 0;
  }

  :scope[data-active-panel="home"] #avatar-scene[data-residence] #ant-avatar-wrap {
    width: auto !important;
    height: clamp(122px, 50%, 220px) !important;
    aspect-ratio: 180 / 234;
  }

  :scope[data-active-panel="home"] #avatar-scene[data-residence] #ant-avatar {
    width: 100% !important;
    height: 100% !important;
  }

  /* One compact phrase, one percentage, one bar. There is no empty legacy name column. */
  :scope #asset-title {
    padding-right: 24px !important;
  }

  :scope #asset-title .tier-copy {
    display: grid !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "next pct"
      "track track" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }

  :scope #asset-title .tier-next-label {
    display: block !important;
    grid-area: next !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #191f28 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 18px !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  :scope #asset-title .tier-next-label::after {
    display: none !important;
    content: none !important;
  }

  :scope #asset-title .tier-progress-row {
    display: contents !important;
  }

  :scope #asset-title .tier-progress-track {
    grid-area: track !important;
    height: 6px !important;
    border-radius: 3px !important;
  }

  :scope #asset-title .tier-progress-fill {
    border-radius: 3px !important;
  }

  :scope #asset-title .tier-progress-pct {
    grid-area: pct !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 18px !important;
  }

  /* Keep the fitted layers attached while the whole character performs a motion. */
  :scope #ant-avatar[data-motion-frame] #ant-character-b,
  :scope #avatar-scene[data-ant-action] #ant-character-b {
    animation: none !important;
  }

  :scope #ant-avatar[data-motion-frame="talk"],
  :scope #ant-avatar[data-motion-frame="step-left"],
  :scope #ant-avatar[data-motion-frame="step-right"] {
    animation: antAttachmentMotionV176 920ms cubic-bezier(.2, .8, .2, 1) both !important;
  }

  :scope #ant-avatar[data-motion-frame="celebrate"] {
    animation: antAttachmentCelebrateV176 900ms cubic-bezier(.2, .9, .2, 1) both !important;
  }

  :scope #avatar-scene[data-ant-action="work"] #ant-avatar {
    animation: antAttachmentWorkV176 1.2s cubic-bezier(.2, .8, .2, 1) both !important;
  }

  :scope #avatar-scene[data-ant-action="daytrade"] #ant-avatar {
    animation: antAttachmentTradeV176 1s ease-in-out both !important;
  }

  /* Store semantics: blue primary actions, outlined selections, gray resell. */
  :scope #panel-milestones [data-action-role="buy"],
  :scope #panel-milestones [data-action-role="drive"],
  :scope #panel-milestones [data-action-role="equip"],
  :scope #panel-milestones [data-action-role="unequip"] {
    color: #fff !important;
    background: var(--store-action-color, #3182f6) !important;
    border: 1px solid var(--store-action-color, #3182f6) !important;
    box-shadow: none !important;
  }

  :scope #panel-milestones [data-action-role="unequip"] {
    --store-action-color: #f04452;
  }

  :scope #panel-milestones [data-action-role="select"],
  :scope #panel-milestones [data-action-role="share"] {
    color: #3182f6 !important;
    background: #fff !important;
    border: 1px solid #b8d8ff !important;
    box-shadow: none !important;
  }

  :scope #panel-milestones [data-action-role="resell"] {
    color: #4e5968 !important;
    background: #f2f4f6 !important;
    border: 1px solid #d1d6db !important;
    box-shadow: none !important;
  }

  :scope #panel-milestones [data-action-role]:disabled,
  :scope #panel-milestones [data-action-role="locked"] {
    color: #8b95a1 !important;
    background: #e5e8eb !important;
    border-color: #e5e8eb !important;
    box-shadow: none !important;
  }

  :scope #panel-milestones .cosmetic-card.ready {
    border-color: #b8d8ff !important;
  }

  :scope #panel-milestones .cosmetic-card.equipped {
    border-color: #3182f6 !important;
    background: #edf5ff !important;
  }

  @media (max-width: 699px) {
    :scope[data-active-panel="home"] #main-screen {
      padding: 0;
    }
  }

  @media (max-width: 380px), (max-height: 640px) and (max-width: 699px) {
    :scope #asset-title {
      padding-right: 0 !important;
    }

    :scope[data-active-panel="home"] #avatar-scene,
    :scope[data-active-panel="home"][data-quest-mission="work"] #avatar-scene {
      flex: 1 1 auto !important;
      height: auto !important;
      min-height: 168px !important;
    }

    :scope #panel-home #action-buttons button,
    :scope #panel-home #action-buttons button.action-primary {
      min-height: 54px !important;
      grid-template-rows: 32px 17px !important;
      padding: 3px 2px !important;
    }

    :scope #panel-home #action-buttons button::before,
    :scope #panel-home #action-buttons button.action-primary::before {
      width: 32px !important;
      min-width: 32px !important;
      height: 32px !important;
    }

    :scope #panel-home #action-buttons .action-status {
      display: none !important;
    }

    :scope #home-feature-nav .home-feature-btn {
      min-height: 44px !important;
    }
  }

  @media (min-width: 700px) {
    :scope[data-active-panel="home"] #avatar-scene[data-residence] #ant-avatar-wrap {
      height: clamp(218px, 50%, 300px) !important;
    }
  }

  @media (orientation: landscape) and (max-height: 480px) and (max-width: 699px) {
    :scope[data-active-panel="home"] #avatar-scene,
    :scope[data-active-panel="home"][data-quest-mission="work"] #avatar-scene {
      min-height: 72px !important;
    }

    :scope[data-active-panel="home"][data-quest-mission="work"] #avatar-scene .ant-scene-dialogue {
      inset: 8px auto auto 10px !important;
      width: min(190px, calc(100% - 92px));
      transform: none !important;
    }

    :scope[data-active-panel="home"][data-quest-mission="work"] #avatar-scene :is(.ant-dialogue-kicker, .ant-scene-dialogue small) {
      display: none;
    }
  }

  @media (min-width: 700px) and (max-width: 1099px) {
    :scope[data-active-panel="home"] #main-screen {
      margin-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :scope #ant-avatar[data-motion-frame],
    :scope #avatar-scene[data-ant-action] #ant-avatar {
      animation: none !important;
    }
  }
}

@keyframes antAttachmentMotionV176 {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  34% { transform: translate(-11px, -13px) rotate(-2.5deg) scale(1.08); }
  68% { transform: translate(11px, -6px) rotate(2.5deg) scale(1.045); }
}

@keyframes antAttachmentCelebrateV176 {
  0%, 100% { transform: translateY(0) scale(1); }
  34% { transform: translateY(-21px) scale(1.1); }
  64% { transform: translateY(-8px) scale(1.05); }
}

@keyframes antAttachmentWorkV176 {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  22% { transform: translate(-18px, -12px) rotate(-3deg); }
  48% { transform: translate(27px, -6px) rotate(3deg); }
  72% { transform: translate(36px, -13px) rotate(2deg); }
  88% { transform: translate(8px, -3px) rotate(-1deg); }
}

@keyframes antAttachmentTradeV176 {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  28% { transform: translate(-12px, -8px) rotate(-2deg); }
  58% { transform: translate(18px, -5px) rotate(2deg); }
  82% { transform: translate(5px, -2px) rotate(-1deg); }
}