:root {
  --ink: #16201e;
  --muted: #63716d;
  --paper: #f7f4ea;
  --panel: #ffffff;
  --line: #d8dfd8;
  --mint: #9fdcc7;
  --teal: #0f8d79;
  --coral: #f06b55;
  --gold: #f4c65e;
  --blue: #4a78d0;
  --plum: #6d5bd0;
  --surface: rgba(255, 255, 255, 0.82);
  --shadow: 0 26px 70px rgba(22, 32, 30, 0.13);
  --soft-shadow: 0 14px 36px rgba(22, 32, 30, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(22, 32, 30, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(22, 32, 30, 0.035) 1px, transparent 1px),
    radial-gradient(circle at top left, rgba(159, 220, 199, 0.34), transparent 32%),
    linear-gradient(135deg, rgba(244, 198, 94, 0.18), transparent 38%),
    var(--paper);
  background-size: 34px 34px, 34px 34px, auto, auto;
  color: var(--ink);
  font-family: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
textarea,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
}

button:not(:disabled):hover {
  transform: translateY(-1px);
}

.landing-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 70px);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 213, 232, 0.4), transparent 24%),
    radial-gradient(circle at 68% 54%, rgba(154, 177, 255, 0.28), transparent 30%),
    radial-gradient(circle at 30% 62%, rgba(159, 220, 199, 0.2), transparent 26%),
    linear-gradient(135deg, #080d20, #141338 52%, #2e1e56);
  color: white;
  overflow: hidden;
  position: relative;
}

.landing-page::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    conic-gradient(from 0deg, transparent, rgba(166, 197, 255, 0.28), transparent, rgba(255, 188, 214, 0.3), transparent);
  filter: blur(20px);
  opacity: 0.72;
  animation: landingAuraSpin 8s linear infinite;
}

.landing-page::after {
  content: "";
  position: absolute;
  inset: auto 10% 12%;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  filter: blur(0.5px);
  pointer-events: none;
  opacity: 0.68;
  animation: landingLineSweep 2.8s ease-in-out infinite;
}

.landing-mode .app-shell,
.landing-mode .mode-page,
.mode-mode .landing-page,
.mode-mode .app-shell {
  display: none;
}

.app-mode .landing-page,
.app-mode .mode-page {
  display: none;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  position: relative;
  z-index: 4;
}

.landing-nav img {
  width: 142px;
  height: 64px;
  border-radius: 8px;
  object-fit: contain;
  object-position: center;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.landing-ghost,
.landing-primary,
.landing-secondary {
  min-height: 46px;
  border-radius: 8px;
  border: 0;
  padding: 0 18px;
  font-weight: 900;
  white-space: nowrap;
}

.landing-ghost {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  min-height: auto;
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  text-align: center;
}

.landing-copy {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  max-width: none;
  padding: 0;
}

.landing-kicker {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #dfe8ff;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  animation: landingKickerFloat 2.8s ease-in-out infinite;
}

.landing-copy h1 {
  display: grid;
  gap: clamp(4px, 1vw, 12px);
  max-width: none;
  margin: clamp(22px, 4vw, 42px) 0;
  color: white;
  font-size: clamp(3.6rem, 10vw, 9.5rem);
  line-height: 0.82;
  text-align: center;
  text-shadow:
    0 0 34px rgba(255, 255, 255, 0.18),
    0 28px 74px rgba(0, 0, 0, 0.46);
}

.landing-copy h1 span {
  display: block;
  background: linear-gradient(90deg, #ffffff, #ffd4e6 35%, #a8c6ff 70%, #ffffff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    landingWordShimmer 3.6s ease-in-out infinite,
    landingWordRise 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-copy h1 span:nth-child(2) {
  animation-delay: 0.18s, 0.12s;
}

.landing-copy h1 span:nth-child(3) {
  animation-delay: 0.36s, 0.24s;
}

.landing-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.landing-primary {
  min-width: 160px;
  background:
    linear-gradient(135deg, #ffffff, #ffe0ec 44%, #dbe7ff);
  color: #18204f;
  box-shadow:
    0 22px 60px rgba(135, 167, 255, 0.28),
    0 0 0 8px rgba(255, 255, 255, 0.08);
  animation: landingButtonPulse 2.4s ease-in-out infinite;
}

.landing-secondary {
  min-height: 46px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  padding-inline: 10px;
}

.landing-showcase {
  display: grid;
  position: absolute;
  inset: -108px -7vw -86px 18vw;
  z-index: 1;
  place-items: center;
  min-height: 100%;
  perspective: 1200px;
  pointer-events: none;
}

.landing-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(7, 13, 31, 0.86) 0%, rgba(7, 13, 31, 0.56) 28%, rgba(7, 13, 31, 0.08) 58%, rgba(7, 13, 31, 0.28) 100%),
    radial-gradient(circle at 54% 44%, transparent 0 28%, rgba(7, 13, 31, 0.5) 76%);
}

.showcase-screen {
  position: relative;
  width: min(980px, 82vw);
  aspect-ratio: 0.76;
  border: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 22%),
    radial-gradient(circle at 50% 46%, rgba(255, 195, 219, 0.22), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(49, 70, 148, 0.48), rgba(4, 9, 22, 0.96));
  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px, auto;
  box-shadow:
    0 58px 140px rgba(0, 0, 0, 0.5),
    0 0 240px rgba(155, 174, 255, 0.38);
  overflow: hidden;
  transform: rotateY(-8deg) rotateX(3deg) scale(1.02);
  animation: showcaseDrift 5.8s ease-in-out infinite;
}

.showcase-screen::before,
.showcase-screen::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.58);
}

.showcase-screen::before {
  top: 78px;
  left: 92px;
  width: 7px;
  height: 7px;
}

.showcase-screen::after {
  top: 116px;
  right: 92px;
  width: 10px;
  height: 10px;
}

.showcase-glow {
  position: absolute;
  inset: 6% 14% auto;
  height: 43%;
  border-radius: 999px 999px 8px 8px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.95), transparent 20%),
    linear-gradient(180deg, rgba(255, 226, 178, 0.98), rgba(255, 184, 215, 0.72) 52%, rgba(178, 134, 255, 0.42)),
    rgba(255, 255, 255, 0.2);
  filter: blur(0.5px);
  animation: portalGlow 2.8s ease-in-out infinite;
}

.showcase-door {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 36%;
  height: 45%;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(135deg, #a9ccff, #f0b5d9 48%, #5b78dc);
  transform: translateX(-50%);
  box-shadow: 0 20px 70px rgba(143, 167, 255, 0.42);
  animation: portalPulse 2.8s ease-in-out infinite;
}

.showcase-door span {
  position: absolute;
  right: -25%;
  bottom: 0;
  width: 56%;
  height: 82%;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffd3dc, #6b88ea);
  transform: skewY(-6deg);
  transform-origin: left bottom;
  animation: doorOpen 4.4s ease-in-out infinite;
}

.showcase-path {
  position: absolute;
  right: 6%;
  bottom: 0;
  left: 6%;
  height: 48%;
  border-radius: 50% 50% 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 241, 232, 0.88) 48%, rgba(170, 188, 255, 0.92)),
    linear-gradient(90deg, transparent 0 43%, rgba(255, 255, 255, 0.94) 43% 57%, transparent 57%);
  clip-path: polygon(44% 0, 56% 0, 90% 100%, 0 100%);
  filter: drop-shadow(0 24px 44px rgba(165, 183, 255, 0.44));
  opacity: 1;
  animation: pathBreathe 2.6s ease-in-out infinite;
}

.showcase-path span {
  position: absolute;
  right: 20%;
  bottom: 22%;
  width: clamp(42px, 5vw, 72px);
  height: clamp(42px, 5vw, 72px);
  border-top: clamp(16px, 1.8vw, 26px) solid white;
  border-right: clamp(16px, 1.8vw, 26px) solid white;
  border-radius: 4px;
  transform: rotate(-45deg);
  opacity: 0.82;
  animation: pathArrow 2.4s ease-in-out infinite;
}

.showcase-signal {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.84);
  opacity: 0.76;
  animation: signalFloat 4.8s ease-in-out infinite;
}

.showcase-beams {
  position: absolute;
  inset: -28% -18%;
  display: flex;
  justify-content: center;
  gap: 12px;
  transform: rotate(-16deg);
  opacity: 0.88;
  mix-blend-mode: screen;
  animation: beamsPan 5.2s ease-in-out infinite;
}

.showcase-beams span {
  width: 46px;
  height: 150%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(166, 197, 255, 0.38), rgba(255, 184, 215, 0.42), rgba(255, 255, 255, 0));
  filter: blur(2px);
  transform: scaleY(0.72);
  animation: beamPulse 2.8s ease-in-out infinite;
}

.showcase-beams span:nth-child(2) {
  width: 58px;
  animation-delay: 0.18s;
}

.showcase-beams span:nth-child(3) {
  width: 82px;
  animation-delay: 0.34s;
}

.showcase-beams span:nth-child(4) {
  width: 58px;
  animation-delay: 0.5s;
}

.showcase-beams span:nth-child(5) {
  animation-delay: 0.66s;
}

.showcase-title {
  position: absolute;
  right: 8%;
  bottom: 6%;
  left: 8%;
  color: white;
  font-size: clamp(3.8rem, 9vw, 8.8rem);
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.42),
    0 18px 44px rgba(0, 0, 0, 0.58);
  transform: translateY(22px) scale(0.94);
  opacity: 0;
  animation: titleReveal 4.4s ease-in-out infinite;
  z-index: 8;
}

.signal-a {
  top: 134px;
  left: 102px;
}

.signal-b {
  right: 92px;
  bottom: 178px;
  width: 16px;
  height: 16px;
  animation-delay: 0.8s;
}

.showcase-person {
  position: absolute;
  bottom: 116px;
  width: 48px;
  height: 104px;
  animation: cuteBob 3.2s ease-in-out infinite;
}

.showcase-person::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 42%, #18214f 0 2px, transparent 2.5px),
    radial-gradient(circle at 66% 42%, #18214f 0 2px, transparent 2.5px),
    linear-gradient(180deg, #ffe1c8, #ffc8a9);
  box-shadow:
    inset 0 7px 0 rgba(36, 50, 79, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.16);
}

.showcase-person::after {
  content: "";
  position: absolute;
  top: 31px;
  left: 6px;
  width: 36px;
  height: 48px;
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(90deg, transparent -6px 3px, rgba(255, 255, 255, 0.28) 3px 7px, transparent 7px),
    var(--gold);
  box-shadow:
    -9px 11px 0 -5px #ffd8bc,
    9px 11px 0 -5px #ffd8bc,
    0 18px 0 -7px rgba(0, 0, 0, 0.2);
}

.showcase-person i {
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 28px;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.5) 45% 55%, transparent 55%),
    #1d294c;
}

.showcase-person-a {
  left: 78px;
}

.showcase-person-b {
  right: 76px;
  animation-delay: 0.45s;
}

.showcase-person-b::after {
  background: var(--coral);
}

.showcase-dialogue {
  position: absolute;
  right: 52px;
  bottom: 226px;
  left: 52px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #111e4c;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  animation: float 3.4s ease-in-out infinite;
}

.showcase-dialogue::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.showcase-meter {
  position: absolute;
  right: 54px;
  bottom: 50px;
  left: 54px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.showcase-meter span {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--coral), var(--gold), var(--mint));
}

.landing-showcase .showcase-person,
.landing-showcase .showcase-dialogue,
.landing-showcase .showcase-meter {
  display: none;
}

.mode-page {
  min-height: 100vh;
  padding: 26px clamp(18px, 4vw, 54px) 54px;
  background:
    radial-gradient(circle at 18% 22%, rgba(159, 220, 199, 0.28), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(244, 198, 94, 0.28), transparent 24%),
    linear-gradient(135deg, #f8f6ee, #edf5f1 58%, #e6ecfb);
  color: var(--ink);
}

.mode-nav img {
  box-shadow: 0 16px 38px rgba(22, 32, 30, 0.14);
}

.mode-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.8fr);
  gap: clamp(24px, 5vw, 74px);
  align-items: center;
  min-height: calc(100vh - 120px);
  max-width: 1180px;
  margin: 0 auto;
}

.mode-copy h1 {
  margin: 18px 0;
  color: #12225c;
  font-size: clamp(2.9rem, 7vw, 6rem);
}

.mode-copy p {
  max-width: 520px;
  color: var(--muted);
  font-size: 1.14rem;
  line-height: 1.5;
}

.mode-options {
  display: grid;
  gap: 14px;
}

.mode-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 172px;
  padding: 24px;
  border: 1px solid rgba(18, 34, 92, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.mode-card::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -46px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(159, 220, 199, 0.42);
}

.mode-card span {
  position: relative;
  z-index: 1;
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mode-card strong {
  position: relative;
  z-index: 1;
  max-width: 320px;
  color: #12225c;
  font-size: 1.42rem;
  line-height: 1.15;
}

.mode-card em {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(18, 34, 92, 0.08);
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.mode-card.is-ready {
  border-color: rgba(15, 141, 121, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(210, 245, 231, 0.86)),
    white;
  box-shadow: 0 26px 64px rgba(15, 141, 121, 0.18);
}

.mode-card.is-ready::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 46%, white 46% 54%, transparent 54%),
    var(--teal);
  box-shadow: 0 16px 26px rgba(15, 141, 121, 0.2);
}

.mode-card:disabled {
  cursor: default;
  opacity: 0.62;
}

.mode-card:disabled:hover {
  transform: none;
}

.landing-rows {
  position: relative;
  z-index: 3;
  margin-top: 0;
  padding-top: 18px;
}

.landing-scroll-cue {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: none;
  width: 26px;
  height: 42px;
  place-items: start center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0.62;
  border-radius: 999px;
  transform: translateX(-50%);
}

.landing-scroll-cue span {
  width: 5px;
  height: 5px;
  margin-top: 9px;
  border-radius: 50%;
  background: white;
  animation: scrollDot 1.8s ease-in-out infinite;
}

.landing-row-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.landing-row-heading h2 {
  margin: 0;
  color: white;
}

.landing-row-heading span {
  color: rgba(255, 255, 255, 0.58);
  font-weight: 800;
}

.scenario-rail {
  display: grid;
  grid-auto-columns: minmax(230px, 300px);
  grid-auto-flow: column;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x proximity;
}

.scenario-tile {
  min-height: 178px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)),
    #17233f;
  color: white;
  text-align: left;
  scroll-snap-align: start;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
  position: relative;
  overflow: hidden;
}

.scenario-tile::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -34px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.scenario-tile:hover {
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}

.scenario-tile span,
.scenario-tile strong {
  display: block;
  position: relative;
  z-index: 1;
}

.scenario-tile span {
  margin-bottom: 54px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scenario-tile strong {
  max-width: 220px;
  font-size: 1.05rem;
  line-height: 1.18;
}

.tile-business {
  background:
    linear-gradient(135deg, rgba(240, 107, 85, 0.84), rgba(13, 27, 45, 0.78)),
    #17233f;
}

.tile-interview {
  background:
    linear-gradient(135deg, rgba(74, 120, 208, 0.84), rgba(13, 27, 45, 0.78)),
    #17233f;
}

.tile-presentation {
  background:
    linear-gradient(135deg, rgba(244, 198, 94, 0.84), rgba(43, 45, 85, 0.78)),
    #17233f;
}

.tile-conversation {
  background:
    linear-gradient(135deg, rgba(159, 220, 199, 0.84), rgba(64, 45, 92, 0.78)),
    #17233f;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: 26px 22px;
  border-right: 1px solid rgba(123, 91, 139, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 252, 249, 0.94), rgba(252, 238, 232, 0.72)),
    rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(22px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  object-fit: contain;
  object-position: center;
  background: white;
  box-shadow: 0 14px 26px rgba(22, 32, 30, 0.16);
}

.brand-lockup strong,
.brand-lockup span {
  display: block;
}

.brand-lockup strong {
  color: #6b5380;
  font-size: 1.05rem;
  font-weight: 900;
}

.brand-lockup span {
  color: var(--muted);
  font-size: 0.82rem;
}

.steps {
  position: relative;
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  padding: 12px 0 12px 4px;
  --timeline-progress: 0%;
}

.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 26px;
  width: 4px;
  border-radius: 999px;
}

