:root {
  color-scheme: light;
}

img {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

html,
body,
body * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

input,
textarea,
select,
[contenteditable="true"],
[contenteditable="true"] * {
  user-select: text !important;
  -webkit-user-select: text !important;
}

.screen.ranking {
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0068b7 !important;
  overflow: hidden !important;
  transform: none !important;
}

.screen.ranking::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../mcp/exact/ranking/ranking-pattern-exact.png?v=20260415-1') !important;
  background-repeat: repeat !important;
  background-size: calc(36px * var(--figma-stage-scale)) calc(36px * var(--figma-stage-scale)) !important;
  opacity: 0.2 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.ranking .topbar,
.screen.ranking .topbar.is-dark {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

.screen.ranking .topbar__button,
.screen.ranking .topbar__slot {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.ranking .topbar__brand,
.screen.ranking .topbar__brand-lockup,
.screen.ranking .topbar__brand-image {
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.screen.screen--landing .landing__actions .cta {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.screen.screen--landing .landing__actions {
  position: absolute !important;
  left: 50% !important;
  top: var(--landing-actions-top) !important;
  bottom: auto !important;
  width: min(327px, calc(100% - 72px)) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  gap: 0 !important;
  z-index: 4 !important;
}

.screen.screen--landing .landing__actions > .cta--social {
  margin: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.screen.screen--landing .landing__actions > .cta--social::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--interactive-fill-size) !important;
  height: 100% !important;
  background: rgba(0, 0, 0, var(--interactive-fill-opacity)) !important;
  pointer-events: none !important;
  transition: width 180ms ease !important;
  z-index: 1 !important;
}

.screen.screen--landing .landing__actions > .cta--social .cta__image {
  position: relative !important;
  z-index: 0 !important;
}

.screen.screen--landing .landing__actions > .cta--social + .cta--social {
  margin-top: 8px !important;
}

.screen.screen--landing .landing__notice {
  position: absolute !important;
  left: 50% !important;
  top: var(--landing-notice-top) !important;
  bottom: auto !important;
  width: min(327px, calc(100% - 72px)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  z-index: 4 !important;
}

.topbar__button[aria-label="back"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--figma-topbar-icon-size) !important;
  height: var(--figma-topbar-icon-size) !important;
  min-width: var(--figma-topbar-icon-size) !important;
  min-height: var(--figma-topbar-icon-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.topbar__button[aria-label="back"] .topbar__icon {
  display: block !important;
  width: var(--figma-topbar-icon-size) !important;
  height: var(--figma-topbar-icon-size) !important;
  object-fit: contain !important;
  filter: none !important;
}

.member-form-screen__body {
  padding-top: calc(var(--safe-top) + 118px) !important;
  padding-bottom: 25px !important;
}

.member-form-screen .member-line__input {
  font-variant-numeric: tabular-nums !important;
}

.member-form-screen .member-line__input--address-trigger[data-action="open-address-search"] {
  cursor: pointer !important;
  caret-color: transparent !important;
}

.member-form-screen .member-line__input[readonly],
.member-form-screen .member-line__input[aria-readonly="true"] {
  user-select: text !important;
}

.member-form-screen .member-address-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
}

.member-form-screen .member-address-row__hint {
  margin: 6px 0 0 !important;
  color: #8c8c8c !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 16px !important;
  letter-spacing: -0.24px !important;
}

.member-form-screen .member-line--address {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.member-form-screen .member-line--address .member-line__input {
  min-width: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.member-form-screen .member-address-row__search {
  position: static !important;
  flex: 0 0 109px !important;
  width: 109px !important;
  min-width: 109px !important;
}

.member-form-screen .member-address-row__search:disabled {
  opacity: 0.42 !important;
  cursor: default !important;
}

.member-form-screen .screen__footer {
  padding-top: 10px !important;
  padding-bottom: 44px !important;
}

html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: block !important;
}

.screen.register-screen {
  display: flex !important;
  flex-direction: column !important;
  min-height: var(--device-height) !important;
  height: auto !important;
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.screen.register-screen .topbar,
.screen.register-screen .menu-topbar {
  display: block !important;
}

.register-screen__body,
.register-screen__body .page-title--brand {
  width: calc(var(--figma-stage-width) - 90px) !important;
  max-width: calc(var(--figma-stage-width) - 90px) !important;
}

.screen.register-screen .register-screen__body {
  flex: 0 0 auto !important;
  padding-top: calc(var(--safe-top) + 102px) !important;
}

.screen.register-screen .register-screen__body .page-title--brand {
  font-size: 24px !important;
}

.screen.register-screen .screen__footer {
  flex: 0 0 auto !important;
}

.screen.register-screen .register-guide-image {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin-top: calc(48px * var(--figma-stage-scale)) !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

.screen.register-screen .register-screen__reward-copy,
.screen.register-screen .register-screen__reward-image {
  display: none !important;
}

.screen.register-screen .register-guide-image__asset {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.screen.register-screen.register-screen--mascot-register .register-screen__reward-copy {
  display: block !important;
  width: calc(275px * var(--figma-stage-scale)) !important;
  max-width: calc(275px * var(--figma-stage-scale)) !important;
  margin: 54px auto 0 !important;
  color: #2a2a2b !important;
  font-family: 'esamanru OTF', sans-serif !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  white-space: normal !important;
}

.screen.register-screen.register-screen--mascot-register .register-screen__reward-image {
  display: none !important;
}

.screen.register-screen.register-screen--mascot-register .register-screen__reward-copy-asset {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.screen.register-screen.register-screen--mascot-register .register-guide-image {
  margin-top: calc(48px * var(--figma-stage-scale)) !important;
}

.screen.register-screen .register-screen__notice-footer {
  flex: 0 0 auto !important;
  width: calc(var(--figma-stage-width) - 48px) !important;
  max-width: calc(var(--figma-stage-width) - 48px) !important;
  margin: calc(16px * var(--figma-stage-scale)) auto calc(28px * var(--figma-stage-scale)) !important;
  padding: calc(16px * var(--figma-stage-scale)) calc(18px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #f4f5f7 !important;
  color: #2a2a2b !important;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
  word-break: keep-all !important;
}

.screen.register-screen .register-screen__notice-footer h2 {
  margin: 0 0 calc(8px * var(--figma-stage-scale)) !important;
  color: #111827 !important;
  font-size: calc(13px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(18px * var(--figma-stage-scale)) !important;
}

.screen.register-screen .register-screen__notice-footer ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.screen.register-screen .register-screen__notice-footer li {
  margin: 0 !important;
  padding-left: calc(9px * var(--figma-stage-scale)) !important;
  text-indent: calc(-9px * var(--figma-stage-scale)) !important;
  color: #4b5563 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 400 !important;
  line-height: calc(18px * var(--figma-stage-scale)) !important;
  letter-spacing: 0 !important;
}

.screen.register-screen .register-screen__notice-footer li::before {
  content: "·";
  display: inline-block !important;
  width: calc(9px * var(--figma-stage-scale)) !important;
  text-indent: 0 !important;
}

.register-input {
  min-height: 50px !important;
  height: 50px !important;
  margin-top: 12px !important;
  padding: 0 16px !important;
}

.screen.register-screen .register-input:focus-within {
  border-color: var(--brand) !important;
}

.register-input__field {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.register-screen__body .cta {
  min-height: 52px !important;
  height: 52px !important;
  margin-top: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
}

.topbar__button,
.screen .home-flow-nav__button {
  transition:
    background-color 220ms ease,
    filter 220ms ease,
    box-shadow 220ms ease,
    transform 180ms ease,
    opacity 180ms ease !important;
  opacity: 1 !important;
}

.topbar__button--back {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topbar__button--back .topbar__icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

@media (hover: hover) and (pointer: fine) {
  .topbar__button:hover,
  .screen .home-flow-nav__button:hover {
    background-color: rgba(0, 0, 0, 0.18) !important;
    filter: brightness(0.9) !important;
    box-shadow: 0 calc(6px * var(--figma-stage-scale, 1)) calc(14px * var(--figma-stage-scale, 1)) rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px) !important;
  }
}

.topbar__button:active,
.screen .home-flow-nav__button:active {
  background-color: rgba(0, 0, 0, 0.22) !important;
  filter: brightness(0.86) !important;
  box-shadow: 0 calc(3px * var(--figma-stage-scale, 1)) calc(8px * var(--figma-stage-scale, 1)) rgba(0, 0, 0, 0.18) !important;
  transform: translateY(0) scale(1) !important;
}

.package-choice,
.package-choice__card-image,
.package-screen__footer .cta {
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    filter 180ms ease,
    background-color 180ms ease,
    color 180ms ease !important;
}

.package-choice {
  will-change: transform, opacity, filter !important;
}

.package-choice-grid.has-selection .package-choice.is-selected {
  transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .package-choice:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .package-choice-grid.has-selection .package-choice.is-selected:hover {
    filter: none !important;
  }

}

.package-choice:active,
.package-choice.is-pressing {
  transform: none !important;
  box-shadow: none !important;
}

.package-choice-grid.has-selection .package-choice.is-selected:active,
.package-choice-grid.has-selection .package-choice.is-selected.is-pressing {
  filter: none !important;
}


.screen.ranking .ranking__hero {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  display: block !important;
  width: var(--figma-stage-width) !important;
  height: calc(452px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 3 !important;
}

.screen.ranking .ranking__hero-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: var(--figma-stage-width) !important;
  height: calc(340px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  object-fit: fill !important;
  object-position: center top !important;
  user-select: none !important;
  pointer-events: none !important;
}

.screen.ranking .ranking__back {
  position: absolute !important;
  top: calc(382px * var(--figma-stage-scale)) !important;
  left: calc(12px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  z-index: 4 !important;
}

.screen.ranking .ranking__back img {
  display: block !important;
  width: calc(13.0833px * var(--figma-stage-scale)) !important;
  height: calc(24.1667px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-podium {
  position: absolute !important;
  width: calc(109px * var(--figma-stage-scale)) !important;
  height: calc(152px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  text-align: center !important;
}

.screen.ranking .ranking-podium--primary {
  top: calc(157px * var(--figma-stage-scale)) !important;
  left: calc(133px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--secondary {
  top: calc(215px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--tertiary {
  top: calc(246px * var(--figma-stage-scale)) !important;
  left: calc(250px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium__plate {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: calc(109px * var(--figma-stage-scale)) !important;
  height: calc(152px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-podium__copy {
  position: absolute !important;
  top: calc(12px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.ranking .ranking-podium--tertiary .ranking-podium__copy {
  top: calc(14px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium__copy strong {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium__copy span,
.screen.ranking .ranking-podium__copy em {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: 0 !important;
}

.screen.ranking .ranking-podium__copy span b,
.screen.ranking .ranking-podium__copy em b {
  color: #0068b7 !important;
  font-weight: 500 !important;
}

.screen.ranking .ranking-podium__medal {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  z-index: 3 !important;
}

.screen.ranking .ranking-podium--primary .ranking-podium__medal {
  top: calc(91px * var(--figma-stage-scale)) !important;
  left: calc(33px * var(--figma-stage-scale)) !important;
  width: calc(43px * var(--figma-stage-scale)) !important;
  height: calc(61px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--secondary .ranking-podium__medal {
  top: calc(90px * var(--figma-stage-scale)) !important;
  left: calc(32px * var(--figma-stage-scale)) !important;
  width: calc(44px * var(--figma-stage-scale)) !important;
  height: calc(62px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--tertiary .ranking-podium__medal {
  top: calc(99px * var(--figma-stage-scale)) !important;
  left: calc(33px * var(--figma-stage-scale)) !important;
  width: calc(43px * var(--figma-stage-scale)) !important;
  height: calc(61px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking__sheet {
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: 0 !important;
  height: calc(360px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: calc(29px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) calc(30px * var(--figma-stage-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  background: #fff !important;
  border-radius: calc(32px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) 0 0 !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

.screen.ranking .ranking-row {
  display: grid !important;
  grid-template-columns: calc(20px * var(--figma-stage-scale)) calc(30px * var(--figma-stage-scale)) minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  min-height: calc(21px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.ranking .ranking-row + .ranking-row {
  margin-top: 0 !important;
}

.screen.ranking .ranking-row__rank,
.screen.ranking .ranking-row__name,
.screen.ranking .ranking-row__points {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-row__rank {
  width: calc(20px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.ranking .ranking-row__team {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-row__team img {
  display: block !important;
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-row__name {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.screen.ranking .ranking-row__points {
  text-align: right !important;
}

.screen.ranking .ranking-row__points strong {
  color: #0068b7 !important;
  font-weight: 500 !important;
}

.screen.ranking .ranking__pager {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(30px * var(--figma-stage-scale)) !important;
  width: calc(68px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  display: block !important;
  z-index: 2 !important;
  filter: none !important;
}

.screen.predict-screen.predict-screen--blocked {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

.screen.predict-screen.predict-screen--blocked::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(92px * var(--figma-stage-scale)) !important;
  background: transparent !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

.screen.predict-screen.predict-screen--blocked .topbar {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

.screen.predict-screen.predict-screen--blocked .screen__body {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.screen.predict-screen.predict-screen--blocked .predict--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.screen.predict-screen.predict-screen--blocked .hero-copy {
  position: absolute !important;
  top: calc(136px * var(--figma-stage-scale)) !important;
  left: calc(54px * var(--figma-stage-scale)) !important;
  width: calc(266px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.predict-screen.predict-screen--blocked .page-title {
  width: calc(108px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.predict-screen.predict-screen--blocked .predict-copy {
  width: calc(266px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.predict-screen.predict-screen--blocked .predict-meta {
  position: absolute !important;
  top: calc(236px * var(--figma-stage-scale)) !important;
  left: calc(15px * var(--figma-stage-scale)) !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.predict-screen.predict-screen--blocked .predict-meta__note {
  width: calc(116px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen.predict-screen--blocked .predict-board {
  position: absolute !important;
  top: calc(268px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(532px * var(--figma-stage-scale)) !important;
  max-height: calc(532px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 0 !important;
  background: #333 !important;
  overflow: hidden !important;
}

.screen.predict-screen.predict-screen--blocked .predict-list {
  height: 100% !important;
  max-height: calc(532px * var(--figma-stage-scale)) !important;
  padding: 0 0 calc(148px * var(--figma-stage-scale)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}

.screen.predict-screen.predict-screen--blocked .predict-list::-webkit-scrollbar {
  display: none !important;
}

.screen.predict-screen.predict-screen--blocked .predict-card {
  padding: calc(16px * var(--figma-stage-scale)) 0 0 !important;
}

.screen.predict-screen.predict-screen--blocked .predict-card__head,
.screen.predict-screen.predict-screen--blocked .predict-row,
.screen.predict-screen.predict-screen--blocked .predict-locked-card,
.screen.predict-screen.predict-screen--blocked .predict-history-row {
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.screen.predict-screen.predict-screen--blocked .predict-history-row {
  min-height: calc(53px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
}

.screen.predict-screen.predict-screen--blocked .predict-card__badge,
.screen.predict-screen.predict-screen--blocked .predict-history-row__badge {
  min-width: calc(82px * var(--figma-stage-scale)) !important;
  height: calc(29px * var(--figma-stage-scale)) !important;
  padding: 0 calc(10px * var(--figma-stage-scale)) !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen.predict-screen--blocked .screen__footer {
  position: absolute !important;
  top: auto !important;
  left: var(--figma-cta-side-gap) !important;
  right: auto !important;
  bottom: calc(104px * var(--figma-stage-scale)) !important;
  width: var(--figma-cta-width) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: none !important;
  overflow: visible !important;
  z-index: 7 !important;
}

.screen.predict-screen.predict-screen--blocked .screen__footer::before {
  content: "" !important;
  position: absolute !important;
  top: calc(-56px * var(--figma-stage-scale)) !important;
  left: calc(-29px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(184px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 24%, rgba(255, 255, 255, 0.68) 58%, #fff 82%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.predict-screen.predict-screen--blocked .screen__footer .cta {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--figma-cta-width) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.screen.predict-screen.predict-screen--blocked .predict-footer-note {
  position: absolute !important;
  top: calc(58px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(159px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 7 !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

/* predict blocked final anchor refresh */
.screen.predict-screen.predict-screen--blocked .hero-copy {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.screen.predict-screen.predict-screen--blocked .screen__footer {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.screen.lineup-screen {
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.screen.lineup-screen .topbar,
.screen.lineup-screen .topbar.is-light {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

.screen.lineup-screen .screen__body {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.lineup-screen .lineup--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.lineup-screen .page-title {
  position: absolute !important;
  top: calc(118px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: auto !important;
  min-width: calc(180px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
}

.screen.lineup-screen .lineup-copy {
  position: absolute !important;
  top: calc(154px * var(--figma-stage-scale)) !important;
  left: calc(27px * var(--figma-stage-scale)) !important;
  width: calc(321px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  z-index: 3 !important;
}

.screen.lineup-screen .lineup-field {
  position: absolute !important;
  top: calc(230px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.screen.lineup-screen .lineup-field__image {
  position: absolute !important;
  top: calc(28px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  display: block !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(306px * var(--figma-stage-scale)) !important;
  object-fit: fill !important;
  z-index: 0 !important;
}

.screen.lineup-screen .lineup-slot {
  position: absolute !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: calc(54px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  padding-top: calc(18px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  background:
    url("../mcp/exact/lineup/lineup-slot-shadow.svg?v=20260415-1") center / calc(54px * var(--figma-stage-scale)) calc(86px * var(--figma-stage-scale)) no-repeat,
    url("../mcp/exact/lineup/lineup-slot-inner.svg?v=20260415-1") center / calc(48.7054px * var(--figma-stage-scale)) calc(78.7658px * var(--figma-stage-scale)) no-repeat,
    url("../mcp/exact/lineup/lineup-slot-shell.svg?v=20260415-1") center / calc(54px * var(--figma-stage-scale)) calc(86px * var(--figma-stage-scale)) no-repeat !important;
  box-shadow: none !important;
  z-index: 2 !important;
  overflow: visible !important;
  isolation: auto !important;
  --material-hover-opacity: 0 !important;
  --material-ripple-opacity: 0 !important;
  --material-ripple-size: 0px !important;
}

.screen.lineup-screen .lineup-slot span {
  position: relative !important;
  display: block !important;
  transform: none !important;
  opacity: 1 !important;
  color: #0068b7 !important;
  -webkit-text-fill-color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  z-index: 1 !important;
}

.screen.lineup-screen .lineup-slot--cf { top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; }
.screen.lineup-screen .lineup-slot--lf { top: calc(47px * var(--figma-stage-scale)) !important; left: calc(20px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--rf { top: calc(47px * var(--figma-stage-scale)) !important; right: calc(18px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--ss { top: calc(82px * var(--figma-stage-scale)) !important; left: calc(83px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--2b { top: calc(82px * var(--figma-stage-scale)) !important; right: calc(82px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--p { top: calc(146px * var(--figma-stage-scale)) !important; left: 50% !important; transform: translateX(-50%) !important; }
.screen.lineup-screen .lineup-slot--3b { top: calc(170px * var(--figma-stage-scale)) !important; left: calc(44px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--1b { top: calc(170px * var(--figma-stage-scale)) !important; right: calc(45px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--dh { top: calc(257px * var(--figma-stage-scale)) !important; left: 0 !important; }
.screen.lineup-screen .lineup-slot--c { top: calc(257px * var(--figma-stage-scale)) !important; left: 50% !important; transform: translateX(-50%) !important; }

.screen.lineup-screen .lineup-slot.is-assigned,
.screen.lineup-screen .lineup-slot.is-current {
  padding-top: 0 !important;
  background: none !important;
}

.screen.lineup-screen .lineup-slot__card-image {
  display: block !important;
  width: calc(54px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  border-radius: calc(4px * var(--figma-stage-scale)) !important;
  object-fit: cover !important;
}

.screen.lineup-screen .lineup-slot.is-previewing-card {
  padding-top: 0 !important;
  background: none !important;
}

.screen.lineup-screen .lineup-slot.is-previewing-card > span,
.screen.lineup-screen .lineup-slot.is-previewing-card > .lineup-slot__card-image:not(.lineup-slot__card-image--preview) {
  opacity: 0 !important;
}

.screen.lineup-screen .lineup-slot__card-image--preview {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

.screen.lineup-screen .lineup-badge {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: calc(9px * var(--figma-stage-scale)) !important;
  left: auto !important;
  width: calc(60px * var(--figma-stage-scale)) !important;
  height: calc(60px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  display: block !important;
  z-index: 3 !important;
}

.screen.lineup-screen .lineup-badge__logo {
  display: block !important;
  width: calc(60px * var(--figma-stage-scale)) !important;
  height: calc(60px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.lineup-screen .lineup-card-strip {
  position: absolute !important;
  top: calc(630px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  display: flex !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(114px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: calc(18px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 2 !important;
}

.screen.lineup-screen .lineup-card-strip::-webkit-scrollbar {
  display: none !important;
}

.screen.lineup-screen .lineup-card-option {
  position: relative !important;
  flex: 0 0 calc(58px * var(--figma-stage-scale)) !important;
  width: calc(58px * var(--figma-stage-scale)) !important;
  min-width: calc(58px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  opacity: 1 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: flex-start !important;
  touch-action: pan-x !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  will-change: transform, opacity !important;
  overflow: visible !important;
}

.screen.lineup-screen .lineup-card-option img {
  display: block !important;
  width: calc(54px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  border-radius: calc(4px * var(--figma-stage-scale)) !important;
  object-fit: cover !important;
  box-shadow: none !important;
  transition: filter 180ms ease, opacity 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

.screen.lineup-screen .lineup-card-option .lineup-card-option__meta {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: grid !important;
  justify-items: center !important;
  gap: calc(1px * var(--figma-stage-scale)) !important;
  width: calc(58px * var(--figma-stage-scale)) !important;
  min-height: calc(30px * var(--figma-stage-scale)) !important;
  margin-top: calc(4px * var(--figma-stage-scale)) !important;
  color: #282828 !important;
  text-align: center !important;
  text-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.screen.lineup-screen .lineup-card-option__name,
.screen.lineup-screen .lineup-card-option__position {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

.screen.lineup-screen .lineup-card-option__name {
  color: #282828 !important;
  font-size: calc(10px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(13px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-card-option__position {
  color: #0068b7 !important;
  font-size: calc(9px * var(--figma-stage-scale)) !important;
  font-weight: 600 !important;
  line-height: calc(11px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-field__image,
.screen.lineup-screen .lineup-slot__card-image {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

.screen.lineup-screen .lineup-card-option.is-selected {
  position: relative !important;
  z-index: 9 !important;
  transform: translateY(calc(-6px * var(--figma-stage-scale))) !important;
}

.screen.lineup-screen .lineup-card-option.is-selected img {
  filter: none !important;
  box-shadow: none !important;
}

.screen.lineup-screen .lineup-card-option.is-assigned img {
  filter: brightness(0.84) saturate(0.98) !important;
}

.screen.lineup-screen .lineup-card-option.is-dragging {
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

.lineup-card-option--drag-ghost {
  position: fixed !important;
  z-index: 9999 !important;
  display: block !important;
  width: calc(54px * var(--figma-stage-scale, 1)) !important;
  min-width: calc(54px * var(--figma-stage-scale, 1)) !important;
  height: calc(86px * var(--figma-stage-scale, 1)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(4px * var(--figma-stage-scale, 1)) !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) rotate(-2deg) scale(1.06) !important;
  filter: none !important;
  box-shadow: none !important;
}

.lineup-card-option--drag-ghost.is-slot-snapping {
  width: var(--lineup-drag-slot-width, calc(54px * var(--figma-stage-scale, 1))) !important;
  min-width: var(--lineup-drag-slot-width, calc(54px * var(--figma-stage-scale, 1))) !important;
  height: var(--lineup-drag-slot-height, calc(86px * var(--figma-stage-scale, 1))) !important;
  transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
  transition:
    left 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    top 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 120ms ease !important;
}

.lineup-card-option--drag-ghost.is-slot-snapped {
  opacity: 0 !important;
}

.lineup-card-option--drag-ghost img {
  display: block !important;
  width: calc(54px * var(--figma-stage-scale, 1)) !important;
  height: calc(86px * var(--figma-stage-scale, 1)) !important;
  border-radius: calc(4px * var(--figma-stage-scale, 1)) !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

.lineup-card-option--drag-ghost .lineup-card-option__meta {
  display: none !important;
}

.lineup-card-option--drag-ghost.is-slot-snapping img {
  width: 100% !important;
  height: 100% !important;
}

.screen.lineup-screen .lineup-slot.is-drop-target .lineup-slot__card-image,
.screen.lineup-screen .lineup-slot.is-drop-target {
  filter: brightness(1.1) saturate(1.08) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .game-hero,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-badge,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-action {
  opacity: 0.54 !important;
  transition: opacity 180ms ease !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-field__image {
  filter: brightness(0.74) saturate(0.86) !important;
  transition: filter 180ms ease !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot {
  --lineup-slot-hint-outline: rgba(255, 255, 255, 0.96);
  --lineup-slot-hint-glow: rgba(0, 104, 183, 0.42);
  --lineup-slot-hint-strong-outline: rgba(255, 255, 255, 0.98);
  --lineup-slot-hint-strong-glow: rgba(0, 104, 183, 0.62);
  --lineup-slot-hint-press-outline: rgba(255, 255, 255, 0.98);
  --lineup-slot-hint-press-glow: rgba(0, 104, 183, 0.58);
  --lineup-slot-hint-ring:
    0 0 0 calc(2px * var(--figma-stage-scale)) var(--lineup-slot-hint-outline),
    0 0 calc(18px * var(--figma-stage-scale)) var(--lineup-slot-hint-glow);
  --lineup-slot-hint-strong-ring:
    0 0 0 calc(3px * var(--figma-stage-scale)) var(--lineup-slot-hint-strong-outline),
    0 0 calc(24px * var(--figma-stage-scale)) var(--lineup-slot-hint-strong-glow);
  --lineup-slot-hint-press-ring:
    0 0 0 calc(3px * var(--figma-stage-scale)) var(--lineup-slot-hint-press-outline),
    0 0 calc(22px * var(--figma-stage-scale)) var(--lineup-slot-hint-press-glow);
  opacity: 1 !important;
  transition:
    opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible {
  opacity: 1 !important;
  z-index: 8 !important;
  filter: brightness(1.1) saturate(1.08) !important;
  box-shadow: var(--lineup-slot-hint-ring) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible:not(.lineup-slot--cf):not(.lineup-slot--p):not(.lineup-slot--c) {
  transform: translateY(calc(-1px * var(--figma-stage-scale))) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--cf,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--p,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--c {
  transform: translateX(-50%) translateY(calc(-1px * var(--figma-stage-scale))) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-drop-target,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-drop-target .lineup-slot__card-image {
  opacity: 1 !important;
  filter: brightness(1.1) saturate(1.08) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-drop-target {
  box-shadow: var(--lineup-slot-hint-ring) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-card-option:not(.is-selected):not(.is-dragging) {
  opacity: 0.46 !important;
  filter: brightness(0.82) saturate(0.9) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-card-option.is-selected {
  opacity: 1 !important;
  filter: none !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-card-option.is-dragging {
  opacity: 0 !important;
  filter: none !important;
  transition: none !important;
}

.screen.lineup-screen .lineup-slot.is-drop-target,
.screen.lineup-screen .lineup-slot.is-drop-target .lineup-slot__card-image {
  opacity: 1 !important;
  filter: brightness(1.1) saturate(1.08) !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot:hover,
  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot:hover .lineup-slot__card-image {
    opacity: 1 !important;
    filter: brightness(1.1) saturate(1.08) !important;
  }

  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot:hover {
    box-shadow: var(--lineup-slot-hint-ring) !important;
  }
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot:active,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-pressing,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot:active .lineup-slot__card-image,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-pressing .lineup-slot__card-image {
  opacity: 1 !important;
  filter: brightness(1.1) saturate(1.08) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot:active,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-pressing {
  box-shadow: var(--lineup-slot-hint-ring) !important;
}

.screen.lineup-screen .screen__footer--lineup {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: var(--figma-stage-width) !important;
  height: calc(82px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4 !important;
}

.screen.lineup-screen .screen__footer--lineup .cta {
  width: var(--figma-stage-width) !important;
  height: calc(82px * var(--figma-stage-scale)) !important;
  min-height: calc(82px * var(--figma-stage-scale)) !important;
  border-radius: 0 !important;
}

.screen.lineup-screen--success .modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 299px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 20 !important;
}

.screen.lineup-screen .modal-card--lineup,
.screen.lineup-screen .modal-card--lineup-success {
  width: 285px !important;
  max-width: 285px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__body,
.screen.lineup-screen .modal-card--lineup-success .modal-card__body--lineup-success {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  padding: 36px 24px 20px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 1 !important;
}

.screen.lineup-screen .modal-card--lineup-success::before,
.screen.lineup-screen .modal-card--lineup-success::after,
.screen.lineup-screen .modal-card--lineup-success .modal-card__body--lineup-success::before,
.screen.lineup-screen .modal-card--lineup-success .modal-card__body--lineup-success::after {
  content: none !important;
  display: none !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__success-copy,
.screen.lineup-screen .modal-card--lineup-success .modal-card__success-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__title,
.screen.lineup-screen .modal-card--lineup-success .modal-card__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
  text-align: center !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__caption--danger {
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
  text-align: center !important;
}

.screen.lineup-screen .modal-card--lineup-success .modal-card__eyebrow {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
  text-align: center !important;
}

.screen.lineup-screen .modal-card--lineup-success .modal-card__caption--neutral {
  margin: 0 !important;
  color: #8c8c8c !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
  text-align: center !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 calc(24px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(16px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
}

.screen.lineup-screen .modal-card--lineup-success .modal-card__footer--single {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  background: #0068b7 !important;
  background-color: #0068b7 !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__button,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single--primary {
  height: 52px !important;
  min-height: 52px !important;
  border: 0 !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  font-size: 16px !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual .modal-card__button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual .modal-card__button:not(.is-primary) {
  background: #f3f4f6 !important;
  color: #2a2a2b !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual .modal-card__button.is-primary {
  background: #0068b7 !important;
  color: #ffffff !important;
}


/* 선발 포지션 — final geometry refresh */
.screen.lineup-screen .topbar,
.screen.lineup-screen .topbar.is-light {
  top: calc(var(--safe-top) + (34px * var(--figma-stage-scale))) !important;
}

.screen.lineup-screen .lineup-slot span {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
}

.screen.lineup-screen--success .modal-backdrop {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: calc(299px * var(--figma-stage-scale)) !important;
  animation: none !important;
  opacity: 1 !important;
}

.screen.lineup-screen .modal-card--lineup,
.screen.lineup-screen .modal-card--lineup-success {
  width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  animation: none !important;
  transform: none !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__body,
.screen.lineup-screen .modal-card--lineup-success .modal-card__body--lineup-success {
  gap: calc(20px * var(--figma-stage-scale)) !important;
  padding: calc(36px * var(--figma-stage-scale)) calc(24px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__success-copy,
.screen.lineup-screen .modal-card--lineup-success .modal-card__success-copy {
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__title,
.screen.lineup-screen .modal-card--lineup-success .modal-card__title {
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__caption--danger,
.screen.lineup-screen .modal-card--lineup-success .modal-card__eyebrow,
.screen.lineup-screen .modal-card--lineup-success .modal-card__caption--neutral {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual,
.screen.lineup-screen .modal-card--lineup-success .modal-card__footer--single {
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__button,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single--primary {
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

/* 경험 공유 목록 — body anchoring fix */
.community-screen--feed .community-screen__body {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  min-height: max(var(--device-height), calc(764px * var(--figma-stage-scale))) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.community-me .screen__footer {
  position: absolute !important;
  left: 45px !important;
  right: auto !important;
  bottom: 42px !important;
  width: 285px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 2 !important;
}

.community-me .screen__footer .cta {
  width: 285px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
}

.community-me__notice {
  position: static !important;
  width: 231px !important;
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 16px !important;
  letter-spacing: -0.24px !important;
  text-align: center !important;
}

/* Status-bar restore pass — final topbar/predict baseline */
.predict-screen .topbar,
.predict-screen .topbar.is-dark,
.screen.points-history-screen .topbar,
.screen.ranking .topbar,
.screen.ranking .topbar.is-dark,
.screen.lineup-screen .topbar,
.screen.lineup-screen .topbar.is-light {
  top: calc(var(--safe-top) + 34px) !important;
}

.screen.lineup-screen .game-hero {
  top: calc(var(--safe-top) + 34px + (30px * var(--figma-stage-scale)) + 40px) !important;
}

.play-screen-direct .topbar {
  top: calc(var(--safe-top) + (70px * var(--figma-stage-scale))) !important;
}

.predict-screen.predict-screen--main .hero-copy,
.predict-screen.predict-screen--picked .hero-copy {
  top: calc(138px * var(--figma-stage-scale)) !important;
}

.predict-screen.predict-screen--main .predict-meta,
.predict-screen.predict-screen--picked .predict-meta {
  top: calc(238px * var(--figma-stage-scale)) !important;
}

.predict-screen.predict-screen--main .predict-board,
.predict-screen.predict-screen--picked .predict-board {
  top: calc(266px * var(--figma-stage-scale)) !important;
}

.predict-screen.predict-screen--main .screen__footer::before,
.predict-screen.predict-screen--picked .screen__footer::before {
  top: calc(-42px * var(--figma-stage-scale)) !important;
  height: calc(170px * var(--figma-stage-scale)) !important;
}

/* Predict board refresh from Figma 248:23288 / 461:30211 */
.predict-screen .predict-meta {
  justify-content: flex-start !important;
}

.predict-screen .predict-meta__note {
  width: auto !important;
}

.predict-board.predict-board--latest {
  border: 1px solid #8c8c8c !important;
  border-radius: 8px !important;
  background: #333333 !important;
  overflow: hidden !important;
}

.predict-board.predict-board--latest .predict-board__scroll {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}

.predict-board.predict-board--latest .predict-board__scroll::-webkit-scrollbar {
  display: none !important;
}

.predict-board.predict-board--latest .predict-board__filter {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 12px 29px 0 !important;
  background: #333333 !important;
}

.predict-filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 285px !important;
  gap: 4px !important;
}

.predict-filter__label {
  color: #b7b7b7 !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 16px !important;
  letter-spacing: -0.24px !important;
}

.predict-filter__checkbox {
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('../mcp/exact/common/predict-filter-checkbox-unchecked.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  position: relative !important;
  cursor: pointer !important;
}

.predict-filter__checkbox:checked {
  background-color: transparent !important;
  background-image: url('../mcp/exact/common/predict-filter-checkbox-checked.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

.predict-filter__checkbox:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 45% !important;
  width: 5px !important;
  height: 9px !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.predict-board.predict-board--latest .predict-board__list {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding-bottom: 160px !important;
  background: #333333 !important;
}

.predict-section {
  background: #333333 !important;
  border-bottom: 1px solid #8c8c8c !important;
  padding: 16px 0 !important;
}

.predict-section__head {
  width: 285px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  text-align: left !important;
  cursor: pointer !important;
}

.predict-section__date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
}

.predict-section__today {
  color: #00b4ed !important;
  font-weight: 500 !important;
}

.predict-section__status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.predict-section__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 82px !important;
  height: 29px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
  box-sizing: border-box !important;
}

.predict-section__badge--success {
  background: #336cff !important;
}

.predict-section__badge--failure {
  background: #f12b2b !important;
}

.predict-section__badge--complete {
  background: #00b4ed !important;
}

.predict-section__badge--available {
  background: #8c8c8c !important;
}

.predict-section__badge--missed {
  background: #8c8c8c !important;
}

.predict-section__chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

.predict-section__chevron img {
  width: 7.5333px !important;
  height: 13.3667px !important;
  display: block !important;
  transform: rotate(90deg) !important;
  transform-origin: center center !important;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.predict-section__chevron.is-open img {
  transform: rotate(-90deg) !important;
}

.predict-section__rows {
  width: 285px !important;
  margin: 12px auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.predict-matchup {
  width: 285px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.predict-matchup__side {
  min-height: 48px !important;
  padding: 4px 16px !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #2a2a2b !important;
  cursor: pointer !important;
}

.predict-matchup__side--left {
  border-right: 1px solid #8c8c8c !important;
}

.predict-matchup__side[disabled] {
  cursor: default !important;
  opacity: 1 !important;
}

.predict-matchup__side.is-selected {
  background: #00b4ed !important;
}

.predict-matchup__side.is-selected .predict-matchup__label {
  color: #ffffff !important;
}

.predict-matchup__content {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.predict-matchup__content--left {
  justify-content: flex-start !important;
}

.predict-matchup__content--right {
  justify-content: flex-end !important;
}

.predict-matchup__logo {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  flex: 0 0 40px !important;
}

.predict-matchup__label {
  min-width: 36px !important;
  color: #2a2a2b !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
  white-space: nowrap !important;
}

/* Predict / lineup rebuild from Figma 243:8740 / 248:27967 / 260:47621 */
.screen.predict-screen.predict-screen--main .screen__body,
.screen.predict-screen.predict-screen--picked .screen__body,
.screen.predict-screen.predict-screen--confirm .screen__body,
.screen.predict-screen.predict-screen--main .predict--figma,
.screen.predict-screen.predict-screen--picked .predict--figma,
.screen.predict-screen.predict-screen--confirm .predict--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.screen.predict-screen .game-hero,
.screen.lineup-screen .game-hero {
  position: absolute !important;
  top: calc(148px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  z-index: 6 !important;
}

.screen.predict-screen .game-hero__copy,
.screen.lineup-screen .game-hero__copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  min-width: 0 !important;
  max-width: calc(196px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .game-hero__title,
.screen.lineup-screen .game-hero__title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.screen.predict-screen .game-hero__note,
.screen.lineup-screen .game-hero__note {
  margin: 0 !important;
  color: #b7b7b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.predict-screen .game-hero__description,
.screen.lineup-screen .game-hero__description {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.predict-screen .game-hero__shortcut,
.screen.lineup-screen .game-hero__shortcut {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: calc(146px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #0068b7 !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.predict-screen.predict-screen--main .predict-board.predict-board--latest,
.screen.predict-screen.predict-screen--picked .predict-board.predict-board--latest,
.screen.predict-screen.predict-screen--confirm .predict-board.predict-board--latest,
.screen.predict-screen.predict-screen--blocked .predict-board.predict-board--latest {
  position: absolute !important;
  top: calc(266px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(546px * var(--figma-stage-scale)) !important;
  max-height: calc(546px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border: 1px solid #8c8c8c !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #333333 !important;
  overflow: hidden !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__filter {
  padding: calc(12px * var(--figma-stage-scale)) calc(29px * var(--figma-stage-scale)) 0 !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__list {
  min-height: 100% !important;
  padding-bottom: calc(160px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-filter {
  gap: 4px !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  justify-content: flex-end !important;
}

.screen.predict-screen .predict-filter__label {
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: -0.24px !important;
}

.screen.predict-screen .predict-filter__checkbox {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-size: 18px 18px !important;
}

.screen.predict-screen .predict-filter__checkbox:checked {
  background-size: 18px 18px !important;
}

.screen.predict-screen .predict-filter__checkbox:checked::after {
  width: 5px !important;
  height: 9px !important;
  border-right-width: 2px !important;
  border-bottom-width: 2px !important;
}

.screen.predict-screen .predict-section {
  padding: calc(16px * var(--figma-stage-scale)) 0 !important;
}

.screen.predict-screen .predict-section__head,
.screen.predict-screen .predict-section__rows {
  width: calc(285px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__rows {
  margin-top: calc(12px * var(--figma-stage-scale)) !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__date {
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
}

.screen.predict-screen .predict-section__badge {
  min-width: 82px !important;
  height: 29px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
}

.screen.predict-screen .predict-section__chevron {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

.screen.predict-screen .predict-section__chevron img {
  width: calc(7.5333px * var(--figma-stage-scale)) !important;
  height: calc(13.3667px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup {
  width: calc(285px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__side {
  min-height: calc(48px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__content {
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__logo {
  width: calc(40px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(40px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__label {
  min-width: calc(36px * var(--figma-stage-scale)) !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup,
.screen.lineup-screen .predict-matchup {
  position: relative !important;
  height: calc(48px * var(--figma-stage-scale)) !important;
  min-height: calc(48px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.screen.predict-screen .predict-matchup__side,
.screen.lineup-screen .predict-matchup__side {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: calc(48px * var(--figma-stage-scale)) !important;
  min-height: calc(48px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.screen.predict-screen .predict-matchup--selected .predict-matchup__side.is-selected,
.screen.lineup-screen .predict-matchup--selected .predict-matchup__side.is-selected {
  background: #ffffff !important;
}

.screen.predict-screen .predict-matchup--selected .predict-matchup__side.is-selected .predict-matchup__label,
.screen.lineup-screen .predict-matchup--selected .predict-matchup__side.is-selected .predict-matchup__label {
  color: #2a2a2b !important;
}

.screen.predict-screen .predict-matchup__content,
.screen.lineup-screen .predict-matchup__content {
  position: relative !important;
  z-index: 1 !important;
}

.screen.predict-screen .predict-matchup__overlay,
.screen.lineup-screen .predict-matchup__overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.screen.predict-screen .predict-matchup__overlay-label,
.screen.lineup-screen .predict-matchup__overlay-label {
  position: relative !important;
  z-index: 1 !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.screen.predict-screen .predict-matchup__overlay--picked,
.screen.lineup-screen .predict-matchup__overlay--picked {
  z-index: 3 !important;
  background: rgba(0, 180, 237, 0.7) !important;
  box-shadow: 0 0 calc(2px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(calc(1px * var(--figma-stage-scale))) !important;
  -webkit-backdrop-filter: blur(calc(1px * var(--figma-stage-scale))) !important;
}

.screen.predict-screen .predict-matchup__overlay--picked .predict-matchup__overlay-label,
.screen.lineup-screen .predict-matchup__overlay--picked .predict-matchup__overlay-label {
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.4) !important;
}

.screen.predict-screen .predict-matchup__overlay--past-winner,
.screen.lineup-screen .predict-matchup__overlay--past-winner {
  z-index: 3 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.screen.predict-screen .predict-matchup__overlay--past-winner .predict-matchup__overlay-label,
.screen.lineup-screen .predict-matchup__overlay--past-winner .predict-matchup__overlay-label {
  color: #d9d9d9 !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.45) !important;
}

.screen.predict-screen .predict-matchup__overlay--side-muted,
.screen.lineup-screen .predict-matchup__overlay--side-muted {
  z-index: 3 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  box-shadow: inset 0 calc(4px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.predict-screen .predict-matchup__overlay--match-muted,
.screen.lineup-screen .predict-matchup__overlay--match-muted {
  z-index: 4 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.screen.predict-screen .predict-matchup__overlay--match-muted::before,
.screen.predict-screen .predict-matchup__overlay--match-muted::after,
.screen.lineup-screen .predict-matchup__overlay--match-muted::before,
.screen.lineup-screen .predict-matchup__overlay--match-muted::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  box-shadow: inset 0 calc(4px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.predict-screen .predict-matchup__overlay--match-muted::before,
.screen.lineup-screen .predict-matchup__overlay--match-muted::before {
  left: 0 !important;
}

.screen.predict-screen .predict-matchup__overlay--match-muted::after,
.screen.lineup-screen .predict-matchup__overlay--match-muted::after {
  right: 0 !important;
}

.screen.predict-screen .predict-matchup__overlay--unavailable,
.screen.lineup-screen .predict-matchup__overlay--unavailable {
  z-index: 5 !important;
  padding: calc(10px * var(--figma-stage-scale)) !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.screen.predict-screen .predict-matchup__overlay--past-muted,
.screen.lineup-screen .predict-matchup__overlay--past-muted {
  z-index: 2 !important;
  padding: calc(10px * var(--figma-stage-scale)) !important;
  background: rgba(0, 0, 0, 0.6) !important;
  box-shadow: inset 0 calc(4px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.predict-screen .predict-matchup--overlay-locked .predict-matchup__side,
.screen.lineup-screen .predict-matchup--overlay-locked .predict-matchup__side {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  --material-hover-opacity: 0 !important;
  --material-ripple-opacity: 0 !important;
  --material-ripple-size: 0px !important;
  pointer-events: none !important;
  cursor: default !important;
  background-image: none !important;
  background-size: 0 0 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  will-change: auto !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.predict-screen .predict-matchup--overlay-locked .predict-matchup__side:hover,
  .screen.lineup-screen .predict-matchup--overlay-locked .predict-matchup__side:hover {
    --interactive-fill-opacity: 0 !important;
    --interactive-fill-size: 0% !important;
    background-image: none !important;
    background-size: 0 0 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

.screen.predict-screen .predict-matchup--overlay-locked .predict-matchup__side:active,
.screen.predict-screen .predict-matchup--overlay-locked .predict-matchup__side.is-pressing,
.screen.lineup-screen .predict-matchup--overlay-locked .predict-matchup__side:active,
.screen.lineup-screen .predict-matchup--overlay-locked .predict-matchup__side.is-pressing {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  background-image: none !important;
  background-size: 0 0 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.screen.predict-screen .predict-action {
  position: absolute !important;
  top: calc(670px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(82px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
}

.screen.predict-screen .predict-action::before {
  content: "" !important;
  position: absolute !important;
  top: calc(-67px * var(--figma-stage-scale)) !important;
  left: calc(-29px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(209px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 22%, rgba(255, 255, 255, 0.78) 58%, #ffffff 84%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.predict-screen .predict-action .cta {
  position: relative !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  z-index: 1 !important;
}

.screen.predict-screen .predict-action .predict-footer-note {
  position: absolute !important;
  top: calc(64px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(159px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #ff0000 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  z-index: 1 !important;
}

.screen.lineup-screen .lineup-field {
  top: calc(257px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(343px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-field__image {
  top: calc(31px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-badge {
  top: calc(263px * var(--figma-stage-scale)) !important;
  right: 0 !important;
  bottom: auto !important;
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-badge__logo {
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-card-strip {
  top: calc(616px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
}

.screen.lineup-screen .lineup-action {
  position: absolute !important;
  top: calc(730px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: var(--figma-stage-width) !important;
  height: calc(82px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4 !important;
}

.screen.lineup-screen .lineup-action .cta {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  border-radius: 0 !important;
}

/* EOF exact lock: collection / predict / lineup / community-me */
.screen.collection-screen {
  --collection-scale: var(--figma-stage-scale);
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background-color: #0068b7 !important;
  background-image: var(--collection-pattern-image) !important;
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
}

.screen.predict-screen,
.screen.lineup-screen {
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
}

.screen.collection-screen .collection-screen__pattern {
  position: absolute !important;
  inset: 0 !important;
  background-color: #0068b7 !important;
  background-image: var(--collection-pattern-image) !important;
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.collection-screen.collection-screen--mascot .collection-screen__pattern {
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.screen.collection-screen.collection-screen--mascot {
  min-height: max(var(--device-height), 764px) !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background-color: #0068b7 !important;
  background-image: var(--collection-pattern-image) !important;
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.screen.collection-screen .collection-screen__team-badge {
  position: absolute !important;
  top: calc(var(--safe-top) + (110px * var(--collection-scale))) !important;
  left: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: calc(4px * var(--collection-scale)) calc(12px * var(--collection-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border-radius: calc(8px * var(--collection-scale)) !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}

.screen.collection-screen .collection-screen__team-badge--dream {
  background: #ff3b30 !important;
}

.screen.collection-screen .collection-screen__team-badge--share {
  background: #80ba27 !important;
}

.screen.collection-screen .collection-screen__summary-card {
  position: absolute !important;
  top: calc(var(--safe-top) + (124.5px * var(--collection-scale))) !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: calc(20px * var(--collection-scale)) !important;
  width: calc(343px * var(--collection-scale)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: calc(36px * var(--collection-scale)) calc(29px * var(--collection-scale)) !important;
  box-sizing: border-box !important;
  transform: translateX(-50%) !important;
  border-radius: calc(8px * var(--collection-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  z-index: 4 !important;
}

.screen.collection-screen .collection-screen__summary-card--mascot {
  padding-right: calc(15.5px * var(--collection-scale)) !important;
  padding-left: calc(15.5px * var(--collection-scale)) !important;
}

.screen.collection-screen.collection-screen--mascot .collection-screen__mascot-stack {
  position: absolute !important;
  top: calc(var(--safe-top) + (124.5px * var(--collection-scale))) !important;
  left: calc(16px * var(--collection-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: calc(66px * var(--collection-scale)) !important;
  width: calc(343px * var(--collection-scale)) !important;
  margin: 0 !important;
  z-index: 4 !important;
}

.screen.collection-screen.collection-screen--mascot .collection-screen__summary-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}

.screen.collection-screen.collection-screen--mascot .collection-screen__summary-card--mascot > div {
  box-shadow: none !important;
  filter: none !important;
}

.screen.collection-screen .collection-screen__title {
  width: 100% !important;
  margin: 0 !important;
  color: #0068b7 !important;
  font-size: calc(24px * var(--collection-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--collection-scale)) !important;
  letter-spacing: calc(-0.96px * var(--collection-scale)) !important;
  text-align: center !important;
}

.screen.collection-screen .collection-screen__mascot-slots {
  display: grid !important;
  grid-template-columns: repeat(5, calc(56px * var(--collection-scale))) !important;
  width: calc(312px * var(--collection-scale)) !important;
  max-width: calc(312px * var(--collection-scale)) !important;
  column-gap: calc(8px * var(--collection-scale)) !important;
  row-gap: calc(24px * var(--collection-scale)) !important;
  justify-content: center !important;
  align-items: start !important;
  margin: 0 auto !important;
}

.screen.collection-screen .collection-screen__mascot-slot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: calc(56px * var(--collection-scale)) !important;
  height: calc(56px * var(--collection-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.collection-screen .collection-screen__mascot-slot img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.screen.collection-screen .collection-screen__mascot-slot.is-empty::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  -webkit-mask-image: var(--mascot-slot-image) !important;
  mask-image: var(--mascot-slot-image) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  pointer-events: none !important;
  box-shadow:
    inset 0 calc(-0.5px * var(--collection-scale)) 0 rgba(0, 0, 0, 0.25),
    inset 0 calc(2px * var(--collection-scale)) calc(5px * var(--collection-scale)) rgba(0, 0, 0, 0.25),
    inset 0 calc(2px * var(--collection-scale)) 0 rgba(0, 0, 0, 0.25) !important;
}

.screen.collection-screen.collection-screen--mascot .collection-screen__mascot-feature {
  width: calc(275px * var(--collection-scale)) !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.collection-screen.collection-screen--mascot .collection-screen__mascot-feature img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.screen.collection-screen .collection-screen__summary-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--collection-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--collection-scale)) !important;
  letter-spacing: calc(-0.32px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-screen__summary-head strong {
  font-weight: 700 !important;
}

.screen.collection-screen .collection-screen__summary-total {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  font-weight: 700 !important;
}

.screen.collection-screen .collection-screen__summary-current {
  color: #0068b7 !important;
}

.screen.collection-screen .collection-screen__summary-current .countup-value {
  color: #0068b7 !important;
}

.screen.collection-screen .collection-screen__summary-divider {
  color: #2a2a2b !important;
}

.screen.collection-screen .collection-screen__logo-rail {
  position: absolute !important;
  top: calc(var(--safe-top) + (288.5px * var(--collection-scale))) !important;
  left: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(343px * var(--collection-scale)) !important;
  height: calc(60px * var(--collection-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
}

.screen.collection-screen .collection-screen__logo-rail .home-screen__logos-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.screen.collection-screen .collection-panel {
  --collection-sheet-drag-distance: 0px !important;
  --collection-panel-collapsed-height: min(
    calc(421px * var(--collection-scale)),
    calc(100% - (368.5px * var(--collection-scale)))
  ) !important;
  --collection-panel-expanded-height: min(
    calc(699px * var(--collection-scale)),
    calc(100% - (var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + 40px))
  ) !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: var(--collection-panel-collapsed-height) !important;
  margin: 0 !important;
  transform: translateY(0) !important;
  transition: height 220ms ease !important;
  z-index: 5 !important;
}

.screen.collection-screen .collection-panel.is-expanded {
  height: var(--collection-panel-expanded-height) !important;
}

.screen.collection-screen .collection-panel:not(.is-expanded).is-dragging {
  height: min(
    calc(var(--collection-panel-collapsed-height) + var(--collection-sheet-drag-distance)),
    var(--collection-panel-expanded-height)
  ) !important;
}

.screen.collection-screen .collection-panel.is-expanded.is-dragging {
  height: calc(var(--collection-panel-expanded-height) - var(--collection-sheet-drag-distance)) !important;
}

.screen.collection-screen .collection-panel.is-dragging {
  transition: none !important;
}

.screen.collection-screen .collection-panel__tabs {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: calc(343px * var(--collection-scale)) !important;
  height: calc(45px * var(--collection-scale)) !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  z-index: 2 !important;
}

.screen.collection-screen .collection-panel__tab {
  --interactive-fill-opacity: 0.08;
  --interactive-fill-size: 0%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: calc(68px * var(--collection-scale)) !important;
  height: calc(45px * var(--collection-scale)) !important;
  margin: 0 !important;
  padding: calc(4px * var(--collection-scale)) 0 !important;
  border-radius: calc(8px * var(--collection-scale)) calc(8px * var(--collection-scale)) 0 0 !important;
  background-color: #e8e8e8 !important;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, var(--interactive-fill-opacity)),
      rgba(0, 0, 0, var(--interactive-fill-opacity))
    ),
    linear-gradient(#e8e8e8, #e8e8e8) !important;
  background-position: left top, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: var(--interactive-fill-size) 100%, 100% 100% !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  transition: background-size 180ms ease, background-color 160ms ease, color 160ms ease, opacity 180ms ease !important;
}

.screen.collection-screen .collection-panel__tab.is-active {
  background-color: #ffffff !important;
  background-image: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.collection-screen .collection-panel__tab:hover {
    --interactive-fill-size: 100% !important;
  }
}

.screen.collection-screen .collection-panel__tab:focus-visible,
.screen.collection-screen .collection-panel__tab.is-pressing,
.screen.collection-screen .collection-panel__tab:active {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
  outline: none !important;
}

.screen.collection-screen .collection-panel__tab img {
  width: calc(20px * var(--collection-scale)) !important;
  height: calc(20px * var(--collection-scale)) !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.screen.collection-screen .collection-panel__tab-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(56px * var(--collection-scale)) !important;
  min-width: calc(56px * var(--collection-scale)) !important;
  height: calc(37px * var(--collection-scale)) !important;
  line-height: 1 !important;
}

.screen.collection-screen .collection-panel__tab-head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(56px * var(--collection-scale)) !important;
  height: calc(21px * var(--collection-scale)) !important;
  min-width: calc(56px * var(--collection-scale)) !important;
  flex: 0 0 auto !important;
}

.screen.collection-screen .collection-panel__tab-team {
  display: block !important;
  width: calc(36px * var(--collection-scale)) !important;
  min-width: calc(36px * var(--collection-scale)) !important;
  color: #111111 !important;
  font-family: "esamanru OTF", "Pretendard", sans-serif !important;
  font-size: calc(16px * var(--collection-scale)) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--collection-scale)) !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.collection-screen .collection-panel__tab-count {
  display: block !important;
  width: max-content !important;
  color: #111111 !important;
  font-family: "esamanru OTF", "Pretendard", sans-serif !important;
  font-size: calc(12px * var(--collection-scale)) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--collection-scale)) !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.collection-screen .collection-panel__tab-count span {
  font-size: calc(12px * var(--collection-scale)) !important;
  line-height: calc(16px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-panel__tab-count-current {
  color: #0068b7 !important;
}

.screen.collection-screen .collection-panel__body {
  position: relative !important;
  width: 100% !important;
  height: calc(100% - (45px * var(--collection-scale))) !important;
  margin: 0 !important;
  padding: calc(20px * var(--collection-scale)) calc(15px * var(--collection-scale)) calc(43px * var(--collection-scale)) !important;
  border-radius: calc(16px * var(--collection-scale)) calc(16px * var(--collection-scale)) 0 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  transition: height 220ms ease !important;
}

.screen.collection-screen .collection-panel.is-expanded .collection-panel__body {
  height: calc(100% - (45px * var(--collection-scale))) !important;
}

.screen.collection-screen .collection-panel:not(.is-expanded).is-dragging .collection-panel__body {
  height: calc(100% - (45px * var(--collection-scale))) !important;
}

.screen.collection-screen .collection-panel.is-expanded.is-dragging .collection-panel__body {
  height: calc(100% - (45px * var(--collection-scale))) !important;
}

.screen.collection-screen .collection-panel__handle {
  position: relative !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(20px * var(--collection-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  touch-action: none !important;
  cursor: ns-resize !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background-color 140ms ease, opacity 140ms ease !important;
}

.screen.collection-screen .collection-panel__handle::before {
  content: '' !important;
  display: block !important;
  width: calc(40px * var(--collection-scale)) !important;
  height: calc(4px * var(--collection-scale)) !important;
  border-radius: calc(999px * var(--collection-scale)) !important;
  background: #b7b7b7 !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.collection-screen .collection-panel__handle:hover {
    background: rgba(42, 42, 43, 0.04) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
  }
}

.screen.collection-screen .collection-panel__handle:focus-visible {
  background: rgba(42, 42, 43, 0.06) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.screen.collection-screen .collection-panel__handle:active {
  background: rgba(42, 42, 43, 0.08) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.screen.collection-screen .collection-panel__viewport {
  width: calc(344px * var(--collection-scale)) !important;
  height: min(
    calc(290px * var(--collection-scale)),
    calc(100% - (23px * var(--collection-scale)))
  ) !important;
  margin: calc(19px * var(--collection-scale)) auto 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease !important;
}

.screen.collection-screen .collection-panel__viewport.is-switching {
  opacity: 0.72 !important;
  transform: translateY(calc(4px * var(--collection-scale))) !important;
  filter: blur(calc(1px * var(--collection-scale))) !important;
}

.screen.collection-screen .collection-panel.is-expanded .collection-panel__viewport {
  height: min(
    calc(568px * var(--collection-scale)),
    calc(100% - (23px * var(--collection-scale)))
  ) !important;
}

.screen.collection-screen .collection-panel:not(.is-expanded).is-dragging .collection-panel__viewport {
  height: min(
    calc((290px * var(--collection-scale)) + var(--collection-sheet-drag-distance)),
    calc(100% - (23px * var(--collection-scale)))
  ) !important;
}

.screen.collection-screen .collection-panel.is-expanded.is-dragging .collection-panel__viewport {
  height: min(
    calc((568px * var(--collection-scale)) - var(--collection-sheet-drag-distance)),
    calc(100% - (23px * var(--collection-scale)))
  ) !important;
}

.screen.collection-screen .collection-panel__viewport::-webkit-scrollbar {
  display: none !important;
}

.screen.collection-screen .collection-panel__grid {
  display: grid !important;
  grid-template-columns: repeat(4, calc(80px * var(--collection-scale))) !important;
  column-gap: calc(8px * var(--collection-scale)) !important;
  row-gap: calc(20px * var(--collection-scale)) !important;
  justify-content: center !important;
  width: calc(344px * var(--collection-scale)) !important;
  margin: 0 !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

.screen.collection-screen .collection-panel__card {
  position: relative !important;
  width: calc(80px * var(--collection-scale)) !important;
  height: calc(127px * var(--collection-scale)) !important;
  justify-self: center !important;
}

.screen.collection-screen .collection-panel__card.is-revealing {
  opacity: 0;
  transform: translateY(calc(10px * var(--collection-scale))) scale(0.985);
  animation: collection-card-reveal 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  animation-delay: calc(var(--collection-card-index, 0) * 32ms) !important;
  will-change: opacity, transform !important;
}

@keyframes collection-card-reveal {
  from {
    opacity: 0;
    transform: translateY(calc(10px * var(--collection-scale))) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.screen.collection-screen .collection-card__frame {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: calc(1.5px * var(--collection-scale)) solid #0068b7 !important;
  border-radius: calc(8px * var(--collection-scale)) !important;
  background: #ffffff !important;
}

.screen.collection-screen .collection-card__photo-wrap {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.screen.collection-screen .collection-card__photo-wrap::after {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: calc(44px * var(--collection-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 104, 183, 0.08) 100%) !important;
  pointer-events: none !important;
}

.screen.collection-screen .collection-card__photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: scale(1.01) !important;
}

.screen.collection-screen .collection-card__badges {
  position: absolute !important;
  left: calc(4px * var(--collection-scale)) !important;
  right: calc(4px * var(--collection-scale)) !important;
  bottom: calc(28px * var(--collection-scale)) !important;
  display: flex !important;
  gap: calc(2px * var(--collection-scale)) !important;
  z-index: 2 !important;
}

.screen.collection-screen .collection-card__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(10px * var(--collection-scale)) !important;
  padding: calc(2px * var(--collection-scale)) calc(4px * var(--collection-scale)) !important;
  border-radius: calc(8px * var(--collection-scale)) !important;
  background: #00b4ed !important;
  color: #ffffff !important;
  font-size: calc(6px * var(--collection-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(6px * var(--collection-scale)) !important;
  letter-spacing: calc(-0.12px * var(--collection-scale)) !important;
  white-space: nowrap !important;
}

.screen.collection-screen .collection-card__namebar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(24px * var(--collection-scale)) !important;
  background: #ffffff !important;
  border-radius: 0 0 calc(8px * var(--collection-scale)) calc(8px * var(--collection-scale)) !important;
  z-index: 2 !important;
}

.screen.collection-screen .collection-card__name {
  color: #0068b7 !important;
  font-size: calc(12px * var(--collection-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--collection-scale)) !important;
  text-align: center !important;
}

/* Drawer final pass: left menu / right mypage */
.app-drawer__panel--menu,
.app-drawer__panel--mypage {
  background: #ffffff !important;
  grid-template-rows: auto 1fr auto !important;
}

.app-drawer__panel--menu .drawer-hero,
.app-drawer__panel--mypage .drawer-hero {
  width: calc(343px * var(--figma-stage-scale)) !important;
  padding: calc(var(--safe-top) + 100px) 0 0 !important;
}

.app-drawer__panel--menu .app-drawer__body,
.app-drawer__panel--mypage .app-drawer__body {
  width: calc(343px * var(--figma-stage-scale)) !important;
  padding: calc(41px * var(--figma-stage-scale)) 0 calc(24px * var(--figma-stage-scale)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.app-drawer__panel--menu .app-drawer__body::-webkit-scrollbar,
.app-drawer__panel--mypage .app-drawer__body::-webkit-scrollbar {
  display: none !important;
}

.app-drawer__panel--menu .app-drawer__footer {
  padding: 0 0 calc(38px * var(--figma-stage-scale)) !important;
}

.app-drawer__panel--mypage .app-drawer__footer--logout {
  padding: 0 0 calc(90px * var(--figma-stage-scale)) !important;
}

.drawer-profile--logged-out {
  display: block !important;
}

.drawer-login-prompt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.drawer-login-prompt strong,
.drawer-login-prompt h1 {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  letter-spacing: -0.96px !important;
}

.drawer-login-prompt__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
}

.drawer-login-prompt__icon .topbar__icon {
  width: 28px !important;
  height: 28px !important;
}

.drawer-menu {
  display: grid !important;
  width: 100% !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

.drawer-menu .menu-disclosure {
  position: relative !important;
  display: grid !important;
  gap: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

.drawer-menu .menu-disclosure--link {
  position: relative !important;
}

.drawer-menu .menu-row {
  --drawer-menu-fill-opacity: 0;
  --drawer-menu-fill-size: 0%;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  align-self: start !important;
  width: 100% !important;
  max-height: calc(48px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(48px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  min-height: calc(48px * var(--figma-stage-scale)) !important;
  height: calc(48px * var(--figma-stage-scale)) !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 0 !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(
      rgba(0, 104, 183, var(--drawer-menu-fill-opacity)),
      rgba(0, 104, 183, var(--drawer-menu-fill-opacity))
    ) !important;
  background-size: var(--drawer-menu-fill-size) 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  overflow: visible !important;
  isolation: auto !important;
  transition:
    background-size 180ms ease,
    background-color 160ms ease,
    color 160ms ease !important;
}

.drawer-menu .menu-row::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(1px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  pointer-events: none !important;
}

.drawer-menu .menu-row strong {
  flex: 0 1 auto !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.drawer-menu .menu-row.is-active {
  --drawer-menu-fill-opacity: 0.12 !important;
  --drawer-menu-fill-size: 100% !important;
}

@media (hover: hover) and (pointer: fine) {
  .drawer-menu .menu-row:hover,
  .drawer-menu .menu-row--drawer-link:hover {
    --drawer-menu-fill-opacity: 0.12 !important;
    --drawer-menu-fill-size: 100% !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
  }
}

.drawer-menu .menu-row:active,
.drawer-menu .menu-row.is-pressing,
.drawer-menu .menu-row--drawer-link:active,
.drawer-menu .menu-row--drawer-link.is-pressing {
  --drawer-menu-fill-opacity: 0.18 !important;
  --drawer-menu-fill-size: 100% !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.drawer-menu .menu-row__chevron {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.drawer-menu .menu-disclosure__panel {
  display: grid !important;
  justify-items: start !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

.drawer-menu .menu-disclosure.is-open .menu-disclosure__panel {
  padding: calc(14px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 !important;
}

.drawer-menu .menu-submenu__link {
  display: inline-flex !important;
  justify-self: start !important;
  width: fit-content !important;
  max-width: max-content !important;
  min-height: calc(18px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  color: #8c8c8c !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(18px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.drawer-menu .menu-submenu__link span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: max-content !important;
  min-height: calc(18px * var(--figma-stage-scale)) !important;
  padding: 0 0 calc(4px * var(--figma-stage-scale)) !important;
  border-bottom: 0 !important;
  color: transparent !important;
  background-image:
    linear-gradient(#8c8c8c, #8c8c8c),
    linear-gradient(#2a2a2b, #2a2a2b) !important;
  background-size:
    100% 100%,
    0% 100% !important;
  background-position:
    0 0,
    0 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-background-clip: text, text !important;
  background-clip: text, text !important;
  white-space: nowrap !important;
  contain: paint !important;
  backface-visibility: hidden !important;
  transition:
    background-size 180ms ease,
    opacity 160ms ease !important;
}

.drawer-menu .menu-submenu__link span::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(0.7px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(#2a2a2b, #2a2a2b),
    linear-gradient(#8c8c8c, #8c8c8c) !important;
  background-position:
    left top,
    left top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size:
    0% 100%,
    100% 100% !important;
  transition: background-size 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .drawer-menu .menu-submenu__link:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
  }

  .drawer-menu .menu-submenu__link:hover span {
    background-size:
      100% 100%,
      100% 100% !important;
  }

  .drawer-menu .menu-submenu__link:hover span::before {
    background-size:
      100% 100%,
      100% 100% !important;
  }
}

.drawer-menu .menu-submenu__link:focus-visible span,
.drawer-menu .menu-submenu__link:active span,
.drawer-menu .menu-submenu__link.is-pressing span {
  background-size:
    100% 100%,
    100% 100% !important;
}

.drawer-menu .menu-submenu__link:focus-visible span::before,
.drawer-menu .menu-submenu__link:active span::before,
.drawer-menu .menu-submenu__link.is-pressing span::before {
  background-size:
    100% 100%,
    100% 100% !important;
}

.menu-row--drawer-link {
  justify-content: flex-start !important;
  align-items: center !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  overflow: visible !important;
  isolation: auto !important;
}

.drawer-menu > .menu-disclosure--link:last-child > .menu-row {
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .drawer-menu > .menu-disclosure--link:last-child > .menu-row:hover {
    box-shadow: none !important;
  }
}

.drawer-menu > .menu-disclosure--link:last-child > .menu-row:active,
.drawer-menu > .menu-disclosure--link:last-child > .menu-row.is-pressing,
.drawer-menu > .menu-disclosure--link:last-child > .menu-row.is-pressing {
  box-shadow: none !important;
}

.drawer-menu > .menu-disclosure:last-child.is-open > .menu-row {
  box-shadow: inset 0 calc(-1px * var(--figma-stage-scale)) 0 0 #2a2a2b !important;
}

.menu__list--plain.drawer-menu::before,
.menu__list--plain.drawer-menu::after,
.menu__list--plain.drawer-menu .menu-disclosure::before,
.menu__list--plain.drawer-menu .menu-disclosure::after,
.menu__list--plain.drawer-menu .menu-disclosure__panel::before,
.menu__list--plain.drawer-menu .menu-disclosure__panel::after {
  content: none !important;
  display: none !important;
}

.menu-row--drawer-link strong {
  color: #2a2a2b !important;
}

.menu-row--drawer-link.is-active {
  background: transparent !important;
}

.menu-row--drawer-link.is-active strong {
  color: #2a2a2b !important;
}

.app-drawer__footer--logout {
  padding: 0 0 90px !important;
  display: flex !important;
  justify-content: center !important;
}

.drawer-logout {
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f0f0f0 !important;
  color: #8c8c8c !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.app-drawer__panel--menu .app-drawer__footer .cta {
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
}

@media (hover: hover) and (pointer: fine) {
  .mockup-shell {
    grid-template-columns: 320px var(--desktop-stage-visual-width) var(--desktop-stage-visual-width) !important;
    gap: 16px !important;
  }

  .desktop-sitemap {
    width: 320px !important;
    max-height: calc(100dvh - 64px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    scrollbar-width: none !important;
  }

  .desktop-sitemap::-webkit-scrollbar {
    display: none !important;
  }

  .desktop-sitemap__header {
    margin-bottom: 18px !important;
  }

  .desktop-sitemap__layout {
    display: block !important;
    align-items: start !important;
  }

  .desktop-sitemap__rail-label {
    margin: 0 0 10px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }

  .desktop-sitemap__popup-group + .desktop-sitemap__popup-group {
    margin-top: 12px !important;
  }

  .desktop-sitemap__popup-group h3 {
    margin: 0 0 6px !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .desktop-sitemap__popup-links {
    display: grid !important;
    gap: 6px !important;
  }

  .desktop-sitemap__popup-link {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .desktop-sitemap__main {
    min-width: 0 !important;
  }

  .desktop-sitemap__group + .desktop-sitemap__group {
    margin-top: 16px !important;
  }

  .desktop-sitemap__group h3 {
    margin: 0 0 8px !important;
  }

  .desktop-sitemap__subgroup + .desktop-sitemap__subgroup {
    margin-top: 12px !important;
  }

  .desktop-sitemap__subgroup-title {
    margin: 0 0 6px !important;
    color: rgba(255, 255, 255, 0.56) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
  }

  .desktop-sitemap__links {
    display: grid !important;
    gap: 6px !important;
  }

  .desktop-sitemap__link {
    display: block !important;
    padding: 10px 11px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .desktop-sitemap__link.is-active,
  .desktop-sitemap__popup-link.is-active {
    background: rgba(0, 104, 183, 0.45) !important;
  }
}

.screen.predict-screen .screen__body,
.screen.predict-screen .predict--figma,
.screen.lineup-screen .screen__body,
.screen.lineup-screen .lineup--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.screen.predict-screen .predict-board.predict-board--latest {
  top: calc(266px * var(--figma-stage-scale)) !important;
  height: calc(546px * var(--figma-stage-scale)) !important;
  max-height: calc(546px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__scroll {
  position: absolute !important;
  inset: calc(47px * var(--figma-stage-scale)) 0 0 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__scroll::-webkit-scrollbar {
  display: none !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__filter {
  position: absolute !important;
  top: calc(12px * var(--figma-stage-scale)) !important;
  right: calc(23px * var(--figma-stage-scale)) !important;
  left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  width: calc(170px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__list {
  min-height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: calc(180px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
}

.screen.predict-screen .predict-section__status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.screen.predict-screen .predict-section__date {
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__today {
  color: #00b4ed !important;
}

.screen.predict-screen .predict-section__badge--available {
  background: #8c8c8c !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-section__badge--complete {
  background: #00b4ed !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-section__badge--success {
  background: #336cff !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-section__badge--failure {
  background: #f12b2b !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-section__badge--missed,
.screen.lineup-screen .predict-section__badge--missed {
  background: #8c8c8c !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-action {
  top: auto !important;
  bottom: calc(60px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen {
  --lineup-body-offset: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + (40px * var(--figma-stage-scale)));
  --lineup-hero-height: calc(94px * var(--figma-stage-scale));
  --lineup-hero-to-field-gap: 14px;
  --lineup-entry-field-top: var(--lineup-hero-height);
  --lineup-entry-field-height: calc(343px * var(--figma-stage-scale));
  --lineup-card-strip-height: calc(114px * var(--figma-stage-scale));
  --lineup-card-strip-outer-height: calc(var(--lineup-card-strip-height) + (54px * var(--figma-stage-scale)));
  --lineup-action-height: calc(82px * var(--figma-stage-scale));
  --lineup-field-to-strip-gap: 14px;
  --lineup-scroll-end-gap: 28px;
  --lineup-field-anchor-card-strip-top: calc(var(--lineup-entry-field-top) + var(--lineup-hero-to-field-gap) + var(--lineup-entry-field-height));
  --lineup-cta-anchor-card-strip-top: calc(var(--device-height) - var(--lineup-body-offset) - var(--lineup-action-height) - var(--lineup-scroll-end-gap) - var(--lineup-card-strip-outer-height) - var(--lineup-field-to-strip-gap));
  --lineup-card-strip-top: max(var(--lineup-field-anchor-card-strip-top), var(--lineup-cta-anchor-card-strip-top));
  --lineup-card-strip-visible-top: calc(var(--lineup-card-strip-top) + var(--lineup-field-to-strip-gap));
  --lineup-action-visible-space: max(
    var(--lineup-action-height),
    calc(var(--device-height) - var(--device-height) + var(--lineup-action-height))
  );
  --lineup-scroll-body-height: calc(
    var(--lineup-card-strip-visible-top) + var(--lineup-card-strip-outer-height) + var(--lineup-action-visible-space) + var(--lineup-scroll-end-gap)
  );
}

.screen.lineup-screen.lineup-screen--entry,
.screen.lineup-screen.lineup-screen--drag,
.screen.lineup-screen.lineup-screen--confirm,
.screen.lineup-screen.lineup-screen--success {
  --lineup-hero-to-field-gap: 18px;
}

.screen.lineup-screen .lineup-card-strip {
  top: var(--lineup-card-strip-top) !important;
  bottom: auto !important;
  margin-top: calc(var(--lineup-field-to-strip-gap) - (18px * var(--figma-stage-scale))) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  height: var(--lineup-card-strip-outer-height) !important;
  min-height: var(--lineup-card-strip-outer-height) !important;
  padding: calc(18px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.screen.lineup-screen .lineup-card-strip::-webkit-scrollbar {
  display: none !important;
}

.screen.lineup-screen.lineup-screen--entry .screen__body,
.screen.lineup-screen.lineup-screen--drag .screen__body,
.screen.lineup-screen.lineup-screen--confirm .screen__body,
.screen.lineup-screen.lineup-screen--success .screen__body,
.screen.lineup-screen.lineup-screen--entry .lineup--figma,
.screen.lineup-screen.lineup-screen--drag .lineup--figma,
.screen.lineup-screen.lineup-screen--confirm .lineup--figma,
.screen.lineup-screen.lineup-screen--success .lineup--figma {
  height: calc(var(--device-height) - (var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + (40px * var(--figma-stage-scale)))) !important;
  min-height: calc(var(--device-height) - (var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + (40px * var(--figma-stage-scale)))) !important;
}

.screen.lineup-screen.lineup-screen--entry .lineup-field,
.screen.lineup-screen.lineup-screen--drag .lineup-field,
.screen.lineup-screen.lineup-screen--confirm .lineup-field,
.screen.lineup-screen.lineup-screen--success .lineup-field {
  top: var(--lineup-entry-field-top) !important;
  height: var(--lineup-entry-field-height) !important;
  margin-top: var(--lineup-hero-to-field-gap) !important;
}

.screen.lineup-screen .lineup-action {
  top: auto !important;
  bottom: 0 !important;
  z-index: 12 !important;
}

.screen.lineup-screen .modal-card__title,
.screen.lineup-screen .modal-card__caption,
.screen.community-me .community-confirm-modal__title,
.screen.community-me .community-confirm-modal__caption {
  text-align: center !important;
}

.screen.lineup-screen--success .modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.screen.lineup-screen--confirm .modal-card--lineup,
.screen.lineup-screen--success .modal-card--lineup-success {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__button,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single,
.screen.community-me .community-confirm-modal__button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.screen.community-me {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.screen.community-me .community-me__back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: calc(var(--safe-top) + (36px * var(--figma-stage-scale))) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

.screen.community-me .community-me__back img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.screen.community-me .community-me__body {
  position: relative !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  min-height: var(--mockup-stage-height) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.screen.community-me .page-title,
.screen.community-me .community-me__headline {
  position: absolute !important;
  top: calc(140px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
}

.screen.community-me .community-me__field--title {
  position: absolute !important;
  top: calc(203px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.screen.community-me .community-me__field strong {
  padding: 0 calc(4px * var(--figma-stage-scale)) !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__title-input {
  height: calc(37px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) !important;
  border-bottom: 1px solid #8c8c8c !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__editor {
  position: absolute !important;
  top: calc(286px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.screen.community-me .community-me__editor-box {
  position: relative !important;
  width: 100% !important;
  min-height: calc(260px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #f0f0f0 !important;
  overflow: hidden !important;
}

.screen.community-me .community-me__editor-guidelines {
  position: absolute !important;
  inset: calc(8px * var(--figma-stage-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(18px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
}

.screen.community-me .community-me__editor-guidelines p {
  margin: 0 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: left !important;
  white-space: pre-wrap !important;
}

.screen.community-me .community-me__textarea {
  position: relative !important;
  min-height: calc(244px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
  text-align: left !important;
  resize: none !important;
  z-index: 1 !important;
}

.screen.community-me .community-me__textarea::placeholder {
  color: #8c8c8c !important;
  opacity: 1 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__criteria {
  display: flex !important;
  justify-content: flex-end !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  margin: calc(4px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) 0 0 !important;
  text-align: right !important;
}

.screen.community-me .community-me__criteria-item,
.screen.community-me .community-me__criteria-divider {
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--ready .predict-board.predict-board--latest,
.screen.lineup-screen--picked .predict-board.predict-board--latest {
  position: absolute !important;
  top: calc(266px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(546px * var(--figma-stage-scale)) !important;
  max-height: calc(546px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border: 1px solid #8c8c8c !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #333333 !important;
  overflow: hidden !important;
}

.screen.lineup-screen--ready .predict-board.predict-board--latest .predict-board__scroll,
.screen.lineup-screen--picked .predict-board.predict-board--latest .predict-board__scroll {
  position: absolute !important;
  inset: calc(47px * var(--figma-stage-scale)) 0 0 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.screen.lineup-screen--ready .predict-board.predict-board--latest .predict-board__scroll::-webkit-scrollbar,
.screen.lineup-screen--picked .predict-board.predict-board--latest .predict-board__scroll::-webkit-scrollbar {
  display: none !important;
}

.screen.lineup-screen--ready .predict-board.predict-board--latest .predict-board__filter,
.screen.lineup-screen--picked .predict-board.predict-board--latest .predict-board__filter {
  position: absolute !important;
  top: calc(12px * var(--figma-stage-scale)) !important;
  right: calc(23px * var(--figma-stage-scale)) !important;
  left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  width: calc(170px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.screen.lineup-screen--ready .predict-board.predict-board--latest .predict-board__list,
.screen.lineup-screen--picked .predict-board.predict-board--latest .predict-board__list {
  min-height: 100% !important;
  padding-bottom: calc(120px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-action.lineup-action--picker {
  position: absolute !important;
  top: calc(670px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
  left: 50% !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
}

.screen.lineup-screen .lineup-action.lineup-action--picker::before {
  content: "" !important;
  position: absolute !important;
  top: calc(-67px * var(--figma-stage-scale)) !important;
  left: calc(-29px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(209px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 22%, rgba(255, 255, 255, 0.78) 58%, #ffffff 84%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.lineup-screen .lineup-action.lineup-action--picker .cta {
  position: relative !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  z-index: 1 !important;
}

.screen.lineup-screen .predict-matchup.predict-matchup--blocked {
  position: relative !important;
}

.screen.lineup-screen .predict-matchup.predict-matchup--blocked .predict-matchup__side {
  cursor: default !important;
}

.screen.lineup-screen .lineup-picker-matchup--history-link {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  --material-hover-opacity: 0 !important;
  --material-ripple-opacity: 0 !important;
  --material-ripple-size: 0px !important;
  cursor: pointer !important;
  background-image: none !important;
  background-size: 0 0 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.screen.lineup-screen .lineup-picker-matchup--history-link .predict-matchup__side {
  pointer-events: none !important;
  cursor: inherit !important;
  background-image: none !important;
  background-size: 0 0 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.lineup-screen .lineup-picker-matchup--history-link:hover,
  .screen.lineup-screen .lineup-picker-matchup--history-link:hover .predict-matchup__side {
    --interactive-fill-opacity: 0 !important;
    --interactive-fill-size: 0% !important;
    background-image: none !important;
    background-size: 0 0 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

.screen.lineup-screen .lineup-picker-matchup--history-link:active,
.screen.lineup-screen .lineup-picker-matchup--history-link.is-pressing,
.screen.lineup-screen .lineup-picker-matchup--history-link:active .predict-matchup__side,
.screen.lineup-screen .lineup-picker-matchup--history-link.is-pressing .predict-matchup__side {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  background-image: none !important;
  background-size: 0 0 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.screen.lineup-screen .lineup-picker-matchup__blocked {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(42, 42, 43, 0.82) !important;
  color: #ffffff !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__match,
.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__team,
.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__question {
  display: block !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__match {
  margin-bottom: calc(8px * var(--figma-stage-scale)) !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__team {
  margin-bottom: calc(4px * var(--figma-stage-scale)) !important;
  color: #0068b7 !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(28px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__question {
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(28px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__criteria-item.is-valid {
  color: #ff0000 !important;
}

.screen.community-me .community-me__upload {
  position: absolute !important;
  top: calc(540px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.screen.community-me .community-me__upload-preview,
.screen.community-me .community-me__upload-preview--sample {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  object-fit: cover !important;
}

.screen.community-me .community-me__upload-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #f0f0f0 !important;
  overflow: hidden !important;
}

.screen.community-me .community-me__upload-placeholder {
  display: block !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.community-me .community-me__upload-action {
  top: calc(-6px * var(--figma-stage-scale)) !important;
  right: calc(-6px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__upload-action img {
  width: 100% !important;
  height: 100% !important;
}

.screen.community-me .screen__footer {
  position: absolute !important;
  top: auto !important;
  left: 50% !important;
  bottom: calc(90px * var(--figma-stage-scale)) !important;
  display: block !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  background: none !important;
  z-index: 3 !important;
}

.screen.community-me .screen__footer .cta {
  display: flex !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__notice {
  width: 100% !important;
  margin: calc(12px * var(--figma-stage-scale)) 0 0 !important;
  color: #ff0000 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.community-me .modal-backdrop--community {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.screen.community-me .community-sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 28 !important;
}

.screen.community-me .community-action-sheet {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(var(--safe-bottom, 0px) - (4px * var(--figma-stage-scale))) !important;
  width: calc(359px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  z-index: 30 !important;
}

.screen.community-me .community-confirm-modal {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  padding-top: calc(36px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  z-index: 7 !important;
}

.screen.community-me .community-confirm-modal__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
}

.screen.community-me .community-confirm-modal__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-confirm-modal__caption {
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-confirm-modal__actions {
  display: flex !important;
  width: 100% !important;
}

.screen.community-me .community-confirm-modal__button {
  flex: 1 1 50% !important;
  width: 50% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f0f0f0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-confirm-modal__button.is-primary {
  background: #0068b7 !important;
  color: #ffffff !important;
}

.screen.community-me .community-success-toast {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(160px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #f7f7f7 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(2px) !important;
  z-index: 8 !important;
}

/* Predict / lineup hero text exact lock from Figma MCP 381:29083 / 387:29871 / 260:48980 */
.screen.predict-screen .game-hero,
.screen.lineup-screen .game-hero {
  position: absolute !important;
  top: calc(148px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(94px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  z-index: 6 !important;
}

.screen.predict-screen .game-hero {
  top: calc(var(--safe-top) + 98px) !important;
}

.screen.lineup-screen .game-hero {
  top: calc(var(--safe-top) + 34px + (30px * var(--figma-stage-scale)) + 40px) !important;
}

.screen.predict-screen .game-hero__copy,
.screen.lineup-screen .game-hero__copy {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  width: calc(226px * var(--figma-stage-scale)) !important;
  min-width: 0 !important;
  max-width: none !important;
}

.screen.predict-screen .game-hero__title,
.screen.lineup-screen .game-hero__title,
.screen.predict-screen .game-hero__note,
.screen.lineup-screen .game-hero__note {
  width: 100% !important;
}

.screen.predict-screen .game-hero__description,
.screen.lineup-screen .game-hero__description {
  width: calc(300px * var(--figma-stage-scale)) !important;
  max-width: none !important;
  min-width: 0 !important;
}

.screen.lineup-screen .game-hero__description {
  white-space: nowrap !important;
}

.screen.predict-screen .game-hero__shortcut,
.screen.lineup-screen .game-hero__shortcut {
  position: absolute !important;
  top: 0 !important;
  left: calc(204px * var(--figma-stage-scale)) !important;
  min-width: 0 !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  transform: none !important;
}

.screen.lineup-screen--success .modal-card--lineup-success .modal-card__success-copy,
.screen.lineup-screen--confirm .modal-card--lineup .modal-card__success-copy {
  width: 100% !important;
}

.screen.lineup-screen--success .modal-card--lineup-success .modal-card__eyebrow,
.screen.lineup-screen--success .modal-card--lineup-success .modal-card__title,
.screen.lineup-screen--success .modal-card--lineup-success .modal-card__caption--neutral,
.screen.lineup-screen--success .modal-card--lineup-success .modal-card__single {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Community upload feedback + ranking cleanup */
.screen.community-me .community-action-sheet {
  align-items: center !important;
}

.screen.community-me .community-action-sheet__group,
.screen.community-me .community-action-sheet__cancel {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

.screen.community-me .community-action-sheet__group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  background: rgba(42, 42, 43, 0.4) !important;
}

.screen.community-me .community-action-sheet__option,
.screen.community-me .community-action-sheet__cancel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
}

.screen.community-me .community-action-sheet__cancel {
  backdrop-filter: none !important;
}

.screen.community-me .community-action-sheet__option {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.screen.community-me .community-action-sheet__group > .community-action-sheet__option:first-child {
  border-top-left-radius: calc(13px * var(--figma-stage-scale)) !important;
  border-top-right-radius: calc(13px * var(--figma-stage-scale)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.screen.community-me .community-action-sheet__group > .community-action-sheet__option:last-child {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: calc(13px * var(--figma-stage-scale)) !important;
  border-bottom-right-radius: calc(13px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-action-sheet__option:hover,
.screen.community-me .community-action-sheet__option:active,
.screen.community-me .community-action-sheet__option:focus-visible {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.screen.community-me .community-action-sheet__separator {
  display: block !important;
  width: 100% !important;
  height: 0.5px !important;
  min-height: 0.5px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(42, 42, 43, 0.4) !important;
  border: 0 !important;
  flex: 0 0 auto !important;
}

.screen.community-me .community-feedback-dialog {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  padding-top: calc(36px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  z-index: 7 !important;
}

.screen.community-me .community-feedback-dialog__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
}

.screen.community-me .community-feedback-dialog__title {
  width: 100% !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.community-me .community-feedback-dialog__caption {
  width: 100% !important;
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.community-me .community-feedback-dialog__actions {
  display: flex !important;
  width: 100% !important;
}

.screen.community-me .community-feedback-dialog__button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 50% !important;
  width: 50% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f0f0f0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.community-me .community-feedback-dialog__button--primary {
  background: #0068b7 !important;
  color: #ffffff !important;
}

.screen.community-me .community-feedback-toast {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(160px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(37px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #f7f7f7 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(2px) !important;
  z-index: 8 !important;
}

.screen.ranking .ranking__hero-image {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.screen.ranking .ranking-row__team {
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-row__team img {
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

/* Shared dialog overlay ordering */
.screen .modal-backdrop.modal-backdrop--dialog {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  z-index: 70 !important;
}

.screen.lineup-screen.lineup-screen--picked .modal-backdrop.modal-backdrop--dialog {
  pointer-events: none !important;
}

.cta--progress {
  position: relative !important;
  overflow: hidden !important;
  background: #0068b7 !important;
  color: #ffffff !important;
  cursor: wait !important;
}

.cta--progress::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 35%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.16) 65%, transparent 100%) !important;
  transform: translateX(-100%) !important;
  animation: cta-progress-sweep 900ms linear infinite !important;
  pointer-events: none !important;
}

@keyframes cta-progress-sweep {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* Shared dual-action modal module from Figma popup_1 (103:1789) */
.screen .modal-card.modal-card--dual-action {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 71 !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__body--dual-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: calc(36px * var(--figma-stage-scale)) calc(24px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__copy--dual-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__title {
  width: 100% !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__caption {
  width: 100% !important;
  margin: 0 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--dual-action .community-compose-exit-caption__line {
  display: inline-block !important;
  white-space: nowrap !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__caption--alert,
.screen .modal-card.modal-card--dual-action .modal-card__caption--danger {
  color: #ff0000 !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__footer--dual-action {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(90deg, #f0f0f0 0 50%, #0068b7 50% 100%) !important;
  box-sizing: border-box !important;
  border-radius: 0 0 calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action:not(.is-primary) {
  background: transparent !important;
  color: #2a2a2b !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action.is-primary {
  background: transparent !important;
  color: #ffffff !important;
}

/* Shared single-action modal module from Figma popup_2 (390:31304) */
.screen .modal-card.modal-card--single-action {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 71 !important;
}

.screen .modal-card.modal-card--single-action .modal-card__body--single-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: calc(36px * var(--figma-stage-scale)) calc(24px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
}

.screen .modal-card.modal-card--single-action .modal-card__copy--single-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
}

.screen .modal-card.modal-card--single-action .modal-card__copy--single-action.is-compact {
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen .modal-card.modal-card--single-action .modal-card__title {
  width: 100% !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--single-action .modal-card__title .modal-card__eyebrow {
  display: block !important;
  margin: 0 0 calc(4px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--single-action .modal-card__caption {
  width: 100% !important;
  margin: 0 !important;
  color: #8c8c8c !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--single-action .modal-card__caption--alert,
.screen .modal-card.modal-card--single-action .modal-card__caption--danger {
  color: #ff0000 !important;
}

.screen .modal-card.modal-card--single-action .register-result-title--error {
  color: #ff0000 !important;
}

.screen .modal-card.modal-card--single-action.modal-card--register-card-success .modal-card__body--single-action,
.screen .modal-card.modal-card--single-action.modal-card--register-player-success .modal-card__body--single-action {
  padding: calc(36px * var(--figma-stage-scale)) calc(24px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) !important;
}

.screen .modal-card.modal-card--single-action.modal-card--register-card-success .register-success-card-preview,
.screen .modal-card.modal-card--single-action.modal-card--register-player-success .register-success-card-preview {
  display: block !important;
  width: calc(148px * var(--figma-stage-scale)) !important;
  max-width: 100% !important;
  margin: calc(16px * var(--figma-stage-scale)) auto 0 !important;
  padding: 0 !important;
}

.screen .modal-card.modal-card--single-action.modal-card--register-card-success .register-success-card-preview__image,
.screen .modal-card.modal-card--single-action.modal-card--register-player-success .register-success-card-preview__image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(226px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.22)) !important;
}

.screen .modal-card.modal-card--single-action .modal-card__footer--single-action {
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #0068b7 !important;
  box-sizing: border-box !important;
  border-radius: 0 0 calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
}

.screen .modal-card.modal-card--single-action .modal-card__single--single-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action,
.screen .modal-card.modal-card--single-action .modal-card__single--single-action {
  --modal-cta-overlay-color: rgba(0, 0, 0, 0.08);
  --modal-cta-overlay-press-color: rgba(0, 0, 0, 0.14);
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action.is-primary,
.screen .modal-card.modal-card--single-action .modal-card__single--single-action {
  --modal-cta-overlay-color: rgba(255, 255, 255, 0.10);
  --modal-cta-overlay-press-color: rgba(255, 255, 255, 0.16);
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action::after,
.screen .modal-card.modal-card--single-action .modal-card__single--single-action::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background-color: var(--modal-cta-overlay-color) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition:
    transform 180ms ease,
    opacity 160ms ease,
    background-color 120ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen .modal-card.modal-card--dual-action .modal-card__button--dual-action:hover::after,
  .screen .modal-card.modal-card--single-action .modal-card__single--single-action:hover::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action:active::after,
.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action.is-pressing::after,
.screen .modal-card.modal-card--single-action .modal-card__single--single-action:active::after,
.screen .modal-card.modal-card--single-action .modal-card__single--single-action.is-pressing::after {
  background-color: var(--modal-cta-overlay-press-color) !important;
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action:focus-visible,
.screen .modal-card.modal-card--single-action .modal-card__single--single-action:focus-visible {
  outline: calc(2px * var(--figma-stage-scale)) solid rgba(0, 104, 183, 0.38) !important;
  outline-offset: calc(-4px * var(--figma-stage-scale)) !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action:disabled::after,
.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action[aria-disabled="true"]::after,
.screen .modal-card.modal-card--single-action .modal-card__single--single-action:disabled::after,
.screen .modal-card.modal-card--single-action .modal-card__single--single-action[aria-disabled="true"]::after {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

/* Predict viewport width fix: keep the screen body on full stage width */
.screen.predict-screen .screen__body,
.screen.predict-screen .predict--figma {
  display: block !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex: none !important;
}

/* Ranking exact rebuild — Figma 198:4260 */
.screen.ranking {
  --ranking-hero-origin-y: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + (40px * var(--figma-stage-scale)));
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
  margin: 0 !important;
  background: #0068b7 !important;
  overflow: hidden !important;
}

.screen.ranking .topbar,
.screen.ranking .topbar.is-dark {
  top: calc(var(--safe-top) + 32px) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  right: calc(16px * var(--figma-stage-scale)) !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  z-index: 8 !important;
}

.screen.ranking .ranking-screen__pattern {
  position: absolute !important;
  inset: 0 !important;
  background-color: #0068b7 !important;
  background-image: url("../mcp/exact/ranking/paldo-bibimmyeon-pattern-root.png?v=20260423-1") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.ranking .ranking-screen__hero {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

.screen.ranking .ranking-podium {
  position: absolute !important;
  width: calc(109px * var(--figma-stage-scale)) !important;
  aspect-ratio: 432 / 608 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.ranking .ranking-podium--primary {
  top: var(--ranking-hero-origin-y) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.screen.ranking .ranking-podium--secondary {
  top: calc(var(--ranking-hero-origin-y) + (56px * var(--figma-stage-scale))) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--tertiary {
  top: calc(var(--ranking-hero-origin-y) + (90px * var(--figma-stage-scale))) !important;
  right: calc(16px * var(--figma-stage-scale)) !important;
  left: auto !important;
}

.screen.ranking .ranking-podium__banner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  aspect-ratio: 432 / 608 !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  object-fit: contain !important;
  user-select: none !important;
  pointer-events: none !important;
}

.screen.ranking .ranking-podium__content {
  position: absolute !important;
  top: calc(50% - (6px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  text-shadow: 0 calc(2px * var(--figma-stage-scale)) calc(2px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.ranking .ranking-podium__points {
  display: none !important;
}

.screen.ranking .ranking-podium__name {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium__logo {
  width: calc(43px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
  margin-top: 0 !important;
}

.screen.ranking .ranking-screen__last-button {
  --interactive-fill-opacity: 0.08;
  --interactive-fill-size: 0%;
  position: absolute !important;
  top: calc(var(--ranking-hero-origin-y) + (208px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(110px * var(--figma-stage-scale)) !important;
  min-width: calc(110px * var(--figma-stage-scale)) !important;
  max-width: calc(110px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  min-height: calc(40px * var(--figma-stage-scale)) !important;
  max-height: calc(40px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 calc(12px * var(--figma-stage-scale)) !important;
  border: calc(2px * var(--figma-stage-scale)) solid #ffffff !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background-color: #0068b7 !important;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, var(--interactive-fill-opacity)),
      rgba(0, 0, 0, var(--interactive-fill-opacity))
    ),
    linear-gradient(180deg, #0068b7 0%, #002e51 100%) !important;
  background-position: left top, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: var(--interactive-fill-size) 100%, 100% 100% !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  transition:
    background-size 180ms ease,
    filter 120ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
  z-index: 4 !important;
}

.screen.ranking .ranking-screen__last-button-icon {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
  flex: 0 0 calc(24px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__last-button span {
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.ranking .ranking-screen__last-button:hover {
    --interactive-fill-size: 100% !important;
    filter: none !important;
    box-shadow: none !important;
    transform: translateX(-50%) !important;
  }
}

.screen.ranking .ranking-screen__last-button.is-pressing,
.screen.ranking .ranking-screen__last-button:active {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
  filter: none !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
}

.screen.ranking .ranking-screen__title-copy {
  position: absolute !important;
  top: calc(var(--ranking-hero-origin-y) + (252px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  text-align: center !important;
}

.screen.ranking .ranking-screen__title-copy h1 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
  text-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  white-space: normal !important;
}

.screen.ranking .ranking-screen__title-copy p {
  margin: 0 !important;
  color: #f0f0f0 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  white-space: normal !important;
}

.screen.ranking .ranking-screen__cta {
  position: absolute !important;
  top: calc(387px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: var(--figma-stage-width) !important;
  height: calc(38px * var(--figma-stage-scale)) !important;
  z-index: 3 !important;
  filter: drop-shadow(0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25)) !important;
}

.screen.ranking .ranking-screen__cta-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 4 !important;
}

.screen.ranking .ranking-screen__cta-back img {
  width: calc(7.333px * var(--figma-stage-scale)) !important;
  height: calc(13.333px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-screen__sheet {
  --ranking-sheet-drag-distance: 0px !important;
  --ranking-sheet-collapsed-top: calc(var(--ranking-hero-origin-y) + (315px * var(--figma-stage-scale))) !important;
  --ranking-sheet-collapsed-height: calc(100% - var(--ranking-sheet-collapsed-top)) !important;
  position: absolute !important;
  top: var(--ranking-sheet-collapsed-top) !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: var(--figma-stage-width) !important;
  height: var(--ranking-sheet-collapsed-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: calc(32px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) 0 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: translateY(0) !important;
  transition: top 220ms ease, height 220ms ease !important;
  z-index: 4 !important;
}

.screen.ranking .ranking-screen__sheet.is-expanded {
  top: calc(100% - (350px * var(--figma-stage-scale))) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: calc(350px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__sheet:not(.is-expanded).is-dragging {
  top: calc(var(--ranking-sheet-collapsed-top) - var(--ranking-sheet-drag-distance)) !important;
  height: calc(var(--ranking-sheet-collapsed-height) + var(--ranking-sheet-drag-distance)) !important;
}

.screen.ranking .ranking-screen__sheet.is-expanded.is-dragging {
  top: calc((100% - (350px * var(--figma-stage-scale))) + var(--ranking-sheet-drag-distance)) !important;
  height: calc((350px * var(--figma-stage-scale)) - var(--ranking-sheet-drag-distance)) !important;
}

.screen.ranking .ranking-screen__sheet.is-dragging {
  transition: none !important;
}

.screen.ranking .ranking-screen__sheet-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) calc(30px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.ranking .ranking-screen__handle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(18px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  flex: 0 0 auto !important;
  touch-action: none !important;
  cursor: ns-resize !important;
  outline: none !important;
  transition: background-color 140ms ease, opacity 140ms ease !important;
}

.screen.ranking .ranking-screen__handle::before {
  content: "" !important;
  width: calc(40px * var(--figma-stage-scale)) !important;
  height: calc(4px * var(--figma-stage-scale)) !important;
  border-radius: 999px !important;
  background: #b8b8b8 !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.ranking .ranking-screen__handle:hover {
    background: rgba(42, 42, 43, 0.04) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
  }
}

.screen.ranking .ranking-screen__handle:focus-visible {
  background: rgba(42, 42, 43, 0.06) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.screen.ranking .ranking-screen__handle:active {
  background: rgba(42, 42, 43, 0.08) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.screen.ranking .ranking-screen__viewport {
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(140px * var(--figma-stage-scale)) !important;
  margin: calc(10px * var(--figma-stage-scale)) auto 0 !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  scrollbar-width: none !important;
  transition: height 220ms ease !important;
}

.screen.ranking .ranking-screen__viewport::-webkit-scrollbar {
  display: none !important;
}

.screen.ranking .ranking-screen__sheet.is-expanded .ranking-screen__viewport {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

.screen.ranking .ranking-screen__sheet:not(.is-expanded).is-dragging .ranking-screen__viewport {
  height: calc((140px * var(--figma-stage-scale)) + var(--ranking-sheet-drag-distance)) !important;
}

.screen.ranking .ranking-screen__sheet.is-expanded.is-dragging .ranking-screen__viewport {
  height: calc((280px * var(--figma-stage-scale)) - var(--ranking-sheet-drag-distance)) !important;
}

.screen.ranking .ranking-screen__list {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(14px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  padding: 0 0 calc(12px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.ranking .ranking-screen__sheet.is-expanded .ranking-screen__list {
  padding-bottom: 0 !important;
}

.screen.ranking .ranking-screen__sheet.is-expanded .ranking-screen__sheet-body {
  height: 100% !important;
  min-height: 0 !important;
}

.screen.ranking .ranking-screen__row {
  display: grid !important;
  grid-template-columns: calc(20px * var(--figma-stage-scale)) minmax(0, 1fr) calc(30px * var(--figma-stage-scale)) !important;
  align-items: center !important;
  column-gap: calc(8px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  min-height: calc(21px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.ranking .ranking-screen__rank,
.screen.ranking .ranking-screen__name {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__rank {
  width: calc(20px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.ranking .ranking-screen__team {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__team img {
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-screen__name {
  min-width: 0 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

.screen.ranking .ranking-screen__pager {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(30px * var(--figma-stage-scale)) !important;
  width: calc(68px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5)) !important;
}

.screen.ranking .ranking-screen__pager .pager {
  padding: 0 !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__pager .pager span {
  width: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.28) !important;
  box-shadow: none !important;
}

.screen.ranking .ranking-screen__pager .pager .is-active {
  background: #0068b7 !important;
}

.screen.ranking.ranking--history {
  background: #09172d !important;
  overflow: hidden !important;
}

.screen.ranking.ranking--history .ranking-history__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.screen.ranking.ranking--history .ranking-history__bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.screen.ranking.ranking--history .ranking-history__topbar {
  position: absolute !important;
  top: calc(var(--safe-top) + (32px * var(--figma-stage-scale))) !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  z-index: 4 !important;
}

.screen.ranking.ranking--history .ranking-history__back {
  position: absolute !important;
  left: calc(20px * var(--figma-stage-scale)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.screen.ranking.ranking--history .ranking-history__brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(128px * var(--figma-stage-scale)) !important;
  transform: translate(-50%, -50%) !important;
}

.screen.ranking.ranking--history .ranking-history__brand img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.screen.ranking.ranking--history .ranking-history__hero {
  position: absolute !important;
  top: calc(104px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: calc(341px * var(--figma-stage-scale)) !important;
  z-index: 3 !important;
}

.screen.ranking.ranking--history .ranking-history__hero > h1,
.screen.ranking.ranking--history .ranking-history__hero > p {
  position: absolute !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #ffffff !important;
  text-align: center !important;
  text-shadow: 0 0 calc(6px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.35) !important;
  white-space: nowrap !important;
}

.screen.ranking.ranking--history .ranking-history__hero > h1 {
  top: 0 !important;
  font-size: calc(28px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(34px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.84px * var(--figma-stage-scale)) !important;
}

.screen.ranking.ranking--history .ranking-history__hero > p {
  top: calc(38px * var(--figma-stage-scale)) !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
}

.screen.ranking.ranking--history .ranking-history__podiums {
  position: absolute !important;
  top: calc(98px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: calc(243px * var(--figma-stage-scale)) !important;
  min-height: 0 !important;
  max-height: none !important;
}

.screen.ranking.ranking--history .ranking-history__podiums .ranking-podium--primary {
  top: 0 !important;
}

.screen.ranking.ranking--history .ranking-history__podiums .ranking-podium--secondary {
  top: calc(56px * var(--figma-stage-scale)) !important;
}

.screen.ranking.ranking--history .ranking-history__podiums .ranking-podium--tertiary {
  top: calc(90px * var(--figma-stage-scale)) !important;
}

.screen.ranking.ranking--history .ranking-screen__sheet {
  --ranking-history-sheet-collapsed-height: min(
    calc(210px * var(--figma-stage-scale)),
    calc(100% - (481px * var(--figma-stage-scale)))
  ) !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: var(--ranking-history-sheet-collapsed-height) !important;
  z-index: 5 !important;
}

.screen.ranking.ranking--history .ranking-screen__sheet.is-expanded {
  height: calc(350px * var(--figma-stage-scale)) !important;
}

.screen.ranking.ranking--history .ranking-screen__sheet-body {
  padding-bottom: calc(30px * var(--figma-stage-scale)) !important;
}

.screen.ranking.ranking--history .ranking-screen__sheet:not(.is-expanded).is-dragging {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(var(--ranking-history-sheet-collapsed-height) + var(--ranking-sheet-drag-distance)) !important;
}

.screen.ranking.ranking--history .ranking-screen__viewport {
  height: calc(140px * var(--figma-stage-scale)) !important;
}

.screen.ranking.ranking--history .ranking-screen__sheet:not(.is-expanded).is-dragging .ranking-screen__viewport {
  height: calc(
    (140px * var(--figma-stage-scale)) + var(--ranking-sheet-drag-distance)
  ) !important;
}

.screen.ranking.ranking--history .ranking-screen__sheet.is-expanded.is-dragging {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc((364px * var(--figma-stage-scale)) - var(--ranking-sheet-drag-distance)) !important;
}

.screen.ranking.ranking--history .ranking-screen__pager {
  z-index: 6 !important;
}

.screen.ranking:not(.ranking--history) .ranking-screen__sheet:not(.is-expanded) {
  --ranking-sheet-collapsed-height: min(
    calc(210px * var(--figma-stage-scale)),
    calc(100% - var(--ranking-sheet-collapsed-top))
  ) !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: var(--ranking-sheet-collapsed-height) !important;
  min-height: 0 !important;
  transition: height 220ms ease !important;
}

.screen.ranking:not(.ranking--history) .ranking-screen__sheet:not(.is-expanded).is-dragging {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(var(--ranking-sheet-collapsed-height) + var(--ranking-sheet-drag-distance)) !important;
  min-height: 0 !important;
}

.screen.ranking:not(.ranking--history) .ranking-screen__sheet.is-expanded {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(350px * var(--figma-stage-scale)) !important;
  min-height: 0 !important;
  transition: height 220ms ease !important;
}

.screen.ranking:not(.ranking--history) .ranking-screen__sheet.is-expanded.is-dragging {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc((350px * var(--figma-stage-scale)) - var(--ranking-sheet-drag-distance)) !important;
  min-height: 0 !important;
}

/* 홈 오른손비빔팀 / 왼손비빔팀 — Figma 7S1J share node 151:12338 기반 */
.screen.home-screen {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  --home-topbar-top: calc(var(--safe-top) + (22px * var(--figma-stage-scale))) !important;
  --home-topbar-height: calc(30px * var(--figma-stage-scale)) !important;
  --home-topbar-bottom: calc(var(--home-topbar-top) + var(--home-topbar-height)) !important;
  --home-visual-region-center: calc((var(--home-topbar-bottom) + (100lvh / 2)) / 2) !important;
  --home-product-top: calc(var(--home-visual-region-center) - (129px * var(--figma-stage-scale))) !important;
  --home-logos-top: calc(var(--home-product-top) + (198px * var(--figma-stage-scale))) !important;
  --home-logos-height: calc(60px * var(--figma-stage-scale)) !important;
  --home-sheet-offset-from-logos: calc(82px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.screen.home-screen.home-screen--dream {
  background-color: #e30413 !important;
  background-image: none !important;
}

.screen.home-screen.home-screen--share {
  background-color: #80ba27 !important;
  background-image: none !important;
}

.screen.home-screen .home-screen__pattern {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-color: transparent !important;
  background-image: var(--home-pattern-image) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.home-screen .topbar,
.screen.home-screen .topbar.is-dark {
  position: absolute !important;
  top: var(--home-topbar-top) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  right: calc(16px * var(--figma-stage-scale)) !important;
  width: auto !important;
  max-width: none !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transform: none !important;
  z-index: 5 !important;
}

.screen.home-screen .topbar__button,
.screen.home-screen .topbar__slot {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .topbar__brand,
.screen.home-screen .topbar__brand-lockup,
.screen.home-screen .topbar__brand-image {
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .home-screen__hero {
  position: relative !important;
  width: 100% !important;
  height: calc(452px * var(--figma-stage-scale)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.home-screen .home-screen__product {
  position: absolute !important;
  top: calc(132px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(160px * var(--figma-stage-scale)) !important;
  height: calc(160px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__logos {
  position: absolute !important;
  top: var(--home-logos-top) !important;
  left: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: var(--home-logos-height) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__logo {
  display: block !important;
  width: calc(60px * var(--figma-stage-scale)) !important;
  height: calc(60px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(60px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.home-screen .home-screen__logos-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.screen.home-screen .home-screen__promo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
}

.screen.home-screen .home-screen__promo-rail {
  --home-promo-rail-width: calc(130px * var(--figma-stage-scale)) !important;
  position: absolute !important;
  top: calc(425px * var(--figma-stage-scale)) !important;
  left: calc(50% + (44.5px * var(--figma-stage-scale))) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--home-promo-rail-width) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transform: none !important;
  filter: none !important;
}

.screen.home-screen .home-screen__promo-icon {
  display: none !important;
}

.screen.home-screen .home-screen__promo-icon .topbar__icon {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .home-screen__promo-bubble {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: var(--home-promo-rail-width) !important;
  height: calc(26px * var(--figma-stage-scale)) !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  transform: none !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.screen.home-screen .home-screen__promo-bubble::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
  background-size: 0 100% !important;
  border-radius: inherit !important;
  transition: background-size 220ms ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.home-screen .home-screen__promo-rail:hover .home-screen__promo-bubble::after {
    background-size: 100% 100% !important;
  }
}

.screen.home-screen .home-screen__promo-rail:active .home-screen__promo-bubble::after,
.screen.home-screen .home-screen__promo-rail.is-pressing .home-screen__promo-bubble::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) !important;
  background-size: 100% 100% !important;
}

.screen.home-screen .home-screen__promo-chevron {
  position: absolute !important;
  top: calc(386px * var(--figma-stage-scale)) !important;
  right: calc(0px * var(--figma-stage-scale)) !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25)) !important;
  z-index: 6 !important;
}

.screen.home-screen .home-screen__promo-chevron img {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.home-screen .home-screen__promo-bubble-tail {
  position: absolute !important;
  top: calc(-4px * var(--figma-stage-scale)) !important;
  right: calc(8px * var(--figma-stage-scale)) !important;
  left: auto !important;
  width: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
  transform: none !important;
  border-radius: 0 !important;
  z-index: 2 !important;
}

.screen.home-screen .home-screen__promo-bubble-copy {
  position: relative !important;
  z-index: 1 !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
  transform: none !important;
}

.phone-stage-overlay > .stage-context-rail,
.phone-stage > .stage-context-rail,
.phone-stage-frame > .stage-context-rail {
  position: absolute !important;
  top: calc(50% + (12px * var(--figma-stage-scale))) !important;
  right: 11px !important;
  display: block !important;
  z-index: 26 !important;
}

.phone-stage-overlay > .stage-context-rail.stage-context-rail--left,
.phone-stage > .stage-context-rail.stage-context-rail--left,
.phone-stage-frame > .stage-context-rail.stage-context-rail--left {
  left: 11px !important;
  right: auto !important;
}

.phone-stage-overlay > .stage-context-rail .home-screen__promo-rail,
.phone-stage > .stage-context-rail .home-screen__promo-rail,
.phone-stage-frame > .stage-context-rail .home-screen__promo-rail {
  --home-promo-rail-width: calc(130px * var(--figma-stage-scale)) !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--home-promo-rail-width) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.phone-stage-overlay > .stage-context-rail .home-screen__promo-bubble,
.phone-stage > .stage-context-rail .home-screen__promo-bubble,
.phone-stage-frame > .stage-context-rail .home-screen__promo-bubble {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: var(--home-promo-rail-width) !important;
  height: calc(26px * var(--figma-stage-scale)) !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.phone-stage-overlay > .stage-context-rail .home-screen__promo-bubble::after,
.phone-stage > .stage-context-rail .home-screen__promo-bubble::after,
.phone-stage-frame > .stage-context-rail .home-screen__promo-bubble::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
  background-size: 0 100% !important;
  border-radius: inherit !important;
  transition: background-size 220ms ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .phone-stage-overlay > .stage-context-rail .home-screen__promo-rail:hover .home-screen__promo-bubble::after,
  .phone-stage > .stage-context-rail .home-screen__promo-rail:hover .home-screen__promo-bubble::after,
  .phone-stage-frame > .stage-context-rail .home-screen__promo-rail:hover .home-screen__promo-bubble::after {
    background-size: 100% 100% !important;
  }
}

.phone-stage-overlay > .stage-context-rail .home-screen__promo-rail:active .home-screen__promo-bubble::after,
.phone-stage-overlay > .stage-context-rail .home-screen__promo-rail.is-pressing .home-screen__promo-bubble::after,
.phone-stage > .stage-context-rail .home-screen__promo-rail:active .home-screen__promo-bubble::after,
.phone-stage > .stage-context-rail .home-screen__promo-rail.is-pressing .home-screen__promo-bubble::after,
.phone-stage-frame > .stage-context-rail .home-screen__promo-rail:active .home-screen__promo-bubble::after,
.phone-stage-frame > .stage-context-rail .home-screen__promo-rail.is-pressing .home-screen__promo-bubble::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) !important;
  background-size: 100% 100% !important;
}

.phone-stage-overlay > .stage-context-rail .home-screen__promo-bubble-tail,
.phone-stage > .stage-context-rail .home-screen__promo-bubble-tail,
.phone-stage-frame > .stage-context-rail .home-screen__promo-bubble-tail {
  position: absolute !important;
  top: calc(-4px * var(--figma-stage-scale)) !important;
  right: calc(8px * var(--figma-stage-scale)) !important;
  left: auto !important;
  width: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
  transform: none !important;
  border-radius: 0 !important;
  z-index: 2 !important;
}

.phone-stage-overlay > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble-tail,
.phone-stage > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble-tail,
.phone-stage-frame > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble-tail {
  right: auto !important;
  left: calc(8px * var(--figma-stage-scale)) !important;
  z-index: 2 !important;
}

.phone-stage-overlay > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble,
.phone-stage > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble,
.phone-stage-frame > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble {
  overflow: visible !important;
}

.phone-stage-overlay > .stage-context-rail .home-screen__promo-bubble-copy,
.phone-stage > .stage-context-rail .home-screen__promo-bubble-copy,
.phone-stage-frame > .stage-context-rail .home-screen__promo-bubble-copy {
  position: relative !important;
  z-index: 1 !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.screen.home-screen .home-screen__promo-rail--howto,
.phone-stage-overlay > .stage-context-rail .home-screen__promo-rail--howto,
.phone-stage > .stage-context-rail .home-screen__promo-rail--howto,
.phone-stage-frame > .stage-context-rail .home-screen__promo-rail--howto {
  --home-promo-rail-width: calc(60px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .home-screen__promo-rail--top10,
.phone-stage-overlay > .stage-context-rail .home-screen__promo-rail--top10,
.phone-stage > .stage-context-rail .home-screen__promo-rail--top10,
.phone-stage-frame > .stage-context-rail .home-screen__promo-rail--top10 {
  --home-promo-rail-width: calc(56px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .home-screen__sheet,
.phone-stage-overlay > .home-screen__sheet {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--home-logos-top) + var(--home-logos-height) + var(--home-sheet-offset-from-logos)) !important;
  bottom: 0 !important;
  width: var(--figma-stage-width) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: calc(32px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) 0 0 !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}

.screen.home-screen .home-screen__metrics,
.phone-stage-overlay > .home-screen__sheet .home-screen__metrics {
  position: absolute !important;
  top: calc(48px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(328px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__metric,
.phone-stage-overlay > .home-screen__sheet .home-screen__metric {
  margin: 0 !important;
  width: 100% !important;
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.home-screen .home-screen__metric-label,
.screen.home-screen .home-screen__metric-trailing,
.screen.home-screen .home-screen__metric-primary,
.phone-stage-overlay > .home-screen__sheet .home-screen__metric-label,
.phone-stage-overlay > .home-screen__sheet .home-screen__metric-trailing,
.phone-stage-overlay > .home-screen__sheet .home-screen__metric-primary {
  font: inherit !important;
}

.screen.home-screen .home-screen__metric-primary,
.phone-stage-overlay > .home-screen__sheet .home-screen__metric-primary {
  color: #0068b7 !important;
}

.screen.home-screen .home-screen__actions,
.phone-stage-overlay > .home-screen__sheet .home-screen__actions {
  position: absolute !important;
  left: 50% !important;
  top: calc(158px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__sheet .cta,
.phone-stage-overlay > .home-screen__sheet .cta {
  position: static !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: none !important;
}

.screen.home-screen .home-screen__sheet .pager,
.phone-stage-overlay > .home-screen__sheet .pager {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(30px * var(--figma-stage-scale)) !important;
  width: calc(68px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5)) !important;
}

.mockup-shell.is-route-transition.is-route-transition--forward .screen {
  animation: home-flow-enter-forward 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mockup-shell.is-route-transition.is-route-transition--backward .screen {
  animation: home-flow-enter-backward 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mockup-shell.is-route-transition.is-route-transition-flavor--home-slide .screen {
  animation: none !important;
}

.mockup-shell.is-route-transition.is-route-transition-flavor--home-slide .phone-stage,
.mockup-shell.is-route-transition.is-route-transition-flavor--home-slide .phone-stage-overlay {
  animation: none !important;
}

.mockup-shell.is-route-transition.is-route-transition-flavor--home-slide.is-route-transition--forward .phone-stage-shell {
  animation: home-flow-page-slide-forward 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mockup-shell.is-route-transition.is-route-transition-flavor--home-slide.is-route-transition--backward .phone-stage-shell {
  animation: home-flow-page-slide-backward 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mockup-shell.is-route-transition.is-route-transition-flavor--intro-crossfade .screen {
  animation: none !important;
}

.phone-stage-transition-ghost {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.phone-stage-transition-ghost .screen {
  min-height: 100% !important;
}

.mockup-shell.is-route-transition.is-route-transition-flavor--intro-crossfade .phone-stage-transition-ghost {
  animation: intro-stage-ghost-fade 320ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.mockup-shell.is-route-transition.is-route-transition-flavor--intro-crossfade .screen.intro-screen .intro-screen__content::before {
  animation: intro-background-swap 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes intro-stage-ghost-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes home-flow-enter-forward {
  from {
    opacity: 0.01;
    transform: translate3d(calc(20px * var(--figma-stage-scale)), 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes intro-background-swap {
  from {
    opacity: 0.01;
    transform: translate3d(0, 0, 0) scale(1.012);
    filter: saturate(0.96);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1);
  }
}

@keyframes home-flow-page-slide-forward {
  from {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes home-flow-page-slide-backward {
  from {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes home-flow-enter-backward {
  from {
    opacity: 0.01;
    transform: translate3d(calc(-20px * var(--figma-stage-scale)), 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.phone-stage-overlay > .home-flow-nav,
.phone-stage > .home-flow-nav,
.phone-stage-frame > .home-flow-nav {
  position: absolute !important;
  inset: 0 !important;
  z-index: 24 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button,
.phone-stage > .home-flow-nav .home-flow-nav__button,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button {
  position: absolute !important;
  top: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 0.9 !important;
  pointer-events: auto !important;
  z-index: 25 !important;
  touch-action: manipulation !important;
  text-decoration: none !important;
  filter: none !important;
  transform: translateY(-50%) !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left,
.phone-stage > .home-flow-nav .home-flow-nav__button--left,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button--left {
  left: -2px !important;
  justify-content: center !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button--right,
.phone-stage > .home-flow-nav .home-flow-nav__button--right,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button--right {
  right: -2px !important;
  justify-content: center !important;
}

.phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button,
.phone-stage > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button,
.phone-stage-frame > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button {
  top: calc(104px * var(--figma-stage-scale)) !important;
  transform: none !important;
}

.phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button--right,
.phone-stage > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button--right,
.phone-stage-frame > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button--right {
  top: calc(102px * var(--figma-stage-scale)) !important;
}

@media (max-width: 375px) {
  .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history,
  .phone-stage > .home-flow-nav.home-flow-nav--ranking-history,
  .phone-stage-frame > .home-flow-nav.home-flow-nav--ranking-history {
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button img,
.phone-stage > .home-flow-nav .home-flow-nav__button img,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button img {
  width: 19px !important;
  height: 34px !important;
  flex: 0 0 19px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25)) !important;
  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left img,
.phone-stage > .home-flow-nav .home-flow-nav__button--left img,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button--left img {
  transform: scaleX(-1) !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__bubble,
.phone-stage > .home-flow-nav .home-flow-nav__bubble,
.phone-stage-frame > .home-flow-nav .home-flow-nav__bubble {
  position: absolute !important;
  top: 50% !important;
  left: calc(31px * var(--figma-stage-scale)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(60px * var(--figma-stage-scale)) !important;
  height: calc(26px * var(--figma-stage-scale)) !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__bubble-tail,
.phone-stage > .home-flow-nav .home-flow-nav__bubble-tail,
.phone-stage-frame > .home-flow-nav .home-flow-nav__bubble-tail {
  position: absolute !important;
  left: calc(-4px * var(--figma-stage-scale)) !important;
  top: 50% !important;
  width: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%) !important;
  transform: translateY(-50%) !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__bubble-copy,
.phone-stage > .home-flow-nav .home-flow-nav__bubble-copy,
.phone-stage-frame > .home-flow-nav .home-flow-nav__bubble-copy {
  position: relative !important;
  z-index: 1 !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

@media (hover: hover) and (pointer: fine) {
  .phone-stage-overlay > .home-flow-nav .home-flow-nav__button:hover,
  .phone-stage > .home-flow-nav .home-flow-nav__button:hover,
  .phone-stage-frame > .home-flow-nav .home-flow-nav__button:hover {
    background-color: transparent !important;
    filter: none !important;
    box-shadow: none !important;
    opacity: 0.96 !important;
    transform: translateY(-50%) !important;
  }

  .phone-stage-overlay > .home-flow-nav .home-flow-nav__button:hover img,
  .phone-stage > .home-flow-nav .home-flow-nav__button:hover img,
  .phone-stage-frame > .home-flow-nav .home-flow-nav__button:hover img {
    filter: brightness(1.08) saturate(1.02) drop-shadow(0 0 calc(7px * var(--figma-stage-scale, 1)) rgba(0, 0, 0, 0.2)) !important;
    transform: scale(1.04) !important;
  }

  .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left:hover img,
  .phone-stage > .home-flow-nav .home-flow-nav__button--left:hover img,
  .phone-stage-frame > .home-flow-nav .home-flow-nav__button--left:hover img {
    transform: scaleX(-1) scale(1.04) !important;
  }

  .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button:hover,
  .phone-stage > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button:hover,
  .phone-stage-frame > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button:hover {
    transform: none !important;
  }
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button:active,
.phone-stage-overlay > .home-flow-nav .home-flow-nav__button.is-pressing,
.phone-stage > .home-flow-nav .home-flow-nav__button:active,
.phone-stage > .home-flow-nav .home-flow-nav__button.is-pressing,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button:active,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button.is-pressing {
  background-color: transparent !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 0.9 !important;
  transform: translateY(-50%) !important;
}

.phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button:active,
.phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button.is-pressing,
.phone-stage > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button:active,
.phone-stage > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button.is-pressing,
.phone-stage-frame > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button:active,
.phone-stage-frame > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button.is-pressing {
  transform: none !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button:active img,
.phone-stage-overlay > .home-flow-nav .home-flow-nav__button.is-pressing img,
.phone-stage > .home-flow-nav .home-flow-nav__button:active img,
.phone-stage > .home-flow-nav .home-flow-nav__button.is-pressing img,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button:active img,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button.is-pressing img {
  filter: brightness(0.92) saturate(1.02) drop-shadow(0 0 calc(5px * var(--figma-stage-scale, 1)) rgba(0, 0, 0, 0.18)) !important;
  transform: scale(0.98) !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left:active img,
.phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left.is-pressing img,
.phone-stage > .home-flow-nav .home-flow-nav__button--left:active img,
.phone-stage > .home-flow-nav .home-flow-nav__button--left.is-pressing img,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button--left:active img,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button--left.is-pressing img {
  transform: scaleX(-1) scale(0.98) !important;
}

.phone-stage-overlay > .home-flow-pager,
.phone-stage > .home-flow-pager,
.phone-stage-frame > .home-flow-pager {
  position: absolute !important;
  left: 50% !important;
  bottom: 30px !important;
  z-index: 9 !important;
  width: calc(68px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
}

.phone-stage-overlay > .home-flow-pager .pager,
.phone-stage > .home-flow-pager .pager,
.phone-stage-frame > .home-flow-pager .pager {
  width: 100% !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5)) !important;
}

.phone-stage-overlay > .home-flow-pager .pager span,
.phone-stage > .home-flow-pager .pager span,
.phone-stage-frame > .home-flow-pager .pager span {
  display: block !important;
  flex: 0 0 calc(8px * var(--figma-stage-scale)) !important;
  width: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone-stage-overlay > .home-flow-pager .pager .is-active,
.phone-stage > .home-flow-pager .pager .is-active,
.phone-stage-frame > .home-flow-pager .pager .is-active {
  background: #0068b7 !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone-stage-shell {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

.phone-stage-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: var(--mockup-stage-width) !important;
  height: var(--mockup-stage-height) !important;
  min-height: var(--mockup-stage-height) !important;
  pointer-events: none !important;
  z-index: 18 !important;
}

.phone-stage-overlay > * {
  pointer-events: auto !important;
}

.mockup-shell.has-overlay .phone-stage-overlay {
  visibility: hidden !important;
  pointer-events: none !important;
}

.mockup-shell.has-overlay .phone-stage-overlay > * {
  pointer-events: none !important;
}

.phone-stage-frame {
  position: relative !important;
}

.phone-stage-overlay > .home-flow-nav .home-flow-nav__button,
.phone-stage-frame > .home-flow-nav .home-flow-nav__button {
  position: absolute !important;
}

.phone-stage .debug-home-switcher {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 48 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none !important;
}

.phone-stage .debug-home-switcher__backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(2, 3, 6, 0.96) !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
}

.phone-stage .debug-home-switcher__toolbar {
  position: absolute !important;
  left: 50% !important;
  top: calc(18px + env(safe-area-inset-top)) !important;
  transform: translateX(-50%) !important;
  z-index: 52 !important;
  width: min(100% - 32px, 360px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  pointer-events: auto !important;
}

.phone-stage .debug-home-switcher__toolbar-label {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.phone-stage .debug-home-switcher__toolbar-close {
  display: none !important;
}

.phone-stage .debug-home-switcher__toolbar-close-icon {
  position: relative !important;
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
}

.phone-stage .debug-home-switcher__toolbar-close-icon::before,
.phone-stage .debug-home-switcher__toolbar-close-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center center !important;
}

.phone-stage .debug-home-switcher__toolbar-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.phone-stage .debug-home-switcher__toolbar-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.phone-stage .debug-home-switcher__close-fab {
  position: absolute !important;
  left: calc(50% - 29px) !important;
  bottom: calc(26px + env(safe-area-inset-bottom)) !important;
  top: auto !important;
  right: auto !important;
  inset: auto auto calc(26px + env(safe-area-inset-bottom)) calc(50% - 29px) !important;
  margin: 0 !important;
  transform: none !important;
  width: 58px !important;
  height: 58px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  z-index: 53 !important;
}

.phone-stage .debug-home-switcher__close-fab-icon {
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
}

.phone-stage .debug-home-switcher__close-fab-icon::before,
.phone-stage .debug-home-switcher__close-fab-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 20px !important;
  height: 2.5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  transform-origin: center center !important;
}

.phone-stage .debug-home-switcher__close-fab-icon::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.phone-stage .debug-home-switcher__close-fab-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.phone-stage .debug-home-switcher__deck {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  pointer-events: auto !important;
  overflow: visible !important;
  touch-action: none !important;
  user-select: none !important;
}

.phone-stage .debug-home-switcher__item {
  position: absolute !important;
  left: calc(50% - (var(--debug-switcher-width, 274px) / 2)) !important;
  top: calc(50% - (var(--debug-switcher-height, 593px) / 2)) !important;
  inset: auto !important;
  margin: 0 !important;
  width: var(--debug-switcher-width, min(74vw, 274px)) !important;
  height: var(--debug-switcher-height, auto) !important;
  display: block !important;
  text-decoration: none !important;
  color: rgba(247, 248, 252, 0.94) !important;
  border-radius: 28px !important;
  overflow: visible !important;
  transform-origin: center center !important;
  transform: translateX(var(--debug-switcher-x, 0px)) !important;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform, opacity, filter !important;
}

.phone-stage .debug-home-switcher__card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(17, 18, 26, 0.34) 0%, rgba(11, 13, 20, 0.82) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 20px 30px rgba(7, 10, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(14px) saturate(132%) !important;
  transform: scale(var(--debug-switcher-scale, 1)) !important;
  transform-origin: center center !important;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.phone-stage .debug-home-switcher__item.is-focus .debug-home-switcher__card {
  box-shadow:
    0 26px 36px rgba(7, 10, 18, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.phone-stage .debug-home-switcher__item--dream .debug-home-switcher__card {
  background:
    linear-gradient(180deg, rgba(92, 20, 31, 0.56) 0%, rgba(15, 13, 20, 0.94) 100%) !important;
}

.phone-stage .debug-home-switcher__item--warm .debug-home-switcher__card {
  background:
    linear-gradient(180deg, rgba(116, 54, 12, 0.54) 0%, rgba(15, 13, 20, 0.94) 100%) !important;
}

.phone-stage .debug-home-switcher__item--cool .debug-home-switcher__card {
  background:
    linear-gradient(180deg, rgba(23, 46, 104, 0.52) 0%, rgba(15, 13, 20, 0.94) 100%) !important;
}

.phone-stage .debug-home-switcher__item--gold .debug-home-switcher__card {
  background:
    linear-gradient(180deg, rgba(107, 76, 15, 0.56) 0%, rgba(15, 13, 20, 0.94) 100%) !important;
}

.phone-stage .debug-home-switcher__window {
  position: absolute !important;
  top: 12px !important;
  left: 14px !important;
  right: 14px !important;
  display: grid !important;
  gap: 4px !important;
  opacity: 0.92 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.phone-stage .debug-home-switcher__window span {
  display: block !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

.phone-stage .debug-home-switcher__window span:nth-child(2) {
  width: 76% !important;
}

.phone-stage .debug-home-switcher__window span:nth-child(3) {
  width: 58% !important;
}

.phone-stage .debug-home-switcher__thumbnail {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #05070b !important;
}

.phone-stage .debug-home-switcher__thumbnail::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(8, 11, 18, 0.01) 0%, rgba(8, 11, 18, 0.01) 24%, rgba(8, 11, 18, 0.05) 78%, rgba(8, 11, 18, 0.12) 100%) !important;
}

.phone-stage .debug-home-switcher__poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.phone-stage .debug-home-switcher__thumbnail iframe {
  display: none !important;
}

.phone-stage .debug-home-switcher__icon,
.phone-stage .debug-home-switcher__copy,
.phone-stage .debug-home-switcher__meta {
  position: relative !important;
  z-index: 3 !important;
}

.phone-stage .debug-home-switcher__meta {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px 12px !important;
}

.phone-stage .debug-home-switcher__icon {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
}

.phone-stage .debug-home-switcher__icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.phone-stage .debug-home-switcher__copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.phone-stage .debug-home-switcher__copy strong,
.phone-stage .debug-home-switcher__copy small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.phone-stage .debug-home-switcher__copy strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.phone-stage .debug-home-switcher__copy small {
  font-size: 10px !important;
  line-height: 1.2 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.phone-stage .debug-home-switcher__item.is-focus .debug-home-switcher__copy small {
  color: rgba(255, 255, 255, 0.82) !important;
}

.phone-stage .debug-home-systembar {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  z-index: 49 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 26px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(7, 10, 18, 0.56) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  transform: translateX(-50%) !important;
}

.phone-stage .debug-home-systembar__button {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.phone-stage .debug-home-systembar__button.is-active {
  color: #ffffff !important;
}

.phone-stage .debug-home-systembar__icon {
  display: inline-block !important;
}

.phone-stage .debug-home-systembar__icon--back {
  width: 13px !important;
  height: 13px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) translateX(2px) !important;
}

.phone-stage .debug-home-systembar__icon--home {
  width: 14px !important;
  height: 14px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
}

.phone-stage .debug-home-systembar__icon--recent {
  width: 15px !important;
  height: 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 4px !important;
}

.mockup-shell.is-debug-home-switcher-open .phone-stage > .screen {
  opacity: 0;
  transform: scale(0.97) translateY(8px) !important;
  filter: none !important;
  pointer-events: none !important;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mockup-shell.is-debug-home-switcher-open .phone-stage {
  background: #020306 !important;
}

.mockup-shell.is-debug-home-switcher-open .debug-home-systembar {
  opacity: 0;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(12px) !important;
  transition:
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.screen.intro-screen {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  color: #ffffff !important;
  background: #081734 !important;
  overflow: visible !important;
}

.screen.intro-screen .intro-screen__background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #081734 !important;
}

.screen.intro-screen .intro-screen__background img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: none !important;
  transform-origin: center top !important;
}

.screen.intro-screen .topbar,
.screen.intro-screen .topbar.is-dark {
  position: absolute !important;
  top: calc(var(--safe-top) + 32px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 30px !important;
  margin: 0 !important;
  padding-left: calc(16px * var(--figma-stage-scale)) !important;
  padding-right: calc(16px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  z-index: 8 !important;
}

.screen.intro-screen .topbar__brand,
.screen.intro-screen .topbar__brand-lockup,
.screen.intro-screen .topbar__brand-image {
  z-index: 3 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.screen.intro-screen .topbar__brand {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
  min-width: calc(128px * var(--figma-stage-scale)) !important;
  min-height: calc(20px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  transform: none !important;
}

.screen.intro-screen .topbar__brand-lockup,
.screen.intro-screen .topbar__brand-image {
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
  min-width: calc(128px * var(--figma-stage-scale)) !important;
  min-height: calc(20px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .topbar__button[aria-label="menu"],
.screen.intro-screen .topbar__button[aria-label="back"] {
  position: absolute !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.screen.intro-screen .topbar__button[aria-label="mypage"],
.screen.intro-screen .topbar__button[aria-label="close"] {
  position: absolute !important;
  right: calc(16px * var(--figma-stage-scale)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.screen.intro-screen .intro-screen__hero {
  position: absolute !important;
  top: calc(var(--safe-top) + 89px) !important;
  left: 50% !important;
  z-index: 4 !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.intro-screen .intro-screen__hero img {
  display: block !important;
  width: auto !important;
  height: 140px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 140px !important;
  max-height: 140px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  flex: none !important;
  vertical-align: top !important;
}

.screen.intro-screen.intro-screen--promo {
  --promo-bg-y: 0px;
  background: transparent !important;
  min-height: calc(3801px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen.intro-screen--howto {
  --intro-howto-scroll-progress: 0;
  --intro-howto-bg-scale: 1;
  --intro-howto-bg-y: 0px;
  background-color: #081734 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
}

.phone-stage:has(> .screen.intro-screen.intro-screen--howto) {
  background: #081734 !important;
}

.screen.intro-screen.intro-screen--howto > .intro-screen__background {
  display: block !important;
  z-index: 0 !important;
  contain: paint !important;
  will-change: transform !important;
}

.screen.intro-screen.intro-screen--howto > .intro-screen__background img {
  width: 100% !important;
  max-width: none !important;
  transform: translate3d(0, var(--intro-howto-bg-y), 0) scale(var(--intro-howto-bg-scale)) !important;
  transform-origin: center top !important;
  will-change: transform !important;
}

@media (hover: none), (pointer: coarse) {
  .screen.intro-screen.intro-screen--howto.intro-screen--howto-predict {
    height: calc(1556px * var(--figma-stage-scale)) !important;
    min-height: calc(1556px * var(--figma-stage-scale)) !important;
    max-height: calc(1556px * var(--figma-stage-scale)) !important;
  }

  .screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup {
    height: calc(1588px * var(--figma-stage-scale)) !important;
    min-height: calc(1588px * var(--figma-stage-scale)) !important;
    max-height: calc(1588px * var(--figma-stage-scale)) !important;
  }

  .screen.intro-screen.intro-screen--howto.intro-screen--howto-predict .intro-screen__background,
  .screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup .intro-screen__background {
    inset: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  .screen.intro-screen.intro-screen--howto > .intro-screen__background img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-upper {
  position: relative !important;
  background: #081734 !important;
  overflow: visible !important;
  min-height: 0 !important;
  isolation: isolate !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-predict {
  height: 1556px !important;
  min-height: 1556px !important;
  max-height: 1556px !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup {
  height: 1588px !important;
  min-height: 1588px !important;
  max-height: 1588px !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-predict .intro-screen__background {
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 1556px !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup .intro-screen__background {
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 1588px !important;
}

@media (hover: none), (pointer: coarse) {
  .screen.intro-screen.intro-screen--howto.intro-screen--howto-predict {
    height: auto !important;
    min-height: calc(1556px * var(--figma-stage-scale)) !important;
    max-height: none !important;
  }

  .screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup {
    height: auto !important;
    min-height: calc(1588px * var(--figma-stage-scale)) !important;
    max-height: none !important;
  }

  .screen.intro-screen.intro-screen--howto.intro-screen--howto-predict .intro-screen__background,
  .screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup .intro-screen__background {
    inset: 0 !important;
    height: auto !important;
    min-height: 100% !important;
  }
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-upper .intro-screen__background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  contain: paint !important;
  will-change: auto !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-upper .intro-screen__background img {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 110% !important;
  min-width: 110% !important;
  height: 110% !important;
  min-height: 110% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: translate3d(-50%, calc(-1 * var(--promo-bg-y, 0px)), 0) !important;
  transform-origin: center top !important;
  will-change: auto !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-footer {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: calc(1170px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-footer img {
  display: block !important;
  width: 100% !important;
  height: calc(1170px * var(--figma-stage-scale)) !important;
  min-height: calc(1170px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
  object-position: center top !important;
}

.screen.intro-screen .intro-screen__content {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
  padding-top: 269px !important;
  padding-bottom: calc(72px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__content::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image: var(--intro-content-bg) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  opacity: 1 !important;
}

.screen.intro-screen.intro-screen--howto .intro-screen__content {
  padding-top: 269px !important;
}

.screen.intro-screen.intro-screen--howto .intro-screen__content::before {
  background-image: none !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-predict .intro-screen__content {
  padding-bottom: 58px !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup .intro-screen__content {
  padding-bottom: 69px !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__content--promo-top {
  position: relative !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
  display: grid !important;
  justify-items: center !important;
  gap: calc(28px * var(--figma-stage-scale)) !important;
  padding-bottom: calc(40px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  background-color: transparent !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__content--promo-top::before {
  content: none !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__content--promo-top::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: -1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  background-image: linear-gradient(180deg, rgba(8, 23, 52, 0) 0%, rgba(8, 23, 52, 0.05) 58%, rgba(8, 23, 52, 0.14) 100%) !important;
  background-color: rgba(8, 23, 52, 0.02) !important;
}

.screen.intro-screen .intro-screen__promo-composite {
  position: relative !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  isolation: isolate !important;
}

.screen.intro-screen .intro-screen__promo-composite::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, 0.01) !important;
  -webkit-backdrop-filter: blur(calc(8px * var(--figma-stage-scale))) !important;
  backdrop-filter: blur(calc(8px * var(--figma-stage-scale))) !important;
  -webkit-mask-image: var(--intro-promo-translucent-mask) !important;
  mask-image: var(--intro-promo-translucent-mask) !important;
  -webkit-mask-mode: alpha !important;
  mask-mode: alpha !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center top !important;
  mask-position: center top !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

.screen.intro-screen .intro-screen__promo-composite img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.screen.intro-screen .intro-screen__promo-store-button {
  --interactive-fill-opacity: 0.08;
  --interactive-fill-size: 0%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  min-width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 calc(20px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #0068b7 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  overflow: clip !important;
}

.screen.intro-screen .intro-screen__promo-store-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  z-index: 0 !important;
  width: var(--interactive-fill-size) !important;
  height: 100% !important;
  background: rgba(0, 0, 0, var(--interactive-fill-opacity)) !important;
  pointer-events: none !important;
  transition: width 180ms ease !important;
}

.screen.intro-screen .intro-screen__promo-store-button span {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  color: inherit !important;
  font-family: "esamanru OTF", "Pretendard", sans-serif !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.intro-screen .intro-screen__promo-store-button:hover {
    --interactive-fill-size: 100% !important;
  }
}

.screen.intro-screen .intro-screen__promo-store-button:active,
.screen.intro-screen .intro-screen__promo-store-button.is-pressing {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
}

.screen.intro-screen .intro-screen__promo-stack {
  display: grid !important;
  gap: calc(28px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.intro-screen .intro-screen__card {
  display: grid !important;
  gap: calc(16px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  padding: calc(32px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.92) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.2) !important;
  box-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(calc(4px * var(--figma-stage-scale))) !important;
}

.screen.intro-screen .intro-screen__section-heading {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.intro-screen .intro-screen__section-heading h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.intro-screen .intro-screen__section-heading-arrow {
  width: calc(18px * var(--figma-stage-scale)) !important;
  height: calc(18px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(18px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.intro-screen .intro-screen__section-heading-arrow:not(.is-right) {
  transform: scaleX(-1) !important;
}

.screen.intro-screen .intro-screen__card-copy,
.screen.intro-screen .intro-screen__card-list {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.intro-screen .intro-screen__card-copy {
  text-align: center !important;
}

.screen.intro-screen .intro-screen__card-copy p {
  margin: 0 !important;
}

.screen.intro-screen .intro-screen__card-list {
  padding-left: calc(18px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__card-list li {
  margin: 0 0 calc(4px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__card-note {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  text-shadow: 0 0 calc(10px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.45) !important;
}

.screen.intro-screen .intro-screen__promo-stack .cta {
  width: calc(285px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__notices {
  margin-top: calc(40px * var(--figma-stage-scale)) !important;
  padding: calc(40px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) calc(78px * var(--figma-stage-scale)) !important;
  background: #f0f0f0 !important;
  color: #8c8c8c !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__notices {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
}

.screen.intro-screen .intro-screen__notice-section {
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.intro-screen .intro-screen__notice-section + .intro-screen__notice-section {
  margin-top: calc(32px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__notice-section h3 {
  margin: 0 0 calc(8px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: 0 !important;
}

.screen.intro-screen .intro-screen__notice-section ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.screen.intro-screen .intro-screen__notice-section li {
  position: relative !important;
  margin: 0 0 calc(4px * var(--figma-stage-scale)) !important;
  padding-left: calc(10px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__notice-section li::before {
  content: "·" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

.screen.intro-screen .intro-screen__pager {
  width: calc(68px * var(--figma-stage-scale)) !important;
  margin: calc(30px * var(--figma-stage-scale)) auto 0 !important;
}

.screen.intro-screen .intro-screen__pager .pager {
  width: 100% !important;
  margin: 0 !important;
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5)) !important;
}

.screen.intro-screen .intro-howto {
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.intro-screen .intro-howto.intro-howto--composite {
  width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen.intro-screen--howto .intro-howto {
  width: 285px !important;
  max-width: 285px !important;
}

.screen.intro-screen.intro-screen--howto .intro-howto.intro-howto--composite {
  width: 285px !important;
  max-width: 285px !important;
}

.screen.intro-screen .intro-howto__tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

.screen.intro-screen .intro-howto__tab {
  position: relative !important;
  overflow: hidden !important;
  min-height: calc(37px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(6px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.92) !important;
  border-bottom: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 0 !important;
  background: rgba(0, 104, 183, 0.2) !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  opacity: 0.6 !important;
  isolation: isolate !important;
  transition: opacity 180ms ease !important;
}

.screen.intro-screen .intro-howto__tab::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
  background-size: 0 100% !important;
  transition: background-size 220ms ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.intro-screen .intro-howto__tab:hover::after {
    background-size: 100% 100% !important;
  }
}

.screen.intro-screen .intro-howto__tab:active::after,
.screen.intro-screen .intro-howto__tab.is-pressing::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) !important;
  background-size: 100% 100% !important;
}

.screen.intro-screen .intro-howto__tab.is-active {
  opacity: 1 !important;
}

.screen.intro-screen .intro-howto__panel {
  display: grid !important;
  gap: calc(28px * var(--figma-stage-scale)) !important;
  padding: calc(32px * var(--figma-stage-scale)) calc(14px * var(--figma-stage-scale)) calc(28px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.92) !important;
  border-top: 0 !important;
  border-radius: 0 0 calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.2) !important;
  box-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(calc(4px * var(--figma-stage-scale))) !important;
}

.screen.intro-screen .intro-howto__panel--composite {
  position: relative !important;
  display: block !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

.screen.intro-screen .intro-howto__composite {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  transform: translateZ(0) !important;
  transition: none !important;
  will-change: auto !important;
  vertical-align: top !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-predict .intro-howto__panel--composite {
  height: 1221px !important;
  min-height: 1221px !important;
  max-height: 1221px !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-predict .intro-howto__composite {
  width: 285px !important;
  min-width: 285px !important;
  max-width: 285px !important;
  height: 1221px !important;
  min-height: 1221px !important;
  max-height: 1221px !important;
  object-fit: fill !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup .intro-howto__panel--composite {
  height: 1225px !important;
  min-height: 1225px !important;
  max-height: 1225px !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup .intro-howto__composite {
  width: 285px !important;
  min-width: 285px !important;
  max-width: 285px !important;
  height: 1225px !important;
  min-height: 1225px !important;
  max-height: 1225px !important;
  object-fit: fill !important;
}

.screen.intro-screen .intro-howto__composite.is-switching {
  opacity: 1 !important;
  transform: translateZ(0) !important;
}

.screen.intro-screen.intro-screen--howto.is-howto-transitioning .intro-howto__panel--composite,
.screen.intro-screen.intro-screen--howto.is-howto-transitioning .intro-screen__hero {
  opacity: 1 !important;
}

.screen.intro-screen.intro-screen--howto .intro-screen__hero {
  transition: none !important;
  will-change: auto !important;
}

.screen.intro-screen .intro-howto__composite-switch {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  height: calc(37px * var(--figma-stage-scale)) !important;
  z-index: 2 !important;
  overflow: hidden !important;
  border-radius: calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 0 !important;
}

.screen.intro-screen.intro-screen--howto-lineup .intro-howto__composite-switch {
  height: calc(37px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__composite-tab {
  position: relative !important;
  overflow: hidden !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  isolation: isolate !important;
}

.screen.intro-screen .intro-howto__composite-tab:first-child {
  border-top-left-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__composite-tab:last-child {
  border-top-right-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__composite-tab::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
  background-size: 0 100% !important;
  transition: background-size 220ms ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.intro-screen .intro-howto__composite-tab:hover::after {
    background-size: 100% 100% !important;
  }
}

.screen.intro-screen .intro-howto__composite-tab:active::after,
.screen.intro-screen .intro-howto__composite-tab.is-pressing::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) !important;
  background-size: 100% 100% !important;
}

.screen.intro-screen .intro-howto__composite-tab:focus-visible {
  outline: calc(2px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.88) !important;
  outline-offset: calc(-4px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__steps {
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: decimal !important;
  list-style-position: inside !important;
}

.screen.intro-screen .intro-howto__step {
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.intro-screen .intro-howto__step p {
  margin: 0 !important;
}

.screen.intro-screen .intro-howto__placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(92px * var(--figma-stage-scale)) !important;
  margin-top: calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #99c3e2 !important;
}

.screen.intro-screen .intro-howto__placeholder img {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__points {
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__points-caption,
.screen.intro-screen .intro-howto__points-note,
.screen.intro-screen .intro-howto__table-footer {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.intro-screen .intro-howto__table {
  width: calc(256px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__table-head,
.screen.intro-screen .intro-howto__table-row {
  display: grid !important;
  grid-template-columns: calc(180px * var(--figma-stage-scale)) calc(76px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__table-head {
  background: #0068b7 !important;
}

.screen.intro-screen .intro-howto__table-head span {
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.intro-screen .intro-howto__table-head span + span {
  border-left: calc(0.5px * var(--figma-stage-scale)) solid #ffffff !important;
}

.screen.intro-screen .intro-howto__table-row {
  background: #ffffff !important;
  border-bottom: calc(0.5px * var(--figma-stage-scale)) solid #8c8c8c !important;
}

.screen.intro-screen .intro-howto__table-row:last-child {
  border-bottom: 0 !important;
}

.screen.intro-screen .intro-howto__table-row span,
.screen.intro-screen .intro-howto__table-row strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  color: #333333 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.intro-screen .intro-howto__table-row strong {
  flex-direction: column !important;
  gap: 0 !important;
  border-left: calc(0.5px * var(--figma-stage-scale)) solid #8c8c8c !important;
  font-weight: 500 !important;
}

.screen.intro-screen .intro-howto__table-row strong em,
.screen.intro-screen .intro-howto__table-row strong small {
  font-style: normal !important;
  font-weight: inherit !important;
}

.screen.intro-screen .intro-howto__table-row strong em {
  color: #0068b7 !important;
}

.screen.intro-screen .intro-howto__cautions {
  width: calc(256px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  color: #f0f0f0 !important;
}

.screen.intro-screen .intro-howto__cautions h3 {
  margin: 0 0 calc(8px * var(--figma-stage-scale)) !important;
  color: #f0f0f0 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__cautions ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.screen.intro-screen .intro-howto__cautions li {
  position: relative !important;
  margin: 0 0 calc(4px * var(--figma-stage-scale)) !important;
  padding-left: calc(10px * var(--figma-stage-scale)) !important;
  color: #f0f0f0 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__cautions li::before {
  content: "·" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

.screen.faq-screen {
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  background: #ffffff !important;
}

.screen.faq-screen .topbar,
.screen.faq-screen .topbar.is-dark {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

.screen.faq-screen .topbar__button,
.screen.faq-screen .topbar__slot {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.faq-screen .topbar__brand,
.screen.faq-screen .topbar__brand-lockup,
.screen.faq-screen .topbar__brand-image {
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.faq-screen__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-top: calc(var(--safe-top) + 83px) !important;
  padding-right: var(--figma-page-margin) !important;
  padding-bottom: 0 !important;
  padding-left: var(--figma-page-margin) !important;
}

.faq-screen__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.faq-screen__controls {
  position: sticky !important;
  top: calc(var(--safe-top) + 64px) !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  max-width: calc(343px * var(--figma-stage-scale)) !important;
  margin-top: calc(20px * var(--figma-stage-scale)) !important;
  padding-bottom: calc(10px * var(--figma-stage-scale)) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(calc(8px * var(--figma-stage-scale))) !important;
}

.faq-screen__search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(44px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid #b7b7b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

.faq-screen__search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.faq-screen__search-input::placeholder {
  color: #b7b7b7 !important;
  opacity: 1 !important;
}

.faq-screen__search-input:focus {
  outline: none !important;
}

.faq-screen__search-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(20px * var(--figma-stage-scale)) !important;
  width: calc(20px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.faq-screen__search-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.faq-screen__category-grid {
  display: grid !important;
  align-self: center !important;
  grid-template-columns: calc(114px * var(--figma-stage-scale)) calc(115px * var(--figma-stage-scale)) calc(114px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: calc(16px * var(--figma-stage-scale)) 0 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

.faq-screen__category {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(40px * var(--figma-stage-scale)) !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid #e3e3e3 !important;
  margin: 0 !important;
  margin-left: calc(-1px * var(--figma-stage-scale)) !important;
  margin-top: calc(-1px * var(--figma-stage-scale)) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #8c8c8c !important;
  text-align: center !important;
  position: relative !important;
  z-index: 0 !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

.faq-screen__category:nth-child(3n + 1) {
  margin-left: 0 !important;
}

.faq-screen__category:nth-child(-n + 3) {
  margin-top: 0 !important;
}

.faq-screen__category span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  color: inherit !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.faq-screen__category.is-active {
  border-color: #0068b7 !important;
  background: #0068b7 !important;
  color: #ffffff !important;
  z-index: 1 !important;
}

.faq-screen__list-wrap {
  margin-top: calc(4px * var(--figma-stage-scale)) !important;
  margin-right: 0 !important;
  margin-bottom: calc(32px * var(--figma-stage-scale)) !important;
  margin-left: 0 !important;
}

.faq-screen__list-top {
  width: 100% !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  background: #f0f0f0 !important;
}

.faq-screen__list {
  width: 100% !important;
}

.faq-item {
  width: 100% !important;
  background: #ffffff !important;
}

.faq-item__question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: calc(44px * var(--figma-stage-scale)) !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #f0f0f0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  text-align: left !important;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

.faq-item__question-copy,
.faq-item__answer-copy {
  display: flex !important;
  align-items: flex-start !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  min-width: 0 !important;
}

.faq-item__question-copy {
  flex: 1 1 auto !important;
  padding-right: calc(8px * var(--figma-stage-scale)) !important;
}

.faq-item__prefix {
  flex: 0 0 auto !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.faq-item__question-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.faq-item__chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(18px * var(--figma-stage-scale)) !important;
  width: calc(18px * var(--figma-stage-scale)) !important;
  height: calc(18px * var(--figma-stage-scale)) !important;
}

.faq-item__chevron img {
  width: calc(6.75px * var(--figma-stage-scale)) !important;
  height: calc(12px * var(--figma-stage-scale)) !important;
  transform: rotate(90deg) !important;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.faq-item.is-open .faq-item__question {
  background: #fafafa !important;
  border-bottom-color: rgba(240, 240, 240, 0) !important;
}

.faq-item.is-open .faq-item__chevron img {
  transform: rotate(-90deg) !important;
}

.faq-item__answer {
  width: 100% !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(26.5px * var(--figma-stage-scale)) !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #f0f0f0 !important;
  background: #f0f0f0 !important;
  box-sizing: border-box !important;
  transform-origin: top center !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition:
    max-height 240ms cubic-bezier(0.22, 1, 0.36, 1),
    padding-top 240ms cubic-bezier(0.22, 1, 0.36, 1),
    padding-bottom 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease !important;
}

.faq-item.is-open .faq-item__answer {
  max-height: calc(240px * var(--figma-stage-scale)) !important;
  padding-top: calc(12px * var(--figma-stage-scale)) !important;
  padding-bottom: calc(12px * var(--figma-stage-scale)) !important;
  opacity: 1 !important;
}

.faq-item__answer-copy {
  width: calc(322px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.faq-item__answer-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.faq-item__answer-text p {
  margin: 0 !important;
}

.faq-item__answer-text p + p {
  margin-top: calc(4px * var(--figma-stage-scale)) !important;
}

.faq-answer-link {
  color: #0068b7 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: calc(2px * var(--figma-stage-scale)) !important;
}

@keyframes faq-answer-enter {
  from {
    opacity: 0;
    transform: translateY(calc(-6px * var(--figma-stage-scale)));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-empty {
  padding: calc(20px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #f0f0f0 !important;
  background: #f0f0f0 !important;
  text-align: center !important;
}

.faq-empty__title,
.faq-empty__description {
  margin: 0 !important;
}

.faq-empty__title {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.faq-empty__description {
  margin-top: calc(4px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.inquiry-screen {
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  background: #ffffff !important;
}

.screen.inquiry-screen .topbar,
.screen.inquiry-screen .topbar.is-dark {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

.screen.inquiry-screen .topbar__button,
.screen.inquiry-screen .topbar__slot {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.inquiry-screen .topbar__brand,
.screen.inquiry-screen .topbar__brand-lockup,
.screen.inquiry-screen .topbar__brand-image {
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.inquiry-screen__body {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding-top: calc(var(--safe-top) + 92px) !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.inquiry-screen__title {
  width: calc(343px * var(--figma-stage-scale)) !important;
  max-width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.inquiry-screen__tabs {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  position: relative !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #b7b7b7 !important;
}

.inquiry-screen__panel {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

.inquiry-screen__tab {
  flex: 1 1 50% !important;
  position: relative !important;
  z-index: 1 !important;
  padding: calc(10px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: #ffffff !important;
  color: #b7b7b7 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  transition: color 180ms ease !important;
}

.inquiry-screen__tab.is-active {
  color: #2a2a2b !important;
}

.inquiry-screen__tab-indicator {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  width: 50% !important;
  height: calc(2px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  transform: translateX(0) !important;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform !important;
  pointer-events: none !important;
}

.inquiry-screen__tabs[data-active-tab="history"] .inquiry-screen__tab-indicator {
  transform: translateX(100%) !important;
}

.inquiry-screen__form {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  margin: calc(18px * var(--figma-stage-scale)) auto 0 !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.inquiry-field {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.inquiry-field__label {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.inquiry-field__label span {
  color: #ff0000 !important;
}

.inquiry-field__control {
  width: 100% !important;
  box-sizing: border-box !important;
  border: calc(1.5px * var(--figma-stage-scale)) solid #b7b7b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
}

.inquiry-field__control--select,
.inquiry-field__control--input {
  height: calc(44px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) !important;
}

.inquiry-field__control--select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #8c8c8c !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.inquiry-field__control--select.is-filled,
.inquiry-field__control--select.is-open,
.inquiry-field__control--input {
  color: #2a2a2b !important;
}

.inquiry-field__chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(18px * var(--figma-stage-scale)) !important;
  height: calc(18px * var(--figma-stage-scale)) !important;
}

.inquiry-field__chevron img {
  width: calc(6.75px * var(--figma-stage-scale)) !important;
  height: calc(12px * var(--figma-stage-scale)) !important;
  transform: rotate(90deg) !important;
  transition: transform 200ms ease !important;
}

.inquiry-field__control--select.is-open .inquiry-field__chevron img {
  transform: rotate(-90deg) !important;
}

.inquiry-field__control--input {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.inquiry-field__control--input::placeholder {
  color: #8c8c8c !important;
  opacity: 1 !important;
}

.inquiry-type-menu {
  position: absolute !important;
  top: calc(80px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  z-index: 7 !important;
  display: flex !important;
  flex-direction: column !important;
  width: calc(226px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #f7f7f7 !important;
  box-shadow: 0 0 calc(12px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  transform-origin: top center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(calc(-8px * var(--figma-stage-scale))) scaleY(0.84) !important;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0ms linear 220ms !important;
}

.inquiry-type-menu.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scaleY(1) !important;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0ms linear 0ms !important;
}

.inquiry-type-menu__option {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(24px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #e3e3e3 !important;
  background: #f7f7f7 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.inquiry-type-menu__option:first-child {
  color: #8c8c8c !important;
}

.inquiry-type-menu__option.is-disabled {
  cursor: default !important;
  background: #f7f7f7 !important;
}

.inquiry-type-menu__option.is-disabled:hover,
.inquiry-type-menu__option.is-disabled:active,
.inquiry-type-menu__option.is-disabled:focus,
.inquiry-type-menu__option.is-disabled:focus-visible {
  background: #f7f7f7 !important;
  color: #8c8c8c !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.inquiry-type-menu__option:last-child {
  border-bottom: 0 !important;
}

.inquiry-type-menu__check {
  position: absolute !important;
  top: 50% !important;
  left: calc(8px * var(--figma-stage-scale)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(20px * var(--figma-stage-scale)) !important;
  transform: translateY(-50%) !important;
  color: #2a2a2b !important;
}

.inquiry-type-menu__option > span:last-child {
  display: block !important;
  width: 100% !important;
  padding-left: calc(24px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.inquiry-field__textarea-wrap {
  position: relative !important;
  min-height: calc(200px * var(--figma-stage-scale)) !important;
  border: calc(1.5px * var(--figma-stage-scale)) solid #b7b7b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
}

.inquiry-field__guide,
.inquiry-field__textarea {
  width: 100% !important;
  min-height: calc(200px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.inquiry-field__guide {
  position: absolute !important;
  inset: 0 !important;
  padding: calc(16px * var(--figma-stage-scale)) calc(12px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
}

.inquiry-field__guide p {
  margin: 0 0 calc(8px * var(--figma-stage-scale)) !important;
}

.inquiry-field__textarea {
  position: relative !important;
  padding: calc(16px * var(--figma-stage-scale)) calc(12px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  background: transparent !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  resize: none !important;
}

.inquiry-field__textarea:focus,
.inquiry-field__control--input:focus {
  outline: none !important;
}

.inquiry-field__count {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0 calc(4px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.inquiry-field__count span {
  color: #2a2a2b !important;
}

.inquiry-upload {
  display: flex !important;
  align-items: flex-start !important;
  align-self: center !important;
  width: calc(333px * var(--figma-stage-scale)) !important;
  max-width: calc(333px * var(--figma-stage-scale)) !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.inquiry-upload__button,
.inquiry-upload__thumb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: transparent !important;
  overflow: hidden !important;
}

.inquiry-upload__button {
  flex: 0 0 auto !important;
}

.inquiry-upload__scroller {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: calc(90px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  overflow: visible !important;
}

.inquiry-upload__scroller::before,
.inquiry-upload__scroller::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  width: calc(18px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 160ms ease !important;
}

.inquiry-upload__scroller::before {
  left: 0 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0) 100%) !important;
}

.inquiry-upload__scroller::after {
  right: 0 !important;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0) 100%) !important;
}

.inquiry-upload__scroller.is-scrollable::before,
.inquiry-upload__scroller.is-scrollable::after {
  opacity: 1 !important;
}

.inquiry-upload__scroller.has-left-overflow::before {
  opacity: 1 !important;
}

.inquiry-upload__scroller.has-right-overflow::after {
  opacity: 1 !important;
}

.inquiry-upload__scrollport {
  position: relative !important;
  top: calc(-10px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  height: calc(90px * var(--figma-stage-scale)) !important;
  margin-top: 0 !important;
  padding-top: calc(10px * var(--figma-stage-scale)) !important;
  padding-right: calc(10px * var(--figma-stage-scale)) !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.inquiry-upload__scrollport::-webkit-scrollbar {
  display: none !important;
}

.inquiry-upload__track {
  display: inline-flex !important;
  min-width: 100% !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
}

.inquiry-upload__thumb {
  position: relative !important;
  flex: 0 0 auto !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  overflow: visible !important;
  cursor: default !important;
  isolation: isolate !important;
  background: transparent !important;
}

.inquiry-upload__thumb-frame {
  position: relative !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #f0f0f0 !important;
  overflow: hidden !important;
  clip-path: inset(0 round calc(8px * var(--figma-stage-scale))) !important;
}

.inquiry-upload__thumb-remove {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(20px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
  min-width: calc(20px * var(--figma-stage-scale)) !important;
  min-height: calc(20px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translate(50%, -50%) !important;
}

.inquiry-upload__thumb-remove img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.inquiry-upload__placeholder,
.inquiry-upload__preview {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.inquiry-upload__preview {
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

.inquiry-upload__thumb-frame > .inquiry-upload__preview {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

.inquiry-upload__placeholder {
  object-fit: cover !important;
}

.inquiry-upload__preview {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.inquiry-upload__button {
  --inquiry-upload-fill-opacity: 0.08 !important;
  --inquiry-upload-fill-scale: 0 !important;
  background-image: none !important;
}

.inquiry-upload__button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, var(--inquiry-upload-fill-opacity)) !important;
  transform: scaleX(var(--inquiry-upload-fill-scale)) !important;
  transform-origin: left center !important;
  transition:
    transform 180ms ease,
    opacity 220ms ease !important;
}

.inquiry-upload__button > * {
  position: relative !important;
  z-index: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .inquiry-upload__button:hover {
    --inquiry-upload-fill-scale: 1 !important;
  }
}

.inquiry-upload__button:active,
.inquiry-upload__button.is-pressing {
  --inquiry-upload-fill-opacity: 0.14 !important;
  --inquiry-upload-fill-scale: 1 !important;
}

.inquiry-screen__file-input {
  display: none !important;
}

.inquiry-screen__footer .cta {
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.inquiry-screen__footer-slot {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: calc(16px * var(--figma-stage-scale)) !important;
  padding: 0 0 calc(38px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.inquiry-screen .screen__footer.inquiry-screen__footer {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  z-index: 4 !important;
}

.inquiry-screen__history {
  width: 100% !important;
  margin: 0 auto 0 !important;
}

.inquiry-screen__history-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(610px * var(--figma-stage-scale)) !important;
  background: #f7f7f7 !important;
  color: #8c8c8c !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item {
  width: 100% !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #f0f0f0 !important;
  background: #ffffff !important;
}

.inquiry-history-item__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  background: #ffffff !important;
  text-align: left !important;
  transition: background-color 180ms ease !important;
}

.inquiry-history-item.is-open .inquiry-history-item__head {
  background: #f0f0f0 !important;
}

.inquiry-history-item__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__type {
  margin: 0 !important;
  color: #0068b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__date {
  margin: 0 !important;
  color: #b7b7b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__status {
  display: flex !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__status-text {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__status-text--received {
  color: #b7b7b7 !important;
}

.inquiry-history-item__status-text--answered {
  color: #0068b7 !important;
}

.inquiry-history-item__chevron {
  display: inline-flex !important;
  width: calc(20px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
  align-items: center !important;
  justify-content: center !important;
}

.inquiry-history-item__chevron img {
  width: calc(7.5px * var(--figma-stage-scale)) !important;
  height: calc(13.5px * var(--figma-stage-scale)) !important;
  transform: rotate(90deg) !important;
  transition: transform 220ms ease !important;
}

.inquiry-history-item.is-open .inquiry-history-item__chevron img {
  transform: rotate(-90deg) !important;
}

.inquiry-history-item__detail {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  transition:
    max-height 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    background-color 180ms ease !important;
}

.inquiry-history-item.is-open .inquiry-history-item__detail {
  max-height: calc(280px * var(--figma-stage-scale)) !important;
  opacity: 1 !important;
  background: #f0f0f0 !important;
}

.inquiry-history-item__qa {
  display: flex !important;
  align-items: flex-start !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  background: transparent !important;
}

.inquiry-history-item__qa--question {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  color: #8c8c8c !important;
  text-align: right !important;
}

.inquiry-history-item__qa--answer {
  justify-content: flex-start !important;
  color: #8c8c8c !important;
  text-align: left !important;
}

.inquiry-history-item__qa-prefix {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__qa-copy {
  width: calc(263px * var(--figma-stage-scale)) !important;
  max-width: calc(263px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(263px * var(--figma-stage-scale)) !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__qa-copy--question {
  text-align: right !important;
}

.inquiry-history-item__qa-copy--answer {
  text-align: left !important;
}

.inquiry-history-item__qa-copy p {
  margin: 0 0 calc(4px * var(--figma-stage-scale)) !important;
}

.inquiry-history-item__qa-copy p:last-child {
  margin-bottom: 0 !important;
}

.screen.family-consent-screen {
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  background: #ffffff !important;
}

.screen.prize-consent-screen {
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  background: #ffffff !important;
}

.screen.family-consent-screen .topbar,
.screen.family-consent-screen .topbar.is-dark,
.screen.prize-consent-screen .topbar,
.screen.prize-consent-screen .topbar.is-dark {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

.family-consent-screen__body {
  width: calc(343px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: calc(var(--safe-top) + 96px) 0 calc(176px * var(--figma-stage-scale)) !important;
}

.family-consent-screen__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.family-consent-screen__hero,
.family-consent-card {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: calc(18px * var(--figma-stage-scale)) !important;
}

.family-consent-screen__hero {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(10px * var(--figma-stage-scale)) !important;
  margin-top: calc(20px * var(--figma-stage-scale)) !important;
  padding: calc(20px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, #f7f8fa 0%, #eff3f8 100%) !important;
}

.family-consent-screen__eyebrow {
  margin: 0 !important;
  color: #0068b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
}

.family-consent-screen__lead {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(15px * var(--figma-stage-scale)) !important;
  line-height: calc(22px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.3px * var(--figma-stage-scale)) !important;
}

.family-consent-screen__download {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(38px * var(--figma-stage-scale)) !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  border-radius: calc(999px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  color: #ffffff !important;
  font-size: calc(13px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.family-consent-card {
  margin-top: calc(14px * var(--figma-stage-scale)) !important;
  padding: calc(18px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  border: calc(1px * var(--figma-stage-scale)) solid #eceef2 !important;
}

.family-consent-card--blocked {
  background: #f8fbff !important;
  border-color: rgba(0, 104, 183, 0.18) !important;
}

.family-consent-card__actions {
  margin-top: calc(16px * var(--figma-stage-scale)) !important;
}

.family-consent-card__actions .cta {
  width: 100% !important;
}

.family-consent-card--submitted {
  background: #f8fbff !important;
  border-color: rgba(0, 104, 183, 0.18) !important;
}

.family-consent-card__header,
.family-consent-card__status {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
}

.family-consent-card__header h2,
.family-consent-card__status strong {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
}

.family-consent-card__header p,
.family-consent-card__status span,
.family-consent-card__notice {
  margin: 0 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  line-height: calc(17px * var(--figma-stage-scale)) !important;
}

.family-consent-card__summary {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: calc(10px * var(--figma-stage-scale)) !important;
  margin: calc(14px * var(--figma-stage-scale)) 0 0 !important;
}

.family-consent-card__summary div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(14px * var(--figma-stage-scale)) !important;
}

.family-consent-card__summary dt,
.family-consent-card__summary dd {
  margin: 0 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
}

.family-consent-card__summary dt {
  color: #8c8c8c !important;
}

.family-consent-card__summary dd {
  color: #2a2a2b !important;
  font-weight: 500 !important;
  text-align: right !important;
}

.family-consent-card__list {
  margin: calc(14px * var(--figma-stage-scale)) 0 0 !important;
  padding-left: calc(18px * var(--figma-stage-scale)) !important;
  color: #2a2a2b !important;
}

.family-consent-card__list li {
  margin: 0 0 calc(8px * var(--figma-stage-scale)) !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
}

.family-consent-card__term-body {
  margin-top: calc(14px * var(--figma-stage-scale)) !important;
}

.family-consent-card__term-body p {
  margin: 0 0 calc(10px * var(--figma-stage-scale)) !important;
  color: #4d4d4d !important;
  font-size: calc(13px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
}

.family-consent-form {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  margin-top: calc(14px * var(--figma-stage-scale)) !important;
}

.family-consent-field {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
}

.family-consent-field__label {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
}

.family-consent-field__label span {
  color: #ff0000 !important;
}

.family-consent-field__control {
  width: 100% !important;
  height: calc(44px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(12px * var(--figma-stage-scale)) !important;
  border: calc(1.5px * var(--figma-stage-scale)) solid #b7b7b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
}

.family-consent-field__control::placeholder {
  color: #8c8c8c !important;
  opacity: 1 !important;
}

.family-consent-signature {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: calc(10px * var(--figma-stage-scale)) !important;
}

.family-consent-signature__button,
.family-consent-signature__remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(44px * var(--figma-stage-scale)) !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: calc(10px * var(--figma-stage-scale)) !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
}

.family-consent-signature__button {
  background: #2a2a2b !important;
  color: #ffffff !important;
}

.family-consent-signature__remove {
  background: #f3f4f6 !important;
  color: #2a2a2b !important;
}

.family-consent-signature__preview {
  display: block !important;
  width: 100% !important;
  max-width: calc(180px * var(--figma-stage-scale)) !important;
  height: calc(90px * var(--figma-stage-scale)) !important;
  border-radius: calc(12px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
  background: #f7f7f7 !important;
}

.family-consent-screen__file-input {
  display: none !important;
}

.screen.family-consent-screen .screen__footer.family-consent-screen__footer {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(58px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  background: transparent !important;
}

.family-consent-screen__footer .cta {
  width: 100% !important;
  margin: 0 auto !important;
}

.modal-card--family-consent-success {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 45 !important;
  width: calc(270px * var(--figma-stage-scale)) !important;
  transform: translate(-50%, -50%) !important;
}

.modal-card--family-consent-success .modal-card__title,
.modal-card--family-consent-success .modal-card__caption {
  text-align: center !important;
}

.prize-consent-screen__body {
  width: calc(343px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: calc(var(--safe-top) + 96px) 0 calc(72px * var(--figma-stage-scale)) !important;
}

.prize-consent-screen__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.prize-consent-hero,
.prize-consent-card {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: calc(18px * var(--figma-stage-scale)) !important;
}

.prize-consent-hero {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(10px * var(--figma-stage-scale)) !important;
  margin-top: calc(20px * var(--figma-stage-scale)) !important;
  padding: calc(20px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%) !important;
}

.prize-consent-hero__eyebrow,
.prize-consent-hero__lead,
.prize-consent-card__header h2,
.prize-consent-card__header p,
.prize-consent-card__body p,
.prize-consent-field__label {
  margin: 0 !important;
}

.prize-consent-hero__eyebrow {
  color: #0068b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
}

.prize-consent-hero__lead {
  color: #2a2a2b !important;
  font-size: calc(15px * var(--figma-stage-scale)) !important;
  line-height: calc(22px * var(--figma-stage-scale)) !important;
}

.prize-consent-card {
  margin-top: calc(14px * var(--figma-stage-scale)) !important;
  padding: calc(18px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  border: calc(1px * var(--figma-stage-scale)) solid #eceef2 !important;
}

.prize-consent-card__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
}

.prize-consent-card__header h2 {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
}

.prize-consent-card__header p {
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  line-height: calc(17px * var(--figma-stage-scale)) !important;
  text-align: right !important;
}

.prize-consent-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(10px * var(--figma-stage-scale)) !important;
  margin-top: calc(14px * var(--figma-stage-scale)) !important;
}

.prize-consent-card__body p {
  color: #4d4d4d !important;
  font-size: calc(13px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
}

.prize-consent-form {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(14px * var(--figma-stage-scale)) !important;
  margin-top: calc(14px * var(--figma-stage-scale)) !important;
}

.prize-consent-field {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
}

.prize-consent-field__label {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
}

.prize-consent-field__control {
  width: 100% !important;
  height: calc(44px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(12px * var(--figma-stage-scale)) !important;
  border: calc(1.5px * var(--figma-stage-scale)) solid #b7b7b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
}

.prize-consent-field__control::placeholder {
  color: #8c8c8c !important;
  opacity: 1 !important;
}

.prize-consent-signature {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(112px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  border: calc(1.5px * var(--figma-stage-scale)) dashed #b7b7b7 !important;
  border-radius: calc(10px * var(--figma-stage-scale)) !important;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(0, 104, 183, .32) 50%, transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(0, 104, 183, .32) 50%, transparent calc(50% + .5px)),
    #ffffff !important;
  overflow: hidden !important;
}

.prize-consent-signature__placeholder {
  color: #8c8c8c !important;
  font-size: calc(13px * var(--figma-stage-scale)) !important;
  line-height: calc(18px * var(--figma-stage-scale)) !important;
}

.prize-consent-signature__image {
  display: block !important;
  max-width: 82% !important;
  max-height: 72% !important;
  object-fit: contain !important;
}

.prize-consent-screen__actions {
  width: 100% !important;
  margin-top: calc(18px * var(--figma-stage-scale)) !important;
  padding-bottom: calc(20px * var(--figma-stage-scale)) !important;
}

.prize-consent-screen__actions .cta {
  width: 100% !important;
}

.prize-signature-modal {
  position: absolute !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(16px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.prize-consent-screen .prize-signature-modal__backdrop {
  z-index: 0 !important;
  pointer-events: auto !important;
}

.prize-signature-modal__card {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: calc(18px * var(--figma-stage-scale)) !important;
  border-radius: calc(18px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 calc(24px * var(--figma-stage-scale)) calc(60px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.28) !important;
}

.prize-signature-modal__close {
  position: absolute !important;
  top: calc(12px * var(--figma-stage-scale)) !important;
  right: calc(12px * var(--figma-stage-scale)) !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(42, 42, 43, 0.08) !important;
  color: #2a2a2b !important;
  font-size: calc(22px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.prize-signature-modal__head {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
}

.prize-signature-modal__head h2,
.prize-signature-modal__head p {
  margin: 0 !important;
  text-align: center !important;
}

.prize-signature-modal__head h2 {
  color: #2a2a2b !important;
  font-size: calc(18px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(24px * var(--figma-stage-scale)) !important;
}

.prize-signature-modal__head p {
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  line-height: calc(17px * var(--figma-stage-scale)) !important;
}

.prize-signature-pad {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin-top: calc(16px * var(--figma-stage-scale)) !important;
  border: calc(1.5px * var(--figma-stage-scale)) dashed #b7b7b7 !important;
  border-radius: calc(10px * var(--figma-stage-scale)) !important;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(0, 104, 183, .35) 50%, transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(0, 104, 183, .35) 50%, transparent calc(50% + .5px)),
    #ffffff !important;
  overflow: hidden !important;
}

.prize-signature-pad__canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
  cursor: crosshair !important;
}

.prize-signature-modal__actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  margin-top: calc(14px * var(--figma-stage-scale)) !important;
}

.prize-signature-modal__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: calc(12px * var(--figma-stage-scale)) !important;
  font-size: calc(15px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease !important;
}

.prize-signature-modal__button:disabled {
  opacity: .42 !important;
}

.prize-signature-modal__button--clear {
  background: #f0f0f0 !important;
  color: #2a2a2b !important;
}

.prize-signature-modal__button--submit {
  background: #0068b7 !important;
  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  .prize-signature-modal__button:not(:disabled):hover {
    filter: brightness(.97) !important;
    transform: translateY(calc(-1px * var(--figma-stage-scale))) !important;
  }
}

.prize-signature-modal__button:not(:disabled):active {
  filter: brightness(.94) !important;
  transform: translateY(calc(1px * var(--figma-stage-scale))) !important;
}

@media (max-height: 760px) {
  .screen.lineup-screen {
    --lineup-entry-field-height: calc(337px * var(--figma-stage-scale));
    --lineup-card-strip-height: calc(106px * var(--figma-stage-scale));
    --lineup-action-height: calc(62px * var(--figma-stage-scale));
  }

  .screen.predict-screen .predict-action {
    top: auto !important;
    bottom: calc(10px * var(--figma-stage-scale)) !important;
    height: calc(74px * var(--figma-stage-scale)) !important;
  }

  .screen.predict-screen .predict-action::before {
    top: calc(-48px * var(--figma-stage-scale)) !important;
    height: calc(162px * var(--figma-stage-scale)) !important;
  }

  .screen.predict-screen .predict-action .cta {
    height: calc(48px * var(--figma-stage-scale)) !important;
    min-height: calc(48px * var(--figma-stage-scale)) !important;
  }

  .screen.predict-screen .predict-action .predict-footer-note {
    top: calc(58px * var(--figma-stage-scale)) !important;
  }

  .screen.lineup-screen .lineup-field {
    top: calc(240px * var(--figma-stage-scale)) !important;
    height: calc(320px * var(--figma-stage-scale)) !important;
  }

  .screen.lineup-screen.lineup-screen--entry .lineup-field,
  .screen.lineup-screen.lineup-screen--drag .lineup-field,
  .screen.lineup-screen.lineup-screen--confirm .lineup-field,
  .screen.lineup-screen.lineup-screen--success .lineup-field {
    top: var(--lineup-entry-field-top) !important;
  }

  .screen.lineup-screen .lineup-card-strip {
    top: var(--lineup-card-strip-top) !important;
    bottom: auto !important;
    height: var(--lineup-card-strip-outer-height) !important;
    min-height: var(--lineup-card-strip-outer-height) !important;
    padding: calc(18px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  }

  .screen.lineup-screen .lineup-action {
    top: auto !important;
    bottom: 0 !important;
    height: var(--lineup-action-height) !important;
  }

  .screen.community-me .page-title {
    top: calc(96px * var(--figma-stage-scale)) !important;
  }

  .screen.community-me .community-me__field--title {
    top: calc(151px * var(--figma-stage-scale)) !important;
  }

  .screen.community-me .community-me__editor {
    top: calc(232px * var(--figma-stage-scale)) !important;
  }

  .screen.community-me .community-me__editor-box {
    min-height: calc(220px * var(--figma-stage-scale)) !important;
  }

  .screen.community-me .community-me__textarea {
    min-height: calc(204px * var(--figma-stage-scale)) !important;
  }

  .screen.community-me .community-me__upload {
    top: calc(540px * var(--figma-stage-scale)) !important;
  }

  .screen.community-me .screen__footer {
    bottom: calc(56px * var(--figma-stage-scale)) !important;
  }

  .inquiry-screen__body {
    padding-top: calc(var(--safe-top) + 84px) !important;
    padding-bottom: 0 !important;
  }

  .family-consent-screen__body {
    padding-top: calc(var(--safe-top) + 84px) !important;
    padding-bottom: calc(156px * var(--figma-stage-scale)) !important;
  }

  .screen.family-consent-screen .screen__footer.family-consent-screen__footer {
    bottom: calc(44px * var(--figma-stage-scale)) !important;
  }
}

.community-screen--feed .community-screen__body,
.community-screen--detail .community-screen__body {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Drawer + close button repair */
.app-drawer__panel--menu,
.app-drawer__panel--mypage {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  justify-items: center !important;
  align-content: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
}

.app-drawer__panel--menu .drawer-hero,
.app-drawer__panel--mypage .drawer-hero,
.app-drawer__panel--menu .app-drawer__body,
.app-drawer__panel--mypage .app-drawer__body,
.app-drawer__panel--menu .app-drawer__footer,
.app-drawer__panel--mypage .app-drawer__footer {
  width: calc(343px * var(--figma-stage-scale)) !important;
  max-width: calc(343px * var(--figma-stage-scale)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.app-drawer__panel--menu .drawer-profile,
.app-drawer__panel--mypage .drawer-profile {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}

.topbar__button--close,
.drawer-close,
.community-card__close {
  --close-icon-size: var(--figma-topbar-icon-size, calc(24px * var(--figma-stage-scale, 1)));
  --close-mark-size: calc(24px * var(--figma-stage-scale, 1));
  --close-mark-stroke: 2px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--close-icon-size) !important;
  height: var(--close-icon-size) !important;
  min-width: var(--close-icon-size) !important;
  min-height: var(--close-icon-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6 18M6 6L18 18' stroke='%232A2A2B' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") center / var(--close-mark-size) var(--close-mark-size) no-repeat !important;
  box-shadow: none !important;
  color: inherit !important;
  overflow: visible !important;
}

.drawer-close {
  position: relative !important;
  justify-self: end !important;
  align-self: start !important;
  margin-top: calc(var(--safe-top) + 34px) !important;
  margin-right: calc(((100% - (343px * var(--figma-stage-scale, 1))) / 2) + 16px) !important;
  margin-bottom: calc(-1 * var(--close-icon-size)) !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: 3 !important;
  color: var(--ink) !important;
}

.drawer-close {
  background: none !important;
}

.drawer-close__glyph {
  display: none !important;
}

.drawer-close__icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition:
    filter 160ms ease,
    transform 160ms ease,
    opacity 160ms ease !important;
}

.register-screen__close-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition:
    filter 160ms ease,
    transform 160ms ease,
    opacity 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .register-screen__close-button:hover .register-screen__close-icon {
    filter: brightness(0.92) !important;
    transform: scale(0.98) !important;
  }
}

.register-screen__close-button:active .register-screen__close-icon,
.register-screen__close-button.is-pressing .register-screen__close-icon {
  filter: brightness(0.86) !important;
  transform: scale(0.96) !important;
}

.community-card__close {
  color: var(--ink) !important;
}

.topbar__button--close .topbar__icon,
.drawer-close .topbar__icon,
.community-card__close .topbar__icon,
.community-card__close img {
  display: none !important;
}

.topbar__button--close::before,
.topbar__button--close::after,
.drawer-close::before,
.drawer-close::after,
.community-card__close::before,
.community-card__close::after {
  content: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .topbar__button--close:hover,
  .community-card__close:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: brightness(0.92) !important;
  }

  .drawer-close:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    background-image: none !important;
  }

  .drawer-close:hover .drawer-close__icon {
    filter: brightness(0.92) !important;
    transform: scale(0.98) !important;
  }
}

.topbar__button--close:active,
.community-card__close:active,
.topbar__button--close.is-pressing,
.community-card__close.is-pressing {
  transform: none !important;
  box-shadow: none !important;
  filter: brightness(0.88) !important;
}

.drawer-close:active,
.drawer-close.is-pressing {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  background-image: none !important;
}

.drawer-close:active .drawer-close__icon,
.drawer-close.is-pressing .drawer-close__icon {
  filter: brightness(0.86) !important;
  transform: scale(0.96) !important;
}

:is(
  button,
  [data-action],
  [role="button"],
  .cta,
  .topbar__button,
  .modal-card__button,
  .modal-card__single,
  .app-drawer__nav-link,
  .desktop-sitemap__link,
  .desktop-sitemap__popup-link,
  .menu-submenu__link,
  .screen .home-flow-nav__button,
  .home-flow-nav__button,
  .menu-row,
  .team-tab,
  .predict-option,
  .lineup-slot,
  .lineup-card-option,
  .drawer-link,
  .rank-link,
  .panel-button,
  .play-screen__button,
  .search-button,
  .community-tile__button,
  .community-tile__like,
  .community-like-button,
  .community-action-sheet__option,
  .community-action-sheet__cancel,
  .community-confirm-modal__button,
  .inquiry-screen__tab,
  .faq-screen__tab,
  .member-address-row__search,
  .family-consent-screen__download,
  .intro-screen__promo-store-button
) {
  --interactive-fill-opacity: 0.08;
  --interactive-fill-size: 0%;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, var(--interactive-fill-opacity)),
      rgba(0, 0, 0, var(--interactive-fill-opacity))
    ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: var(--interactive-fill-size) 100% !important;
  transition:
    background-size 180ms ease,
    background-color 160ms ease,
    filter 120ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    opacity 220ms ease,
    color 220ms ease,
    border-color 220ms ease !important;
  will-change: background-size, opacity, color, border-color !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(
    button,
    [data-action],
    [role="button"],
    .cta,
    .topbar__button,
    .modal-card__button,
    .modal-card__single,
    .app-drawer__nav-link,
    .desktop-sitemap__link,
    .desktop-sitemap__popup-link,
    .menu-submenu__link,
    .screen .home-flow-nav__button,
    .home-flow-nav__button,
    .menu-row,
    .team-tab,
    .predict-option,
    .lineup-slot,
    .lineup-card-option,
    .drawer-link,
    .rank-link,
    .panel-button,
    .play-screen__button,
    .search-button,
    .community-tile__button,
    .community-tile__like,
    .community-like-button,
    .community-action-sheet__option,
    .community-action-sheet__cancel,
    .community-confirm-modal__button,
    .inquiry-screen__tab,
    .faq-screen__tab,
    .member-address-row__search,
  .family-consent-screen__download,
  .intro-screen__promo-store-button
  ):hover {
    --interactive-fill-size: 100% !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .screen.lineup-screen .lineup-slot:hover {
    filter: none !important;
    box-shadow: none !important;
  }

  .screen.lineup-screen .lineup-slot:hover .lineup-slot__card-image {
    filter: none !important;
  }

  .screen.lineup-screen .lineup-slot:not(.is-assigned):hover {
    filter: none !important;
  }

  .screen.lineup-screen .lineup-slot--cf:hover,
  .screen.lineup-screen .lineup-slot--p:hover,
  .screen.lineup-screen .lineup-slot--c:hover {
    transform: translateX(-50%) !important;
  }

  .screen.lineup-screen .lineup-slot--lf:hover,
  .screen.lineup-screen .lineup-slot--rf:hover,
  .screen.lineup-screen .lineup-slot--ss:hover,
  .screen.lineup-screen .lineup-slot--2b:hover,
  .screen.lineup-screen .lineup-slot--3b:hover,
  .screen.lineup-screen .lineup-slot--1b:hover,
  .screen.lineup-screen .lineup-slot--dh:hover {
    transform: none !important;
  }
}

:is(
  button,
  [data-action],
  [role="button"],
  .cta,
  .topbar__button,
  .modal-card__button,
  .modal-card__single,
  .app-drawer__nav-link,
  .desktop-sitemap__link,
  .desktop-sitemap__popup-link,
  .menu-submenu__link,
  .screen .home-flow-nav__button,
  .home-flow-nav__button,
  .menu-row,
  .team-tab,
  .predict-option,
  .lineup-slot,
  .lineup-card-option,
  .drawer-link,
  .rank-link,
  .panel-button,
  .play-screen__button,
  .search-button,
  .community-tile__button,
  .community-tile__like,
  .community-like-button,
  .community-action-sheet__option,
  .community-action-sheet__cancel,
  .community-confirm-modal__button,
  .inquiry-screen__tab,
  .faq-screen__tab,
  .member-address-row__search,
  .family-consent-screen__download,
  .intro-screen__promo-store-button
):active,
  :is(
  button,
  [data-action],
  [role="button"],
  .cta,
  .topbar__button,
  .modal-card__button,
  .modal-card__single,
  .app-drawer__nav-link,
  .desktop-sitemap__link,
  .desktop-sitemap__popup-link,
  .menu-submenu__link,
  .screen .home-flow-nav__button,
  .home-flow-nav__button,
  .menu-row,
  .team-tab,
  .predict-option,
  .lineup-slot,
  .lineup-card-option,
  .drawer-link,
  .rank-link,
  .panel-button,
  .play-screen__button,
  .search-button,
  .community-tile__button,
  .community-tile__like,
  .community-like-button,
  .community-action-sheet__option,
  .community-action-sheet__cancel,
  .community-confirm-modal__button,
  .inquiry-screen__tab,
  .faq-screen__tab,
  .member-address-row__search,
  .family-consent-screen__download,
  .intro-screen__promo-store-button
).is-pressing {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.inquiry-upload .inquiry-upload__thumb-remove[data-action="remove-inquiry-image"] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  z-index: 2 !important;
  transform: translate(50%, -50%) !important;
}

.screen.lineup-screen .lineup-slot:active,
.screen.lineup-screen .lineup-slot.is-pressing {
  filter: none !important;
  box-shadow: none !important;
}

.screen.lineup-screen .lineup-slot:active .lineup-slot__card-image,
.screen.lineup-screen .lineup-slot.is-pressing .lineup-slot__card-image {
  filter: none !important;
}

.screen.lineup-screen .lineup-slot:not(.is-assigned):active,
.screen.lineup-screen .lineup-slot:not(.is-assigned).is-pressing {
  filter: none !important;
}

.drawer-menu .menu-submenu__link {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  background-image: none !important;
  background-size: 0 0 !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
}

.drawer-menu .menu-disclosure__panel {
  gap: calc(4px * var(--figma-stage-scale)) !important;
  row-gap: calc(4px * var(--figma-stage-scale)) !important;
}

.topbar__brand,
.agreements-topbar__brand,
.ranking-history__brand {
  --interactive-fill-opacity: 0.08;
  --interactive-fill-size: 0%;
  overflow: hidden !important;
  isolation: isolate !important;
  background: transparent !important;
  filter: none !important;
  box-shadow: none !important;
  transition:
    filter 120ms ease,
    box-shadow 160ms ease,
    opacity 220ms ease !important;
  will-change: opacity !important;
  -webkit-tap-highlight-color: transparent !important;
}

.topbar__brand::after,
.agreements-topbar__brand::after,
.ranking-history__brand::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  width: var(--interactive-fill-size) !important;
  height: 100% !important;
  background: rgba(0, 0, 0, var(--interactive-fill-opacity)) !important;
  pointer-events: none !important;
  transition: width 180ms ease !important;
}

.topbar__brand > *,
.agreements-topbar__brand > *,
.ranking-history__brand > * {
  position: relative !important;
  z-index: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
  .topbar__brand:hover,
  .agreements-topbar__brand:hover,
  .ranking-history__brand:hover {
    --interactive-fill-size: 100% !important;
    filter: none !important;
    box-shadow: none !important;
  }
}

.topbar__brand:active,
.topbar__brand.is-pressing,
.agreements-topbar__brand:active,
.agreements-topbar__brand.is-pressing,
.ranking-history__brand:active,
.ranking-history__brand.is-pressing {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
  filter: none !important;
  box-shadow: none !important;
}

.register-screen__close-button {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  position: absolute !important;
  top: calc(var(--safe-top) + 32px) !important;
  right: calc(16px * var(--figma-stage-scale)) !important;
  left: auto !important;
  bottom: auto !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  background-size: 0 0 !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  overflow: visible !important;
  isolation: auto !important;
  z-index: 20 !important;
}

.drawer-menu .menu-row,
.drawer-menu .menu-row.is-active,
.drawer-menu .menu-row:focus-visible,
.drawer-menu .menu-row:active,
.drawer-menu .menu-row.is-pressing,
.drawer-menu .menu-row--drawer-link,
.drawer-menu .menu-row--drawer-link.is-active,
.drawer-menu .menu-row--drawer-link:focus-visible,
.drawer-menu .menu-row--drawer-link:active,
.drawer-menu .menu-row--drawer-link.is-pressing {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  box-shadow: none !important;
  will-change: auto !important;
}

@media (hover: hover) and (pointer: fine) {
  .drawer-menu .menu-row:hover,
  .drawer-menu .menu-row--drawer-link:hover {
    --interactive-fill-opacity: 0 !important;
    --interactive-fill-size: 0% !important;
    box-shadow: none !important;
  }
}

.drawer-menu > .menu-disclosure--link:last-child > .menu-row,
.drawer-menu > .menu-disclosure--link:last-child > .menu-row.is-active,
.drawer-menu > .menu-disclosure--link:last-child > .menu-row:focus-visible,
.drawer-menu > .menu-disclosure--link:last-child > .menu-row:active,
.drawer-menu > .menu-disclosure--link:last-child > .menu-row.is-pressing {
  box-shadow: none !important;
}

.drawer-menu > .menu-disclosure--link:last-child > .menu-row::after {
  content: none !important;
}

.drawer-menu .menu-row,
.drawer-menu .menu-row.is-active,
.drawer-menu .menu-row:focus-visible,
.drawer-menu .menu-row:active,
.drawer-menu .menu-row.is-pressing,
.drawer-menu .menu-row--drawer-link,
.drawer-menu .menu-row--drawer-link.is-active,
.drawer-menu .menu-row--drawer-link:focus-visible,
.drawer-menu .menu-row--drawer-link:active,
.drawer-menu .menu-row--drawer-link.is-pressing {
  --drawer-menu-fill-opacity: 0 !important;
  overflow: visible !important;
  isolation: auto !important;
  background-clip: padding-box !important;
  background-color: rgba(0, 104, 183, var(--drawer-menu-fill-opacity)) !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}

.drawer-menu > .menu-disclosure.is-open > .menu-row,
.drawer-menu > .menu-disclosure.is-open > .menu-row.is-active,
.drawer-menu > .menu-disclosure:last-child.is-open > .menu-row,
.drawer-menu > .menu-disclosure:last-child.is-open > .menu-row.is-active,
.drawer-menu > .menu-disclosure:last-child.is-open > .menu-row:focus-visible,
.drawer-menu > .menu-disclosure:last-child.is-open > .menu-row:active,
.drawer-menu > .menu-disclosure:last-child.is-open > .menu-row.is-pressing {
  box-shadow: none !important;
}

.drawer-menu > .menu-disclosure.is-open > .menu-row,
.drawer-menu .menu-row.is-active,
.drawer-menu .menu-row--drawer-link.is-active,
.drawer-menu .menu-row:focus-visible,
.drawer-menu .menu-row--drawer-link:focus-visible,
.drawer-menu .menu-row:active,
.drawer-menu .menu-row.is-pressing,
.drawer-menu .menu-row--drawer-link:active,
.drawer-menu .menu-row--drawer-link.is-pressing {
  --drawer-menu-fill-opacity: 0.12 !important;
}

@media (hover: hover) and (pointer: fine) {
  .drawer-menu .menu-row:hover,
  .drawer-menu .menu-row--drawer-link:hover {
    --drawer-menu-fill-opacity: 0.12 !important;
    background-color: rgba(0, 104, 183, 0.12) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
  }
}

.drawer-menu.drawer-menu--mypage > .menu-disclosure--link:last-child > .menu-row::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(1px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .drawer-menu > .menu-disclosure--link:last-child > .menu-row:hover {
    box-shadow: none !important;
  }
}

.screen.lineup-screen .lineup-slot--cf:active,
.screen.lineup-screen .lineup-slot--cf.is-pressing,
.screen.lineup-screen .lineup-slot--p:active,
.screen.lineup-screen .lineup-slot--p.is-pressing,
.screen.lineup-screen .lineup-slot--c:active,
.screen.lineup-screen .lineup-slot--c.is-pressing {
  transform: translateX(-50%) !important;
}

.screen.lineup-screen .lineup-slot--lf:active,
.screen.lineup-screen .lineup-slot--lf.is-pressing,
.screen.lineup-screen .lineup-slot--rf:active,
.screen.lineup-screen .lineup-slot--rf.is-pressing,
.screen.lineup-screen .lineup-slot--ss:active,
.screen.lineup-screen .lineup-slot--ss.is-pressing,
.screen.lineup-screen .lineup-slot--2b:active,
.screen.lineup-screen .lineup-slot--2b.is-pressing,
.screen.lineup-screen .lineup-slot--3b:active,
.screen.lineup-screen .lineup-slot--3b.is-pressing,
.screen.lineup-screen .lineup-slot--1b:active,
.screen.lineup-screen .lineup-slot--1b.is-pressing,
.screen.lineup-screen .lineup-slot--dh:active,
.screen.lineup-screen .lineup-slot--dh.is-pressing {
  transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible:hover {
    z-index: 10 !important;
    filter: brightness(1.22) saturate(1.18) !important;
    box-shadow:
      var(--lineup-slot-hint-strong-ring),
      0 calc(6px * var(--figma-stage-scale)) calc(14px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.18) !important;
  }

  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible:hover .lineup-slot__card-image {
    filter: brightness(1.08) saturate(1.08) !important;
  }

  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible:not(.lineup-slot--cf):not(.lineup-slot--p):not(.lineup-slot--c):hover {
    transform: translateY(calc(-5px * var(--figma-stage-scale))) scale(1.04) !important;
  }

  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--cf:hover,
  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--p:hover,
  .screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--c:hover {
    transform: translateX(-50%) translateY(calc(-5px * var(--figma-stage-scale))) scale(1.04) !important;
  }
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible:active,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.is-pressing {
  z-index: 10 !important;
  filter: brightness(1.18) saturate(1.14) !important;
  box-shadow:
    var(--lineup-slot-hint-press-ring),
    0 calc(4px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.18) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible:active .lineup-slot__card-image,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.is-pressing .lineup-slot__card-image {
  filter: brightness(1.06) saturate(1.06) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-pick-previewing .lineup-slot__card-image--pick-preview {
  opacity: 0.8 !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-pick-previewing:active .lineup-slot__card-image--pick-preview,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-pick-previewing.is-pressing .lineup-slot__card-image--pick-preview {
  opacity: 1 !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible:not(.lineup-slot--cf):not(.lineup-slot--p):not(.lineup-slot--c):active,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible:not(.lineup-slot--cf):not(.lineup-slot--p):not(.lineup-slot--c).is-pressing {
  transform: translateY(calc(-3px * var(--figma-stage-scale))) scale(1.02) !important;
}

.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--cf:active,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--cf.is-pressing,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--p:active,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--p.is-pressing,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--c:active,
.screen.lineup-screen.lineup-screen--has-placement-hint .lineup-slot.is-placement-compatible.lineup-slot--c.is-pressing {
  transform: translateX(-50%) translateY(calc(-3px * var(--figma-stage-scale))) scale(1.02) !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.lineup-screen .lineup-card-option:not(:disabled):not(.is-dragging):hover {
    z-index: 10 !important;
    transform: translateY(calc(-6px * var(--figma-stage-scale))) scale(1.045) !important;
  }

  .screen.lineup-screen .lineup-card-option:not(:disabled):not(.is-dragging):hover img {
    filter: brightness(1.08) saturate(1.08) !important;
    box-shadow:
      0 0 0 calc(2px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.94),
      0 calc(6px * var(--figma-stage-scale)) calc(14px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.2) !important;
  }

  .screen.lineup-screen .lineup-slot.is-assigned:not(:disabled):hover {
    z-index: 10 !important;
    filter: brightness(1.08) saturate(1.06) !important;
    box-shadow:
      0 0 0 calc(2px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.94),
      0 0 calc(18px * var(--figma-stage-scale)) rgba(0, 104, 183, 0.42),
      0 calc(6px * var(--figma-stage-scale)) calc(14px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.18) !important;
  }

  .screen.lineup-screen .lineup-slot.is-assigned:not(:disabled):hover .lineup-slot__card-image {
    filter: brightness(1.07) saturate(1.07) !important;
    box-shadow: 0 calc(4px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.18) !important;
  }

  .screen.lineup-screen .lineup-slot.is-assigned:not(.lineup-slot--cf):not(.lineup-slot--p):not(.lineup-slot--c):not(:disabled):hover {
    transform: translateY(calc(-4px * var(--figma-stage-scale))) scale(1.035) !important;
  }

  .screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--cf:not(:disabled):hover,
  .screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--p:not(:disabled):hover,
  .screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--c:not(:disabled):hover {
    transform: translateX(-50%) translateY(calc(-4px * var(--figma-stage-scale))) scale(1.035) !important;
  }
}

.screen.lineup-screen .lineup-card-option:not(:disabled):not(.is-dragging).is-pressing,
.screen.lineup-screen .lineup-card-option:not(:disabled):not(.is-dragging):active {
  z-index: 10 !important;
  transform: translateY(calc(-3px * var(--figma-stage-scale))) scale(1.02) !important;
}

.screen.lineup-screen .lineup-card-option.is-selected:not(:disabled):not(.is-dragging).is-pressing,
.screen.lineup-screen .lineup-card-option.is-selected:not(:disabled):not(.is-dragging):active {
  transform: translateY(calc(-7px * var(--figma-stage-scale))) scale(1.02) !important;
}

.screen.lineup-screen .lineup-card-option:not(:disabled):not(.is-dragging).is-pressing img,
.screen.lineup-screen .lineup-card-option:not(:disabled):not(.is-dragging):active img {
  filter: brightness(1.04) saturate(1.05) !important;
  box-shadow:
    0 0 0 calc(2px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.9),
    0 calc(4px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.18) !important;
}

.screen.lineup-screen .lineup-slot.is-assigned:not(:disabled):active,
.screen.lineup-screen .lineup-slot.is-assigned:not(:disabled).is-pressing {
  z-index: 10 !important;
  filter: brightness(1.04) saturate(1.04) !important;
  box-shadow:
    0 0 0 calc(2px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.92),
    0 0 calc(14px * var(--figma-stage-scale)) rgba(0, 104, 183, 0.38),
    0 calc(4px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.16) !important;
}

.screen.lineup-screen .lineup-slot.is-assigned:not(:disabled):active .lineup-slot__card-image,
.screen.lineup-screen .lineup-slot.is-assigned:not(:disabled).is-pressing .lineup-slot__card-image {
  filter: brightness(1.03) saturate(1.04) !important;
  box-shadow: 0 calc(3px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.16) !important;
}

.screen.lineup-screen .lineup-slot.is-assigned:not(.lineup-slot--cf):not(.lineup-slot--p):not(.lineup-slot--c):not(:disabled):active,
.screen.lineup-screen .lineup-slot.is-assigned:not(.lineup-slot--cf):not(.lineup-slot--p):not(.lineup-slot--c):not(:disabled).is-pressing {
  transform: translateY(calc(-2px * var(--figma-stage-scale))) scale(1.018) !important;
}

.screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--cf:not(:disabled):active,
.screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--cf:not(:disabled).is-pressing,
.screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--p:not(:disabled):active,
.screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--p:not(:disabled).is-pressing,
.screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--c:not(:disabled):active,
.screen.lineup-screen .lineup-slot.is-assigned.lineup-slot--c:not(:disabled).is-pressing {
  transform: translateX(-50%) translateY(calc(-2px * var(--figma-stage-scale))) scale(1.018) !important;
}

:is(
  button,
  [data-action],
  [role="button"],
  .cta,
  .topbar__button,
  .modal-card__button,
  .modal-card__single,
  .app-drawer__nav-link,
  .desktop-sitemap__link,
  .desktop-sitemap__popup-link,
  .screen .home-flow-nav__button,
  .home-flow-nav__button,
  .menu-row,
  .team-tab,
  .predict-option,
  .lineup-slot,
  .lineup-card-option,
  .drawer-link,
  .rank-link,
  .panel-button,
  .play-screen__button,
  .search-button,
  .community-tile__button,
  .community-tile__like,
  .community-like-button,
  .community-action-sheet__option,
  .community-action-sheet__cancel,
  .community-confirm-modal__button,
  .inquiry-screen__tab,
  .faq-screen__tab,
  .member-address-row__search,
  .family-consent-screen__download
):disabled,
:is(
  [aria-disabled="true"],
  .is-disabled
) {
  --material-hover-opacity: 0 !important;
  --material-ripple-opacity: 0 !important;
  --material-ripple-size: 0px !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Drawer exact restore: remove broken grid packing and lock Figma vertical rhythm */
.app-drawer__panel--menu,
.app-drawer__panel--mypage {
  --drawer-content-width: calc(343px * var(--figma-stage-scale, 1)) !important;
  --drawer-close-top: calc(var(--safe-top, 0px) + (32px * var(--figma-stage-scale, 1))) !important;
  --drawer-hero-top: calc(var(--safe-top, 0px) + (102px * var(--figma-stage-scale, 1))) !important;
  --drawer-footer-bottom: calc(48px * var(--figma-stage-scale, 1)) !important;
  --drawer-body-bottom: calc(104px * var(--figma-stage-scale, 1)) !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.app-drawer__panel--menu {
  --drawer-body-top: calc(var(--safe-top, 0px) + (188px * var(--figma-stage-scale, 1))) !important;
  --drawer-body-bottom: calc(168px * var(--figma-stage-scale, 1)) !important;
}

.app-drawer__panel--mypage {
  --drawer-body-top: calc(var(--safe-top, 0px) + (190px * var(--figma-stage-scale, 1))) !important;
  --drawer-body-bottom: calc(228px * var(--figma-stage-scale, 1)) !important;
}

.app-drawer__panel--menu .drawer-close,
.app-drawer__panel--mypage .drawer-close {
  position: absolute !important;
  top: var(--drawer-close-top) !important;
  right: calc(16px * var(--figma-stage-scale, 1)) !important;
  left: auto !important;
  width: calc(24px * var(--figma-stage-scale, 1)) !important;
  min-width: calc(24px * var(--figma-stage-scale, 1)) !important;
  height: calc(24px * var(--figma-stage-scale, 1)) !important;
  min-height: calc(24px * var(--figma-stage-scale, 1)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  overflow: visible !important;
  isolation: auto !important;
  z-index: 4 !important;
}

.app-drawer__panel--menu .drawer-hero,
.app-drawer__panel--mypage .drawer-hero {
  position: absolute !important;
  top: var(--drawer-hero-top) !important;
  left: 50% !important;
  width: calc(340px * var(--figma-stage-scale, 1)) !important;
  max-width: calc(340px * var(--figma-stage-scale, 1)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}

.app-drawer__panel--menu .drawer-profile,
.app-drawer__panel--mypage .drawer-profile {
  width: calc(340px * var(--figma-stage-scale, 1)) !important;
  max-width: calc(340px * var(--figma-stage-scale, 1)) !important;
  min-height: calc(55px * var(--figma-stage-scale, 1)) !important;
  height: calc(55px * var(--figma-stage-scale, 1)) !important;
  gap: calc(14px * var(--figma-stage-scale, 1)) !important;
  align-items: stretch !important;
  justify-content: space-between !important;
}

.app-drawer__panel--menu .drawer-profile:not(.drawer-profile--logged-out),
.app-drawer__panel--mypage .drawer-profile:not(.drawer-profile--logged-out) {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.app-drawer__panel--menu .drawer-profile--logged-out,
.app-drawer__panel--mypage .drawer-profile--logged-out {
  display: block !important;
}

.app-drawer__panel--menu .drawer-profile strong,
.app-drawer__panel--mypage .drawer-profile strong {
  display: block !important;
  color: #0068b7 !important;
  font-family: "esamanru OTF", "Pretendard", sans-serif !important;
  font-style: normal !important;
  font-size: calc(24px * var(--figma-stage-scale, 1)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale, 1)) !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.app-drawer__panel--menu .drawer-profile--logged-out strong,
.app-drawer__panel--mypage .drawer-profile--logged-out strong {
  color: #2a2a2b !important;
}

.app-drawer__panel--menu .drawer-profile__copy,
.app-drawer__panel--mypage .drawer-profile__copy {
  display: flex !important;
  min-width: 0 !important;
  min-height: calc(55px * var(--figma-stage-scale, 1)) !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-self: stretch !important;
}

.app-drawer__panel--menu .drawer-profile__copy span,
.app-drawer__panel--mypage .drawer-profile__copy span {
  display: inline !important;
  color: #ff0000 !important;
  font-family: "esamanru OTF", "Pretendard", sans-serif !important;
  font-style: normal !important;
  font-size: calc(16px * var(--figma-stage-scale, 1)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale, 1)) !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

.app-drawer__panel--menu .drawer-profile__copy > span,
.app-drawer__panel--mypage .drawer-profile__copy > span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.app-drawer__panel--menu .drawer-profile__points,
.app-drawer__panel--mypage .drawer-profile__points {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.app-drawer__panel--menu .drawer-profile__copy > span > span,
.app-drawer__panel--mypage .drawer-profile__copy > span > span {
  display: inline !important;
}

.app-drawer__panel--menu .drawer-profile__points-label,
.app-drawer__panel--mypage .drawer-profile__points-label {
  display: inline !important;
  white-space: nowrap !important;
}

.app-drawer__panel--menu .drawer-profile__points .countup-value,
.app-drawer__panel--mypage .drawer-profile__points .countup-value {
  display: inline !important;
  margin-left: 0.32em !important;
}

.app-drawer__panel--menu .rank-link,
.app-drawer__panel--mypage .rank-link {
  display: inline-flex !important;
  align-self: end !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: calc(186px * var(--figma-stage-scale, 1)) !important;
  min-width: calc(186px * var(--figma-stage-scale, 1)) !important;
  max-width: calc(186px * var(--figma-stage-scale, 1)) !important;
  height: calc(40px * var(--figma-stage-scale, 1)) !important;
  min-height: calc(40px * var(--figma-stage-scale, 1)) !important;
  margin: 0 !important;
  padding: calc(8px * var(--figma-stage-scale, 1)) !important;
  gap: calc(8px * var(--figma-stage-scale, 1)) !important;
  box-sizing: border-box !important;
  border-radius: calc(8px * var(--figma-stage-scale, 1)) !important;
}

.app-drawer__panel--menu .rank-link > span,
.app-drawer__panel--mypage .rank-link > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: calc(8px * var(--figma-stage-scale, 1)) !important;
  font-family: "esamanru OTF", "Pretendard", sans-serif !important;
  font-style: normal !important;
  font-size: calc(16px * var(--figma-stage-scale, 1)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale, 1)) !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.app-drawer__panel--menu .rank-link .icon,
.app-drawer__panel--mypage .rank-link .icon,
.app-drawer__panel--menu .rank-link img,
.app-drawer__panel--mypage .rank-link img,
.app-drawer__panel--menu .rank-link svg,
.app-drawer__panel--mypage .rank-link svg {
  display: block !important;
  flex: 0 0 calc(24px * var(--figma-stage-scale, 1)) !important;
  width: calc(24px * var(--figma-stage-scale, 1)) !important;
  height: calc(24px * var(--figma-stage-scale, 1)) !important;
  min-width: calc(24px * var(--figma-stage-scale, 1)) !important;
  min-height: calc(24px * var(--figma-stage-scale, 1)) !important;
  max-width: calc(24px * var(--figma-stage-scale, 1)) !important;
  max-height: calc(24px * var(--figma-stage-scale, 1)) !important;
  object-fit: contain !important;
}

.app-drawer__panel--menu .app-drawer__body,
.app-drawer__panel--mypage .app-drawer__body {
  position: absolute !important;
  top: var(--drawer-body-top) !important;
  right: auto !important;
  bottom: var(--drawer-body-bottom) !important;
  left: 50% !important;
  width: var(--drawer-content-width) !important;
  max-width: var(--drawer-content-width) !important;
  margin: 0 !important;
  padding: 0 0 calc(12px * var(--figma-stage-scale, 1)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: translateX(-50%) !important;
}

.app-drawer__panel--menu .app-drawer__footer,
.app-drawer__panel--mypage .app-drawer__footer {
  position: absolute !important;
  right: auto !important;
  bottom: var(--drawer-footer-bottom) !important;
  left: 50% !important;
  width: calc(285px * var(--figma-stage-scale, 1)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}

.app-drawer__footer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(8px * var(--figma-stage-scale, 1)) !important;
  width: 100% !important;
}

html.is-mobile-runtime .app-drawer__panel--menu,
html.is-mobile-runtime .app-drawer__panel--mypage {
  --drawer-body-bottom: max(calc(188px * var(--figma-stage-scale, 1)), calc(var(--safe-bottom, 0px) + (168px * var(--figma-stage-scale, 1)))) !important;
}

html.is-mobile-runtime .app-drawer__panel--menu .app-drawer__body,
html.is-mobile-runtime .app-drawer__panel--mypage .app-drawer__body {
  padding-bottom: calc(32px * var(--figma-stage-scale, 1)) !important;
}

html.is-mobile-runtime .app-drawer__footer-actions {
  display: grid !important;
  gap: calc(12px * var(--figma-stage-scale, 1)) !important;
}

.app-overlay__backdrop {
  background: rgba(16, 19, 26, 0.34) !important;
  backdrop-filter: blur(calc(3px * var(--figma-stage-scale, 1))) !important;
}

.app-drawer.is-closing .app-overlay__backdrop {
  animation-duration: 180ms !important;
}

.app-drawer--left .app-drawer__panel,
.app-drawer--right .app-drawer__panel,
.app-drawer--left.is-closing .app-drawer__panel,
.app-drawer--right.is-closing .app-drawer__panel {
  animation-duration: 180ms !important;
}

.app-drawer__panel--menu .app-drawer__footer .cta,
.app-drawer__panel--mypage .app-drawer__footer .cta,
.app-drawer__panel--mypage .drawer-logout {
  width: 100% !important;
}

/* Asset progress shells */
.screen.home-screen .home-screen__product-shell {
  position: absolute !important;
  top: var(--home-product-top) !important;
  left: 50% !important;
  width: calc(205px * var(--figma-stage-scale)) !important;
  height: calc(166px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__product-shell .home-screen__product {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  object-fit: contain !important;
}

.play-screen-direct__title-shell {
  position: absolute !important;
  top: calc(131px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  z-index: 3 !important;
  width: calc(336px * var(--figma-stage-scale)) !important;
  height: calc(140px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
}

.play-screen-direct__title-shell .play-screen-direct__title {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: contain !important;
}

.play-screen-direct__choices {
  top: calc(303px * var(--figma-stage-scale)) !important;
}

.play-screen-direct__choice {
  position: relative !important;
}

.play-screen-direct__choice--available::after {
  content: "" !important;
  position: absolute !important;
  top: calc(8px * var(--figma-stage-scale)) !important;
  right: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  border-radius: 999px !important;
  background: #ff3b30 !important;
  pointer-events: none !important;
}

.play-screen-direct__choice--complete::after {
  content: none !important;
  display: none !important;
}

.play-screen-direct__sheet {
  top: max(var(--play-direct-sheet-design-top, calc(441px * var(--figma-stage-scale))), calc(var(--device-height) - var(--play-direct-sheet-height, calc(371px * var(--figma-stage-scale))))) !important;
  bottom: auto !important;
  min-height: var(--play-direct-sheet-height, calc(371px * var(--figma-stage-scale))) !important;
  height: var(--play-direct-sheet-height, calc(371px * var(--figma-stage-scale))) !important;
}

.play-screen-direct__metric {
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
}

.play-screen-direct__metric--cards {
  width: max-content !important;
  max-width: none !important;
  justify-self: center !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.play-screen-direct__metric strong {
  color: #0068b7 !important;
  font: inherit !important;
}

.play-screen-direct__metric-total {
  color: #2a2a2b !important;
  font: inherit !important;
}

.screen.play-screen-direct {
  --play-direct-sheet-design-top: calc(441px * var(--figma-stage-scale));
  --play-direct-sheet-height: calc(371px * var(--figma-stage-scale));
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  max-height: var(--device-height) !important;
  background: #05142a !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.screen.play-screen-direct .play-screen-direct__backdrop img {
  width: max(calc(457px * var(--figma-stage-scale)), var(--figma-stage-width)) !important;
  height: max(calc(812px * var(--figma-stage-scale)), var(--device-height)) !important;
}

.mockup-shell .phone-stage-frame > .phone-stage > .screen.predict-screen,
.mockup-shell .phone-stage-frame > .phone-stage > .screen.lineup-screen {
  width: var(--figma-stage-width) !important;
  height: var(--device-height) !important;
  min-height: 0 !important;
  max-height: var(--device-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.screen.intro-screen .intro-screen__hero {
  width: calc(336px * var(--figma-stage-scale)) !important;
  max-width: calc(100% - (32px * var(--figma-stage-scale))) !important;
}

.screen.intro-screen .intro-screen__hero img {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Community write final spacing lock */
.screen.community-me .community-me__editor {
  top: calc(246px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__upload {
  top: calc(531px * var(--figma-stage-scale)) !important;
}

/* Community detail heart icon cleanup */
.community-card__heart::before,
.community-card__heart::after,
.community-tile__heart::before,
.community-tile__heart::after {
  content: none !important;
  display: none !important;
}

.community-card__heart,
.community-tile__heart {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.community-card__like-button,
.community-tile__like,
.community-card__reactions {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.community-card__like-button:hover,
.community-card__like-button:active,
.community-card__like-button.is-pressing,
.community-tile__like:hover,
.community-tile__like:active,
.community-tile__like.is-pressing {
  --interactive-fill-size: 0% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.community-card__heart svg,
.community-card__heart img,
.community-tile__heart svg,
.community-tile__heart img {
  display: block;
  filter: none !important;
}

.community-tile__heart {
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.community-tile__like {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.community-tile__heart svg {
  width: 24px !important;
  height: 24px !important;
}

.community-tile__heart img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.community-card__heart svg {
  width: 32px !important;
  height: 32px !important;
}

.community-card__heart img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

.screen.community-screen--feed,
.screen.community-screen--detail {
  --community-body-start: calc(var(--safe-top) + 32px + (24px * var(--figma-stage-scale)) + (40px * var(--figma-stage-scale)));
}

.screen.community-screen--detail .community-screen__lead {
  position: absolute !important;
  top: calc(var(--community-body-start) + (38px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  width: calc(288px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.community-screen--detail .community-screen__body {
  position: absolute !important;
  inset: 0 !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.community-screen--detail .page-title.page-title--brand {
  position: absolute !important;
  top: var(--community-body-start) !important;
  left: 50% !important;
  width: calc(297px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.community-screen--detail .community-card--detail {
  position: absolute !important;
  top: calc(var(--community-body-start) + (100px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  width: calc(350px * var(--figma-stage-scale)) !important;
  height: auto !important;
  min-height: 410px !important;
  max-height: none !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  padding: calc(20px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border: calc(2px * var(--figma-stage-scale)) solid #0068b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
  z-index: 22 !important;
  animation: none !important;
}

.screen.community-screen--detail.is-detail-entering .community-card--detail {
  animation: community-detail-card-in-centered 220ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.screen.community-screen--detail.is-heart-updating .community-card--detail {
  animation-play-state: running !important;
}

.screen.community-screen--detail.is-heart-updating .community-detail-backdrop {
  animation-play-state: running !important;
}

.screen.community-screen--detail .community-detail-backdrop {
  position: absolute !important;
  top: calc(var(--community-body-start) + (100px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 20 !important;
  display: block !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(420px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
  cursor: default !important;
  animation: none !important;
}

.screen.community-screen--detail.is-detail-entering .community-detail-backdrop {
  animation: community-detail-backdrop-in 180ms ease both !important;
}

.screen.community-screen--detail .topbar {
  z-index: 30 !important;
}

.screen.community-screen--detail .community-grid--figma {
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes community-detail-card-in {
  0% {
    opacity: 0;
    transform: translateY(calc(12px * var(--figma-stage-scale))) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes community-detail-card-in-centered {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(12px * var(--figma-stage-scale))) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes community-detail-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.screen.community-screen--detail .community-card__head {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: calc(334px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--detail .community-card__title-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--detail .community-card__title-row strong {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.screen.community-screen--detail .community-card__title-row span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #e3e3e3 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--detail .community-card__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  color: #b7b7b7 !important;
}

.screen.community-screen--detail .community-card__close svg,
.screen.community-screen--detail .community-card__close img {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  display: block !important;
}

.screen.community-screen--detail .community-card__photo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(334px * var(--figma-stage-scale)) !important;
  height: calc(262px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.4) !important;
  overflow: hidden !important;
}

.screen.community-screen--detail .community-card__photo > img.is-filled {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.screen.community-screen--detail .community-placeholder,
.screen.community-screen--detail .community-placeholder__asset {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--detail .community-card__footer {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  width: calc(334px * var(--figma-stage-scale)) !important;
  height: auto !important;
  min-height: calc(40px * var(--figma-stage-scale)) !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.community-screen--detail .community-card__footer p {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  flex: 0 0 calc(263px * var(--figma-stage-scale)) !important;
  width: calc(263px * var(--figma-stage-scale)) !important;
  height: auto !important;
  min-height: calc(40px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--detail .community-card__reactions {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: calc(71px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  gap: 0 !important;
}

.screen.community-screen--detail .community-card__like-count {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.screen.community-screen--detail .community-card__like-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(32px * var(--figma-stage-scale)) !important;
  width: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  max-width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  max-height: calc(32px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.screen.community-screen--detail .community-card__heart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(32px * var(--figma-stage-scale)) !important;
  width: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  max-width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  max-height: calc(32px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.screen.community-screen--detail .screen__footer--community {
  position: absolute !important;
  left: 50% !important;
  top: calc(var(--community-body-start) + (530px * var(--figma-stage-scale))) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.community-screen--detail .screen__footer--community .cta {
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.community-screen--detail .community-screen__notice {
  position: absolute !important;
  top: calc(var(--community-body-start) + (594px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  width: max-content !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #ff0000 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen__body,
.agreements-screen__body,
.member-form-screen__body,
.package-screen__body,
.community-screen__body,
.community-me__body,
.predict-screen .screen__body,
.faq-screen__body,
.inquiry-screen__body {
  padding-top: var(--topbar-content-start) !important;
}

.screen.inquiry-screen .inquiry-screen__body {
  padding-top: calc(var(--safe-top) + 83px) !important;
}

.agreements-screen .agreements-screen__body {
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  padding: calc(var(--safe-top) + 94px) 0 0 !important;
}

.screen.agreements-screen .agreements-topbar {
  position: absolute !important;
  top: calc(var(--safe-top) + 32px) !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  z-index: 20 !important;
}

.screen.agreements-screen .agreements-topbar__back {
  --interactive-fill-opacity: 0.08 !important;
  --interactive-fill-size: 0% !important;
  position: absolute !important;
  left: calc(20px * var(--figma-stage-scale)) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 21 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  max-width: calc(24px * var(--figma-stage-scale)) !important;
  max-height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(rgba(0, 0, 0, var(--interactive-fill-opacity)), rgba(0, 0, 0, var(--interactive-fill-opacity))) !important;
  background-size: var(--interactive-fill-size) 100% !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  filter: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    background-size 180ms ease,
    background-color 160ms ease,
    filter 120ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    opacity 220ms ease,
    color 220ms ease,
    border-color 220ms ease !important;
}

.screen.agreements-screen .agreements-topbar__back-icon {
  display: block !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  max-width: calc(24px * var(--figma-stage-scale)) !important;
  max-height: calc(24px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.agreements-screen .agreements-topbar__brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(128px * var(--figma-stage-scale)) !important;
  transform: translate(-50%, -50%) !important;
}

.screen.agreements-screen .agreements-topbar__brand img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.agreements-screen .agreements-topbar__back:hover {
    --interactive-fill-size: 100% !important;
  }
}

.screen.agreements-screen .agreements-topbar__back:active,
.screen.agreements-screen .agreements-topbar__back.is-pressing {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
}

.agreements-screen .agreements-screen__heading {
  display: grid !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.agreements-screen .agreements-screen__eyebrow {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-screen__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.agreements-screen .agreements-screen__lead {
  margin: calc(32px * var(--figma-stage-scale)) 0 0 !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-screen__stack {
  display: grid !important;
  gap: calc(24px * var(--figma-stage-scale)) !important;
  margin-top: calc(32px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-section {
  display: grid !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-section__title-row {
  display: flex !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-section__bullet {
  width: calc(14px * var(--figma-stage-scale)) !important;
  height: calc(14px * var(--figma-stage-scale)) !important;
  border-radius: calc(4px * var(--figma-stage-scale)) !important;
  background: #0068b7 !important;
  flex: none !important;
}

.agreements-screen .agreements-section__title-row h2 {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-section__body {
  display: grid !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-section__body p,
.agreements-screen .agreements-table__row span,
.agreements-screen .agreements-table__row strong {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-screen__line {
  height: 1px !important;
  background: #b7b7b7 !important;
}

.agreements-screen .agreements-table {
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-table__row {
  display: grid !important;
  grid-template-columns: calc(68px * var(--figma-stage-scale)) 1fr !important;
  align-items: start !important;
}

.agreements-screen .agreements-table__row strong,
.agreements-screen .agreements-table__row span {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-table__row strong {
  font-weight: 500 !important;
}

.agreements-screen .agreements-consent {
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  margin-top: calc(32px * var(--figma-stage-scale)) !important;
  padding: calc(32px * var(--figma-stage-scale)) 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #f7f7f7 !important;
}

.agreements-screen .agreements-consent__divider {
  height: 1px !important;
  background: #d8d8d8 !important;
}

.agreements-screen .agreements-consent__items {
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  padding: 0 calc(5.5px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-toggle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  min-height: auto !important;
  padding: 0 !important;
  color: #2a2a2b !important;
}

.agreements-screen .agreements-toggle input[type="checkbox"] {
  display: none !important;
}

.agreements-screen .agreements-toggle--all {
  padding: 0 calc(5.5px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-toggle--multiline {
  align-items: flex-start !important;
}

.agreements-screen .agreements-toggle__box {
  position: relative !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  flex: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.agreements-screen .agreements-toggle__box::before {
  content: "" !important;
  position: absolute !important;
  inset: 12.5% !important;
  border: 1px solid #b7b7b7 !important;
  border-radius: calc(2px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.agreements-screen .agreements-toggle input:checked + .agreements-toggle__box::before {
  border-color: #0068b7 !important;
  background: #0068b7 !important;
}

.agreements-screen .agreements-toggle input:checked + .agreements-toggle__box::after {
  content: "" !important;
  position: absolute !important;
  left: calc(9px * var(--figma-stage-scale)) !important;
  top: calc(5px * var(--figma-stage-scale)) !important;
  width: calc(5px * var(--figma-stage-scale)) !important;
  height: calc(10px * var(--figma-stage-scale)) !important;
  border-right: calc(2px * var(--figma-stage-scale)) solid #ffffff !important;
  border-bottom: calc(2px * var(--figma-stage-scale)) solid #ffffff !important;
  transform: rotate(45deg) !important;
  box-sizing: border-box !important;
}

.agreements-screen .agreements-toggle__label {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-toggle__label--small {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.agreements-screen .agreements-screen__warning {
  margin: calc(32px * var(--figma-stage-scale)) 0 0 !important;
  color: #f12b2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.agreements-screen .agreements-screen__warning strong {
  font-weight: 700 !important;
}

.screen.agreements-screen .screen__footer {
  position: sticky !important;
  left: auto !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  z-index: 4 !important;
  margin-top: calc(46px * var(--figma-stage-scale)) !important;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s !important;
}

.screen.agreements-screen .screen__footer .cta {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.package-screen .package-choice:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .screen.package-screen .package-choice.is-selected:hover {
    filter: none !important;
  }

}

.screen.package-screen .package-choice:active,
.screen.package-screen .package-choice.is-pressing {
  transform: none !important;
  box-shadow: none !important;
}

.screen.package-screen .package-choice::before,
.screen.package-screen .package-choice:hover::before,
.screen.package-screen .package-choice:active::before,
.screen.package-screen .package-choice.is-pressing::before {
  inset: 0 auto 0 0 !important;
  width: var(--interactive-fill-size) !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, var(--interactive-fill-opacity)) !important;
  box-shadow: none !important;
  transition:
    width 180ms ease,
    opacity 180ms ease,
    background-color 180ms ease,
    filter 180ms ease !important;
  z-index: 1 !important;
}

.screen.package-screen .package-choice::after,
.screen.package-screen .package-choice:hover::after,
.screen.package-screen .package-choice:active::after,
.screen.package-screen .package-choice.is-pressing::after {
  box-shadow: none !important;
}

.screen.package-screen .package-choice.is-selected:active,
.screen.package-screen .package-choice.is-selected.is-pressing {
  filter: none !important;
}

.screen.package-screen {
  --package-choice-selected-scale: 1.0326;
}

.screen.package-screen .package-choice {
  transform-origin: center bottom !important;
}

.screen.package-screen .package-choice-grid.has-selection .package-choice.is-selected {
  position: relative !important;
  z-index: 2 !important;
  transform: scale(var(--package-choice-selected-scale)) !important;
  transform-origin: center bottom !important;
}

.screen.package-screen .package-choice-grid.has-selection .package-choice.is-selected:first-child {
  transform-origin: left bottom !important;
}

.screen.package-screen .package-choice-grid.has-selection .package-choice.is-selected:last-child {
  transform-origin: right bottom !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.package-screen .package-choice-grid.has-selection .package-choice.is-selected:hover {
    transform: scale(var(--package-choice-selected-scale)) !important;
  }
}

.screen.package-screen .package-choice-grid.has-selection .package-choice.is-selected:active,
.screen.package-screen .package-choice-grid.has-selection .package-choice.is-selected.is-pressing {
  transform: scale(var(--package-choice-selected-scale)) !important;
}


/* Force mobile viewport parity on desktop screens (loaded last, so this is authoritative). */
@media (hover: hover) and (pointer: fine) {
  :root {
    --device-width: 375px !important;
    --device-height: 764px !important;
    --figma-stage-width: 375px !important;
    --figma-stage-scale: calc(var(--figma-stage-width) / var(--figma-frame-width)) !important;
    --mockup-stage-width: var(--figma-stage-width) !important;
    --mockup-stage-height: var(--device-height) !important;
    --mockup-screen-height: var(--device-height) !important;
  }

  .mockup-shell {
    position: relative !important;
    display: block !important;
    align-items: start !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: 0 !important;
  }

  .desktop-preview {
    display: none !important;
  }

  .desktop-sitemap {
    display: block !important;
    position: fixed !important;
    top: 24px !important;
    left: max(24px, calc(50vw - (var(--mockup-stage-width) / 2) - 336px)) !important;
  }

  .desktop-sitemap--placeholder {
    display: none !important;
  }

  .phone-stage-frame {
    width: var(--mockup-stage-width) !important;
    height: var(--mockup-stage-height) !important;
    min-height: var(--mockup-stage-height) !important;
    max-width: var(--mockup-stage-width) !important;
    max-height: var(--mockup-stage-height) !important;
    margin: 0 auto !important;
  }

  .phone-stage {
    position: absolute !important;
    inset: 0 !important;
    width: var(--mockup-stage-width) !important;
    height: var(--mockup-stage-height) !important;
    min-height: var(--mockup-screen-height) !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    zoom: normal !important;
    transform: none !important;
  }

  .phone-stage-frame > .phone-stage > .screen {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: var(--mockup-screen-height) !important;
    min-height: var(--mockup-screen-height) !important;
    max-height: var(--mockup-screen-height) !important;
    margin: 0 auto !important;
  }

  .phone-stage,
  .phone-stage-frame {
    width: var(--mockup-stage-width) !important;
    max-width: var(--mockup-stage-width) !important;
    min-width: var(--mockup-stage-width) !important;
    height: var(--mockup-stage-height) !important;
    min-height: var(--mockup-stage-height) !important;
    max-height: var(--mockup-stage-height) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .phone-stage {
      border-radius: 0 !important;
      box-shadow: none !important;
      height: var(--mockup-stage-height) !important;
      min-height: var(--mockup-screen-height) !important;
    }
  }

  .screen {
    min-height: var(--mockup-screen-height) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  :root {
    --device-width: var(--mobile-viewport-width) !important;
    --device-height: var(--mobile-viewport-height) !important;
    --figma-stage-width: var(--mobile-viewport-width) !important;
    --figma-stage-scale: calc(var(--figma-stage-width) / var(--figma-frame-width)) !important;
    --mockup-stage-width: var(--mobile-viewport-width) !important;
    --mockup-stage-height: var(--mobile-viewport-height) !important;
    --mockup-screen-height: var(--mobile-viewport-height) !important;
  }

  .mockup-shell {
    display: block !important;
    min-height: var(--mobile-viewport-height) !important;
    padding: 0 !important;
  }

  .desktop-sitemap,
  .desktop-sitemap--placeholder,
  .desktop-preview {
    display: none !important;
  }

  .phone-stage-frame {
    width: var(--mobile-viewport-width) !important;
    min-width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
    height: var(--mobile-viewport-height) !important;
    min-height: var(--mobile-viewport-height) !important;
    max-height: none !important;
  }

  .phone-stage {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    inset: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .phone-stage > .screen,
  .phone-stage-frame > .phone-stage > .screen,
  .screen {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: var(--mockup-screen-height) !important;
    max-height: none !important;
  }

  .screen.package-screen {
    height: var(--mockup-screen-height) !important;
    min-height: var(--mockup-screen-height) !important;
  }

  .package-screen__body {
    height: 100% !important;
    min-height: 100% !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  }
}

.toast-layer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(132.5px * var(--figma-stage-scale)) !important;
  z-index: 38 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  padding: 0 calc(20px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.toast.toast--global {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: calc(37px * var(--figma-stage-scale)) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  -webkit-backdrop-filter: blur(calc(2px * var(--figma-stage-scale))) !important;
  backdrop-filter: blur(calc(2px * var(--figma-stage-scale))) !important;
  color: #f7f7f7 !important;
  font-family: "esamanru OTF", "Pretendard", sans-serif !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
  animation: none !important;
  box-shadow: none !important;
}

.screen.register-screen > .register-screen__close-button {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  position: absolute !important;
  inset: calc(var(--safe-top) + 32px) calc(16px * var(--figma-stage-scale)) auto auto !important;
  left: auto !important;
  right: calc(16px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  max-width: calc(24px * var(--figma-stage-scale)) !important;
  max-height: calc(24px * var(--figma-stage-scale)) !important;
  display: inline-flex !important;
  flex: 0 0 calc(24px * var(--figma-stage-scale)) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  background-size: 0 0 !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  overflow: visible !important;
  isolation: auto !important;
  z-index: 20 !important;
}

.screen.register-screen > .register-screen__close-button .register-screen__close-icon {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.screen.points-history-screen {
  position: relative !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.screen.points-history-screen .points-history-screen__body {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: calc(var(--safe-top) + 98px) 0 calc(84px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.points-history-screen .points-history-screen__summary,
.screen.points-history-screen .points-history-screen__list,
.screen.points-history-screen .points-history-screen__notice {
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.screen.points-history-screen .points-history-screen__summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  column-gap: calc(12px * var(--figma-stage-scale)) !important;
  row-gap: calc(10px * var(--figma-stage-scale)) !important;
}

.screen.points-history-screen .points-history-screen__period {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.points-history-screen .points-history-screen__total {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: calc(2px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.points-history-screen .points-history-screen__total-value {
  color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.48px * var(--figma-stage-scale)) !important;
}

.screen.points-history-screen .points-history-screen__total-unit {
  color: #2a2a2b !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.48px * var(--figma-stage-scale)) !important;
}

.screen.points-history-screen .points-history-screen__monthly-button {
  --interactive-fill-opacity: 0.08;
  --interactive-fill-size: 0%;
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: end !important;
  justify-self: end !important;
  width: calc(151px * var(--figma-stage-scale)) !important;
  min-width: calc(151px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  min-height: calc(40px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: calc(2px * var(--figma-stage-scale)) solid #ffffff !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #0068b7 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  transition:
    background-size 180ms ease,
    filter 120ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.points-history-screen .points-history-screen__monthly-button:hover {
    --interactive-fill-size: 100% !important;
  }
}

.screen.points-history-screen .points-history-screen__monthly-button.is-pressing,
.screen.points-history-screen .points-history-screen__monthly-button:active {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
}

.screen.points-history-screen .points-history-screen__tabs {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: stretch !important;
  width: calc(340px * var(--figma-stage-scale)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: calc(28px * var(--figma-stage-scale)) !important;
  position: relative !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #d9d9d9 !important;
}

.screen.points-history-screen .points-history-screen__tab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 20% !important;
  z-index: 1 !important;
  min-width: 0 !important;
  height: calc(34px * var(--figma-stage-scale)) !important;
  padding: 0 0 calc(10px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
  transform: none !important;
}

.screen.points-history-screen .points-history-screen__tab > span {
  position: relative !important;
  z-index: 1 !important;
}

.screen.points-history-screen .points-history-screen__tab-indicator {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(-1px * var(--figma-stage-scale)) !important;
  z-index: 2 !important;
  width: 0 !important;
  height: calc(2px * var(--figma-stage-scale)) !important;
  background: #0068b7 !important;
  transform: translateX(0) !important;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform !important;
  pointer-events: none !important;
}

.screen.points-history-screen .points-history-screen__tab.is-active {
  color: #0068b7 !important;
}

.screen.points-history-screen .points-history-screen__panel {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.screen.points-history-screen .points-history-screen__list {
  margin-top: calc(4px * var(--figma-stage-scale)) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: calc(132px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.screen.points-history-screen .points-history-screen__list::-webkit-scrollbar {
  display: none !important;
}

.screen.points-history-screen .points-history-screen__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  padding: calc(12px * var(--figma-stage-scale)) 0 !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #b7b7b7 !important;
  box-sizing: border-box !important;
}

.screen.points-history-screen .points-history-screen__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: calc(72px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(12px * var(--figma-stage-scale)) !important;
  background: #00b4ed !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.screen.points-history-screen .points-history-screen__item-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.screen.points-history-screen .points-history-screen__item-title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
}

.screen.points-history-screen .points-history-screen__item-date {
  margin: calc(2px * var(--figma-stage-scale)) 0 0 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.points-history-screen .points-history-screen__item-points {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  gap: calc(1px * var(--figma-stage-scale)) !important;
  min-width: calc(34px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.points-history-screen .points-history-screen__item-points-value,
.screen.points-history-screen .points-history-screen__item-points-unit {
  color: #0068b7 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.points-history-screen .points-history-screen__empty,
.screen.points-monthly-screen .points-monthly-screen__empty {
  margin: calc(24px * var(--figma-stage-scale)) 0 0 !important;
  color: #8c8c8c !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.points-history-screen .points-history-screen__notice {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(62px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  z-index: 3 !important;
}

.screen.points-history-screen .points-history-screen__fade {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(88px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 24%, #ffffff 60%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.screen.points-monthly-screen {
  position: relative !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.screen.points-monthly-screen .agreements-topbar {
  position: absolute !important;
  top: calc(var(--safe-top) + 32px) !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  z-index: 20 !important;
}

.screen.points-monthly-screen .agreements-topbar__back {
  --interactive-fill-opacity: 0.08 !important;
  --interactive-fill-size: 0% !important;
  position: absolute !important;
  left: calc(20px * var(--figma-stage-scale)) !important;
  top: 50% !important;
  z-index: 21 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(rgba(0, 0, 0, var(--interactive-fill-opacity)), rgba(0, 0, 0, var(--interactive-fill-opacity))) !important;
  background-size: var(--interactive-fill-size) 100% !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  filter: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    background-size 180ms ease,
    background-color 160ms ease,
    filter 120ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    opacity 220ms ease,
    color 220ms ease,
    border-color 220ms ease !important;
}

.screen.points-monthly-screen .agreements-topbar__back-icon {
  display: block !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.points-monthly-screen .agreements-topbar__brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(128px * var(--figma-stage-scale)) !important;
  transform: translate(-50%, -50%) !important;
}

.screen.points-monthly-screen .agreements-topbar__brand img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.points-monthly-screen .agreements-topbar__back:hover {
    --interactive-fill-size: 100% !important;
  }
}

.screen.points-monthly-screen .agreements-topbar__back:active,
.screen.points-monthly-screen .agreements-topbar__back.is-pressing {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
}

.screen.points-monthly-screen .points-monthly-screen__body {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: calc(var(--safe-top) + 104px) 0 0 !important;
  box-sizing: border-box !important;
}

.screen.points-monthly-screen .points-monthly-screen__title,
.screen.points-monthly-screen .points-monthly-screen__stack,
.screen.points-monthly-screen .points-monthly-screen__notice {
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.screen.points-monthly-screen .points-monthly-screen__title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.points-monthly-screen .points-monthly-screen__stack {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  min-height: 0 !important;
  margin-top: calc(30px * var(--figma-stage-scale)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: calc(120px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.screen.points-monthly-screen .points-monthly-screen__stack::-webkit-scrollbar,
.screen.points-monthly-screen .points-monthly-screen__detail-list::-webkit-scrollbar {
  display: none !important;
}

.screen.points-monthly-screen .points-monthly-screen__card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  padding: calc(8px * var(--figma-stage-scale)) 0 calc(4px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #f7f7f7 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-head {
  --interactive-fill-opacity: 0.08;
  --interactive-fill-size: 0%;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(304px * var(--figma-stage-scale)) !important;
  min-height: calc(29px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) 0 !important;
  margin: 0 auto !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(rgba(0, 0, 0, var(--interactive-fill-opacity)), rgba(0, 0, 0, var(--interactive-fill-opacity))) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: var(--interactive-fill-size) 100% !important;
  box-shadow: none !important;
  text-align: left !important;
  border-radius: calc(6px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: background-size 180ms ease !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-period {
  position: relative !important;
  z-index: 1 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-total,
.screen.points-monthly-screen .points-monthly-screen__metric-value,
.screen.points-monthly-screen .points-monthly-screen__detail-points {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: calc(1px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-total-value,
.screen.points-monthly-screen .points-monthly-screen__metric-value-number,
.screen.points-monthly-screen .points-monthly-screen__detail-points-number {
  color: #0068b7 !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-total-value,
.screen.points-monthly-screen .points-monthly-screen__card-total-unit {
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-total-unit,
.screen.points-monthly-screen .points-monthly-screen__metric-value-unit,
.screen.points-monthly-screen .points-monthly-screen__detail-points-unit {
  color: #2a2a2b !important;
}

.screen.points-monthly-screen .points-monthly-screen__summary-box {
  margin: 0 calc(8px * var(--figma-stage-scale)) !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-body {
  display: flex !important;
  flex-direction: column !important;
}

.screen.points-monthly-screen .points-monthly-screen__summary-wrap,
.screen.points-monthly-screen .points-monthly-screen__detail-wrap {
  overflow: hidden !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  transform: translateY(calc(-6px * var(--figma-stage-scale))) !important;
  pointer-events: none !important;
  transition:
    max-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: max-height, opacity, transform !important;
}

.screen.points-monthly-screen .points-monthly-screen__summary-wrap {
  transition-delay: 0ms, 0ms, 0ms, 0ms !important;
}

.screen.points-monthly-screen .points-monthly-screen__detail-wrap {
  transition-delay: 0ms, 0ms, 0ms, 0ms !important;
}

.screen.points-monthly-screen .points-monthly-screen__card--detail .points-monthly-screen__summary-wrap {
  max-height: calc(128px * var(--figma-stage-scale)) !important;
  margin-top: calc(8px * var(--figma-stage-scale)) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition-delay: 0ms, 0ms, 0ms, 0ms !important;
}

.screen.points-monthly-screen .points-monthly-screen__card--detail .points-monthly-screen__detail-wrap {
  max-height: calc(236px * var(--figma-stage-scale)) !important;
  margin-top: calc(12px * var(--figma-stage-scale)) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition-delay: 0ms, 0ms, 0ms, 0ms !important;
}

.screen.points-monthly-screen .points-monthly-screen__summary-grid {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
}

.screen.points-monthly-screen .points-monthly-screen__metric {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.points-monthly-screen .points-monthly-screen__metric-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  color: #2a2a2b !important;
}

.screen.points-monthly-screen .points-monthly-screen__metric-icon svg,
.screen.points-monthly-screen .points-monthly-screen__card-chevron svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.screen.points-monthly-screen .points-monthly-screen__metric-label {
  min-height: calc(16px * var(--figma-stage-scale)) !important;
  color: #b7b7b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
}

.screen.points-monthly-screen .points-monthly-screen__metric-value-number,
.screen.points-monthly-screen .points-monthly-screen__metric-value-unit {
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.points-monthly-screen .points-monthly-screen__detail-list {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: calc(304px * var(--figma-stage-scale)) !important;
  height: calc(200px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.screen.points-monthly-screen .points-monthly-screen__detail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  padding-bottom: calc(12px * var(--figma-stage-scale)) !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #b7b7b7 !important;
}

.screen.points-monthly-screen .points-monthly-screen__detail-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: calc(72px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(12px * var(--figma-stage-scale)) !important;
  background: #00b4ed !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.screen.points-monthly-screen .points-monthly-screen__detail-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.screen.points-monthly-screen .points-monthly-screen__detail-title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.points-monthly-screen .points-monthly-screen__detail-date {
  margin: 0 !important;
  color: #b7b7b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.points-monthly-screen .points-monthly-screen__detail-points-number,
.screen.points-monthly-screen .points-monthly-screen__detail-points-unit {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-toggle {
  --interactive-fill-opacity: 0.08;
  --interactive-fill-size: 0%;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  margin: calc(8px * var(--figma-stage-scale)) auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(rgba(0, 0, 0, var(--interactive-fill-opacity)), rgba(0, 0, 0, var(--interactive-fill-opacity))) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: var(--interactive-fill-size) 100% !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: background-size 180ms ease !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-chevron {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  color: #2a2a2b !important;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.screen.points-monthly-screen .points-monthly-screen__card-chevron.is-expanded {
  transform: rotate(180deg) !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.points-monthly-screen .points-monthly-screen__card-head:hover,
  .screen.points-monthly-screen .points-monthly-screen__card-toggle:hover {
    --interactive-fill-size: 100% !important;
  }
}

.screen.points-monthly-screen .points-monthly-screen__card-head.is-pressing,
.screen.points-monthly-screen .points-monthly-screen__card-head:active,
.screen.points-monthly-screen .points-monthly-screen__card-toggle.is-pressing,
.screen.points-monthly-screen .points-monthly-screen__card-toggle:active {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
}

.screen.points-monthly-screen .points-monthly-screen__notice {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(62px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  z-index: 3 !important;
}

/* Community feed exact Figma sync */
.screen.community-screen--feed .community-screen__body {
  position: absolute !important;
  inset: 0 !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.community-screen--feed .page-title.page-title--brand {
  position: absolute !important;
  top: var(--community-body-start) !important;
  left: 50% !important;
  width: calc(297px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.community-screen--feed .community-screen__lead {
  position: absolute !important;
  top: calc(var(--community-body-start) + (38px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  width: calc(288px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.community-screen--feed .community-grid--figma {
  position: absolute !important;
  top: calc(var(--community-body-start) + (100px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  display: grid !important;
  grid-template-columns: repeat(2, calc(168px * var(--figma-stage-scale))) !important;
  grid-auto-rows: calc(206px * var(--figma-stage-scale)) !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
  width: calc(342px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.community-screen--feed .community-tile--figma {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  width: calc(168px * var(--figma-stage-scale)) !important;
  height: calc(206px * var(--figma-stage-scale)) !important;
  min-height: calc(206px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  padding: calc(8px * var(--figma-stage-scale)) !important;
  border: calc(1.5px * var(--figma-stage-scale)) solid #0068b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.community-screen--feed .community-tile__photo {
  position: relative !important;
  display: flex !important;
  flex: 0 0 calc(96px * var(--figma-stage-scale)) !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(152px * var(--figma-stage-scale)) !important;
  min-width: calc(152px * var(--figma-stage-scale)) !important;
  max-width: calc(152px * var(--figma-stage-scale)) !important;
  height: calc(96px * var(--figma-stage-scale)) !important;
  min-height: calc(96px * var(--figma-stage-scale)) !important;
  max-height: calc(96px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.4) !important;
  overflow: hidden !important;
}

.screen.community-screen--feed .community-tile__photo.is-filled > img.is-filled {
  position: static !important;
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.screen.community-screen--feed .community-placeholder,
.screen.community-screen--feed .community-placeholder__asset {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--feed .community-tile__meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
}

.screen.community-screen--feed .community-tile__meta span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #e3e3e3 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--feed .community-tile__like {
  flex: 0 0 calc(20px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--feed .community-tile__meta .community-tile__like,
.screen.community-screen--feed .community-tile__meta .community-tile__like:hover,
.screen.community-screen--feed .community-tile__meta .community-tile__like:active,
.screen.community-screen--feed .community-tile__meta .community-tile__like.is-pressing,
.screen.community-screen--detail .community-card__reactions .community-card__like-button,
.screen.community-screen--detail .community-card__reactions .community-card__like-button:hover,
.screen.community-screen--detail .community-card__reactions .community-card__like-button:active,
.screen.community-screen--detail .community-card__reactions .community-card__like-button.is-pressing {
  --interactive-fill-size: 0% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.screen.community-screen--feed .community-tile__meta .community-tile__heart,
.screen.community-screen--detail .community-card__reactions .community-card__heart {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.screen.community-screen--feed .community-tile--figma strong {
  display: block !important;
  width: 100% !important;
  min-height: calc(21px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--feed .community-tile__button {
  width: 100% !important;
  height: calc(35px * var(--figma-stage-scale)) !important;
  min-height: calc(35px * var(--figma-stage-scale)) !important;
  margin-top: auto !important;
  padding: calc(7px * var(--figma-stage-scale)) 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #0068b7 !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--feed .community-tile__button,
.screen.community-screen--feed .community-tile__button:hover,
.screen.community-screen--feed .community-tile__button:active,
.screen.community-screen--feed .community-tile__button.is-pressing {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 0% !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: #0068b7 !important;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, var(--interactive-fill-opacity)),
      rgba(0, 0, 0, var(--interactive-fill-opacity))
    ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: var(--interactive-fill-size) 100% !important;
  transition:
    background-size 180ms ease,
    filter 160ms ease,
    transform 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.community-screen--feed .community-tile__button:hover {
    --interactive-fill-size: 100% !important;
  }
}

.screen.community-screen--feed .community-tile__button.is-pressing {
  --interactive-fill-size: 100% !important;
}

.screen.community-screen--feed .screen__footer--community {
  position: absolute !important;
  left: 50% !important;
  top: calc(var(--community-body-start) + (530px * var(--figma-stage-scale))) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.community-screen--feed .screen__footer--community .cta {
  width: 100% !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.community-screen--feed .community-screen__notice {
  position: absolute !important;
  top: calc(var(--community-body-start) + (594px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  width: max-content !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #ff0000 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.toast-layer.toast-layer--community-feed {
  top: calc(625px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
  z-index: 6 !important;
  padding: 0 !important;
}

.toast.toast--global.toast--community-feed {
  min-height: calc(37px * var(--figma-stage-scale)) !important;
  width: calc(257px * var(--figma-stage-scale)) !important;
  max-width: none !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #f7f7f7 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
  -webkit-backdrop-filter: blur(calc(2px * var(--figma-stage-scale))) !important;
  backdrop-filter: blur(calc(2px * var(--figma-stage-scale))) !important;
}

/* Community write exact Figma sync */
.screen.community-me .community-me__body {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.community-me .page-title,
.screen.community-me .community-me__headline {
  top: calc(140px * var(--figma-stage-scale)) !important;
  left: calc(24px * var(--figma-stage-scale)) !important;
  width: calc(327px * var(--figma-stage-scale)) !important;
  transform: none !important;
}

.screen.community-me .community-me__field--title {
  top: calc(203px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__field strong {
  display: inline-flex !important;
  align-items: center !important;
  min-height: calc(21px * var(--figma-stage-scale)) !important;
  padding: 0 calc(4px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__title-input {
  width: 100% !important;
  height: calc(37px * var(--figma-stage-scale)) !important;
  margin-top: 0 !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.community-me .community-me__editor {
  top: calc(286px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__editor-box {
  width: 100% !important;
  height: calc(260px * var(--figma-stage-scale)) !important;
  min-height: calc(260px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.community-me .community-me__editor-guidelines {
  inset: calc(8px * var(--figma-stage-scale)) !important;
  gap: calc(16px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__criteria {
  width: 100% !important;
  justify-content: flex-end !important;
  margin: calc(4px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) 0 0 !important;
}

.screen.community-me .community-me__upload {
  top: calc(566px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.community-me .screen__footer {
  top: calc(670px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
  left: 50% !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
}

.screen.community-me .screen__footer .cta {
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__notice {
  width: calc(262px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Member form edit exact sync */
.screen.member-form-screen {
  min-height: max(var(--device-height), 764px) !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.screen.member-form-screen .member-form-screen__body {
  position: absolute !important;
  top: calc(98px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.member-form-screen .member-form-screen__title {
  margin: 0 !important;
}

.screen.member-form-screen .member-form-screen__stack {
  margin-top: calc(40px * var(--figma-stage-scale)) !important;
}

.screen.member-form-screen .member-address-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
}

.screen.member-form-screen .member-line__input[data-field="member-address-detail"]::placeholder {
  color: #b7b7b7 !important;
  opacity: 1 !important;
}

.screen.member-form-screen .member-gender {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: calc(16px * var(--figma-stage-scale)) !important;
  padding-right: calc(12px * var(--figma-stage-scale)) !important;
}

.screen.member-form-screen .member-gender__item {
  display: flex !important;
  align-items: center !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.member-form-screen .member-gender__box {
  position: relative !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('../mcp/exact/member/member-gender-unchecked.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: calc(20px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  box-shadow: none !important;
}

.screen.member-form-screen .member-gender__box::after,
.screen.member-form-screen .member-gender__item input:checked + .member-gender__box::after {
  content: none !important;
  display: none !important;
}

.screen.member-form-screen .member-gender__item input:checked + .member-gender__box {
  border: 0 !important;
  background-color: transparent !important;
  background-image: url('../mcp/exact/member/member-gender-checked.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: calc(20px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
}

.screen.member-form-screen .member-gender__label {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
}

.screen.member-form-screen .member-form-screen__footer {
  position: absolute !important;
  top: calc(591px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.member-form-screen .member-form-screen__footer .cta {
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.member-form-screen .member-form-screen__address-warning {
  width: 100% !important;
  margin: calc(12px * var(--figma-stage-scale)) 0 0 !important;
  color: #f12b2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(17px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.member-form-screen .member-withdraw-accent {
  color: #f12b2b !important;
}

.screen.member-form-screen .modal-card--dual-action .modal-card__caption.modal-card__caption--neutral {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.member-form-screen .modal-card--dual-action .modal-card__button--dual-action.is-primary {
  background: #f12b2b !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-composite {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: calc(45px * var(--figma-stage-scale)) !important;
  padding-right: calc(45px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-composite::before {
  left: calc(45px * var(--figma-stage-scale)) !important;
  right: calc(45px * var(--figma-stage-scale)) !important;
  bottom: calc(-2px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-composite img {
  width: 100% !important;
  max-width: none !important;
}

.screen.intro-screen.intro-screen--howto .intro-howto.intro-howto--composite {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
  box-sizing: border-box !important;
}

.mockup-shell:has(.screen.register-screen) .phone-stage-frame {
  height: var(--mobile-viewport-height, var(--mockup-stage-height)) !important;
  min-height: var(--mobile-viewport-height, var(--mockup-stage-height)) !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.mockup-shell:has(.screen.register-screen) .phone-stage-shell {
  height: var(--mobile-viewport-height, var(--mockup-stage-height)) !important;
  min-height: var(--mobile-viewport-height, var(--mockup-stage-height)) !important;
  max-height: none !important;
}

.mockup-shell:has(.screen.register-screen) .phone-stage {
  inset: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

.mockup-shell:has(.screen.register-screen) .phone-stage > .screen.register-screen,
.mockup-shell:has(.screen.register-screen) .phone-stage-frame > .phone-stage > .screen.register-screen {
  height: auto !important;
  min-height: var(--mobile-viewport-height, var(--device-height)) !important;
  max-height: none !important;
  overflow-y: visible !important;
}

html:has(#app .screen.register-screen),
body:has(#app .screen.register-screen) {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

.mockup-shell:has(.screen.register-screen) {
  height: var(--mobile-viewport-height, 100dvh) !important;
  min-height: var(--mobile-viewport-height, 100dvh) !important;
  overflow: hidden !important;
}

.screen.intro-screen.intro-screen--howto .intro-howto__panel--composite {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  isolation: isolate !important;
}

.screen.intro-screen.intro-screen--howto .intro-howto__panel--composite::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, 0.01) !important;
  -webkit-backdrop-filter: blur(calc(8px * var(--figma-stage-scale))) !important;
  backdrop-filter: blur(calc(8px * var(--figma-stage-scale))) !important;
  -webkit-mask-image: var(--intro-howto-translucent-mask) !important;
  mask-image: var(--intro-howto-translucent-mask) !important;
  -webkit-mask-mode: alpha !important;
  mask-mode: alpha !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center top !important;
  mask-position: center top !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

.screen.intro-screen.intro-screen--howto .intro-howto__composite-switch {
  position: absolute !important;
  z-index: 2 !important;
}

.screen.intro-screen.intro-screen--howto .intro-howto__composite {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
}

.screen.screen--landing .landing__title {
  top: var(--landing-title-top) !important;
  width: calc(336px * var(--figma-stage-scale)) !important;
  height: calc(140px * var(--figma-stage-scale)) !important;
  max-width: calc(336px * var(--figma-stage-scale)) !important;
  max-height: calc(140px * var(--figma-stage-scale)) !important;
}

.screen.screen--landing .landing__title img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.screen.screen--landing .landing__hero {
  top: var(--landing-hero-top) !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(611px * var(--figma-stage-scale)) !important;
  max-width: calc(344px * var(--figma-stage-scale)) !important;
  max-height: calc(611px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
}

.screen.screen--landing .landing__hero img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  transform-origin: center center !important;
}

.screen.screen--landing .landing__promo-float {
  position: absolute !important;
  top: calc(119px * var(--figma-stage-scale)) !important;
  left: calc(240px * var(--figma-stage-scale)) !important;
  z-index: 3 !important;
  display: block !important;
  width: calc(100px * var(--figma-stage-scale)) !important;
  height: calc(100px * var(--figma-stage-scale)) !important;
  pointer-events: auto !important;
  transform-origin: left bottom !important;
  -webkit-tap-highlight-color: transparent !important;
}

.screen.screen--landing .landing__promo-float img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 calc(4px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25)) !important;
  transform: none !important;
  transform-origin: left bottom !important;
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 260ms ease !important;
  will-change: transform, filter !important;
  animation: landing-promo-float 2400ms cubic-bezier(0.45, 0, 0.2, 1) infinite !important;
}

@keyframes landing-promo-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  42% {
    transform: translateY(calc(-2px * var(--figma-stage-scale))) scale(1.012);
  }

  50% {
    transform: translateY(calc(-5px * var(--figma-stage-scale))) scale(1.045);
  }

  62% {
    transform: translateY(calc(-1px * var(--figma-stage-scale))) scale(1.018);
  }
}

@media (hover: hover) and (pointer: fine) {
  .screen.screen--landing .landing__promo-float:hover img {
    animation-play-state: paused !important;
    filter: drop-shadow(0 calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.28)) !important;
    transform: translateY(calc(-4px * var(--figma-stage-scale))) scale(1.075) !important;
  }
}

.screen.screen--landing .landing__promo-float:active img,
.screen.screen--landing .landing__promo-float.is-pressing img {
  animation-play-state: paused !important;
  filter: drop-shadow(0 calc(3px * var(--figma-stage-scale)) calc(3px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.22)) !important;
  transform: translateY(calc(1px * var(--figma-stage-scale))) scale(0.955) !important;
}

.screen.intro-screen.intro-screen--howto.intro-screen--howto-predict .intro-howto__panel--composite,
.screen.intro-screen.intro-screen--howto.intro-screen--howto-predict .intro-howto__composite,
.screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup .intro-howto__panel--composite,
.screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup .intro-howto__composite {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.screen.screen--landing {
  --landing-page-height: max(var(--device-height, 100dvh), 764px);
  --landing-title-top: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + 37px);
  --landing-hero-top: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + 37px);
  --landing-actions-top: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + 510px);
  --landing-actions-height: 112px;
  --landing-notice-top: calc(var(--landing-actions-top) + var(--landing-actions-height) + 12px);
  height: var(--landing-page-height) !important;
  min-height: var(--landing-page-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.mockup-shell:has(.screen.screen--landing) .phone-stage,
.phone-stage-frame > .phone-stage > .screen.screen--landing {
  max-height: none !important;
}

.mockup-shell:has(.screen.screen--landing) .phone-stage {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.app-overlay.app-drawer {
  inset: 0 !important;
  min-height: var(--device-height, 100dvh) !important;
  height: var(--device-height, 100dvh) !important;
  max-height: var(--device-height, 100dvh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.app-drawer__panel--menu,
.app-drawer__panel--mypage {
  top: 0 !important;
  bottom: 0 !important;
  min-height: var(--device-height, 100dvh) !important;
  height: var(--device-height, 100dvh) !important;
  max-height: var(--device-height, 100dvh) !important;
}

@media (hover: hover) and (pointer: fine) {
  .phone-stage-shell {
    width: var(--mockup-stage-width) !important;
    min-width: var(--mockup-stage-width) !important;
    max-width: var(--mockup-stage-width) !important;
    margin: 0 auto !important;
  }

  .mockup-shell.has-desktop-sitemap,
  .mockup-shell.has-desktop-sitemap-placeholder {
    --device-height: max(100dvh, 764px) !important;
    --mockup-stage-height: max(100dvh, 764px) !important;
    --mockup-screen-height: max(100dvh, 764px) !important;
    min-height: max(100dvh, 764px) !important;
    height: max(100dvh, 764px) !important;
  }

  .mockup-shell.has-desktop-sitemap .phone-stage-frame,
  .mockup-shell.has-desktop-sitemap-placeholder .phone-stage-frame,
  .mockup-shell.has-desktop-sitemap .phone-stage-shell,
  .mockup-shell.has-desktop-sitemap-placeholder .phone-stage-shell {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }

  .mockup-shell.has-desktop-sitemap .phone-stage,
  .mockup-shell.has-desktop-sitemap-placeholder .phone-stage,
  .mockup-shell.has-desktop-sitemap .phone-stage-overlay,
  .mockup-shell.has-desktop-sitemap-placeholder .phone-stage-overlay {
    inset: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    transform: none !important;
  }

  .mockup-shell.has-desktop-sitemap .phone-stage > .screen,
  .mockup-shell.has-desktop-sitemap-placeholder .phone-stage > .screen {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .mockup-shell:has(.screen.register-screen) .phone-stage-frame {
    height: var(--mobile-viewport-height) !important;
    min-height: var(--mobile-viewport-height) !important;
    max-height: var(--mobile-viewport-height) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .mockup-shell:has(.screen.register-screen) .phone-stage {
    inset: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .mockup-shell:has(.screen.register-screen) .screen.register-screen {
    height: auto !important;
    min-height: var(--mobile-viewport-height) !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

@media (hover: none), (pointer: coarse) {
  html:has(#app .screen.home-screen),
  body:has(#app .screen.home-screen) {
    overflow: hidden !important;
    overscroll-behavior-y: none !important;
  }

  .phone-stage-overlay {
    transform: scale(var(--mobile-stage-scale)) !important;
    transform-origin: top left !important;
  }

  .mockup-shell:has(.screen.home-screen) {
    --device-width: var(--mobile-viewport-width) !important;
    --figma-stage-width: var(--mobile-viewport-width) !important;
    --figma-stage-scale: calc(var(--mobile-viewport-width) / 375px) !important;
    --mockup-stage-width: var(--mobile-viewport-width) !important;
    --home-overlay-scale: var(--figma-stage-scale) !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay {
    --figma-stage-width: var(--mobile-viewport-width) !important;
    --figma-stage-scale: var(--home-overlay-scale) !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    transform: none !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .stage-context-rail {
    right: calc(11px * var(--home-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-screen__sheet {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: calc(48px * var(--figma-stage-scale)) 0 calc(48px * var(--figma-stage-scale)) !important;
    pointer-events: none !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-screen__sheet .home-screen__metrics {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: calc(328px * var(--figma-stage-scale)) !important;
    margin: 0 auto !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-screen__sheet .home-screen__actions {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(285px * var(--figma-stage-scale)) !important;
    margin: calc(16px * var(--figma-stage-scale)) auto 0 !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-screen__sheet .home-screen__actions,
  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-screen__sheet .home-screen__actions *,
  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-screen__sheet .cta {
    pointer-events: auto !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button {
    width: calc(38px * var(--home-overlay-scale)) !important;
    height: calc(38px * var(--home-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left {
    left: calc(-2px * var(--home-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--right {
    right: calc(-2px * var(--home-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button img {
    width: calc(19px * var(--home-overlay-scale)) !important;
    height: calc(34px * var(--home-overlay-scale)) !important;
    flex: 0 0 calc(19px * var(--home-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-overlay > .home-flow-pager {
    bottom: calc(30px * var(--home-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.intro-screen) {
    --intro-overlay-scale: calc(var(--mobile-viewport-width) / 375px) !important;
  }

  .mockup-shell:has(.screen.intro-screen) .phone-stage-overlay {
    --figma-stage-width: var(--mobile-viewport-width) !important;
    --figma-stage-scale: var(--intro-overlay-scale) !important;
    left: 0 !important;
    right: auto !important;
    width: var(--mobile-viewport-width) !important;
    min-width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    transform: none !important;
  }

  .mockup-shell:has(.screen.intro-screen) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button {
    width: calc(38px * var(--intro-overlay-scale)) !important;
    height: calc(38px * var(--intro-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.intro-screen) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left {
    left: calc(-2px * var(--intro-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.intro-screen) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--right {
    right: calc(-2px * var(--intro-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.intro-screen) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button img {
    width: calc(19px * var(--intro-overlay-scale)) !important;
    height: calc(34px * var(--intro-overlay-scale)) !important;
    flex: 0 0 calc(19px * var(--intro-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.intro-screen) .phone-stage-overlay > .stage-context-rail {
    right: calc(11px * var(--intro-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.intro-screen) .phone-stage-overlay > .home-flow-pager {
    bottom: calc(30px * var(--intro-overlay-scale)) !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-frame {
    width: var(--mobile-viewport-width) !important;
    min-width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
    height: var(--mobile-viewport-height) !important;
    min-height: var(--mobile-viewport-height) !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage-shell {
    width: var(--mobile-viewport-width) !important;
    min-width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
    height: var(--mobile-viewport-height) !important;
    min-height: var(--mobile-viewport-height) !important;
    max-height: none !important;
    margin: 0 !important;
  }

  .mockup-shell:has(.screen.home-screen) .phone-stage {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 584px !important;
    max-height: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  .mockup-shell.has-desktop-sitemap .screen.home-screen,
  .mockup-shell.has-desktop-sitemap-placeholder .screen.home-screen,
  .mockup-shell:has(.screen.home-screen) .screen.home-screen {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 584px !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
}

/* Ranking history keeps the overlay nav in one coordinate system. */
.mockup-shell:has(.screen.ranking.ranking--history) {
  --ranking-history-overlay-scale: var(--figma-stage-scale) !important;
}

.mockup-shell:has(.screen.ranking.ranking--history) .phone-stage-overlay {
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  transform: none !important;
  transform-origin: top left !important;
}

.mockup-shell:has(.screen.ranking.ranking--history) .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
}

.mockup-shell:has(.screen.ranking.ranking--history) .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button {
  top: calc(102px * var(--ranking-history-overlay-scale)) !important;
  width: calc(38px * var(--ranking-history-overlay-scale)) !important;
  min-width: calc(38px * var(--ranking-history-overlay-scale)) !important;
  max-width: calc(38px * var(--ranking-history-overlay-scale)) !important;
  height: calc(38px * var(--ranking-history-overlay-scale)) !important;
  min-height: calc(38px * var(--ranking-history-overlay-scale)) !important;
  max-height: calc(38px * var(--ranking-history-overlay-scale)) !important;
  transform: none !important;
}

.mockup-shell:has(.screen.ranking.ranking--history) .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button--right {
  left: auto !important;
  right: calc(-2px * var(--ranking-history-overlay-scale)) !important;
}

.mockup-shell:has(.screen.ranking.ranking--history) .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button img {
  width: calc(19px * var(--ranking-history-overlay-scale)) !important;
  min-width: calc(19px * var(--ranking-history-overlay-scale)) !important;
  max-width: calc(19px * var(--ranking-history-overlay-scale)) !important;
  height: calc(34px * var(--ranking-history-overlay-scale)) !important;
  min-height: calc(34px * var(--ranking-history-overlay-scale)) !important;
  max-height: calc(34px * var(--ranking-history-overlay-scale)) !important;
  flex: 0 0 calc(19px * var(--ranking-history-overlay-scale)) !important;
  transform: none !important;
}

@media (hover: none), (pointer: coarse) {
  .mockup-shell:has(.screen.ranking.ranking--history) .phone-stage-overlay {
    width: var(--mobile-viewport-width) !important;
    min-width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
  }
}

/* Final topbar normalization: all center-brand topbars align to 32px from screen top */
.topbar,
.topbar.is-dark,
.menu-topbar,
.screen.predict-screen .topbar,
.screen.predict-screen .topbar.is-dark,
.screen.points-history-screen .topbar,
.screen.ranking .topbar,
.screen.ranking .topbar.is-dark,
.screen.lineup-screen .topbar,
.screen.lineup-screen .topbar.is-light,
.screen.home-screen .topbar,
.screen.home-screen .topbar.is-dark,
.screen.intro-screen .topbar,
.screen.intro-screen .topbar.is-dark,
.screen.community-screen .topbar,
.screen.community-screen .topbar.is-dark,
.screen.faq-screen .topbar,
.screen.faq-screen .topbar.is-dark,
.screen.inquiry-screen .topbar,
.screen.inquiry-screen .topbar.is-dark,
.screen.family-consent-screen .topbar,
.screen.family-consent-screen .topbar.is-dark,
.screen.prize-consent-screen .topbar,
.screen.prize-consent-screen .topbar.is-dark,
.screen.agreements-screen .agreements-topbar,
.screen.points-monthly-screen .agreements-topbar,
.screen.ranking.ranking--history .ranking-history__topbar {
  top: calc(var(--safe-top) + 32px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding-left: calc(16px * var(--figma-stage-scale)) !important;
  padding-right: calc(16px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.screen.agreements-screen .agreements-topbar__back,
.screen.points-monthly-screen .agreements-topbar__back,
.screen.ranking.ranking--history .ranking-history__back {
  left: calc(16px * var(--figma-stage-scale)) !important;
}

.screen.collection-screen.collection-screen--mascot {
  min-height: max(var(--device-height), 764px) !important;
  height: auto !important;
}

/* Preserve previously requested 40px content gap on screens tied to topbar position */
.screen.predict-screen .game-hero {
  top: calc(var(--safe-top) + 96px) !important;
}

.screen.lineup-screen .game-hero {
  top: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + 40px) !important;
}

.screen.points-history-screen .points-history-screen__body {
  padding: calc(var(--safe-top) + 96px) 0 calc(84px * var(--figma-stage-scale)) !important;
}

@media (hover: none), (pointer: coarse) {
  html:has(#app .screen.register-screen),
  body:has(#app .screen.register-screen) {
    overflow: hidden !important;
    overscroll-behavior-y: none !important;
  }

  .mockup-shell:has(.screen.register-screen),
  .mockup-shell:has(.screen.register-screen) .phone-stage-shell,
  .mockup-shell:has(.screen.register-screen) .phone-stage-frame,
  .mockup-shell:has(.screen.register-screen) .phone-stage {
    height: var(--mobile-viewport-height, 100dvh) !important;
    min-height: var(--mobile-viewport-height, 100dvh) !important;
    max-height: var(--mobile-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }

  .mockup-shell:has(.screen.register-screen) .phone-stage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .mockup-shell:has(.screen.register-screen) .phone-stage > .screen.register-screen,
  .mockup-shell:has(.screen.register-screen) .phone-stage-frame > .phone-stage > .screen.register-screen {
    height: var(--mobile-viewport-height, 100dvh) !important;
    min-height: var(--mobile-viewport-height, 100dvh) !important;
    max-height: var(--mobile-viewport-height, 100dvh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}

html:has(#app .screen.register-screen),
body:has(#app .screen.register-screen) {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

.mockup-shell:has(.screen.register-screen),
.mockup-shell:has(.screen.register-screen) .phone-stage-shell,
.mockup-shell:has(.screen.register-screen) .phone-stage-frame,
.mockup-shell:has(.screen.register-screen) .phone-stage {
  height: var(--device-height, var(--mobile-viewport-height)) !important;
  min-height: var(--device-height, var(--mobile-viewport-height)) !important;
  max-height: var(--device-height, var(--mobile-viewport-height)) !important;
  overflow: hidden !important;
}

.mockup-shell:has(.screen.register-screen) .phone-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

.mockup-shell:has(.screen.register-screen) .phone-stage > .screen.register-screen,
.mockup-shell:has(.screen.register-screen) .phone-stage-frame > .phone-stage > .screen.register-screen {
  height: var(--device-height, var(--mobile-viewport-height)) !important;
  min-height: var(--device-height, var(--mobile-viewport-height)) !important;
  max-height: var(--device-height, var(--mobile-viewport-height)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html:has(#app .screen.member-form-screen),
body:has(#app .screen.member-form-screen) {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

.mockup-shell:has(.screen.member-form-screen) {
  height: var(--mobile-viewport-height, 100dvh) !important;
  min-height: var(--mobile-viewport-height, 100dvh) !important;
  overflow: hidden !important;
}

.mockup-shell:has(.screen.member-form-screen) .phone-stage-frame {
  height: var(--mobile-viewport-height, var(--mockup-stage-height)) !important;
  min-height: var(--mobile-viewport-height, var(--mockup-stage-height)) !important;
  max-height: var(--mobile-viewport-height, 100dvh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.mockup-shell:has(.screen.member-form-screen) .phone-stage {
  height: auto !important;
  min-height: max(var(--device-height, 100dvh), 764px) !important;
  max-height: none !important;
  overflow: visible !important;
}

.mockup-shell:has(.screen.member-form-screen) .phone-stage > .screen.member-form-screen,
.mockup-shell:has(.screen.member-form-screen) .phone-stage-frame > .phone-stage > .screen.member-form-screen,
.screen.member-form-screen {
  height: max(var(--device-height, 100dvh), 764px) !important;
  min-height: max(var(--device-height, 100dvh), 764px) !important;
  max-height: none !important;
  overflow: visible !important;
}

.global-touch-feedback {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 2147483647 !important;
  width: 38px !important;
  height: 38px !important;
  margin: -19px 0 0 -19px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 18%, rgba(0, 104, 183, 0.34) 19% 52%, rgba(0, 180, 237, 0) 53%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 46, 81, 0.18) inset,
    0 0 10px rgba(0, 104, 183, 0.2) !important;
  transform: scale(0.3) !important;
  opacity: 0 !important;
  animation: global-touch-feedback-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  will-change: transform, opacity !important;
}

@keyframes global-touch-feedback-pop {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }

  20% {
    opacity: 0.95;
    transform: scale(0.72);
  }

  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-touch-feedback {
    animation-duration: 180ms !important;
    transform: scale(0.9) !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 374.98px) {
  .topbar,
  .topbar.is-dark,
  .menu-topbar,
  .screen.predict-screen .topbar,
  .screen.predict-screen .topbar.is-dark,
  .screen.points-history-screen .topbar,
  .screen.ranking .topbar,
  .screen.ranking .topbar.is-dark,
  .screen.lineup-screen .topbar,
  .screen.lineup-screen .topbar.is-light,
  .screen.home-screen .topbar,
  .screen.home-screen .topbar.is-dark,
.screen.intro-screen .topbar,
.screen.intro-screen .topbar.is-dark,
.screen.community-screen .topbar,
.screen.community-screen .topbar.is-dark,
.screen.faq-screen .topbar,
.screen.faq-screen .topbar.is-dark,
  .screen.inquiry-screen .topbar,
  .screen.inquiry-screen .topbar.is-dark,
  .screen.family-consent-screen .topbar,
  .screen.family-consent-screen .topbar.is-dark,
  .screen.prize-consent-screen .topbar,
  .screen.prize-consent-screen .topbar.is-dark,
  .screen.agreements-screen .agreements-topbar,
  .screen.points-monthly-screen .agreements-topbar,
  .screen.ranking.ranking--history .ranking-history__topbar {
    --figma-topbar-icon-size: calc(24px * var(--figma-stage-scale)) !important;
    --figma-topbar-brand-height: calc(20px * var(--figma-stage-scale)) !important;
    top: calc(var(--safe-top) + 32px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(30px * var(--figma-stage-scale)) !important;
    min-height: calc(24px * var(--figma-stage-scale)) !important;
    padding-left: calc(16px * var(--figma-stage-scale)) !important;
    padding-right: calc(16px * var(--figma-stage-scale)) !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .topbar__button,
  .topbar__slot,
  .topbar__icon,
  .screen.agreements-screen .agreements-topbar__back,
  .screen.points-monthly-screen .agreements-topbar__back,
  .screen.ranking.ranking--history .ranking-history__back {
    width: calc(24px * var(--figma-stage-scale)) !important;
    min-width: calc(24px * var(--figma-stage-scale)) !important;
    max-width: calc(24px * var(--figma-stage-scale)) !important;
    height: calc(24px * var(--figma-stage-scale)) !important;
    min-height: calc(24px * var(--figma-stage-scale)) !important;
    max-height: calc(24px * var(--figma-stage-scale)) !important;
  }

  .screen.agreements-screen .agreements-topbar__back-icon,
  .screen.points-monthly-screen .agreements-topbar__back-icon,
  .screen.ranking.ranking--history .ranking-history__back img,
  .topbar__icon {
    width: calc(24px * var(--figma-stage-scale)) !important;
    height: calc(24px * var(--figma-stage-scale)) !important;
  }

  .topbar__brand--light,
  .topbar__brand-lockup--light,
  .screen.agreements-screen .agreements-topbar__brand,
  .screen.points-monthly-screen .agreements-topbar__brand {
    width: calc(128px * var(--figma-stage-scale)) !important;
    min-width: calc(128px * var(--figma-stage-scale)) !important;
    max-width: calc(128px * var(--figma-stage-scale)) !important;
    height: calc(20px * var(--figma-stage-scale)) !important;
    min-height: calc(20px * var(--figma-stage-scale)) !important;
    max-height: calc(20px * var(--figma-stage-scale)) !important;
  }

  .topbar__brand--dark,
  .topbar__brand-lockup--dark,
  .screen.ranking.ranking--history .ranking-history__brand {
    width: calc(128px * var(--figma-stage-scale)) !important;
    min-width: calc(128px * var(--figma-stage-scale)) !important;
    max-width: calc(128px * var(--figma-stage-scale)) !important;
    height: calc(20px * var(--figma-stage-scale)) !important;
    min-height: calc(20px * var(--figma-stage-scale)) !important;
    max-height: calc(20px * var(--figma-stage-scale)) !important;
  }

  .topbar__brand-image,
  .screen.agreements-screen .agreements-topbar__brand img,
  .screen.points-monthly-screen .agreements-topbar__brand img,
  .screen.ranking.ranking--history .ranking-history__brand img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .screen.agreements-screen .agreements-topbar__back,
  .screen.points-monthly-screen .agreements-topbar__back,
  .screen.ranking.ranking--history .ranking-history__back {
    left: calc(16px * var(--figma-stage-scale)) !important;
  }

  .screen.community-screen--feed,
  .screen.community-screen--detail {
    --community-body-start: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + (40px * var(--figma-stage-scale)));
  }
}

/* Unified final pass: predict / lineup share one centered 343px content column */
.screen.predict-screen,
.screen.lineup-screen {
  --game-page-content-width: calc(343px * var(--figma-stage-scale));
  --game-page-action-height: calc(52px * var(--figma-stage-scale));
  --game-screen-scroll-y: 0px;
  --game-board-scroll-extra: 0px;
  --game-board-current-height: calc(546px * var(--figma-stage-scale));
  --game-board-scroll-height: calc(499px * var(--figma-stage-scale));
  --game-board-list-bottom-space: calc(64px * var(--figma-stage-scale));
  position: relative !important;
  width: var(--figma-stage-width) !important;
  height: var(--device-height) !important;
  min-height: 0 !important;
  max-height: var(--device-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.screen.predict-screen {
  --game-page-action-height: calc(82px * var(--figma-stage-scale));
  --game-board-list-bottom-space: calc(132px * var(--figma-stage-scale));
  --game-board-expanded-list-bottom-space: calc(232px * var(--figma-stage-scale));
}

.screen.lineup-screen {
  --game-board-expanded-list-bottom-space: calc(180px * var(--figma-stage-scale));
}

.screen.predict-screen.predict-screen--main,
.screen.predict-screen.predict-screen--picked,
.screen.predict-screen.predict-screen--confirm,
.screen.predict-screen.predict-screen--blocked {
  overflow-y: hidden !important;
}

.screen.lineup-screen--ready,
.screen.lineup-screen--picked {
  overflow-y: hidden !important;
}

.mockup-shell .phone-stage-frame > .phone-stage > .screen.predict-screen.predict-screen--main,
.mockup-shell .phone-stage-frame > .phone-stage > .screen.predict-screen.predict-screen--picked,
.mockup-shell .phone-stage-frame > .phone-stage > .screen.predict-screen.predict-screen--confirm,
.mockup-shell .phone-stage-frame > .phone-stage > .screen.predict-screen.predict-screen--blocked,
.mockup-shell .phone-stage-frame > .phone-stage > .screen.lineup-screen.lineup-screen--ready,
.mockup-shell .phone-stage-frame > .phone-stage > .screen.lineup-screen.lineup-screen--picked {
  overflow-y: hidden !important;
}

.screen.predict-screen.predict-screen--main .topbar,
.screen.predict-screen.predict-screen--picked .topbar,
.screen.predict-screen.predict-screen--confirm .topbar,
.screen.predict-screen.predict-screen--blocked .topbar,
.screen.predict-screen.predict-screen--main .topbar.is-dark,
.screen.predict-screen.predict-screen--picked .topbar.is-dark,
.screen.predict-screen.predict-screen--confirm .topbar.is-dark,
.screen.predict-screen.predict-screen--blocked .topbar.is-dark {
  top: calc(var(--safe-top) + 32px) !important;
}

.screen.predict-screen .screen__body,
.screen.predict-screen .predict--figma,
.screen.lineup-screen .screen__body,
.screen.lineup-screen .lineup--figma {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + (40px * var(--figma-stage-scale))) 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.screen.predict-screen.predict-screen--main .screen__body,
.screen.predict-screen.predict-screen--picked .screen__body,
.screen.predict-screen.predict-screen--confirm .screen__body,
.screen.predict-screen.predict-screen--blocked .screen__body,
.screen.predict-screen.predict-screen--main .predict--figma,
.screen.predict-screen.predict-screen--picked .predict--figma,
.screen.predict-screen.predict-screen--confirm .predict--figma,
.screen.predict-screen.predict-screen--blocked .predict--figma {
  margin: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + (40px * var(--figma-stage-scale))) 0 0 !important;
  padding: 0 !important;
}

.screen.predict-screen .game-hero,
.screen.lineup-screen .game-hero {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: var(--game-page-content-width) !important;
  margin: 0 auto !important;
}

.screen.predict-screen .predict-board.predict-board--latest,
.screen.lineup-screen .predict-board.predict-board--latest {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: var(--game-page-content-width) !important;
  height: var(--game-board-current-height) !important;
  flex: 0 0 var(--game-board-current-height) !important;
  max-height: calc(726px * var(--figma-stage-scale)) !important;
  margin: calc(24px * var(--figma-stage-scale)) auto 0 !important;
}

.screen.predict-screen.predict-screen--main .predict-board.predict-board--latest,
.screen.predict-screen.predict-screen--picked .predict-board.predict-board--latest,
.screen.predict-screen.predict-screen--confirm .predict-board.predict-board--latest,
.screen.predict-screen.predict-screen--blocked .predict-board.predict-board--latest {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: var(--game-page-content-width) !important;
  height: var(--game-board-current-height) !important;
  flex: 0 0 var(--game-board-current-height) !important;
  max-height: calc(726px * var(--figma-stage-scale)) !important;
  margin: calc(24px * var(--figma-stage-scale)) auto 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--ready .predict-board.predict-board--latest,
.screen.lineup-screen--picked .predict-board.predict-board--latest {
  height: var(--game-board-current-height) !important;
  max-height: calc(726px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__scroll,
.screen.lineup-screen .predict-board.predict-board--latest .predict-board__scroll {
  position: absolute !important;
  inset: calc(47px * var(--figma-stage-scale)) 0 auto 0 !important;
  height: var(--game-board-scroll-height) !important;
  min-height: var(--game-board-scroll-height) !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__list,
.screen.lineup-screen .predict-board.predict-board--latest .predict-board__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: var(--game-board-list-bottom-space) !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__list.has-expanded-section,
.screen.lineup-screen .predict-board.predict-board--latest .predict-board__list.has-expanded-section {
  padding-bottom: var(--game-board-expanded-list-bottom-space) !important;
}

.screen.predict-screen .predict-board__empty,
.screen.lineup-screen .predict-board__empty {
  width: calc(285px * var(--figma-stage-scale)) !important;
  min-height: calc(140px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #bdbdbd !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__filter,
.screen.lineup-screen .predict-board.predict-board--latest .predict-board__filter {
  position: absolute !important;
  top: calc(12px * var(--figma-stage-scale)) !important;
  right: auto !important;
  left: calc(29px * var(--figma-stage-scale)) !important;
  display: flex !important;
  justify-content: flex-end !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 2 !important;
}

.screen.predict-screen .predict-filter,
.screen.lineup-screen .predict-filter {
  gap: 4px !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  justify-content: flex-end !important;
}

.screen.predict-screen .predict-filter__label,
.screen.lineup-screen .predict-filter__label {
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: -0.24px !important;
}

.screen.predict-screen .predict-filter__checkbox,
.screen.lineup-screen .predict-filter__checkbox {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('../mcp/exact/common/predict-filter-checkbox-unchecked.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

.screen.predict-screen .predict-filter__checkbox:checked,
.screen.lineup-screen .predict-filter__checkbox:checked {
  background-color: transparent !important;
  background-image: url('../mcp/exact/common/predict-filter-checkbox-checked.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

.screen.predict-screen .predict-filter__checkbox:checked::after,
.screen.lineup-screen .predict-filter__checkbox:checked::after {
  width: 5px !important;
  height: 9px !important;
  border-right-width: 2px !important;
  border-bottom-width: 2px !important;
}

.screen.predict-screen .predict-section,
.screen.lineup-screen .predict-section {
  padding: calc(16px * var(--figma-stage-scale)) 0 !important;
}

.screen.predict-screen .predict-section__head,
.screen.predict-screen .predict-section__rows,
.screen.lineup-screen .predict-section__head,
.screen.lineup-screen .predict-section__rows {
  width: calc(285px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__head,
.screen.lineup-screen .predict-section__head {
  gap: 4px !important;
  overflow: visible !important;
}

.screen.predict-screen .predict-section__rows,
.screen.lineup-screen .predict-section__rows {
  margin-top: calc(12px * var(--figma-stage-scale)) !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  max-height: var(--predict-section-rows-height, calc(640px * var(--figma-stage-scale))) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transform-origin: top center !important;
  transition:
    max-height 260ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: max-height, margin-top, opacity, transform !important;
}

.screen.predict-screen .predict-section.is-collapsed .predict-section__rows,
.screen.lineup-screen .predict-section.is-collapsed .predict-section__rows {
  max-height: 0 !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  transform: translateY(calc(-6px * var(--figma-stage-scale))) !important;
  pointer-events: none !important;
}

.screen.predict-screen .predict-section__date,
.screen.lineup-screen .predict-section__date,
.screen.predict-screen .predict-section__status,
.screen.lineup-screen .predict-section__status {
  gap: 4px !important;
}

.screen.predict-screen .predict-section__date,
.screen.lineup-screen .predict-section__date {
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
}

.screen.predict-screen .predict-section__date.is-past .predict-section__date-text,
.screen.lineup-screen .predict-section__date.is-past .predict-section__date-text {
  color: #f7f7f7 !important;
  text-decoration-line: line-through !important;
  text-decoration-thickness: calc(1px * var(--figma-stage-scale)) !important;
  text-decoration-color: #f7f7f7 !important;
  text-underline-offset: calc(2px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__end-badge,
.screen.lineup-screen .predict-section__end-badge {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  height: 20px !important;
  min-width: 34px !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: #8c8c8c !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: -0.24px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

.screen.predict-screen .predict-section__badge,
.screen.lineup-screen .predict-section__badge {
  position: relative !important;
  min-width: 82px !important;
  height: 29px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
}

.screen.predict-screen .predict-section__badge[data-tooltip]::after,
.screen.lineup-screen .predict-section__badge[data-tooltip]::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  right: 0 !important;
  z-index: 30 !important;
  display: block !important;
  width: max-content !important;
  max-width: calc(150px * var(--figma-stage-scale)) !important;
  padding: calc(5px * var(--figma-stage-scale)) calc(7px * var(--figma-stage-scale)) !important;
  border-radius: calc(6px * var(--figma-stage-scale)) !important;
  background: rgba(42, 42, 43, 0.94) !important;
  color: #ffffff !important;
  font-size: calc(11px * var(--figma-stage-scale)) !important;
  font-weight: 400 !important;
  line-height: calc(15px * var(--figma-stage-scale)) !important;
  letter-spacing: -0.22px !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 140ms ease, transform 140ms ease !important;
}

.screen.predict-screen .predict-section__badge[data-tooltip][data-tooltip-placement="bottom"]::after,
.screen.lineup-screen .predict-section__badge[data-tooltip][data-tooltip-placement="bottom"]::after {
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  transform: translateY(calc(-3px * var(--figma-stage-scale))) !important;
}

.screen.predict-screen .predict-section__badge[data-tooltip][data-tooltip-placement="top"]::after,
.screen.lineup-screen .predict-section__badge[data-tooltip][data-tooltip-placement="top"]::after {
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  transform: translateY(calc(3px * var(--figma-stage-scale))) !important;
}

.screen.predict-screen .predict-section__badge[data-tooltip].is-tooltip-visible::after,
.screen.lineup-screen .predict-section__badge[data-tooltip].is-tooltip-visible::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.screen.predict-screen .predict-section.is-expanded .predict-section__badge[data-tooltip]::after,
.screen.lineup-screen .predict-section.is-expanded .predict-section__badge[data-tooltip]::after {
  display: none !important;
  opacity: 0 !important;
}

.screen.predict-screen .predict-section__chevron,
.screen.lineup-screen .predict-section__chevron {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

.screen.predict-screen .predict-section__chevron img,
.screen.lineup-screen .predict-section__chevron img {
  width: calc(7.5333px * var(--figma-stage-scale)) !important;
  height: calc(13.3667px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup,
.screen.lineup-screen .predict-matchup {
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(48px * var(--figma-stage-scale)) !important;
  min-height: calc(48px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__side,
.screen.lineup-screen .predict-matchup__side {
  height: calc(48px * var(--figma-stage-scale)) !important;
  min-height: calc(48px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__content,
.screen.lineup-screen .predict-matchup__content {
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__logo,
.screen.lineup-screen .predict-matchup__logo {
  width: calc(40px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(40px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__label,
.screen.lineup-screen .predict-matchup__label {
  min-width: calc(36px * var(--figma-stage-scale)) !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen.predict-screen--blocked .game-hero__title,
.screen.predict-screen.predict-screen--blocked .game-hero.game-hero--predict .game-hero__copy > h1 {
  text-align: left !important;
  justify-self: start !important;
  align-self: flex-start !important;
}

.screen.predict-screen .predict-action,
.screen.lineup-screen .lineup-action.lineup-action--picker {
  position: absolute !important;
  top: calc(var(--game-screen-scroll-y) + var(--device-height) - var(--game-page-action-height)) !important;
  bottom: auto !important;
  left: 50% !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: var(--game-page-action-height) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 12 !important;
}

.screen.predict-screen::after,
.screen.lineup-screen::after,
.screen.predict-screen.predict-screen--blocked::after {
  content: "" !important;
  position: absolute !important;
  top: calc(var(--game-screen-scroll-y) + var(--device-height) - (92px * var(--figma-stage-scale))) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(92px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.78) 45%, #ffffff 100%) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.screen.predict-screen .predict-action::before,
.screen.lineup-screen .lineup-action.lineup-action--picker::before {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.screen.predict-screen .predict-action .predict-footer-note {
  top: calc(64px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__match {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.28px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__team {
  margin-bottom: calc(6px * var(--figma-stage-scale)) !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.48px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__question {
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen.lineup-screen--ready::after,
.screen.lineup-screen.lineup-screen--picked::after {
  content: none !important;
  display: none !important;
}

.screen.lineup-screen--ready .predict-board.predict-board--latest .predict-board__list,
.screen.lineup-screen--picked .predict-board.predict-board--latest .predict-board__list {
  padding-bottom: calc(96px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--ready .predict-board.predict-board--latest .predict-board__list.has-expanded-section,
.screen.lineup-screen--picked .predict-board.predict-board--latest .predict-board__list.has-expanded-section {
  padding-bottom: var(--game-board-expanded-list-bottom-space) !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .modal-card__copy--dual-action {
  gap: calc(20px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__match,
.screen.lineup-screen--picked .modal-card--dual-action .lineup-entry-confirm__team {
  margin-bottom: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.screen--light.predict-screen.predict-screen--blocked
  > .screen__body.predict.predict--figma.predict--blocked
  > .game-hero.game-hero--predict
  > .game-hero__copy {
  align-items: flex-start !important;
  text-align: left !important;
}

.screen.screen--light.predict-screen.predict-screen--blocked
  > .screen__body.predict.predict--figma.predict--blocked
  > .game-hero.game-hero--predict
  > .game-hero__copy
  > h1.game-hero__title {
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.screen.predict-screen .game-hero__shortcut,
.screen.lineup-screen .game-hero__shortcut {
  --interactive-fill-opacity: 0.08;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: #0068b7 !important;
  transition:
    background-color 160ms ease,
    filter 120ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

.screen.predict-screen .game-hero__shortcut::before,
.screen.lineup-screen .game-hero__shortcut::before {
  content: none !important;
}

.screen.predict-screen .game-hero__shortcut-fill,
.screen.lineup-screen .game-hero__shortcut-fill {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 0 !important;
  height: 100% !important;
  background: rgba(0, 0, 0, var(--interactive-fill-opacity)) !important;
  pointer-events: none !important;
  transition: width 180ms ease !important;
  z-index: 0 !important;
}

.screen.predict-screen .game-hero__shortcut-label,
.screen.lineup-screen .game-hero__shortcut-label {
  position: relative !important;
  z-index: 1 !important;
}

.screen.lineup-screen.lineup-screen--entry,
.screen.lineup-screen.lineup-screen--drag,
.screen.lineup-screen.lineup-screen--confirm,
.screen.lineup-screen.lineup-screen--success {
  height: var(--device-height) !important;
  min-height: 0 !important;
  max-height: var(--device-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.screen.lineup-screen.lineup-screen--entry .screen__body,
.screen.lineup-screen.lineup-screen--drag .screen__body,
.screen.lineup-screen.lineup-screen--confirm .screen__body,
.screen.lineup-screen.lineup-screen--success .screen__body,
.screen.lineup-screen.lineup-screen--entry .lineup--figma,
.screen.lineup-screen.lineup-screen--drag .lineup--figma,
.screen.lineup-screen.lineup-screen--confirm .lineup--figma,
.screen.lineup-screen.lineup-screen--success .lineup--figma {
  height: var(--lineup-scroll-body-height) !important;
  min-height: var(--lineup-scroll-body-height) !important;
}

.screen.lineup-screen.lineup-screen--entry .lineup-action,
.screen.lineup-screen.lineup-screen--drag .lineup-action,
.screen.lineup-screen.lineup-screen--confirm .lineup-action,
.screen.lineup-screen.lineup-screen--success .lineup-action {
  position: fixed !important;
  top: auto !important;
  left: 50% !important;
  bottom: max(calc(18px * var(--figma-stage-scale, 1)), var(--safe-bottom, env(safe-area-inset-bottom))) !important;
  width: var(--figma-stage-width) !important;
  transform: translateX(-50%) !important;
  z-index: 24 !important;
}

.screen.lineup-screen.lineup-screen--history {
  height: var(--device-height) !important;
  min-height: var(--device-height) !important;
  max-height: var(--device-height) !important;
  overflow: hidden !important;
}

.screen.lineup-screen.lineup-screen--history::after {
  content: none !important;
  display: none !important;
}

.screen.lineup-screen.lineup-screen--history .screen__body,
.screen.lineup-screen.lineup-screen--history .lineup--figma {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: var(--figma-stage-width) !important;
  height: var(--device-height) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale))) 0 0 !important;
  box-sizing: border-box !important;
}

.screen.lineup-screen.lineup-screen--history .lineup-review-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: calc(260px * var(--figma-stage-scale)) !important;
  margin: calc(40px * var(--figma-stage-scale)) 0 0 !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  transform: none !important;
  white-space: nowrap !important;
  z-index: 4 !important;
}

.screen.lineup-screen.lineup-screen--history .lineup-review-header__match,
.screen.lineup-screen.lineup-screen--history .lineup-review-header__title,
.screen.lineup-screen.lineup-screen--history .lineup-review-header__submitted,
.screen.lineup-screen.lineup-screen--history .lineup-review-note {
  margin: 0 !important;
  font-family: inherit !important;
  font-style: normal !important;
  text-align: center !important;
}

.screen.lineup-screen.lineup-screen--history .lineup-review-header__match {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen.lineup-screen--history .lineup-review-header__title {
  color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen.lineup-screen--history .lineup-review-header__submitted {
  color: #b7b7b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen.lineup-screen--history .lineup-field.lineup-field--review {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: calc(43px * var(--figma-stage-scale)) 0 0 !important;
  flex: 0 0 calc(343px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen.lineup-screen--history .lineup-slot {
  pointer-events: none !important;
}

.screen.lineup-screen.lineup-screen--history .lineup-review-note {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: calc(280px * var(--figma-stage-scale)) !important;
  margin-top: calc(45px * var(--figma-stage-scale)) !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  transform: none !important;
  white-space: nowrap !important;
  z-index: 4 !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.predict-screen .game-hero__shortcut:hover,
  .screen.lineup-screen .game-hero__shortcut:hover {
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .screen.predict-screen .game-hero__shortcut:hover .game-hero__shortcut-fill,
  .screen.lineup-screen .game-hero__shortcut:hover .game-hero__shortcut-fill {
    width: 100% !important;
  }
}

.screen.predict-screen .game-hero__shortcut:active,
.screen.predict-screen .game-hero__shortcut.is-pressing,
.screen.lineup-screen .game-hero__shortcut:active,
.screen.lineup-screen .game-hero__shortcut.is-pressing {
  --interactive-fill-opacity: 0.14 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.screen.predict-screen .game-hero__shortcut:active .game-hero__shortcut-fill,
.screen.predict-screen .game-hero__shortcut.is-pressing .game-hero__shortcut-fill,
.screen.lineup-screen .game-hero__shortcut:active .game-hero__shortcut-fill,
.screen.lineup-screen .game-hero__shortcut.is-pressing .game-hero__shortcut-fill {
  width: 100% !important;
}

/* Drawer chevron icon should use its own exact asset sizing, not the generic topbar icon box */
.drawer-menu .menu-row__chevron .topbar__icon--chevron,
.drawer-menu .menu-row__chevron img.topbar__icon--chevron {
  width: calc(7.5333px * var(--figma-stage-scale)) !important;
  min-width: calc(7.5333px * var(--figma-stage-scale)) !important;
  max-width: calc(7.5333px * var(--figma-stage-scale)) !important;
  height: calc(13.3667px * var(--figma-stage-scale)) !important;
  min-height: calc(13.3667px * var(--figma-stage-scale)) !important;
  max-height: calc(13.3667px * var(--figma-stage-scale)) !important;
  display: block !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

/* My certification page: Figma rebuild */
.screen.community-me.community-me--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  height: max(var(--device-height), calc(812px * var(--figma-stage-scale))) !important;
  min-height: max(var(--device-height), calc(812px * var(--figma-stage-scale))) !important;
  max-height: none !important;
  background: #ffffff !important;
  color: #2a2a2b !important;
  overflow: hidden !important;
}

.screen.community-me.community-me--figma * {
  box-sizing: border-box !important;
}

.community-me--figma .community-me__name,
.community-me--figma .community-me__points,
.community-me--figma .community-me__section-title,
.community-me--figma .community-me__empty {
  margin: 0 !important;
}

.community-me--figma .community-me__name {
  position: absolute !important;
  top: calc(140px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.community-me--figma .community-me__points {
  position: absolute !important;
  top: calc(174px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  color: #ff0000 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.community-me--figma .community-me__close {
  position: absolute !important;
  top: calc(var(--safe-top) + (32px * var(--figma-stage-scale))) !important;
  right: calc(16px * var(--figma-stage-scale)) !important;
  left: auto !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #2a2a2b !important;
  overflow: visible !important;
}

.community-me--figma .community-me__close .drawer-close__icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.community-me--figma .community-me__close::before,
.community-me--figma .community-me__close::after {
  content: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .community-me--figma .community-me__close:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    background-image: none !important;
  }

  .community-me--figma .community-me__close:hover .drawer-close__icon {
    filter: brightness(0.92) !important;
    transform: scale(0.98) !important;
  }
}

.community-me--figma .community-me__close:active,
.community-me--figma .community-me__close.is-pressing {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  background-image: none !important;
}

.community-me--figma .community-me__close:active .drawer-close__icon,
.community-me--figma .community-me__close.is-pressing .drawer-close__icon {
  filter: brightness(0.86) !important;
  transform: scale(0.96) !important;
}

.community-me--figma .community-me__section-title {
  position: absolute !important;
  top: calc(207px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--figma-stage-width) !important;
  height: calc(37px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #8c8c8c !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__empty {
  position: absolute !important;
  top: calc(447px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #b7b7b7 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.community-me--figma .community-me__certify-button {
  --interactive-fill-opacity: 0.08 !important;
  --interactive-fill-size: 0% !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(90px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background-color: #0068b7 !important;
  background-image:
    linear-gradient(rgba(0, 0, 0, var(--interactive-fill-opacity)), rgba(0, 0, 0, var(--interactive-fill-opacity))),
    linear-gradient(#0068b7, #0068b7) !important;
  background-position: left top, left top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: var(--interactive-fill-size) 100%, 100% 100% !important;
  transform: translateX(-50%) !important;
  color: #ffffff !important;
  z-index: 1 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  transition:
    background-size 180ms ease,
    filter 120ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .community-me--figma .community-me__certify-button:hover {
    --interactive-fill-size: 100% !important;
    transform: translateX(-50%) !important;
    filter: none !important;
    box-shadow: none !important;
  }
}

.community-me--figma .community-me__certify-button:active,
.community-me--figma .community-me__certify-button.is-pressing {
  --interactive-fill-opacity: 0.14 !important;
  --interactive-fill-size: 100% !important;
  transform: translateX(-50%) !important;
  filter: none !important;
  box-shadow: none !important;
}

.community-me--figma .community-me__list-card {
  position: absolute !important;
  top: calc(256px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  width: calc(168px * var(--figma-stage-scale)) !important;
  min-height: calc(166px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: calc(8px * var(--figma-stage-scale)) !important;
  border: calc(1.5px * var(--figma-stage-scale)) solid #0068b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
}

.community-me--figma .community-me__list-photo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(96px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.4) !important;
  overflow: hidden !important;
}

.community-me--figma .community-me__list-photo > img.is-filled,
.community-me--figma .community-me__detail-photo > img.is-filled {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.community-me--figma .community-me__list-photo-icon,
.community-me--figma .community-me__detail-photo-icon,
.community-me--figma .community-me__list-photo-icon .community-placeholder__asset,
.community-me--figma .community-me__detail-photo-icon .community-placeholder__asset {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__list-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__list-date {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #e3e3e3 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.community-me--figma .community-me__list-like,
.community-me--figma .community-me__list-heart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.community-me--figma .community-me__list-heart svg {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__list-heart img {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.community-me--figma .community-me__list-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.community-me--figma .community-me__detail-card {
  position: absolute !important;
  top: calc(256px * var(--figma-stage-scale)) !important;
  left: calc(12px * var(--figma-stage-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  width: calc(350px * var(--figma-stage-scale)) !important;
  height: calc(486px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: calc(20px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border: calc(2px * var(--figma-stage-scale)) solid #0068b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  z-index: 6 !important;
  animation: none !important;
}

.community-me--figma.is-detail-entering .community-me__detail-card {
  animation: community-me-detail-card-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.community-me--figma.community-me--confirm .community-me__detail-card,
.community-me--figma.community-me--success .community-me__detail-card,
.community-me--figma.is-heart-updating .community-me__detail-card {
  animation-play-state: running !important;
}

@keyframes community-me-detail-card-in {
  0% {
    opacity: 0;
    transform: translateY(calc(12px * var(--figma-stage-scale))) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.community-me--figma.community-me--filled .community-me__name,
.community-me--figma.community-me--detail .community-me__name {
  top: calc(var(--safe-top) + (102px * var(--figma-stage-scale))) !important;
}

.community-me--figma.community-me--filled .community-me__points,
.community-me--figma.community-me--detail .community-me__points {
  top: calc(var(--safe-top) + (136px * var(--figma-stage-scale))) !important;
}

.community-me--figma.community-me--filled .community-me__section-title,
.community-me--figma.community-me--detail .community-me__section-title {
  top: calc(var(--safe-top) + (169px * var(--figma-stage-scale))) !important;
}

.community-me--figma.community-me--filled .community-me__list-card {
  top: calc(var(--safe-top) + (218px * var(--figma-stage-scale))) !important;
}

.community-me--figma.community-me--detail .community-me__list-card {
  visibility: hidden !important;
  pointer-events: none !important;
}

.community-me--figma.community-me--detail .community-me__detail-card {
  top: calc(var(--safe-top) + (218px * var(--figma-stage-scale))) !important;
}

.community-me--figma:not(.community-me--compose) .community-me__figma-container {
  position: absolute !important;
  top: calc(var(--safe-top) + (102px * var(--figma-stage-scale))) !important;
  left: 0 !important;
  width: var(--figma-stage-width) !important;
  height: calc(582px * var(--figma-stage-scale)) !important;
  min-height: calc(582px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.community-me--figma:not(.community-me--compose) .community-me__figma-container .community-me__name {
  top: 0 !important;
}

.community-me--figma:not(.community-me--compose) .community-me__figma-container .community-me__points {
  top: calc(34px * var(--figma-stage-scale)) !important;
}

.community-me--figma:not(.community-me--compose) .community-me__figma-container .community-me__section-title {
  top: calc(67px * var(--figma-stage-scale)) !important;
}

.community-me--figma:not(.community-me--compose) .community-me__figma-container .community-me__empty {
  top: calc(307px * var(--figma-stage-scale)) !important;
}

.community-me--figma:not(.community-me--compose) .community-me__figma-container .community-me__certify-button {
  top: calc(568px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
}

.community-me--figma:not(.community-me--compose) .community-me__figma-container .community-me__list-card,
.community-me--figma:not(.community-me--compose) .community-me__figma-container .community-me__detail-card {
  top: calc(116px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__detail-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: calc(334px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__detail-title-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__detail-title-row strong {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.community-me--figma .community-me__detail-title-row span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #e3e3e3 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.community-me--figma .community-me__detail-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(44px * var(--figma-stage-scale)) !important;
  min-width: calc(44px * var(--figma-stage-scale)) !important;
  height: calc(44px * var(--figma-stage-scale)) !important;
  min-height: calc(44px * var(--figma-stage-scale)) !important;
  margin:
    calc(-10px * var(--figma-stage-scale))
    calc(-10px * var(--figma-stage-scale))
    0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.community-me--figma .community-me__detail-close img {
  display: block !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__detail-photo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(270px * var(--figma-stage-scale)) !important;
  width: calc(334px * var(--figma-stage-scale)) !important;
  height: calc(270px * var(--figma-stage-scale)) !important;
  min-height: calc(270px * var(--figma-stage-scale)) !important;
  max-height: calc(270px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.4) !important;
  overflow: hidden !important;
}

.community-me--figma .community-me__detail-footer {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  width: calc(334px * var(--figma-stage-scale)) !important;
  min-height: calc(40px * var(--figma-stage-scale)) !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__detail-footer p {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__detail-reactions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__detail-like-count {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.community-me--figma .community-me__detail-like,
.community-me--figma .community-me__detail-heart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.community-me--figma .community-me__detail-heart svg {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__detail-heart img {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.community-me--figma .community-me__delete-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(52px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  max-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background-color: #f12b2b !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__modal-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.community-me--figma .community-me__delete-modal {
  width: calc(285px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 calc(4px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

.community-me--figma .community-me__delete-modal--confirm {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  min-height: calc(221px * var(--figma-stage-scale)) !important;
  padding-top: calc(36px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__delete-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  text-align: center !important;
}

.community-me--figma .community-me__delete-copy strong,
.community-me--figma .community-me__delete-modal--success strong {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.community-me--figma .community-me__delete-copy p {
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.community-me--figma .community-me__delete-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin-top: auto !important;
}

.community-me--figma .community-me__delete-action,
.community-me--figma .community-me__delete-success-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__delete-action--cancel {
  width: calc(142px * var(--figma-stage-scale)) !important;
  background-color: #f0f0f0 !important;
  color: #2a2a2b !important;
}

.community-me--figma .community-me__delete-action--confirm {
  width: calc(143px * var(--figma-stage-scale)) !important;
  background-color: #f12b2b !important;
  color: #ffffff !important;
}

.community-me--figma .community-me__delete-modal--success {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  height: calc(129px * var(--figma-stage-scale)) !important;
  padding-top: calc(36px * var(--figma-stage-scale)) !important;
}

.community-me--figma .community-me__delete-success-close {
  width: 100% !important;
  border-radius: 0 0 calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  background-color: #0068b7 !important;
  color: #ffffff !important;
}

.screen.community-me.community-me--compose {
  height: var(--device-height) !important;
  min-height: var(--device-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.community-me--compose .topbar {
  position: relative !important;
  z-index: 4 !important;
}

.community-me--compose .community-compose {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(16px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  min-height: calc(720px * var(--figma-stage-scale)) !important;
  padding:
    calc(72px * var(--figma-stage-scale))
    calc(16px * var(--figma-stage-scale))
    calc(128px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.community-compose__title,
.community-compose__lead,
.community-compose__requirement,
.community-compose__label,
.community-compose__count {
  margin: 0 !important;
}

.community-compose__title {
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.8px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.community-compose__lead {
  margin-top: calc(-8px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 400 !important;
  line-height: calc(18px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.48px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.community-compose__requirement {
  margin-top: calc(-10px * var(--figma-stage-scale)) !important;
  color: #ff0000 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.community-compose__field {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  width: 100% !important;
}

.community-compose__label {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.community-compose__input,
.community-compose__textarea {
  width: 100% !important;
  border: calc(1px * var(--figma-stage-scale)) solid #d9d9d9 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  color: #2a2a2b !important;
  font-family: inherit !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 400 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  outline: none !important;
}

.community-compose__input {
  height: calc(44px * var(--figma-stage-scale)) !important;
  padding: 0 calc(14px * var(--figma-stage-scale)) !important;
}

.community-compose__textarea-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.community-compose__textarea {
  display: block !important;
  min-height: calc(180px * var(--figma-stage-scale)) !important;
  padding:
    calc(12px * var(--figma-stage-scale))
    calc(14px * var(--figma-stage-scale))
    calc(32px * var(--figma-stage-scale)) !important;
  resize: none !important;
}

.community-compose__input:focus,
.community-compose__textarea:focus {
  border-color: #0068b7 !important;
  box-shadow: 0 0 0 calc(1px * var(--figma-stage-scale)) #0068b7 !important;
}

.community-compose__count {
  position: absolute !important;
  right: calc(14px * var(--figma-stage-scale)) !important;
  bottom: calc(10px * var(--figma-stage-scale)) !important;
  color: #b7b7b7 !important;
  font-size: calc(11px * var(--figma-stage-scale)) !important;
  font-weight: 400 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
}

.community-compose__upload {
  display: flex !important;
  align-items: flex-start !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
  width: calc(333px * var(--figma-stage-scale)) !important;
  max-width: calc(333px * var(--figma-stage-scale)) !important;
  margin-top: 0 !important;
}

.community-compose__upload-button,
.community-compose__preview {
  position: relative !important;
  flex: 0 0 calc(80px * var(--figma-stage-scale)) !important;
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.community-compose__upload-button {
  --inquiry-upload-fill-opacity: 0.08 !important;
  --inquiry-upload-fill-scale: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  overflow: hidden !important;
}

.community-compose__upload-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, var(--inquiry-upload-fill-opacity)) !important;
  transform: scaleX(var(--inquiry-upload-fill-scale)) !important;
  transform-origin: left center !important;
  transition:
    transform 180ms ease,
    opacity 220ms ease !important;
}

.community-compose__upload-button > * {
  position: relative !important;
  z-index: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .community-compose__upload-button:hover {
    --inquiry-upload-fill-scale: 1 !important;
  }
}

.community-compose__upload-button:active,
.community-compose__upload-button.is-pressing {
  --inquiry-upload-fill-opacity: 0.14 !important;
  --inquiry-upload-fill-scale: 1 !important;
}

.community-compose__upload-button img,
.community-compose__upload-placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important;
}

.community-compose__preview {
  background: #f0f0f0 !important;
  overflow: visible !important;
}

.community-compose__preview > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  object-fit: cover !important;
}

.community-compose__remove {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: calc(20px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  transform: translate(50%, -50%) !important;
  overflow: visible !important;
  z-index: 2 !important;
}

.community-compose__remove img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.community-compose__remove:active,
.community-compose__remove.is-pressing {
  transform: translate(50%, -50%) !important;
}

.community-compose__footer {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(24px * var(--figma-stage-scale)) !important;
  width: var(--figma-stage-width) !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

.community-compose__submit {
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

/* Community compose: mirror the 1:1 inquiry form surface; upload remains single-image only. */
.community-me--compose .community-compose {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding:
    calc(var(--safe-top) + 92px)
    0
    0 !important;
  box-sizing: border-box !important;
}

.community-me--compose .community-compose__title {
  width: calc(343px * var(--figma-stage-scale)) !important;
  max-width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #0068b7 !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.community-me--compose .community-compose__panel {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

.community-me--compose .community-compose__form.inquiry-screen__form {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  margin: calc(18px * var(--figma-stage-scale)) auto 0 !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.community-me--compose .community-compose__input.inquiry-field__control--input {
  width: 100% !important;
  height: calc(44px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  border: calc(1.5px * var(--figma-stage-scale)) solid #b7b7b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  outline: none !important;
  box-shadow: none !important;
}

.community-me--compose .community-compose__input.inquiry-field__control--input::placeholder {
  color: #8c8c8c !important;
  opacity: 1 !important;
}

.community-me--compose .community-compose__textarea.inquiry-field__textarea {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: calc(200px * var(--figma-stage-scale)) !important;
  padding: calc(16px * var(--figma-stage-scale)) calc(12px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.community-me--compose .community-compose__textarea.inquiry-field__textarea::placeholder {
  color: #8c8c8c !important;
  opacity: 1 !important;
}

.community-me--compose .community-compose__count.inquiry-field__count {
  position: static !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0 calc(4px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
}

.community-me--compose .community-compose__count.inquiry-field__count span {
  color: #2a2a2b !important;
}

.community-me--compose .community-compose__upload.inquiry-upload {
  display: flex !important;
  align-items: flex-start !important;
  align-self: center !important;
  width: calc(333px * var(--figma-stage-scale)) !important;
  max-width: calc(333px * var(--figma-stage-scale)) !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.community-me--compose .community-compose__upload-button.inquiry-upload__button,
.community-me--compose .community-compose__preview.inquiry-upload__thumb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: calc(80px * var(--figma-stage-scale)) !important;
  min-width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
  min-height: calc(80px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: transparent !important;
  overflow: hidden !important;
}

.community-me--compose .community-compose__preview.inquiry-upload__thumb {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.community-me--compose .community-compose__remove.inquiry-upload__thumb-remove {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(20px * var(--figma-stage-scale)) !important;
  min-width: calc(20px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
  min-height: calc(20px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translate(50%, -50%) !important;
  overflow: visible !important;
}

.community-me--compose .community-compose__remove.inquiry-upload__thumb-remove img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.community-me--compose .community-compose__footer {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 0 calc(38px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  transform: none !important;
  background: transparent !important;
  z-index: 4 !important;
}

.community-me--compose .community-compose__footer .cta {
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.community-me--compose .community-compose__notice {
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: calc(12px * var(--figma-stage-scale)) auto 0 !important;
  color: #f12b2b !important;
  font-size: calc(11px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(15px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.22px * var(--figma-stage-scale)) !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Best Photo: Figma-aligned mobile page for the community category */
.screen.best-photo-screen {
  --best-photo-topbar-gap: calc(36px * var(--figma-stage-scale));
  --best-photo-content-start: calc(var(--safe-top) + 32px + (30px * var(--figma-stage-scale)) + var(--best-photo-topbar-gap));
  --best-photo-content-delta: calc(var(--best-photo-content-start) - (140px * var(--figma-stage-scale)));
  --best-photo-card-enter-delay: 2950ms;
  --best-photo-media-enter-delay: 3350ms;
  --best-photo-image-burst-delay: 3350ms;
  --best-photo-burst-delay: 3840ms;
  --best-photo-glass-sweep-delay: 5140ms;
  --best-photo-bg-enter-duration: 900ms;
  --best-photo-spotlight-left-delay: 120ms;
  --best-photo-spotlight-left-duration: 3200ms;
  --best-photo-spotlight-right-delay: 420ms;
  --best-photo-spotlight-right-duration: 3000ms;
  --best-photo-hero-delay: 420ms;
  --best-photo-hero-duration: 540ms;
  --best-photo-title-delay: 2650ms;
  --best-photo-title-duration: 440ms;
  --best-photo-card-enter-duration: 760ms;
  --best-photo-card-halo-duration: 1080ms;
  --best-photo-card-halo-offset: 100ms;
  --best-photo-card-shine-duration: 820ms;
  --best-photo-card-shine-offset: 280ms;
  --best-photo-text-reveal-duration: 380ms;
  --best-photo-head-delay: 3270ms;
  --best-photo-copy-delay: 3430ms;
  --best-photo-media-enter-duration: 460ms;
  --best-photo-image-burst-duration: 1000ms;
  --best-photo-image-burst-ring-duration: 720ms;
  --best-photo-image-burst-ring-offset: 40ms;
  --best-photo-image-burst-rays-duration: 840ms;
  --best-photo-image-burst-rays-offset: 55ms;
  --best-photo-image-spark-duration: 1040ms;
  --best-photo-burst-shell-duration: 1220ms;
  --best-photo-burst-ring-duration: 760ms;
  --best-photo-burst-ring-offset: 20ms;
  --best-photo-burst-rays-duration: 840ms;
  --best-photo-burst-rays-offset: 25ms;
  --best-photo-spark-duration: 940ms;
  --best-photo-five-title-delay: 4470ms;
  --best-photo-five-item-duration: 480ms;
  --best-photo-five-item-1-delay: 5120ms;
  --best-photo-five-item-2-delay: 5190ms;
  --best-photo-five-item-3-delay: 5260ms;
  --best-photo-five-item-4-delay: 5330ms;
  --best-photo-five-item-5-delay: 5400ms;
  --best-photo-glass-sweep-duration: 940ms;
  --best-photo-glass-line-duration: 860ms;
  --best-photo-glass-line-offset: 50ms;
  --best-photo-pager-delay: 5760ms;
  --best-photo-pager-duration: 360ms;
  --best-photo-dot-duration: 320ms;
  --best-photo-dot-1-delay: 5800ms;
  --best-photo-dot-2-delay: 5845ms;
  --best-photo-dot-3-delay: 5890ms;
  --best-photo-dot-4-delay: 5935ms;
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  height: var(--device-height) !important;
  min-height: var(--device-height) !important;
  max-height: var(--device-height) !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  background: #001624 !important;
  color: #ffffff !important;
}

.screen.best-photo-screen.best-photo-screen--fast {
  --best-photo-card-enter-delay: 1710ms;
  --best-photo-media-enter-delay: 1940ms;
  --best-photo-image-burst-delay: 1940ms;
  --best-photo-burst-delay: 2230ms;
  --best-photo-glass-sweep-delay: 2980ms;
  --best-photo-bg-enter-duration: 520ms;
  --best-photo-spotlight-left-delay: 70ms;
  --best-photo-spotlight-left-duration: 1860ms;
  --best-photo-spotlight-right-delay: 245ms;
  --best-photo-spotlight-right-duration: 1740ms;
  --best-photo-hero-delay: 245ms;
  --best-photo-hero-duration: 315ms;
  --best-photo-title-delay: 1540ms;
  --best-photo-title-duration: 255ms;
  --best-photo-card-enter-duration: 440ms;
  --best-photo-card-halo-duration: 625ms;
  --best-photo-card-halo-offset: 60ms;
  --best-photo-card-shine-duration: 475ms;
  --best-photo-card-shine-offset: 160ms;
  --best-photo-text-reveal-duration: 220ms;
  --best-photo-head-delay: 1900ms;
  --best-photo-copy-delay: 1990ms;
  --best-photo-media-enter-duration: 270ms;
  --best-photo-image-burst-duration: 580ms;
  --best-photo-image-burst-ring-duration: 420ms;
  --best-photo-image-burst-ring-offset: 25ms;
  --best-photo-image-burst-rays-duration: 490ms;
  --best-photo-image-burst-rays-offset: 32ms;
  --best-photo-image-spark-duration: 605ms;
  --best-photo-burst-shell-duration: 710ms;
  --best-photo-burst-ring-duration: 440ms;
  --best-photo-burst-ring-offset: 12ms;
  --best-photo-burst-rays-duration: 490ms;
  --best-photo-burst-rays-offset: 15ms;
  --best-photo-spark-duration: 545ms;
  --best-photo-five-title-delay: 2595ms;
  --best-photo-five-item-duration: 280ms;
  --best-photo-five-item-1-delay: 2970ms;
  --best-photo-five-item-2-delay: 3010ms;
  --best-photo-five-item-3-delay: 3050ms;
  --best-photo-five-item-4-delay: 3090ms;
  --best-photo-five-item-5-delay: 3130ms;
  --best-photo-glass-sweep-duration: 545ms;
  --best-photo-glass-line-duration: 500ms;
  --best-photo-glass-line-offset: 30ms;
  --best-photo-pager-delay: 3340ms;
  --best-photo-pager-duration: 210ms;
  --best-photo-dot-duration: 185ms;
  --best-photo-dot-1-delay: 3365ms;
  --best-photo-dot-2-delay: 3390ms;
  --best-photo-dot-3-delay: 3415ms;
  --best-photo-dot-4-delay: 3440ms;
}

.best-photo-screen__canvas {
  position: relative !important;
  width: 100% !important;
  min-height: calc((1047px * var(--figma-stage-scale)) + var(--best-photo-content-delta)) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.best-photo-screen__canvas::before,
.best-photo-screen__canvas::after {
  position: absolute !important;
  top: calc(-220px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: calc(210px * var(--figma-stage-scale)) !important;
  height: calc(820px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
  content: "" !important;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%) !important;
  opacity: 0;
  transform-origin: 50% 0 !important;
  mix-blend-mode: screen !important;
  filter: blur(calc(0.6px * var(--figma-stage-scale))) !important;
  will-change: transform, opacity, filter !important;
}

.best-photo-screen__canvas::before {
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.24) 13%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 14%, rgba(0, 180, 237, 0.22) 48%, rgba(0, 180, 237, 0) 88%) !important;
  animation: best-photo-spotlight-left var(--best-photo-spotlight-left-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--best-photo-spotlight-left-delay) both !important;
}

.best-photo-screen__canvas::after {
  width: calc(190px * var(--figma-stage-scale)) !important;
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.88), rgba(250, 190, 0, 0.22) 15%, rgba(255, 255, 255, 0) 29%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 190, 0, 0.28) 18%, rgba(255, 255, 255, 0.2) 46%, rgba(255, 255, 255, 0) 86%) !important;
  animation: best-photo-spotlight-right var(--best-photo-spotlight-right-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--best-photo-spotlight-right-delay) both !important;
}

.best-photo-screen__bg,
.best-photo-screen__bg img {
  position: absolute !important;
  pointer-events: none !important;
  user-select: none !important;
}

.best-photo-screen__bg {
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.best-photo-screen__bg img {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  animation: best-photo-bg-enter var(--best-photo-bg-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: transform, opacity, filter !important;
}

.screen.best-photo-screen .topbar,
.screen.best-photo-screen .topbar.is-dark {
  position: absolute !important;
  z-index: 5 !important;
  top: calc(var(--safe-top) + 32px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding-left: calc(16px * var(--figma-stage-scale)) !important;
  padding-right: calc(16px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.best-photo-hero,
.best-photo-winner,
.best-photo-five,
.best-photo-pager,
.best-photo-nav {
  position: absolute !important;
  z-index: 2 !important;
}

.best-photo-hero {
  top: var(--best-photo-content-start) !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 calc(40px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  transform: none !important;
  text-align: center !important;
  opacity: 0;
  animation: best-photo-hero-fade var(--best-photo-hero-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--best-photo-hero-delay) both !important;
  will-change: opacity !important;
}

.best-photo-hero h1,
.best-photo-hero p,
.best-photo-winner h2,
.best-photo-five h2,
.best-photo-card__copy {
  margin: 0 !important;
}

.best-photo-hero h1 {
  color: #ffffff !important;
  width: 100% !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.best-photo-hero p {
  margin-top: calc(4px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  color: #e3e3e3 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.best-photo-winner {
  top: calc((243px * var(--figma-stage-scale)) + var(--best-photo-content-delta)) !important;
  left: calc(10px * var(--figma-stage-scale)) !important;
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: calc(354px * var(--figma-stage-scale)) !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  overflow: visible !important;
}

.best-photo-winner h2,
.best-photo-five h2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(6px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  color: #ffffff !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  white-space: nowrap !important;
  opacity: 0;
  animation: best-photo-title-reveal var(--best-photo-title-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--best-photo-title-delay) both !important;
  will-change: transform, opacity, clip-path !important;
}

.best-photo-five h2 {
  animation-delay: var(--best-photo-five-title-delay) !important;
}

.best-photo-emoji {
  display: inline-block !important;
  object-fit: contain !important;
  vertical-align: text-bottom !important;
}

.best-photo-winner h2 .best-photo-emoji,
.best-photo-five h2 .best-photo-emoji {
  flex: 0 0 calc(24px * var(--figma-stage-scale)) !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.best-photo-card__copy .best-photo-emoji {
  width: calc(14px * var(--figma-stage-scale)) !important;
  height: calc(14px * var(--figma-stage-scale)) !important;
  margin-left: calc(2px * var(--figma-stage-scale)) !important;
  transform: translateY(calc(2px * var(--figma-stage-scale))) !important;
}

.best-photo-party {
  position: relative !important;
  display: inline-block !important;
  width: calc(14px * var(--figma-stage-scale)) !important;
  height: calc(14px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(14px * var(--figma-stage-scale)) !important;
}

.best-photo-party::before,
.best-photo-party::after {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: calc(14px * var(--figma-stage-scale)) !important;
  height: calc(3px * var(--figma-stage-scale)) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #00b4ed, #ffffff 45%, #fabE00) !important;
  content: "" !important;
  transform: translate(-50%, -50%) rotate(35deg) !important;
}

.best-photo-party::after {
  width: calc(10px * var(--figma-stage-scale)) !important;
  background: linear-gradient(90deg, #ffffff, #00b4ed) !important;
  transform: translate(-50%, -50%) rotate(-42deg) !important;
}

.best-photo-card {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: calc(406px * var(--figma-stage-scale)) !important;
  min-height: calc(406px * var(--figma-stage-scale)) !important;
  padding:
    calc(20px * var(--figma-stage-scale))
    calc(8px * var(--figma-stage-scale))
    calc(16px * var(--figma-stage-scale)) !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  border: calc(2px * var(--figma-stage-scale)) solid #0068b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
  transform-origin: 50% 54% !important;
  animation: best-photo-card-pop var(--best-photo-card-enter-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--best-photo-card-enter-delay) both !important;
  will-change: transform, opacity, filter !important;
}

.best-photo-card__head,
.best-photo-card__copy {
  opacity: 0;
  animation: best-photo-text-reveal var(--best-photo-text-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: transform, opacity, clip-path !important;
}

.best-photo-card__head {
  overflow: visible !important;
  clip-path: none !important;
  animation-name: best-photo-head-reveal !important;
  will-change: transform, opacity !important;
}

.best-photo-card__image {
  opacity: 0;
  animation: best-photo-media-rise var(--best-photo-media-enter-duration) cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity, filter !important;
}

.best-photo-card__head {
  animation-delay: var(--best-photo-head-delay) !important;
}

.best-photo-card__image {
  animation-delay: var(--best-photo-media-enter-delay) !important;
}

.best-photo-card__copy {
  animation-delay: var(--best-photo-copy-delay) !important;
}

.best-photo-card > * {
  position: relative !important;
  z-index: 2 !important;
}

.best-photo-card::before,
.best-photo-card::after {
  position: absolute !important;
  pointer-events: none !important;
  content: "" !important;
}

.best-photo-card::before {
  inset: calc(-16px * var(--figma-stage-scale)) !important;
  z-index: -1 !important;
  border-radius: calc(18px * var(--figma-stage-scale)) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 18% 50%, rgba(250, 190, 0, 0.52), rgba(250, 190, 0, 0) 39%),
    radial-gradient(circle at 84% 46%, rgba(0, 180, 237, 0.56), rgba(0, 180, 237, 0) 42%) !important;
  filter: blur(calc(3px * var(--figma-stage-scale))) !important;
  opacity: 0;
  animation: best-photo-card-halo var(--best-photo-card-halo-duration) cubic-bezier(0.16, 1, 0.3, 1) calc(var(--best-photo-card-enter-delay) + var(--best-photo-card-halo-offset)) both !important;
}

.best-photo-card::after {
  top: 0 !important;
  bottom: 0 !important;
  left: calc(-46px * var(--figma-stage-scale)) !important;
  z-index: 3 !important;
  width: calc(42px * var(--figma-stage-scale)) !important;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0)) !important;
  mix-blend-mode: screen !important;
  opacity: 0;
  transform: skewX(-14deg) !important;
  animation: best-photo-card-shine var(--best-photo-card-shine-duration) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--best-photo-card-enter-delay) + var(--best-photo-card-shine-offset)) both !important;
}

.best-photo-celebration {
  position: absolute !important;
  top: calc(218px * var(--figma-stage-scale)) !important;
  z-index: 5 !important;
  display: block !important;
  width: calc(214px * var(--figma-stage-scale)) !important;
  height: calc(214px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translateY(calc(8px * var(--figma-stage-scale))) scale(0.72);
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.62));
  mix-blend-mode: screen !important;
  animation: best-photo-burst-shell var(--best-photo-burst-shell-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--best-photo-burst-delay) both !important;
  will-change: transform, opacity, filter !important;
}

.best-photo-celebration--left {
  left: calc(-92px * var(--figma-stage-scale)) !important;
}

.best-photo-celebration--right {
  right: calc(-92px * var(--figma-stage-scale)) !important;
}

.best-photo-celebration::before,
.best-photo-celebration::after {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: calc(154px * var(--figma-stage-scale)) !important;
  height: calc(154px * var(--figma-stage-scale)) !important;
  border-radius: 50% !important;
  content: "" !important;
  transform: translate(-50%, -50%) scale(0.16);
  opacity: 0;
}

.best-photo-celebration::before {
  border: calc(2px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 0 calc(18px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.75),
    inset 0 0 calc(18px * var(--figma-stage-scale)) rgba(0, 180, 237, 0.35) !important;
  animation: best-photo-burst-ring var(--best-photo-burst-ring-duration) cubic-bezier(0.16, 1, 0.3, 1) calc(var(--best-photo-burst-delay) + var(--best-photo-burst-ring-offset)) both !important;
}

.best-photo-celebration::after {
  background:
    conic-gradient(from 12deg, rgba(255, 255, 255, 0) 0 8deg, rgba(255, 255, 255, 0.94) 8deg 13deg, rgba(255, 255, 255, 0) 13deg 44deg, rgba(250, 190, 0, 0.9) 44deg 50deg, rgba(255, 255, 255, 0) 50deg 88deg, rgba(0, 180, 237, 0.94) 88deg 94deg, rgba(255, 255, 255, 0) 94deg 150deg, rgba(223, 0, 46, 0.9) 150deg 157deg, rgba(255, 255, 255, 0) 157deg 216deg, rgba(255, 255, 255, 0.84) 216deg 222deg, rgba(255, 255, 255, 0) 222deg 360deg) !important;
  filter: blur(calc(0.35px * var(--figma-stage-scale))) !important;
  animation: best-photo-burst-rays var(--best-photo-burst-rays-duration) cubic-bezier(0.16, 1, 0.3, 1) calc(var(--best-photo-burst-delay) + var(--best-photo-burst-rays-offset)) both !important;
}

.best-photo-celebration i {
  --spark-x: 0px;
  --spark-y: 0px;
  --spark-size: calc(6px * var(--figma-stage-scale));
  --spark-width: var(--spark-size);
  --spark-height: var(--spark-size);
  --spark-color: #ffffff;
  --spark-rotate: 0deg;
  --spark-spin: 240deg;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: var(--spark-width) !important;
  height: var(--spark-height) !important;
  border-radius: 999px !important;
  background: var(--spark-color) !important;
  box-shadow:
    0 0 calc(6px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.72),
    0 calc(1px * var(--figma-stage-scale)) calc(2px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.16) !important;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--spark-rotate)) scale(0.1);
  animation: best-photo-spark-pop var(--best-photo-spark-duration) cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity !important;
}

.best-photo-celebration i:nth-child(4n + 2) {
  --spark-width: calc(15px * var(--figma-stage-scale));
  --spark-height: calc(3px * var(--figma-stage-scale));
  border-radius: 999px !important;
}

.best-photo-celebration i:nth-child(4n + 3) {
  --spark-width: calc(7px * var(--figma-stage-scale));
  --spark-height: calc(7px * var(--figma-stage-scale));
  border-radius: calc(2px * var(--figma-stage-scale)) !important;
}

.best-photo-celebration i:nth-child(4n) {
  --spark-width: calc(3px * var(--figma-stage-scale));
  --spark-height: calc(3px * var(--figma-stage-scale));
  box-shadow:
    0 0 calc(8px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.9),
    0 0 calc(14px * var(--figma-stage-scale)) currentColor !important;
}

.best-photo-celebration i:nth-child(1) { --spark-x: calc(-64px * var(--figma-stage-scale)); --spark-y: calc(-48px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(6px * var(--figma-stage-scale)); animation-delay: var(--best-photo-burst-delay) !important; }
.best-photo-celebration i:nth-child(2) { --spark-x: calc(-28px * var(--figma-stage-scale)); --spark-y: calc(-72px * var(--figma-stage-scale)); --spark-color: #fabe00; --spark-size: calc(8px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 25ms) !important; }
.best-photo-celebration i:nth-child(3) { --spark-x: calc(22px * var(--figma-stage-scale)); --spark-y: calc(-66px * var(--figma-stage-scale)); --spark-color: #00b4ed; --spark-size: calc(6px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 50ms) !important; }
.best-photo-celebration i:nth-child(4) { --spark-x: calc(62px * var(--figma-stage-scale)); --spark-y: calc(-42px * var(--figma-stage-scale)); --spark-color: #df002e; --spark-size: calc(7px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 75ms) !important; }
.best-photo-celebration i:nth-child(5) { --spark-x: calc(72px * var(--figma-stage-scale)); --spark-y: calc(8px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(5px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 100ms) !important; }
.best-photo-celebration i:nth-child(6) { --spark-x: calc(48px * var(--figma-stage-scale)); --spark-y: calc(54px * var(--figma-stage-scale)); --spark-color: #fabe00; --spark-size: calc(7px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 125ms) !important; }
.best-photo-celebration i:nth-child(7) { --spark-x: calc(2px * var(--figma-stage-scale)); --spark-y: calc(76px * var(--figma-stage-scale)); --spark-color: #00b4ed; --spark-size: calc(8px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 150ms) !important; }
.best-photo-celebration i:nth-child(8) { --spark-x: calc(-48px * var(--figma-stage-scale)); --spark-y: calc(56px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(5px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 175ms) !important; }
.best-photo-celebration i:nth-child(9) { --spark-x: calc(-76px * var(--figma-stage-scale)); --spark-y: calc(12px * var(--figma-stage-scale)); --spark-color: #df002e; --spark-size: calc(7px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 200ms) !important; }
.best-photo-celebration i:nth-child(10) { --spark-x: calc(-16px * var(--figma-stage-scale)); --spark-y: calc(-22px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(4px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 40ms) !important; }
.best-photo-celebration i:nth-child(11) { --spark-x: calc(28px * var(--figma-stage-scale)); --spark-y: calc(22px * var(--figma-stage-scale)); --spark-color: #fabe00; --spark-size: calc(5px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 70ms) !important; }
.best-photo-celebration i:nth-child(12) { --spark-x: calc(-32px * var(--figma-stage-scale)); --spark-y: calc(26px * var(--figma-stage-scale)); --spark-color: #00b4ed; --spark-size: calc(5px * var(--figma-stage-scale)); animation-delay: calc(var(--best-photo-burst-delay) + 100ms) !important; }
.best-photo-celebration i:nth-child(13) { --spark-x: calc(-104px * var(--figma-stage-scale)); --spark-y: calc(-18px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(4px * var(--figma-stage-scale)); --spark-rotate: 18deg; --spark-spin: 300deg; animation-delay: calc(var(--best-photo-burst-delay) + 12ms) !important; }
.best-photo-celebration i:nth-child(14) { --spark-x: calc(-86px * var(--figma-stage-scale)); --spark-y: calc(-82px * var(--figma-stage-scale)); --spark-color: #00b4ed; --spark-size: calc(5px * var(--figma-stage-scale)); --spark-rotate: -22deg; --spark-spin: -260deg; animation-delay: calc(var(--best-photo-burst-delay) + 65ms) !important; }
.best-photo-celebration i:nth-child(15) { --spark-x: calc(-10px * var(--figma-stage-scale)); --spark-y: calc(-104px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(4px * var(--figma-stage-scale)); --spark-rotate: 48deg; --spark-spin: 380deg; animation-delay: calc(var(--best-photo-burst-delay) + 35ms) !important; }
.best-photo-celebration i:nth-child(16) { --spark-x: calc(78px * var(--figma-stage-scale)); --spark-y: calc(-86px * var(--figma-stage-scale)); --spark-color: #fabe00; --spark-size: calc(6px * var(--figma-stage-scale)); --spark-rotate: -60deg; --spark-spin: -320deg; animation-delay: calc(var(--best-photo-burst-delay) + 118ms) !important; }
.best-photo-celebration i:nth-child(17) { --spark-x: calc(108px * var(--figma-stage-scale)); --spark-y: calc(-16px * var(--figma-stage-scale)); --spark-color: #df002e; --spark-size: calc(5px * var(--figma-stage-scale)); --spark-rotate: 12deg; --spark-spin: 260deg; animation-delay: calc(var(--best-photo-burst-delay) + 145ms) !important; }
.best-photo-celebration i:nth-child(18) { --spark-x: calc(94px * var(--figma-stage-scale)); --spark-y: calc(58px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(4px * var(--figma-stage-scale)); --spark-rotate: 34deg; --spark-spin: 300deg; animation-delay: calc(var(--best-photo-burst-delay) + 190ms) !important; }
.best-photo-celebration i:nth-child(19) { --spark-x: calc(34px * var(--figma-stage-scale)); --spark-y: calc(106px * var(--figma-stage-scale)); --spark-color: #00b4ed; --spark-size: calc(5px * var(--figma-stage-scale)); --spark-rotate: -28deg; --spark-spin: -300deg; animation-delay: calc(var(--best-photo-burst-delay) + 155ms) !important; }
.best-photo-celebration i:nth-child(20) { --spark-x: calc(-54px * var(--figma-stage-scale)); --spark-y: calc(96px * var(--figma-stage-scale)); --spark-color: #fabe00; --spark-size: calc(4px * var(--figma-stage-scale)); --spark-rotate: 72deg; --spark-spin: 360deg; animation-delay: calc(var(--best-photo-burst-delay) + 210ms) !important; }
.best-photo-celebration i:nth-child(21) { --spark-x: calc(-118px * var(--figma-stage-scale)); --spark-y: calc(34px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(3px * var(--figma-stage-scale)); --spark-rotate: -8deg; --spark-spin: 240deg; animation-delay: calc(var(--best-photo-burst-delay) + 245ms) !important; }
.best-photo-celebration i:nth-child(22) { --spark-x: calc(-72px * var(--figma-stage-scale)); --spark-y: calc(10px * var(--figma-stage-scale)); --spark-color: #00b4ed; --spark-size: calc(4px * var(--figma-stage-scale)); --spark-rotate: 8deg; --spark-spin: -220deg; animation-delay: calc(var(--best-photo-burst-delay) + 85ms) !important; }
.best-photo-celebration i:nth-child(23) { --spark-x: calc(-38px * var(--figma-stage-scale)); --spark-y: calc(-46px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(3px * var(--figma-stage-scale)); --spark-rotate: 36deg; --spark-spin: 310deg; animation-delay: calc(var(--best-photo-burst-delay) + 128ms) !important; }
.best-photo-celebration i:nth-child(24) { --spark-x: calc(20px * var(--figma-stage-scale)); --spark-y: calc(-54px * var(--figma-stage-scale)); --spark-color: #fabe00; --spark-size: calc(4px * var(--figma-stage-scale)); --spark-rotate: -44deg; --spark-spin: -280deg; animation-delay: calc(var(--best-photo-burst-delay) + 168ms) !important; }
.best-photo-celebration i:nth-child(25) { --spark-x: calc(62px * var(--figma-stage-scale)); --spark-y: calc(-18px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(3px * var(--figma-stage-scale)); --spark-rotate: 16deg; --spark-spin: 240deg; animation-delay: calc(var(--best-photo-burst-delay) + 205ms) !important; }
.best-photo-celebration i:nth-child(26) { --spark-x: calc(58px * var(--figma-stage-scale)); --spark-y: calc(32px * var(--figma-stage-scale)); --spark-color: #df002e; --spark-size: calc(4px * var(--figma-stage-scale)); --spark-rotate: -12deg; --spark-spin: 260deg; animation-delay: calc(var(--best-photo-burst-delay) + 250ms) !important; }
.best-photo-celebration i:nth-child(27) { --spark-x: calc(4px * var(--figma-stage-scale)); --spark-y: calc(48px * var(--figma-stage-scale)); --spark-color: #00b4ed; --spark-size: calc(3px * var(--figma-stage-scale)); --spark-rotate: 38deg; --spark-spin: -260deg; animation-delay: calc(var(--best-photo-burst-delay) + 285ms) !important; }
.best-photo-celebration i:nth-child(28) { --spark-x: calc(-42px * var(--figma-stage-scale)); --spark-y: calc(36px * var(--figma-stage-scale)); --spark-color: #ffffff; --spark-size: calc(3px * var(--figma-stage-scale)); --spark-rotate: -34deg; --spark-spin: 300deg; animation-delay: calc(var(--best-photo-burst-delay) + 310ms) !important; }

.best-photo-celebration--right i:nth-child(1) { --spark-x: calc(64px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(2) { --spark-x: calc(28px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(3) { --spark-x: calc(-22px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(4) { --spark-x: calc(-62px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(5) { --spark-x: calc(-72px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(6) { --spark-x: calc(-48px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(7) { --spark-x: calc(-2px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(8) { --spark-x: calc(48px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(9) { --spark-x: calc(76px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(10) { --spark-x: calc(16px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(11) { --spark-x: calc(-28px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(12) { --spark-x: calc(32px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(13) { --spark-x: calc(104px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(14) { --spark-x: calc(86px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(15) { --spark-x: calc(10px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(16) { --spark-x: calc(-78px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(17) { --spark-x: calc(-108px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(18) { --spark-x: calc(-94px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(19) { --spark-x: calc(-34px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(20) { --spark-x: calc(54px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(21) { --spark-x: calc(118px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(22) { --spark-x: calc(72px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(23) { --spark-x: calc(38px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(24) { --spark-x: calc(-20px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(25) { --spark-x: calc(-62px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(26) { --spark-x: calc(-58px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(27) { --spark-x: calc(-4px * var(--figma-stage-scale)); }
.best-photo-celebration--right i:nth-child(28) { --spark-x: calc(42px * var(--figma-stage-scale)); }

.best-photo-card__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.best-photo-card__head strong {
  display: block !important;
  min-width: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
}

.best-photo-card__likes {
  position: relative !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  overflow: visible !important;
}

.best-photo-card__like-count {
  display: inline-block !important;
  min-width: calc(39px * var(--figma-stage-scale)) !important;
  text-align: right !important;
}

.best-photo-card__like-button {
  position: relative !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(32px * var(--figma-stage-scale)) !important;
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}

.best-photo-card__like-button:focus-visible {
  outline: calc(2px * var(--figma-stage-scale)) solid rgba(0, 104, 183, 0.45) !important;
  outline-offset: calc(2px * var(--figma-stage-scale)) !important;
}

.best-photo-card__heart,
.best-photo-card__heart svg,
.best-photo-card__heart img {
  display: block !important;
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.best-photo-card__image {
  position: relative !important;
  display: flex !important;
  flex: 0 0 calc(270px * var(--figma-stage-scale)) !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(334px * var(--figma-stage-scale)) !important;
  height: calc(270px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.4) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.best-photo-card__image::before,
.best-photo-card__image::after {
  position: absolute !important;
  top: calc(-58px * var(--figma-stage-scale)) !important;
  bottom: calc(-58px * var(--figma-stage-scale)) !important;
  z-index: 4 !important;
  display: block !important;
  pointer-events: none !important;
  content: "" !important;
  opacity: 0;
  transform-origin: 50% 50% !important;
  mix-blend-mode: screen !important;
  will-change: transform, opacity, filter !important;
}

.best-photo-card__image::before {
  left: calc(-150px * var(--figma-stage-scale)) !important;
  width: calc(86px * var(--figma-stage-scale)) !important;
  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.12) 23%,
      rgba(255, 255, 255, 0.72) 48%,
      rgba(166, 230, 255, 0.34) 57%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
  filter: blur(calc(1.1px * var(--figma-stage-scale))) brightness(1.2) !important;
  animation: best-photo-glass-sweep var(--best-photo-glass-sweep-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--best-photo-glass-sweep-delay) both !important;
}

.best-photo-card__image::after {
  left: calc(-98px * var(--figma-stage-scale)) !important;
  width: calc(14px * var(--figma-stage-scale)) !important;
  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.94) 44%,
      rgba(255, 255, 255, 0.18) 58%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
  filter:
    blur(calc(0.35px * var(--figma-stage-scale)))
    drop-shadow(0 0 calc(7px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.82)) !important;
  animation: best-photo-glass-line var(--best-photo-glass-line-duration) cubic-bezier(0.16, 1, 0.3, 1) calc(var(--best-photo-glass-sweep-delay) + var(--best-photo-glass-line-offset)) both !important;
}

.best-photo-card__visual,
.best-photo-five__visual {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.best-photo-image-burst {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0;
  mix-blend-mode: screen !important;
  animation: best-photo-image-burst-shell var(--best-photo-image-burst-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--best-photo-image-burst-delay) both !important;
  will-change: opacity, filter !important;
}

.best-photo-image-burst::before,
.best-photo-image-burst::after {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: calc(164px * var(--figma-stage-scale)) !important;
  height: calc(164px * var(--figma-stage-scale)) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  content: "" !important;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.12);
}

.best-photo-image-burst::before {
  border: calc(2px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 0 calc(20px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.78),
    inset 0 0 calc(16px * var(--figma-stage-scale)) rgba(0, 180, 237, 0.42) !important;
  animation: best-photo-image-burst-ring var(--best-photo-image-burst-ring-duration) cubic-bezier(0.16, 1, 0.3, 1) calc(var(--best-photo-image-burst-delay) + var(--best-photo-image-burst-ring-offset)) both !important;
}

.best-photo-image-burst::after {
  background:
    conic-gradient(from -8deg, rgba(255, 255, 255, 0) 0 10deg, rgba(255, 255, 255, 0.9) 10deg 15deg, rgba(255, 255, 255, 0) 15deg 36deg, rgba(250, 190, 0, 0.86) 36deg 42deg, rgba(255, 255, 255, 0) 42deg 74deg, rgba(0, 180, 237, 0.9) 74deg 81deg, rgba(255, 255, 255, 0) 81deg 128deg, rgba(223, 0, 46, 0.82) 128deg 135deg, rgba(255, 255, 255, 0) 135deg 184deg, rgba(255, 255, 255, 0.86) 184deg 190deg, rgba(255, 255, 255, 0) 190deg 242deg, rgba(0, 180, 237, 0.78) 242deg 248deg, rgba(255, 255, 255, 0) 248deg 306deg, rgba(250, 190, 0, 0.78) 306deg 313deg, rgba(255, 255, 255, 0) 313deg 360deg) !important;
  filter: blur(calc(0.25px * var(--figma-stage-scale))) !important;
  animation: best-photo-image-burst-rays var(--best-photo-image-burst-rays-duration) cubic-bezier(0.16, 1, 0.3, 1) calc(var(--best-photo-image-burst-delay) + var(--best-photo-image-burst-rays-offset)) both !important;
}

.best-photo-image-burst i {
  --image-spark-x: 0px;
  --image-spark-y: 0px;
  --image-spark-size: calc(5px * var(--figma-stage-scale));
  --image-spark-width: var(--image-spark-size);
  --image-spark-height: var(--image-spark-size);
  --image-spark-color: #ffffff;
  --image-spark-rotate: 0deg;
  --image-spark-spin: 240deg;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: var(--image-spark-width) !important;
  height: var(--image-spark-height) !important;
  border-radius: 999px !important;
  background: var(--image-spark-color) !important;
  box-shadow:
    0 0 calc(8px * var(--figma-stage-scale)) rgba(255, 255, 255, 0.8),
    0 calc(1px * var(--figma-stage-scale)) calc(2px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.18) !important;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--image-spark-rotate)) scale(0.08);
  animation: best-photo-image-spark var(--best-photo-image-spark-duration) cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity !important;
}

.best-photo-image-burst i:nth-child(3n + 1) {
  border-radius: calc(2px * var(--figma-stage-scale)) !important;
}

.best-photo-image-burst i:nth-child(3n + 2) {
  --image-spark-width: calc(13px * var(--figma-stage-scale));
  --image-spark-height: calc(3px * var(--figma-stage-scale));
}

.best-photo-image-burst i:nth-child(3n) {
  --image-spark-width: calc(3px * var(--figma-stage-scale));
  --image-spark-height: calc(3px * var(--figma-stage-scale));
}

.best-photo-image-burst i:nth-child(1) { --image-spark-x: calc(-118px * var(--figma-stage-scale)); --image-spark-y: calc(-6px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(5px * var(--figma-stage-scale)); --image-spark-rotate: -4deg; animation-delay: var(--best-photo-image-burst-delay) !important; }
.best-photo-image-burst i:nth-child(2) { --image-spark-x: calc(-104px * var(--figma-stage-scale)); --image-spark-y: calc(-58px * var(--figma-stage-scale)); --image-spark-color: #00b4ed; --image-spark-size: calc(5px * var(--figma-stage-scale)); --image-spark-rotate: 24deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 26ms) !important; }
.best-photo-image-burst i:nth-child(3) { --image-spark-x: calc(-68px * var(--figma-stage-scale)); --image-spark-y: calc(-92px * var(--figma-stage-scale)); --image-spark-color: #fabe00; --image-spark-size: calc(4px * var(--figma-stage-scale)); --image-spark-rotate: -48deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 52ms) !important; }
.best-photo-image-burst i:nth-child(4) { --image-spark-x: calc(-20px * var(--figma-stage-scale)); --image-spark-y: calc(-112px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(5px * var(--figma-stage-scale)); --image-spark-rotate: 54deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 78ms) !important; }
.best-photo-image-burst i:nth-child(5) { --image-spark-x: calc(36px * var(--figma-stage-scale)); --image-spark-y: calc(-106px * var(--figma-stage-scale)); --image-spark-color: #df002e; --image-spark-size: calc(5px * var(--figma-stage-scale)); --image-spark-rotate: -34deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 104ms) !important; }
.best-photo-image-burst i:nth-child(6) { --image-spark-x: calc(88px * var(--figma-stage-scale)); --image-spark-y: calc(-74px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(4px * var(--figma-stage-scale)); --image-spark-rotate: 40deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 130ms) !important; }
.best-photo-image-burst i:nth-child(7) { --image-spark-x: calc(124px * var(--figma-stage-scale)); --image-spark-y: calc(-20px * var(--figma-stage-scale)); --image-spark-color: #00b4ed; --image-spark-size: calc(6px * var(--figma-stage-scale)); --image-spark-rotate: -18deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 156ms) !important; }
.best-photo-image-burst i:nth-child(8) { --image-spark-x: calc(120px * var(--figma-stage-scale)); --image-spark-y: calc(38px * var(--figma-stage-scale)); --image-spark-color: #fabe00; --image-spark-size: calc(5px * var(--figma-stage-scale)); --image-spark-rotate: 18deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 182ms) !important; }
.best-photo-image-burst i:nth-child(9) { --image-spark-x: calc(80px * var(--figma-stage-scale)); --image-spark-y: calc(86px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(4px * var(--figma-stage-scale)); --image-spark-rotate: -58deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 208ms) !important; }
.best-photo-image-burst i:nth-child(10) { --image-spark-x: calc(22px * var(--figma-stage-scale)); --image-spark-y: calc(116px * var(--figma-stage-scale)); --image-spark-color: #df002e; --image-spark-size: calc(5px * var(--figma-stage-scale)); --image-spark-rotate: 52deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 234ms) !important; }
.best-photo-image-burst i:nth-child(11) { --image-spark-x: calc(-36px * var(--figma-stage-scale)); --image-spark-y: calc(108px * var(--figma-stage-scale)); --image-spark-color: #00b4ed; --image-spark-size: calc(5px * var(--figma-stage-scale)); --image-spark-rotate: -28deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 260ms) !important; }
.best-photo-image-burst i:nth-child(12) { --image-spark-x: calc(-86px * var(--figma-stage-scale)); --image-spark-y: calc(72px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(4px * var(--figma-stage-scale)); --image-spark-rotate: 26deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 286ms) !important; }
.best-photo-image-burst i:nth-child(13) { --image-spark-x: calc(-126px * var(--figma-stage-scale)); --image-spark-y: calc(22px * var(--figma-stage-scale)); --image-spark-color: #fabe00; --image-spark-size: calc(4px * var(--figma-stage-scale)); --image-spark-rotate: -12deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 312ms) !important; }
.best-photo-image-burst i:nth-child(14) { --image-spark-x: calc(-70px * var(--figma-stage-scale)); --image-spark-y: calc(-20px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 72deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 70ms) !important; }
.best-photo-image-burst i:nth-child(15) { --image-spark-x: calc(-34px * var(--figma-stage-scale)); --image-spark-y: calc(-52px * var(--figma-stage-scale)); --image-spark-color: #00b4ed; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: -36deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 98ms) !important; }
.best-photo-image-burst i:nth-child(16) { --image-spark-x: calc(18px * var(--figma-stage-scale)); --image-spark-y: calc(-62px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(4px * var(--figma-stage-scale)); --image-spark-rotate: 18deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 126ms) !important; }
.best-photo-image-burst i:nth-child(17) { --image-spark-x: calc(60px * var(--figma-stage-scale)); --image-spark-y: calc(-30px * var(--figma-stage-scale)); --image-spark-color: #fabe00; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: -70deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 154ms) !important; }
.best-photo-image-burst i:nth-child(18) { --image-spark-x: calc(72px * var(--figma-stage-scale)); --image-spark-y: calc(18px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 34deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 182ms) !important; }
.best-photo-image-burst i:nth-child(19) { --image-spark-x: calc(38px * var(--figma-stage-scale)); --image-spark-y: calc(54px * var(--figma-stage-scale)); --image-spark-color: #00b4ed; --image-spark-size: calc(4px * var(--figma-stage-scale)); --image-spark-rotate: -20deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 210ms) !important; }
.best-photo-image-burst i:nth-child(20) { --image-spark-x: calc(-12px * var(--figma-stage-scale)); --image-spark-y: calc(68px * var(--figma-stage-scale)); --image-spark-color: #df002e; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 62deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 238ms) !important; }
.best-photo-image-burst i:nth-child(21) { --image-spark-x: calc(-58px * var(--figma-stage-scale)); --image-spark-y: calc(36px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(4px * var(--figma-stage-scale)); --image-spark-rotate: -52deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 266ms) !important; }
.best-photo-image-burst i:nth-child(22) { --image-spark-x: calc(-26px * var(--figma-stage-scale)); --image-spark-y: calc(-6px * var(--figma-stage-scale)); --image-spark-color: #fabe00; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 10deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 22ms) !important; }
.best-photo-image-burst i:nth-child(23) { --image-spark-x: calc(26px * var(--figma-stage-scale)); --image-spark-y: calc(8px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: -16deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 48ms) !important; }
.best-photo-image-burst i:nth-child(24) { --image-spark-x: calc(4px * var(--figma-stage-scale)); --image-spark-y: calc(-22px * var(--figma-stage-scale)); --image-spark-color: #00b4ed; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 46deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 74ms) !important; }
.best-photo-image-burst i:nth-child(25) { --image-spark-x: calc(-150px * var(--figma-stage-scale)); --image-spark-y: calc(-78px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: -18deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 160ms) !important; }
.best-photo-image-burst i:nth-child(26) { --image-spark-x: calc(150px * var(--figma-stage-scale)); --image-spark-y: calc(-86px * var(--figma-stage-scale)); --image-spark-color: #fabe00; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 20deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 188ms) !important; }
.best-photo-image-burst i:nth-child(27) { --image-spark-x: calc(158px * var(--figma-stage-scale)); --image-spark-y: calc(82px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: -42deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 216ms) !important; }
.best-photo-image-burst i:nth-child(28) { --image-spark-x: calc(-154px * var(--figma-stage-scale)); --image-spark-y: calc(84px * var(--figma-stage-scale)); --image-spark-color: #00b4ed; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 42deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 244ms) !important; }
.best-photo-image-burst i:nth-child(29) { --image-spark-x: calc(-136px * var(--figma-stage-scale)); --image-spark-y: calc(0px * var(--figma-stage-scale)); --image-spark-color: #df002e; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 0deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 272ms) !important; }
.best-photo-image-burst i:nth-child(30) { --image-spark-x: calc(136px * var(--figma-stage-scale)); --image-spark-y: calc(0px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 0deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 300ms) !important; }
.best-photo-image-burst i:nth-child(31) { --image-spark-x: calc(0px * var(--figma-stage-scale)); --image-spark-y: calc(-126px * var(--figma-stage-scale)); --image-spark-color: #fabe00; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: 90deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 328ms) !important; }
.best-photo-image-burst i:nth-child(32) { --image-spark-x: calc(0px * var(--figma-stage-scale)); --image-spark-y: calc(126px * var(--figma-stage-scale)); --image-spark-color: #ffffff; --image-spark-size: calc(3px * var(--figma-stage-scale)); --image-spark-rotate: -90deg; animation-delay: calc(var(--best-photo-image-burst-delay) + 356ms) !important; }

.best-photo-placeholder,
.best-photo-placeholder img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.best-photo-card__placeholder,
.best-photo-card__placeholder img {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.best-photo-card__copy {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.best-photo-five {
  top: calc((731px * var(--figma-stage-scale)) + var(--best-photo-content-delta)) !important;
  left: calc(10px * var(--figma-stage-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: calc(354px * var(--figma-stage-scale)) !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
}

.best-photo-five__grid {
  position: relative !important;
  width: calc(342px * var(--figma-stage-scale)) !important;
  height: calc(188px * var(--figma-stage-scale)) !important;
}

.best-photo-five__item {
  --best-photo-five-pop-delay: var(--best-photo-five-item-1-delay);
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(109px * var(--figma-stage-scale)) !important;
  height: calc(90px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #99c3e2 !important;
  overflow: hidden !important;
  opacity: 0;
  transform-origin: 50% 50% !important;
  animation: best-photo-five-item-pop var(--best-photo-five-item-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--best-photo-five-pop-delay) both !important;
  will-change: transform, opacity, filter !important;
}

.best-photo-five__item--1 {
  --best-photo-five-pop-delay: var(--best-photo-five-item-1-delay);
  left: 0 !important;
  top: calc(98px * var(--figma-stage-scale)) !important;
}

.best-photo-five__item--2 {
  --best-photo-five-pop-delay: var(--best-photo-five-item-2-delay);
  left: calc(58px * var(--figma-stage-scale)) !important;
  top: 0 !important;
}

.best-photo-five__item--3 {
  --best-photo-five-pop-delay: var(--best-photo-five-item-3-delay);
  left: calc(117px * var(--figma-stage-scale)) !important;
  top: calc(98px * var(--figma-stage-scale)) !important;
}

.best-photo-five__item--4 {
  --best-photo-five-pop-delay: var(--best-photo-five-item-4-delay);
  left: calc(175px * var(--figma-stage-scale)) !important;
  top: 0 !important;
}

.best-photo-five__item--5 {
  --best-photo-five-pop-delay: var(--best-photo-five-item-5-delay);
  left: calc(233px * var(--figma-stage-scale)) !important;
  top: calc(98px * var(--figma-stage-scale)) !important;
}

.best-photo-five__placeholder,
.best-photo-five__placeholder img {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.best-photo-pager {
  top: calc((1009px * var(--figma-stage-scale)) + var(--best-photo-content-delta)) !important;
  left: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: auto !important;
  max-width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
  opacity: 0;
  animation: best-photo-pager-fade var(--best-photo-pager-duration) ease var(--best-photo-pager-delay) both !important;
}

.best-photo-pager__dot {
  display: block !important;
  width: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  min-width: calc(8px * var(--figma-stage-scale)) !important;
  min-height: calc(8px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #e3e3e3 !important;
  opacity: 0;
  animation: best-photo-dot-pop var(--best-photo-dot-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--best-photo-dot-delay, var(--best-photo-dot-1-delay)) both !important;
}

.screen.best-photo-screen--fast .best-photo-pager__dot {
  animation-delay: var(--best-photo-dot-fast-delay, var(--best-photo-dot-1-delay)) !important;
}

button.best-photo-pager__dot {
  cursor: pointer !important;
}

.best-photo-pager__dot.is-active {
  background: #0068b7 !important;
}

.best-photo-nav {
  top: var(--best-photo-content-start) !important;
  left: 0 !important;
  right: 0 !important;
  height: calc(38px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

.best-photo-nav .best-photo-nav__button {
  position: absolute !important;
  top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(38px * var(--figma-stage-scale)) !important;
  height: calc(38px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.best-photo-nav .best-photo-nav__button--prev {
  left: calc(3px * var(--figma-stage-scale)) !important;
}

.best-photo-nav .best-photo-nav__button--next {
  right: calc(3px * var(--figma-stage-scale)) !important;
}

.best-photo-nav .best-photo-nav__button img {
  display: block !important;
  width: calc(19px * var(--figma-stage-scale)) !important;
  min-width: calc(19px * var(--figma-stage-scale)) !important;
  max-width: calc(19px * var(--figma-stage-scale)) !important;
  height: calc(34px * var(--figma-stage-scale)) !important;
  min-height: calc(34px * var(--figma-stage-scale)) !important;
  max-height: calc(34px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(19px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
  transform: none !important;
}

.best-photo-nav .best-photo-nav__button--prev img {
  transform: scaleX(-1) !important;
}

@keyframes best-photo-bg-enter {
  0% {
    opacity: 0;
    filter: saturate(0.84) brightness(0.82) blur(calc(4px * var(--figma-stage-scale)));
    transform: scale(1.035);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}

@keyframes best-photo-spotlight-left {
  0% {
    opacity: 0;
    filter: blur(calc(2px * var(--figma-stage-scale)));
    transform: translateX(calc(-205px * var(--figma-stage-scale))) rotate(-34deg) scaleY(0.92);
  }
  16% {
    opacity: 0.72;
    filter: blur(calc(0.7px * var(--figma-stage-scale)));
  }
  42% {
    opacity: 0.88;
    transform: translateX(calc(-72px * var(--figma-stage-scale))) rotate(18deg) scaleY(1.02);
  }
  68% {
    opacity: 0.54;
    transform: translateX(calc(-142px * var(--figma-stage-scale))) rotate(-8deg) scaleY(1.06);
  }
  100% {
    opacity: 0.18;
    filter: blur(calc(1.1px * var(--figma-stage-scale)));
    transform: translateX(calc(-58px * var(--figma-stage-scale))) rotate(18deg) scaleY(1.04);
  }
}

@keyframes best-photo-spotlight-right {
  0% {
    opacity: 0;
    filter: blur(calc(2px * var(--figma-stage-scale)));
    transform: translateX(calc(22px * var(--figma-stage-scale))) rotate(28deg) scaleY(0.9);
  }
  18% {
    opacity: 0.54;
    filter: blur(calc(0.8px * var(--figma-stage-scale)));
  }
  46% {
    opacity: 0.74;
    transform: translateX(calc(-118px * var(--figma-stage-scale))) rotate(-20deg) scaleY(1.04);
  }
  72% {
    opacity: 0.42;
    transform: translateX(calc(-44px * var(--figma-stage-scale))) rotate(10deg) scaleY(1.07);
  }
  100% {
    opacity: 0.14;
    filter: blur(calc(1.1px * var(--figma-stage-scale)));
    transform: translateX(calc(-142px * var(--figma-stage-scale))) rotate(-18deg) scaleY(1.04);
  }
}

@keyframes best-photo-hero-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes best-photo-title-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(calc(8px * var(--figma-stage-scale)));
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes best-photo-card-pop {
  0% {
    opacity: 0;
    filter: blur(calc(8px * var(--figma-stage-scale))) brightness(1.18);
    transform: translateY(calc(28px * var(--figma-stage-scale))) scale(0.72);
  }
  48% {
    opacity: 1;
    filter: blur(0) brightness(1.08);
    transform: translateY(calc(-5px * var(--figma-stage-scale))) scale(1.075);
  }
  70% {
    filter: blur(0) brightness(1.02);
    transform: translateY(calc(2px * var(--figma-stage-scale))) scale(0.985);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translateY(0) scale(1);
  }
}

@keyframes best-photo-text-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(calc(6px * var(--figma-stage-scale)));
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes best-photo-head-reveal {
  0% {
    opacity: 0;
    transform: translateY(calc(6px * var(--figma-stage-scale)));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes best-photo-media-rise {
  0% {
    opacity: 0;
    filter: saturate(0.94) brightness(1.05);
    transform: translateY(calc(12px * var(--figma-stage-scale))) scale(0.985);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translateY(0);
  }
}

@keyframes best-photo-image-burst-shell {
  0% {
    opacity: 0;
    filter: brightness(1.22) saturate(1.1);
  }
  12% {
    opacity: 1;
  }
  58% {
    opacity: 1;
    filter: brightness(1.06) saturate(1.12);
  }
  100% {
    opacity: 0;
    filter: none;
  }
}

@keyframes best-photo-image-burst-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  18% {
    opacity: 0.96;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.72);
  }
}

@keyframes best-photo-image-burst-rays {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.14) rotate(-18deg);
  }
  18% {
    opacity: 0.84;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.52) rotate(36deg);
  }
}

@keyframes best-photo-image-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--image-spark-rotate)) scale(0.08);
  }
  12% {
    opacity: 1;
  }
  68% {
    opacity: 0.96;
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--image-spark-x)), calc(-50% + var(--image-spark-y)))
      rotate(calc(var(--image-spark-rotate) + var(--image-spark-spin)))
      scale(0.38);
  }
}

@keyframes best-photo-glass-sweep {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(16deg) skewX(-14deg) scaleY(1.06);
  }
  14% {
    opacity: 0.82;
  }
  42% {
    opacity: 0.94;
  }
  100% {
    opacity: 0;
    transform:
      translateX(calc(526px * var(--figma-stage-scale)))
      rotate(16deg)
      skewX(-14deg)
      scaleY(1.06);
  }
}

@keyframes best-photo-glass-line {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(16deg) skewX(-10deg) scaleY(1.08);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translateX(calc(500px * var(--figma-stage-scale)))
      rotate(16deg)
      skewX(-10deg)
      scaleY(1.08);
  }
}

@keyframes best-photo-card-halo {
  0% {
    opacity: 0;
    transform: scale(0.84);
  }
  28% {
    opacity: 0.95;
    transform: scale(1.04);
  }
  100% {
    opacity: 0.28;
    transform: scale(1.04);
  }
}

@keyframes best-photo-card-shine {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-14deg);
  }
  20% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(460px * var(--figma-stage-scale))) skewX(-14deg);
  }
}

@keyframes best-photo-burst-shell {
  0% {
    opacity: 0;
    transform: translateY(calc(10px * var(--figma-stage-scale))) scale(0.55) rotate(-3deg);
  }
  16% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(1.02) rotate(0deg);
  }
}

@keyframes best-photo-burst-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.14);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28);
  }
}

@keyframes best-photo-burst-rays {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18) rotate(-18deg);
  }
  22% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18) rotate(32deg);
  }
}

@keyframes best-photo-spark-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-rotate)) scale(0.1);
  }
  18% {
    opacity: 1;
  }
  74% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y)))
      rotate(calc(var(--spark-rotate) + var(--spark-spin)))
      scale(0.42);
  }
}

@keyframes best-photo-five-item-pop {
  0% {
    opacity: 0;
    filter: blur(calc(5px * var(--figma-stage-scale))) brightness(1.16);
    transform: translateY(calc(14px * var(--figma-stage-scale))) scale(0.58);
  }
  48% {
    opacity: 1;
    filter: blur(0) brightness(1.08);
    transform: translateY(calc(-4px * var(--figma-stage-scale))) scale(1.12);
  }
  74% {
    filter: blur(0) brightness(1.02);
    transform: translateY(calc(1px * var(--figma-stage-scale))) scale(0.97);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translateY(0) scale(1);
  }
}

@keyframes best-photo-pager-fade {
  0% {
    opacity: 0;
    filter: blur(calc(2px * var(--figma-stage-scale)));
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes best-photo-dot-pop {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  56% {
    opacity: 1;
    transform: scale(1.22);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (hover: none), (pointer: coarse), (max-width: 374.98px) {
  .screen.best-photo-screen .topbar,
  .screen.best-photo-screen .topbar.is-dark {
    --figma-topbar-icon-size: calc(24px * var(--figma-stage-scale)) !important;
    --figma-topbar-brand-height: calc(20px * var(--figma-stage-scale)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(30px * var(--figma-stage-scale)) !important;
    min-height: calc(24px * var(--figma-stage-scale)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .best-photo-screen__canvas::before,
  .best-photo-screen__canvas::after,
  .best-photo-screen__bg img,
  .best-photo-hero,
  .best-photo-winner h2,
  .best-photo-five h2,
  .best-photo-card,
  .best-photo-card__head,
  .best-photo-card__image,
  .best-photo-image-burst,
  .best-photo-image-burst i,
  .best-photo-card__copy,
  .best-photo-pager__dot,
  .best-photo-five__item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  .best-photo-screen__canvas::before,
  .best-photo-screen__canvas::after {
    display: none !important;
    opacity: 0 !important;
  }

  .best-photo-pager {
    animation: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }

  .best-photo-card::before,
  .best-photo-card::after,
  .best-photo-card__image::before,
  .best-photo-card__image::after,
  .best-photo-image-burst,
  .best-photo-celebration {
    display: none !important;
    animation: none !important;
  }
}

/* Common topbar geometry lock: every topbar-like header follows one viewport rule. */
.topbar,
.topbar.is-dark,
.menu-topbar,
.play-screen-direct .topbar,
.play-screen-direct .topbar.is-dark,
.screen.home-screen .topbar,
.screen.home-screen .topbar.is-dark,
.screen.intro-screen .topbar,
.screen.intro-screen .topbar.is-dark,
.screen.predict-screen .topbar,
.screen.predict-screen .topbar.is-dark,
.screen.lineup-screen .topbar,
.screen.lineup-screen .topbar.is-light,
.screen.ranking .topbar,
.screen.ranking .topbar.is-dark,
.screen.ranking.ranking--history .ranking-history__topbar,
.screen.community-screen .topbar,
.screen.community-screen .topbar.is-dark,
.screen.community-me .topbar,
.screen.community-me .topbar.is-dark,
.screen.best-photo-screen .topbar,
.screen.best-photo-screen .topbar.is-dark,
.screen.faq-screen .topbar,
.screen.faq-screen .topbar.is-dark,
.screen.inquiry-screen .topbar,
.screen.inquiry-screen .topbar.is-dark,
.screen.family-consent-screen .topbar,
.screen.family-consent-screen .topbar.is-dark,
.screen.prize-consent-screen .topbar,
.screen.prize-consent-screen .topbar.is-dark,
.screen.points-history-screen .topbar,
.screen.points-history-screen .topbar.is-dark,
.screen.agreements-screen .agreements-topbar,
.screen.points-monthly-screen .agreements-topbar {
  --app-topbar-top: calc(var(--safe-top) + 32px);
  --app-topbar-side: calc(16px * var(--figma-stage-scale));
  --app-topbar-height: calc(30px * var(--figma-stage-scale));
  --figma-topbar-icon-size: calc(24px * var(--figma-stage-scale)) !important;
  --figma-topbar-brand-height: calc(20px * var(--figma-stage-scale)) !important;
  position: absolute !important;
  top: var(--app-topbar-top) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--app-topbar-height) !important;
  min-height: var(--figma-topbar-icon-size) !important;
  margin: 0 !important;
  padding: 0 var(--app-topbar-side) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  transform: none !important;
  z-index: 20 !important;
}

.topbar .topbar__button,
.topbar .topbar__slot,
.topbar .topbar__icon,
.menu-topbar .topbar__button,
.menu-topbar .topbar__slot,
.menu-topbar .topbar__icon,
.screen.agreements-screen .agreements-topbar__back,
.screen.agreements-screen .agreements-topbar__back-icon,
.screen.points-monthly-screen .agreements-topbar__back,
.screen.points-monthly-screen .agreements-topbar__back-icon,
.screen.ranking.ranking--history .ranking-history__back {
  width: var(--figma-topbar-icon-size) !important;
  min-width: var(--figma-topbar-icon-size) !important;
  max-width: var(--figma-topbar-icon-size) !important;
  height: var(--figma-topbar-icon-size) !important;
  min-height: var(--figma-topbar-icon-size) !important;
  max-height: var(--figma-topbar-icon-size) !important;
}

.topbar .topbar__button,
.topbar .topbar__slot,
.menu-topbar .topbar__button,
.menu-topbar .topbar__slot,
.screen.intro-screen .topbar .topbar__button[aria-label="menu"],
.screen.intro-screen .topbar .topbar__button[aria-label="back"],
.screen.intro-screen .topbar .topbar__button[aria-label="mypage"],
.screen.intro-screen .topbar .topbar__button[aria-label="close"],
.screen.agreements-screen .topbar.agreements-topbar .agreements-topbar__back,
.screen.points-monthly-screen .topbar.agreements-topbar .agreements-topbar__back,
.screen.ranking.ranking--history .topbar.ranking-history__topbar .ranking-history__back {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  flex: none !important;
  transform: none !important;
}

.topbar .topbar__brand,
.menu-topbar .topbar__brand,
.screen.home-screen .topbar .topbar__brand,
.screen.intro-screen .topbar .topbar__brand,
.screen.ranking .topbar .topbar__brand,
.screen.ranking.ranking--history .topbar .ranking-history__brand,
.screen.agreements-screen .topbar .agreements-topbar__brand,
.screen.points-monthly-screen .topbar .agreements-topbar__brand {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  z-index: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.topbar .topbar__brand--light,
.topbar .topbar__brand-lockup--light,
.screen.agreements-screen .topbar .agreements-topbar__brand,
.screen.points-monthly-screen .topbar .agreements-topbar__brand {
  width: calc(128px * var(--figma-stage-scale)) !important;
  min-width: calc(128px * var(--figma-stage-scale)) !important;
  max-width: calc(128px * var(--figma-stage-scale)) !important;
  height: var(--figma-topbar-brand-height) !important;
  min-height: var(--figma-topbar-brand-height) !important;
  max-height: var(--figma-topbar-brand-height) !important;
}

.topbar .topbar__brand--dark,
.topbar .topbar__brand-lockup--dark,
.screen.ranking.ranking--history .topbar .ranking-history__brand {
  width: calc(128px * var(--figma-stage-scale)) !important;
  min-width: calc(128px * var(--figma-stage-scale)) !important;
  max-width: calc(128px * var(--figma-stage-scale)) !important;
  height: var(--figma-topbar-brand-height) !important;
  min-height: var(--figma-topbar-brand-height) !important;
  max-height: var(--figma-topbar-brand-height) !important;
}

.topbar .topbar__brand-image,
.screen.agreements-screen .topbar .agreements-topbar__brand img,
.screen.points-monthly-screen .topbar .agreements-topbar__brand img,
.screen.ranking.ranking--history .topbar .ranking-history__brand img {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 375px) {
  #app .topbar,
  #app .topbar.is-dark,
  #app .menu-topbar,
  #app .agreements-topbar,
  #app .ranking-history__topbar,
  .topbar,
  .topbar.is-dark,
  .menu-topbar,
  .screen.ranking.ranking--history .ranking-history__topbar,
  .screen.agreements-screen .agreements-topbar,
  .screen.points-monthly-screen .agreements-topbar {
    --app-topbar-side: max(12px, calc(16px * var(--figma-stage-scale)));
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

@media (min-width: 375.01px) {
  .topbar,
  .topbar.is-dark,
  .menu-topbar,
  .screen.ranking.ranking--history .ranking-history__topbar,
  .screen.agreements-screen .agreements-topbar,
  .screen.points-monthly-screen .agreements-topbar {
    --app-topbar-side: calc(16px * var(--figma-stage-scale));
    width: auto !important;
    max-width: none !important;
  }
}

/* Global heart asset sizing lock */
.screen.community-screen--feed .community-tile__meta .community-tile__like,
.screen.community-screen--feed .community-tile__meta .community-tile__like:hover,
.screen.community-screen--feed .community-tile__meta .community-tile__like:active,
.screen.community-screen--feed .community-tile__meta .community-tile__like.is-pressing,
.community-me--figma .community-me__list-like,
.community-me--figma .community-me__list-like:hover,
.community-me--figma .community-me__list-like:active,
.community-me--figma .community-me__list-like.is-pressing {
  --interactive-fill-opacity: 0.12 !important;
  --interactive-fill-size: 0% !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background-image:
    linear-gradient(
      rgba(255, 0, 0, var(--interactive-fill-opacity)),
      rgba(255, 0, 0, var(--interactive-fill-opacity))
    ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: var(--interactive-fill-size) 100% !important;
  transition:
    background-size 180ms ease,
    transform 160ms ease,
    filter 160ms ease !important;
}

.screen.community-screen--detail .community-card__reactions .community-card__like-button,
.screen.community-screen--detail .community-card__reactions .community-card__like-button:hover,
.screen.community-screen--detail .community-card__reactions .community-card__like-button:active,
.screen.community-screen--detail .community-card__reactions .community-card__like-button.is-pressing,
.community-me--figma .community-me__detail-like,
.community-me--figma .community-me__detail-like:hover,
.community-me--figma .community-me__detail-like:active,
.community-me--figma .community-me__detail-like.is-pressing {
  --interactive-fill-opacity: 0.12 !important;
  --interactive-fill-size: 0% !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background-image:
    linear-gradient(
      rgba(255, 0, 0, var(--interactive-fill-opacity)),
      rgba(255, 0, 0, var(--interactive-fill-opacity))
    ) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: var(--interactive-fill-size) 100% !important;
  transition:
    background-size 180ms ease,
    transform 160ms ease,
    filter 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .screen.community-screen--feed .community-tile__meta .community-tile__like:hover,
  .community-me--figma .community-me__list-like:hover,
  .screen.community-screen--detail .community-card__reactions .community-card__like-button:hover,
  .community-me--figma .community-me__detail-like:hover {
    --interactive-fill-size: 100% !important;
  }
}

.screen.community-screen--feed .community-tile__meta .community-tile__like.is-pressing,
.community-me--figma .community-me__list-like.is-pressing,
.screen.community-screen--detail .community-card__reactions .community-card__like-button.is-pressing,
.community-me--figma .community-me__detail-like.is-pressing {
  --interactive-fill-size: 100% !important;
  transform: scale(0.94) !important;
}

.screen.community-screen--feed .community-tile__meta .community-tile__heart,
.screen.community-screen--detail .community-card__reactions .community-card__heart,
.community-me--figma .community-me__list-heart,
.community-me--figma .community-me__detail-heart {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.heart-burst {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 5 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: translate(-50%, -50%) !important;
}

.heart-burst__heart {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: block !important;
  color: #ff1f2d !important;
  font-size: calc(10px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 0;
  text-shadow: 0 calc(1px * var(--figma-stage-scale)) calc(2px * var(--figma-stage-scale)) rgba(125, 0, 8, 0.16) !important;
  transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
  animation: heart-burst-float 780ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: opacity, transform !important;
}

.heart-burst__heart--one {
  --heart-burst-x: calc(-2px * var(--figma-stage-scale));
  --heart-burst-y: calc(-54px * var(--figma-stage-scale));
  --heart-burst-rotate: -9deg;
  animation-delay: 0ms !important;
}

.heart-burst__heart--two {
  --heart-burst-x: calc(-16px * var(--figma-stage-scale));
  --heart-burst-y: calc(-42px * var(--figma-stage-scale));
  --heart-burst-rotate: -18deg;
  color: #ff5a66 !important;
  animation-delay: 45ms !important;
}

.heart-burst__heart--three {
  --heart-burst-x: calc(15px * var(--figma-stage-scale));
  --heart-burst-y: calc(-45px * var(--figma-stage-scale));
  --heart-burst-rotate: 16deg;
  color: #f12b2b !important;
  animation-delay: 80ms !important;
}

.heart-burst__heart--four {
  --heart-burst-x: calc(-9px * var(--figma-stage-scale));
  --heart-burst-y: calc(-30px * var(--figma-stage-scale));
  --heart-burst-rotate: 10deg;
  color: #ff7a83 !important;
  font-size: calc(8px * var(--figma-stage-scale)) !important;
  animation-delay: 115ms !important;
}

.heart-burst__heart--five {
  --heart-burst-x: calc(10px * var(--figma-stage-scale));
  --heart-burst-y: calc(-31px * var(--figma-stage-scale));
  --heart-burst-rotate: -12deg;
  color: #ff3b47 !important;
  font-size: calc(8px * var(--figma-stage-scale)) !important;
  animation-delay: 145ms !important;
}

.screen.community-screen--detail .community-card__reactions .heart-burst__heart,
.community-me--figma .community-me__detail-like .heart-burst__heart {
  font-size: calc(13px * var(--figma-stage-scale)) !important;
}

.screen.community-screen--detail .community-card__reactions .heart-burst__heart--four,
.screen.community-screen--detail .community-card__reactions .heart-burst__heart--five,
.community-me--figma .community-me__detail-like .heart-burst__heart--four,
.community-me--figma .community-me__detail-like .heart-burst__heart--five {
  font-size: calc(10px * var(--figma-stage-scale)) !important;
}

@keyframes heart-burst-float {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.4) rotate(0deg);
  }
  18% {
    opacity: 0.95;
  }
  72% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--heart-burst-x)), calc(-50% + var(--heart-burst-y))) scale(1.12) rotate(var(--heart-burst-rotate));
  }
}

.screen.community-screen--feed .community-tile__meta .community-tile__like.is-heart-bursting::before,
.screen.community-screen--feed .community-tile__meta .community-tile__like.is-heart-bursting::after,
.community-me--figma .community-me__list-like.is-heart-bursting::before,
.community-me--figma .community-me__list-like.is-heart-bursting::after,
.screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::before,
.screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::after,
.community-me--figma .community-me__detail-like.is-heart-bursting::before,
.community-me--figma .community-me__detail-like.is-heart-bursting::after {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  display: block !important;
  color: #ff0000 !important;
  font-size: calc(11px * var(--figma-stage-scale)) !important;
  line-height: 1 !important;
  content: "♥" !important;
  pointer-events: none !important;
  text-shadow:
    calc(-9px * var(--figma-stage-scale)) calc(7px * var(--figma-stage-scale)) 0 rgba(255, 0, 0, 0.78),
    calc(9px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 rgba(255, 66, 66, 0.7) !important;
  transform: translate(-50%, -50%) scale(0.48) !important;
  animation: heart-burst-rise 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: transform, opacity !important;
}

.screen.community-screen--feed .community-tile__meta .community-tile__like.is-heart-bursting::after,
.community-me--figma .community-me__list-like.is-heart-bursting::after,
.screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::after,
.community-me--figma .community-me__detail-like.is-heart-bursting::after {
  font-size: calc(8px * var(--figma-stage-scale)) !important;
  text-shadow:
    calc(-6px * var(--figma-stage-scale)) calc(10px * var(--figma-stage-scale)) 0 rgba(255, 60, 60, 0.75),
    calc(7px * var(--figma-stage-scale)) calc(12px * var(--figma-stage-scale)) 0 rgba(255, 0, 0, 0.6) !important;
  animation-delay: 70ms !important;
  animation-duration: 760ms !important;
}

.screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::before,
.screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::after,
.community-me--figma .community-me__detail-like.is-heart-bursting::before,
.community-me--figma .community-me__detail-like.is-heart-bursting::after {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
}

@keyframes heart-burst-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -35%) scale(0.42) rotate(-8deg);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-54px * var(--figma-stage-scale))) scale(1.1) rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heart-burst {
    display: none !important;
  }

  .screen.community-screen--feed .community-tile__meta .community-tile__like.is-heart-bursting::before,
  .screen.community-screen--feed .community-tile__meta .community-tile__like.is-heart-bursting::after,
  .community-me--figma .community-me__list-like.is-heart-bursting::before,
  .community-me--figma .community-me__list-like.is-heart-bursting::after,
  .screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::before,
  .screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::after,
  .community-me--figma .community-me__detail-like.is-heart-bursting::before,
  .community-me--figma .community-me__detail-like.is-heart-bursting::after {
    animation: none !important;
    content: none !important;
  }
}

.screen.community-screen--feed .community-tile__meta .community-tile__like,
.screen.community-screen--feed .community-tile__meta .community-tile__heart,
.screen.community-screen--feed .community-tile__meta .community-tile__heart img,
.community-me--figma .community-me__list-like,
.community-me--figma .community-me__list-heart,
.community-me--figma .community-me__list-heart img {
  flex: 0 0 calc(20px * var(--figma-stage-scale)) !important;
  width: calc(20px * var(--figma-stage-scale)) !important;
  min-width: calc(20px * var(--figma-stage-scale)) !important;
  max-width: calc(20px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
  min-height: calc(20px * var(--figma-stage-scale)) !important;
  max-height: calc(20px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.community-screen--detail .community-card__reactions .community-card__like-button,
.screen.community-screen--detail .community-card__reactions .community-card__heart,
.screen.community-screen--detail .community-card__reactions .community-card__heart img,
.community-me--figma .community-me__detail-like,
.community-me--figma .community-me__detail-heart,
.community-me--figma .community-me__detail-heart img,
.best-photo-card__like-button,
.best-photo-card__heart,
.best-photo-card__heart img {
  flex: 0 0 calc(32px * var(--figma-stage-scale)) !important;
  width: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  max-width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  max-height: calc(32px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

/* Community heart final size lock */
.screen.community-screen--feed .community-tile__meta .community-tile__like,
.screen.community-screen--feed .community-tile__meta .community-tile__heart,
.screen.community-screen--feed .community-tile__meta .community-tile__heart svg,
.screen.community-screen--feed .community-tile__meta .community-tile__heart img,
.community-me--figma .community-me__list-like,
.community-me--figma .community-me__list-heart,
.community-me--figma .community-me__list-heart svg,
.community-me--figma .community-me__list-heart img {
  flex: 0 0 calc(24px * var(--figma-stage-scale)) !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  max-width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  max-height: calc(24px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.community-screen--detail .community-card__reactions .community-card__like-button,
.screen.community-screen--detail .community-card__reactions .community-card__heart,
.screen.community-screen--detail .community-card__reactions .community-card__heart svg,
.screen.community-screen--detail .community-card__reactions .community-card__heart img,
.community-me--figma .community-me__detail-like,
.community-me--figma .community-me__detail-heart,
.community-me--figma .community-me__detail-heart svg,
.community-me--figma .community-me__detail-heart img,
.best-photo-card__like-button,
.best-photo-card__heart,
.best-photo-card__heart svg,
.best-photo-card__heart img {
  flex: 0 0 calc(32px * var(--figma-stage-scale)) !important;
  width: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  max-width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  max-height: calc(32px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

/* Heart-only interaction lock */
button[data-like-post],
button[data-like-post]:hover,
button[data-like-post]:active,
button[data-like-post].is-pressing,
button[data-like-post].is-heart-pressing,
button[data-like-post].is-heart-bursting {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  --material-ripple-target-size: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-size: 0 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform-origin: center center !important;
  touch-action: manipulation !important;
  transition:
    transform 150ms cubic-bezier(0.2, 0.9, 0.2, 1),
    filter 150ms ease,
    opacity 150ms ease !important;
}

button[data-like-post]::before,
button[data-like-post]::after,
button[data-like-post].is-heart-bursting::before,
button[data-like-post].is-heart-bursting::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

button[data-like-post].is-heart-pressing,
button[data-like-post]:active {
  transform: scale(0.88) !important;
  filter: drop-shadow(0 calc(2px * var(--figma-stage-scale)) calc(3px * var(--figma-stage-scale)) rgba(255, 0, 0, 0.18)) !important;
}

button[data-like-post] .community-tile__heart,
button[data-like-post] .community-card__heart,
button[data-like-post] .community-me__list-heart,
button[data-like-post] .community-me__detail-heart,
button[data-like-post] .best-photo-card__heart,
button[data-like-post] .community-tile__heart img,
button[data-like-post] .community-card__heart img,
button[data-like-post] .community-me__list-heart img,
button[data-like-post] .community-me__detail-heart img,
button[data-like-post] .best-photo-card__heart img {
  pointer-events: none !important;
  transform-origin: center center !important;
  transition:
    transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
    filter 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  button[data-like-post]:hover .community-tile__heart img,
  button[data-like-post]:hover .community-card__heart img,
  button[data-like-post]:hover .community-me__list-heart img,
  button[data-like-post]:hover .community-me__detail-heart img,
  button[data-like-post]:hover .best-photo-card__heart img {
    transform: scale(1.08) !important;
    filter: drop-shadow(0 calc(2px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) rgba(255, 0, 0, 0.16)) !important;
  }
}

button[data-like-post].is-heart-bursting .community-tile__heart img,
button[data-like-post].is-heart-bursting .community-card__heart img,
button[data-like-post].is-heart-bursting .community-me__list-heart img,
button[data-like-post].is-heart-bursting .community-me__detail-heart img,
button[data-like-post].is-heart-bursting .best-photo-card__heart img {
  animation: heart-icon-pop 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  filter: drop-shadow(0 calc(2px * var(--figma-stage-scale)) calc(5px * var(--figma-stage-scale)) rgba(255, 0, 0, 0.22)) !important;
}

.best-photo-screen .best-photo-card__like-button:not(.is-heart-bursting) .best-photo-card__heart--popin img {
  animation: heart-icon-pop 560ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both !important;
  filter: drop-shadow(0 calc(2px * var(--figma-stage-scale)) calc(5px * var(--figma-stage-scale)) rgba(255, 0, 0, 0.22)) !important;
}

button[data-like-post] .heart-burst {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 6 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

button[data-like-post] .heart-burst__heart {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  opacity: 0;
  color: #ff0000 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: 0 calc(2px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) rgba(125, 0, 8, 0.2) !important;
  transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
  animation: heart-burst-pop 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: opacity, transform !important;
}

button[data-like-post] .heart-burst__heart--one {
  --heart-burst-x: calc(-2px * var(--figma-stage-scale));
  --heart-burst-y: calc(-46px * var(--figma-stage-scale));
  --heart-burst-rotate: -8deg;
  animation-delay: 0ms !important;
}

button[data-like-post] .heart-burst__heart--two {
  --heart-burst-x: calc(-16px * var(--figma-stage-scale));
  --heart-burst-y: calc(-34px * var(--figma-stage-scale));
  --heart-burst-rotate: -18deg;
  color: #ff4a56 !important;
  animation-delay: 35ms !important;
}

button[data-like-post] .heart-burst__heart--three {
  --heart-burst-x: calc(15px * var(--figma-stage-scale));
  --heart-burst-y: calc(-37px * var(--figma-stage-scale));
  --heart-burst-rotate: 16deg;
  color: #f02b2b !important;
  animation-delay: 65ms !important;
}

button[data-like-post] .heart-burst__heart--four {
  --heart-burst-x: calc(-8px * var(--figma-stage-scale));
  --heart-burst-y: calc(-24px * var(--figma-stage-scale));
  --heart-burst-rotate: 10deg;
  color: #ff7780 !important;
  animation-delay: 95ms !important;
}

button[data-like-post] .heart-burst__heart--five {
  --heart-burst-x: calc(10px * var(--figma-stage-scale));
  --heart-burst-y: calc(-25px * var(--figma-stage-scale));
  --heart-burst-rotate: -12deg;
  color: #ff2c39 !important;
  animation-delay: 125ms !important;
}

.screen.community-screen--detail button[data-like-post] .heart-burst__heart,
.community-me--figma .community-me__detail-like .heart-burst__heart {
  font-size: calc(13px * var(--figma-stage-scale)) !important;
}

@keyframes heart-icon-pop {
  0% {
    transform: scale(0.72);
  }
  42% {
    transform: scale(1.26);
  }
  70% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes heart-burst-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -42%) scale(0.35) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--heart-burst-x)), calc(-50% + var(--heart-burst-y))) scale(1.08) rotate(var(--heart-burst-rotate));
  }
}

@media (prefers-reduced-motion: reduce) {
  button[data-like-post].is-heart-bursting .community-tile__heart img,
  button[data-like-post].is-heart-bursting .community-card__heart img,
  button[data-like-post].is-heart-bursting .community-me__list-heart img,
  button[data-like-post].is-heart-bursting .community-me__detail-heart img,
  button[data-like-post].is-heart-bursting .best-photo-card__heart img,
  .best-photo-screen .best-photo-card__like-button:not(.is-heart-bursting) .best-photo-card__heart--popin img {
    animation: none !important;
  }

  button[data-like-post] .heart-burst {
    display: none !important;
  }
}

#app button[data-like-post],
#app button[data-like-post]:hover,
#app button[data-like-post]:active,
#app button[data-like-post].is-pressing,
#app button[data-like-post].is-heart-pressing,
#app button[data-like-post].is-heart-bursting {
  --interactive-fill-opacity: 0 !important;
  --interactive-fill-size: 0% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-size: 0 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#app button[data-like-post].is-heart-pressing,
#app button[data-like-post]:active {
  transform: scale(0.88) !important;
  filter: drop-shadow(0 calc(2px * var(--figma-stage-scale)) calc(3px * var(--figma-stage-scale)) rgba(255, 0, 0, 0.18)) !important;
}

#app .screen.community-screen--feed .community-tile__meta .community-tile__like {
  flex: 0 0 calc(32px * var(--figma-stage-scale)) !important;
  width: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  max-width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  max-height: calc(32px * var(--figma-stage-scale)) !important;
  margin: calc(-4px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

#app .screen.community-screen--feed .community-tile__meta .community-tile__heart,
#app .screen.community-screen--feed .community-tile__meta .community-tile__heart img {
  flex: 0 0 calc(24px * var(--figma-stage-scale)) !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  max-width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  max-height: calc(24px * var(--figma-stage-scale)) !important;
}

#app .screen.community-screen--feed .community-tile__meta .community-tile__heart {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font-style: normal !important;
  line-height: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#app .screen.community-screen--feed .community-tile__meta .community-tile__heart img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
}

#app .screen.community-screen--feed .community-tile__meta .community-tile__like::before,
#app .screen.community-screen--feed .community-tile__meta .community-tile__like::after,
#app .screen.community-screen--feed .community-tile__meta .community-tile__like.is-heart-bursting::before,
#app .screen.community-screen--feed .community-tile__meta .community-tile__like.is-heart-bursting::after,
#app .community-me--figma .community-me__list-like::before,
#app .community-me--figma .community-me__list-like::after,
#app .community-me--figma .community-me__list-like.is-heart-bursting::before,
#app .community-me--figma .community-me__list-like.is-heart-bursting::after,
#app .screen.community-screen--detail .community-card__reactions .community-card__like-button::before,
#app .screen.community-screen--detail .community-card__reactions .community-card__like-button::after,
#app .screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::before,
#app .screen.community-screen--detail .community-card__reactions .community-card__like-button.is-heart-bursting::after,
#app .community-me--figma .community-me__detail-like::before,
#app .community-me--figma .community-me__detail-like::after,
#app .community-me--figma .community-me__detail-like.is-heart-bursting::before,
#app .community-me--figma .community-me__detail-like.is-heart-bursting::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
}

#app button[data-like-post] .heart-burst {
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font-style: normal !important;
  line-height: 0 !important;
}

#app button[data-like-post] .heart-burst__heart {
  display: block !important;
  align-items: normal !important;
  justify-content: normal !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ff0000 !important;
  font-style: normal !important;
  font-size: calc(10px * var(--figma-stage-scale)) !important;
  line-height: 1 !important;
}

#app button[data-like-post] .heart-burst__heart--two {
  color: #ff4a56 !important;
}

#app button[data-like-post] .heart-burst__heart--three {
  color: #f02b2b !important;
}

#app button[data-like-post] .heart-burst__heart--four {
  color: #ff7780 !important;
  font-size: calc(8px * var(--figma-stage-scale)) !important;
}

#app button[data-like-post] .heart-burst__heart--five {
  color: #ff2c39 !important;
  font-size: calc(8px * var(--figma-stage-scale)) !important;
}

#app .screen.community-screen--detail button[data-like-post] .heart-burst__heart,
#app .community-me--figma .community-me__detail-like .heart-burst__heart,
#app .best-photo-card__like-button .heart-burst__heart {
  font-size: calc(13px * var(--figma-stage-scale)) !important;
}

#app .screen.community-screen--detail button[data-like-post] .heart-burst__heart--four,
#app .screen.community-screen--detail button[data-like-post] .heart-burst__heart--five,
#app .community-me--figma .community-me__detail-like .heart-burst__heart--four,
#app .community-me--figma .community-me__detail-like .heart-burst__heart--five,
#app .best-photo-card__like-button .heart-burst__heart--four,
#app .best-photo-card__like-button .heart-burst__heart--five {
  font-size: calc(10px * var(--figma-stage-scale)) !important;
}

/* Community feed card grid gap lock */
#app .screen.community-screen--feed .community-grid--figma {
  grid-template-columns: none !important;
  grid-template-rows: repeat(2, calc(206px * var(--figma-stage-scale))) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc(168px * var(--figma-stage-scale)) !important;
  grid-auto-rows: unset !important;
  column-gap: calc(8px * var(--figma-stage-scale)) !important;
  row-gap: calc(8px * var(--figma-stage-scale)) !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(420px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  justify-content: start !important;
  align-content: start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x proximity !important;
  scroll-padding-inline: 0 !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  cursor: grab !important;
  transform: translateX(-50%) !important;
  scrollbar-width: none !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 0, #000 100%, transparent 100%) !important;
  transition: mask-image 180ms ease !important;
}

#app .screen.community-screen--feed .community-grid--figma.is-mouse-dragging {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
  user-select: none !important;
}

#app .screen.community-screen--feed .community-grid--figma::-webkit-scrollbar {
  display: none !important;
}

#app .screen.community-screen--feed .community-grid--figma.has-left-overflow {
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(18px * var(--figma-stage-scale)), #000 100%, transparent 100%) !important;
}

#app .screen.community-screen--feed .community-grid--figma.has-right-overflow {
  mask-image: linear-gradient(90deg, transparent 0, #000 0, #000 calc(100% - (18px * var(--figma-stage-scale))), transparent 100%) !important;
}

#app .screen.community-screen--feed .community-grid--figma.has-left-overflow.has-right-overflow {
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(18px * var(--figma-stage-scale)), #000 calc(100% - (18px * var(--figma-stage-scale))), transparent 100%) !important;
}

#app .screen.community-screen--feed .community-tile--figma {
  width: calc(168px * var(--figma-stage-scale)) !important;
  height: calc(206px * var(--figma-stage-scale)) !important;
  min-height: calc(206px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
}

#app .screen.community-screen--feed .community-tile__photo {
  width: calc(152px * var(--figma-stage-scale)) !important;
  min-width: calc(152px * var(--figma-stage-scale)) !important;
  max-width: calc(152px * var(--figma-stage-scale)) !important;
  height: calc(96px * var(--figma-stage-scale)) !important;
  min-height: calc(96px * var(--figma-stage-scale)) !important;
  max-height: calc(96px * var(--figma-stage-scale)) !important;
}

#app .screen.community-screen--feed .community-tile__photo.is-filled > img,
#app .screen.community-screen--feed .community-tile__photo.is-filled > img.is-filled {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

#app .screen.community-screen--feed .community-placeholder,
#app .screen.community-screen--feed .community-placeholder__asset {
  width: calc(32px * var(--figma-stage-scale)) !important;
  min-width: calc(32px * var(--figma-stage-scale)) !important;
  max-width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
  min-height: calc(32px * var(--figma-stage-scale)) !important;
  max-height: calc(32px * var(--figma-stage-scale)) !important;
}

#app .screen.community-screen--feed .community-feed-progress {
  display: flex !important;
  grid-row: 1 / span 2 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: calc(10px * var(--figma-stage-scale)) !important;
  width: calc(168px * var(--figma-stage-scale)) !important;
  height: calc(420px * var(--figma-stage-scale)) !important;
  color: #0068b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  scroll-snap-align: start !important;
}

#app .screen.community-screen--feed .community-feed-progress__ring {
  width: calc(28px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
  border: calc(3px * var(--figma-stage-scale)) solid rgba(0, 104, 183, 0.18) !important;
  border-top-color: #0068b7 !important;
  border-radius: 999px !important;
  animation: community-feed-progress-spin 820ms linear infinite !important;
}

@keyframes community-feed-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Community category QA fit: keep Figma geometry reachable on short mobile viewports. */
#app .screen.community-screen--feed,
#app .screen.community-screen--detail {
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  height: max(var(--device-height), calc(764px * var(--figma-stage-scale))) !important;
  min-height: max(var(--device-height), calc(764px * var(--figma-stage-scale))) !important;
  max-height: none !important;
  overflow-x: hidden !important;
}

#app .screen.community-screen--feed:not(.community-screen--detail) {
  height: var(--device-height) !important;
  min-height: var(--device-height) !important;
  max-height: var(--device-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#app .screen.community-screen--feed:not(.community-screen--detail) .community-screen__body {
  height: max(var(--device-height), calc(764px * var(--figma-stage-scale))) !important;
  min-height: max(var(--device-height), calc(764px * var(--figma-stage-scale))) !important;
}

#app .screen.community-me.community-me--figma:not(.community-me--compose) {
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  height: max(var(--device-height), calc(764px * var(--figma-stage-scale))) !important;
  min-height: max(var(--device-height), calc(764px * var(--figma-stage-scale))) !important;
  max-height: none !important;
  overflow-x: hidden !important;
}

#app .screen.community-me.community-me--compose {
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  height: auto !important;
  min-height: max(var(--device-height), calc(720px * var(--figma-stage-scale))) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Keep touch/mobile runtimes on the mobile stage model independent of desktop media queries. */
html.is-mobile-runtime {
  --app-viewport-height: calc(var(--dvh, 1dvh) * 100) !important;
  --mobile-viewport-height: var(--app-viewport-height) !important;
  --device-width: var(--mobile-viewport-width) !important;
  --device-height: var(--mobile-viewport-height) !important;
  --figma-stage-width: var(--mobile-viewport-width) !important;
  --figma-stage-scale: calc(var(--figma-stage-width) / var(--figma-frame-width)) !important;
  --mockup-stage-width: var(--mobile-viewport-width) !important;
  --mockup-stage-height: var(--mobile-viewport-height) !important;
  --mockup-screen-height: var(--mobile-viewport-height) !important;
}

html.is-mobile-runtime {
  width: var(--mobile-viewport-width) !important;
  min-width: var(--mobile-viewport-width) !important;
  max-width: var(--mobile-viewport-width) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.is-mobile-runtime body,
html.is-mobile-runtime #app,
html.is-mobile-runtime .mockup-shell,
html.is-mobile-runtime .phone-stage-shell {
  position: relative !important;
  width: var(--mobile-viewport-width) !important;
  min-width: var(--mobile-viewport-width) !important;
  max-width: var(--mobile-viewport-width) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html.is-mobile-runtime body,
html.is-mobile-runtime #app {
  background: #0d1016 !important;
}

html.is-mobile-runtime body {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

html.is-mobile-runtime #app {
  isolation: isolate !important;
}

html.is-mobile-runtime.is-view-home,
html.is-mobile-runtime.is-view-home body,
html.is-mobile-runtime.is-view-register,
html.is-mobile-runtime.is-view-register body,
html.is-mobile-runtime.is-view-mascot-register,
html.is-mobile-runtime.is-view-mascot-register body,
html.is-mobile-runtime.is-view-auth-member-form,
html.is-mobile-runtime.is-view-auth-member-form body {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

@supports (height: 100dvh) {
  html.is-mobile-runtime body,
  html.is-mobile-runtime #app,
  html.is-mobile-runtime .mockup-shell,
  html.is-mobile-runtime .phone-stage-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

html.is-mobile-runtime .mockup-shell {
  position: relative !important;
  display: block !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.is-mobile-runtime .desktop-sitemap,
html.is-mobile-runtime .desktop-sitemap--placeholder,
html.is-mobile-runtime .desktop-preview {
  display: none !important;
}

html.is-mobile-runtime .phone-stage-frame {
  width: var(--mobile-viewport-width) !important;
  min-width: var(--mobile-viewport-width) !important;
  max-width: var(--mobile-viewport-width) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html.is-mobile-runtime .phone-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  zoom: normal !important;
  transform: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.is-mobile-runtime.has-drawer-overlay,
html.is-mobile-runtime.has-drawer-overlay body {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

html.is-mobile-runtime.has-drawer-overlay body,
html.is-mobile-runtime.has-drawer-overlay #app,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .phone-stage-shell,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .phone-stage-frame,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .phone-stage {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-overlay.app-drawer,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--menu,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--mypage {
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__body {
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime .phone-stage-overlay {
  left: 0 !important;
  right: auto !important;
  width: var(--mobile-viewport-width) !important;
  min-width: var(--mobile-viewport-width) !important;
  max-width: var(--mobile-viewport-width) !important;
  height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  transform: none !important;
  transform-origin: top left !important;
}

html.is-mobile-runtime .phone-stage > .screen,
html.is-mobile-runtime .phone-stage-frame > .phone-stage > .screen,
html.is-mobile-runtime .screen {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: var(--mockup-screen-height) !important;
  max-height: none !important;
}

.phone-stage > .screen.best-photo-screen,
.phone-stage-frame > .phone-stage > .screen.best-photo-screen,
html.is-mobile-runtime .phone-stage > .screen.best-photo-screen,
html.is-mobile-runtime .phone-stage-frame > .phone-stage > .screen.best-photo-screen,
html.is-mobile-runtime .screen.best-photo-screen {
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime .mockup-shell.is-view-landing .phone-stage,
html.is-mobile-runtime .mockup-shell.is-view-intro .phone-stage,
html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home {
  --device-width: var(--mobile-viewport-width) !important;
  --figma-stage-width: var(--mobile-viewport-width) !important;
  --figma-stage-scale: calc(var(--mobile-viewport-width) / 375px) !important;
  --mockup-stage-width: var(--mobile-viewport-width) !important;
  --home-overlay-scale: var(--figma-stage-scale) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-frame,
html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-shell {
  width: var(--mobile-viewport-width) !important;
  min-width: var(--mobile-viewport-width) !important;
  max-width: var(--mobile-viewport-width) !important;
  height: var(--mobile-viewport-height) !important;
  min-height: var(--mobile-viewport-height) !important;
  max-height: none !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: calc(584px * var(--figma-stage-scale)) !important;
  max-height: none !important;
  transform: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-frame,
html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-shell,
html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage {
  height: var(--mobile-viewport-height) !important;
  min-height: var(--mobile-viewport-height) !important;
  max-height: var(--mobile-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage {
  position: absolute !important;
  inset: 0 !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .screen.home-screen {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: var(--mobile-viewport-height) !important;
  min-height: var(--mobile-viewport-height) !important;
  max-height: var(--mobile-viewport-height) !important;
  overflow: hidden !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay {
  --figma-stage-width: var(--mobile-viewport-width) !important;
  --figma-stage-scale: var(--home-overlay-scale) !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  transform: none !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .stage-context-rail {
  right: calc(11px * var(--home-overlay-scale)) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: calc(48px * var(--figma-stage-scale)) 0 calc(48px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__metrics {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: calc(328px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__actions {
  position: static !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: calc(16px * var(--figma-stage-scale)) auto 0 !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__actions,
html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__actions *,
html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .cta {
  pointer-events: auto !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav .home-flow-nav__button,
html.is-mobile-runtime .mockup-shell.is-view-intro .phone-stage-overlay > .home-flow-nav .home-flow-nav__button,
html.is-mobile-runtime .mockup-shell.is-view-ranking:not(.is-ranking-history) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button,
html.is-mobile-runtime .mockup-shell.is-ranking-history .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button {
  width: calc(38px * var(--figma-stage-scale)) !important;
  min-width: calc(38px * var(--figma-stage-scale)) !important;
  max-width: calc(38px * var(--figma-stage-scale)) !important;
  height: calc(38px * var(--figma-stage-scale)) !important;
  min-height: calc(38px * var(--figma-stage-scale)) !important;
  max-height: calc(38px * var(--figma-stage-scale)) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left,
html.is-mobile-runtime .mockup-shell.is-view-intro .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left,
html.is-mobile-runtime .mockup-shell.is-view-ranking:not(.is-ranking-history) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--left {
  left: calc(-2px * var(--figma-stage-scale)) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--right,
html.is-mobile-runtime .mockup-shell.is-view-intro .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--right,
html.is-mobile-runtime .mockup-shell.is-view-ranking:not(.is-ranking-history) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button--right,
html.is-mobile-runtime .mockup-shell.is-ranking-history .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button--right {
  right: calc(-2px * var(--figma-stage-scale)) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav .home-flow-nav__button img,
html.is-mobile-runtime .mockup-shell.is-view-intro .phone-stage-overlay > .home-flow-nav .home-flow-nav__button img,
html.is-mobile-runtime .mockup-shell.is-view-ranking:not(.is-ranking-history) .phone-stage-overlay > .home-flow-nav .home-flow-nav__button img,
html.is-mobile-runtime .mockup-shell.is-ranking-history .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button img {
  width: calc(19px * var(--figma-stage-scale)) !important;
  min-width: calc(19px * var(--figma-stage-scale)) !important;
  max-width: calc(19px * var(--figma-stage-scale)) !important;
  height: calc(34px * var(--figma-stage-scale)) !important;
  min-height: calc(34px * var(--figma-stage-scale)) !important;
  max-height: calc(34px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(19px * var(--figma-stage-scale)) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-pager,
html.is-mobile-runtime .mockup-shell.is-view-intro .phone-stage-overlay > .home-flow-pager,
html.is-mobile-runtime .mockup-shell.is-view-ranking:not(.is-ranking-history) .phone-stage-overlay > .home-flow-pager {
  bottom: calc(30px * var(--figma-stage-scale)) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-intro {
  --intro-overlay-scale: calc(var(--mobile-viewport-width) / 375px) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-intro .phone-stage-overlay {
  --figma-stage-width: var(--mobile-viewport-width) !important;
  --figma-stage-scale: var(--intro-overlay-scale) !important;
  left: 0 !important;
  right: auto !important;
  width: var(--mobile-viewport-width) !important;
  min-width: var(--mobile-viewport-width) !important;
  max-width: var(--mobile-viewport-width) !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  transform: none !important;
}

html.is-mobile-runtime .mockup-shell.is-view-intro .phone-stage-overlay > .stage-context-rail {
  right: calc(11px * var(--intro-overlay-scale)) !important;
}

html.is-mobile-runtime .screen.intro-screen.intro-screen--howto.intro-screen--howto-predict {
  height: auto !important;
  min-height: calc(1556px * var(--figma-stage-scale)) !important;
  max-height: none !important;
}

html.is-mobile-runtime .screen.intro-screen.intro-screen--howto.intro-screen--howto-lineup {
  height: auto !important;
  min-height: calc(1588px * var(--figma-stage-scale)) !important;
  max-height: none !important;
}

html.is-mobile-runtime .screen.intro-screen.intro-screen--howto .intro-screen__background {
  inset: 0 !important;
  height: auto !important;
  min-height: 100% !important;
}

html.is-mobile-runtime .screen.intro-screen.intro-screen--howto > .intro-screen__background img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

html.is-mobile-runtime .mockup-shell.is-ranking-history {
  --ranking-history-overlay-scale: var(--figma-stage-scale) !important;
}

html.is-mobile-runtime .mockup-shell.is-ranking-history .phone-stage-overlay {
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  transform: none !important;
  transform-origin: top left !important;
}

html.is-mobile-runtime .mockup-shell.is-ranking-history .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
}

html.is-mobile-runtime .mockup-shell.is-ranking-history .phone-stage-overlay > .home-flow-nav.home-flow-nav--ranking-history .home-flow-nav__button {
  top: calc(102px * var(--ranking-history-overlay-scale)) !important;
}

html.is-mobile-runtime .mockup-shell.is-view-register,
html.is-mobile-runtime .mockup-shell.is-view-mascot-register,
html.is-mobile-runtime .mockup-shell.is-view-auth-member-form {
  height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  overflow: hidden !important;
}

html.is-mobile-runtime .mockup-shell.is-view-register .phone-stage-shell,
html.is-mobile-runtime .mockup-shell.is-view-register .phone-stage-frame,
html.is-mobile-runtime .mockup-shell.is-view-register .phone-stage,
html.is-mobile-runtime .mockup-shell.is-view-mascot-register .phone-stage-shell,
html.is-mobile-runtime .mockup-shell.is-view-mascot-register .phone-stage-frame,
html.is-mobile-runtime .mockup-shell.is-view-mascot-register .phone-stage,
html.is-mobile-runtime .mockup-shell.is-view-auth-member-form .phone-stage-shell,
html.is-mobile-runtime .mockup-shell.is-view-auth-member-form .phone-stage-frame,
html.is-mobile-runtime .mockup-shell.is-view-auth-member-form .phone-stage {
  height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  overflow: hidden !important;
}

html.is-mobile-runtime .mockup-shell.is-view-register .screen.register-screen,
html.is-mobile-runtime .mockup-shell.is-view-mascot-register .screen.register-screen,
html.is-mobile-runtime .mockup-shell.is-view-auth-member-form .screen.member-form-screen {
  height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime .app-overlay.app-drawer,
html.is-mobile-runtime .app-drawer__panel--menu,
html.is-mobile-runtime .app-drawer__panel--mypage {
  top: 0 !important;
  bottom: auto !important;
  height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
}

html.is-mobile-runtime img {
  -webkit-user-drag: none !important;
}

html.is-mobile-runtime,
html.is-mobile-runtime body,
html.is-mobile-runtime #app,
html.is-mobile-runtime .mockup-shell,
html.is-mobile-runtime .phone-stage-shell,
html.is-mobile-runtime .phone-stage-frame {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.is-mobile-runtime .phone-stage {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime.has-drawer-overlay .phone-stage {
  overflow: hidden !important;
}

html.is-mobile-runtime body #app,
html.is-mobile-runtime body #app .mockup-shell,
html.is-mobile-runtime body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime body #app .mockup-shell .phone-stage-frame {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html.is-mobile-runtime body #app .mockup-shell .phone-stage-frame > .phone-stage {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100dvh !important;
}

/* 2026-05-15: keep full-height drawer design reachable on short mobile viewports. */
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-overlay.app-drawer {
  height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-overlay.app-drawer::after {
  content: "" !important;
  display: block !important;
  width: 1px !important;
  height: max(var(--app-viewport-height, var(--mobile-viewport-height)), 764px) !important;
  min-height: 764px !important;
  pointer-events: none !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--menu,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--mypage,
html.is-mobile-runtime .app-drawer__panel--menu,
html.is-mobile-runtime .app-drawer__panel--mypage {
  top: 0 !important;
  bottom: auto !important;
  height: max(var(--app-viewport-height, var(--mobile-viewport-height)), 764px) !important;
  min-height: 764px !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__body,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.app-drawer__panel--menu > .app-drawer__scroll-area,
.app-drawer__panel--mypage > .app-drawer__scroll-area {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-overlay.app-drawer {
  overflow: hidden !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-overlay.app-drawer::after {
  content: none !important;
  display: none !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--menu,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--mypage {
  height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--menu > .app-drawer__scroll-area,
html.is-mobile-runtime.has-drawer-overlay .mockup-shell.has-overlay .app-drawer__panel--mypage > .app-drawer__scroll-area {
  height: var(--app-viewport-height, var(--mobile-viewport-height)) !important;
  min-height: 764px !important;
}