/* Local composition tokens ------------------------------------------------ */

:root {
  color-scheme: light;
  --ink: var(--sp-neural-black);
  --organic-ink: var(--sp-organic-ink, #26131c);
  --bone: var(--sp-bone-white);
  --jelly-light: #ffb3c9;
  --jelly-mid: #f66f9e;
  --violet: var(--sp-synapse-violet);
  --mint: var(--sp-symbiotic-mint);
  --visor-raised: var(--sp-membrane);
  --prototype-surround: #eee9eb;
  --panel-material: linear-gradient(180deg, rgb(255 250 247 / 99%), rgb(251 240 241 / 98%));
  --note-material: linear-gradient(155deg, rgb(255 249 245 / 98%), rgb(251 237 239 / 96%));
  --visor-light: #382033;
  --visor-mid: #281522;
  --visor-deep: #190d17;
  --shell-material:
    radial-gradient(ellipse 88% 72% at 31% 12%, rgb(255 247 250 / 38%) 0 8%, rgb(255 224 235 / 18%) 30%, transparent 61%),
    radial-gradient(ellipse 86% 78% at 76% 88%, rgb(151 23 80 / 20%) 0 19%, transparent 66%),
    linear-gradient(145deg, #f9adc4 0%, var(--jelly-mid) 52%, #d34e83 100%);
  --pink-field:
    radial-gradient(ellipse 76% 48% at 18% 4%, rgb(255 255 255 / 34%) 0 4%, rgb(255 224 235 / 18%) 27%, transparent 62%),
    radial-gradient(ellipse 88% 68% at 92% 96%, rgb(151 23 80 / 20%) 0 11%, transparent 62%),
    radial-gradient(ellipse 92% 82% at 48% 50%, rgb(255 164 194 / 52%) 0 32%, rgb(246 106 155 / 74%) 72%, rgb(197 48 109 / 86%) 100%),
    linear-gradient(145deg, var(--jelly-light) 0%, var(--jelly-mid) 48%, #d24780 100%);
  --answer-material:
    radial-gradient(ellipse 96% 118% at 22% -38%, rgb(255 247 242 / 10%) 0 15%, transparent 62%),
    radial-gradient(ellipse 88% 108% at 96% 132%, rgb(22 13 24 / 22%) 0 20%, transparent 66%),
    linear-gradient(150deg, #533448 0%, #43293b 50%, #311c2b 100%);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, 1, .5, 1);
  --quiz-screen-inset: var(--sp-space-4);
  --panel-height: calc(var(--sp-space-2) + var(--sp-target-min));
  --panel-sag: var(--sp-space-6);
  --bottom-panel-height: var(--panel-height);
  --route-min-height: calc(var(--sp-target-min) + var(--sp-space-2));
}

/* Foundation -------------------------------------------------------------- */

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--prototype-surround); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--prototype-surround);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
button, textarea, input { font: inherit; touch-action: manipulation; }
button, label { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: var(--sp-space-2);
  left: 50%;
  z-index: 40;
  padding: var(--sp-space-2) var(--sp-space-3);
  border-radius: var(--sp-radius-m);
  background: var(--sp-deep-tissue);
  color: var(--sp-bone-white);
  transform: translate(-50%, -160%);
  transition: transform var(--sp-motion-duration-state) var(--sp-motion-easing-emphasized-enter);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Mobile application shell ------------------------------------------------ */

.app {
  width: min(100%, 430px);
  height: 100svh;
  min-height: 0;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  overflow: hidden;
  overflow: clip;
  background: var(--pink-field);
  background-blend-mode: screen, multiply, normal, normal;
}
.app[data-layout="postquiz"] {
  --bottom-panel-height: calc(var(--route-min-height) + var(--sp-space-4));
}
.app[data-view="content-unavailable"] {
  --bottom-panel-height: calc(var(--route-min-height) + var(--sp-space-6));
}

/* Top panel and account dialog ------------------------------------------- */

.topbar {
  min-height: calc(var(--panel-height) + env(safe-area-inset-top));
  position: relative;
  z-index: 8;
  padding: calc(var(--sp-space-2) + env(safe-area-inset-top)) max(var(--quiz-screen-inset), env(safe-area-inset-right)) 0 max(var(--quiz-screen-inset), env(safe-area-inset-left));
  overflow: visible;
}
.topbar::before {
  --curve-start: calc(100% - var(--panel-sag));
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--panel-sag) * -1);
  z-index: -1;
  clip-path: polygon(
    0 0, 100% 0,
    100% var(--curve-start), 97.5% calc(var(--curve-start) + .15px), 95% calc(var(--curve-start) + .59px),
    92.5% calc(var(--curve-start) + 1.31px), 90% calc(var(--curve-start) + 2.29px), 87.5% calc(var(--curve-start) + 3.51px),
    85% calc(var(--curve-start) + 4.95px), 82.5% calc(var(--curve-start) + 6.56px), 80% calc(var(--curve-start) + 8.29px),
    77.5% calc(var(--curve-start) + 10.13px), 75% calc(var(--curve-start) + 12px), 72.5% calc(var(--curve-start) + 13.87px),
    70% calc(var(--curve-start) + 15.71px), 67.5% calc(var(--curve-start) + 17.44px), 65% calc(var(--curve-start) + 19.05px),
    62.5% calc(var(--curve-start) + 20.49px), 60% calc(var(--curve-start) + 21.71px), 57.5% calc(var(--curve-start) + 22.69px),
    55% calc(var(--curve-start) + 23.41px), 52.5% calc(var(--curve-start) + 23.85px), 50% 100%,
    47.5% calc(var(--curve-start) + 23.85px), 45% calc(var(--curve-start) + 23.41px), 42.5% calc(var(--curve-start) + 22.69px),
    40% calc(var(--curve-start) + 21.71px), 37.5% calc(var(--curve-start) + 20.49px), 35% calc(var(--curve-start) + 19.05px),
    32.5% calc(var(--curve-start) + 17.44px), 30% calc(var(--curve-start) + 15.71px), 27.5% calc(var(--curve-start) + 13.87px),
    25% calc(var(--curve-start) + 12px), 22.5% calc(var(--curve-start) + 10.13px), 20% calc(var(--curve-start) + 8.29px),
    17.5% calc(var(--curve-start) + 6.56px), 15% calc(var(--curve-start) + 4.95px), 12.5% calc(var(--curve-start) + 3.51px),
    10% calc(var(--curve-start) + 2.29px), 7.5% calc(var(--curve-start) + 1.31px), 5% calc(var(--curve-start) + .59px),
    2.5% calc(var(--curve-start) + .15px), 0 var(--curve-start)
  );
  background: var(--panel-material);
  filter: drop-shadow(0 3px 7px rgb(118 45 79 / 8%));
  pointer-events: none;
}
.topbar-inner {
  width: min(100%, 430px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: start;
}
.topbar-title {
  align-self: center;
  justify-self: center;
  margin-top: 4px;
  color: var(--organic-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .02em;
}
.topbar-title.is-continuable::after {
  content: "";
  width: 1.5px;
  height: 1em;
  display: inline-block;
  margin-left: .22em;
  border-radius: 999px;
  background: var(--violet);
  box-shadow: 0 0 5px rgb(179 108 255 / 58%);
  opacity: .78;
  vertical-align: -.14em;
  animation: header-caret 920ms steps(1,end) infinite;
}
.topbar-start {
  width: 48px;
  height: 48px;
  position: relative;
  display: grid;
  place-items: center;
}
.topbar-start > * { grid-area: 1 / 1; }
.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--organic-ink);
  border: 0;
  padding: 0;
  background: transparent;
  font: 700 18px/20px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: -.05em;
}
.brand-mark:disabled { opacity: 1; }
.brand-mark[hidden] { display: none; }
.back {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
}
.back[hidden] { visibility: hidden; display: grid; }
.back::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg) translate(1px, -1px);
}
.progress {
  position: absolute;
  top: 0;
  left: 0;
  right: calc(var(--note-width) + var(--note-gap));
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone);
  font: 200 24px/30px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .07em;
  text-shadow: 0 0 6px rgb(255 247 242 / 58%), 0 0 19px rgb(255 247 242 / 36%);
}
.progress-label {
  position: relative;
  isolation: isolate;
  display: inline-block;
  opacity: .82;
  filter: blur(.24px);
}
.progress-label::before, .progress-label::after {
  content: attr(data-value);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--bone);
  white-space: nowrap;
  pointer-events: none;
}
.progress-label::before { opacity: .64; filter: blur(4.5px); transform: scale(1.035); }
.progress-label::after { opacity: .36; filter: blur(11px); transform: scale(1.12); }
.progress[hidden] { display: none; }