.steps::before {
  background:
    linear-gradient(180deg, rgba(159, 220, 199, 0.45), rgba(22, 32, 30, 0.08)),
    rgba(255, 255, 255, 0.54);
  box-shadow: inset 0 0 0 1px rgba(22, 32, 30, 0.05);
}

.steps::after {
  height: var(--timeline-progress);
  max-height: calc(100% - 68px);
  background: linear-gradient(180deg, var(--teal), var(--mint), var(--gold));
  bottom: auto;
  transition: height 420ms ease;
  z-index: 0;
  box-shadow: 0 0 18px rgba(15, 141, 121, 0.22);
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  padding: 12px 12px 12px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-weight: 700;
  cursor: default;
  opacity: 1;
}

.step::after {
  content: "";
  position: absolute;
  inset: 4px 0 4px 18px;
  z-index: -1;
  border-radius: 8px;
  opacity: 0;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.step:disabled {
  cursor: default;
  opacity: 1;
}

.step:not(:disabled):hover,
.step:disabled:hover {
  transform: none;
}

.step span {
  display: grid;
  position: relative;
  z-index: 1;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(22, 32, 30, 0.06);
  background:
    linear-gradient(180deg, #ffffff, #edf3ee);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.8),
    0 12px 24px rgba(22, 32, 30, 0.08);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.step.is-active {
  color: var(--ink);
  font-weight: 900;
}

.step.is-active::after {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(230, 247, 239, 0.82)),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 36px rgba(22, 32, 30, 0.08),
    inset 0 0 0 1px rgba(15, 141, 121, 0.14);
}

.step.is-active span {
  border-color: rgba(15, 141, 121, 0.24);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.26), transparent 32%),
    #17211f;
  color: white;
  box-shadow:
    0 0 0 8px rgba(159, 220, 199, 0.34),
    0 14px 30px rgba(22, 32, 30, 0.18);
}

.step.is-complete {
  color: var(--teal);
}

.step.is-complete::after {
  opacity: 0.58;
  background: rgba(255, 255, 255, 0.42);
}

.step.is-complete span {
  border-color: rgba(15, 141, 121, 0.22);
  background:
    linear-gradient(180deg, #d9f6eb, var(--mint));
  color: transparent;
}

.step.is-complete span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 7px;
  border-bottom: 3px solid var(--ink);
  border-left: 3px solid var(--ink);
  transform: translate(-50%, -58%) rotate(-45deg);
  transform-origin: center;
}

.step.is-upcoming {
  color: rgba(99, 113, 109, 0.74);
  font-weight: 800;
}

.step.is-upcoming::after {
  opacity: 0.42;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.28));
  box-shadow: inset 0 0 0 1px rgba(22, 32, 30, 0.045);
}

.step.is-upcoming span {
  width: 40px;
  height: 40px;
  flex-basis: 48px;
  margin-left: 4px;
  border-color: rgba(74, 120, 208, 0.12);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), transparent 34%),
    linear-gradient(180deg, rgba(245, 248, 246, 0.98), rgba(225, 232, 229, 0.92));
  color: rgba(99, 113, 109, 0.62);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.68),
    0 10px 22px rgba(22, 32, 30, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.step.is-upcoming span::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(15, 141, 121, 0.24);
}

.rail-card {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.rail-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.workspace {
  padding: 30px;
  overflow: hidden;
}

body[data-panel="simulation"] .workspace {
  padding: 0;
}

body[data-panel="simulation"] .topbar {
  display: none;
}

body[data-panel="simulation"] .rail {
  background:
    linear-gradient(180deg, rgba(255, 252, 249, 0.98), rgba(250, 239, 236, 0.94));
}

body[data-panel="simulation"] .rail-card {
  border-color: rgba(123, 91, 139, 0.14);
  background: rgba(255, 247, 250, 0.84);
}

.topbar,
.panel-heading,
.sim-status,
.visual-header,
.replay-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar {
  align-items: flex-start;
  margin-bottom: 26px;
}

.topbar > div:first-child {
  min-width: 0;
  flex: 1;
}

.topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.ai-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(15, 141, 121, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--soft-shadow);
}

.ai-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(15, 141, 121, 0.12);
}

.eyebrow {
  display: block;
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 880px;
  margin-bottom: 0;
  font-size: clamp(2.35rem, 6.6vw, 5.25rem);
  line-height: 0.94;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 8px;
  font-size: 1.45rem;
}

.panel {
  display: none;
  animation: rise 420ms ease both;
}

.panel.is-visible {
  display: block;
}

.brief-layout,
.sim-layout,
.results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
  gap: 24px;
  align-items: stretch;
}

.brief-layout {
  grid-template-columns: minmax(0, 840px);
  justify-content: center;
}

.brief-main,
.dialogue-card,
.response-area,
.consequence-card,
.score-block,
.insight-columns > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.brief-main {
  position: relative;
  padding: 26px;
  overflow: hidden;
}

.brief-main::before,
.dialogue-card::before,
.response-area::before,
.consequence-card::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral));
}

.field-label,
.setup-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

textarea,
input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

textarea {
  min-height: 150px;
  margin-top: 10px;
  padding: 16px;
  resize: vertical;
  line-height: 1.5;
}

input,
select {
  min-height: 44px;
  padding: 0 12px;
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(28, 140, 120, 0.12);
}

.quick-prompts,
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}

.quick-prompts button,
.choice-row button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 7px 18px rgba(22, 32, 30, 0.07);
}

.quick-prompts button {
  padding: 0 14px;
}

.choice-row button {
  padding: 0 12px;
}

.choice-row button.is-selected {
  border-color: var(--ink);
  background: linear-gradient(180deg, #c7efdf, var(--mint));
  box-shadow: 0 12px 24px rgba(15, 141, 121, 0.16);
}

.speech-tools,
.speech-transcript,
.remote-panel {
  display: none;
}

body[data-mode="speech"] .speech-tools,
body[data-mode="speech"] .speech-transcript,
body[data-mode="speech"] .remote-panel {
  display: grid;
}

#simulationPanel.is-visible .remote-panel {
  display: grid;
}

body[data-mode="speech"] .choice-row {
  display: none;
}

body[data-mode="speech"]:not(.no-speech-support) #responseInput {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.speech-tools {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(15, 141, 121, 0.18);
  border-radius: 8px;
  background: rgba(232, 247, 239, 0.72);
}

.mic-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #17211f, #0f8d79);
  color: white;
  padding: 0 16px;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(15, 141, 121, 0.18);
}

.mic-button span {
  width: 12px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 999px;
  position: relative;
}

.mic-button span::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -7px;
  left: -5px;
  height: 7px;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 999px 999px;
}

body.is-listening .mic-button {
  background: linear-gradient(135deg, var(--coral), #d94f75);
  box-shadow:
    0 14px 30px rgba(240, 107, 85, 0.24),
    0 0 0 8px rgba(240, 107, 85, 0.1);
}

body.is-listening .mic-button span {
  animation: micPulse 900ms ease-in-out infinite;
}

.speech-tools p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.speech-transcript {
  gap: 6px;
  min-height: 96px;
  margin: 12px 0;
  padding: 16px;
  border: 1px solid rgba(74, 120, 208, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(232, 237, 251, 0.72)),
    white;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.speech-transcript span {
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.speech-transcript p {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

.speech-transcript.is-empty p {
  color: var(--muted);
}

.remote-panel {
  gap: 12px;
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid rgba(18, 34, 92, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(226, 235, 248, 0.82)),
    #f7faf8;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 12px 24px rgba(18, 34, 92, 0.08);
}

.remote-panel strong {
  display: block;
  margin-top: 3px;
  color: #12225c;
}

.remote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 8px;
  max-width: 260px;
}

.remote-grid button {
  min-height: 52px;
  border: 1px solid rgba(18, 34, 92, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef3f6 100%);
  color: #12225c;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow:
    inset 0 -3px 0 rgba(18, 34, 92, 0.1),
    0 8px 18px rgba(22, 32, 30, 0.06);
}

.remote-grid span {
  min-height: 52px;
}

.remote-grid button:active {
  border-color: rgba(15, 141, 121, 0.38);
  background:
    linear-gradient(180deg, #e6fff4, var(--mint));
  transform: translateY(2px);
  box-shadow:
    inset 0 -1px 0 rgba(18, 34, 92, 0.14),
    0 10px 20px rgba(15, 141, 121, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.primary-button,
.secondary-button,
.ghost-button {
  min-height: 44px;
  border-radius: 8px;
  border: 0;
  padding: 0 16px;
  font-weight: 800;
  white-space: nowrap;
}

.primary-button {
  background: linear-gradient(135deg, #16201e, #25483f);
  color: white;
  box-shadow: 0 14px 30px rgba(22, 32, 30, 0.2);
}

.secondary-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}

.ghost-button {
  border: 1px solid rgba(23, 33, 31, 0.18);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

.scene-stage,
.live-visual {
  min-height: 520px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%),
    #1f2a28;
  color: white;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.scene-stage {
  position: relative;
  display: none;
  place-items: center;
  padding: 28px;
}

.scene-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  pointer-events: none;
}

.scene-card {
  position: relative;
  width: min(390px, 100%);
  aspect-ratio: 0.82;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 45%),
    #253d39;
  background-size: 38px 38px, 38px 38px, auto, auto;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
}

.set-wall {
  position: absolute;
  inset: 28px 26px 118px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    rgba(255, 255, 255, 0.04);
  background-size: 36px 36px;
  box-shadow: inset 0 -90px 120px rgba(0, 0, 0, 0.16);
}

.set-frame {
  position: absolute;
  top: 38px;
  width: 86px;
  height: 62px;
  border: 6px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(244, 198, 94, 0.38), rgba(255, 255, 255, 0.08));
}

.set-frame-a {
  left: 34px;
}

.set-frame-b {
  right: 34px;
  background: linear-gradient(180deg, rgba(74, 120, 208, 0.34), rgba(255, 255, 255, 0.08));
}

.scene-backdrop > span,
.scene-furniture > span,
.scene-props > span {
  position: absolute;
}

.awning {
  display: block;
  top: 34px;
  right: 26px;
  left: 26px;
  height: 76px;
  border-radius: 8px 8px 3px 3px;
  background: repeating-linear-gradient(90deg, var(--coral) 0 32px, #fff1db 32px 64px);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.14);
}

.scene-sign {
  position: absolute;
  top: 126px;
  left: 28px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #f8f4e7;
  font-size: 0.76rem;
  font-weight: 800;
  z-index: 4;
}

.people-row {
  position: absolute;
  right: 42px;
  bottom: 150px;
  left: 42px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  z-index: 6;
}

.little-person {
  position: relative;
  display: block;
  width: 42px;
  height: 88px;
  animation: cuteBob 3.1s ease-in-out infinite;
}

.little-person::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 44%, #18214f 0 2px, transparent 2.5px),
    radial-gradient(circle at 65% 44%, #18214f 0 2px, transparent 2.5px),
    linear-gradient(180deg, #ffe1c8, #ffc8a9);
  box-shadow:
    inset 0 7px 0 rgba(36, 50, 79, 0.22),
    0 7px 16px rgba(0, 0, 0, 0.16);
}

.little-person::after {
  content: "";
  position: absolute;
  top: 31px;
  left: 5px;
  width: 32px;
  height: 42px;
  border-radius: 16px 16px 9px 9px;
  background:
    linear-gradient(90deg, transparent -6px 2px, rgba(255, 255, 255, 0.3) 2px 6px, transparent 6px),
    var(--gold);
  box-shadow:
    -8px 9px 0 -5px #ffd8bc,
    8px 9px 0 -5px #ffd8bc,
    0 17px 0 -7px rgba(0, 0, 0, 0.22);
}

.little-person i {
  position: absolute;
  right: 7px;
  bottom: 0;
  left: 7px;
  height: 24px;
  border-radius: 0 0 11px 11px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.42) 45% 55%, transparent 55%),
    #24324f;
}

.person-b {
  animation-delay: 0.35s;
}

.person-c {
  transform: scale(0.82);
  opacity: 0.88;
  animation-delay: 0.75s;
}

.person-b::after {
  background: var(--blue);
}

.person-c::after {
  background: var(--mint);
}

.speech-bubble {
  position: relative;
  align-self: start;
  max-width: 126px;
  padding: 10px 12px;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 800;
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.counter {
  position: absolute;
  right: 36px;
  bottom: 64px;
  left: 36px;
  height: 72px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(159, 220, 199, 0.9) 0 29%, transparent 29% 35%, rgba(159, 220, 199, 0.9) 35% 64%, transparent 64% 70%, rgba(159, 220, 199, 0.9) 70% 100%),
    #684d35;
  background-origin: content-box;
  padding: 14px;
  box-shadow: 0 16px 0 rgba(0, 0, 0, 0.12);
  z-index: 5;
}

.projector-screen,
.interview-board,
.cafe-window,
.desk,
.presentation-stand,
.cafe-table {
  display: none;
}

.scene-props {
  position: absolute;
  right: 44px;
  bottom: 150px;
  display: grid;
  grid-template-columns: repeat(4, 18px);
  gap: 8px;
  align-items: end;
  z-index: 7;
}

.scene-props span {
  display: block;
  height: 28px;
  border-radius: 6px 6px 3px 3px;
  background: var(--gold);
}

.scene-props span:nth-child(2) {
  height: 42px;
  background: var(--mint);
}

.scene-props span:nth-child(3) {
  height: 22px;
  background: var(--coral);
}

.scene-props span:nth-child(4) {
  height: 34px;
  background: var(--blue);
}

.scene-card[data-situation="interview"] .awning,
.scene-card[data-situation="interview"] .counter,
.scene-card[data-situation="interview"] .presentation-stand,
.scene-card[data-situation="interview"] .cafe-table,
.scene-card[data-situation="interview"] .projector-screen,
.scene-card[data-situation="interview"] .cafe-window,
.scene-card[data-situation="presentation"] .awning,
.scene-card[data-situation="presentation"] .counter,
.scene-card[data-situation="presentation"] .desk,
.scene-card[data-situation="presentation"] .cafe-table,
.scene-card[data-situation="presentation"] .interview-board,
.scene-card[data-situation="presentation"] .cafe-window,
.scene-card[data-situation="conversation"] .awning,
.scene-card[data-situation="conversation"] .counter,
.scene-card[data-situation="conversation"] .desk,
.scene-card[data-situation="conversation"] .presentation-stand,
.scene-card[data-situation="conversation"] .projector-screen,
.scene-card[data-situation="conversation"] .interview-board {
  display: none;
}

.scene-card[data-situation="interview"] .desk,
.scene-card[data-situation="interview"] .interview-board,
.scene-card[data-situation="presentation"] .projector-screen,
.scene-card[data-situation="presentation"] .presentation-stand,
.scene-card[data-situation="conversation"] .cafe-table,
.scene-card[data-situation="conversation"] .cafe-window {
  display: block;
}

.desk {
  right: 58px;
  bottom: 76px;
  left: 58px;
  height: 74px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #d9a56f 0 45%, #b7774d 45% 55%, #d9a56f 55%),
    #b7774d;
  box-shadow: 0 16px 0 rgba(0, 0, 0, 0.13);
  z-index: 5;
}

.interview-board {
  top: 56px;
  right: 54px;
  width: 106px;
  height: 76px;
  border: 7px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72) 12px, transparent 12px),
    linear-gradient(rgba(255, 255, 255, 0.28) 3px, transparent 3px),
    rgba(74, 120, 208, 0.38);
  background-size: 100% 100%, 48px 15px, auto;
  z-index: 3;
}

.projector-screen {
  top: 46px;
  right: 46px;
  left: 46px;
  height: 112px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(210, 226, 255, 0.82)),
    white;
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.16);
  z-index: 2;
}

.projector-screen::after {
  content: "";
  position: absolute;
  right: 32px;
  bottom: 24px;
  left: 32px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal) 0 46%, var(--gold) 46% 72%, var(--coral) 72%);
}

