/* V21 · financial content automation hero */
.topbar {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 13.4rem;
  padding: 2rem 2.1rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .46fr);
  align-items: center;
  overflow: hidden;
  border-color: rgba(103, 92, 225, .13);
  background:
    radial-gradient(circle at 78% 26%, rgba(255, 206, 75, .17), transparent 19rem),
    radial-gradient(circle at 93% 86%, rgba(115, 103, 234, .14), transparent 19rem),
    linear-gradient(116deg, rgba(249, 248, 255, .97), rgba(241, 242, 255, .94) 58%, rgba(247, 244, 255, .92));
  box-shadow:
    0 .9rem 2.8rem rgba(70, 71, 135, .1),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.topbar::before {
  position: absolute;
  z-index: -1;
  top: -8.5rem;
  right: -3rem;
  width: 35rem;
  height: 35rem;
  border: 1px solid rgba(104, 91, 232, .12);
  border-radius: 50%;
  content: "";
  box-shadow:
    -6rem 5rem 0 -5.95rem rgba(104, 91, 232, .1),
    -12rem 10rem 0 -11.92rem rgba(216, 165, 44, .14);
}

.topbar::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 70%, rgba(105, 94, 230, .055) 70% 70.08%, transparent 70.08%),
    linear-gradient(153deg, transparent 0 77%, rgba(105, 94, 230, .06) 77% 77.12%, transparent 77.12%);
  content: "";
  mask-image: linear-gradient(90deg, transparent 48%, #000 74%);
}