.account { position: relative; justify-self: end; }
.account-trigger {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}
.brand-mark, .back, .account-trigger {
  transition: transform 110ms var(--ease), opacity 140ms var(--ease);
}
.brand-mark:active:not(:disabled), .back:active:not(:disabled), .account-trigger:active:not(:disabled) {
  transform: scale(.96);
  opacity: .72;
}
.account-icon { width: 24px; height: 24px; overflow: visible; }
.account-icon circle, .account-icon path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-menu {
  position: fixed;
  z-index: 21;
  top: 0;
  right: max(0px, calc((100vw - 430px) / 2));
  bottom: 0;
  left: auto;
  height: 100svh;
  max-height: none;
  margin: 0;
  width: min(86vw, 360px);
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 24px 0 0 24px;
  background: linear-gradient(155deg, rgb(255 250 247 / 100%), rgb(249 237 240 / 100%));
  box-shadow: -6px 0 8px rgb(91 35 62 / 10%);
  color: var(--organic-ink);
  visibility: hidden;
  opacity: 0;
  transform: translateX(calc(100% + 18px));
  transition: transform 300ms cubic-bezier(.16,1,.3,1), opacity 200ms ease, visibility 0s linear 300ms;
}
.account-menu[open] { visibility: visible; opacity: 1; transform: translateX(0); transition-delay: 0s; }
.account-menu::backdrop { background: rgb(22 13 24 / 22%); }
@starting-style {
  .account-menu[open] { opacity: 0; transform: translateX(calc(100% + 18px)); }
}
.account-menu-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-left: 12px;
}
.account-menu-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.account-close {
  width: 48px;
  height: 48px;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}
.account-close::before, .account-close::after { content: ""; position: absolute; width: 16px; height: 1.5px; border-radius: 999px; background: currentColor; }
.account-close::before { transform: rotate(45deg); }
.account-close::after { transform: rotate(-45deg); }
.account-links { display: grid; gap: 4px; }
.account-links button {
  width: 100%;
  min-height: 52px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--organic-ink);
  text-align: left;
}
.account-links button:active, .account-close:active { background: rgb(179 108 255 / 10%); }

/* Central interaction field ---------------------------------------------- */