.presentation-stand {
  left: 62px;
  bottom: 78px;
  width: 92px;
  height: 76px;
  border-radius: 8px;
  background: #20312e;
  box-shadow: 0 14px 0 rgba(0, 0, 0, 0.16);
  z-index: 5;
}

.cafe-window {
  top: 44px;
  right: 50px;
  width: 112px;
  height: 96px;
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px 999px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255, 218, 164, 0.85), rgba(255, 255, 255, 0.12)),
    rgba(244, 198, 94, 0.25);
  z-index: 2;
}

.cafe-table {
  right: 86px;
  bottom: 78px;
  left: 86px;
  height: 62px;
  border-radius: 999px 999px 8px 8px;
  background: #b7774d;
  box-shadow: 0 28px 0 -14px rgba(0, 0, 0, 0.22);
  z-index: 5;
}

.scene-card[data-situation="interview"] .people-row {
  right: 72px;
  bottom: 150px;
  left: 72px;
}

.scene-card[data-situation="presentation"] .people-row {
  right: 38px;
  bottom: 154px;
  left: 58px;
}

.scene-card[data-situation="presentation"] .person-c {
  opacity: 1;
  transform: scale(0.78) translateY(18px);
}

.scene-card[data-situation="conversation"] .people-row {
  right: 92px;
  bottom: 146px;
  left: 92px;
}

.scene-card[data-situation="conversation"] .person-c {
  display: none;
}

.scene-card[data-situation="interview"] .scene-props,
.scene-card[data-situation="presentation"] .scene-props,
.scene-card[data-situation="conversation"] .scene-props {
  display: none;
}

.decision-rings {
  position: absolute;
  inset: auto 24px 22px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.decision-rings span {
  width: 12px;
  height: 12px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  animation: pulse 1.8s ease infinite;
}

.decision-rings span:nth-child(2) {
  animation-delay: 0.25s;
}

.decision-rings span:nth-child(3) {
  animation-delay: 0.5s;
}

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.criterion-card {
  position: relative;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.criterion-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--gold));
}

.criterion-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.criterion-card p {
  color: var(--muted);
  line-height: 1.45;
}

.criterion-card input[type="range"] {
  accent-color: var(--teal);
}

.custom-criterion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 16px;
}

.sim-main {
  display: grid;
  align-content: start;
  gap: 14px;
}

#simulationPanel .sim-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(520px, 1.25fr) minmax(360px, 0.75fr);
  grid-template-rows: minmax(640px, calc(100vh - 92px));
  gap: 18px;
  min-height: calc(100vh - 92px);
  overflow: visible;
  border: 1px solid rgba(113, 84, 126, 0.12);
  border-radius: 8px;
  background: #f8ecdf;
  padding: 18px;
  box-shadow: 0 28px 70px rgba(87, 54, 38, 0.16);
}

#simulationPanel .live-visual {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: none;
  grid-template-rows: 1fr auto;
}

#simulationPanel .visual-header {
  display: none;
}

#simulationPanel .sim-scene {
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(82, 44, 48, 0.02), rgba(82, 44, 48, 0.14)),
    url("assets/rehearsal-pop-up-clean.png") calc(50% + var(--camera-x, 0px)) calc(50% + var(--camera-y, 0px)) / var(--scene-zoom, 118%) auto no-repeat,
    #f2d4b6;
  animation: rehearsalSceneBreathe 12s ease-in-out infinite;
  transition: background-position 360ms ease, filter 360ms ease;
}

#simulationPanel .sim-scene[data-situation="interview"] {
  background:
    linear-gradient(180deg, rgba(48, 58, 76, 0.02), rgba(48, 58, 76, 0.12)),
    url("assets/rehearsal-interview-clean.png") calc(50% + var(--camera-x, 0px)) calc(50% + var(--camera-y, 0px)) / var(--scene-zoom, 118%) auto no-repeat,
    #dbe6f2;
}

#simulationPanel .sim-scene[data-situation="presentation"] {
  background:
    linear-gradient(180deg, rgba(38, 42, 58, 0.02), rgba(38, 42, 58, 0.12)),
    url("assets/rehearsal-presentation-clean.png") calc(50% + var(--camera-x, 0px)) calc(50% + var(--camera-y, 0px)) / var(--scene-zoom, 118%) auto no-repeat,
    #dce3ee;
}

#simulationPanel .sim-scene[data-situation="conversation"] {
  background:
    linear-gradient(180deg, rgba(48, 34, 24, 0.02), rgba(48, 34, 24, 0.12)),
    url("assets/rehearsal-conversation-clean.png") calc(50% + var(--camera-x, 0px)) calc(50% + var(--camera-y, 0px)) / var(--scene-zoom, 118%) auto no-repeat,
    #f0d1ad;
}

#simulationPanel .sim-scene.has-player-move {
  filter: saturate(1.06) brightness(1.03);
}

#simulationPanel .sim-scene[data-time="low"] {
  filter: saturate(1.08) contrast(1.04) brightness(0.96);
}

#simulationPanel .sim-scene[data-action="price"],
#simulationPanel .sim-scene[data-action="talk"] {
  background-position:
    center,
    calc(48% + var(--camera-x, 0px)) calc(50% + var(--camera-y, 0px)),
    center;
}

#simulationPanel .sim-scene[data-action="queue"] {
  background-position:
    center,
    calc(53% + var(--camera-x, 0px)) calc(50% + var(--camera-y, 0px)),
    center;
}

#simulationPanel .sim-scene[data-action="time"] {
  animation:
    rehearsalSceneBreathe 12s ease-in-out infinite,
    urgentScenePulse 1.6s ease-in-out infinite;
}

#simulationPanel .sim-scene::before,
#simulationPanel .sim-scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#simulationPanel .sim-scene::before {
  right: 8%;
  bottom: 30%;
  z-index: 7;
  width: 170px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 138, 0.24), transparent 68%);
  animation: warmLightMove 5.4s ease-in-out infinite;
}

#simulationPanel .sim-scene[data-stock="low"]::before,
#simulationPanel .sim-scene[data-action="price"]::before {
  right: 38%;
  bottom: 34%;
  width: 230px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 180, 132, 0.34), transparent 68%);
}

#simulationPanel .sim-scene::after {
  left: 42%;
  bottom: 38%;
  z-index: 8;
  width: 18%;
  height: 22%;
  background:
    radial-gradient(ellipse at 12% 70%, rgba(79, 54, 48, 0.22) 0 7%, transparent 8%),
    radial-gradient(ellipse at 44% 64%, rgba(79, 54, 48, 0.18) 0 6%, transparent 7%),
    radial-gradient(ellipse at 76% 68%, rgba(79, 54, 48, 0.16) 0 6%, transparent 7%);
  filter: blur(8px);
  opacity: 0.46;
  animation: distantCrowdShift 7s ease-in-out infinite;
}

#simulationPanel .sim-scene[data-action="queue"]::after,
#simulationPanel .sim-scene[data-queue="4"]::after,
#simulationPanel .sim-scene[data-queue="5"]::after {
  width: 26%;
  opacity: 0.72;
  filter: blur(6px);
}

#simulationPanel .customer-speech {
  display: none;
}

#simulationPanel .game-canvas,
#simulationPanel .pov-world,
#simulationPanel .top-person,
#simulationPanel .queue-person,
#simulationPanel .vn-character {
  display: none;
  opacity: 0;
}

#simulationPanel .game-canvas {
  display: none;
}

#simulationPanel .sim-scene.has-player-move .game-canvas {
  opacity: 0;
}

#simulationPanel .pov-world {
  display: none;
  z-index: 16;
  opacity: 1;
  background: transparent;
  pointer-events: none;
  transform: none;
  filter: none;
}

#simulationPanel .pov-backdrop,
#simulationPanel .pov-furniture,
#simulationPanel .pov-window,
#simulationPanel .pov-sign,
#simulationPanel .pov-shelf,
#simulationPanel .pov-object {
  display: none;
}

#simulationPanel .pov-customer {
  display: block;
  z-index: 18;
  opacity: 0;
  transition:
    left 520ms ease,
    bottom 520ms ease,
    opacity 320ms ease,
    transform 520ms ease,
    filter 320ms ease;
}

#simulationPanel .pov-customer-main {
  left: 54%;
  bottom: 27%;
  width: clamp(70px, 7vw, 108px);
  height: clamp(130px, 14vw, 190px);
  opacity: 0.42;
  filter:
    blur(0.2px)
    saturate(0.78)
    drop-shadow(0 18px 18px rgba(52, 32, 22, 0.18));
  animation: castBreath 3.8s ease-in-out infinite;
}

#simulationPanel .pov-customer-extra {
  width: clamp(44px, 4.4vw, 70px);
  height: clamp(82px, 8.8vw, 126px);
  opacity: 0;
  filter:
    blur(0.8px)
    saturate(0.72)
    drop-shadow(0 14px 16px rgba(52, 32, 22, 0.12));
}

#simulationPanel .pov-customer-extra-a {
  left: 29%;
  bottom: 31%;
}

#simulationPanel .pov-customer-extra-b {
  left: 36%;
  bottom: 32%;
}

#simulationPanel .pov-customer::before {
  background:
    radial-gradient(ellipse at 50% 78%, rgba(111, 63, 58, 0.28) 0 4px, transparent 5px),
    linear-gradient(180deg, rgba(78, 49, 39, 0.92) 0 24%, transparent 25%),
    linear-gradient(180deg, #d9aa8c, #b97a63);
}

#simulationPanel .pov-customer::after {
  background:
    radial-gradient(ellipse at 50% 0, #b97a63 0 11px, transparent 12px),
    linear-gradient(110deg, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(180deg, #5b6e8f, #34435f);
}

#simulationPanel .pov-customer span {
  display: block;
  opacity: 0.62;
}

#simulationPanel .sim-scene[data-action="talk"] .pov-customer-main,
#simulationPanel .sim-scene[data-action="price"] .pov-customer-main,
#simulationPanel .sim-scene[data-remote-action="customer"] .pov-customer-main,
#simulationPanel .sim-scene[data-remote-action="panel"] .pov-customer-main,
#simulationPanel .sim-scene[data-remote-action="audience"] .pov-customer-main,
#simulationPanel .sim-scene[data-remote-action="their-seat"] .pov-customer-main {
  left: 50%;
  bottom: 29%;
  opacity: 0.64;
  transform: translateX(-8px) scale(1.04);
}

#simulationPanel .sim-scene[data-remote-action="entrance"] .pov-customer-main {
  left: 57%;
  bottom: 27%;
  opacity: 0.36;
  transform: scale(0.94);
}

#simulationPanel .sim-scene[data-action="queue"] .pov-customer-main,
#simulationPanel .sim-scene[data-queue="4"] .pov-customer-main,
#simulationPanel .sim-scene[data-queue="5"] .pov-customer-main {
  opacity: 0.72;
  filter:
    blur(0.1px)
    saturate(0.86)
    drop-shadow(0 18px 18px rgba(52, 32, 22, 0.2));
  animation:
    castBreath 3.8s ease-in-out infinite,
    castConcern 1.9s ease-in-out infinite;
}

#simulationPanel .sim-scene[data-action="price"] .pov-customer span,
#simulationPanel .sim-scene[data-action="talk"] .pov-customer span,
#simulationPanel .sim-scene[data-remote-action="customer"] .pov-customer span {
  animation: castGesture 1.4s ease-in-out infinite;
}

#simulationPanel .sim-scene[data-queue="1"] .pov-customer-extra-a,
#simulationPanel .sim-scene[data-queue="2"] .pov-customer-extra-a,
#simulationPanel .sim-scene[data-queue="3"] .pov-customer-extra-a,
#simulationPanel .sim-scene[data-queue="4"] .pov-customer-extra-a,
#simulationPanel .sim-scene[data-queue="5"] .pov-customer-extra-a {
  opacity: 0.38;
  transform: translateX(0) scale(0.9);
  animation: castWalkInA 3.2s ease-in-out infinite;
}

#simulationPanel .sim-scene[data-queue="2"] .pov-customer-extra-b,
#simulationPanel .sim-scene[data-queue="3"] .pov-customer-extra-b,
#simulationPanel .sim-scene[data-queue="4"] .pov-customer-extra-b,
#simulationPanel .sim-scene[data-queue="5"] .pov-customer-extra-b {
  opacity: 0.34;
  transform: translateX(0) scale(0.82);
  animation: castWalkInB 3.6s ease-in-out infinite;
}

#simulationPanel .sim-scene[data-move-direction="left"] .pov-customer-main {
  transform: translateX(-22px) scale(1.02);
}

#simulationPanel .sim-scene[data-move-direction="right"] .pov-customer-main {
  transform: translateX(18px) scale(0.98);
}

#simulationPanel .sim-scene[data-move-direction="up"] .pov-customer-main {
  bottom: 31%;
  transform: scale(1.04);
}

#simulationPanel .sim-scene[data-move-direction="down"] .pov-customer-main {
  bottom: 25%;
  transform: scale(0.96);
}

#simulationPanel .sim-main {
  z-index: 42;
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: start;
  align-items: stretch;
  gap: 16px;
  padding: 0;
  pointer-events: none;
  background: transparent;
}

#simulationPanel .sim-main > * {
  pointer-events: auto;
}

#simulationPanel .sim-status,
#simulationPanel .dialogue-card,
#simulationPanel .response-area,
#simulationPanel .consequence-card {
  width: auto;
  margin-inline: 0;
}

#simulationPanel .sim-status {
  display: none;
}

#simulationPanel .dialogue-card,
#simulationPanel .response-area,
#simulationPanel .consequence-card {
  border: 1px solid rgba(123, 91, 139, 0.14);
  background: rgba(255, 249, 247, 0.9);
  box-shadow:
    0 22px 52px rgba(83, 49, 42, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px);
}

#simulationPanel .dialogue-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
  min-height: 220px;
  max-height: 310px;
  overflow: auto;
  border-right: 1px solid rgba(123, 91, 139, 0.14);
  border-radius: 22px;
  padding: 12px 16px;
}

#simulationPanel .dialogue-card::before,
#simulationPanel .response-area::before,
#simulationPanel .consequence-card::before {
  display: none;
}

#simulationPanel .dialogue-card .eyebrow {
  display: inline-flex;
  width: max-content;
  min-height: 22px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(227, 194, 222, 0.72);
  color: #7b5b8b;
}

#simulationPanel .dialogue-card h2 {
  display: none;
}

#simulationPanel .dialogue-card p {
  display: block;
  max-width: none;
  overflow: visible;
  margin: 0;
  color: #453749;
  font-size: 1rem;
  font-weight: 720;
  line-height: 1.44;
}

#simulationPanel .response-area {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 14px;
  align-items: center;
  min-height: 190px;
  max-height: none;
  overflow: hidden;
  border-radius: 22px;
  padding: 10px 16px;
}

#simulationPanel #responseInput {
  display: none;
}

#simulationPanel .response-area .field-label {
  display: none;
}

body[data-mode="text"] #simulationPanel .response-area {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(150px, 1fr) auto;
}

body[data-mode="text"] #simulationPanel .response-area .field-label {
  display: block;
  color: #6d557a;
  font-size: 0.82rem;
  font-weight: 900;
}

body[data-mode="text"] #simulationPanel #responseInput {
  display: block;
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid rgba(123, 91, 139, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  color: #453749;
}

body[data-mode="text"] #simulationPanel .speech-tools {
  display: none;
}

#simulationPanel .speech-tools {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#simulationPanel .speech-tools p {
  display: none;
}

#simulationPanel .mic-button,
body[data-mode="speech"] #simulationPanel .mic-button {
  display: grid;
  width: 62px;
  height: 62px;
  min-height: 62px;
  place-items: center;
  border: 6px solid rgba(222, 188, 230, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(145deg, #a886cf, #6f4b98);
  color: white;
  font-size: 0;
  box-shadow:
    0 0 0 7px rgba(209, 172, 225, 0.2),
    0 16px 28px rgba(105, 72, 145, 0.24),
    inset 0 -8px 14px rgba(64, 40, 95, 0.28);
}

#simulationPanel .mic-button span,
body[data-mode="speech"] #simulationPanel .mic-button span {
  width: 16px;
  height: 23px;
  border-width: 3px;
}