.topbar__identity {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.topbar__identity > .topbar__copy {
  display: grid;
  justify-items: start;
}

.topbar__kicker {
  display: inline-flex;
  margin: 0 0 .9rem;
  align-items: center;
  gap: .48rem;
  border: 1px solid rgba(101, 89, 227, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  color: #5b51ca;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
}

.topbar__kicker > span {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #796af0;
  box-shadow: 0 0 0 .24rem rgba(121, 106, 240, .1);
}

.topbar__identity h1 {
  margin: 0;
}

.topbar__identity h1 > span {
  color: #b17a08;
  text-shadow: 0 .18rem .75rem rgba(207, 154, 26, .14);
}

.topbar__description {
  margin: 1rem 0 0;
  color: #666b89;
}

.topbar__mascot {
  position: absolute;
  z-index: 1;
  right: 6.8rem;
  bottom: .1rem;
  display: grid;
  width: 20rem;
  height: 13rem;
  place-items: center;
  pointer-events: none;
}

.topbar__mascot img {
  position: relative;
  z-index: 2;
  display: block;
  width: 15rem;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 1.25rem 1.35rem rgba(42, 31, 80, .18));
  image-rendering: pixelated;
}

.topbar__orbit {
  position: absolute;
  border: 1px solid rgba(109, 96, 230, .13);
  border-radius: 50%;
}

.topbar__orbit--outer {
  width: 18rem;
  height: 18rem;
}

.topbar__orbit--inner {
  width: 12.5rem;
  height: 12.5rem;
  border-color: rgba(211, 159, 34, .16);
}

.topbar__signal {
  position: absolute;
  z-index: 3;
  width: .58rem;
  height: .58rem;
  border: .14rem solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: #7667ef;
  box-shadow: 0 0 0 .38rem rgba(118, 103, 239, .1);
}

.topbar__signal--one {
  top: 3.15rem;
  right: 1.35rem;
}

.topbar__signal--two {
  right: 3rem;
  bottom: 3.4rem;
  background: #dfad32;
  box-shadow: 0 0 0 .38rem rgba(223, 173, 50, .11);
}

.topbar__signal--three {
  bottom: 2.25rem;
  left: 1.75rem;
  width: .38rem;
  height: .38rem;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

:root[data-theme="dark"] .topbar {
  border-color: rgba(159, 151, 255, .13);
  background:
    radial-gradient(circle at 78% 26%, rgba(217, 164, 37, .15), transparent 19rem),
    radial-gradient(circle at 93% 86%, rgba(112, 94, 233, .19), transparent 19rem),
    linear-gradient(116deg, rgba(25, 30, 43, .98), rgba(24, 26, 54, .96) 58%, rgba(31, 27, 55, .95));
}

:root[data-theme="dark"] .topbar__identity h1 {
  color: #f2f2ff;
}

:root[data-theme="dark"] .topbar__identity h1 > span {
  color: #f0bf4e;
}

:root[data-theme="dark"] .topbar__description {
  color: #b2b7d0;
}

:root[data-theme="dark"] .topbar__kicker {
  border-color: rgba(166, 156, 255, .18);
  background: rgba(54, 51, 91, .54);
  color: #c3bcff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (max-width: 69.99rem) {
  .topbar {
    min-height: 12.5rem;
    padding: 1.65rem 1.5rem;
    grid-template-columns: minmax(0, 1fr) 15rem;
  }

  .topbar__mascot {
    right: 5.25rem;
    bottom: .1rem;
    width: 16rem;
    height: 11rem;
  }

  .topbar__mascot img {
    width: 12.3rem;
  }

  .topbar__orbit--outer {
    width: 15rem;
    height: 15rem;
  }

  .topbar__orbit--inner {
    width: 10rem;
    height: 10rem;
  }
}

@media (max-width: 53.99rem) {
  .topbar {
    min-height: 17rem;
    padding: 3.8rem 1.1rem 1.2rem;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .topbar__identity > .topbar__copy {
    max-width: 100%;
  }

  .topbar__kicker {
    min-height: 1.85rem;
    margin-bottom: .68rem;
    font-size: .68rem;
  }

  .topbar__identity h1 {
    letter-spacing: -.045em;
  }

  .topbar__description {
    margin-top: .72rem;
    line-height: 1.65;
  }

  .topbar__mascot {
    right: -.6rem;
    bottom: -1rem;
    width: 11.8rem;
    height: 12.5rem;
  }

  .topbar__mascot img {
    width: 10.6rem;
  }

  .topbar__orbit--outer {
    width: 11.4rem;
    height: 11.4rem;
  }

  .topbar__orbit--inner {
    width: 7.8rem;
    height: 7.8rem;
  }

  .topbar__signal--one {
    top: 1.3rem;
    right: .4rem;
  }

  .topbar__signal--two {
    right: 1rem;
    bottom: 1.8rem;
  }

  .topbar__signal--three {
    bottom: 1.1rem;
    left: .8rem;
  }

  .topbar__actions {
    top: .72rem;
  }
}

@media (max-width: 39rem) {
  .topbar {
    min-height: 18rem;
  }

  .topbar__identity h1 {
    max-width: 90%;
  }

  .topbar__description {
    max-width: 68%;
  }

  .topbar__mascot {
    right: -1.8rem;
    width: 10.4rem;
    height: 11.4rem;
  }

  .topbar__mascot img {
    width: 9rem;
  }

  .topbar__orbit--outer {
    width: 10rem;
    height: 10rem;
  }
}

/* V22 · refined hero lockup, quiet utilities and wealth trail */
.topbar__kicker {
  min-height: 1.85rem;
  margin-bottom: .72rem;
  padding: .3rem .68rem;
  font-size: .69rem;
}

.topbar__identity > .topbar__copy {
  max-width: 38rem;
}

.topbar__identity h1 {
  display: flex;
  max-width: 38rem;
  align-items: center;
  flex-wrap: nowrap;
  color: #191b4a;
  font-size: clamp(2rem, 3.15vw, 3rem);
  font-weight: 820;
  line-height: 1.08;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.topbar__jin-lockup {
  display: inline-flex;
  align-items: center;
  color: #b17a08;
  font-size: .88em;
  text-shadow: none;
}

.topbar__jin-lockup > span {
  position: relative;
  z-index: 2;
  opacity: .72;
  transform: translateY(-.04em);
}

.topbar__jin-lockup > span:first-child {
  margin-right: -.07em;
}

.topbar__jin-lockup > span:last-child {
  margin-left: -.08em;
}

.topbar__jin-lockup img {
  display: block;
  object-fit: contain;
}

.topbar__description {
  max-width: 38rem;
  margin-top: .82rem;
  font-size: clamp(.84rem, 1vw, .98rem);
  line-height: 1.68;
}

.topbar__actions {
  position: fixed;
  z-index: 90;
  top: auto;
  right: 1rem;
  bottom: 1rem;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.topbar__actions .theme-toggle {
  width: 3rem;
  height: 3rem;
  border-color: rgba(125, 137, 161, .2);
  background: rgba(249, 251, 255, .82);
  box-shadow:
    0 .8rem 2.1rem rgba(39, 55, 82, .16),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(1.1rem) saturate(145%);
  -webkit-backdrop-filter: blur(1.1rem) saturate(145%);
}

body.card-focus-open .topbar__actions,
body.instruction-open .topbar__actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(.5rem);
}

.panel--instruction {
  padding: .34rem !important;
}

.side-instruction-trigger {
  display: grid;
  width: 100%;
  min-height: 3.25rem;
  padding: .52rem .6rem;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .52rem;
  border: 1px solid rgba(115, 131, 157, .13);
  border-radius: .75rem;
  background: rgba(246, 249, 253, .68);
  color: var(--text);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.side-instruction-trigger:hover {
  border-color: rgba(69, 137, 236, .24);
  background: rgba(239, 246, 255, .9);
  transform: translateY(-1px);
}

.side-instruction-trigger__icon {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid rgba(69, 137, 236, .16);
  border-radius: .65rem;
  background: rgba(69, 137, 236, .1);
  color: #327ed8;
}

.side-instruction-trigger__icon svg,
.side-instruction-trigger__arrow {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.side-instruction-trigger__copy {
  display: grid;
  min-width: 0;
  gap: .08rem;
}

.side-instruction-trigger__copy strong {
  font-size: .7rem;
  font-weight: 780;
}

.side-instruction-trigger__copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-instruction-trigger__arrow {
  width: .85rem;
  height: .85rem;
  color: var(--muted);
}

.topbar__wealth-trail {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.topbar__wealth-ray {
  position: absolute;
}

.topbar__wealth-coin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: .11rem solid #ffd769;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffed9d, #e9a91c 62%, #b96d05);
  animation: wealth-coin-drift 3.8s ease-in-out infinite;
}

.topbar__wealth-coin::after {
  border: .07rem solid rgba(138, 76, 3, .62);
  border-radius: .05rem;
  content: "";
}

.topbar__wealth-coin--one {
  animation-delay: -1.4s;
}

.topbar__wealth-coin--two {
  width: .72rem;
  height: .72rem;
  animation-delay: -2.6s;
}

.topbar__wealth-coin--three {
  width: .78rem;
  height: .78rem;
  animation-delay: -.7s;
}

.topbar__wealth-coin--four {
  width: .64rem;
  height: .64rem;
  animation-delay: -3.1s;
}

.topbar__wealth-spark {
  position: absolute;
  z-index: 3;
  animation: wealth-spark-twinkle 2.4s ease-in-out infinite;
}

.topbar__wealth-spark--one {
  animation-delay: -.3s;
}

.topbar__wealth-spark--two {
  width: .22rem;
  height: .22rem;
  animation-delay: -1.4s;
}

.topbar__wealth-spark--three {
  width: .38rem;
  height: .38rem;
  animation-delay: -.9s;
}

.topbar__wealth-spark--four {
  width: .2rem;
  height: .2rem;
  animation-delay: -2s;
}

@keyframes wealth-coin-drift {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: .12rem -.28rem;
  }
}

@keyframes wealth-spark-twinkle {
  0%,
  100% {
    opacity: .35;
    scale: .72;
  }

  50% {
    opacity: 1;
    scale: 1.15;
  }
}

:root[data-theme="dark"] .topbar__jin-lockup {
  color: #efbd48;
}

:root[data-theme="dark"] .topbar__actions .theme-toggle {
  border-color: rgba(211, 224, 244, .12);
  background: rgba(18, 24, 35, .78);
  box-shadow:
    0 .9rem 2.2rem rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .side-instruction-trigger {
  border-color: rgba(212, 229, 255, .09);
  background: rgba(23, 31, 44, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

:root[data-theme="dark"] .side-instruction-trigger:hover {
  border-color: rgba(93, 166, 255, .24);
  background: rgba(29, 41, 57, .9);
}

:root[data-theme="dark"] .side-instruction-trigger__icon {
  border-color: rgba(93, 166, 255, .16);
  background: rgba(69, 137, 236, .12);
  color: #76b5ff;
}

@media (min-width: 70rem) {
  .side-panel,
  body.batch-panel-open .side-panel {
    grid-template-rows: auto auto auto auto;
  }
}

@media (max-width: 69.99rem) {
  .topbar__identity h1 {
    max-width: 31rem;
    font-size: clamp(1.86rem, 4.3vw, 2.55rem);
  }

  .topbar__description {
    max-width: 31rem;
  }

  .topbar__wealth-trail {
    transform: scale(.86);
    transform-origin: right center;
  }
}

@media (max-width: 53.99rem) {
  .topbar__identity h1 {
    max-width: none;
    font-size: clamp(1.62rem, 6.7vw, 2.08rem);
  }

  .topbar__description {
    max-width: 70%;
    font-size: .79rem;
  }

  .topbar__wealth-trail {
    transform: scale(.62);
  }

  .topbar__actions {
    right: .75rem;
    bottom: .75rem;
  }

  .topbar__actions .theme-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__wealth-coin,
  .topbar__wealth-spark {
    animation: none;
  }
}

/* V23 · flowing gold mark and layered fortune spray */
.topbar__jin-lockup {
  position: relative;
  width: 1.35em;
  height: 1.38em;
  margin: -.15em -.015em -.12em .015em;
  flex: 0 0 auto;
  letter-spacing: normal;
  transform: translateY(.035em);
}

.topbar__jin-lockup::before {
  position: absolute;
  z-index: -1;
  inset: 17% 11% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 208, 80, .22), transparent 68%);
  content: "";
  filter: blur(.16em);
}

.topbar__jin-lockup img {
  width: 1.35em;
  height: 1.35em;
  filter:
    contrast(1.13)
    saturate(1.12)
    drop-shadow(0 .045em 0 rgba(130, 73, 0, .5))
    drop-shadow(0 .12em .16em rgba(168, 96, 4, .25));
}

.topbar__wealth-trail {
  top: 2.55rem;
  left: -8rem;
  width: 14.5rem;
  height: 8.2rem;
}

.topbar__wealth-ray {
  animation: wealth-ray-breathe 3.6s ease-in-out infinite;
}

.topbar__wealth-ray::before,
.topbar__wealth-ray::after {
  position: absolute;
}

.topbar__wealth-ray::before {
  background: linear-gradient(90deg, transparent, rgba(255, 224, 127, .09) 48%, rgba(255, 247, 205, .7));
  clip-path: polygon(3% 44%, 100% 47%, 100% 53%, 3% 58%);
}

.topbar__wealth-ray::after {
  background:
    linear-gradient(8deg, transparent 43%, rgba(255, 225, 123, .3) 49%, transparent 54%),
    linear-gradient(-11deg, transparent 45%, rgba(255, 242, 190, .22) 50%, transparent 55%);
}

.topbar__wealth-coin {
  width: var(--coin-size, .75rem);
  height: var(--coin-size, .75rem);
  border-width: max(.075rem, calc(var(--coin-size, .75rem) * .11));
  box-shadow:
    0 0 0 .1rem rgba(246, 179, 31, .1),
    0 .18rem .7rem rgba(186, 105, 4, .32),
    0 0 .85rem rgba(255, 212, 88, .3);
  rotate: var(--coin-rotation, 0deg);
  transform: none;
  animation-duration: var(--coin-duration, 4s);
}

.topbar__wealth-coin::after {
  width: calc(var(--coin-size, .75rem) * .28);
  height: calc(var(--coin-size, .75rem) * .28);
  border-width: max(.045rem, calc(var(--coin-size, .75rem) * .065));
}

.topbar__wealth-coin--one {
  top: 3.35rem;
  left: .35rem;
  --coin-size: 1.08rem;
  --coin-rotation: -23deg;
  --coin-duration: 4.8s;
}

.topbar__wealth-coin--two {
  top: .48rem;
  left: 2.15rem;
  --coin-size: .56rem;
  --coin-rotation: 19deg;
  --coin-duration: 3.5s;
}

.topbar__wealth-coin--three {
  top: 6.2rem;
  left: 3.45rem;
  --coin-size: .74rem;
  --coin-rotation: 33deg;
  --coin-duration: 4.2s;
}

.topbar__wealth-coin--four {
  top: 1.78rem;
  left: 4.95rem;
  --coin-size: .9rem;
  --coin-rotation: -11deg;
  --coin-duration: 4.6s;
}

.topbar__wealth-coin--five {
  top: 5.15rem;
  left: 6.3rem;
  --coin-size: .46rem;
  --coin-rotation: 28deg;
  --coin-duration: 3.2s;
  animation-delay: -1.8s;
}

.topbar__wealth-coin--six {
  top: .9rem;
  left: 7.6rem;
  --coin-size: .62rem;
  --coin-rotation: -31deg;
  --coin-duration: 4.1s;
  animation-delay: -2.9s;
}

.topbar__wealth-coin--seven {
  top: 4.7rem;
  left: 8.95rem;
  --coin-size: .82rem;
  --coin-rotation: 13deg;
  --coin-duration: 4.7s;
  animation-delay: -.5s;
}

.topbar__wealth-coin--eight {
  top: 2.2rem;
  left: 10.25rem;
  --coin-size: .43rem;
  --coin-rotation: 38deg;
  --coin-duration: 3.1s;
  animation-delay: -2.2s;
}

.topbar__wealth-coin--nine {
  top: 3.95rem;
  left: 11.45rem;
  --coin-size: .57rem;
  --coin-rotation: -17deg;
  --coin-duration: 3.8s;
  animation-delay: -1.1s;
}

.topbar__wealth-coin--ten {
  top: 3.05rem;
  left: 12.75rem;
  --coin-size: .34rem;
  --coin-rotation: 21deg;
  --coin-duration: 2.9s;
  animation-delay: -2.5s;
}

.topbar__wealth-spark {
  width: var(--spark-size, .68rem);
  height: var(--spark-size, .68rem);
  background: transparent;
  box-shadow: none;
  transform: none;
  animation-duration: var(--spark-duration, 2.6s);
}

.topbar__wealth-spark::before,
.topbar__wealth-spark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: #fff4bb;
  box-shadow: 0 0 .8rem rgba(255, 211, 88, .92);
  content: "";
  transform: translate(-50%, -50%);
}

.topbar__wealth-spark::before {
  width: 100%;
  height: 18%;
}

.topbar__wealth-spark::after {
  width: 18%;
  height: 100%;
}

.topbar__wealth-spark--one {
  top: .55rem;
  left: .7rem;
  --spark-size: .82rem;
  --spark-duration: 3s;
}

.topbar__wealth-spark--two {
  top: 5.55rem;
  left: 1.8rem;
  --spark-size: .43rem;
}

.topbar__wealth-spark--three {
  top: 1.15rem;
  left: 4rem;
  --spark-size: .58rem;
}

.topbar__wealth-spark--four {
  top: 6.35rem;
  left: 5.25rem;
  --spark-size: .7rem;
}

.topbar__wealth-spark--five {
  top: 3.65rem;
  left: 6.95rem;
  --spark-size: .35rem;
  --spark-duration: 2.1s;
  animation-delay: -1.3s;
}

.topbar__wealth-spark--six {
  top: 1.45rem;
  left: 9.2rem;
  --spark-size: .5rem;
  animation-delay: -2s;
}

.topbar__wealth-spark--seven {
  top: 5.55rem;
  left: 10.45rem;
  --spark-size: .28rem;
  --spark-duration: 2s;
  animation-delay: -.7s;
}

.topbar__wealth-spark--eight {
  top: 2.95rem;
  left: 12rem;
  --spark-size: .42rem;
  animation-delay: -1.7s;
}

.topbar__wealth-dust {
  position: absolute;
  z-index: 3;
  width: var(--dust-size, .18rem);
  height: var(--dust-size, .18rem);
  border-radius: 50%;
  background: #ffe580;
  box-shadow:
    0 0 .35rem rgba(255, 211, 92, .95),
    0 0 .8rem rgba(255, 187, 34, .4);
  animation: wealth-dust-float var(--dust-duration, 3.4s) ease-in-out infinite;
}

.topbar__wealth-dust--one {
  top: 2.3rem;
  left: .15rem;
  --dust-size: .24rem;
  --dust-duration: 3.8s;
}

.topbar__wealth-dust--two {
  top: 6.9rem;
  left: 2.55rem;
  --dust-size: .12rem;
  animation-delay: -1.2s;
}

.topbar__wealth-dust--three {
  top: 3.15rem;
  left: 3.25rem;
  --dust-size: .2rem;
  --dust-duration: 4.1s;
  animation-delay: -2.5s;
}

.topbar__wealth-dust--four {
  top: .35rem;
  left: 5.65rem;
  --dust-size: .14rem;
  animation-delay: -.6s;
}

.topbar__wealth-dust--five {
  top: 6.05rem;
  left: 7.7rem;
  --dust-size: .22rem;
  --dust-duration: 3.1s;
  animation-delay: -1.9s;
}

.topbar__wealth-dust--six {
  top: 2.72rem;
  left: 8.15rem;
  --dust-size: .13rem;
  animation-delay: -2.8s;
}

.topbar__wealth-dust--seven {
  top: 4.45rem;
  left: 10.05rem;
  --dust-size: .18rem;
  --dust-duration: 2.8s;
  animation-delay: -.9s;
}

.topbar__wealth-dust--eight {
  top: 3.4rem;
  left: 13.35rem;
  --dust-size: .12rem;
  animation-delay: -1.5s;
}

@keyframes wealth-ray-breathe {
  0%,
  100% {
    opacity: .74;
    scale: .98 .94;
  }

  50% {
    opacity: 1;
    scale: 1 1.04;
  }
}

@keyframes wealth-dust-float {
  0%,
  100% {
    opacity: .32;
    translate: 0 .12rem;
    scale: .75;
  }

  50% {
    opacity: 1;
    translate: .16rem -.24rem;
    scale: 1.15;
  }
}

:root[data-theme="dark"] .topbar__jin-lockup img {
  filter:
    contrast(1.2)
    saturate(1.18)
    drop-shadow(0 .045em 0 rgba(86, 42, 0, .8))
    drop-shadow(0 0 .22em rgba(255, 207, 83, .42));
}

@media (max-width: 69.99rem) {
  .topbar__wealth-trail {
    top: 2.85rem;
    left: -8.4rem;
  }
}

@media (max-width: 53.99rem) {
  .topbar__jin-lockup {
    width: 1.26em;
    height: 1.3em;
  }

  .topbar__jin-lockup img {
    width: 1.27em;
    height: 1.27em;
  }

  .topbar__wealth-trail {
    top: 3.6rem;
    left: -8.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__wealth-ray,
  .topbar__wealth-dust {
    animation: none;
  }
}

/* V24 · curved galaxy trail without a geometric light cone */
.topbar__wealth-ray {
  top: -.05rem;
  right: -.45rem;
  width: 15rem;
  height: 8.1rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 20% 18% at 98% 53%, rgba(255, 249, 214, .92), transparent 68%),
    radial-gradient(ellipse 88% 55% at 96% 55%, rgba(255, 205, 73, .18), rgba(246, 174, 28, .07) 46%, transparent 73%);
  clip-path: none;
  filter: blur(.12rem);
  opacity: 1;
  rotate: -1deg;
  transform-origin: right center;
}

.topbar__wealth-ray::before,
.topbar__wealth-ray::after {
  inset: auto;
  border-style: solid;
  border-radius: 50%;
  background: none;
  clip-path: none;
  content: "";
  transform: none;
  pointer-events: none;
}

.topbar__wealth-ray::before {
  top: .35rem;
  left: -15.2rem;
  width: 30rem;
  height: 8.4rem;
  border-width: 1.25rem;
  border-color: rgba(255, 200, 63, .2);
  filter: blur(.72rem);
  opacity: .9;
  box-shadow:
    0 -.45rem 1.4rem rgba(255, 218, 109, .14),
    0 .85rem 1.8rem rgba(230, 145, 20, .1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 46%, rgba(0, 0, 0, .2) 53%, #000 88%, rgba(0, 0, 0, .82) 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0 46%, rgba(0, 0, 0, .2) 53%, #000 88%, rgba(0, 0, 0, .82) 96%, transparent 100%);
}

.topbar__wealth-ray::after {
  top: .86rem;
  left: -14.6rem;
  width: 29.45rem;
  height: 7.25rem;
  border-width: .13rem;
  border-color: rgba(255, 238, 172, .72);
  filter:
    blur(.06rem)
    drop-shadow(0 0 .32rem rgba(255, 218, 104, .7))
    drop-shadow(0 .5rem .55rem rgba(242, 172, 42, .24));
  opacity: .88;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 47%, rgba(0, 0, 0, .14) 54%, #000 86%, rgba(0, 0, 0, .9) 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0 47%, rgba(0, 0, 0, .14) 54%, #000 86%, rgba(0, 0, 0, .9) 97%, transparent 100%);
}

:root[data-theme="dark"] .topbar__wealth-ray {
  background:
    radial-gradient(ellipse 20% 18% at 98% 53%, rgba(255, 250, 218, .98), transparent 68%),
    radial-gradient(ellipse 88% 55% at 96% 55%, rgba(255, 205, 73, .22), rgba(246, 174, 28, .08) 46%, transparent 73%);
}

:root[data-theme="dark"] .topbar__wealth-ray::before {
  border-color: rgba(255, 200, 63, .24);
  box-shadow:
    0 -.45rem 1.5rem rgba(255, 218, 109, .18),
    0 .9rem 2rem rgba(230, 145, 20, .12);
}

@media (max-width: 53.99rem) {
  .topbar__wealth-ray {
    rotate: -2deg;
  }
}