.hq-grid {
  align-items: start !important;
}

@media (min-width: 1024px) {
  .hq-grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) !important;
  }
}

.hqs {
  --ink: #f4f1ea;
  --mut: rgba(244, 241, 234, .62);
  --card: rgba(244, 241, 234, .07);
  --line: rgba(244, 241, 234, .18);
  --a: #ffb98f;
  --b: #b9a0ff;
  --good: #3fbf86;
  --bad: #e5605a;
  --panel: rgba(20, 17, 34, .55);
  border: 1px solid var(--line);
  background: linear-gradient(160deg,rgba(185, 160, 255, .12),rgba(255, 185, 143, .06) 60%,transparent),var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  width: 100%;
  color: var(--ink);
  border-radius: 30px;
  padding: 14px;
  position: relative;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}

html[data-theme="light"] .hqs {
  --ink: #17151c;
  --mut: rgba(23, 21, 28, .62);
  --card: rgba(23, 21, 28, .043);
  --line: rgba(23, 21, 28, .16);
  --a: #e8743b;
  --b: #6d3df2;
  --good: #169a68;
  --bad: #d2453f;
  --panel: rgba(255, 255, 255, .62);
  box-shadow: 0 30px 80px -34px rgba(60, 40, 120, .35);
}

.hqs-tabs {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  display: grid;
}

