@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: #fff; }
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: #fff; overflow: visible; cursor: pointer; }

.feedback-bubble,
.ask-bubble,
.menu-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;
  transition: width 220ms ease-out, flex-basis 220ms ease-out, opacity 120ms ease 100ms;
}

.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: 5px; stroke-dasharray: 24 76; opacity: .1; filter: blur(5px); }
.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);
}

.menu-bubble {
  left: auto;
  right: 40px;
  top: 180px;
  width: 48px;
  overflow: visible;
}

.menu-image {
  position: absolute;
  z-index: 10;
  top: -137px;
  right: -20px;
  width: 237px;
  height: 165px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transform-origin: right bottom;
  transition: opacity 140ms ease-out, transform 180ms cubic-bezier(.16, 1, .3, 1);
}

.menu-bubble.is-open .menu-image {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.menu-dot {
  position: absolute;
  z-index: 3;
  left: 32px;
  top: 8px;
  width: 8px;
  height: 8px;
  opacity: 0;
  transition: opacity 100ms linear;
}

.menu-bubble.is-alert .menu-dot { opacity: 1; }
.menu-bubble.is-alert.is-open .menu-dot { opacity: 0; }

.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);
}

.demo-cursor.at-feedback { transform: translate(99px, 57px); }
.demo-cursor.at-ask { transform: translate(134px, 128px); }
.demo-cursor.at-menu { transform: translate(335px, 201px); }

.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; } }