@font-face {
  font-family: "TikTok Sans";
  src: url("./assets/TikTokSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: transparent; }
body { overflow: hidden; }
.stage { width: 100vw; height: 100vh; display: grid; place-items: center; }
.canvas { position: relative; width: min(100vw, 100vh, 400px); height: min(100vw, 100vh, 400px); padding: 0; border: 0; background: transparent; overflow: visible; cursor: pointer; }
.canvas.single-feedback .feedback-bubble,
.canvas.single-ask .ask-bubble {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
}
.canvas.single-feedback,
.canvas.single-ask { cursor: default; }
.canvas.single-feedback .feedback-bubble,
.canvas.single-ask .ask-bubble { cursor: pointer; }
.canvas.single-feedback:hover .demo-cursor,
.canvas.single-ask:hover .demo-cursor { opacity: 0; }

.feedback-bubble,
.ask-bubble {
  position: absolute;
  height: 48px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
  cursor: url("./assets/cursor-hover@4x.png") 4 2, pointer;
}

.feedback-bubble {
  left: auto;
  right: 241px;
  top: 34px;
  width: 102px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 9px 12px 9px 8px;
  isolation: isolate;
  transition: width 220ms ease-out, gap 220ms ease-out;
}

.feedback-bubble.has-message {
  width: 118px;
  gap: 8px;
}

.feedback-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 80px;
  height: 28px;
  flex: 0 0 80px;
}

.feedback-bubble::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 23px;
  background: #fff;
  pointer-events: none;
}

.feedback-icon-wrap {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.feedback-icon {
  position: absolute;
  left: 4.833px;
  top: 4.417px;
  width: 18.3652px;
  height: 19.583px;
}
.feedback-text {
  position: relative;
  z-index: 2;
  width: 48px;
  color: rgba(0, 0, 0, 0.65);
  font: 400 14px/20px "TikTok Sans", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}

.feedback-dot {
  position: relative;
  z-index: 2;
  width: 0;
  height: 8px;
  flex: 0 0 0;
  opacity: 0;
  transition: width 220ms ease-out, flex-basis 220ms ease-out, opacity 0ms linear;
}

.feedback-bubble.has-message .feedback-dot {
  width: 8px;
  flex-basis: 8px;
  opacity: 1;
}

.runner {
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  z-index: 0;
}

.runner svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.runner-stroke { fill: none; stroke: #20d5ec; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.runner-glow { stroke-width: 10px; stroke-dasharray: 34 66; opacity: .14; filter: blur(8px); }
.runner-segment { stroke-width: 1.7px; filter: drop-shadow(0 0 3px rgba(32, 213, 236, .38)); }
.seg-8 { stroke-dasharray: 22 78; opacity: .05; }
.seg-7 { stroke-dasharray: 20 80; opacity: .07; }
.seg-6 { stroke-dasharray: 18 82; opacity: .09; }
.seg-5 { stroke-dasharray: 16 84; opacity: .11; }
.seg-4 { stroke-dasharray: 14 86; opacity: .13; }
.seg-3 { stroke-dasharray: 12 88; opacity: .15; }
.seg-2 { stroke-dasharray: 10 90; opacity: .17; }
.seg-1 { stroke-dasharray: 8 92; opacity: .2; }

.feedback-bubble.is-running .runner {
  opacity: 1;
}

.ask-bubble {
  left: auto;
  right: 241px;
  top: 107px;
  width: 110px;
  overflow: hidden;
  transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ask-bubble.is-collapsed { width: 48px; }
.ask-disc { position: absolute; left: 5px; top: 5px; width: 36px; height: 36px; border-radius: 999px; overflow: hidden; }
.ask-glow { position: absolute; inset: 0; border-radius: inherit; opacity: .8; background: radial-gradient(circle at 66% 44%, #9ff6f6 0, #c9fbfb 38%, #f3ffff 76%); }
.ask-icon { position: absolute; left: 9px; top: 9px; width: 18px; height: 18px; }
.ask-text {
  position: absolute;
  left: 47px;
  top: 13px;
  color: rgba(0, 0, 0, 0.65);
  font-family: "TikTok Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 100ms linear;
}
.ask-bubble.is-collapsed .ask-text { opacity: 0; }
.ask-dot { position: absolute; left: 32px; top: 8px; width: 8px; height: 8px; opacity: 0; transition: opacity 100ms linear; }
.ask-bubble.is-alert .ask-dot { opacity: 1; }

.demo-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 24px;
  height: 24px;
  pointer-events: none;
  user-select: none;
  transform: translate(262px, 224px);
  transition: transform 700ms cubic-bezier(.22, .8, .28, 1);
  opacity: 1;
}

.demo-cursor.at-feedback { transform: translate(99px, 57px); }
.demo-cursor.at-ask { transform: translate(134px, 128px); }
.canvas.single-feedback .demo-cursor,
.canvas.single-ask .demo-cursor {
  left: 50%;
  top: 50%;
  transform: translate(82px, 54px);
}
.canvas.single-feedback .demo-cursor.at-single,
.canvas.single-ask .demo-cursor.at-single { transform: translate(32px, 2px); }

.canvas:focus-visible { outline: 2px solid #2dccd3; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .runner, .ask-bubble, .ask-text, .ask-dot { animation-duration: 1ms !important; transition-duration: 1ms; } }