:root {
  color-scheme: dark;
  --bg: #1b100b;
  --panel: rgba(49, 31, 21, 0.84);
  --text: #fff1d7;
  --muted: #c7ad87;
  --line: rgba(255, 232, 194, 0.18);
  --accent: #c96832;
  --accent-2: #e9ad55;
  --accent-deep: #8f3f22;
  --cream: #fff0cf;
  --ease-pop: cubic-bezier(.2, 1.35, .36, 1);
  --ease-slide: cubic-bezier(.78, .02, .25, 1);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior: none;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(25, 13, 8, .18), rgba(25, 13, 8, .58)),
    url("assets/background.svg");
  background-position: center;
  background-size: cover;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.ambient-orbit {
  position: fixed;
  z-index: 0;
  width: clamp(300px, 38vmin, 570px);
  pointer-events: none;
  user-select: none;
  opacity: .48;
  mix-blend-mode: screen;
  filter: saturate(.92) contrast(1.05);
}

.ambient-orbit--top {
  top: clamp(-205px, -12vmin, -88px);
  right: clamp(-195px, -11vmin, -72px);
  animation: rotate-clockwise 48s linear infinite;
}

.ambient-orbit--bottom {
  left: clamp(-190px, -10vmin, -68px);
  bottom: clamp(-205px, -11vmin, -82px);
  animation: rotate-counter 69s linear infinite;
}

@keyframes rotate-clockwise { to { transform: rotate(360deg); } }
@keyframes rotate-counter { to { transform: rotate(-360deg); } }

.page-shell {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  position: fixed;
  z-index: 1;
  inset: 0;
  min-height: 0;
  overflow: hidden;
}

.survey-card {
  --survey-scale: 1;
  --survey-center-x: 50vw;
  --survey-center-y: 50vh;
  position: absolute;
  top: var(--survey-center-y);
  left: var(--survey-center-x);
  width: min(1040px, calc(100vw - 36px));
  padding: clamp(22px, 3.5vmin, 42px);
  border: 1px solid rgba(255, 224, 180, .16);
  border-radius: clamp(24px, 3.5vmin, 36px);
  background:
    radial-gradient(circle at 92% 4%, rgba(218, 127, 53, .12), transparent 34%),
    linear-gradient(145deg, rgba(255, 227, 184, .055), rgba(80, 43, 23, .025)),
    var(--panel);
  box-shadow: 0 32px 100px rgba(18, 8, 4, .56), inset 0 1px 0 rgba(255, 234, 199, .09);
  backdrop-filter: blur(22px) saturate(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(1.05);
  transform: translate3d(-50%, -50%, 0) scale(var(--survey-scale));
  transform-origin: center;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.survey-header { margin-bottom: clamp(10px, 2.4vmin, 18px); }

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent-2);
  font-size: clamp(13px, 1.6vmin, 16px);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(38px, 6.2vmin, 68px);
  line-height: .96;
  letter-spacing: -.06em;
}

.intro {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2vmin, 19px);
}