main {
  width: 100%;
  min-height: 0;
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: transparent;
}
main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sp-deep-tissue);
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms var(--ease-soft);
}
.app[data-view="route"] main::before { opacity: 1; }
.main-scroll {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  overflow-y: clip;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--sp-space-8) max(var(--quiz-screen-inset), env(safe-area-inset-right)) calc(var(--bottom-panel-height) + var(--panel-sag) + var(--sp-space-4) + env(safe-area-inset-bottom)) max(var(--quiz-screen-inset), env(safe-area-inset-left));
}
.main-scroll.is-scrollable {
  overflow-y: auto;
  scroll-padding-bottom: calc(var(--bottom-panel-height) + var(--panel-sag) + var(--sp-space-4));
}
.main-scroll::-webkit-scrollbar { display: none; }
.app:has(.footer[hidden]) .main-scroll { padding-bottom: calc(var(--sp-space-8) + var(--panel-sag) + env(safe-area-inset-bottom)); }
.presence-region { min-height: 0; overflow: visible; }
.presence-region,
.response {
  transition: opacity 300ms ease, transform 480ms var(--ease), filter 380ms ease;
}
.app[data-view="route"] .presence-region,
.app[data-view="route"] .response {
  opacity: 0;
  transform: translateY(-10px) scale(.97);
  filter: blur(8px);
  pointer-events: none;
}
.app[data-layout="postquiz"] .presence-region { transition: opacity 300ms ease; }
.app[data-view="route"] .presence-region { transform: none; filter: none; }
.presence-cluster { width: 100%; position: relative; display: grid; justify-items: center; isolation: isolate; }
.presence-motion {
  position: relative;
  width: min(68vw, 260px);
  aspect-ratio: 1.18;
  z-index: 2;
}
.presence {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  transform-style: preserve-3d;
  animation: presence-breathe 6.8s cubic-bezier(.37, 0, .63, 1) infinite alternate;
  touch-action: manipulation;
  cursor: pointer;
}
.app[data-layout="postquiz"] .presence-cluster { position: static; }
.app[data-layout="postquiz"] .presence-motion {
  position: absolute;
  top: calc(40svh - var(--panel-height));
  left: 50%;
  translate: -50% -50%;
}
.app[data-layout="postquiz"] .message-row {
  position: absolute;
  top: calc(40svh - var(--panel-height) + (min(68vw, 260px) / 2.36) - 31px);
  right: max(var(--quiz-screen-inset), env(safe-area-inset-right));
  left: max(var(--quiz-screen-inset), env(safe-area-inset-left));
  width: auto;
  margin-top: 0;
}
.app[data-layout="postquiz"][data-search="active"] .presence-motion {
  top: var(--sp-space-8);
  translate: -50% 0;
}
.app[data-layout="postquiz"][data-search="active"] .message-row {
  top: calc(var(--sp-space-8) + (min(68vw, 260px) / 1.18) - 31px);
}
/* Symbiont material ------------------------------------------------------- */