#simulationPanel .speech-transcript,
#simulationPanel .speech-transcript {
  display: none;
}

body[data-mode="speech"] #simulationPanel .speech-transcript,
body[data-mode="speech"] #simulationPanel .speech-transcript {
  display: none;
}

#simulationPanel .remote-panel,
body[data-mode="speech"] #simulationPanel .remote-panel {
  display: none;
  grid-column: 1;
  grid-row: 1;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  justify-self: start;
  transform: none;
}

#simulationPanel .remote-panel .eyebrow {
  display: none;
}

#simulationPanel .remote-panel strong {
  display: none;
}

#simulationPanel .remote-grid {
  max-width: 128px;
  gap: 5px;
  justify-self: center;
}

#simulationPanel .remote-grid button,
#simulationPanel .remote-grid span {
  min-height: 34px;
}

#simulationPanel .remote-grid button {
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 950;
}

#simulationPanel .choice-row {
  display: none;
}

#simulationPanel .choice-row button {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 0.78rem;
  border-color: rgba(123, 91, 139, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #59435f;
  box-shadow: 0 10px 22px rgba(83, 49, 42, 0.08);
}

#simulationPanel .primary-button#submitResponseButton {
  display: inline-flex;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 150px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  background: linear-gradient(135deg, #7b5b8b, #9f7ad0);
  box-shadow: 0 14px 26px rgba(123, 91, 139, 0.18);
}

body[data-mode="text"] #simulationPanel .primary-button#submitResponseButton {
  grid-row: 3;
}

#simulationPanel .consequence-card {
  position: relative;
  grid-column: 1;
  grid-row: 3;
  right: auto;
  bottom: auto;
  width: auto;
  max-height: 190px;
  overflow: auto;
  border-radius: 22px;
  padding: 16px 18px;
}

#simulationPanel .consequence-card p {
  display: block;
  margin: 0 0 10px;
  overflow: hidden;
  color: #453749;
  font-size: 0.86rem;
  line-height: 1.35;
}

#simulationPanel .consequence-card .secondary-button {
  min-height: 34px;
}

#simulationPanel .consequence-list {
  display: none;
}

.dialogue-card,
.response-area,
.consequence-card {
  padding: 22px;
}

.sim-status {
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--soft-shadow);
}

.sim-status > span {
  color: var(--muted);
  font-weight: 800;
}

.meter {
  width: 180px;
  height: 12px;
  border-radius: 999px;
  background: #e8eee9;
  overflow: hidden;
}

.meter span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--coral), var(--gold), var(--teal));
  transition: width 320ms ease;
}

.live-visual {
  display: grid;
  grid-template-rows: auto minmax(500px, 62vh) auto;
  border: 1px solid rgba(122, 84, 48, 0.12);
  background:
    linear-gradient(180deg, #fff8ef, #f7e8d7);
  color: var(--ink);
}

.sim-scene {
  min-height: 500px;
}

.visual-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(122, 84, 48, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 238, 0.78));
}

.visual-header span {
  color: rgba(63, 44, 29, 0.58);
  font-weight: 700;
}

.visual-header strong {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #8b4a47;
  box-shadow: 0 10px 22px rgba(122, 84, 48, 0.1);
}

.sim-scene {
  position: relative;
  overflow: hidden;
  --player-x: 18;
  --player-y: 36;
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.64), transparent 24%),
    linear-gradient(180deg, #ffe9c7 0 42%, #e8c791 42% 100%);
}

.game-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
}

.back-wall,
.game-hud,
.game-zone,
.side-label,
.held-item,
.scene-item,
.space-hint,
.window-light,
.floor-grid,
.top-person,
.queue-person,
.queue-path,
.floor-zone,
.thought-card,
.sim-prop {
  position: absolute;
}

.vn-sky,
.vn-backdrop,
.pov-world,
.pov-backdrop,
.pov-backdrop span,
.pov-customer,
.pov-customer span,
.pov-furniture,
.pov-object,
.vn-building,
.vn-stall,
.vn-table,
.vn-room-screen,
.scene-cards,
.scene-card-stat,
.customer-speech,
.vn-character,
.vn-character span {
  position: absolute;
}

.pov-world {
  inset: 0;
  z-index: 5;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 34%),
    linear-gradient(180deg, #f7dbc0 0 43%, #d8b98d 43% 100%);
  transition:
    transform 520ms ease,
    filter 420ms ease;
}

.pov-backdrop {
  inset: 0;
  transform-origin: 50% 55%;
  transition: transform 520ms ease;
}

.pov-window {
  top: 18%;
  left: 8%;
  width: 24%;
  height: 26%;
  border: 8px solid rgba(126, 82, 55, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.42) 2px, transparent 2px),
    linear-gradient(180deg, #cde8ff, #fff1c9);
  background-size: 50% 100%, 100% 50%, auto;
  box-shadow: 0 18px 36px rgba(126, 82, 55, 0.12);
}

.pov-sign {
  top: 15%;
  right: 11%;
  width: 26%;
  height: 12%;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent),
    #f06b55;
  box-shadow:
    inset 0 -8px 0 rgba(126, 82, 55, 0.14),
    0 16px 28px rgba(126, 82, 55, 0.18);
}

.pov-sign::after {
  content: "";
  position: absolute;
  inset: 42% 16% auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.pov-shelf {
  top: 37%;
  right: 9%;
  width: 28%;
  height: 13%;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0 54%, rgba(97, 62, 42, 0.34) 54% 62%, transparent 62%),
    linear-gradient(90deg, #9fdcc7 0 22%, transparent 22% 30%, #f4c65e 30% 52%, transparent 52% 62%, #f06b55 62% 82%, transparent 82%),
    rgba(255, 250, 235, 0.58);
  box-shadow: 0 14px 28px rgba(126, 82, 55, 0.12);
}

.pov-shelf-b {
  top: 53%;
  right: 13%;
  width: 20%;
  opacity: 0.86;
}

.pov-customer {
  z-index: 10;
  left: 43%;
  bottom: 22%;
  width: 132px;
  height: 210px;
  border-radius: 999px 999px 20px 20px;
  background:
    radial-gradient(circle at 36% 26%, #2c2733 0 4px, transparent 4.8px),
    radial-gradient(circle at 64% 26%, #2c2733 0 4px, transparent 4.8px),
    radial-gradient(ellipse at 50% 38%, #c96e6b 0 8px, transparent 9px),
    linear-gradient(180deg, #ffd8bd 0 45%, #4a78d0 45% 100%);
  box-shadow:
    0 22px 0 -10px rgba(126, 82, 55, 0.18),
    0 28px 45px rgba(126, 82, 55, 0.24);
  transform-origin: 50% 100%;
  animation: customerIdle 3.4s ease-in-out infinite;
  transition:
    left 520ms ease,
    bottom 520ms ease,
    transform 520ms ease,
    opacity 320ms ease;
}

.pov-customer::before {
  content: "";
  position: absolute;
  top: 2%;
  right: 16%;
  left: 16%;
  height: 32%;
  border-radius: 999px 999px 40px 40px;
  background: #634434;
}

.pov-customer span {
  top: 31%;
  right: 13%;
  width: 26%;
  height: 34%;
  border-radius: 999px;
  background: #ffd0b2;
  transform: rotate(-20deg);
  animation: customerGesture 2.4s ease-in-out infinite;
}

.pov-customer-extra {
  width: 70px;
  height: 118px;
  opacity: 0;
  transform: scale(0.8);
}

.pov-customer-extra-a {
  left: 25%;
  bottom: 22%;
}

.pov-customer-extra-b {
  left: 65%;
  bottom: 20%;
}

.pov-furniture {
  right: 0;
  bottom: -2%;
  left: 0;
  z-index: 18;
  height: 38%;
  border-radius: 42% 42% 0 0 / 18% 18% 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 35%),
    linear-gradient(90deg, rgba(84, 53, 36, 0.22), transparent 18% 82%, rgba(84, 53, 36, 0.22)),
    #9b6647;
  box-shadow:
    inset 0 14px 0 rgba(255, 244, 222, 0.2),
    0 -18px 40px rgba(126, 82, 55, 0.18);
  transition: transform 520ms ease;
}

.pov-object {
  bottom: 62%;
  width: 72px;
  height: 42px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent),
    #9fdcc7;
  box-shadow: 0 12px 20px rgba(84, 53, 36, 0.18);
}

.pov-object-a {
  left: 18%;
}

.pov-object-b {
  left: 43%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent),
    #f4c65e;
}

.pov-object-c {
  right: 18%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent),
    #f06b55;
}

.vn-sky {
  inset: 0 0 40%;
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.9) 0 10%, transparent 18%),
    linear-gradient(180deg, #ffdcb1, #ffe7c8);
}

.vn-backdrop {
  inset: 0;
  z-index: 2;
}

.vn-building {
  top: 18%;
  bottom: 36%;
  width: 22%;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 244, 224, 0.72);
  box-shadow: inset 0 0 0 1px rgba(122, 84, 48, 0.08);
}

.vn-building-a {
  left: 5%;
}

.vn-building-b {
  right: 4%;
  background: rgba(239, 204, 186, 0.68);
}

.vn-stall {
  right: 7%;
  bottom: 18%;
  width: 50%;
  height: 43%;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0 26%, #8f5b44 26% 31%, transparent 31%),
    linear-gradient(90deg, transparent 0 10%, rgba(112, 72, 50, 0.56) 10% 13%, transparent 13% 86%, rgba(112, 72, 50, 0.56) 86% 89%, transparent 89%),
    linear-gradient(180deg, transparent 0 54%, #a56f4d 54% 73%, #80533e 73% 100%);
  box-shadow: 0 26px 46px rgba(122, 84, 48, 0.24);
}

.vn-stall::before {
  content: "";
  position: absolute;
  top: 0;
  right: -4%;
  left: -4%;
  height: 32%;
  border-radius: 8px 8px 4px 4px;
  background: repeating-linear-gradient(90deg, #f27c6b 0 11%, #fff6dc 11% 22%);
  box-shadow: 0 12px 0 rgba(122, 84, 48, 0.14);
}

.vn-stall span {
  position: absolute;
  bottom: 31%;
  width: 13%;
  height: 15%;
  border-radius: 8px 8px 4px 4px;
  background: #9fdcc7;
  box-shadow: 0 9px 0 rgba(73, 50, 32, 0.12);
}

.vn-stall span:nth-child(1) {
  left: 18%;
}

.vn-stall span:nth-child(2) {
  left: 42%;
  background: #f4c65e;
}

.vn-stall span:nth-child(3) {
  left: 66%;
  background: #f06b55;
}

.vn-table,
.vn-room-screen {
  opacity: 0;
}

.scene-cards {
  top: 16px;
  right: auto;
  left: 24px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(300px, calc(100% - 48px));
  gap: 12px;
}

#simulationPanel .stat-time,
#simulationPanel .held-item,
#simulationPanel .space-hint,
#simulationPanel .scene-item,
#simulationPanel .remote-panel,
#simulationPanel .remote-grid {
  display: none !important;
}

.scene-card-stat {
  position: relative;
  min-height: 84px;
  overflow: hidden;
  padding: 14px 18px 18px;
  border: 1px solid rgba(123, 91, 139, 0.12);
  border-radius: 18px;
  background: rgba(255, 247, 247, 0.88);
  color: #5a4462;
  box-shadow: 0 16px 34px rgba(83, 49, 42, 0.13);
  backdrop-filter: blur(12px);
}

.scene-card-stat::after,
.scene-card-stat::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 10px;
  height: 5px;
  border-radius: 999px;
}

.scene-card-stat::after {
  right: 18px;
  background: rgba(123, 91, 139, 0.13);
}