.role-selector {
  min-width: 0;
  margin: 0 0 clamp(16px, 2.6vmin, 24px);
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.role-selector legend,
.role-selector > p,
.generic-text {
  margin: 0 0 12px;
  padding: 0;
  color: rgba(255, 226, 185, .68);
  font-size: clamp(12px, 1.45vmin, 14px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.role-toggle {
  --role-offset: 0px;
  --role-scale-x: 1;
  --role-scale-y: 1;
  --role-rotate: 0deg;
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(520px, 100%);
  min-height: 58px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 6px;
  overflow: visible;
  border: 1px solid rgba(255, 224, 180, .18);
  border-radius: 22px;
  background: rgba(30, 17, 11, .58);
  box-shadow: inset 0 2px 5px rgba(14, 6, 3, .5), 0 12px 30px rgba(18, 8, 4, .18);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.role-toggle-glider {
  position: absolute;
  z-index: 0;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / 3);
  border-radius: 16px;
  background: linear-gradient(105deg, #f7d993, #e5a44d 56%, #bd5b2d);
  box-shadow: 0 10px 24px rgba(84, 34, 13, .34), inset 0 2px 0 rgba(255, 244, 212, .62);
  transform: translate3d(0, 0, 0);
  transition: transform 340ms var(--ease-pop), filter 140ms ease, box-shadow 180ms ease;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.role-toggle.is-dragging {
  cursor: grabbing;
}

.role-toggle.is-dragging .role-toggle-glider {
  transition: none;
  filter: brightness(1.12);
}

.role-option {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  color: rgba(255, 235, 204, .68);
  background: transparent;
  font-size: clamp(15px, 1.8vmin, 18px);
  font-weight: 820;
  letter-spacing: -.02em;
  cursor: grab;
  touch-action: none;
  transition: color 180ms ease, transform 180ms var(--ease-pop), filter 180ms ease;
}

.role-option.is-active { color: #28140b; }

@media (hover: hover) {
  .role-toggle:not(.is-dragging) .role-option:hover {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.14);
  }
}

.role-toggle:not(.is-dragging) .role-option:active { transform: translateY(2px) scale(.96, .9); }

.role-toggle.is-dragging .role-option {
  cursor: grabbing;
  transform: none;
  filter: none;
}

.role-option:focus-visible {
  outline: 4px solid var(--cream);
  outline-offset: -3px;
}

.role-particles {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.question-list {
  display: grid;
  flex: 1;
  align-content: space-evenly;
  gap: clamp(10px, 2vmin, 24px);
}

.question-copy {
  display: flex;
  align-items: start;
  gap: 12px;
  margin-bottom: 7px;
}

.question-number {
  padding-top: 6px;
  color: rgba(255, 227, 188, .46);
  font-size: clamp(12px, 1.45vmin, 14px);
  font-weight: 800;
  letter-spacing: .12em;
}

.question h2 {
  margin: 0;
  font-size: clamp(21px, 2.7vmin, 29px);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -.035em;
}

.kinetic-slider {
  position: relative;
  padding: 0;
  contain: layout style;
  display: flex; 
  flex-direction: column;
  gap: 1rem;
  
  margin-left: 3rem;
  margin-right: 3rem;
}

.slider-track {
  position: relative;
  height: 52px;
  touch-action: none;
  cursor: pointer;
}

.slider-track::before,
.slider-track-fill {
  content: "";
  position: absolute;
  top: 24px;
  left: 0;
  height: 6px;
  border-radius: 999px;
}

.slider-track::before {
  width: 100%;
  background: rgba(255, 228, 190, .16);
  box-shadow: inset 0 1px 2px rgba(23, 10, 4, .55);
}

.slider-track-fill {
  width: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-2));
  box-shadow: 0 0 20px rgba(218, 118, 46, .3);
  transform: scaleX(.5);
  transform-origin: left center;
  transition: transform 340ms var(--ease-pop), opacity 220ms ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.notches {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.notch {
  position: absolute;
  top: 0;
  left: var(--notch-position);
  width: 58px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
}

.notch:nth-child(1) { --notch-position: 0%; }
.notch:nth-child(2) { --notch-position: 25%; }
.notch:nth-child(3) { --notch-position: 50%; }
.notch:nth-child(4) { --notch-position: 75%; }
.notch:nth-child(5) { --notch-position: 100%; }

.notch::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 3px solid rgba(255, 226, 183, .56);
  border-radius: 50%;
  background: #3b2115;
  transform: translateX(-50%);
  transition: transform 210ms var(--ease-pop), border-color 210ms ease, background 210ms ease, box-shadow 210ms ease;
}

.notch:hover::before,
.notch:focus-visible::before {
  transform: translateX(-50%) scale(1.28);
  border-color: var(--accent-2);
}

.notch:focus-visible { outline: none; }

.notch.is-active::before {
  border-color: var(--cream);
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(225, 145, 67, .14), 0 0 22px rgba(224, 135, 54, .44);
}

.slider-handle {
  position: absolute;
  z-index: 4;
  top: 3px;
  left: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  touch-action: none;
  transform: translate3d(0, 0, 0) translateX(-50%);
  transition: transform 340ms var(--ease-pop), filter 140ms ease, opacity 200ms ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.slider-handle:focus-visible {
  outline: 4px solid var(--accent-2);
  outline-offset: 7px;
}

.slider-handle:active { cursor: grabbing; }

.handle-core {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 241, 214, .96);
  border-radius: inherit;
  background: radial-gradient(circle at 35% 28%, #fff4da 0 9%, #efc376 10% 25%, #c76631 57%, #79371f 100%);
  box-shadow: 0 8px 20px rgba(25, 10, 4, .5), 0 0 0 8px rgba(202, 102, 48, .12), 0 0 30px rgba(211, 105, 42, .4);
}

.kinetic-slider.is-dragging .slider-handle,
.kinetic-slider.is-dragging .slider-track-fill {
  transition: none;
}

.kinetic-slider.is-dragging .slider-handle {
  filter: brightness(1.12);
}

.slider-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 2px;
  color: rgba(255, 226, 185, .62);
  font-size: clamp(15px, 1.35vmin, 18px);
  font-weight: 780;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.slider-labels span:nth-child(2) { text-align: center; }
.slider-labels span:last-child { text-align: right; }

.feedback-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 1rem;
}

.feedback-option {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 226, 185, .16);
  border-radius: 11px;
  background: rgba(35, 19, 12, .5);
  color: rgba(255, 238, 212, .76);
  font-size: clamp(11px, 1.3vmin, 13px);
  font-weight: 680;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-pop), box-shadow 160ms ease;
}

.feedback-check {
  display: grid;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid rgba(255, 226, 185, .28);
  border-radius: 6px;
  background: rgba(20, 10, 6, .42);
  color: #28140b;
  font-size: 13px;
  font-weight: 900;
  opacity: .68;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease, transform 160ms var(--ease-pop);
}

.feedback-text { min-width: 0; font-size: 1rem; padding-left: 1rem;  }

.feedback-option.is-selected {
  border-color: rgba(247, 217, 147, .7);
  background: linear-gradient(120deg, rgba(233, 173, 85, .28), rgba(201, 104, 50, .18));
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 239, 204, .08), 0 8px 20px rgba(18, 8, 4, .16);
}

.feedback-option.is-selected .feedback-check {
  border-color: #e9ad55;
  background: #e9ad55;
  opacity: 1;
  transform: scale(1.05);
}

.feedback-option:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 2px;
}

@media (hover: hover) {
  .feedback-option:hover { transform: translateY(-1px); border-color: rgba(233, 173, 85, .46); }
}

.particle-layer,
.button-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.pop-particle {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  position: absolute;
  width: var(--size, 7px);
  height: var(--size, 7px);
  border-radius: var(--radius, 2px);
  background: var(--particle-color, var(--accent));
  opacity: 0;
  animation: particle-pop 620ms var(--ease-pop) forwards;
}

@keyframes particle-pop {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  70% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.8) rotate(var(--r)); }
}