.haze {
  position: absolute;
  inset: -7%;
  background:
    radial-gradient(ellipse at 48% 54%, rgb(255 189 211 / 34%) 0 24%, rgb(246 106 155 / 18%) 54%, transparent 80%),
    radial-gradient(ellipse at 38% 30%, rgb(255 247 250 / 22%), transparent 54%);
  filter: blur(26px);
  opacity: .82;
  pointer-events: none;
  animation: haze-breathe 5.4s cubic-bezier(.37, 0, .63, 1) -1.1s infinite alternate;
}
.shell {
  position: absolute;
  inset: 5% 3% 3%;
  overflow: hidden;
  border-radius: 46% 46% 42% 42% / 48% 48% 38% 38%;
  background: var(--shell-material);
  background-blend-mode: screen, multiply, normal;
  filter: saturate(.98) contrast(.99) blur(.34px) drop-shadow(0 0 16px rgb(255 205 222 / 34%));
  box-shadow: inset 0 16px 30px rgb(255 247 250 / 16%), inset 12px 0 26px rgb(255 205 222 / 10%), inset -12px 0 28px rgb(167 31 88 / 8%), inset 0 -28px 42px rgb(112 17 65 / 16%);
  transform-origin: 50% 72%;
  animation: shell-breathe 4.8s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
.shell::before {
  content: "";
  position: absolute;
  inset: 9% 8% 7%;
  border-radius: inherit;
  background: radial-gradient(ellipse 78% 68% at 30% 24%, rgb(255 247 250 / 17%), transparent 66%), radial-gradient(ellipse 82% 74% at 68% 72%, rgb(255 124 170 / 9%), transparent 70%);
  filter: blur(12px);
  opacity: .7;
}
.shell::after {
  content: "";
  position: absolute;
  inset: 8% 13% 42% 12%;
  border-radius: 52% 48% 55% 45%;
  background: radial-gradient(ellipse at 34% 24%, rgb(255 255 255 / 28%) 0 12%, rgb(255 245 249 / 11%) 38%, transparent 72%);
  filter: blur(14px);
  opacity: .46;
  transform: rotate(-1deg);
}
.visor {
  position: absolute;
  width: 76%;
  height: 47%;
  top: 26%;
  overflow: visible;
  transform: translateZ(12px);
  filter: drop-shadow(0 0 8px rgb(86 25 61 / 16%));
  transform-origin: 50% 58%;
  animation: visor-breathe 5.6s cubic-bezier(.37, 0, .63, 1) -.8s infinite alternate;
}
.visor-bg { fill: url(#visorMaterial); stroke: rgb(255 247 242 / 10%); stroke-width: 1.5; }
.visor-stop--light { stop-color: var(--visor-light); }
.visor-stop--mid { stop-color: var(--visor-mid); }
.visor-stop--deep { stop-color: var(--visor-deep); }
.visor-shine { fill: rgb(255 255 255 / 8%); filter: blur(5px); }
.eye-bloom, .mouth-bloom { fill: none; stroke: var(--bone); stroke-linecap: round; stroke-linejoin: round; opacity: .2; filter: blur(6px); }
.eye-core, .mouth-core { fill: none; stroke: var(--bone); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgb(255 247 242 / 45%)); }
.eye-bloom { stroke-width: 17; }
.eye-core { stroke-width: 8; animation: eye-luminance 3.8s ease-in-out infinite alternate; }
.mouth-bloom { stroke-width: 12; }
.mouth-core { stroke-width: 5.5; }
.visor-thought-dot { fill: var(--bone); opacity: 0; filter: drop-shadow(0 0 4px rgb(255 247 242 / 48%)); transform-box: fill-box; transform-origin: center; }
.presence.is-analyzing .visor-thought-dot { animation: visor-thought-dot 1.35s var(--ease-soft) infinite; }
.presence.is-analyzing .visor-thought-dot--b { animation-delay: -.9s; }
.presence.is-analyzing .visor-thought-dot--c { animation-delay: -.45s; }
.face-path { transition: d 240ms var(--ease), opacity 160ms linear; }

/* Presence Note and search ------------------------------------------------ */

.message-row {
  --note-width: min(66.666vw, 286.666px);
  --note-gap: 12px;
  width: 100%;
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: -31px;
}
.presence-note-anchor {
  position: relative;
  justify-self: end;
  z-index: 4;
  width: var(--note-width);
  animation: note-float 8.2s cubic-bezier(.37, 0, .63, 1) -2.4s infinite alternate;
}
.presence-note {
  position: relative;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 15px 18px;
  color: var(--organic-ink);
}
.note-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 24px;
  background: var(--note-material);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), inset 0 -7px 15px rgb(201 111 143 / 6%), 0 0 8px rgb(255 228 236 / 22%);
  opacity: .96;
  pointer-events: none;
}
.note-tail { position: absolute; top: -14px; left: 25%; width: 36px; height: 22px; overflow: visible; transform: translateX(-50%); }
.note-tail path { fill: var(--bone); }
.sender {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--violet);
  color: var(--bone);
  font: 600 10px/14px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .08em;
}
.question {
  position: relative;
  z-index: 1;
  min-height: 50px;
  margin: 0;
  font: 400 17px/25px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .005em;
  text-wrap: pretty;
}
.question.is-typing::after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .9em;
  margin-left: .18em;
  border-radius: 999px;
  background: var(--violet);
  opacity: .72;
  transform: translateY(.08em) scaleY(.84);
  animation: typing-caret 720ms ease-in-out infinite alternate;
}
.symbio-search {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 56px;
  justify-self: end;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: var(--sp-space-3);
  margin-top: var(--sp-space-3);
  padding: 0 var(--sp-space-4);
  border-radius: var(--sp-shape-pill);
  background: linear-gradient(155deg,rgb(255 249 245 / 94%),rgb(251 237 239 / 90%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 0 10px rgb(255 228 236 / 18%);
  color: var(--organic-ink);
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-8px) scale(.975);
  pointer-events: none;
}
.symbio-search[hidden] { display: none; }
.symbio-search.is-visible {
  animation: symbio-search-in 520ms var(--ease) both;
  pointer-events: auto;
}
.symbio-search:focus-within {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), 0 0 11px rgb(179 108 255 / 24%);
}
.symbio-search:has(.symbio-search-input:focus-visible) {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
}
.symbio-search-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.symbio-search-input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--organic-ink);
  caret-color: var(--violet);
  font: 400 15px/22px "IBM Plex Mono",ui-monospace,monospace;
}
.symbio-search-input::placeholder { color: rgb(38 19 28 / 62%); opacity: 1; }
.symbio-search-input::-webkit-search-cancel-button { opacity: .5; }

/* Progressive answers and route content --------------------------------- */