.scene-card-stat::before {
  z-index: 1;
  width: 50%;
  background: linear-gradient(90deg, #8fd8c0, #f6c66b);
  transition: width 360ms ease, background 360ms ease;
}

.stat-time::before {
  width: var(--time-level, 60%);
}

.stat-stock::before {
  width: var(--stock-level, 80%);
}

.stat-queue::before {
  width: var(--queue-level, 4%);
}

.sim-scene[data-time="low"] .stat-time,
.sim-scene[data-stock="low"] .stat-stock,
.sim-scene[data-queue="4"] .stat-queue,
.sim-scene[data-queue="5"] .stat-queue {
  border-color: rgba(212, 101, 83, 0.24);
  background: rgba(255, 240, 232, 0.94);
}

.sim-scene[data-time="low"] .stat-time::before,
.sim-scene[data-stock="low"] .stat-stock::before,
.sim-scene[data-queue="4"] .stat-queue::before,
.sim-scene[data-queue="5"] .stat-queue::before {
  background: linear-gradient(90deg, #f06b55, #f6c66b);
}

.scene-card-stat span,
.scene-card-stat strong {
  display: block;
}

.scene-card-stat span {
  color: #6d557a;
  font-size: 0.86rem;
  font-weight: 900;
}

.scene-card-stat strong {
  margin-top: 8px;
  color: #7b5b8b;
  font-size: 0.96rem;
  line-height: 1;
}

.customer-speech {
  top: 118px;
  right: 11%;
  left: auto;
  z-index: 24;
  width: min(310px, 34%);
  padding: 16px 20px;
  border: 1px solid rgba(123, 91, 139, 0.1);
  border-radius: 34px;
  background: rgba(255, 251, 247, 0.92);
  color: #453749;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.48;
  text-align: center;
  box-shadow: 0 24px 52px rgba(83, 49, 42, 0.16);
  animation: bubbleIn 520ms ease both;
}

.customer-speech::after {
  content: "";
  position: absolute;
  left: 38px;
  bottom: -12px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  transform: rotate(45deg);
}

.vn-character {
  z-index: 18;
  animation: characterBreathe 3.4s ease-in-out infinite;
}

.customer-character {
  right: 10%;
  bottom: 9%;
  width: 210px;
  height: 330px;
}

.character-face {
  top: 34px;
  left: 50%;
  width: 122px;
  height: 132px;
  border-radius: 46% 46% 48% 48%;
  background:
    radial-gradient(circle at 35% 50%, #2d2433 0 4px, transparent 4.8px),
    radial-gradient(circle at 65% 50%, #2d2433 0 4px, transparent 4.8px),
    radial-gradient(ellipse at 50% 72%, #c76863 0 9px, transparent 10px),
    linear-gradient(180deg, #ffe1c7, #ffc3a2);
  box-shadow:
    inset 0 12px 0 rgba(120, 72, 54, 0.14),
    0 16px 26px rgba(122, 84, 48, 0.22);
  transform: translateX(-50%);
}

.character-face::before,
.character-face::after {
  content: "";
  position: absolute;
  top: 64px;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: #2d2433;
  opacity: 0;
  animation: blink 4.2s ease-in-out infinite;
}

.character-face::before {
  left: 28px;
}

.character-face::after {
  right: 28px;
}

.character-hair {
  top: 20px;
  left: 50%;
  z-index: 2;
  width: 138px;
  height: 92px;
  border-radius: 50% 50% 42% 42%;
  background: #654335;
  transform: translateX(-50%);
}

.character-body {
  right: 22px;
  bottom: 24px;
  left: 22px;
  height: 178px;
  border-radius: 52px 52px 24px 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 42%),
    #4a78d0;
  box-shadow: 0 26px 44px rgba(122, 84, 48, 0.26);
}

.character-arm {
  top: 174px;
  width: 44px;
  height: 112px;
  border-radius: 999px;
  background: #ffc3a2;
  transform-origin: top center;
}

.character-arm-a {
  left: 16px;
  transform: rotate(10deg);
}

.character-arm-b {
  right: 14px;
  transform: rotate(-16deg);
  animation: speakingHand 2.1s ease-in-out infinite;
}

.player-character {
  left: 14%;
  bottom: 8%;
  width: 112px;
  height: 178px;
  transform: scale(0.72);
  opacity: 0.92;
}

.player-character .character-face {
  width: 86px;
  height: 90px;
}

.player-character .character-body {
  height: 92px;
  background: #0f8d79;
}

.player-character .character-face::before,
.player-character .character-face::after {
  display: none;
}

.back-wall,
.game-hud,
.window-light,
.sim-prop,
.floor-zone,
.side-label,
.game-zone,
.top-person,
.floor-grid,
.thought-card {
  display: none;
}

.sim-scene[data-situation="interview"] {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.5), transparent 20%),
    linear-gradient(180deg, #dbe7f7 0 42%, #bfcadd 42% 100%);
}

.sim-scene[data-situation="interview"] .vn-sky {
  background: linear-gradient(180deg, #eaf3ff, #d8e7f7);
}

.sim-scene[data-situation="interview"] .vn-stall {
  right: 10%;
  bottom: 18%;
  width: 54%;
  height: 28%;
  background:
    linear-gradient(180deg, transparent 0 44%, #9d6846 44% 70%, #7b523d 70% 100%);
}

.sim-scene[data-situation="interview"] .vn-stall::before {
  top: -58%;
  left: 12%;
  right: 12%;
  height: 52%;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72) 12px, transparent 12px),
    linear-gradient(rgba(255, 255, 255, 0.28) 3px, transparent 3px),
    rgba(74, 120, 208, 0.35);
  background-size: 100% 100%, 48px 15px, auto;
}

.sim-scene[data-situation="interview"] .vn-stall span {
  display: none;
}

.sim-scene[data-situation="interview"] .customer-character .character-body {
  background: #344b77;
}

.sim-scene[data-situation="presentation"] {
  background:
    radial-gradient(circle at 30% 16%, rgba(244, 198, 94, 0.28), transparent 22%),
    linear-gradient(180deg, #dce4f0 0 38%, #aeb8c9 38% 100%);
}

.sim-scene[data-situation="presentation"] .vn-sky {
  background: linear-gradient(180deg, #eef4ff, #d7dfed);
}

.sim-scene[data-situation="presentation"] .vn-stall {
  left: 8%;
  right: auto;
  bottom: 12%;
  width: 30%;
  height: 38%;
  background:
    linear-gradient(180deg, transparent 0 38%, #26352f 38% 100%);
  box-shadow: 0 24px 48px rgba(31, 42, 40, 0.24);
}

.sim-scene[data-situation="presentation"] .vn-stall::before {
  left: 92%;
  right: auto;
  top: -46%;
  width: 172%;
  height: 40%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(225, 235, 255, 0.9));
}

.sim-scene[data-situation="presentation"] .vn-stall span {
  bottom: 48%;
}

.sim-scene[data-situation="presentation"] .customer-character {
  right: 7%;
  transform: scale(0.92);
}

.sim-scene[data-situation="presentation"] .customer-character .character-body {
  background: #80589f;
}

.sim-scene[data-situation="conversation"] {
  background:
    radial-gradient(circle at 80% 18%, rgba(159, 220, 199, 0.32), transparent 22%),
    linear-gradient(180deg, #ffe2bd 0 42%, #cfb48b 42% 100%);
}

.sim-scene[data-situation="conversation"] .vn-stall {
  right: 16%;
  bottom: 22%;
  width: 46%;
  height: 22%;
  border-radius: 999px 999px 18px 18px;
  background: #b7774d;
}

.sim-scene[data-situation="conversation"] .vn-stall::before {
  top: -92%;
  right: 4%;
  left: auto;
  width: 28%;
  height: 78%;
  border-radius: 999px 999px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255, 218, 164, 0.85), rgba(255, 255, 255, 0.12));
}

.sim-scene[data-situation="conversation"] .vn-stall span {
  bottom: 58%;
  width: 9%;
  height: 22%;
  border-radius: 50%;
}

.sim-scene[data-situation="conversation"] .customer-character {
  right: 12%;
  transform: scale(0.9);
}

.sim-scene[data-situation="conversation"] .customer-character .character-body {
  background: #0f8d79;
}

.sim-scene[data-mood="strong"] .customer-speech {
  border-color: rgba(15, 141, 121, 0.24);
}

.sim-scene[data-mood="risky"] .customer-speech {
  border-color: rgba(240, 107, 85, 0.28);
  animation: bubbleIn 520ms ease both, tenseShake 1.8s ease-in-out infinite;
}

.sim-scene[data-action="queue"] .queue-person,
.sim-scene[data-queue="1"] .queue-person-1,
.sim-scene[data-queue="2"] .queue-person-1,
.sim-scene[data-queue="2"] .queue-person-2,
.sim-scene[data-queue="3"] .queue-person-1,
.sim-scene[data-queue="3"] .queue-person-2,
.sim-scene[data-queue="3"] .queue-person-3,
.sim-scene[data-queue="4"] .queue-person-1,
.sim-scene[data-queue="4"] .queue-person-2,
.sim-scene[data-queue="4"] .queue-person-3,
.sim-scene[data-queue="4"] .queue-person-4,
.sim-scene[data-queue="5"] .queue-person-1,
.sim-scene[data-queue="5"] .queue-person-2,
.sim-scene[data-queue="5"] .queue-person-3,
.sim-scene[data-queue="5"] .queue-person-4,
.sim-scene[data-queue="5"] .queue-person-5 {
  display: block;
}

.queue-person {
  z-index: 14;
  width: 28px;
  height: 44px;
  border-radius: 999px 999px 12px 12px;
  opacity: 0;
  transform: translateY(12px) scale(0.88);
}

.queue-person-1 {
  left: 7%;
  bottom: 14%;
}

.queue-person-2 {
  left: 12%;
  bottom: 16%;
}

.queue-person-3 {
  left: 17%;
  bottom: 13%;
}

.queue-person-4 {
  left: 22%;
  bottom: 15%;
}

.queue-person-5 {
  left: 27%;
  bottom: 13%;
}

.sim-scene[data-queue="1"] .queue-person-1,
.sim-scene[data-queue="2"] .queue-person-1,
.sim-scene[data-queue="2"] .queue-person-2,
.sim-scene[data-queue="3"] .queue-person-1,
.sim-scene[data-queue="3"] .queue-person-2,
.sim-scene[data-queue="3"] .queue-person-3,
.sim-scene[data-queue="4"] .queue-person-1,
.sim-scene[data-queue="4"] .queue-person-2,
.sim-scene[data-queue="4"] .queue-person-3,
.sim-scene[data-queue="4"] .queue-person-4,
.sim-scene[data-queue="5"] .queue-person-1,
.sim-scene[data-queue="5"] .queue-person-2,
.sim-scene[data-queue="5"] .queue-person-3,
.sim-scene[data-queue="5"] .queue-person-4,
.sim-scene[data-queue="5"] .queue-person-5 {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sim-scene[data-stock="low"] .stat-stock {
  background: #fff0ea;
  color: #9c3d34;
}

.sim-scene[data-time="low"] .stat-time {
  background: #fff5d7;
  color: #805819;
}

.sim-scene[data-action="price"] .stat-stock,
.sim-scene[data-action="time"] .stat-time,
.sim-scene[data-action="queue"] .stat-queue {
  animation: statPulse 1.1s ease-in-out infinite;
}

.back-wall {
  inset: 16px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(90deg, #d9c18d 0 10%, transparent 10% 90%, #d9c18d 90% 100%),
    linear-gradient(180deg, #c8ae77, #b6925f);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 9px rgba(92, 62, 39, 0.15),
    inset 0 -60px 100px rgba(92, 62, 39, 0.2);
}

.game-hud {
  top: 18px;
  right: 18px;
  left: 18px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(11, 18, 17, 0.68);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.game-hud span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.game-hud strong {
  max-width: 58%;
  overflow: hidden;
  color: white;
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.held-item {
  right: 18px;
  bottom: 14px;
  z-index: 16;
  max-width: 150px;
  padding: 7px 10px;
  border: 1px solid rgba(15, 141, 121, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #12225c;
  font-size: 0.72rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 12px 22px rgba(22, 32, 30, 0.14);
}

.space-hint {
  left: 18px;
  bottom: 14px;
  z-index: 16;
  max-width: 170px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(11, 18, 17, 0.72);
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
}

.scene-item {
  left: calc(var(--item-x) * 1%);
  bottom: calc(var(--item-y) * 1%);
  z-index: 7;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  width: max-content;
  max-width: 96px;
  min-height: 34px;
  padding: 5px 8px 5px 6px;
  place-items: center;
  border: 1px solid rgba(63, 44, 29, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(180deg, #fff5ce, #f3cc76);
  color: #49351f;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  transform: translate(-50%, 50%);
  box-shadow:
    inset 0 -3px 0 rgba(63, 44, 29, 0.12),
    0 10px 16px rgba(63, 44, 29, 0.18);
}

.scene-item::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), transparent 48%),
    #0f8d79;
  box-shadow: inset 0 -2px 0 rgba(63, 44, 29, 0.16);
}

.scene-item.item-b::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), transparent 48%),
    #4a78d0;
}

.scene-item.item-c::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), transparent 48%),
    #f06b55;
}

.scene-item.is-nearby {
  border-color: rgba(15, 141, 121, 0.48);
  box-shadow:
    0 0 0 6px rgba(159, 220, 199, 0.22),
    inset 0 -3px 0 rgba(63, 44, 29, 0.12),
    0 12px 20px rgba(63, 44, 29, 0.2);
}

.scene-item.is-held {
  opacity: 0;
  pointer-events: none;
}

.scene-item[hidden] {
  display: none;
}

.game-zone {
  z-index: 6;
  display: grid;
  min-height: 24px;
  place-items: center;
  border: 1px solid rgba(63, 44, 29, 0.14);
  border-radius: 6px;
  background: rgba(255, 248, 222, 0.7);
  color: rgba(63, 44, 29, 0.62);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 8px 16px rgba(63, 44, 29, 0.1);
}

.side-label {
  z-index: 4;
  padding: 7px 10px;
  border: 1px solid rgba(63, 44, 29, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: rgba(63, 44, 29, 0.68);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 10px 18px rgba(63, 44, 29, 0.12);
}

.zone-line,
.zone-door,
.side-label {
  opacity: 0.5;
}

.sim-scene:not(:hover) .zone-line,
.sim-scene:not(:hover) .zone-door,
.sim-scene:not(:hover) .side-label {
  opacity: 0.12;
}

.side-you {
  right: 42px;
  bottom: 52px;
}

.side-other {
  left: 42px;
  top: 112px;
}

.zone-counter {
  right: 82px;
  bottom: 96px;
  width: 132px;
}

.zone-line {
  left: 76px;
  top: 154px;
  bottom: auto;
  width: 118px;
}

.zone-door {
  top: 92px;
  left: 54px;
  width: 78px;
}

.window-light {
  top: 72px;
  right: 42px;
  width: 92px;
  height: 66px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.48) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.38) 1px, transparent 1px),
    rgba(255, 235, 171, 0.9);
  background-size: 22px 22px;
  box-shadow:
    0 0 52px rgba(243, 196, 91, 0.28),
    inset 0 0 0 5px rgba(122, 84, 48, 0.18);
}

.floor-zone {
  border: 1px solid rgba(94, 65, 42, 0.16);
  border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 8px, transparent 8px 16px),
    rgba(255, 246, 218, 0.32);
  z-index: 2;
}

.floor-zone-primary {
  top: 104px;
  right: 34px;
  left: 34px;
  width: auto;
  height: 126px;
  background:
    linear-gradient(180deg, rgba(240, 107, 85, 0.14), rgba(240, 107, 85, 0.04)),
    rgba(255, 246, 218, 0.24);
  box-shadow: inset 0 0 0 2px rgba(240, 107, 85, 0.14);
}

.floor-zone-secondary {
  right: 34px;
  bottom: 58px;
  left: 34px;
  width: auto;
  height: 132px;
  background:
    linear-gradient(180deg, rgba(159, 220, 199, 0.08), rgba(159, 220, 199, 0.2)),
    rgba(255, 246, 218, 0.28);
  box-shadow: inset 0 0 0 2px rgba(15, 141, 121, 0.14);
}

.top-person,
.queue-person {
  width: 40px;
  height: 40px;
  border-radius: 12px 12px 10px 10px;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.96) 0 4px, transparent 4.5px),
    radial-gradient(circle at 65% 40%, rgba(22, 32, 30, 0.42) 0 2px, transparent 2.5px),
    linear-gradient(180deg, #ffe4cd 0 48%, var(--mint) 48% 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.24),
    0 0 0 8px rgba(159, 220, 199, 0.88),
    0 12px 0 -2px rgba(0, 0, 0, 0.3),
    0 18px 24px rgba(0, 0, 0, 0.24);
  transition:
    left 520ms ease,
    right 520ms ease,
    top 520ms ease,
    bottom 520ms ease,
    transform 520ms ease,
    opacity 280ms ease;
  z-index: 8;
}

.top-person::before {
  content: attr(data-label);
  position: absolute;
  top: -27px;
  left: 50%;
  z-index: 10;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(10, 17, 16, 0.72);
  color: white;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.user-avatar::before {
  background: rgba(15, 141, 121, 0.9);
}

.other-avatar::before {
  background: rgba(182, 63, 49, 0.88);
}

.observer-avatar::before {
  background: rgba(128, 88, 26, 0.86);
}

.top-person i,
.queue-person i {
  position: absolute;
  right: 2px;
  bottom: -10px;
  left: 2px;
  height: 12px;
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(90deg, transparent 43%, rgba(255, 255, 255, 0.72) 43% 57%, transparent 57%),
    rgba(18, 34, 92, 0.72);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.2);
}

.queue-person {
  opacity: 0;
  transform: scale(0.6);
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.96) 0 4px, transparent 4.5px),
    radial-gradient(circle at 65% 40%, rgba(22, 32, 30, 0.42) 0 2px, transparent 2.5px),
    linear-gradient(180deg, #ffe4cd 0 48%, var(--blue) 48% 100%);
  box-shadow:
    0 0 0 7px rgba(74, 120, 208, 0.82),
    0 12px 24px rgba(0, 0, 0, 0.22);
}

.user-avatar {
  left: calc(var(--player-x) * 1%);
  bottom: calc(var(--player-y) * 1%);
}

.other-avatar {
  left: 56%;
  bottom: 54%;
}

.other-avatar {
  box-shadow:
    0 0 0 7px rgba(240, 107, 85, 0.86),
    0 12px 24px rgba(0, 0, 0, 0.22);
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.96) 0 4px, transparent 4.5px),
    radial-gradient(circle at 65% 40%, rgba(22, 32, 30, 0.42) 0 2px, transparent 2.5px),
    linear-gradient(180deg, #ffe4cd 0 48%, var(--coral) 48% 100%);
}

.observer-avatar {
  left: 34%;
  bottom: 56%;
  transform: scale(0.9);
  opacity: 0.86;
  box-shadow:
    0 0 0 7px rgba(244, 198, 94, 0.86),
    0 12px 24px rgba(0, 0, 0, 0.22);
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.96) 0 4px, transparent 4.5px),
    radial-gradient(circle at 65% 40%, rgba(22, 32, 30, 0.42) 0 2px, transparent 2.5px),
    linear-gradient(180deg, #ffe4cd 0 48%, var(--gold) 48% 100%);
}

.observer-avatar[data-label=""]::before {
  display: none;
}

.thought-card {
  top: 68px;
  left: 50%;
  width: min(210px, 52%);
  padding: 10px 11px;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.86rem;
  transform: translateX(-50%);
  transition: transform 360ms ease;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  z-index: 12;
}