.hqs-tab {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: left;
  cursor: pointer;
  color: var(--mut);
  font: inherit;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 18px;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 14px;
  transition: background .3s, color .3s, border-color .3s, transform .35s cubic-bezier(.2, .7, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.hqs-tab:hover {
  color: var(--ink);
  transform: translateY(-2px);
}

.hqs-tab[aria-selected="true"] {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

.hqs-tab:focus-visible {
  outline: 2px solid var(--b);
  outline-offset: 2px;
}

.hqs-n {
  font: 800 10px/1 var(--lq-sans, sans-serif);
  letter-spacing: .18em;
  color: var(--b);
}

.hqs-k {
  font: 400 clamp(1.5rem,2.4vw,2.1rem)/1.05 var(--lq-serif, "Instrument Serif",Georgia,serif);
  letter-spacing: -.01em;
  margin-top: 4px;
}

.hqs-l {
  opacity: .85;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.hqs-p {
  transform-origin: 0;
  background: linear-gradient(90deg,var(--b),var(--a));
  opacity: 0;
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
}

.hqs.run .hqs-tab[aria-selected="true"] .hqs-p {
  opacity: 1;
  animation: hqsP var(--dur, 7s) linear forwards;
}

@keyframes hqsP {
  to {
    transform: scaleX(1);
  }
}

.hqs-stage {
  gap: 14px;
  margin-top: 10px;
  display: grid;
}

.hqs-scenes {
  aspect-ratio: 520 / 340;
  background: radial-gradient(70% 80% at 30% 20%, rgba(185, 160, 255, .16), rgba(0, 0, 0, 0) 70%), radial-gradient(60% 70% at 90% 100%, rgba(255, 185, 143, .14), rgba(0, 0, 0, 0) 70%), rgba(0, 0, 0, .18);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .hqs-scenes {
  background: radial-gradient(70% 80% at 30% 20%, rgba(109, 61, 242, .12), rgba(0, 0, 0, 0) 70%), radial-gradient(60% 70% at 90% 100%, rgba(232, 116, 59, .14), rgba(0, 0, 0, 0) 70%), rgba(255, 255, 255, .55);
}

.hqs-sc {
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  transition: opacity .45s, transform .6s cubic-bezier(.16, .84, .24, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: visible;
  transform: scale(.96) translateY(8px);
}

.hqs-sc.act {
  opacity: 1;
  transform: none;
}

.hqs-ex {
  font: 700 10px var(--lq-sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  border: 1px dashed var(--line);
  border-radius: 99px;
  padding: 4px 9px;
  position: absolute;
  top: 10px;
  right: 12px;
}

.hqs-caps {
  display: grid;
}

.hqs-c {
  opacity: 0;
  pointer-events: none;
  grid-area: 1 / 1;
  transition: opacity .4s, transform .5s cubic-bezier(.16, .84, .24, 1);
  transform: translateY(10px);
}

.hqs-c.act {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.hqs-c h3 {
  font: 400 clamp(1.5rem,2.3vw,2rem)/1.1 var(--lq-serif, "Instrument Serif",Georgia,serif);
  letter-spacing: -.01em;
  margin: 0;
}

.hqs-c p {
  color: var(--mut);
  max-width: 34rem;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

.hqs-c a {
  background: var(--ink);
  color: #0e0e11;
  border-radius: 99px;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), gap .3s;
  display: inline-flex;
}

html[data-theme="light"] .hqs-c a {
  color: #fff;
}

.hqs-c a:hover {
  gap: 12px;
  transform: translateY(-2px);
}

.hqs-sc .card {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 1.2px;
}

.hqs-sc .t {
  fill: var(--ink);
  font: 700 15px var(--lq-sans, sans-serif);
}

.hqs-sc .t.sm {
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--mut);
  font-size: 11px;
}

.hqs-sc .t.dim {
  fill: var(--mut);
  font-size: 12px;
  font-weight: 600;
}

.hqs-sc .t.b {
  font-weight: 800;
}

.hqs-sc .dot0 {
  fill: var(--b);
}

.hqs-sc .dot1 {
  fill: var(--a);
}

.hqs-sc .logo {
  fill: #fff;
  font: 400 46px Instrument Serif, Georgia, serif;
}

.hqs-sc .flow {
  fill: none;
  stroke: var(--b);
  stroke-width: 2px;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  opacity: .8;
}

.hqs-sc.act .flow {
  animation: 1s linear infinite hqsFlow;
}

@keyframes hqsFlow {
  to {
    stroke-dashoffset: -24px;
  }
}

.hqs-sc .arrow {
  fill: none;
  stroke: var(--b);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hqs-sc .ring {
  fill: none;
  stroke: var(--b);
  stroke-width: 2px;
  opacity: 0;
  transform-origin: 262px 170px;
}

.hqs-sc.act .ring {
  animation: 2.6s ease-out infinite hqsRing;
}

.hqs-sc.act .ring.r2 {
  animation-delay: 1.3s;
}

@keyframes hqsRing {
  0% {
    opacity: .7;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

.hqs-sc .a-in {
  opacity: 0;
}

.hqs-sc.act .a-in {
  animation: hqsIn .7s cubic-bezier(.16,.84,.24,1) var(--d, 0s) forwards;
}

@keyframes hqsIn {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hqs-sc .a-pop {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50%;
}

.hqs-sc.act .a-pop {
  animation: .7s cubic-bezier(.34, 1.56, .64, 1) .5s forwards hqsPop;
}

@keyframes hqsPop {
  from {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hqs-sc .rowbg {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 1.2px;
}

.hqs-sc .row.best .rowbg {
  fill: color-mix(in srgb,var(--good) 20%,transparent);
  stroke: var(--good);
}

.hqs-sc .chk {
  fill: none;
  stroke: var(--good);
  stroke-width: 3.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34px;
}

.hqs-sc.act .chk {
  animation: .6s 1.5s forwards hqsDraw;
}

@keyframes hqsDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.hqs-sc .scan {
  fill: var(--b);
  opacity: 0;
  filter: drop-shadow(0 0 8px var(--b));
}

.hqs-sc.act .scan {
  animation: 3.8s ease-in-out infinite hqsScan;
}

@keyframes hqsScan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
    transform: translateY(224px);
  }

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

.hqs-sc .stamp {
  opacity: 0;
}

.hqs-sc.act .stamp {
  animation: hqsStamp .5s cubic-bezier(.34,1.56,.64,1) var(--d, 1s) forwards;
}

@keyframes hqsStamp {
  from {
    opacity: 0;
    transform: scale(.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hqs-sc .stamp {
  transform-box: fill-box;
  transform-origin: 50%;
}

.hqs-sc .chip {
  fill: color-mix(in srgb,var(--good) 22%,transparent);
  stroke: var(--good);
}

.hqs-sc .stamp text {
  fill: var(--good);
}

.hqs-sc .moon {
  transform-box: fill-box;
  transform-origin: 50%;
}

.hqs-sc.act .moon {
  animation: 4s ease-in-out infinite hqsFloat;
}

@keyframes hqsFloat {
  50% {
    transform: translateY(-6px) rotate(-4deg);
  }
}

.hqs-sc .star {
  fill: var(--ink);
}

.hqs-sc.act .star {
  animation: 2s ease-in-out infinite hqsTw;
}

.hqs-sc .s2 {
  animation-delay: .6s !important;
}

.hqs-sc .s3 {
  animation-delay: 1.2s !important;
}

@keyframes hqsTw {
  0%, 100% {
    opacity: .2;
  }

  50% {
    opacity: 1;
  }
}

.hqs-sc .dbe {
  fill: color-mix(in srgb,var(--b) 25%,transparent);
  stroke: var(--b);
}

.hqs-sc .dbs {
  fill: color-mix(in srgb,var(--b) 12%,transparent);
  stroke: var(--b);
}

.hqs-sc .dbl {
  fill: none;
  stroke: var(--b);
  opacity: .5;
}

.hqs-sc .tag {
  fill: var(--a);
  opacity: 0;
}

.hqs-sc.act .tag {
  animation: hqsTag 2.2s ease-in var(--d, 0s) infinite;
}

@keyframes hqsTag {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
    transform: translateY(98px);
  }

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

.hqs-sc .carton .cart {
  fill: #fff;
  opacity: .95;
}

.hqs-sc .carton .cart2 {
  fill: #d6deef;
}

.hqs-sc .carton .lab {
  fill: #5b8def;
}

.hqs-sc .swing {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.hqs-sc.act .swing {
  animation: 3s ease-in-out infinite alternate hqsSwing;
}

@keyframes hqsSwing {
  from {
    transform: rotate(-7deg);
  }

  to {
    transform: rotate(7deg);
  }
}

.hqs-sc .str {
  stroke: var(--mut);
  stroke-width: 2px;
  fill: none;
}

.hqs-sc .ptag.hi {
  fill: var(--bad);
}

.hqs-sc .ptag.lo {
  fill: var(--good);
}

.hqs-sc .pt {
  font: 800 20px var(--lq-sans, sans-serif);
  fill: #fff;
}

.hqs-sc .eq rect {
  fill: var(--ink);
  opacity: .85;
}

.hqs-sc .bubble {
  transform-box: fill-box;
  transform-origin: 50%;
  opacity: 0;
}

.hqs-sc.act .bubble {
  animation: .7s cubic-bezier(.34, 1.56, .64, 1) 1.6s forwards hqsPop;
}

.hqs-sc .bub {
  fill: var(--good);
}

.hqs-sc .arrow2 {
  fill: none;
  stroke: var(--good);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40px;
}

.hqs-sc.act .arrow2 {
  animation: .6s 1.3s forwards hqsDraw;
}

.hqs-sc .coin {
  fill: #f5c542;
  opacity: 0;
}

.hqs-sc.act .coin {
  animation: hqsCoin 2s ease-in var(--d, 1s) infinite;
}

@keyframes hqsCoin {
  0% {
    opacity: 0;
    transform: translate(0, -8px);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(26px, 46px);
  }
}

.hqs-sc .sbar {
  fill: var(--card);
  stroke: var(--b);
  stroke-width: 1.5px;
}

.hqs-sc .mag, .hqs-sc .mag2 {
  fill: none;
  stroke: var(--mut);
  stroke-width: 2.2px;
  stroke-linecap: round;
}

.hqs-sc .q {
  font: 600 20px var(--lq-sans, sans-serif);
  fill: var(--ink);
}

.hqs-sc .clipr {
  width: 0;
}

.hqs-sc.act .clipr {
  animation: 7s steps(6, end) infinite hqsType;
}

@keyframes hqsType {
  0% {
    width: 0;
  }

  14% {
    width: 96px;
  }

  100% {
    width: 96px;
  }
}

.hqs-sc .caret {
  fill: var(--b);
}

.hqs-sc.act .caret {
  animation: 7s steps(6, end) infinite hqsCaret, .8s step-end infinite hqsBlink;
}

@keyframes hqsCaret {
  0% {
    transform: translateX(0);
  }

  14% {
    transform: translateX(96px);
  }

  100% {
    transform: translateX(96px);
  }
}

@keyframes hqsBlink {
  50% {
    opacity: 0;
  }
}

.hqs-sc.act .hrow.r1 {
  animation: 7s cubic-bezier(.6, 0, .3, 1) infinite hqsR1;
}

.hqs-sc.act .hrow.r3 {
  animation: 7s cubic-bezier(.6, 0, .3, 1) infinite hqsR3;
}

@keyframes hqsR1 {
  0%, 34% {
    transform: translateY(0);
  }

  48%, 90% {
    transform: translateY(140px);
  }

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

@keyframes hqsR3 {
  0%, 34% {
    transform: translateY(0);
  }

  48%, 90% {
    transform: translateY(-140px);
  }

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

.hqs-sc.act .hrow.r3 .rowbg {
  animation: 7s infinite hqsHl;
}

@keyframes hqsHl {
  0%, 48% {
    fill: var(--card);
    stroke: var(--line);
  }

  56%, 90% {
    fill: color-mix(in srgb,var(--good) 22%,transparent);
    stroke: var(--good);
  }

  100% {
    fill: var(--card);
    stroke: var(--line);
  }
}

.hqs-sc .badge {
  opacity: 0;
}

.hqs-sc .badge rect {
  fill: var(--good);
}

.hqs-sc .badge text {
  fill: #fff;
}

.hqs-sc.act .badge {
  animation: 7s infinite hqsBadge;
}

@keyframes hqsBadge {
  0%, 54% {
    opacity: 0;
  }

  60%, 90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.hqs-sc .cursor {
  fill: var(--ink);
  stroke: var(--card);
  stroke-width: 1px;
  opacity: 0;
}

.hqs-sc.act .cursor {
  animation: 7s ease-in-out infinite hqsCur;
}

@keyframes hqsCur {
  0%, 16% {
    opacity: 0;
    transform: translate(420px, 60px);
  }

  22% {
    opacity: 1;
    transform: translate(420px, 70px);
  }

  46% {
    opacity: 1;
    transform: translate(320px, 300px);
  }

  58% {
    opacity: 1;
    transform: translate(300px, 126px);
  }

  66% {
    opacity: 1;
    transform: translate(300px, 126px);
  }

  82%, 100% {
    opacity: 0;
    transform: translate(300px, 126px);
  }
}

.hqs-sc .click {
  fill: none;
  stroke: var(--good);
  stroke-width: 2px;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50%;
  transform: translate(300px, 126px);
}

.hqs-sc.act .click {
  animation: 7s infinite hqsClick;
}

@keyframes hqsClick {
  0%, 60% {
    opacity: 0;
    transform: translate(300px, 126px) scale(.4);
  }

  62% {
    opacity: 1;
    transform: translate(300px, 126px) scale(.6);
  }

  72%, 100% {
    opacity: 0;
    transform: translate(300px, 126px) scale(2.6);
  }
}

@media (max-width: 859px) {
  .hqs {
    border-radius: 24px;
    padding: 10px;
  }

  .hqs-tabs {
    gap: 4px;
  }

  .hqs-tab {
    border-radius: 14px;
    padding: 10px 8px 12px;
  }

  .hqs-l, .hqs-n {
    display: none;
  }

  .hqs-k {
    text-align: center;
    margin: 0;
    font-size: 1.35rem;
  }

  .hqs-tab {
    align-items: center;
  }

  .hqs-c p {
    font-size: 14px;
  }

  .hqs-ex {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hqs-sc *, .hqs-tab, .hqs-c {
    transition: none !important;
    animation: none !important;
  }

  .hqs-sc .a-in, .hqs-sc .a-pop, .hqs-sc .stamp, .hqs-sc .bubble {
    opacity: 1;
  }

  .hqs-sc .chk, .hqs-sc .arrow2 {
    stroke-dashoffset: 0;
  }

  .hqs-sc .clipr {
    width: 96px;
  }

  .hqs-sc .hrow.r1 {
    transform: translateY(140px);
  }

  .hqs-sc .hrow.r3 {
    transform: translateY(-140px);
  }
}