.response { flex: 1 0 auto; min-height: 0; padding-top: 14px; }
.response.is-revealing .options--single .option {
  animation: single-option-in 360ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 64ms);
}
.response.is-revealing .options--multiple {
  animation: answer-surface-unfold 440ms var(--ease) both;
  transform-origin: 50% 0;
}
.response.is-revealing .options--multiple .option {
  animation: answer-row-resolve 260ms var(--ease) both;
  animation-delay: calc(110ms + var(--i, 0) * 42ms);
}
.response.is-revealing .text-field {
  animation: answer-surface-unfold 440ms var(--ease) both;
  transform-origin: 50% 0;
}
.response.is-revealing .field-meta { animation: counter-resolve 260ms var(--ease) 180ms both; }
.route-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  padding: var(--sp-space-8) max(var(--quiz-screen-inset), env(safe-area-inset-right)) calc(var(--bottom-panel-height) + var(--panel-sag) + var(--sp-space-8) + env(safe-area-inset-bottom)) max(var(--quiz-screen-inset), env(safe-area-inset-left));
  color: var(--sp-bone-white);
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 320ms ease 100ms, transform 480ms var(--ease) 70ms, filter 420ms ease 70ms;
  scrollbar-width: none;
}
.route-content::-webkit-scrollbar { display: none; }
.app[data-view="route"] .route-content {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}
.content-deck { display: grid; gap: var(--sp-space-4); }
.content-heading { display: grid; gap: var(--sp-space-2); padding: 0 var(--sp-space-1) var(--sp-space-1); }
.content-heading h1 { margin: 0; color: var(--sp-bone-white); font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
.content-heading p { max-width: 34ch; margin: 0; color: rgb(255 247 242 / 72%); font-size: 13px; line-height: 19px; text-wrap: pretty; }
.content-card {
  width: 100%;
  display: grid;
  gap: var(--sp-space-2);
  min-height: 106px;
  padding: var(--sp-space-4);
  border: 0;
  border-radius: 16px;
  background: rgb(255 247 242 / 9%);
  color: var(--sp-bone-white);
  text-align: left;
  box-shadow: inset 0 1px 0 rgb(255 247 242 / 9%);
}
.content-card--interactive {
  font: inherit;
  appearance: none;
  touch-action: manipulation;
  transition: transform 130ms var(--ease), opacity 160ms ease;
}
.content-card--interactive:active { transform: translateY(1px) scale(.985); opacity: .88; }
.content-card--featured {
  min-height: 150px;
  padding: var(--sp-space-5);
  background: var(--sp-bone-white);
  color: var(--sp-deep-tissue);
  box-shadow: none;
}
.content-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-3); font-size: 12px; line-height: 16px; opacity: .72; }
.content-card h2 { margin: auto 0 0; font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.015em; text-wrap: balance; }
.content-card p { margin: 0; font-size: 13px; line-height: 19px; opacity: .76; text-wrap: pretty; }
/* Answer controls --------------------------------------------------------- */

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.options--single { display: grid; gap: 10px; }
.options--multiple {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 24px;
  background-color: var(--visor-raised);
  background-image: var(--answer-material);
  box-shadow: inset 0 1px 0 rgb(255 247 242 / 12%), inset 0 -10px 18px rgb(22 13 24 / 12%), 0 0 8px rgb(255 205 222 / 10%);
}
.option {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background-color: var(--visor-raised);
  background-image: var(--answer-material);
  box-shadow: inset 0 1px 0 rgb(255 247 242 / 12%), inset 0 -10px 18px rgb(22 13 24 / 12%), 0 0 8px rgb(255 205 222 / 10%);
  color: var(--bone);
  cursor: pointer;
  transition: transform 120ms var(--ease), background-color 180ms var(--ease), filter 180ms var(--ease);
}
.option:active { transform: translateY(1px) scale3d(1.004,.982,1); }
.option.is-selected {
  background-color: #432b3a;
  background-image: radial-gradient(ellipse at 10% 50%, rgb(179 108 255 / 12%), transparent 42%), var(--answer-material);
}
.options--multiple .option {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.options--multiple .option:active { background: rgb(255 247 242 / 10%); }
.options--multiple .option.is-selected { background: transparent; }
.option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.option-label { font-size: 16px; line-height: 24px; font-weight: 400; }
.option.is-selected .option-label { font-weight: 500; }
.mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgb(255 247 242 / 62%);
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.mark.radio { border-radius: 50%; }
.mark.check { border-radius: 4px; }
.mark::after { content: ""; width: 9px; height: 9px; background: var(--bone); transform: scale(0); transition: transform 180ms var(--ease); }
.mark.radio::after { border-radius: 50%; }
.mark.check::after { width: 9px; height: 5px; border-left: 2.5px solid var(--bone); border-bottom: 2.5px solid var(--bone); background: transparent; transform: rotate(-45deg) scale(0); }
.is-selected .mark { border-color: var(--violet); background: var(--violet); }
.is-selected .mark.radio::after { transform: scale(1); }
.is-selected .mark.check::after { transform: rotate(-45deg) scale(1); }

.text-field {
  width: 100%;
  min-height: 132px;
  resize: none;
  appearance: none;
  padding: 16px;
  border: 0;
  border-radius: 24px;
  outline: none;
  background-color: var(--visor-raised);
  background-image: var(--answer-material);
  box-shadow: inset 0 1px 0 rgb(255 247 242 / 12%), inset 0 -12px 20px rgb(22 13 24 / 12%), 0 0 8px rgb(255 205 222 / 10%);
  color: var(--bone);
  font-size: 16px;
  line-height: 24px;
  caret-color: var(--violet);
}
.text-field::placeholder { color: #cdbac3; opacity: 1; }
.text-field::-webkit-resizer { display: none; }
.field-meta { display: flex; justify-content: flex-end; margin: 8px 2px 0; color: var(--organic-ink); font-size: 13px; line-height: 18px; }
.counter { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Mirrored bottom panel --------------------------------------------------- */

.footer {
  width: 100%;
  height: calc(var(--bottom-panel-height) + var(--panel-sag) + env(safe-area-inset-bottom));
  min-height: calc(var(--bottom-panel-height) + var(--panel-sag) + env(safe-area-inset-bottom));
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: grid;
  padding: 0;
  overflow: clip;
  clip-path: polygon(
    0 var(--panel-sag), 2.5% calc(var(--panel-sag) - .15px), 5% calc(var(--panel-sag) - .59px),
    7.5% calc(var(--panel-sag) - 1.31px), 10% calc(var(--panel-sag) - 2.29px), 12.5% calc(var(--panel-sag) - 3.51px),
    15% calc(var(--panel-sag) - 4.95px), 17.5% calc(var(--panel-sag) - 6.56px), 20% calc(var(--panel-sag) - 8.29px),
    22.5% calc(var(--panel-sag) - 10.13px), 25% calc(var(--panel-sag) - 12px), 27.5% calc(var(--panel-sag) - 13.87px),
    30% calc(var(--panel-sag) - 15.71px), 32.5% calc(var(--panel-sag) - 17.44px), 35% calc(var(--panel-sag) - 19.05px),
    37.5% calc(var(--panel-sag) - 20.49px), 40% calc(var(--panel-sag) - 21.71px), 42.5% calc(var(--panel-sag) - 22.69px),
    45% calc(var(--panel-sag) - 23.41px), 47.5% calc(var(--panel-sag) - 23.85px), 50% 0,
    52.5% calc(var(--panel-sag) - 23.85px), 55% calc(var(--panel-sag) - 23.41px), 57.5% calc(var(--panel-sag) - 22.69px),
    60% calc(var(--panel-sag) - 21.71px), 62.5% calc(var(--panel-sag) - 20.49px), 65% calc(var(--panel-sag) - 19.05px),
    67.5% calc(var(--panel-sag) - 17.44px), 70% calc(var(--panel-sag) - 15.71px), 72.5% calc(var(--panel-sag) - 13.87px),
    75% calc(var(--panel-sag) - 12px), 77.5% calc(var(--panel-sag) - 10.13px), 80% calc(var(--panel-sag) - 8.29px),
    82.5% calc(var(--panel-sag) - 6.56px), 85% calc(var(--panel-sag) - 4.95px), 87.5% calc(var(--panel-sag) - 3.51px),
    90% calc(var(--panel-sag) - 2.29px), 92.5% calc(var(--panel-sag) - 1.31px), 95% calc(var(--panel-sag) - .59px),
    97.5% calc(var(--panel-sag) - .15px), 100% var(--panel-sag), 100% 100%, 0 100%
  );
  background: transparent;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel-material);
  pointer-events: none;
}
.footer[hidden] { display: none; }
.footer.is-revealing { animation: action-resolve 300ms var(--ease) 140ms both; }
.primary {
  width: 100%;
  min-height: var(--bottom-panel-height);
  align-self: stretch;
  padding: calc(var(--panel-sag) + var(--sp-space-2)) max(var(--quiz-screen-inset), env(safe-area-inset-right)) max(var(--sp-space-2), env(safe-area-inset-bottom)) max(var(--quiz-screen-inset), env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  transition: transform 100ms var(--ease), color 180ms var(--ease), opacity 180ms var(--ease);
}
.primary:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.primary:disabled { background: transparent; box-shadow: none; color: rgb(38 19 28 / 42%); }
.finish-actions,
.recovery-actions {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-content: center;
  column-gap: var(--sp-space-6);
  row-gap: var(--sp-gap-related-tight);
  padding: calc(var(--panel-sag) + var(--sp-space-2)) max(var(--quiz-screen-inset), env(safe-area-inset-right)) max(var(--sp-space-2), env(safe-area-inset-bottom)) max(var(--quiz-screen-inset), env(safe-area-inset-left));
}
.finish-actions[hidden],
.recovery-actions[hidden] { display: none; }

.route,
.recovery-action {
  width: var(--route-min-height);
  min-height: var(--route-min-height);
  aspect-ratio: 1;
  justify-self: center;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sp-shape-pill);
  background: transparent;
  box-shadow: none;
  color: var(--sp-neural-black);
  text-align: center;
  transition: transform 100ms var(--ease);
}
.route::before,
.recovery-action::before {
  content: "";
  width: calc(var(--route-min-height) + var(--sp-space-8) + var(--sp-space-8));
  height: calc(var(--route-min-height) + var(--sp-space-6) + var(--sp-space-4));
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 40%, rgb(246 111 158 / 48%) 0%, rgb(246 111 158 / 24%) 34%, transparent 70%),
    radial-gradient(ellipse at 68% 60%, rgb(179 108 255 / 56%) 0%, rgb(179 108 255 / 30%) 38%, transparent 74%);
  opacity: 0;
  filter: blur(12px) saturate(.92);
  transform: translate(-50%,-50%) scale(1.04);
  transition: opacity 240ms ease, transform 320ms var(--ease);
  pointer-events: none;
  will-change: transform, filter;
}
.route > *,
.recovery-action > * { position: relative; z-index: 1; }
.route:active:not(:disabled),
.recovery-action:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.route:disabled {
  background: transparent;
  cursor: default;
  transform: none;
}
.route:disabled::before,
.recovery-action[aria-busy="true"]::before,
.recovery-action.is-reported::before {
  opacity: .8;
  transform: translate(-50%,-50%) scale(1.12);
  animation: route-energy-breathe 10.8s cubic-bezier(.37,0,.63,1) infinite alternate;
}
.route:disabled .route-icon,
.route:disabled .route-title,
.recovery-action.is-reported .recovery-icon,
.recovery-action.is-reported .recovery-title { opacity: .6; }
.recovery-action {
  width: min(100%, 88px);
  aspect-ratio: auto;
}
.recovery-action:disabled:not([aria-busy="true"]):not(.is-reported) { opacity: .44; }
.route-icon,
.recovery-icon {
  width: var(--sp-icon-size-feature);
  height: var(--sp-icon-size-feature);
  flex: 0 0 var(--sp-icon-size-feature);
  fill: none;
  color: var(--sp-deep-tissue);
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 180ms ease;
}
.route-icon *,
.recovery-icon * { vector-effect: non-scaling-stroke; }
.route-icon--symbio .route-icon-visor { fill: none; }
.route-title,
.recovery-title { color: var(--sp-neural-black); font-size: 12px; line-height: 16px; font-weight: 500; transition: opacity 180ms ease; }
.recovery-title { max-width: 84px; text-wrap: balance; }

/* Analysis state ---------------------------------------------------------- */

.question.is-analysis-log {
  width: 100%;
  min-height: 0;
  display: grid;
  gap: 5px;
  text-wrap: pretty;
}
.analysis-step {
  display: block;
  transform-origin: left center;
  transition: color 280ms var(--ease), font-size 280ms var(--ease), line-height 280ms var(--ease), opacity 280ms var(--ease), transform 280ms var(--ease);
}
.analysis-step.is-current {
  color: var(--organic-ink);
  font-size: 16px;
  line-height: 24px;
  opacity: 1;
  animation: analysis-step-in 280ms var(--ease);
}
.analysis-step.is-complete {
  color: rgb(38 19 28 / 68%);
  font-size: 12px;
  line-height: 17px;
  opacity: .72;
  transform: translateX(1px);
}
.analysis-step.is-typing::after {
  content: "";
  width: 1.5px;
  height: .9em;
  display: inline-block;
  margin-left: .22em;
  border-radius: 999px;
  background: var(--violet);
  box-shadow: 0 0 5px rgb(179 108 255 / 48%);
  vertical-align: -.08em;
  animation: typing-caret 720ms var(--ease-soft) infinite alternate;
}
.presence.is-analyzing { animation: presence-think 2.6s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.presence.is-analyzing .visor { animation: visor-think 2.1s cubic-bezier(.37, 0, .63, 1) -.4s infinite alternate; }
.presence.is-analyzing .shell { animation: analysis-shell 1.9s cubic-bezier(.37,0,.63,1) infinite alternate; }
.presence.is-analyzing .haze { animation: analysis-haze 1.7s cubic-bezier(.37,0,.63,1) infinite alternate; }
.presence.is-analyzing .eye-core { animation-duration: 1.15s; }

/* Content recovery state ------------------------------------------------- */

.presence.is-recovering { animation: recovery-listen 2.4s cubic-bezier(.37,0,.63,1) infinite alternate; }
.presence.is-recovering .visor { animation: recovery-visor 1.8s cubic-bezier(.37,0,.63,1) infinite alternate; }
.presence.is-recovering .shell { animation: recovery-shell 2s cubic-bezier(.37,0,.63,1) infinite alternate; }
.presence.is-recovering .haze { animation: recovery-haze 1.9s cubic-bezier(.37,0,.63,1) infinite alternate; }
.presence.is-recovering .visor-thought-dot { animation: visor-thought-dot 1.15s var(--ease-soft) infinite; }
.presence.is-recovering .visor-thought-dot--b { animation-delay: -.76s; }
.presence.is-recovering .visor-thought-dot--c { animation-delay: -.38s; }

/* Accessibility and motion ------------------------------------------------ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.back:focus-visible, .brand-mark:focus-visible, .account-trigger:focus-visible, .account-menu button:focus-visible, .presence:focus-visible, .option:has(input:focus-visible), .text-field:focus-visible, .primary:focus-visible, .route:focus-visible, .recovery-action:focus-visible, .content-card--interactive:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

@keyframes presence-breathe { 0% { transform: translate3d(-1px,1.5px,0) rotateY(-1.5deg) scale(.997); } 48% { transform: translate3d(.8px,-2.5px,7px) rotateX(-.8deg) rotateY(.9deg) scale(1.006); } 100% { transform: translate3d(.2px,-.5px,2px) rotateY(1.3deg) scale(1.001); } }
@keyframes shell-breathe { 0% { transform: scale3d(1.01,.988,1); } 54% { transform: translateY(-.7px) scale3d(.994,1.014,1); } 100% { transform: translateY(.4px) scale3d(1.006,.995,1); } }
@keyframes visor-breathe { 0% { transform: translate3d(-.7px,.7px,12px) rotateY(-.7deg) scale(.998); } 55% { transform: translate3d(.6px,-1px,14px) rotateX(-.5deg) rotateY(.6deg) scale(1.004); } 100% { transform: translate3d(0,-.2px,13px) rotateY(.35deg) scale(1.001); } }
@keyframes haze-breathe { 0% { opacity: .5; transform: scale(.965); } 58% { opacity: .72; transform: translateY(-1px) scale(1.025); } 100% { opacity: .62; transform: scale(.995); } }
@keyframes eye-luminance { from { opacity: .86; } to { opacity: 1; } }
@keyframes note-float { 0% { transform: translate3d(-.2px,.6px,0) scaleY(1.001); } 52% { transform: translate3d(.3px,-.6px,0) scaleY(.9995); } 100% { transform: translate3d(-.1px,-.2px,0) scaleY(1.0012); } }
@keyframes typing-caret { from { opacity: .28; transform: translateY(.08em) scaleY(.62); } to { opacity: .82; transform: translateY(.08em) scaleY(.94); } }
@keyframes header-caret { 0%, 46% { opacity: .78; } 47%, 100% { opacity: .16; } }
@keyframes single-option-in { from { opacity: 0; transform: translate3d(0,8px,0) scale3d(.985,.92,1); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes answer-surface-unfold { from { opacity: 0; clip-path: inset(0 0 88% 0 round 24px); transform: translateY(-4px) scaleY(.82); filter: blur(4px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 24px); transform: none; filter: blur(0); } }
@keyframes answer-row-resolve { from { opacity: 0; transform: translateY(-4px); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes counter-resolve { from { opacity: 0; transform: translateY(-4px); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes action-resolve { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes analysis-step-in { from { opacity: .2; transform: translateY(3px); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes visor-thought-dot { 0%, 18%, 100% { opacity: .2; transform: translateY(1px) scale(.72); } 48%, 68% { opacity: .92; transform: translateY(-1px) scale(1.08); } }
@keyframes presence-think { 0% { transform: translate3d(-2px,1px,0) rotateY(-2.2deg) rotateZ(-.35deg) scale(.998); } 52% { transform: translate3d(1px,-3px,7px) rotateX(-1deg) rotateY(1.4deg) rotateZ(.3deg) scale(1.006); } 100% { transform: translate3d(2px,-1px,3px) rotateY(2deg) scale(1.001); } }
@keyframes visor-think { 0% { transform: translate3d(-2px,.5px,12px) rotateY(-1.4deg) scale(.998); } 100% { transform: translate3d(2px,-1px,14px) rotateX(-.6deg) rotateY(1.2deg) scale(1.004); } }
@keyframes analysis-shell { from { transform: translateY(1px) scale3d(1.012,.986,1); filter: saturate(.97) contrast(.99) blur(.34px) drop-shadow(0 0 13px rgb(255 205 222 / 28%)); } to { transform: translateY(-2px) scale3d(.992,1.018,1); filter: saturate(1.02) contrast(.995) blur(.28px) drop-shadow(0 0 22px rgb(255 205 222 / 46%)); } }
@keyframes analysis-haze { from { opacity: .46; transform: scale(.96); } to { opacity: .82; transform: translateY(-2px) scale(1.055); } }
@keyframes recovery-listen { from { transform: translate3d(-1px,2px,0) rotateY(-1.4deg) rotateZ(-.2deg) scale3d(1.006,.991,1); } to { transform: translate3d(1px,-3px,6px) rotateX(-.7deg) rotateY(1.1deg) rotateZ(.2deg) scale3d(.996,1.01,1); } }
@keyframes recovery-visor { from { transform: translate3d(-1.5px,.7px,12px) rotateY(-1deg) scale(.998); } to { transform: translate3d(1.5px,-1px,14px) rotateX(-.45deg) rotateY(.9deg) scale(1.004); } }
@keyframes recovery-shell { from { transform: translateY(1px) scale3d(1.01,.988,1); } to { transform: translateY(-1.5px) scale3d(.994,1.012,1); } }
@keyframes recovery-haze { from { opacity: .5; transform: scale(.97); } to { opacity: .78; transform: translateY(-1px) scale(1.045); } }
@keyframes symbio-search-in { from { opacity: 0; filter: blur(4px); transform: translateY(-8px) scale(.975); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes route-energy-breathe {
  0% { transform: translate(-52%,-49%) scale(1.06,1.14) rotate(-2deg); filter: blur(13px) saturate(.88); }
  46% { transform: translate(-48%,-52%) scale(1.18,1.06) rotate(1.5deg); filter: blur(15px) saturate(.98); }
  100% { transform: translate(-51%,-48%) scale(1.11,1.18) rotate(-1deg); filter: blur(14px) saturate(.92); }
}

@media (max-width: 359px) {
  .presence-motion { width: min(66vw, 228px); }
  .app[data-layout="postquiz"] .message-row { top: calc(40svh - var(--panel-height) + (min(66vw, 228px) / 2.36) - 31px); }
  .app[data-layout="postquiz"][data-search="active"] .message-row { top: calc(var(--sp-space-8) + (min(66vw, 228px) / 1.18) - 31px); }
  .presence-note { padding-inline: 16px; }
  .question { font-size: 16px; line-height: 24px; }
}
@media (min-height: 820px) {
  .presence-motion { width: min(72vw, 278px); }
  .app[data-layout="postquiz"] .message-row { top: calc(40svh - var(--panel-height) + (min(72vw, 278px) / 2.36) - 31px); }
  .app[data-layout="postquiz"][data-search="active"] .message-row { top: calc(var(--sp-space-8) + (min(72vw, 278px) / 1.18) - 31px); }
  .response { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-transparency: reduce) { .app { background: radial-gradient(circle at 36% 18%,var(--jelly-light) 0,var(--jelly-mid) 48%,#d24780 100%); background-blend-mode: normal; } .shell { background: radial-gradient(circle at 36% 26%,var(--jelly-light) 0,var(--jelly-mid) 48%,#d24780 100%); background-blend-mode: normal; } .shell::before, .route::before, .recovery-action::before { display: none; } .note-surface { opacity: 1; } .option, .options--multiple, .text-field { background: var(--visor-raised); box-shadow: none; } .symbio-search { background: var(--sp-bone-white); box-shadow: none; } .options--multiple .option { background: transparent; } .route, .recovery-action { background: transparent; box-shadow: none; } .content-card { background: #3b2934; box-shadow: none; } .content-card--featured { background: var(--sp-bone-white); } }
@media (forced-colors: active) { .app { background: Canvas; } .topbar::before, .footer::before { background: Canvas; } .shell, .haze, .visor-shine { display: none; } .presence { border: 2px solid CanvasText; border-radius: 44%; } .visor-bg { fill: Canvas; stroke: CanvasText; } .eye-core, .mouth-core { stroke: CanvasText; } .eye-bloom, .mouth-bloom, .note-tail { display: none; } .note-surface, .option, .text-field, .route, .recovery-action, .symbio-search, .content-card--interactive { border: 1px solid CanvasText; background: Canvas; } .sender, .primary { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; } .option.is-selected { outline: 2px solid Highlight; outline-offset: -3px; } }