.floor-grid {
  inset: 16px;
  background:
    linear-gradient(90deg, rgba(122, 84, 48, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(122, 84, 48, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 1;
}

.sim-scene[data-mood="strong"] .user-avatar {
  transform: translate(26px, -12px) scale(1.08);
}

.sim-scene[data-mood="strong"] .user-avatar {
  box-shadow:
    0 0 0 8px var(--gold),
    0 0 0 14px rgba(244, 198, 94, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.22);
}

.sim-scene[data-mood="risky"] .other-avatar {
  transform: translate(-32px, 18px) scale(1.08);
}

.sim-scene[data-mood="careful"] .thought-card {
  transform: translateX(-50%) translateY(-16px);
}

.sim-prop-a,
.sim-prop-b {
  z-index: 5;
}

.sim-prop-a {
  right: 42px;
  bottom: 134px;
  left: 42px;
  height: 72px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(159, 220, 199, 0.9) 0 28%, transparent 28% 35%, rgba(244, 198, 94, 0.92) 35% 62%, transparent 62% 70%, rgba(240, 107, 85, 0.86) 70%),
    linear-gradient(180deg, #8b5e3c, #68472f);
  background-origin: content-box;
  padding: 12px;
  box-shadow:
    0 15px 0 rgba(63, 44, 29, 0.22),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.sim-prop-a::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 32px;
  left: 32px;
  height: 18px;
  border-radius: 6px 6px 2px 2px;
  background:
    repeating-linear-gradient(90deg, #f06b55 0 22px, #fff1db 22px 44px);
  box-shadow: 0 8px 0 rgba(63, 44, 29, 0.12);
}

.sim-prop-b {
  top: 96px;
  left: 50px;
  width: 122px;
  height: 76px;
  border-radius: 8px;
  border: 7px solid rgba(96, 66, 38, 0.22);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.52) 10px, transparent 10px),
    linear-gradient(rgba(255, 255, 255, 0.32) 8px, transparent 8px),
    rgba(74, 120, 208, 0.18);
  background-size: 100% 100%, 100% 22px, auto;
}

.queue-path {
  left: 76px;
  top: 196px;
  bottom: auto;
  width: 212px;
  height: 5px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(18, 34, 92, 0.36) 0 14px, transparent 14px 24px);
  opacity: 0;
  z-index: 3;
}

.sim-scene[data-queue="1"] .queue-path,
.sim-scene[data-queue="2"] .queue-path,
.sim-scene[data-queue="3"] .queue-path,
.sim-scene[data-queue="4"] .queue-path,
.sim-scene[data-queue="5"] .queue-path {
  opacity: 0.64;
}

.queue-person-1 {
  left: 92px;
  bottom: 52%;
}

.queue-person-2 {
  left: 130px;
  bottom: 52%;
}

.queue-person-3 {
  left: 168px;
  bottom: 52%;
}

.queue-person-4 {
  left: 206px;
  bottom: 52%;
}

.queue-person-5 {
  left: 244px;
  bottom: 52%;
}

.sim-scene[data-queue="1"] .queue-person-1,
.sim-scene[data-queue="2"] .queue-person-1,
.sim-scene[data-queue="2"] .queue-person-2,
.sim-scene[data-queue="3"] .queue-person-1,
.sim-scene[data-queue="3"] .queue-person-2,
.sim-scene[data-queue="3"] .queue-person-3,
.sim-scene[data-queue="4"] .queue-person-1,
.sim-scene[data-queue="4"] .queue-person-2,
.sim-scene[data-queue="4"] .queue-person-3,
.sim-scene[data-queue="4"] .queue-person-4,
.sim-scene[data-queue="5"] .queue-person-1,
.sim-scene[data-queue="5"] .queue-person-2,
.sim-scene[data-queue="5"] .queue-person-3,
.sim-scene[data-queue="5"] .queue-person-4,
.sim-scene[data-queue="5"] .queue-person-5 {
  opacity: 1;
  transform: scale(1);
}

.sim-scene[data-action="queue"] .queue-person {
  animation: queuePulse 1.6s ease-in-out infinite;
}

.sim-scene[data-action="move"] .user-avatar {
  left: 58%;
  bottom: 58%;
}

.sim-scene[data-action="move"] .other-avatar {
  right: 20%;
  bottom: 38%;
}

.sim-scene[data-action="price"] .sim-prop-a::after {
  content: "$";
  position: absolute;
  top: -16px;
  right: 18px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
}

.sim-scene[data-action="time"] .window-light {
  animation: timeBlink 1s ease-in-out infinite;
}

.sim-scene[data-action="calm"] .queue-person-3,
.sim-scene[data-action="calm"] .queue-person-4,
.sim-scene[data-action="calm"] .queue-person-5 {
  opacity: 0;
}

.sim-scene.has-player-move .user-avatar {
  animation: playerPop 520ms ease;
}

.sim-scene[data-remote-action="line"] .queue-person {
  animation: queuePulse 1.5s ease-in-out infinite;
}

.sim-scene[data-remote-action="counter"] .sim-prop-a {
  box-shadow:
    0 15px 0 rgba(0, 0, 0, 0.12),
    0 0 0 5px rgba(244, 198, 94, 0.2);
}

.sim-scene[data-remote-action="entrance"] .floor-zone-secondary {
  box-shadow: 0 0 0 5px rgba(240, 107, 85, 0.16);
}

.sim-scene[data-remote-action="customer"] .other-avatar {
  transform: scale(1.08);
}

.sim-scene[data-remote-action="floor"] .thought-card {
  transform: translateX(-50%) translateY(-16px);
}

.sim-scene[data-remote-action="customer"] .observer-avatar {
  right: 178px;
  bottom: 158px;
  transform: scale(1);
  opacity: 1;
}

.sim-scene[data-remote-action="customer"] .thought-card::after,
.sim-scene[data-remote-action="counter"] .thought-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: white;
  transform: translateX(-50%) rotate(45deg);
}

body[data-mode="speech"] .sim-scene .user-avatar {
  left: calc(var(--player-x) * 1%);
  bottom: calc(var(--player-y) * 1%);
}

.sim-scene[data-situation="interview"] .sim-prop-a {
  right: 76px;
  bottom: 154px;
  left: 76px;
  height: 60px;
  background:
    linear-gradient(90deg, #b98358 0 46%, #9d6846 46% 54%, #b98358 54%),
    #b7774d;
}

.sim-scene[data-situation="interview"] .sim-prop-b {
  top: 74px;
  right: 52px;
  left: auto;
  width: 116px;
  height: 70px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.7) 12px, transparent 12px),
    linear-gradient(rgba(255, 255, 255, 0.26) 3px, transparent 3px),
    rgba(74, 120, 208, 0.38);
  background-size: 100% 100%, 46px 15px, auto;
}