.submit-wrap { margin-top: clamp(16px, 2.6vmin, 24px); }

.submit-button {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 130px;
  padding: 0 clamp(22px, 3vmin, 34px);
  overflow: visible;
  border: 0;
  border-radius: clamp(20px, 2.8vmin, 28px);
  color: #28140b;
  background: linear-gradient(105deg, #f7d993, #e5a44d 56%, #bd5b2d);
  box-shadow: 0 20px 48px rgba(84, 34, 13, .42), inset 0 2px 0 rgba(255, 244, 212, .66);
  cursor: pointer;
  transition: transform 210ms var(--ease-pop), filter 210ms ease, box-shadow 210ms ease;
  touch-action: manipulation;
}

@media (hover: hover) {
  .submit-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.2);
    box-shadow: 0 26px 58px rgba(96, 39, 14, .48);
  }
}

.submit-button:focus-visible { outline: 4px solid var(--cream); outline-offset: 6px; }
.submit-button.is-pressed { animation: button-crunch 520ms var(--ease-pop); }
.submit-button.is-error { animation: button-shake 390ms ease; }
.submit-button:disabled { cursor: wait; }

.submit-label {
  font-size: clamp(25px, 3.4vmin, 34px);
  font-weight: 850;
  letter-spacing: -.04em;
}

.submit-arrow {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(54, 24, 10, .12);
  font-size: 25px;
}

@keyframes button-crunch {
  0%, 100% { transform: translateY(0) scale(1); }
  28% { transform: translateY(5px) scale(.965, .88); }
  58% { transform: translateY(-3px) scale(1.025, 1.045); }
}

@keyframes button-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-9px) rotate(-.5deg); }
  50% { transform: translateX(8px) rotate(.5deg); }
  75% { transform: translateX(-4px); }
}

.file-status {
  min-height: 18px;
  margin: 7px 5px 0;
  color: rgba(255, 226, 185, .58);
  font-size: clamp(13px, 1.5vmin, 15px);
  line-height: 1.45;
}

