/* Midnight blue and violet palette for the DelQuro Labs survey. */
:root {
  --ink: #f0f3ff;
  --muted: #b8c4e0;
  --line: #3d496e;
  --accent: #b59cff;
  --blue: #86ccff;
  --paper: #11172e;
  --teal: #b59cff;
  --silver: #d9e1f6;
  background: #090d20;
}
html, body { background: #090d20; color: var(--ink); }
html { overflow-x: clip; }
body { border-color: #9378f0; }
::selection { background: #9474ee88; color: #fff; }
.site-background-shade {
  background: radial-gradient(circle at 71% 31%, #6a4bc933, transparent 39%),
    linear-gradient(90deg, #090d20fa 0%, #12122eec 35%, #151c4888 64%, #090d2038 100%);
}
body:has(#survey:not([hidden])) .site-background-shade,
body:has(#thankYou:not([hidden])) .site-background-shade {
  background: linear-gradient(135deg, #090d20ee, #171537dc 54%, #0c1a3bd8);
}
.masthead { border-color: #8995d04d; }
.brand-mark { filter: hue-rotate(78deg) saturate(1.25) drop-shadow(0 0 12px #8e84ff77); }
.brand-wordmark { filter: hue-rotate(91deg) saturate(1.2); }
.brand-subtitle { color: #b5c0dd; }
.text-button { background: #111a34e6; border-color: #58658c; color: #e4eaff; }
.text-button:hover { background: #202856; border-color: #b59cff; }
.eyebrow { color: var(--blue); }
.welcome-copy > .eyebrow { background: #7297ff1f; border-color: #99a8ff70; }
.status-dot { background: #86ccff; box-shadow: 0 0 12px #86ccffba; }
.welcome h1 > span, .thank-you h1 span {
  color: #bba9ff;
  background: linear-gradient(100deg, #86d3ff 3%, #c5aaff 89%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome-description { color: #c7d0e9; }
.welcome { position: relative; }
.welcome-copy { align-self: start; }
.perspective-prompt { color: #e2e8fa; }
.perspective-choices button { background: #121a36e8; border-color: #56638b; color: #d4def4; }
.perspective-choices button:hover { background: #1c2c53; border-color: #8bd0ff; color: #fff; }
.perspective-choices button[aria-pressed=true] { background: #2a2452; border-color: #b59cff; color: #e9deff; box-shadow: inset 0 0 0 1px #b59cff88, 0 0 18px #8561dc44; }
.welcome-perspective { background: linear-gradient(120deg, #292246ed, #111c39e8); border-color: #a396f180; border-left-color: #b59cff; box-shadow: 0 14px 35px #05091b77; }
.perspective-label { color: #cbb9ff; }
.welcome-perspective .intro { color: #eff1ff; }
.primary { background: linear-gradient(110deg, #285fdf, #7041cf); border-color: #9da8ff8c; color: #fff; box-shadow: 0 10px 28px #405bdb5c; }
.primary:hover { background: linear-gradient(110deg, #356dea, #7950d9); color: #fff; transform: translateY(-1px); }
.secondary { background: #ffffff08; border-color: #56638b; color: #e3eaff; }
.secondary:hover { background: #697bd52e; border-color: #86ccff; }
.welcome-meta { color: #c6d0e9; }
.welcome-meta i { color: #86ccff; }
.welcome-small { color: #b7c3df; }

.art-message {
  position: absolute;
  z-index: 5;
  bottom: 8px;
  left: 0;
  width: min(440px, 47%);
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid #a59bff91;
  border-left: 3px solid #8dd0ff;
  border-radius: 15px;
  background: linear-gradient(130deg, #101b42f2, #29265ceb);
  box-shadow: 0 16px 36px #050b2a85;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.art-message .art-label,
.art-message .art-caption {
  position: static;
  inset: auto;
  width: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
  letter-spacing: normal;
}
.art-message .art-label { color: #f0f3ff; font: 700 15px/1.35 Inter, ui-sans-serif, system-ui, sans-serif; }
.art-message .art-caption { color: #aad8ff; font: 600 11px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.art-star { color: #c3adff; text-shadow: 0 0 24px #a78cffc7; }
.art-orbit { border-color: #9d9dff77; box-shadow: 0 0 28px #b293ff5e; }
.day-card { box-shadow: 0 22px 48px #050b2999; }
.morning { background: linear-gradient(135deg, #f2f6fff5, #d3e1faed); border-color: #f5f9ff; color: #192549; }
.morning:before { background: linear-gradient(90deg, #86d5ff, #8b74ee, transparent); }
.shift { background: linear-gradient(135deg, #d4c3fff3, #94bbffed); border-color: #e6dcff; color: #181837; box-shadow: 0 20px 43px #07183d70, 0 0 29px #ad91ff99; }
.shift:before { background: linear-gradient(90deg, #f2eaff, #826aee, transparent); }
.evening { background: linear-gradient(135deg, #141b38f4, #30295bed); border-color: #aa9bffb8; color: #f0f3ff; }
.evening:before { background: linear-gradient(90deg, #83cfff, #b8a5ff, transparent); }
.evening .day-icon { color: #c3e5ff; background: #879bff30; }
.day-card { will-change: transform; }
.morning { top: 25px; }
.shift { top: 345px; }
.evening { bottom: 38px; }
.morning { animation: card-roam-morning 11s ease-in-out infinite; }
.shift { animation: card-roam-shift 8.5s ease-in-out infinite; }
.evening { animation: card-roam-evening 14s ease-in-out infinite; }
@keyframes card-roam-morning {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  25% { transform: translate(calc(-1 * clamp(60px, 8vw, 110px)), -4px) rotate(1deg); }
  50% { transform: translate(calc(-1 * clamp(100px, 12vw, 165px)), 12px) rotate(-4deg); }
  75% { transform: translate(calc(-1 * clamp(45px, 6vw, 85px)), 4px) rotate(2deg); }
}
@keyframes card-roam-shift {
  0%, 100% { transform: translate(0, 0) rotate(3deg); }
  20% { transform: translate(calc(-1 * clamp(70px, 9vw, 120px)), -80px) rotate(-3deg); }
  45% { transform: translate(calc(-1 * clamp(150px, 22vw, 280px)), -160px) rotate(5deg); }
  70% { transform: translate(calc(-1 * clamp(110px, 16vw, 210px)), -15px) rotate(-4deg); }
  85% { transform: translate(-55px, 40px) rotate(2deg); }
}
@keyframes card-roam-evening {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  25% { transform: translate(clamp(90px, 10vw, 145px), 5px) rotate(3deg); }
  50% { transform: translate(clamp(140px, 16vw, 220px), 18px) rotate(-4deg); }
  75% { transform: translate(clamp(65px, 7vw, 110px), -2px) rotate(1deg); }
}
.study-note { background: #11172ef2; border-color: #8293db73; color: #d0d9ef; box-shadow: 0 14px 38px #05091b8c; }
.study-note p { color: #c4cee6; }
.study-note strong { color: #f0f3ff; }
.note-mark { color: #b59cff; }
.page-footer {
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #d8e2fa;
  text-shadow: 0 2px 9px #05091b;
}

@media (min-width: 781px) and (max-width: 1000px) {
  .shift { animation-name: card-roam-shift-tablet; }
  .evening { animation-name: card-roam-evening-tablet; }
}
@keyframes card-roam-shift-tablet {
  0%, 100% { transform: translate(0, 0) rotate(3deg); }
  20% { transform: translate(-45px, -85px) rotate(-3deg); }
  45% { transform: translate(-75px, -150px) rotate(5deg); }
  70% { transform: translate(-35px, -35px) rotate(-4deg); }
  85% { transform: translate(0, 35px) rotate(2deg); }
}
@keyframes card-roam-evening-tablet {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  25% { transform: translate(-45px, 10px) rotate(2deg); }
  50% { transform: translate(-95px, 5px) rotate(-4deg); }
  75% { transform: translate(-40px, -5px) rotate(1deg); }
}

@media (max-width: 1000px) {
  .art-message {
    position: relative;
    grid-column: 1 / -1;
    bottom: auto;
    left: auto;
    width: min(440px, 100%);
  }
}

.survey-rail { background: linear-gradient(155deg, #2d245b, #111e3d 73%); border-color: #a194f18a; box-shadow: 0 14px 35px #05091b8c; }
.survey-rail > .eyebrow { color: #cbb9ff; }
.section-list li { color: #bfcbe4; }
.section-list li:not(:last-child):before { background: #6774a0; }
.section-number { border-color: #8897c2; }
.section-list .current .section-number { background: #b59cff; border-color: #b59cff; color: #171632; }
.section-list .complete .section-number { background: #2b4a80; border-color: #8dbdffb0; color: #d2eaff; }
.rail-note { border-color: #9d91e65c; }
.rail-note p { color: #ced9f0; }
.survey-main { background: #11172ef7; border-color: #5a6891; box-shadow: 0 20px 55px #05091ba3; }
.role-context, .step-heading p { color: #c4cee8; }
.step-count { color: #bbc7e1; }
progress, progress::-webkit-progress-bar { background: #293453; }
progress { color: #86ccff; }
progress::-webkit-progress-value { background: linear-gradient(90deg, #579cf8, #af8cff); }
progress::-moz-progress-bar { background: #8e9eff; }
.focus-pill { background: #2a2858; border-color: #a093f17a; color: #d8cbff; }
.choice { background: #18223e; border-color: #506089; color: #f0f3ff; }
.choice:hover { background: #213154; border-color: #92c7ff; }
.choice:has(input:checked) { background: #302955; border-color: #b59cff; box-shadow: inset 0 0 0 1px #b59cff; }
.choice:has(input:checked) .choice-title { color: #e8ddff; }
.choice-icon { background: #29385c; color: #b1dcff; }
.choice:has(input:checked) .choice-icon { background: #51417c; color: #e2d5ff; }
.choice-mark { border-color: #8c9cc3; }
.choice:has(input:checked) .choice-mark { background: #b59cff; border-color: #b59cff; color: #171632; }
.pills .choice:has(input:checked) { background: linear-gradient(110deg, #285fdf, #7041cf); border-color: #aaaaff; color: #fff; }
.pills .choice:has(input:checked) .choice-title { color: #fff; }
.workflow-choices .choice:nth-last-child(-n+2) { background: #151e37; }
.workflow-choices .choice:nth-last-child(-n+2):has(input:checked) { background: #302955; }
.question select, .question input[type=text], .question input[type=email], .question textarea { background: #17213a; border-color: #5c6c96; color: #f0f3ff; }
.question input::placeholder, .question textarea::placeholder { color: #aebcda; }
.question select:focus, .question input:focus, .question textarea:focus { border-color: #b59cff; box-shadow: 0 0 0 3px #b59cff36; }
.field-hint, .footer-note, .review-card dt, .optional { color: #b8c6e3; }
.field-error { color: #ffb9c4; }
.has-error > .choices { outline-color: #d997ad; }
.question-group { border-color: #3d496e; }
.optional-story, .review-card { background: #1d2845; }
.optional-story textarea { background: #131d35; }
.form-actions { background: #11172ef5; }
.form-error { background: #402639; border-color: #ae7797; color: #ffe1ea; }
.send-note, .restart-message { color: #bfcae3; }
.service-notice { background: #2c2543; border-color: #9e8dcd; color: #f3edff; }
.thank-you { background: #11172ef5; border-color: #a194f1a0; box-shadow: 0 22px 60px #05091ba8; }
.thank-icon { background: linear-gradient(135deg, #91d3ff, #b59cff); color: #171632; }
.thank-signature { color: #cdbdff; }
.skip-link { background: #b59cff; color: #171632; }
dialog { border-color: #66769f; box-shadow: 0 25px 80px #05091bb0; }
dialog::backdrop { background: #05091cdb; }
.dialog-content p.eyebrow, .dialog-content a { color: #86ccff; }
.close-button { background: #29395c; color: #e7edff; }
button:focus-visible, a:focus-visible, .choice:has(input:focus-visible) { outline-color: #c4e4ff; }

@media (max-width: 780px) {
  .site-background-shade { background: linear-gradient(180deg, #0a0f24bf, #151534cf); }
  .welcome-copy { align-self: auto; background: #11172ef2; border-color: #a194f18a; box-shadow: 0 16px 42px #05091b9c; }
  .day-art {
    --card-mobile-travel: clamp(30px, calc(100vw - 305px), 92px);
    --card-middle-travel: clamp(35px, calc(100vw - 290px), 108px);
    min-height: 690px;
    overflow: clip;
  }
  .art-message { width: 100%; }
  .morning { top: 150px; left: 0; }
  .shift { top: 360px; right: 0; }
  .evening { bottom: 35px; left: 10px; }
  .morning { animation-name: card-roam-morning-mobile; }
  .shift { animation-name: card-roam-shift-mobile; }
  .evening { animation-name: card-roam-evening-mobile; }
}
@keyframes card-roam-morning-mobile {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  25% { transform: translate(min(55px, var(--card-mobile-travel)), 25px) rotate(1deg); }
  50% { transform: translate(var(--card-mobile-travel), 70px) rotate(3deg); }
  75% { transform: translate(min(40px, var(--card-mobile-travel)), 10px) rotate(-4deg); }
}
@keyframes card-roam-shift-mobile {
  0%, 100% { transform: translate(0, 0) rotate(3deg); }
  20% { transform: translate(calc(-1 * min(60px, var(--card-middle-travel))), -38px) rotate(-3deg); }
  45% { transform: translate(calc(-1 * var(--card-middle-travel)), 12px) rotate(5deg); }
  70% { transform: translate(calc(-1 * var(--card-middle-travel)), 75px) rotate(-4deg); }
  85% { transform: translate(14px, 95px) rotate(2deg); }
}
@keyframes card-roam-evening-mobile {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  25% { transform: translate(min(55px, var(--card-mobile-travel)), -35px) rotate(3deg); }
  50% { transform: translate(var(--card-mobile-travel), 12px) rotate(-4deg); }
  75% { transform: translate(min(45px, var(--card-mobile-travel)), 20px) rotate(1deg); }
}