.sim-scene[data-situation="interview"] {
  background:
    radial-gradient(circle at 76% 18%, rgba(74, 120, 208, 0.18), transparent 18%),
    linear-gradient(90deg, rgba(64, 84, 116, 0.1) 1px, transparent 1px),
    linear-gradient(#b9c7d8 0 0);
  background-size: auto, 44px 100%, auto;
}

.sim-scene[data-situation="interview"] .back-wall {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 28%),
    linear-gradient(90deg, #d7e1ec 0 12%, transparent 12% 88%, #d7e1ec 88% 100%),
    linear-gradient(180deg, #c3d0df, #aebed0);
}

.sim-scene[data-situation="interview"] .zone-counter {
  right: 82px;
  bottom: 82px;
  width: 132px;
}

.sim-scene[data-situation="interview"] .zone-line {
  left: 72px;
  top: 150px;
  width: 124px;
}

.sim-scene[data-situation="interview"] .side-you {
  right: 54px;
  bottom: 50px;
}

.sim-scene[data-situation="interview"] .side-other {
  left: 54px;
  top: 110px;
}

.sim-scene[data-situation="interview"] .other-avatar {
  left: 42%;
  bottom: 58%;
}

.sim-scene[data-situation="interview"] .observer-avatar {
  left: 58%;
  bottom: 58%;
}

.sim-scene[data-situation="presentation"] .sim-prop-a {
  right: auto;
  bottom: 96px;
  left: 56px;
  width: 104px;
  height: 92px;
  background: #20312e;
}

.sim-scene[data-situation="presentation"] .sim-prop-b {
  top: 58px;
  right: 44px;
  left: 44px;
  width: auto;
  height: 96px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(218, 229, 255, 0.78));
}

.sim-scene[data-situation="presentation"] {
  background:
    radial-gradient(circle at 40% 18%, rgba(244, 198, 94, 0.22), transparent 18%),
    linear-gradient(90deg, rgba(44, 49, 70, 0.12) 1px, transparent 1px),
    linear-gradient(#9fa9bd 0 0);
  background-size: auto, 44px 100%, auto;
}

.sim-scene[data-situation="presentation"] .back-wall {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 25%),
    linear-gradient(90deg, #b6bfd1 0 10%, transparent 10% 90%, #b6bfd1 90% 100%),
    linear-gradient(180deg, #aeb8c9, #8f9cb2);
}

.sim-scene[data-situation="presentation"] .zone-counter {
  left: 58px;
  right: auto;
  bottom: 56px;
  width: 118px;
}

.sim-scene[data-situation="presentation"] .zone-line {
  right: 74px;
  left: auto;
  top: 176px;
  bottom: auto;
  width: 104px;
}

.sim-scene[data-situation="presentation"] .side-you {
  left: 42px;
  right: auto;
  bottom: 50px;
}

.sim-scene[data-situation="presentation"] .side-other {
  right: 58px;
  left: auto;
  top: 128px;
}

.sim-scene[data-situation="presentation"] .other-avatar {
  left: 64%;
  bottom: 53%;
}

.sim-scene[data-situation="presentation"] .observer-avatar {
  left: 78%;
  bottom: 55%;
}

.sim-scene[data-situation="conversation"] .sim-prop-a {
  right: 96px;
  bottom: 146px;
  left: 96px;
  height: 68px;
  border-radius: 999px;
  background: #b7774d;
}

.sim-scene[data-situation="conversation"] .sim-prop-b {
  top: 70px;
  right: 58px;
  left: auto;
  width: 96px;
  height: 86px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, rgba(255, 218, 164, 0.85), rgba(255, 255, 255, 0.12));
}

.sim-scene[data-situation="conversation"] {
  background:
    radial-gradient(circle at 80% 18%, rgba(159, 220, 199, 0.2), transparent 18%),
    linear-gradient(90deg, rgba(92, 69, 51, 0.12) 1px, transparent 1px),
    linear-gradient(#cfb48b 0 0);
  background-size: auto, 44px 100%, auto;
}

.sim-scene[data-situation="conversation"] .back-wall {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(90deg, #dcc393 0 12%, transparent 12% 88%, #dcc393 88% 100%),
    linear-gradient(180deg, #c9ad7c, #ad8f63);
}

.sim-scene[data-situation="conversation"] .zone-counter {
  right: 112px;
  bottom: 74px;
  width: 118px;
}

.sim-scene[data-situation="conversation"] .zone-line {
  left: 98px;
  top: 146px;
  bottom: auto;
  width: 132px;
}

.sim-scene[data-situation="conversation"] .side-you {
  right: 86px;
  bottom: 54px;
}

.sim-scene[data-situation="conversation"] .side-other {
  left: 74px;
  top: 116px;
}

.sim-scene[data-situation="conversation"] .other-avatar {
  left: 42%;
  bottom: 58%;
}

.sim-scene[data-situation="conversation"] .observer-avatar {
  display: none;
}

.sim-scene .vn-sky,
.sim-scene .vn-backdrop,
.sim-scene .vn-character,
.sim-scene .pov-world,
.sim-scene .back-wall,
.sim-scene .game-hud,
.sim-scene .window-light,
.sim-scene .sim-prop,
.sim-scene .floor-zone,
.sim-scene .side-label,
.sim-scene .game-zone,
.sim-scene .top-person,
.sim-scene .floor-grid,
.sim-scene .thought-card,
.sim-scene .queue-path {
  display: none;
}

.sim-scene .held-item,
.sim-scene .space-hint {
  z-index: 28;
}

.sim-scene .customer-speech {
  top: 116px;
  right: 11%;
  left: auto;
  z-index: 26;
  width: min(310px, 34%);
}

.sim-scene[data-remote-action="counter"] .pov-world,
.sim-scene[data-remote-action="candidate"] .pov-world,
.sim-scene[data-remote-action="stage"] .pov-world,
.sim-scene[data-remote-action="your-seat"] .pov-world {
  transform: translateX(0) scale(1);
}

.sim-scene[data-remote-action="customer"] .pov-world,
.sim-scene[data-remote-action="panel"] .pov-world,
.sim-scene[data-remote-action="audience"] .pov-world,
.sim-scene[data-remote-action="their-seat"] .pov-world {
  transform: translateX(-5%) scale(1.06);
}

.sim-scene[data-remote-action="entrance"] .pov-world {
  transform: translateX(5%) scale(0.96);
}

.sim-scene[data-remote-action="floor"] .pov-world {
  transform: translateY(1%) scale(1.01);
}

.sim-scene.has-player-move .pov-world {
  filter: brightness(1.04);
}

.sim-scene[data-remote-action="customer"] .pov-furniture,
.sim-scene[data-remote-action="panel"] .pov-furniture,
.sim-scene[data-remote-action="audience"] .pov-furniture,
.sim-scene[data-remote-action="their-seat"] .pov-furniture {
  transform: translateY(16px) scale(1.04);
}

.sim-scene[data-action="question"] .pov-customer-main,
.sim-scene[data-action="talk"] .pov-customer-main {
  transform: scale(1.03);
}

.sim-scene[data-mood="risky"] .pov-world {
  filter: saturate(1.05) contrast(1.02);
}

.sim-scene[data-queue="1"] .pov-customer-extra-a,
.sim-scene[data-queue="2"] .pov-customer-extra-a,
.sim-scene[data-queue="2"] .pov-customer-extra-b,
.sim-scene[data-queue="3"] .pov-customer-extra-a,
.sim-scene[data-queue="3"] .pov-customer-extra-b,
.sim-scene[data-queue="4"] .pov-customer-extra-a,
.sim-scene[data-queue="4"] .pov-customer-extra-b,
.sim-scene[data-queue="5"] .pov-customer-extra-a,
.sim-scene[data-queue="5"] .pov-customer-extra-b {
  opacity: 0.72;
  transform: scale(0.86);
}

.sim-scene[data-situation="interview"] .pov-world {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 36%),
    linear-gradient(180deg, #dce7f5 0 43%, #bcc8d8 43% 100%);
}

.sim-scene[data-situation="interview"] .pov-sign {
  background: #4a78d0;
}

.sim-scene[data-situation="interview"] .pov-window {
  left: auto;
  right: 8%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.42) 2px, transparent 2px),
    linear-gradient(180deg, #f4f9ff, #d8e8ff);
  background-size: 50% 100%, 100% 50%, auto;
}

.sim-scene[data-situation="interview"] .pov-furniture {
  height: 34%;
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 34%),
    #8e654d;
}

.sim-scene[data-situation="interview"] .pov-object-a,
.sim-scene[data-situation="interview"] .pov-object-b,
.sim-scene[data-situation="interview"] .pov-object-c {
  height: 28px;
  background: #ffffff;
}

.sim-scene[data-situation="presentation"] .pov-world {
  background:
    radial-gradient(circle at 34% 18%, rgba(244, 198, 94, 0.24), transparent 24%),
    linear-gradient(180deg, #dde5f0 0 40%, #aeb8c9 40% 100%);
}

.sim-scene[data-situation="presentation"] .pov-window {
  left: 18%;
  top: 15%;
  width: 54%;
  height: 30%;
  background: linear-gradient(135deg, #ffffff, #dce8ff);
}

.sim-scene[data-situation="presentation"] .pov-window::after {
  content: "";
  position: absolute;
  right: 16%;
  bottom: 22%;
  left: 16%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral));
}

.sim-scene[data-situation="presentation"] .pov-sign,
.sim-scene[data-situation="presentation"] .pov-shelf {
  display: none;
}

.sim-scene[data-situation="presentation"] .pov-furniture {
  left: 6%;
  right: auto;
  width: 32%;
  height: 36%;
  border-radius: 10px 10px 0 0;
  background: #24342f;
}

.sim-scene[data-situation="presentation"] .pov-customer-main {
  left: 62%;
  bottom: 20%;
  transform: scale(0.9);
}

.sim-scene[data-situation="conversation"] .pov-world {
  background:
    radial-gradient(circle at 82% 18%, rgba(159, 220, 199, 0.28), transparent 23%),
    linear-gradient(180deg, #ffe2bf 0 43%, #cfb48b 43% 100%);
}

.sim-scene[data-situation="conversation"] .pov-sign,
.sim-scene[data-situation="conversation"] .pov-shelf {
  display: none;
}

.sim-scene[data-situation="conversation"] .pov-window {
  left: auto;
  right: 9%;
  width: 20%;
  border-radius: 999px 999px 8px 8px;
}

.sim-scene[data-situation="conversation"] .pov-furniture {
  right: 16%;
  left: 16%;
  height: 32%;
  border-radius: 50% 50% 0 0 / 24% 24% 0 0;
  background: #a56f4d;
}

.sim-scene[data-situation="conversation"] .pov-customer-main {
  left: 40%;
  bottom: 24%;
  transform: scale(0.92);
}

.sim-scene .queue-person {
  display: none;
  z-index: 14;
  width: 28px;
  height: 44px;
  border-radius: 999px 999px 12px 12px;
  opacity: 0;
  background:
    radial-gradient(circle at 35% 24%, #2d2433 0 2px, transparent 2.6px),
    radial-gradient(circle at 64% 24%, #2d2433 0 2px, transparent 2.6px),
    linear-gradient(180deg, #ffd8bd 0 42%, #7ea1e8 42% 100%);
  box-shadow:
    0 8px 0 -2px rgba(122, 84, 48, 0.24),
    0 12px 18px rgba(122, 84, 48, 0.18);
  transform: translateY(12px) scale(0.88);
}

.sim-scene[data-queue] .queue-person {
  display: none;
}

.sim-scene .queue-person-1 {
  left: 7%;
  bottom: 14%;
}

.sim-scene .queue-person-2 {
  left: 12%;
  bottom: 16%;
}

.sim-scene .queue-person-3 {
  left: 17%;
  bottom: 13%;
}

.sim-scene .queue-person-4 {
  left: 22%;
  bottom: 15%;
}

.sim-scene .queue-person-5 {
  left: 27%;
  bottom: 13%;
}

.sim-scene[data-queue="1"] .queue-person-1,
.sim-scene[data-queue="2"] .queue-person-1,
.sim-scene[data-queue="2"] .queue-person-2,
.sim-scene[data-queue="3"] .queue-person-1,
.sim-scene[data-queue="3"] .queue-person-2,
.sim-scene[data-queue="3"] .queue-person-3,
.sim-scene[data-queue="4"] .queue-person-1,
.sim-scene[data-queue="4"] .queue-person-2,
.sim-scene[data-queue="4"] .queue-person-3,
.sim-scene[data-queue="4"] .queue-person-4,
.sim-scene[data-queue="5"] .queue-person-1,
.sim-scene[data-queue="5"] .queue-person-2,
.sim-scene[data-queue="5"] .queue-person-3,
.sim-scene[data-queue="5"] .queue-person-4,
.sim-scene[data-queue="5"] .queue-person-5 {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sim-scene .scene-item {
  grid-template-columns: 1fr;
  width: 38px;
  height: 38px;
  max-width: none;
  min-height: 38px;
  padding: 0;
  border-radius: 10px;
  font-size: 0;
  z-index: 21;
}

.sim-scene .scene-item::before {
  width: 20px;
  height: 20px;
}

.sim-scene .scene-item.is-nearby {
  grid-template-columns: auto minmax(0, 1fr);
  width: max-content;
  max-width: 130px;
  padding: 6px 10px 6px 7px;
  font-size: 0.62rem;
}

.sim-scene .pov-customer {
  width: 154px;
  height: 242px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: customerIdle 3.8s ease-in-out infinite;
}

.sim-scene .pov-customer::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 3;
  width: 82px;
  height: 104px;
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(ellipse at 50% 76%, rgba(181, 84, 80, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 36% 52%, #2d2734 0 2.5px, transparent 3.2px),
    radial-gradient(circle at 64% 52%, #2d2734 0 2.5px, transparent 3.2px),
    linear-gradient(100deg, transparent 0 48%, rgba(143, 83, 58, 0.13) 48% 52%, transparent 52%),
    radial-gradient(ellipse at 50% 8%, #5b3a2f 0 52%, transparent 54%),
    linear-gradient(180deg, #f3c4a7, #d99a7b);
  box-shadow:
    -9px -10px 0 -2px #5b3a2f,
    9px -8px 0 -3px #5b3a2f,
    0 12px 24px rgba(82, 53, 36, 0.22);
  transform: translateX(-50%);
}

.sim-scene .pov-customer::after {
  content: "";
  position: absolute;
  top: 98px;
  right: 5px;
  bottom: 0;
  left: 5px;
  z-index: 2;
  border-radius: 48% 48% 16px 16px / 30% 30% 16px 16px;
  background:
    radial-gradient(ellipse at 50% 0, #d99a7b 0 18px, transparent 19px),
    linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 36%),
    linear-gradient(180deg, #557fc9, #2e4f90);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  box-shadow:
    0 23px 0 -12px rgba(82, 53, 36, 0.22),
    0 30px 42px rgba(82, 53, 36, 0.24);
}

.sim-scene .pov-customer span {
  top: 112px;
  right: 0;
  z-index: 4;
  width: 34px;
  height: 92px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #d99a7b 0 70%, #c4876f 70%);
  box-shadow: 0 12px 18px rgba(82, 53, 36, 0.14);
  transform: rotate(-17deg);
  transform-origin: top center;
  animation: customerGesture 2.8s ease-in-out infinite;
}

.sim-scene .pov-customer span::before {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -8px;
  width: 25px;
  height: 22px;
  border-radius: 45% 55% 55% 45%;
  background: #d99a7b;
}

.sim-scene .pov-customer-extra {
  width: 96px;
  height: 156px;
}

.sim-scene .pov-customer-extra::before {
  width: 54px;
  height: 68px;
}

.sim-scene .pov-customer-extra::after {
  top: 66px;
}

.sim-scene .pov-customer-extra span {
  display: none;
}

.sim-scene .pov-customer-extra-a::before {
  background:
    radial-gradient(ellipse at 50% 76%, rgba(145, 69, 72, 0.8) 0 3px, transparent 4px),
    radial-gradient(circle at 36% 52%, #2d2734 0 2px, transparent 2.8px),
    radial-gradient(circle at 64% 52%, #2d2734 0 2px, transparent 2.8px),
    radial-gradient(ellipse at 50% 8%, #2f2a31 0 52%, transparent 54%),
    linear-gradient(180deg, #e7b18f, #c98770);
}

.sim-scene .pov-customer-extra-a::after {
  background:
    radial-gradient(ellipse at 50% 0, #c98770 0 13px, transparent 14px),
    linear-gradient(180deg, #9fdcc7, #4f9b86);
}

.sim-scene .pov-customer-extra-b::before {
  background:
    radial-gradient(ellipse at 50% 76%, rgba(160, 78, 70, 0.8) 0 3px, transparent 4px),
    radial-gradient(circle at 36% 52%, #2d2734 0 2px, transparent 2.8px),
    radial-gradient(circle at 64% 52%, #2d2734 0 2px, transparent 2.8px),
    radial-gradient(ellipse at 50% 8%, #7a4938 0 52%, transparent 54%),
    linear-gradient(180deg, #f0c6a2, #d28f70);
}

.sim-scene .pov-customer-extra-b::after {
  background:
    radial-gradient(ellipse at 50% 0, #d28f70 0 13px, transparent 14px),
    linear-gradient(180deg, #f4c65e, #bb7d25);
}

.sim-scene[data-situation="interview"] .pov-customer-main::after {
  background:
    radial-gradient(ellipse at 50% 0, #d99a7b 0 18px, transparent 19px),
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(180deg, #344b77, #202d4a);
}

.sim-scene[data-situation="presentation"] .pov-customer-main::after {
  background:
    radial-gradient(ellipse at 50% 0, #d99a7b 0 18px, transparent 19px),
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(180deg, #80589f, #4e356b);
}

.sim-scene[data-situation="conversation"] .pov-customer-main::after {
  background:
    radial-gradient(ellipse at 50% 0, #d99a7b 0 18px, transparent 19px),
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(180deg, #0f8d79, #266458);
}

.sim-scene .pov-customer {
  width: 128px;
  height: 220px;
  opacity: 0.94;
  filter: drop-shadow(0 26px 26px rgba(82, 53, 36, 0.22));
}

.sim-scene .pov-customer::before {
  top: 10px;
  width: 66px;
  height: 82px;
  border-radius: 48% 48% 46% 46%;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(126, 68, 66, 0.42) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(85, 55, 44, 0.96) 0 22%, transparent 23%),
    linear-gradient(180deg, #e5b08f, #c98a70);
  box-shadow:
    -7px -6px 0 -2px rgba(85, 55, 44, 0.96),
    7px -5px 0 -3px rgba(85, 55, 44, 0.96),
    0 10px 22px rgba(82, 53, 36, 0.18);
}

.sim-scene .pov-customer::after {
  top: 82px;
  right: 1px;
  left: 1px;
  border-radius: 45% 45% 18px 18px / 28% 28% 18px 18px;
  background:
    linear-gradient(180deg, #d49a7a 0 15px, transparent 16px),
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, #5f83bd, #2f527f);
  clip-path: polygon(24% 0, 76% 0, 98% 100%, 2% 100%);
}

.sim-scene .pov-customer span {
  top: 100px;
  right: 7px;
  width: 25px;
  height: 74px;
  opacity: 0.82;
}

.sim-scene .pov-customer span::before {
  width: 18px;
  height: 17px;
}

.sim-scene .pov-customer-extra {
  width: 72px;
  height: 128px;
  opacity: 0;
  filter: blur(0.2px) drop-shadow(0 18px 18px rgba(82, 53, 36, 0.14));
}

.sim-scene .pov-customer-extra::before {
  width: 38px;
  height: 48px;
  background:
    linear-gradient(180deg, rgba(77, 54, 48, 0.88) 0 24%, transparent 25%),
    linear-gradient(180deg, #d5a184, #b77b64);
}

.sim-scene .pov-customer-extra::after {
  top: 48px;
  background:
    linear-gradient(180deg, #bd866c 0 10px, transparent 11px),
    linear-gradient(180deg, #7da9c9, #486f99);
  clip-path: polygon(28% 0, 72% 0, 96% 100%, 4% 100%);
}

.sim-scene[data-situation="interview"] .pov-customer-main::after {
  background:
    linear-gradient(180deg, #d49a7a 0 15px, transparent 16px),
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, #455d86, #25344f);
}

.sim-scene[data-situation="presentation"] .pov-customer-main::after {
  background:
    linear-gradient(180deg, #d49a7a 0 15px, transparent 16px),
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, #82629d, #4d3a68);
}

.sim-scene[data-situation="conversation"] .pov-customer-main::after {
  background:
    linear-gradient(180deg, #d49a7a 0 15px, transparent 16px),
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, #238f7f, #2b6258);
}

.sim-scene .pov-world {
  background:
    radial-gradient(circle at 62% 18%, rgba(255, 255, 255, 0.62), transparent 22%),
    linear-gradient(180deg, rgba(255, 246, 226, 0.85) 0 38%, transparent 39%),
    linear-gradient(180deg, #ead0ad 0 42%, #b9895b 42% 100%);
  transform: translate3d(var(--camera-x, 0px), var(--camera-y, 0px), 0) scale(var(--camera-scale, 1));
}

.sim-scene.has-player-move .pov-world {
  transition-duration: 260ms;
}

.sim-scene .pov-world::before {
  content: "";
  position: absolute;
  right: -8%;
  bottom: 0;
  left: -8%;
  height: 58%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(73, 43, 25, 0.25), transparent 46%),
    repeating-linear-gradient(90deg, rgba(92, 58, 37, 0.18) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, #c99b68, #8d603c);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

.sim-scene .pov-backdrop {
  transform: translateX(calc(var(--camera-x, 0px) * -0.22));
}

.sim-scene .pov-furniture {
  height: 42%;
  background:
    linear-gradient(180deg, rgba(255, 245, 224, 0.42), transparent 18%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 58px),
    linear-gradient(90deg, rgba(57, 32, 21, 0.28), transparent 18% 82%, rgba(57, 32, 21, 0.28)),
    linear-gradient(180deg, #9f6945, #69432d);
  transform: translate3d(calc(var(--camera-x, 0px) * -0.28), 0, 0);
}

.sim-scene .pov-customer {
  width: 96px;
  height: 184px;
  opacity: 0.96;
  filter:
    drop-shadow(0 20px 18px rgba(50, 31, 20, 0.24))
    saturate(0.96);
  transform: translateZ(0);
}

.sim-scene .pov-customer::before {
  top: 8px;
  width: 52px;
  height: 66px;
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(ellipse at 52% 72%, rgba(111, 63, 58, 0.32) 0 4px, transparent 5px),
    linear-gradient(105deg, transparent 0 55%, rgba(92, 55, 42, 0.18) 56% 100%),
    radial-gradient(ellipse at 48% 6%, #4d332b 0 48%, transparent 50%),
    linear-gradient(180deg, #d9aa8c, #b97a63);
  box-shadow:
    -5px -5px 0 -2px #4d332b,
    5px -4px 0 -3px #4d332b,
    inset -8px -8px 16px rgba(98, 54, 41, 0.14);
}

.sim-scene .pov-customer::after {
  top: 66px;
  right: 0;
  left: 0;
  border-radius: 40% 40% 12px 12px / 24% 24% 12px 12px;
  background:
    radial-gradient(ellipse at 50% 0, #b97a63 0 11px, transparent 12px),
    linear-gradient(110deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, #526f9f, #273f64);
  clip-path: polygon(30% 0, 70% 0, 96% 100%, 4% 100%);
}

.sim-scene .pov-customer span {
  display: none;
}

.sim-scene .pov-customer-main {
  left: 46%;
  bottom: 25%;
}

.sim-scene .pov-customer-extra {
  width: 62px;
  height: 116px;
  opacity: 0;
  filter:
    blur(0.35px)
    drop-shadow(0 16px 14px rgba(50, 31, 20, 0.16));
}

.sim-scene .pov-customer-extra::before {
  width: 34px;
  height: 42px;
}

.sim-scene .pov-customer-extra::after {
  top: 42px;
}

.sim-scene[data-remote-action="customer"] .pov-world,
.sim-scene[data-remote-action="panel"] .pov-world,
.sim-scene[data-remote-action="audience"] .pov-world,
.sim-scene[data-remote-action="their-seat"] .pov-world,
.sim-scene[data-remote-action="counter"] .pov-world,
.sim-scene[data-remote-action="candidate"] .pov-world,
.sim-scene[data-remote-action="stage"] .pov-world,
.sim-scene[data-remote-action="your-seat"] .pov-world,
.sim-scene[data-remote-action="entrance"] .pov-world,
.sim-scene[data-remote-action="floor"] .pov-world {
  transform: translate3d(var(--camera-x, 0px), var(--camera-y, 0px), 0) scale(var(--camera-scale, 1));
}

.sim-scene[data-situation="business"] .pov-customer-main::after {
  background:
    radial-gradient(ellipse at 50% 0, #b97a63 0 11px, transparent 12px),
    linear-gradient(110deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, #526f9f, #273f64);
}

.sim-scene[data-situation="interview"] .pov-customer-main::after {
  background:
    radial-gradient(ellipse at 50% 0, #b97a63 0 11px, transparent 12px),
    linear-gradient(110deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(180deg, #34425f, #1e2638);
}

.sim-scene[data-situation="presentation"] .pov-customer-main::after {
  background:
    radial-gradient(ellipse at 50% 0, #b97a63 0 11px, transparent 12px),
    linear-gradient(110deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(180deg, #775b8e, #423258);
}

.sim-scene[data-situation="conversation"] .pov-customer-main::after {
  background:
    radial-gradient(ellipse at 50% 0, #b97a63 0 11px, transparent 12px),
    linear-gradient(110deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(180deg, #287d70, #254f49);
}

body[data-mode="speech"] .mic-button {
  width: min(100%, 360px);
  min-height: 68px;
  justify-content: center;
  font-size: 1rem;
}

body[data-mode="speech"] .mic-button span {
  width: 16px;
  height: 24px;
}

body[data-mode="speech"] .choice-row {
  display: flex;
}

body[data-mode="speech"] .choice-row button {
  flex: 1 1 120px;
  min-height: 48px;
}

.consequence-list {
  display: grid;
  gap: 8px;
  max-height: 138px;
  overflow: auto;
  padding: 14px;
  border-top: 1px solid rgba(122, 84, 48, 0.1);
  background: rgba(255, 248, 238, 0.82);
}

.mini-consequence {
  padding: 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #49351f;
  font-size: 0.88rem;
  line-height: 1.4;
  box-shadow: 0 8px 18px rgba(122, 84, 48, 0.08);
}

.results-layout {
  grid-template-columns: 320px minmax(0, 1fr);
}

.score-block,
.insight-columns > div,
.results-timeline {
  padding: 24px;
}

.score-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74)),
    var(--panel);
}

.score-block strong {
  display: block;
  margin: 10px 0;
  font-size: 4.5rem;
  line-height: 0.9;
  color: var(--teal);
}

.score-block p,
.insight-columns li {
  color: var(--muted);
  line-height: 1.5;
}

.insight-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.insight-columns ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.results-timeline {
  grid-column: 1 / -1;
  border: 1px solid rgba(123, 91, 139, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--soft-shadow);
}

.results-timeline h2 {
  margin: 0 0 14px;
}

#resultsTimeline {
  display: grid;
  gap: 12px;
}

.timeline-result-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(123, 91, 139, 0.1);
  border-radius: 8px;
  background: rgba(255, 250, 247, 0.86);
}

.timeline-result-item strong,
.timeline-result-item p,
.timeline-result-item span {
  display: block;
}

.timeline-result-item strong {
  color: #453749;
}

.timeline-result-item p {
  margin: 6px 0;
  color: #6d557a;
  line-height: 1.4;
}

.timeline-result-item span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.timeline-result-item .secondary-button {
  min-width: 132px;
  white-space: nowrap;
}

.replay-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bob {
  50% {
    transform: translateY(-8px);
  }
}

@keyframes cuteBob {
  0%,
  100% {
    translate: 0 0;
  }
  45% {
    translate: 0 -8px;
  }
  60% {
    translate: 0 -5px;
  }
}

@keyframes showcaseDrift {
  0%,
  100% {
    transform: rotateY(-7deg) rotateX(3deg) translateY(0) scale(1);
  }
  50% {
    transform: rotateY(3deg) rotateX(1deg) translateY(-12px) scale(1.025);
  }
}

@keyframes portalGlow {
  0%,
  100% {
    filter: blur(0.5px);
    opacity: 0.82;
  }
  50% {
    filter: blur(4px);
    opacity: 1;
  }
}

@keyframes portalPulse {
  0%,
  100% {
    box-shadow:
      0 20px 70px rgba(143, 167, 255, 0.42),
      0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow:
      0 26px 88px rgba(143, 167, 255, 0.58),
      0 0 42px rgba(255, 212, 232, 0.38);
  }
}

@keyframes landingSpotSweep {
  0%,
  100% {
    transform: translateX(-8%) rotate(-8deg) scale(0.94);
  }
  50% {
    transform: translateX(5%) rotate(8deg) scale(1.08);
  }
}

@keyframes beamsPan {
  0%,
  100% {
    transform: translateX(-22px) rotate(-16deg);
  }
  50% {
    transform: translateX(28px) rotate(-10deg);
  }
}

@keyframes beamPulse {
  0%,
  100% {
    opacity: 0.34;
    transform: scaleY(0.68);
  }
  50% {
    opacity: 0.96;
    transform: scaleY(1);
  }
}

@keyframes doorOpen {
  0%,
  100% {
    transform: skewY(-6deg) rotateY(0deg);
  }
  48% {
    transform: skewY(-6deg) rotateY(-26deg) translateX(18px);
  }
}

@keyframes pathBreathe {
  0%,
  100% {
    opacity: 0.68;
    transform: translateY(8px) scaleY(0.96);
  }
  50% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes pathArrow {
  0%,
  100% {
    opacity: 0.44;
    transform: translateY(16px) rotate(-45deg);
  }
  50% {
    opacity: 0.92;
    transform: translateY(-8px) rotate(-45deg);
  }
}

@keyframes titleReveal {
  0%,
  16% {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
    filter: blur(7px);
  }
  36%,
  74% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.03);
    filter: blur(5px);
  }
}

@keyframes signalFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  50% {
    transform: translate3d(14px, -18px, 0) scale(1.14);
  }
}

@keyframes spotlightPulse {
  0%,
  100% {
    opacity: 0.66;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes primaryPulse {
  0%,
  100% {
    box-shadow:
      0 20px 52px rgba(135, 167, 255, 0.22),
      0 0 0 0 rgba(255, 255, 255, 0.28);
  }
  50% {
    box-shadow:
      0 22px 60px rgba(135, 167, 255, 0.3),
      0 0 0 8px rgba(255, 255, 255, 0.06);
  }
}

@keyframes scrollDot {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(17px);
  }
}

@keyframes landingAuraSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes landingLineSweep {
  0%,
  100% {
    opacity: 0.28;
    transform: scaleX(0.42);
  }
  50% {
    opacity: 0.8;
    transform: scaleX(1);
  }
}

@keyframes landingKickerFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes landingWordShimmer {
  0%,
  100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 24px rgba(255, 218, 235, 0.26));
  }
}

@keyframes landingWordRise {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes landingButtonPulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 22px 60px rgba(135, 167, 255, 0.28),
      0 0 0 8px rgba(255, 255, 255, 0.08);
  }
  50% {
    transform: translateY(-3px);
    box-shadow:
      0 30px 74px rgba(255, 188, 214, 0.34),
      0 0 0 12px rgba(255, 255, 255, 0.1);
  }
}

@keyframes queuePulse {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 7px 0;
  }
}

@keyframes timeBlink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 52px rgba(243, 196, 91, 0.3);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 82px rgba(240, 107, 85, 0.52);
  }
}

@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  50% {
    transform: scale(1.45);
    opacity: 0.5;
  }
}

@keyframes micPulse {
  50% {
    transform: scaleY(0.72);
    opacity: 0.72;
  }
}

@keyframes playerPop {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.18);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes characterBreathe {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}

@keyframes blink {
  0%,
  88%,
  100% {
    opacity: 0;
  }
  91%,
  94% {
    opacity: 1;
  }
}

@keyframes speakingHand {
  0%,
  100% {
    transform: rotate(-16deg);
  }
  50% {
    transform: rotate(-5deg) translateY(-5px);
  }
}

@keyframes bubbleIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tenseShake {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 3px 0;
  }
}

@keyframes statPulse {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -4px;
  }
}

@keyframes customerIdle {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -4px;
  }
}

@keyframes customerGesture {
  0%,
  100% {
    rotate: 0deg;
  }
  50% {
    rotate: 7deg;
  }
}

@keyframes castBreath {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}

@keyframes castConcern {
  0%,
  100% {
    rotate: 0deg;
  }
  50% {
    rotate: -1.5deg;
  }
}

@keyframes castGesture {
  0%,
  100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(-42deg) translateY(-8px);
  }
}

@keyframes castWalkInA {
  0%,
  100% {
    translate: 18px 3px;
  }
  50% {
    translate: -4px -2px;
  }
}

@keyframes castWalkInB {
  0%,
  100% {
    translate: 26px 2px;
  }
  50% {
    translate: 2px -3px;
  }
}

@keyframes rehearsalSceneBreathe {
  0%,
  100% {
    background-size: auto, var(--scene-zoom, 118%) auto, auto;
  }
  50% {
    background-size: auto, calc(var(--scene-zoom, 118%) + 3%) auto, auto;
  }
}

@keyframes warmLightMove {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.62;
  }
  50% {
    transform: translate3d(-18px, -8px, 0) scale(1.08);
    opacity: 0.88;
  }
}

@keyframes distantCrowdShift {
  0%,
  100% {
    transform: translate3d(-8px, 0, 0);
  }
  50% {
    transform: translate3d(14px, -2px, 0);
  }
}

@keyframes urgentScenePulse {
  0%,
  100% {
    filter: saturate(1.04) brightness(0.98);
  }
  50% {
    filter: saturate(1.16) brightness(0.94);
  }
}

@media (max-width: 1320px), (max-height: 820px) {
  #simulationPanel .sim-layout {
    grid-template-columns: minmax(470px, 1.15fr) minmax(330px, 0.85fr);
    grid-template-rows: minmax(560px, calc(100vh - 92px));
    gap: 14px;
    padding: 14px;
  }

  #simulationPanel .sim-main {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
  }

  #simulationPanel .sim-scene {
    min-height: 100%;
  }

  #simulationPanel .dialogue-card,
  #simulationPanel .response-area {
    min-height: 150px;
    max-height: none;
    padding: 10px 16px;
  }

  #simulationPanel .dialogue-card {
    max-height: 250px;
  }

  #simulationPanel .dialogue-card p {
    font-size: 0.88rem;
  }

  #simulationPanel .response-area {
    grid-template-columns: 1fr auto;
  }

  #simulationPanel .mic-button,
  body[data-mode="speech"] #simulationPanel .mic-button {
    width: 56px;
    height: 56px;
    min-height: 56px;
    border-width: 5px;
  }

  #simulationPanel .consequence-card {
    bottom: auto;
  }

  .app-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .rail {
    gap: 18px;
    padding: 18px 16px;
  }

  .brand-logo {
    width: 50px;
    height: 50px;
  }

  .brand-lockup strong {
    font-size: 0.96rem;
  }

  .brand-lockup span {
    font-size: 0.75rem;
  }

  .steps {
    gap: 10px;
    padding-top: 6px;
  }

  .steps::before,
  .steps::after {
    top: 28px;
    bottom: 28px;
    left: 22px;
  }

  .step {
    min-height: 58px;
    gap: 10px;
    padding-block: 8px;
    font-size: 0.86rem;
  }

  .step span {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.8),
      0 10px 18px rgba(22, 32, 30, 0.08);
  }

  .rail-card {
    padding: 12px;
    font-size: 0.88rem;
  }

  .workspace {
    padding: 14px;
  }

  .topbar {
    margin-bottom: 16px;
  }

  .topbar h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
  }

  .sim-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .live-visual {
    order: -1;
  }

  .dialogue-card,
  .response-area,
  .consequence-card {
    padding: 16px;
  }

  .dialogue-card::before,
  .response-area::before,
  .consequence-card::before {
    margin-bottom: 10px;
  }

  .dialogue-card h2 {
    font-size: 1.2rem;
  }

  .sim-status {
    min-height: 46px;
    padding: 10px 12px;
  }

  textarea {
    min-height: 108px;
    padding: 12px;
  }

  .speech-tools,
  .speech-transcript,
  .remote-panel {
    margin-block: 8px;
    padding: 10px;
  }

  .speech-transcript {
    min-height: 72px;
  }

  .remote-grid {
    max-width: 214px;
    gap: 6px;
  }

  .remote-grid button,
  .remote-grid span {
    min-height: 42px;
  }

  .live-visual {
    min-height: 0;
    grid-template-rows: auto minmax(480px, 58vh) minmax(0, 76px);
  }

  .visual-header {
    padding: 12px 14px;
  }

  .sim-scene {
    min-height: 480px;
  }

  .game-hud {
    top: 12px;
    right: 12px;
    left: 12px;
  }

  .top-person,
  .queue-person {
    width: 36px;
    height: 36px;
  }

  .top-person::before {
    top: -21px;
    font-size: 0.52rem;
  }

  .scene-item {
    grid-template-columns: 1fr;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 0;
    border-radius: 8px;
  }

  .scene-item::before {
    width: 17px;
    height: 17px;
  }

  .scene-item.is-nearby {
    grid-template-columns: auto minmax(0, 1fr);
    width: max-content;
    max-width: 104px;
    padding: 5px 8px 5px 6px;
    font-size: 0.56rem;
    line-height: 1.05;
  }

  .held-item,
  .space-hint {
    max-width: 132px;
    font-size: 0.66rem;
  }

  .consequence-list {
    max-height: 76px;
    padding: 8px 10px;
  }

  .mini-consequence {
    padding: 7px 9px;
    font-size: 0.76rem;
  }

  .side-label,
  .game-zone,
  .thought-card {
    display: none;
  }
}

@media (max-width: 1120px) and (min-width: 981px) {
  .app-shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .sim-layout {
    grid-template-columns: 1fr;
  }

  .live-visual {
    grid-template-rows: auto minmax(480px, 58vh) minmax(0, 76px);
  }

  .sim-scene {
    min-height: 480px;
  }

  .topbar-actions {
    align-items: flex-end;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .landing-hero {
    grid-template-columns: 1fr;
    padding-top: 42px;
    min-height: calc(100vh - 116px);
  }

  .landing-showcase {
    inset: -80px -28vw -70px 8vw;
    min-height: 100%;
  }

  .showcase-screen {
    width: min(760px, 118vw);
    opacity: 0.9;
  }

  .mode-shell {
    grid-template-columns: 1fr;
    align-content: center;
    padding-top: 42px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .rail {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 33, 31, 0.12);
  }

  .brand-lockup,
  .rail-card {
    display: none;
  }

  .steps {
    display: flex;
    min-width: 0;
    align-items: center;
    overflow-x: auto;
    gap: 8px;
    padding: 8px 0;
  }

  .steps::before,
  .steps::after {
    top: 28px;
    right: 22px;
    bottom: auto;
    left: 22px;
    width: auto;
    height: 3px;
  }

  .steps::after {
    width: var(--timeline-progress);
    max-width: calc(100% - 44px);
    transition: width 420ms ease;
  }

  .step {
    flex: 0 0 132px;
    justify-content: center;
    min-height: 58px;
    padding: 8px;
    font-size: 0.78rem;
  }

  .step::after {
    inset: 5px 0;
  }

  .step span {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.82),
      0 10px 18px rgba(22, 32, 30, 0.08);
  }

  .step.is-upcoming {
    flex: 0 0 112px;
  }

  .step.is-upcoming span {
    width: 30px;
    height: 30px;
    flex-basis: 38px;
    margin-left: 4px;
  }

  .brief-layout,
  .sim-layout,
  .results-layout,
  .insight-columns,
  .criteria-grid,
  .setup-grid {
    grid-template-columns: 1fr;
  }

  .remote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scene-stage,
  .live-visual {
    min-height: 430px;
  }
}

@media (max-width: 620px) {
  .landing-page,
  .mode-page {
    padding: 18px;
  }

  .landing-nav img {
    width: 126px;
    height: 60px;
  }

  .landing-copy h1 {
    font-size: 3.2rem;
  }

  .mode-copy h1 {
    font-size: 3rem;
  }

  .landing-actions,
  .landing-row-heading,
  .topbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-primary,
  .landing-secondary,
  .landing-ghost {
    width: 100%;
  }

  .landing-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-showcase {
    inset: -28px -58vw -42px 0;
    min-height: 100%;
  }

  .showcase-screen {
    width: 140vw;
    opacity: 0.72;
  }

  .showcase-door {
    width: 36%;
    height: 45%;
  }

  .showcase-door span {
    right: -25%;
    width: 56%;
    height: 82%;
  }

  .showcase-glow {
    inset: 6% 14% auto;
    height: 43%;
  }

  .showcase-path {
    right: 6%;
    left: 6%;
    height: 48%;
  }

  .showcase-title {
    font-size: clamp(3rem, 13vw, 5.2rem);
  }

  .landing-scroll-cue {
    display: none;
  }

  .scenario-rail {
    grid-auto-columns: minmax(240px, 82vw);
  }

  .workspace {
    padding: 18px;
  }

  .topbar,
  .panel-heading,
  .sim-status {
    align-items: flex-start;
    flex-direction: column;
  }

  h1 {
    font-size: 2.25rem;
  }

  .steps {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
  }

  .step {
    flex: 0 0 122px;
  }

  .step.is-upcoming {
    flex: 0 0 42px;
  }

  .custom-criterion,
  .replay-actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .primary-button,
  .secondary-button,
  .ghost-button {
    width: 100%;
  }

  .speech-tools {
    grid-template-columns: 1fr;
  }

  .remote-grid {
    grid-template-columns: 1fr;
  }
}