/* [project]/src/styles/journeyHeaderSky.css [app-client] (css) */
.jhs-root {
  pointer-events: none;
  z-index: 0;
  background-color: var(--j-bg-a, #141f33);
  background-image: radial-gradient(circle at 50% 0%, var(--j-glow-a, #38bdf838), transparent 38%),
    radial-gradient(circle at 85% 90%, var(--j-glow-b, #6366f126), transparent 32%),
    linear-gradient(180deg, var(--j-bg-a, #141f33) 0%, var(--j-bg-b, #1a2850) 42%, var(--j-bg-c, #243047) 100%);
  transition: background 1.4s;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.jhs-starfield {
  width: 100%;
  height: 100%;
  opacity: var(--j-stars, .85);
  position: absolute;
  inset: 0;
}

.jhs-stars, .jhs-starsBright {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.jhs-stars {
  opacity: calc(var(--j-stars, .85) * .9);
  background-image: radial-gradient(1.5px 1.5px at 8% 12%, #ffffffd9, #0000), radial-gradient(1px 1px at 15% 28%, #ffffff8c, #0000), radial-gradient(1px 1px at 22% 8%, #ffffffa6, #0000), radial-gradient(2px 2px at 31% 22%, #ffffff80, #0000), radial-gradient(1px 1px at 48% 14%, #ffffffb3, #0000), radial-gradient(1px 1px at 62% 6%, #fff9, #0000), radial-gradient(1px 1px at 78% 42%, #ffffff59, #0000), radial-gradient(2px 2px at 85% 10%, #ffffffbf, #0000);
}

.jhs-starsBright {
  opacity: calc(var(--j-stars, .85) * .55);
  background-image: radial-gradient(2px 2px at 25% 18%, #c8e6ffe6, #0000), radial-gradient(1.5px 1.5px at 52% 8%, #fffc, #0000), radial-gradient(2px 2px at 68% 36%, #fff8dcb3, #0000);
}

.jhs-nebula {
  filter: blur(24px);
  pointer-events: none;
  opacity: calc(var(--j-planets, 1) * .55);
  border-radius: 50%;
  position: absolute;
}

.jhs-nebula1 {
  background: radial-gradient(#6366f138, #0000 70%);
  width: 55%;
  height: 35%;
  top: 5%;
  left: -8%;
}

.jhs-nebula2 {
  background: radial-gradient(#38bdf826, #0000 68%);
  width: 45%;
  height: 30%;
  top: 12%;
  right: -5%;
}

.jhs-nebula3 {
  width: 70%;
  height: 20%;
  opacity: calc(var(--j-planets, 1) * .7);
  filter: blur(18px);
  background: radial-gradient(#b4643c1f, #0000 72%);
  bottom: 28%;
  left: 15%;
}

.jhs-planetWrap {
  aspect-ratio: 1;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.4s;
  position: absolute;
}

.jhs-planetBody {
  background: radial-gradient(circle at 32% 28%, #ffffff24, #ffffff08 50%, #0000 72%);
  border: 1px solid #ffffff12;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
  box-shadow: inset -6px -5px 16px #00000059;
}

.jhs-planetRing {
  pointer-events: none;
  border: 1px solid #ffffff0f;
  border-radius: 50%;
  width: 128%;
  height: 26%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px #ffffff08;
}

.jhs-planetWrap--a {
  width: 88px;
  top: 4%;
  right: 4%;
}

.jhs-planetWrap--a .jhs-planetRing {
  transform: translate(-50%, -50%)rotate(-12deg);
}

.jhs-planetWrap--b {
  width: 58px;
  top: 16%;
  left: 6%;
}

.jhs-planetWrap--b .jhs-planetRing {
  transform: translate(-50%, -50%)rotate(18deg);
}

.jhs-planetWrap--c {
  width: 36px;
  top: 8%;
  left: 38%;
}

.jhs-planetWrap--c .jhs-planetRing {
  width: 135%;
  height: 30%;
  transform: translate(-50%, -50%)rotate(-22deg);
}

.jhs-planetWrap--d {
  width: 44px;
  top: 28%;
  right: 28%;
}

.jhs-planetWrap--d .jhs-planetRing {
  transform: translate(-50%, -50%)rotate(10deg);
}

.jhs-planetWrap {
  transition: opacity 1.4s;
  opacity: 0 !important;
}

.jhs-root[data-period="night"] .jhs-planetWrap--a {
  opacity: calc(var(--j-planets, 1) * .42) !important;
}

.jhs-root[data-period="night"] .jhs-planetWrap--b {
  opacity: calc(var(--j-planets, 1) * .32) !important;
}

.jhs-root[data-period="night"] .jhs-planetWrap--c {
  opacity: calc(var(--j-planets, 1) * .24) !important;
}

.jhs-root[data-period="night"] .jhs-planetWrap--d {
  opacity: calc(var(--j-planets, 1) * .18) !important;
}

.jhs-root[data-period="dusk"] .jhs-planetWrap--a {
  opacity: calc(var(--j-planets, 1) * .14) !important;
}

.jhs-root[data-period="dusk"] .jhs-planetWrap--b {
  opacity: calc(var(--j-planets, 1) * .1) !important;
}

.jhs-shootingLayer {
  z-index: 6;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.jhs-shootingStar {
  transform-origin: 0%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0000 0%, #ffffff59 65%, #fffffff2 100%);
  border-radius: 2px;
  width: 52px;
  height: 2px;
  position: absolute;
}

@keyframes jhsShootStar {
  0% {
    opacity: 0;
    transform: rotate(var(--jhs-angle, 28deg)) translateX(0) scaleX(.4);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(var(--jhs-angle, 28deg)) translateX(110px) translateY(62px) scaleX(1);
  }
}

.jhs-shootingStar.is-active {
  animation: 1.15s ease-out forwards jhsShootStar;
}

.jhs-moon {
  z-index: 3;
  opacity: 0;
  width: 28px;
  height: 28px;
  transition: opacity 1.4s;
  position: absolute;
  top: 24%;
  left: auto;
  right: 11%;
}

.jhs-root[data-period="night"] .jhs-moon {
  opacity: 1;
}

.jhs-moon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.jhs-root[data-period="day_pm"]:before, .jhs-root[data-period="day_am"]:before {
  content: "";
  pointer-events: none;
  z-index: 1;
  position: absolute;
}

.jhs-root[data-period="day_am"]:before {
  background: radial-gradient(circle, #ffd28266 0%, #0000 68%);
  width: 45%;
  height: 38%;
  top: -5%;
  left: 18%;
}

.jhs-root[data-period="day_pm"]:before {
  background: radial-gradient(75% 65% at 48% 38%, #ffebbe57 0%, #ffd28c24 42%, #0000 72%);
  width: 90%;
  height: 58%;
  top: -18%;
  left: 5%;
}

.jhs-headerOverlay {
  background: linear-gradient(#1a10301a 0%, #0000 32% 52%, #140a2847 68%, #140a287a 82%, #0000 100%);
}

[data-sky-period="day_pm"] .jhs-headerOverlay, [data-sky-period="day_am"] .jhs-headerOverlay {
  background: linear-gradient(#0000 0% 50%, #0f192d1f 68%, #0f192d47 84%, #0000 100%);
}

.jhs-skyTowers {
  height: 62%;
  opacity: max(.72, calc(var(--j-ridge, .9) * .98));
  z-index: 7;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.jhs-skyTowers svg {
  width: 100%;
  height: 100%;
  display: block;
}

.jhs-horizonGlow {
  background: linear-gradient(180deg,
    transparent 0%,
    var(--j-horizon, #c47a3a59) 55%,
    var(--j-horizon-deep, #502d1433) 100%);
  z-index: 3;
  pointer-events: none;
  height: 45%;
  position: absolute;
  bottom: 0;
  left: -10%;
  right: -10%;
}

.jhs-ridge {
  height: 38%;
  min-height: 58px;
  opacity: max(.68, var(--j-ridge, .9));
  z-index: 8;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.jhs-ridge svg {
  width: 100%;
  height: 100%;
  display: block;
}

.jhs-dustBand {
  opacity: .4;
  z-index: 4;
  background: radial-gradient(1px 1px at 14%, #ffdca073, #0000), radial-gradient(1px 1px at 40% 58%, #ffdca073, #0000), radial-gradient(1px 1px at 70% 55%, #ffdca073, #0000);
  height: 20px;
  position: absolute;
  bottom: 8%;
  left: 5%;
  right: 5%;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
}

.jhs-aurora {
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  filter: blur(11px) saturate(1.28);
  background: linear-gradient(118deg, #0000 8%, #37e1b438 24%, #4bafeb29 38%, #0000 54%) 0 0 / 130% 110%, linear-gradient(168deg, #0000 28%, #7d5fe12e 44%, #32cdb921 56%, #0000 70%) 0 0 / 125% 105%, linear-gradient(#0000 0%, #41c3eb1a 22%, #7358d226 48%, #0000 72%) 0 0 / 100% 100%;
  height: 62%;
  animation: 26s ease-in-out infinite jhsAuroraFlow;
  position: absolute;
  top: -5%;
  left: -8%;
  right: -8%;
}

.jhs-aurora:before {
  content: "";
  filter: blur(5px);
  background: repeating-linear-gradient(94deg, #0000 0% 4%, #32dcaf21 5%, #559be11a 7%, #0000 9% 14%) 0 0 / 200% 100%;
  animation: 32s ease-in-out infinite jhsAuroraCurtains;
  position: absolute;
  inset: 0;
}

.jhs-aurora:after {
  content: "";
  filter: blur(10px);
  background: linear-gradient(#32d2af29 0%, #5096d71f 36%, #7358c81a 62%, #0000 100%);
  height: 100%;
  animation: 22s ease-in-out infinite jhsAuroraVeil;
  position: absolute;
  top: 0;
  left: 18%;
  right: 22%;
}

.jhs-root[data-weather="aurora"] .jhs-aurora {
  opacity: .88;
}

.jhs-root[data-weather="aurora"] .jhs-nebula3 {
  opacity: 0 !important;
}

.jhs-root[data-weather="aurora"] .jhs-accent--dayShimmer, .jhs-root[data-weather="aurora"] .jhs-accent--dayRays {
  opacity: 0 !important;
  animation: none !important;
}

@keyframes jhsAuroraFlow {
  0%, 100% {
    background-position: 0 0, 100% 0, 50% 0;
    transform: translateX(-1.5%)translateY(0)skewX(0);
  }

  33% {
    background-position: 12% 3%, 88% 2%, 48% 4%;
    transform: translateX(1.5%)translateY(-.8%)skewX(-.8deg);
  }

  66% {
    background-position: 6% -2%, 94% 4%, 52% -3%;
    transform: translateX(.5%)translateY(.6%)skewX(.6deg);
  }
}

@keyframes jhsAuroraCurtains {
  0%, 100% {
    opacity: .7;
    background-position: 0 0;
    transform: translateX(-2%)skewX(0);
  }

  50% {
    opacity: 1;
    background-position: 100% 0;
    transform: translateX(2%)skewX(-1deg);
  }
}

@keyframes jhsAuroraVeil {
  0%, 100% {
    opacity: .55;
    transform: translateY(0)scaleY(1);
  }

  50% {
    opacity: .78;
    transform: translateY(-2%)scaleY(1.04);
  }
}

.jhs-clouds {
  opacity: 0;
  z-index: 2;
  transition: opacity 2s;
  position: absolute;
  inset: 0 0 35%;
}

.jhs-root[data-weather="clouds"] .jhs-clouds, .jhs-root[data-weather="rain"] .jhs-clouds {
  opacity: .85;
}

.jhs-root[data-weather="lightning"] {
  --j-bg-a: #141820;
  --j-bg-b: #1e2430;
  --j-bg-c: #2a3344;
  --j-glow-a: #505a781f;
  --j-glow-b: #3c466414;
  --j-stars: .02;
}

.jhs-root[data-weather="lightning"] .jhs-clouds {
  opacity: 0;
}

.jhs-root[data-weather="lightning"] .jhs-accent--dayShimmer, .jhs-root[data-weather="lightning"] .jhs-accent--dayRays, .jhs-root[data-weather="lightning"] .jhs-accent--sunsetRays {
  opacity: 0 !important;
}

.jhs-root[data-weather="lightning"] .jhs-horizonGlow {
  opacity: .35;
  filter: brightness(.55);
}

.jhs-lightningVeil {
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(#0c0e16c7 0%, #1c202c6b 38%, #242a381f 62%, #0000 78%);
  transition: opacity 1.6s;
  position: absolute;
  inset: 0;
}

.jhs-root[data-weather="lightning"] .jhs-lightningVeil {
  opacity: 1;
}

.jhs-cloud {
  filter: blur(10px);
  background: radial-gradient(at 40% 40%, #ffffff59 0%, #dce1eb1f 55%, #0000 72%);
  border-radius: 50%;
  position: absolute;
}

.jhs-cloud:first-child {
  width: 48%;
  height: 28%;
  top: 8%;
  left: -8%;
}

.jhs-cloud:nth-child(2) {
  width: 55%;
  height: 30%;
  top: 18%;
  left: 28%;
}

.jhs-cloud:nth-child(3) {
  width: 40%;
  height: 26%;
  top: 6%;
  right: -10%;
}

.jhs-particles {
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.jhs-root[data-weather="rain"] .jhs-particles, .jhs-root[data-weather="snow"] .jhs-particles, .jhs-root[data-weather="lightning"] .jhs-particles {
  opacity: 1;
}

.jhs-fog {
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 2s;
  position: absolute;
  inset: 0;
}

.jhs-root[data-weather="mist"] .jhs-fog {
  opacity: 1;
  background: radial-gradient(110% 38% at 50% 92%, #ffffff29 0%, #0000 68%), linear-gradient(#0000 55%, #dce4f00d 100%);
}

.jhs-root[data-weather="fog"] .jhs-fog {
  opacity: 1;
  background: linear-gradient(#0000 0%, #d2dceb1a 38%, #e1e8f561 68%, #eef2fa8c 100%);
}

.jhs-skyAccents {
  z-index: 6;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.jhs-accent {
  opacity: 0;
  transition: opacity 1.4s;
  position: absolute;
  inset: 0;
}

.jhs-accent--comet {
  filter: blur(1px);
  background: linear-gradient(128deg, #0000 42%, #ffdcb48c 48%, #ffffff59 49.5%, #0000 56%);
}

.jhs-root[data-period="dawn"] .jhs-accent--comet, .jhs-root[data-period="dusk"] .jhs-accent--comet, .jhs-root[data-period="night"] .jhs-accent--comet {
  opacity: .5;
  --jhs-comet-max: .55;
  animation: 18s ease-in-out infinite jhsCometDrift;
}

.jhs-root[data-period="night"] .jhs-accent--comet {
  opacity: .28;
  --jhs-comet-max: .3;
}

.jhs-accent--sunsetRays {
  background: conic-gradient(from 220deg at 88% 8%, #0000 0deg, #ffb45038 18deg, #0000 42deg, #ff783c26 58deg, #0000 80deg);
}

.jhs-root[data-period="sunset"] .jhs-accent--sunsetRays {
  opacity: .9;
}

.jhs-accent--dayShimmer {
  opacity: 0;
  background: repeating-linear-gradient(102deg, #0000 0%, #ffdcaa12 8%, #fff0c824 12%, #0000 20%) 0 0 / 180% 100%;
  background-position: var(--jhs-shimmer-x, 0%) 0;
  filter: blur(6px);
  animation: 16s ease-in-out infinite jhsShimmerDrift;
}

.jhs-root[data-period="day_am"] .jhs-accent--dayShimmer {
  opacity: .75;
}

.jhs-accent--dayRays {
  opacity: 0;
  background: linear-gradient(var(--jhs-ray-angle, 188deg),
      transparent 0%,
      transparent 38%,
      #fff5dc1a 46%,
      #ffe6b42e 50%,
      #fff5dc1a 54%,
      transparent 62%,
      transparent 100%),
    linear-gradient(calc(var(--jhs-ray-angle, 188deg) + 12deg),
      transparent 42%,
      #ffebc814 50%,
      transparent 58%);
  filter: blur(10px);
  animation: 11s ease-in-out infinite jhsRaysPulse;
}

.jhs-root[data-period="day_pm"] .jhs-accent--dayRays {
  opacity: .8;
}

@keyframes jhsShimmerDrift {
  0%, 100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

@keyframes jhsRaysPulse {
  0%, 100% {
    opacity: .55;
  }

  50% {
    opacity: .9;
  }
}

.jhs-accent--fireflies span {
  opacity: 0;
  background: #beffa0e6;
  border-radius: 50%;
  width: 3px;
  height: 3px;
  animation: 4s ease-in-out infinite jhsFirefly;
  position: absolute;
  box-shadow: 0 0 6px #a0ff78cc;
}

.jhs-root[data-period="dusk"] .jhs-accent--fireflies {
  opacity: 1;
}

.jhs-root[data-period="night"] .jhs-accent--fireflies {
  opacity: .45;
}

@keyframes jhsCometDrift {
  0%, 100% {
    opacity: calc(var(--jhs-comet-max, .9) * .55);
    transform: translateX(-4%)translateY(0);
  }

  50% {
    opacity: var(--jhs-comet-max, .9);
    transform: translateX(4%)translateY(2%);
  }
}

@keyframes jhsFirefly {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }

  35%, 65% {
    opacity: .9;
    transform: translateY(-4px);
  }
}

.jhs-lightning {
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  inset: 0;
}

.jhs-root[data-weather="lightning"] .jhs-lightning {
  opacity: 1;
}

.jhs-lightning-bloom {
  opacity: 0;
  filter: blur(8px);
  background: radial-gradient(40% 80% at 50% 20%, #bae6fdbf 0%, #818cf859 35%, #6366f114 55%, #0000 75%);
  width: 22%;
  height: 72%;
  position: absolute;
  top: 2%;
  transform: translateX(-50%)scale(.15);
}

.jhs-lightning-svg {
  width: 7%;
  height: 62%;
  position: absolute;
  top: 2%;
  overflow: visible;
  transform: translateX(-50%);
}

.jhs-bolt-core {
  fill: none;
  stroke: #f8fafc;
  stroke-width: .65px;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
}

.jhs-bolt-glow {
  fill: none;
  stroke: #93c5fd;
  stroke-width: 2.8px;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
  filter: blur(2px);
}

.jhs-bolt-branch {
  fill: none;
  stroke: #bfdbfeb3;
  stroke-width: .5px;
  stroke-linecap: round;
  opacity: 0;
}

.jhs-lightning.is-strike .jhs-lightning-bloom {
  animation: 1.85s ease-out jhsLightningBloom;
}

.jhs-lightning.is-strike .jhs-bolt-core {
  animation: 1.85s ease-out jhsBoltCore;
}

.jhs-lightning.is-strike .jhs-bolt-glow {
  animation: 1.85s ease-out jhsBoltGlow;
}

.jhs-lightning.is-strike .jhs-bolt-branch {
  animation: 1.85s ease-out jhsBoltBranch;
}

@keyframes jhsLightningBloom {
  0% {
    opacity: 0;
    transform: translateX(-50%)scale(.1);
  }

  8% {
    opacity: 1;
    transform: translateX(-50%)scale(.85);
  }

  25% {
    opacity: .85;
    transform: translateX(-50%)scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%)scale(1.5);
  }
}

@keyframes jhsBoltCore {
  0%, 100% {
    opacity: 0;
  }

  6%, 18% {
    opacity: 1;
  }

  35% {
    opacity: .5;
  }

  55% {
    opacity: .15;
  }
}

@keyframes jhsBoltGlow {
  0%, 100% {
    opacity: 0;
    stroke-width: 2.8px;
  }

  6%, 22% {
    opacity: .95;
    stroke-width: 4.5px;
  }

  40% {
    opacity: .4;
    stroke-width: 6px;
  }

  70% {
    opacity: 0;
    stroke-width: 8px;
  }
}

@keyframes jhsBoltBranch {
  0%, 100% {
    opacity: 0;
  }

  10%, 24% {
    opacity: .8;
  }

  45% {
    opacity: .2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhs-shootingStar.is-active, .jhs-aurora, .jhs-accent--comet, .jhs-accent--dayShimmer, .jhs-accent--dayRays, .jhs-accent--fireflies span, .jhs-aurora, .jhs-aurora:before, .jhs-aurora:after {
    animation: none !important;
  }
}

/* [project]/src/styles/greetingHeader.css [app-client] (css) */
.qhdr-wrap {
  transform-origin: top;
  width: 114.416%;
  margin-bottom: -12%;
  margin-left: -7.208%;
  transform: scale(.874);
}

.qhdr {
  flex-direction: column;
  min-height: 282px;
  padding: 12px 12px 8px;
  display: flex;
}

.qhdr .qhdr-content {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.qhdr .gh-top-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.qhdr .gh-greeting {
  flex: 1;
  align-self: flex-end;
  min-width: 0;
}

.qhdr .gh-hello {
  letter-spacing: .02em;
  color: #ffffffa8;
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
}

.qhdr .gh-name-line {
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #fff;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  display: flex;
}

.qhdr .gh-name-line .gh-name {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.qhdr .gh-name-line .gh-deco {
  flex-shrink: 0;
  align-items: center;
  display: inline-flex;
}

.qhdr .gh-deco-svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.qhdr .gh-pills {
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 4px;
  display: flex;
}

.qhdr .gh-pill {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: default;
  background: #0a0e1c8c;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  font-size: .72rem;
  font-weight: 700;
  transition: transform .15s, border-color .2s, opacity .2s;
  display: flex;
  position: relative;
}

.qhdr .gh-pill.is-claimable {
  cursor: pointer;
  border-color: #ef44448c;
}

.qhdr .gh-pill.is-claimable:hover {
  border-color: #ffffff40;
  transform: translateY(-1px);
}

.qhdr .gh-pill.is-claimable:active {
  transform: scale(.96);
}

.qhdr .gh-pill.is-claiming {
  opacity: .5;
  cursor: not-allowed;
}

.qhdr .gh-pill .gh-ico {
  flex-shrink: 0;
  font-size: .8rem;
  line-height: 1;
}

.qhdr .gh-pill .gh-pill-val {
  text-align: center;
  min-width: 1.1em;
  line-height: 1;
}

.qhdr .gh-pill.is-claimable:after {
  content: "";
  background: #ef4444;
  border: 1.5px solid #1a1030;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1.6s infinite ghPillPing;
  position: absolute;
  top: -2px;
  right: -1px;
}

.qhdr .gh-pill-burst {
  pointer-events: none;
  z-index: 3;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.qhdr .gh-pill-burst-particle {
  opacity: 0;
  font-size: 11px;
  line-height: 1;
  animation: .85s ease-out forwards ghPillBurstFly;
  position: absolute;
  top: 50%;
  left: 50%;
}

@keyframes ghPillBurstFly {
  0% {
    opacity: 0;
    transform: translate(0)scale(.3)rotate(0);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--rbx), var(--rby)) scale(1) rotate(var(--rbr));
  }
}

@keyframes ghPillPing {
  0% {
    box-shadow: 0 0 #ef4444b3;
  }

  70% {
    box-shadow: 0 0 0 6px #ef444400;
  }

  100% {
    box-shadow: 0 0 #ef444400;
  }
}

.qhdr .gh-stage {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}

.qhdr .gh-scene {
  pointer-events: none;
  z-index: 1;
  flex: 1;
  min-height: 114px;
  margin: 0 -12px;
  position: relative;
  overflow: hidden;
}

.qhdr .gh-stage {
  --gh-rail-top: 29px;
}

.qhdr .gh-stage > .gh-rail-space {
  z-index: 10;
  pointer-events: none;
  position: absolute;
  inset: 0 6px;
}

.qhdr .gh-scene-snowman {
  z-index: 2;
  pointer-events: none;
  width: 38px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 45%;
  transform: translateX(-50%);
}

.qhdr .gh-scene-snowman svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qhdr .gh-falling-leaves {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.qhdr .gh-falling-leaf {
  opacity: .85;
  border-radius: 50% 0;
  width: 7px;
  height: 5px;
  animation: linear infinite ghLeafFall;
  position: absolute;
  top: -8px;
}

@keyframes ghLeafFall {
  0% {
    opacity: 0;
    transform: translateY(0)rotate(0)translateX(0);
  }

  8% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: translateY(78px)rotate(280deg)translateX(18px);
  }
}

.qhdr .gh-ground {
  z-index: 2;
  height: 46px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.qhdr .gh-ground .gh-season-grass {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.qhdr .gh-ground .gh-ground-top {
  z-index: 3;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.qhdr .gh-ground .gh-ground-base, .qhdr .gh-ground .gh-ground-snowbed {
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.qhdr .gh-scene[data-season="winter"] .gh-ground-base {
  opacity: .28;
}

.qhdr .gh-season-grass[data-season="spring"] {
  --gh-grass-top: #86efac;
  --gh-grass-mid: #4ade80;
  --gh-grass-base: #14532d;
  --gh-grass-blade: #22c55e;
}

.qhdr .gh-season-grass[data-season="summer"] {
  --gh-grass-top: #22c55e;
  --gh-grass-mid: #15803d;
  --gh-grass-base: #0a1a0e;
  --gh-grass-blade: #14532d;
}

.qhdr .gh-season-grass[data-season="autumn"] {
  --gh-grass-top: #fde047;
  --gh-grass-mid: #ca8a04;
  --gh-grass-base: #3d2e10;
  --gh-grass-blade: #a16207;
}

.qhdr .gh-season-snow .gh-grass-fill {
  opacity: .96;
}

.qhdr .gh-ground > svg, .qhdr .gh-ground .gh-ground-top {
  width: 100%;
  height: 100%;
  display: block;
}

.qhdr .gh-rail-space {
  pointer-events: none;
  position: absolute;
  inset: 0 6px;
}

.qhdr .gh-ground .gh-river-shine {
  animation: 6s ease-in-out infinite ghRiverShine;
}

@keyframes ghRiverShine {
  0%, 100% {
    opacity: .4;
    transform: translateY(0);
  }

  50% {
    opacity: .85;
    transform: translateY(1.6px);
  }
}

.qhdr .gh-camp {
  z-index: 2;
  width: 124px;
  height: 79px;
  position: absolute;
  bottom: 0;
  left: 14px;
}

.qhdr .gh-camp svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qhdr .gh-camp .camp-flame, .qhdr .gh-camp .camp-fire-glow, .qhdr .gh-camp .camp-spark, .qhdr .gh-camp .camp-tent-light {
  visibility: hidden;
}

.qhdr .gh-camp.is-lit .camp-flame, .qhdr .gh-camp.is-lit .camp-fire-glow, .qhdr .gh-camp.is-lit .camp-spark, .qhdr .gh-camp.is-lit .camp-tent-light {
  visibility: visible;
}

.qhdr .gh-camp .camp-flame {
  transform-origin: 92px 68px;
  transform-box: view-box;
  animation: 1.7s ease-in-out infinite ghCampFlame;
}

@keyframes ghCampFlame {
  0%, 100% {
    transform: scale(1)rotate(0);
  }

  28% {
    transform: scale(.94, 1.08)rotate(-2deg);
  }

  55% {
    transform: scale(1.05, .93)rotate(1.6deg);
  }

  78% {
    transform: scale(.97, 1.04)rotate(-1.2deg);
  }
}

.qhdr .gh-camp .camp-fire-glow {
  animation: 1.7s ease-in-out infinite ghCampGlow;
}

@keyframes ghCampGlow {
  0%, 100% {
    opacity: .85;
  }

  40% {
    opacity: .6;
  }

  70% {
    opacity: 1;
  }
}

.qhdr .gh-camp .camp-spark {
  animation: 2.6s ease-in infinite ghCampSpark;
}

.qhdr .gh-camp .camp-spark--b {
  animation-delay: 1.3s;
}

@keyframes ghCampSpark {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }

  25%, 55% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: translateY(-13px);
  }
}

.qhdr .gh-camp .camp-tent-light {
  animation: 3.4s ease-in-out infinite ghCampGlow;
}

.qhdr .gh-camp .camp-flag {
  transform-origin: 36px 13px;
  transform-box: view-box;
  animation: 3.2s ease-in-out infinite ghCampFlag;
}

@keyframes ghCampFlag {
  0%, 100% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(.82)skewY(2.5deg);
  }
}

.qhdr .gh-milestone .gh-lamp {
  z-index: 0;
  pointer-events: none;
  width: 8px;
  height: 27px;
  position: absolute;
  bottom: calc(9px + 1.1em);
  left: 50%;
  transform: translateX(-50%);
}

.qhdr .gh-lamp .gh-post {
  background: linear-gradient(#1c2438, #05070d);
  border-radius: 1px;
  width: 2px;
  height: 17px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.qhdr .gh-lamp .gh-light {
  background: radial-gradient(circle at 45% 40%, #fff7d6, #fcd34d 55%, #b45309);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 5.5s ease-in-out infinite ghLampFlicker;
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px 2px #fcd34d8c, 0 0 26px 8px #fcd34d2e;
}

@keyframes ghLampFlicker {
  0%, 100% {
    opacity: 1;
  }

  42% {
    opacity: .85;
  }

  44% {
    opacity: 1;
  }

  71% {
    opacity: .78;
  }

  74% {
    opacity: 1;
  }
}

.qhdr .gh-lamp.is-off .gh-light {
  opacity: .2;
  box-shadow: none;
  background: radial-gradient(circle at 45% 40%, #9ca3af, #6b7280 70%);
  animation: none;
}

.qhdr .qbot-wrap {
  bottom: var(--gh-rail-top);
  z-index: 14;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  perspective: 320px;
  width: 60px;
  height: 75px;
  transition: left 1.9s cubic-bezier(.4, .08, .3, 1);
  position: absolute;
  left: 0;
  transform: translateX(-50%);
}

.qhdr .qbot-wrap.is-instant, .qhdr .gh-companion.is-instant {
  transition: none !important;
}

.qhdr .qbot-flip {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s;
}

.qhdr .qbot-wrap.face-left .qbot-flip {
  transform: rotateY(180deg);
}

.qhdr .qbot {
  filter: drop-shadow(0 4px 10px #00000080);
  width: 100%;
  height: 100%;
  overflow: visible;
}

.qhdr .qbot .rig {
  transform-origin: 60px 120px;
  animation: 4.8s ease-in-out infinite qIdle;
}

@keyframes qIdle {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(1.4px)scale(1.008, .988);
  }
}

.qhdr .qbot .head {
  transform-origin: 60px 52px;
  animation: 9.5s ease-in-out infinite qHeadTilt;
}

@keyframes qHeadTilt {
  0%, 56%, 100% {
    transform: rotate(0);
  }

  66%, 76% {
    transform: rotate(-2.6deg);
  }

  86% {
    transform: rotate(.8deg);
  }
}

.qhdr .qbot .eyes {
  transform-origin: 60px 31px;
  transform-box: view-box;
  animation: 4.4s ease-in-out infinite qBlink;
}

@keyframes qBlink {
  0%, 91%, 100% {
    transform: scaleY(1);
  }

  94%, 96% {
    transform: scaleY(.08);
  }
}

.qhdr .qbot .eyeL, .qhdr .qbot .eyeR {
  transform-box: fill-box;
  transform-origin: center;
  animation: 9s ease-in-out infinite qLook;
}

@keyframes qLook {
  0%, 30%, 100% {
    transform: translateX(0);
  }

  38%, 52% {
    transform: translateX(2.4px);
  }

  62%, 74% {
    transform: translateX(-2px);
  }
}

.qhdr .qbot .antenna-tip {
  transform-origin: 60px -4px;
  animation: 3.4s ease-in-out infinite qAntenna;
}

@keyframes qAntenna {
  0%, 100% {
    opacity: .75;
  }

  50% {
    opacity: 1;
  }
}

.qhdr .qbot .antenna-glow {
  transform-origin: 60px -4px;
  transform-box: view-box;
  animation: 3.4s ease-in-out infinite qAntennaGlow;
}

@keyframes qAntennaGlow {
  0%, 100% {
    opacity: .25;
    transform: scale(1);
  }

  50% {
    opacity: .65;
    transform: scale(1.35);
  }
}

.qhdr .qbot .screen-glyph {
  animation: 6s ease-in-out infinite qScreen;
}

@keyframes qScreen {
  0%, 100% {
    opacity: .85;
  }

  18% {
    opacity: .6;
  }

  22% {
    opacity: .95;
  }

  60% {
    opacity: .75;
  }
}

.qhdr .qbot .tail {
  transform-origin: 48px 95px;
  transform-box: view-box;
  animation: 4.4s ease-in-out infinite qTailSway;
}

.qhdr .qbot-wrap.is-walking .tail {
  animation-duration: .8s;
}

.qhdr .qbot-wrap.is-celebrating .tail, .qhdr .qbot-wrap.is-hopping .tail {
  animation-duration: .7s;
}

@keyframes qTailSway {
  0%, 100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(7deg);
  }
}

.qhdr .qbot .armL {
  transform-origin: 35px 70px;
  transition: transform .5s;
  animation: 4.8s ease-in-out infinite qArmSwayL;
}

.qhdr .qbot .armR {
  transform-origin: 85px 70px;
  transition: transform .5s;
  animation: 4.8s ease-in-out infinite qArmSwayR;
}

@keyframes qArmSwayL {
  0%, 100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(3deg);
  }
}

@keyframes qArmSwayR {
  0%, 100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-3deg);
  }
}

.qhdr .qbot-wrap.is-waving .armR {
  animation: 2s cubic-bezier(.45, 0, .4, 1) qWave;
}

@keyframes qWave {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-148deg);
  }

  36% {
    transform: rotate(-120deg);
  }

  52% {
    transform: rotate(-150deg);
  }

  68% {
    transform: rotate(-122deg);
  }

  82% {
    transform: rotate(-146deg);
  }

  100% {
    transform: rotate(0);
  }
}

.qhdr .qbot-wrap.is-waving .eyes {
  animation: none;
}

.qhdr .qbot-wrap.is-waving .eyeL, .qhdr .qbot-wrap.is-waving .eyeR {
  animation: none;
  transform: scaleY(.72);
}

.qhdr .qbot-wrap.is-walking .rig {
  animation: .55s ease-in-out infinite qWalkBob;
}

@keyframes qWalkBob {
  0%, 100% {
    transform: translateY(0)rotate(-.8deg);
  }

  50% {
    transform: translateY(-2.2px)rotate(.8deg);
  }
}

.qhdr .qbot .legL {
  transform-origin: 48px 100px;
}

.qhdr .qbot .legR {
  transform-origin: 72px 100px;
}

.qhdr .qbot-wrap.is-walking .legL {
  animation: .55s ease-in-out infinite qStepL;
}

.qhdr .qbot-wrap.is-walking .legR {
  animation: .55s ease-in-out infinite qStepR;
}

@keyframes qStepL {
  0%, 100% {
    transform: rotate(17deg);
  }

  50% {
    transform: rotate(-17deg);
  }
}

@keyframes qStepR {
  0%, 100% {
    transform: rotate(-17deg);
  }

  50% {
    transform: rotate(17deg);
  }
}

.qhdr .qbot-wrap.is-walking .armL {
  animation: .55s ease-in-out infinite qStepArmL;
}

.qhdr .qbot-wrap.is-walking .armR {
  animation: .55s ease-in-out infinite qStepArmR;
}

@keyframes qStepArmL {
  0%, 100% {
    transform: rotate(-12deg);
  }

  50% {
    transform: rotate(12deg);
  }
}

@keyframes qStepArmR {
  0%, 100% {
    transform: rotate(12deg);
  }

  50% {
    transform: rotate(-12deg);
  }
}

.qhdr .qbot-wrap.is-celebrating .rig {
  animation: .9s cubic-bezier(.36, 0, .3, 1) 2 qJump;
}

@keyframes qJump {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  18% {
    transform: translateY(2px)scale(1.06, .9);
  }

  45% {
    transform: translateY(-16px)scale(.96, 1.06);
  }

  78% {
    transform: translateY(0)scale(1.04, .94);
  }
}

.qhdr .qbot-wrap.is-celebrating .armL {
  animation: .9s ease-in-out 2 qCheerL;
}

.qhdr .qbot-wrap.is-celebrating .armR {
  animation: .9s ease-in-out 2 qCheerR;
}

@keyframes qCheerL {
  0%, 100% {
    transform: rotate(0);
  }

  45% {
    transform: rotate(135deg);
  }
}

@keyframes qCheerR {
  0%, 100% {
    transform: rotate(0);
  }

  45% {
    transform: rotate(-135deg);
  }
}

.qhdr .qbot-wrap.is-celebrating .eyes {
  animation: none;
}

.qhdr .qbot-wrap.is-celebrating .eyeL, .qhdr .qbot-wrap.is-celebrating .eyeR {
  animation: none;
  transform: scaleY(.68);
}

.qhdr .qbot-wrap.is-sleeping .eyes {
  animation: none;
  transform: scaleY(.12);
}

.qhdr .qbot-wrap.is-sleeping .eyeL, .qhdr .qbot-wrap.is-sleeping .eyeR {
  animation: none;
}

.qhdr .qbot-wrap.is-sleeping .rig {
  animation-duration: 6.4s;
}

.qhdr .qbot-wrap.is-sleeping .head {
  animation: 6.4s ease-in-out infinite qSleepHead;
}

@keyframes qSleepHead {
  0%, 100% {
    transform: rotate(6deg);
  }

  50% {
    transform: rotate(8deg);
  }
}

.qhdr .qbot-wrap.is-hopping .rig {
  animation: 1.1s cubic-bezier(.36, 0, .3, 1) qHop;
}

@keyframes qHop {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  22% {
    transform: translateY(1.6px)scale(1.05, .92);
  }

  52% {
    transform: translateY(-11px)scale(.97, 1.05);
  }

  82% {
    transform: translateY(0)scale(1.03, .95);
  }
}

.qhdr .qbot-wrap.is-reading .head {
  animation: none;
  transform: rotate(5deg);
}

.qhdr .qbot-wrap.is-reading .eyes {
  animation: none;
}

.qhdr .qbot-wrap.is-reading .eyeL, .qhdr .qbot-wrap.is-reading .eyeR {
  animation: none;
  transform: translateY(1px)scaleY(.82);
}

.qhdr .qbot-wrap.is-reading .armL {
  animation: none;
  transform: rotate(-34deg);
}

.qhdr .qbot-wrap.is-reading .armR {
  animation: none;
  transform: rotate(34deg);
}

.qhdr .qbot-wrap.is-thinking .head {
  animation: none;
  transform: rotate(-5deg);
}

.qhdr .qbot-wrap.is-thinking .eyes {
  animation: none;
}

.qhdr .qbot-wrap.is-thinking .eyeL, .qhdr .qbot-wrap.is-thinking .eyeR {
  animation: none;
  transform: translateX(2px)translateY(-1px);
}

.qhdr .qbot-wrap.is-thinking .antenna-tip, .qhdr .qbot-wrap.is-thinking .antenna-glow {
  animation-duration: .9s;
}

.qhdr .qbot-wrap.is-clapping .armL {
  animation: .34s ease-in-out 6 qClapL;
}

.qhdr .qbot-wrap.is-clapping .armR {
  animation: .34s ease-in-out 6 qClapR;
}

@keyframes qClapL {
  0%, 100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(48deg);
  }
}

@keyframes qClapR {
  0%, 100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-48deg);
  }
}

.qhdr .gh-companion {
  z-index: 13;
  pointer-events: none;
  width: 32px;
  height: 29px;
  transition: left 1.9s cubic-bezier(.4, .08, .3, 1), opacity .4s, bottom .9s, transform .9s;
  position: absolute;
  bottom: 44px;
  transform: translateX(-50%);
}

.qhdr .gh-rail-space:has(.qbot-wrap.is-reading) .gh-companion {
  z-index: 15;
  bottom: 10px;
  transform: translateX(-50%)translateX(33px)rotate(-4deg)scale(1.08);
}

.qhdr .gh-companion svg {
  will-change: transform;
  width: 100%;
  height: 100%;
  animation: 4.6s ease-in-out infinite ghCompFloat;
  display: block;
  overflow: visible;
}

@keyframes ghCompFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.qhdr .gh-companion .comp-glow {
  transform-origin: center;
  transform-box: fill-box;
  animation: 4.6s ease-in-out infinite ghCompGlow;
}

@keyframes ghCompGlow {
  0%, 100% {
    opacity: .35;
    transform: scale(1);
  }

  50% {
    opacity: .55;
    transform: scale(1.14);
  }
}

.qhdr .gh-companion .comp-spark {
  animation: 3.4s ease-in-out infinite ghCompSpark;
}

.qhdr .gh-companion .comp-spark:nth-of-type(2) {
  animation-delay: 1.1s;
}

.qhdr .gh-companion .comp-spark:nth-of-type(3) {
  animation-delay: 2.2s;
}

@keyframes ghCompSpark {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }

  40%, 60% {
    opacity: .85;
    transform: translateY(-6px);
  }
}

.qhdr .gh-speech {
  bottom: calc(var(--gh-rail-top) + 86px);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #e2e8f0;
  text-align: center;
  opacity: 0;
  z-index: 16;
  pointer-events: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
  background: #0d1224e0;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  max-width: min(190px, 100% - 16px);
  padding: 7px 10px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.35;
  transition: opacity .35s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  position: absolute;
  transform: translateY(6px)scale(.92);
}

.qhdr .gh-speech:after {
  content: "";
  background: inherit;
  border-bottom: 1px solid #ffffff24;
  border-right: 1px solid #ffffff24;
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%)rotate(45deg);
}

.qhdr .gh-speech.is-anchor-center {
  transform: translateX(-50%)translateY(6px)scale(.92);
}

.qhdr .gh-speech.is-visible {
  opacity: 1;
}

.qhdr .gh-speech.is-anchor-center.is-visible {
  transform: translateX(-50%)translateY(0)scale(1);
}

.qhdr .gh-speech.is-anchor-left, .qhdr .gh-speech.is-anchor-right {
  transform: translateY(6px)scale(.92);
}

.qhdr .gh-speech.is-anchor-left.is-visible, .qhdr .gh-speech.is-anchor-right.is-visible {
  transform: translateY(0)scale(1);
}

.qhdr .gh-speech.is-anchor-left:after {
  left: 28%;
}

.qhdr .gh-speech.is-anchor-right:after {
  left: 72%;
}

.qhdr .gh-burst {
  bottom: calc(var(--gh-rail-top) + 56px);
  z-index: 17;
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
}

.qhdr .gh-burst span {
  opacity: 0;
  font-size: 13px;
  position: absolute;
  top: 0;
  left: 0;
}

.qhdr .gh-burst.is-active span {
  animation: 1.1s cubic-bezier(.2, .6, .35, 1) forwards ghBurstFly;
}

@keyframes ghBurstFly {
  0% {
    opacity: 0;
    transform: translate(0)scale(.4)rotate(0);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--bx), var(--by)) scale(1.1) rotate(var(--br));
  }
}

.qhdr .jhs-ridge {
  display: none;
}

.qhdr .jhs-root:after {
  content: "";
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(#0000 0%, #1a130d59 100%);
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.qhdr .gh-journey {
  z-index: 5;
  padding-top: 2px;
  position: relative;
}

.qhdr .gh-journey-grass {
  z-index: 2;
  pointer-events: none;
  position: absolute;
  inset: 0 -11px 10px;
  overflow: hidden;
}

.qhdr .gh-journey-grass .gh-season-grass {
  width: 100%;
  height: 46px;
  position: absolute;
  top: -46px;
  left: 0;
}

.qhdr .gh-rail {
  z-index: 3;
  background: #ffffff24;
  border-radius: 999px;
  height: 7px;
  margin: 0 6px;
  position: relative;
  overflow: visible;
}

.qhdr .gh-rail.is-instant .gh-rail-fill, .qhdr .gh-rail.is-instant .gh-rail-dot {
  transition: none !important;
}

.qhdr .gh-rail .gh-rail-fill {
  background: linear-gradient(90deg, #fde047, #fbbf24 55%, #fb923c);
  border-radius: 999px;
  transition: width 1.95s cubic-bezier(.45, .05, .35, 1);
  position: absolute;
  inset: 0 auto 0 0;
  box-shadow: 0 0 10px #fb923c99;
}

.qhdr .gh-rail .gh-rail-dot {
  background: #ffedd5;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  transition: left 1.95s cubic-bezier(.45, .05, .35, 1);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px #fb923cf2;
}

.qhdr .gh-finish {
  z-index: 2;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translate(50%, -58%);
}

.qhdr .gh-finish .gh-finish-svg {
  filter: drop-shadow(0 2px 4px #00000073);
  width: 22px;
  height: 26px;
  display: block;
}

.qhdr .gh-milestone {
  text-align: center;
  opacity: 1;
  transition: filter .4s, opacity .4s;
  position: absolute;
  top: -32px;
  transform: translateX(-50%);
}

.qhdr .gh-milestone.is-reached {
  opacity: .5;
  filter: grayscale();
}

.qhdr .gh-milestone.is-reached .gh-m-num {
  color: #9ca3afbf;
}

.qhdr .gh-milestone > svg {
  z-index: 1;
  width: 34px;
  height: 27px;
  margin: 0 auto;
  display: block;
  position: relative;
}

.qhdr .gh-milestone .gh-m-num {
  letter-spacing: .08em;
  color: #ffffffa6;
  font-variant-numeric: tabular-nums;
  margin-top: 9px;
  font-size: 9.5px;
  font-weight: 700;
  display: block;
}

.qhdr .gh-journey-caption {
  z-index: 3;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  display: flex;
  position: relative;
}

.qhdr .gh-level-chip {
  color: #fde68a;
  white-space: nowrap;
  background: #fbbf241a;
  border: 1px solid #fbbf244d;
  border-radius: 999px;
  align-items: baseline;
  min-width: 0;
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
}

.qhdr .gh-level-chip .gh-chip-badge {
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.qhdr .gh-level-chip .gh-chip-level {
  white-space: pre;
  flex-shrink: 0;
}

.qhdr .gh-to-next {
  color: #ffffffb8;
  white-space: nowrap;
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
}

.qhdr .gh-to-next b {
  color: #fcd34d;
  font-weight: 800;
}

.qhdr .gh-pill.is-star-receiving {
  animation: .55s ease-out gh-pill-star-receive;
}

@keyframes gh-pill-star-receive {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.14);
    box-shadow: 0 0 14px #fbbf248c;
  }

  100% {
    transform: scale(1);
  }
}

.qhdr .gh-sky-star-reward {
  z-index: 12;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.qhdr .gh-sky-star-burst {
  position: absolute;
  inset: 0;
}

.qhdr .gh-sky-star-glow {
  background: radial-gradient(circle, #fde0476b 0%, #fbbf241f 42%, #0000 72%);
  border-radius: 50%;
  width: min(52vw, 220px);
  height: min(52vw, 220px);
  animation: 2.4s ease-out forwards gh-sky-star-glow;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes gh-sky-star-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(.4);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(1.35);
  }
}

.qhdr .gh-sky-star-badge {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: 2.3s cubic-bezier(.22, .61, .36, 1) forwards gh-sky-star-badge;
  display: flex;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.qhdr .gh-sky-star-badge-ico {
  filter: drop-shadow(0 0 10px #fbbf24d9);
  font-size: 1.65rem;
  line-height: 1;
}

.qhdr .gh-sky-star-badge-num {
  letter-spacing: .04em;
  color: #fde68a;
  text-shadow: 0 0 16px #fbbf24bf, 0 2px 6px #00000059;
  font-size: 1.35rem;
  font-weight: 800;
}

@keyframes gh-sky-star-badge {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(.45);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1.12);
  }

  28% {
    transform: translate(-50%, -50%)scale(1);
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 18px))scale(.82);
  }
}

.qhdr .gh-sky-star {
  font-size: calc(1rem * var(--gh-star-scale, 1));
  filter: drop-shadow(0 0 8px #fbbf24e6);
  opacity: 0;
  animation: 2.45s cubic-bezier(.33, .12, .22, 1) forwards gh-sky-star-fly;
  animation-delay: var(--gh-star-delay, 0s);
  line-height: 1;
  position: absolute;
  transform: translate(-50%, -50%);
}

@keyframes gh-sky-star-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(0)rotate(0);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1.35)rotate(12deg);
  }

  32% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 10px))scale(1)rotate(-8deg);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--gh-fly-x, 0px)), calc(-50% + var(--gh-fly-y, 0px))) scale(.35) rotate(36deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qhdr .qbot .rig, .qhdr .qbot .head, .qhdr .qbot .eyes, .qhdr .qbot .eyeL, .qhdr .qbot .eyeR, .qhdr .qbot .antenna-tip, .qhdr .qbot .antenna-glow, .qhdr .qbot .screen-glyph, .qhdr .qbot .armL, .qhdr .qbot .armR, .qhdr .gh-companion svg, .qhdr .gh-companion .comp-glow, .qhdr .gh-companion .comp-spark, .qhdr .gh-lamp .gh-light, .qhdr .gh-ground .gh-river-shine, .qhdr .qbot .tail, .qhdr .gh-camp .camp-flame, .qhdr .gh-camp .camp-fire-glow, .qhdr .gh-camp .camp-spark, .qhdr .gh-camp .camp-tent-light, .qhdr .gh-camp .camp-flag, .qhdr .gh-falling-leaf, .qhdr .gh-pill.is-claimable:after, .qhdr .gh-sky-star, .qhdr .gh-sky-star-badge, .qhdr .gh-sky-star-glow, .qhdr .gh-pill.is-star-receiving {
    animation: none;
  }

  .qhdr .qbot-wrap, .qhdr .gh-companion, .qhdr .gh-rail .gh-rail-fill, .qhdr .gh-rail .gh-rail-dot {
    transition: none;
  }
}

/*# sourceMappingURL=src_styles_1jdw6m6._.css.map*/