@font-face {
  font-family: Survey Inter;
  src: url('./assets/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}
@property --survey-angle { syntax: '<angle>'; inherits: false; initial-value: 101deg; }
@property --survey-cta-angle { syntax: '<angle>'; inherits: false; initial-value: -79.044092deg; }
@property --survey-cta-start { syntax: '<percentage>'; inherits: false; initial-value: 7.092754%; }
@property --survey-cta-end { syntax: '<percentage>'; inherits: false; initial-value: 96.226879%; }
/* All product styles are scoped; no portfolio token or global element overrides. */
.survey-demo {
  position: relative;
  width: 100%;
  aspect-ratio: 1284 / 743;
  border-radius: 18px;
  isolation: isolate;
  overflow: clip;
  font: 400 13px/20px Survey Inter, Inter, sans-serif;
  font-optical-sizing: none;
  font-feature-settings: 'liga' 1, 'calt' 1;
  color: #000;
  text-align: left;
  background: #fff;
}
.survey-demo *, .survey-demo *::before, .survey-demo *::after { box-sizing: border-box; }
.survey-demo__stage { position: absolute; width: 1284px; height: 743px; transform-origin: top left; pointer-events: none; }
.survey-demo__screen, .survey-demo__form { position: absolute; inset: 0; display: block; width: 1284px; height: 743px; }
.survey-demo__form { opacity: 0; visibility: hidden; z-index: 3; object-fit: cover; object-position: center top; background: #f6f6f6; }
.survey-demo__launcher { position: absolute; right: 32px; bottom: 11px; width: 168px; height: 44px; border-radius: 22px; box-shadow: 0 0 51px #fff, 0 0 51px #fff; }
.survey-demo__launcher-surface { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.survey-demo__launcher-gradient, .survey-demo__launcher-stroke { position: absolute; inset: 0; border-radius: inherit; }
.survey-demo__launcher-gradient { background: linear-gradient(var(--survey-angle), #F5E3FF, #D1EFFD 49.5192%, #D8FBDD); animation: survey-launcher-gradient 6000ms linear infinite paused; }
.survey-demo__launcher-stroke { padding: 1px; background: linear-gradient(calc(var(--survey-angle) + 9.57deg), #DA71FF, #1BADFF 50%, #A8E94E); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: survey-launcher-gradient 6000ms linear infinite paused; }
.survey-demo__launcher-black { position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; }
.survey-demo__launcher-label { position: absolute; right: 16px; top: 12px; font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.survey-demo__faces { position: absolute; left: 14px; top: 10px; width: 90px; height: 24px; }
.survey-demo__face { position: absolute; left: 0; top: 0; width: 24px; height: 24px; }
.survey-demo__hand { position: absolute; left: 16.52px; top: 15.98px; width: 17.182px; height: 17.182px; transform: rotate(45deg) scale(.55); transform-origin: 50% 50%; }
.survey-demo__hand img { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; animation: survey-hand-wave 600ms linear infinite paused; }
.survey-demo__popover { position: absolute; right: 16px; bottom: 16px; width: 282px; height: 293px; border-radius: 8px; background: #fff; box-shadow: 0 0 20px 20px rgb(0 0 0 / 5%); opacity: 0; visibility: hidden; }
.survey-demo__popover-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; }
.survey-demo__popover-clip::after { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(95.4deg,#DA71FF,#1BADFF 50%,#A8E94E); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.survey-demo__header { position: absolute; inset: 0 0 auto; height: 64px; }
.survey-demo__header-fill { position: absolute; inset: 0; display: block; width: 282px; height: 64px; }
.survey-demo__popover-faces { position: absolute; left: 16px; top: 16px; width: 116px; height: 32px; }
.survey-demo__popover-faces img { position: absolute; top: 0; left: 0; width: 32px; height: 32px; }
.survey-demo__popover-faces [data-face="1"] { left: 28px; }
.survey-demo__popover-faces [data-face="2"] { left: 56px; }
.survey-demo__popover-faces [data-face="3"] { left: 84px; }
.survey-demo__title, .survey-demo__intro, .survey-demo__body { position: absolute; left: 16px; width: 250px; margin: 0; padding: 0; letter-spacing: 0; }
.survey-demo__title { top: 80px; font: 600 16px/20px Survey Inter, Inter, sans-serif; }
.survey-demo__intro { top: 116px; font: 400 13px/20px Survey Inter, Inter, sans-serif; }
.survey-demo__body { top: 168px; font: 400 13px/20px Survey Inter, Inter, sans-serif; }
.survey-demo__body strong { font-weight: 700; }
.survey-demo__actions { position: absolute; top: 244px; left: 16px; display: flex; gap: 8px; }
.survey-demo__cta, .survey-demo__dismiss { position: relative; margin: 0; padding: 0; height: 32px; border-radius: 4px; font: 400 13px/20px Survey Inter, Inter, sans-serif; white-space: nowrap; appearance: none; }
.survey-demo__cta { width: 123px; overflow: hidden; border: 0; color: #fff; background: #000; }
.survey-demo__dismiss { width: 73px; border: 1px solid #e5e5e5; background: #fff; color: #000; }
.survey-demo__cta-effects {
  position: absolute; inset: 0; opacity: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(var(--survey-cta-angle),
    #BBFAC5 var(--survey-cta-start),
    #B6F1D9 calc(var(--survey-cta-start) + (var(--survey-cta-end) - var(--survey-cta-start)) * .25),
    #AEE0FF calc(var(--survey-cta-start) + (var(--survey-cta-end) - var(--survey-cta-start)) * .504808),
    #CEC4FE calc(var(--survey-cta-start) + (var(--survey-cta-end) - var(--survey-cta-start)) * .75),
    #E2B3FE var(--survey-cta-end));
  animation: survey-cta-gradient 3000ms linear infinite paused;
}
.survey-demo__cta-label { position: relative; z-index: 1; }
.survey-demo__cursor { position: absolute; left: 0; top: 0; z-index: 4; opacity: 0; overflow: visible; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 20%)); }
/* Animation clocks are paused CSS animations scrubbed by the single controller. */
@keyframes survey-launcher-gradient { from { --survey-angle: 101deg; } to { --survey-angle: 461deg; } }
@keyframes survey-hand-wave { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(30deg); } }
/* Directions and stop extents converted from the four prepared Figma SVG gradients. */
@keyframes survey-cta-gradient {
  0% { --survey-cta-angle: -79.044092deg; --survey-cta-start: 7.092754%; --survey-cta-end: 96.226879%; }
  25% { --survey-cta-angle: 33.018759deg; --survey-cta-start: 30.546844%; --survey-cta-end: 77.635939%; }
  50% { --survey-cta-angle: 106.310358deg; --survey-cta-start: 0%; --survey-cta-end: 99.999963%; }
  75% { --survey-cta-angle: 191.175703deg; --survey-cta-start: 20.425496%; --survey-cta-end: 81.050573%; }
  100% { --survey-cta-angle: 280.955908deg; --survey-cta-start: 7.092754%; --survey-cta-end: 96.226879%; }
}
.survey-preview { margin: 0; background: #f5f5f5; color: #333; font: 13px/1.5 Survey Inter, sans-serif; }
.survey-preview__main { max-width: 1284px; margin: 32px auto; }
.survey-preview__controls { display: flex; gap: 8px; align-items: center; margin: 24px 16px 0; }
.survey-preview__controls button, .survey-preview__inspection button, .survey-preview__inspection select { font: inherit; color: inherit; background: #fff; border: 1px solid #ddd; padding: 6px 12px; border-radius: 4px; }
.survey-preview__status { margin-left: 8px; color: #666; }
.survey-preview__description, .survey-preview__inspection { margin: 12px 16px; color: #666; }
.survey-preview__inspection summary { cursor: pointer; margin-bottom: 12px; }
.survey-preview__inspection label { margin-right: 8px; }