.file-status strong { color: rgba(255, 240, 213, .84); font-weight: 680; }
.file-status.is-error { color: #ffad91; }
.file-status.is-success { color: #e7c77a; }

.thank-you {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 225, 152, .52), transparent 28%),
    linear-gradient(135deg, #e7ae55, #c96a32 48%, #8f3f22);
  clip-path: circle(0% at 50% 50%);
  visibility: hidden;
  transform: translateY(0);
  transition: clip-path 800ms var(--ease-pop), transform 1000ms var(--ease-slide), visibility 0s linear 1000ms;
}

.thank-you.is-entering {
  visibility: visible;
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 800ms var(--ease-pop), transform 1000ms var(--ease-slide), visibility 0s;
}

.thank-you.is-leaving {
  visibility: visible;
  clip-path: circle(150% at 50% 50%);
  transform: translateY(110%);
  transition: transform 1000ms cubic-bezier(.74, -.02, .22, .99), visibility 0s linear 1000ms;
}

.thank-you p {
  position: relative;
  z-index: 2;
  width: min(94vw, 1500px);
  margin: 0;
  color: #2d160c;
  transform: scale(.72) rotate(-2deg);
  opacity: 0;
  text-align: center;
}

.thank-you-title {
  display: block;
  font-size: clamp(42px, 12vw, 190px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: .01em;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
}

.thank-you-subtitle {
  display: block;
  margin-top: clamp(14px, 2.5vmin, 28px);
  font-size: clamp(17px, 3.2vw, 48px);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: .08em;
}

.thank-you.is-entering p { animation: thank-pop 740ms 160ms var(--ease-pop) forwards; }

.thank-you-grain {
  position: absolute;
  inset: -50%;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grain 300ms steps(2) infinite;
}

@keyframes thank-pop { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes grain {
  0% { transform: translate(0,0); }
  25% { transform: translate(3%,-2%); }
  50% { transform: translate(-2%,3%); }
  75% { transform: translate(2%,2%); }
}

.toast {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  max-width: min(520px, calc(100vw - 32px));
  padding: 16px 20px;
  border: 1px solid rgba(255, 225, 184, .18);
  border-radius: 15px;
  background: rgba(49, 29, 18, .94);
  color: var(--cream);
  box-shadow: 0 14px 42px rgba(20, 8, 3, .42);
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Compact controls keep the entire survey inside the fixed 100dvh shell. */
@media (min-width: 700px) and (max-height: 900px) {
  .survey-card { padding: 20px clamp(30px, 4vw, 44px) 22px; }
  .survey-header { margin-bottom: 10px; }
  .eyebrow { margin-bottom: 7px; }
  .role-selector { margin-bottom: 12px; }
  .role-selector legend, .role-selector > p { margin-bottom: 7px; }
  .role-toggle { min-height: 52px; }
  .role-option { min-height: 40px; }
  h1 { font-size: clamp(36px, 5.7vmin, 54px); }
  .question-list { gap: 11px; }
  .question-copy { margin-bottom: 4px; }
  .question h2 { font-size: clamp(20px, 2.6vmin, 26px); }
  .slider-track { height: 47px; }
  .slider-track::before, .slider-track-fill { top: 22px; }
  .notch { height: 47px; }
  .notch::before { top: 16px; }
  .slider-handle { width: 43px; height: 43px; top: 2px; }
  .slider-labels { margin-top: -1px; }
  .feedback-options { gap: 6px; margin-top: 5px; }
  .feedback-option { min-height: 34px; padding: 5px 8px; }
  .feedback-check { flex-basis: 17px; width: 17px; height: 17px; font-size: 11px; }
  .submit-wrap { margin-top: 12px; }
  .submit-button { min-height: 62px; }
  .submit-label { font-size: clamp(23px, 3vmin, 30px); }
  .submit-arrow { width: 40px; height: 40px; }
  .file-status { min-height: 15px; margin-top: 5px; }
}

@media (max-width: 699px) {
  .survey-card {
    width: calc(100vw - 20px);
    padding: 22px 18px 24px;
    border-radius: 22px;
  }

  .survey-header { margin-bottom: 16px; }
  .role-selector { margin-bottom: 16px; }
  .role-toggle { width: 100%; min-height: 56px; border-radius: 18px; }
  .role-toggle-glider, .role-option { border-radius: 13px; }
  .role-option { min-height: 44px; padding-inline: 8px; font-size: 14px; }
  .question-copy { gap: 7px; }
  .question-list { gap: 16px; }
  .slider-track { height: 52px; }
  .slider-track::before, .slider-track-fill { top: 24px; }
  .notch { width: 48px; height: 52px; }
  .notch::before { top: 18px; }
  .slider-handle { width: 46px; height: 46px; top: 3px; }
  .feedback-options { gap: 5px; }
  .feedback-option { min-height: 42px; padding: 6px; gap: 5px; font-size: 10.5px; }
  .feedback-check { flex-basis: 16px; width: 16px; height: 16px; border-radius: 5px; font-size: 10px; }
  .submit-button { min-height: 68px; padding-inline: 20px; }
  .ambient-orbit { opacity: .3; }
}

@media (pointer: coarse) {
  .notch { width: 58px; }
  .feedback-option { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}