/* ============================================================
   FirstPoint demo — light gamified styles (v2 language)
   View 1 HUD · View 2 seat view · View 3 startle mini-game
   ============================================================ */
:root {
  --paper: #faf6ee;
  --paper-deep: #f3ecdd;
  --card: #fff;
  --line: #e5dcc8;
  --line-strong: #d3c7ab;
  --ink: #2a2d3a;
  --ink2: #5d6373;
  --ink3: #8b90a0;
  --brand: #1fa08c;
  --brand-deep: #157a6a;
  --sun: #f5b840;
  --sun-deep: #c98f1d;
  --good: #2f9d63;
  --good-soft: #def0e4;
  --bad: #d4564e;
  --stress: #ae5bbf;
  --teamc: #dd9f33;
  --font: 'Nunito', 'Segoe UI', system-ui, Arial, sans-serif;
  --mono: 'Cascadia Mono', Consolas, monospace;
  --fp-message-rail-width: 332px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  font-family: var(--font);
  color: var(--ink);
}
button {
  font: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}
.hidden {
  display: none !important;
}
.autostart-capture * {
  animation: none !important;
  transition: none !important;
}
canvas#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

/* ---------- shared bits ---------- */
.gbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: none;
  border-bottom: 4px solid var(--brand-deep);
  font-size: 13.5px;
  font-weight: 800;
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  transition:
    transform 0.06s,
    border-bottom-width 0.06s;
  white-space: nowrap;
}
.gbtn:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
}
.gbtn--ghost {
  background: #fff;
  border: 2px solid var(--line-strong);
  border-bottom-width: 4px;
  color: var(--ink);
}
.gbtn--sun {
  background: var(--sun);
  border-bottom-color: var(--sun-deep);
  color: #4a3508;
}
.gbtn--lg {
  font-size: 14.5px;
  padding: 13px 22px;
  white-space: normal;
  line-height: 1.4;
}
.gbtn--splash-start {
  font-size: 15.5px;
  padding: 13px 28px;
}
.flex-spacer {
  flex: 1;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 10px;
  border: 2px solid var(--line);
  color: var(--ink2);
  background: #fff;
  white-space: nowrap;
}
.chip--good {
  color: var(--good);
  background: var(--good-soft);
  border-color: transparent;
}
.chip--brand {
  color: var(--brand-deep);
  background: #d9efe9;
  border-color: transparent;
}
.pts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 900;
  border-radius: 999px;
  padding: 4px 13px;
  color: #fff;
}
.dchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 11px;
  color: #fff;
}
.dchips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.qchip {
  border: 2px solid var(--brand);
  background: #fff;
  color: var(--brand-deep);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 800;
}
.qchip.on,
.qchip:hover {
  background: #d9efe9;
}
.chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.key {
  display: inline-block;
  border: 1.5px solid var(--ink3);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  background: #fff;
}
.ainote {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11.5px;
  color: var(--ink3);
  line-height: 1.5;
  border: 2px dashed var(--line-strong);
  border-radius: 12px;
  padding: 9px 11px;
  background: #fffdf8;
}
.panel {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 5px 16px rgba(94, 78, 43, 0.08);
}
.panel--good {
  border-color: rgba(47, 157, 99, 0.5);
}
.panel--flip {
  border-style: dashed;
  border-color: var(--sun-deep);
  background: #fffaf0;
}
.panel p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink2);
}
.p-h {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 9px;
}

/* ---------- HUD (View 1) ---------- */
.hud {
  position: fixed;
  z-index: 20;
  pointer-events: none;
}
.hud * {
  pointer-events: auto;
}
.hud--tl {
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: calc(100vw - 240px);
}
.hudpill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(94, 78, 43, 0.15);
}
.hudpill .logo b {
  color: var(--brand-deep);
}
.hudpill--btn {
  cursor: pointer;
}
.hudpill--btn:hover {
  border-color: var(--brand);
}
.route-objective {
  border-color: rgba(223, 92, 142, 0.42);
  color: var(--ink);
  line-height: 1.2;
  max-width: min(360px, calc(100vw - 36px));
  white-space: normal;
}
.hud--tr {
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
}
.hud--zoom {
  left: 14px;
  bottom: 68px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 47;
}
.global-controls {
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 48;
}
.global-controls .iconb {
  white-space: nowrap;
}
.iconb {
  position: relative;
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  font-size: 15px;
  font-weight: 900;
  display: grid;
  place-items: center;
  padding: 0 10px;
  box-shadow: 0 6px 18px rgba(94, 78, 43, 0.15);
}
.zoomctl {
  min-width: 38px;
  width: 38px;
  height: 38px;
  border-color: rgba(166, 133, 57, 0.45);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  cursor: pointer;
}
.zoomctl:hover,
.zoomctl:focus-visible {
  border-color: var(--brand);
  background: #fff;
}
.zoomctl--reset {
  width: auto;
  min-width: 50px;
  padding: 0 9px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.iconb.is-off {
  opacity: 0.58;
  filter: saturate(0.25);
}
.iconb.is-off::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: var(--bad);
  transform: rotate(-35deg);
  pointer-events: none;
}
.prompt {
  position: fixed;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  z-index: 22;
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 900;
  font-size: 13.5px;
  box-shadow: 0 10px 28px rgba(94, 78, 43, 0.22);
  max-width: 92vw;
}
.prompt.show {
  display: flex;
}
.hintbar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 18;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink3);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 6px 16px;
  border: 1.5px solid var(--line);
}
.toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 70px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(620px, 94vw);
}
.toast {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 9px;
  align-items: center;
  max-width: 100%;
}
.toast .em {
  color: var(--sun);
}

/* objectives drawer */
.objdrawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 94vw);
  background: var(--paper);
  border-right: 2px solid var(--line);
  box-shadow: 18px 0 50px rgba(94, 78, 43, 0.18);
  z-index: 70;
  transform: translateX(-103%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}
.objdrawer.open {
  transform: none;
}
.objdrawer .od-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 2px solid var(--line);
  font-weight: 900;
  font-size: 15px;
  background: #fff;
}
.od-kicker {
  font-size: 11px;
  color: var(--ink3);
  font-weight: 700;
}
.objdrawer .od-b {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.objrow {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 8px 11px;
  font-size: 12.5px;
}
.objrow b {
  flex: 1;
  font-weight: 800;
}
.objrow span {
  color: var(--ink3);
  font-weight: 700;
  font-size: 11px;
}
.objrow .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.objrow.is-done {
  opacity: 0.6;
}
.objrow.is-done b {
  text-decoration: line-through;
}

/* ---------- View 2 layout ---------- */
#view2,
#view3 {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#view3 {
  background: #071319;
}
.v2-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 2px solid var(--line);
  flex-wrap: wrap;
}
.v2-head .roomdot {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  border-bottom: 3px solid var(--brand-deep);
}
.v2-head b {
  font-size: 16px;
  font-weight: 900;
  display: block;
  line-height: 1.15;
}
.v2-head span {
  font-size: 11.5px;
  color: var(--ink2);
  font-weight: 700;
}
.v2-scenewrap {
  position: relative;
  height: 46%;
  min-height: 300px;
  border-bottom: 2px solid var(--line);
  overflow: hidden;
}
.v2-panels {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 14px;
  padding: 14px 18px;
  align-content: start;
}
.v2-left,
.v2-right {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.vplayer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 2px dashed var(--paper-deep);
  font-size: 13px;
  flex-wrap: wrap;
}
.vplayer:last-child {
  border-bottom: none;
}
.vplayer b {
  font-weight: 800;
}
.vplayer span {
  color: var(--ink3);
  font-weight: 700;
  font-size: 12px;
}
.vplayer .dotchip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}
.mini-bar {
  display: inline-block;
  width: 74px;
  height: 8px;
  border-radius: 5px;
  background: var(--paper-deep);
  border: 1.5px solid var(--line);
  overflow: hidden;
  vertical-align: middle;
  margin-left: 6px;
}
.mini-bar i {
  display: block;
  height: 100%;
  width: 42%;
  background: var(--teamc);
}
.objline b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
}
.objline span {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.5;
}
.bigpts {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.recapline {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink2);
  padding: 5px 0;
  border-bottom: 2px dashed var(--paper-deep);
  line-height: 1.45;
}
.recapline:last-child {
  border-bottom: none;
}
.recapline i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink3);
  flex: none;
  margin-top: 2px;
}
.reflect-done {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--good);
}

/* seat cards */
.seatcard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  background: #fff;
  border: 2.5px solid var(--line);
  border-radius: 16px;
  padding: 0 0 12px;
  overflow: hidden;
  transition:
    transform 0.07s,
    border-color 0.1s;
}
.seatcard:not([disabled]):hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.seatcard.is-locked {
  opacity: 0.62;
}
.seatcard.is-done {
  border-color: rgba(47, 157, 99, 0.55);
}
.sc-band {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.sc-band em {
  font-style: normal;
  margin-left: auto;
  opacity: 0.9;
  font-family: var(--mono);
  font-size: 9.5px;
}
.sc-band--lg {
  font-size: 11.5px;
  padding: 10px 16px;
  border-radius: 12px 12px 0 0;
}
.seatcard b {
  font-size: 15.5px;
  font-weight: 900;
  padding: 0 14px;
}
.sc-gist {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.5;
  padding: 0 14px;
}
.sc-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 0;
  flex-wrap: wrap;
}
.sc-cat {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink3);
  font-weight: 700;
}

/* invite modal */
.veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(58, 48, 28, 0.32);
  display: grid;
  place-items: center;
  padding: 18px;
}
#menu {
  place-items: start center;
  padding: 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#menu .ffcard--menu {
  max-height: calc(100svh - 40px);
  overflow-y: auto;
}
body:has(#menu:not(.hidden)) #hud,
body:has(#menu:not(.hidden)) .hud--zoom,
body:has(#menu:not(.hidden)) .global-controls,
body:has(#menu:not(.hidden)) .objdrawer,
body:has(#menu:not(.hidden)) .fp-msg {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.inv-card {
  width: min(460px, 94vw);
  background: var(--paper);
  border: 2.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 34px 100px rgba(58, 48, 28, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.inv-card h3 {
  margin: 12px 16px 4px;
  font-size: 20px;
  font-weight: 900;
}
.inv-card > p {
  margin: 0 16px 10px;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.55;
}
.inv-deal {
  margin: 0 16px 10px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
}
.inv-deal b {
  display: block;
  font-size: 14px;
}
.inv-deal > span {
  font-size: 12px;
  color: var(--ink3);
  font-weight: 700;
}
.inv-pts {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.inv-state {
  margin: 0 16px;
}
.inv-wait {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink2);
  padding: 8px 0;
}
.inv-ok {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--good);
  padding: 8px 0;
}
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.inv-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px 16px;
}

/* ---------- the illustrated SVG theatre (v5.1) ---------- */
.th-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #071319;
}
.hidden-svg {
  display: none;
}
.th-bag {
  transform-origin: 206px 560px;
  animation: breathe 4.4s ease-in-out infinite;
}
@keyframes breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  45% {
    transform: scale(0.94, 0.78);
  }
  60% {
    transform: scale(1.02, 1.04);
  }
}
.th-eyes {
  transform-origin: 840px 394px;
  animation: blink 4.8s infinite;
}
@keyframes blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  94.5% {
    transform: scaleY(0.06);
  }
  97% {
    transform: scaleY(1);
  }
}
.th-nm {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: 2.5px solid #c2549b;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  padding: 4px 13px;
  box-shadow: 0 6px 16px rgba(94, 78, 43, 0.18);
  pointer-events: none;
  user-select: none;
}
.nu-bubble {
  position: absolute;
  left: 73%;
  top: 5.5%;
  transform: translateX(-150%);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 13px;
  padding: 9px 16px;
  white-space: nowrap;
  max-width: 74vw;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  z-index: 6;
  pointer-events: none;
  user-select: none;
}
/* big honest hit target over the surgical field — topmost interactive layer */
.fieldbtn {
  position: absolute;
  left: 32%;
  top: 49%;
  width: 34%;
  height: 27%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
  border-radius: 24px;
}
.fieldbtn:focus-visible {
  outline: 4px dashed var(--sun-deep);
  outline-offset: -6px;
}
.nu-bubble::after {
  content: '';
  position: absolute;
  left: calc(100% - 18px);
  bottom: -7px;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--ink);
  border-bottom: none;
}
@media (max-width: 820px), (max-width: 1024px) and (pointer: coarse), (max-height: 540px) and (pointer: coarse) {
  .anchor.anchor--edge-left span {
    --anchor-label-x: 72px;
  }
  .anchor.anchor--edge-right span {
    --anchor-label-x: -72px;
  }
  .nu-bubble {
    left: max(12px, env(safe-area-inset-left));
    top: max(104px, calc(env(safe-area-inset-top) + 96px));
    transform: none;
    max-width: calc(100vw - 24px);
    white-space: normal;
    font-size: 12.5px;
    padding: 7px 11px;
  }
  .nu-bubble::after {
    left: 28px;
  }
}
/* View-3 cinema: sway runs on the WRAPPER (compositor-only transform) so the
   filtered SVG rasterizes once — animating the SVG itself froze real GPUs */
#v3-scene {
  will-change: transform;
  transform: translateZ(0);
  background: #071319;
}
#view3 #v3-scene {
  animation: swaycam 11s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes swaycam {
  0%,
  100% {
    transform: scale(1.015) translate(0, 0);
  }
  30% {
    transform: scale(1.03) translate(-7px, 3px);
  }
  65% {
    transform: scale(1.022) translate(6px, -3px);
  }
}
.glowtarget {
  animation: dashspin 1.1s linear infinite;
}
@keyframes dashspin {
  to {
    stroke-dashoffset: -48;
  }
}
/* narrator voice modal bits */
.vm-opt {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 16px 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.vm-opt label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  cursor: pointer;
  line-height: 1.45;
}
.vm-opt input {
  margin-top: 2px;
}
.vm-in {
  width: 100%;
  margin-top: 8px;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.v3-dof {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 29;
  opacity: 0;
  transition: opacity 0.45s ease;
  backdrop-filter: blur(5px) saturate(0.6);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.v3-dof.on {
  opacity: 1;
}
.v3-dof.s1 {
  -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 20%, black 44%);
  mask-image: radial-gradient(circle at 50% 52%, transparent 20%, black 44%);
}
.v3-dof.s2 {
  -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 30%, black 56%);
  mask-image: radial-gradient(circle at 50% 52%, transparent 30%, black 56%);
}
.v3-dof.s3 {
  -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 44%, black 74%);
  mask-image: radial-gradient(circle at 50% 52%, transparent 44%, black 74%);
}
.v3-dof.s4 {
  opacity: 0;
}

/* ---------- View 3 overlays ---------- */
#v3-scene {
  position: absolute;
  inset: 0;
}
.v3-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
.v3-flash.go {
  animation: flash 0.45s ease;
}
@keyframes flash {
  0% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}
.v3-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    circle at 50% 52%,
    rgba(245, 242, 233, 0) 9%,
    rgba(243, 238, 226, 0.55) 22%,
    rgba(240, 233, 216, 0.96) 46%
  );
}
.v3-vignette.on {
  opacity: 1;
}
.v3-vignette.on.s1 {
  background: radial-gradient(
    circle at 50% 52%,
    rgba(245, 242, 233, 0) 16%,
    rgba(243, 238, 226, 0.5) 32%,
    rgba(240, 233, 216, 0.94) 58%
  );
}
.v3-vignette.on.s2 {
  background: radial-gradient(
    circle at 50% 52%,
    rgba(245, 242, 233, 0) 26%,
    rgba(243, 238, 226, 0.42) 44%,
    rgba(240, 233, 216, 0.88) 72%
  );
}
.v3-vignette.on.s3 {
  background: radial-gradient(
    circle at 50% 52%,
    rgba(245, 242, 233, 0) 40%,
    rgba(243, 238, 226, 0.3) 62%,
    rgba(240, 233, 216, 0.75) 88%
  );
}
.v3-vignette.on.s4 {
  opacity: 0;
}
#v3-overlays {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
#v3-overlays > * {
  pointer-events: auto;
}
.gcard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  background: var(--paper);
  border: 2.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 34px 100px rgba(58, 48, 28, 0.42);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
}
.gcard h3 {
  margin: 10px 18px 0;
  font-size: 23px;
  font-weight: 900;
}
.gcard p {
  margin: 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink2);
}
.gcard .gbtn {
  align-self: center;
  margin-top: 6px;
}
.gcard--trigger {
  border-color: var(--stress);
}
.gcard--closure {
  top: auto;
  bottom: 5%;
  transform: translateX(-50%);
  border-color: var(--good);
}
.gcard--complete {
  border-color: var(--sun);
  text-align: center;
}
.comp-star {
  font-size: 44px;
  margin-top: 14px;
}
.taskcard {
  position: absolute;
  left: 18px;
  top: 84px;
  width: min(300px, 86vw);
  background: #fff;
  border: 2.5px solid var(--sun-deep);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 46px rgba(94, 78, 43, 0.25);
  padding-bottom: 12px;
}
.taskcard h4 {
  margin: 9px 14px 2px;
  font-size: 16.5px;
  font-weight: 900;
}
.taskcard p {
  margin: 0 14px 8px;
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.5;
}
.anchorline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.anchorline .bx {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 2px solid var(--ink3);
  flex: none;
}
.anchorline.done .bx {
  background: var(--good);
  border-color: var(--good);
}
.anchorline.done b {
  color: var(--ink3);
  text-decoration: line-through;
}
.anchorline .ad {
  width: 100%;
  padding-left: 24px;
  font-size: 11px;
  color: var(--good);
  font-weight: 800;
}
.task-meter {
  height: 9px;
  border-radius: 6px;
  background: var(--paper-deep);
  border: 2px solid var(--line);
  margin: 8px 14px 0;
  overflow: hidden;
}
.task-meter i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sun), var(--good));
  transition: width 0.3s ease;
}
body.fp-startle-anchor-phase #v3-overlays > .taskcard {
  display: none !important;
  pointer-events: none;
}
.anchor {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 55;
}
.anchor i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px dashed var(--sun-deep);
  background: rgba(245, 184, 64, 0.18);
  animation: anpulse 1.4s infinite;
}
@keyframes anpulse {
  50% {
    transform: scale(1.14);
  }
}
.anchor span {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--sun-deep);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  padding: 3px 11px;
  transform: translate(var(--anchor-label-x, 0), var(--anchor-label-y, 0));
  white-space: nowrap;
}
.anchor.anchor--edge-left span {
  --anchor-label-x: 42px;
}
.anchor.anchor--edge-right span {
  --anchor-label-x: -42px;
}
.anchor.anchor--bottom-safe {
  --anchor-label-y: -72px;
}
.anchor.done i {
  border: 4px solid var(--good);
  background: var(--good-soft);
  animation: none;
}
.anchor.done i::after {
  content: '✓';
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--good);
  font-size: 24px;
  font-weight: 900;
}
.anchor.done span {
  border-color: var(--good);
  color: var(--good);
}

/* ---------- splash / end ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(900px 540px at 50% 28%, #fffdf6, var(--paper-deep) 75%);
  padding: 18px;
}
.spcard {
  width: min(620px, 94vw);
  background: #fff;
  border: 2.5px solid var(--line);
  border-radius: 26px;
  padding: 28px 30px;
  text-align: center;
  box-shadow: 0 30px 90px rgba(94, 78, 43, 0.28);
  max-height: 94vh;
  overflow: auto;
}
.spcard .logo {
  font-size: 23px;
  font-weight: 900;
}
.spcard .logo b {
  color: var(--brand-deep);
}
.spcard .logo-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--ink3);
}
.spcard h1 {
  font-size: 26px;
  font-weight: 900;
  margin: 10px 0 6px;
  letter-spacing: -0.4px;
}
.spcard p {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.6;
  margin: 0 0 8px;
}
.spcard .splash-thread-note {
  font-size: 13px;
  color: var(--ink3);
}
.spcard .end-summary-copy {
  margin-top: 8px;
}
.spcard .end-flip-copy {
  font-size: 12.5px;
}
.end-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.spcard .keys {
  display: flex;
  gap: 13px;
  justify-content: center;
  margin: 12px 0 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink2);
}
.spcard .syn {
  font-size: 10.5px;
  color: var(--ink3);
  margin-top: 13px;
  line-height: 1.5;
}
.viewchips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}
.viewchips .chip {
  font-size: 11.5px;
}
@media (max-width: 560px) {
  .splash {
    padding: 12px;
  }
  .spcard {
    width: min(560px, calc(100vw - 24px));
    padding: 28px 28px;
    border-radius: 22px;
  }
  .spcard .logo {
    font-size: 23px;
    line-height: 1.15;
  }
  .spcard .logo-kicker {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.14;
    letter-spacing: 0.04em;
  }
  .spcard h1 {
    font-size: 26px;
    line-height: 1.28;
    letter-spacing: 0;
  }
  .spcard p,
  .spcard .splash-thread-note {
    font-size: 14px;
    line-height: 1.52;
  }
  .viewchips {
    gap: 8px;
    margin: 8px 0 4px;
  }
  .viewchips .chip {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.12;
    white-space: normal;
  }
  .spcard .keys {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 12px 0 16px;
    font-size: 13.5px;
    line-height: 1.35;
  }
  .spcard .keys > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .spcard .keys .key {
    min-height: 20px;
    padding: 1px 7px;
    font-size: 13px;
    line-height: 1.08;
  }
  .spcard .syn {
    max-width: 31rem;
    margin-inline: auto;
    font-size: 13px;
    line-height: 1.42;
  }
  .gbtn--splash-start {
    min-height: 48px;
    font-size: 16px;
  }
}
.guided-demo {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 18px;
  pointer-events: none;
}
.guided-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 45, 58, 0.08), rgba(42, 45, 58, 0.26));
}
body:has(#guided-demo-onboarding:not(.hidden)) #hud,
body:has(#guided-demo-onboarding:not(.hidden)) .hud--zoom,
body:has(#guided-demo-onboarding:not(.hidden)) .global-controls,
body:has(#guided-demo-onboarding:not(.hidden)) .objdrawer,
body:has(#guided-demo-onboarding:not(.hidden)) .fp-msg {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.guided-demo-card {
  position: relative;
  width: min(520px, calc(100vw - 28px));
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(42, 45, 58, 0.22);
  padding: 17px 18px 16px;
  pointer-events: auto;
}
.guided-demo-kicker {
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.guided-demo-card h2 {
  margin: 5px 0 8px;
  font-size: 20px;
  line-height: 1.2;
}
.guided-demo-card p {
  margin: 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.5;
}
.guided-demo-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
}
#guided-demo-step-label {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 900;
}
.guided-demo-replay {
  flex: none;
}
.guided-demo-next,
.guided-demo-skip {
  min-width: 104px;
}
@media (max-width: 560px) {
  .guided-demo {
    padding: 12px;
  }
  .guided-demo-card {
    margin-bottom: 8px;
    padding: 15px;
  }
  .guided-demo-card h2 {
    font-size: 18px;
  }
  .guided-demo-foot {
    display: grid;
    grid-template-columns: 42px 1fr 1fr;
  }
  #guided-demo-step-label,
  .guided-demo-foot .flex-spacer {
    display: none;
  }
  .guided-demo-replay {
    width: 42px;
    height: 42px;
  }
  .guided-demo-next,
  .guided-demo-skip {
    min-width: 0;
    width: 100%;
  }
}
.buildtag {
  font-size: 10px;
  cursor: default;
}
.charselect {
  margin: 12px auto 14px;
  text-align: left;
}
.charselect-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--ink);
}
.charselect-h b {
  font-size: 13px;
  font-weight: 900;
}
.charselect-h span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink3);
}
.char-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.char-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 6px 8px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 12px rgba(94, 78, 43, 0.08);
}
.char-option:hover,
.char-option:focus-visible {
  border-color: var(--brand);
  outline: none;
}
.char-option.is-selected {
  border-color: var(--brand-deep);
  background: #edf8f4;
  box-shadow: 0 0 0 3px rgba(31, 160, 140, 0.18);
}
.char-thumb {
  width: 38px;
  height: 48px;
  border-radius: 7px;
  background-repeat: no-repeat;
  background-color: #eef2ed;
  background-clip: padding-box;
  border: 1px solid rgba(42, 45, 58, 0.16);
}
.char-copy {
  min-width: 0;
}
.char-name,
.char-role {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.char-name {
  font-size: 11.5px;
  font-weight: 900;
}
.char-role {
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 900;
  color: var(--ink3);
  text-transform: uppercase;
}
@media (max-width: 680px) {
  .char-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .char-option {
    grid-template-columns: 38px minmax(0, 1fr);
  }
}
.statrow {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 12px 0;
  flex-wrap: wrap;
}
.st {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 9px 16px;
}
.st b {
  font-size: 20px;
  font-weight: 900;
  display: block;
}
.st span {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--ink3);
  text-transform: uppercase;
}

/* ---------- v5.2 startle upgrades ---------- */
#view3.shake {
  animation: bigshake 0.6s ease;
}
@keyframes bigshake {
  0% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(-13px, 7px);
  }
  24% {
    transform: translate(11px, -6px);
  }
  38% {
    transform: translate(-8px, 5px);
  }
  52% {
    transform: translate(7px, -4px);
  }
  68% {
    transform: translate(-4px, 2px);
  }
  84% {
    transform: translate(2px, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.v3-vignette.on.s00 {
  background: radial-gradient(
    circle at 50% 52%,
    rgba(245, 242, 233, 0) 6%,
    rgba(243, 238, 226, 0.7) 15%,
    rgba(240, 233, 216, 0.98) 36%
  );
}
.fieldhint {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.96);
  border: 2.5px solid var(--sun-deep);
  border-radius: 18px;
  padding: 10px 18px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 28px rgba(94, 78, 43, 0.25);
  max-width: min(720px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  line-height: 1.22;
}
.fieldhint-copy {
  min-width: 0;
}
.fieldhint b {
  color: var(--sun-deep);
  margin-left: 6px;
  white-space: nowrap;
}
.handslock {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translateX(-50%);
  background: rgba(42, 45, 58, 0.93);
  color: #fff;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}
.hl-dots {
  display: inline-flex;
  gap: 5px;
}
.hl-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ae5bbf;
  animation: ty 1s infinite;
}
.hl-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.hl-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ty {
  30% {
    transform: translateY(-4px);
  }
}
.gcard--breath {
  border-color: var(--stress);
  text-align: center;
  align-items: center;
}
.gcard--breath p {
  text-align: left;
}
.breathbtn {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: none;
  background: #fbf7ff;
  margin: 4px auto 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(122, 82, 150, 0.25);
  touch-action: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.breathbtn:active {
  transform: scale(0.97);
}
.breathbtn.is-inhaling {
  background: #f6edff;
  box-shadow: 0 10px 28px rgba(122, 82, 150, 0.32);
}
.breathbtn.is-ready {
  background: #fff8fb;
  box-shadow: 0 12px 32px rgba(223, 92, 142, 0.28);
}
.breathbtn.is-exhaling {
  background: #f3fbff;
  box-shadow: 0 10px 30px rgba(62, 159, 224, 0.28);
  cursor: default;
}
.breathbtn svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#breath-fill {
  transform-origin: 60px 60px;
  transition: opacity .18s ease, fill .18s ease;
}
.breathbtn.is-inhaling #breath-fill {
  opacity: .24;
}
.breathbtn.is-ready #breath-fill {
  fill: #df5c8e;
  opacity: .2;
}
.breathbtn.is-exhaling #breath-fill {
  fill: #3e9fe0;
  opacity: .16;
}
.breathbtn span {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 900;
  color: var(--stress);
  max-width: 104px;
  line-height: 1.35;
}
.breath-hint {
  font-size: 11.5px !important;
  color: var(--ink3) !important;
  font-weight: 800;
}
.brainstack {
  position: absolute;
  right: 18px;
  top: 84px;
  z-index: 58;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(330px, 86vw);
  pointer-events: none;
}
.brainnote {
  background: #fff;
  border: 2.5px solid var(--stress);
  border-radius: 15px;
  padding: 11px 14px;
  box-shadow: 0 14px 36px rgba(122, 82, 150, 0.28);
  animation: notein 0.3s ease;
  transition:
    opacity 0.6s,
    transform 0.6s;
}
.brainnote b {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stress);
  margin-bottom: 3px;
}
.brainnote span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink2);
  font-weight: 600;
}
.brainnote.fade {
  opacity: 0;
  transform: translateX(16px);
}
@keyframes notein {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.feltline {
  margin: 0 18px;
  background: #fff8e8;
  border: 2px dashed var(--sun-deep);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink2);
  text-align: left;
}
.feltline b {
  color: var(--sun-deep);
}
.panel--brain {
  border-color: rgba(174, 91, 191, 0.5);
}
.braindex {
  display: flex;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 2px dashed var(--paper-deep);
  font-size: 12px;
  line-height: 1.5;
}
.braindex:last-child {
  border-bottom: none;
}
.braindex b {
  flex: none;
  color: var(--stress);
  font-weight: 900;
  min-width: 86px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 1px;
}
.braindex span {
  color: var(--ink2);
  font-weight: 600;
}

@media (max-width: 820px), (max-width: 1024px) and (pointer: coarse), (max-height: 540px) and (pointer: coarse) {
  body.fp-view2-active #view2 {
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .v2-panels {
    grid-template-columns: 1fr;
  }
  #view2:has(.ffcard--done) .panel--brain .braindex {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  #view2:has(.ffcard--done) .panel--brain .braindex b {
    min-width: 0;
    padding-top: 0;
  }
  #view2:has(.ffcard--done) .panel--brain .braindex span {
    min-width: 0;
  }
  .v2-scenewrap {
    height: 36%;
    min-height: 230px;
  }
  .hud--tl {
    max-width: calc(100vw - 120px);
  }
  .hud--zoom {
    left: 10px;
    bottom: calc(62px + env(safe-area-inset-bottom));
    gap: 5px;
  }
  .zoomctl {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .zoomctl--reset {
    min-width: 54px;
    padding: 0 8px;
    font-size: 13px;
  }
  .global-controls {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    justify-content: flex-end;
    gap: 6px;
  }
  .global-controls .iconb {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0 10px;
    font-size: 14px;
  }
  .global-controls .iconb.is-off::after {
    left: auto;
    right: 9px;
    top: 9px;
    width: 18px;
  }
  #view3 .anchor span {
    font-size: 13px;
    line-height: 1.25;
    padding: 5px 11px;
  }
  #view3 .nu-bubble {
    background: rgba(42, 45, 58, 0.94);
    font-size: 13.5px;
    line-height: 1.35;
    padding: 9px 13px;
    z-index: 57;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.36);
  }
  #view3 .breathbtn span {
    font-size: 14px;
    line-height: 1.3;
  }
  #view3 .breath-hint {
    font-size: 13px !important;
    line-height: 1.35;
  }
  #view3 .brainnote {
    padding: 12px 14px;
  }
  #view3 .brainnote b {
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  #view3 .brainnote span {
    font-size: 14px;
    line-height: 1.45;
  }
  #view3 .gcard .gbtn {
    min-height: 44px;
  }
  .fieldhint {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(64px + env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    max-width: none;
    min-height: 56px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    text-align: left;
    border-radius: 16px;
  }
  .fieldhint-copy {
    display: block;
    font-size: 14px;
    line-height: 1.32;
  }
  .fieldhint b {
    justify-self: end;
    margin-left: 0;
    font-size: 14px;
    line-height: 1.2;
  }
  #view3 .gcard--complete .feltline {
    font-size: 13.5px;
    line-height: 1.45;
  }
  #view3 .gcard--complete .feltline b {
    font-size: 13.5px;
    line-height: 1.2;
  }
  #view3 .sc-band.sc-band--lg {
    font-size: 13px;
    line-height: 1.14;
    letter-spacing: 0.04em;
  }
  #mutebtn,
  #ambientbtn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 138px;
    font-size: 14px;
  }
  .splash #end-stats .st span {
    font-size: 12.5px;
    line-height: 1.15;
  }
  .hintbar {
    display: none;
  }
  .gcard--closure {
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .taskcard {
    left: 8px;
    right: auto;
    top: max(6px, env(safe-area-inset-top));
    width: min(96px, calc(100vw - 16px));
    max-height: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    padding: 5px 8px 6px;
    border-radius: 999px;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 6px 18px rgba(42, 45, 58, 0.14);
  }
  #v3-overlays > .taskcard {
    display: none !important;
    pointer-events: none;
  }
  .taskcard .sc-band {
    display: none;
  }
  .taskcard h4 {
    margin: 0;
    font-size: 0;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .taskcard h4::after {
    content: "Reset";
    font-size: 11px;
    line-height: 1.05;
  }
  .taskcard p {
    display: none;
  }
  .taskcard .anchorline {
    display: none;
  }
  .anchorline .ad {
    display: none;
  }
  .task-meter {
    grid-column: 1 / -1;
    margin: 0;
    height: 4px;
    border-width: 1px;
  }
  .th-monitor {
    min-width: 120px;
  }
}

@media (max-width: 360px) {
  #mutebtn,
  #ambientbtn {
    flex: 0 0 42px;
    min-width: 42px;
    width: 42px;
    padding: 0;
    font-size: 0;
  }
  #mutebtn::before {
    content: '🔊';
    font-size: 16px;
  }
  #mutebtn.is-off::before {
    content: '🔇';
  }
  #ambientbtn::before {
    content: '🏥';
    font-size: 16px;
  }
}

@media (max-width: 1360px), (max-height: 760px) {
  .taskcard {
    left: 8px;
    right: auto;
    top: max(6px, env(safe-area-inset-top));
    width: min(96px, calc(100vw - 16px));
    max-height: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    padding: 5px 8px 6px;
    border-radius: 999px;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 6px 18px rgba(42, 45, 58, 0.14);
  }
  #v3-overlays > .taskcard {
    display: none !important;
    pointer-events: none;
  }
  .taskcard .sc-band,
  .taskcard p,
  .taskcard .anchorline {
    display: none;
  }
  .taskcard h4 {
    margin: 0;
    font-size: 0;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .taskcard h4::after {
    content: "Reset";
    font-size: 11px;
    line-height: 1.05;
  }
  .task-meter {
    grid-column: 1 / -1;
    margin: 0;
    height: 4px;
    border-width: 1px;
  }
}

@media (pointer: coarse) {
  .taskcard {
    left: 8px;
    right: auto;
    top: max(6px, env(safe-area-inset-top));
    width: min(96px, calc(100vw - 16px));
    max-height: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    padding: 5px 8px 6px;
    border-radius: 999px;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 6px 18px rgba(42, 45, 58, 0.14);
  }
  #v3-overlays > .taskcard {
    display: none !important;
    pointer-events: none;
  }
  .taskcard .sc-band,
  .taskcard p,
  .taskcard .anchorline {
    display: none;
  }
  .taskcard h4 {
    margin: 0;
    font-size: 0;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .taskcard h4::after {
    content: "Reset";
    font-size: 11px;
    line-height: 1.05;
  }
  .task-meter {
    grid-column: 1 / -1;
    margin: 0;
    height: 4px;
    border-width: 1px;
  }
}

/* ---------- the always-on EXPLAINER panel ---------- */
.explainer {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 65;
  width: min(330px, 92vw);
  background: rgba(255, 255, 255, 0.97);
  border: 2.5px solid var(--stress);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(94, 78, 43, 0.22);
  overflow: hidden;
}
.explainer.min .exp-body {
  display: none;
}
.exp-top {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f0fa;
  color: var(--stress);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.07em;
  padding: 8px 12px;
  border-bottom: 2px solid #efe2f5;
}
.exp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stress);
  box-shadow: 0 0 0 0 rgba(174, 91, 191, 0.5);
  animation: expdot 2s infinite;
}
@keyframes expdot {
  0% {
    box-shadow: 0 0 0 0 rgba(174, 91, 191, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(174, 91, 191, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(174, 91, 191, 0);
  }
}
.exp-min {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid #e3d3ec;
  background: #fff;
  color: var(--stress);
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}
.exp-body {
  padding: 11px 13px;
}
.exp-body b {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 4px;
}
.exp-body span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink2);
  font-weight: 600;
}
.explainer.pulse {
  animation: exppulse 0.5s ease;
}
@keyframes exppulse {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.02);
    box-shadow: 0 20px 54px rgba(174, 91, 191, 0.4);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- room menu (lessons / resources) ---------- */
.ffcard {
  width: min(480px, 94vw);
  background: var(--paper);
  border: 2.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 34px 100px rgba(58, 48, 28, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow-y: auto;
}
.ffcard h3 {
  margin: 12px 18px 4px;
  font-size: 21px;
  font-weight: 900;
}
.ffcard > p {
  margin: 0 18px 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink2);
}
.scenario-entry-card {
  width: min(760px, 94vw);
  border-color: rgba(39, 50, 58, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 240, 0.98)),
    var(--paper);
}
.scenario-entry-card--complaint {
  border-color: rgba(39, 50, 58, 0.26);
}
.scenario-entry-card--sensitive {
  border-color: rgba(125, 138, 160, 0.32);
}
.scenario-entry-card .scenario-stage {
  margin: 12px 16px 0;
}
.scenario-entry-copy {
  display: grid;
  gap: 6px;
  padding: 14px 18px 6px;
  text-align: left;
}
.scenario-entry-kicker {
  color: #087f72;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.scenario-entry-card--complaint .scenario-entry-kicker {
  color: #27323a;
}
.scenario-entry-copy h3 {
  margin: 0;
  color: #202421;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 950;
  line-height: 1.05;
}
.scenario-entry-body {
  display: grid;
  gap: 8px;
}
.scenario-entry-body p {
  margin: 0;
  color: #38423d;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.55;
}
.scenario-entry-boundary {
  display: grid;
  gap: 4px;
  margin: 6px 18px 8px;
  padding: 11px 13px;
  border: 2px solid rgba(8, 127, 114, 0.18);
  border-left: 6px solid #087f72;
  border-radius: 10px;
  background: #f5fbf8;
  text-align: left;
}
.scenario-entry-card--complaint .scenario-entry-boundary {
  border-color: rgba(39, 50, 58, 0.18);
  border-left-color: #27323a;
  background: #f7f9fa;
}
.scenario-entry-card--sensitive .scenario-entry-boundary {
  border-color: rgba(125, 138, 160, 0.24);
  border-left-color: #7d8aa0;
  background: #f8fafb;
}
.scenario-entry-boundary b {
  color: #202421;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scenario-entry-boundary span {
  color: #38423d;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}
.scenario-entry-card .scenario-support-strip,
.scenario-entry-card .after-call-framework-preview {
  margin: 8px 18px 0;
}
.scenario-entry-card .scenario-actions-row {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 10px 16px 0;
  padding: 10px 0 2px;
  border-top: 1px solid rgba(39, 50, 58, 0.08);
  background:
    linear-gradient(180deg, rgba(250, 247, 240, 0), rgba(250, 247, 240, 0.96) 34%),
    rgba(250, 247, 240, 0.96);
}
.scenario-entry-card .scenario-actions-row .gbtn {
  min-height: 42px;
}
.scenario-entry-quote {
  align-self: stretch;
  max-width: none;
  margin: 8px 18px 0;
}
.ffcard--done {
  text-align: center;
  border-color: #df5c8e;
}
.ffcard--done .comp-star {
  font-size: 42px;
  margin-top: 14px;
}
.complaint-score-strip {
  display: grid;
  gap: 3px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 2px solid rgba(8, 127, 114, 0.18);
  border-radius: 12px;
  background: rgba(8, 127, 114, 0.07);
  text-align: left;
}
.complaint-score-strip b {
  color: #075f55;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
}
.complaint-score-strip span {
  color: #23423e;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}
.scenario-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  margin: 12px 16px 6px;
  padding: 10px 12px;
  border: 2px solid rgba(31, 160, 140, 0.22);
  border-left: 5px solid #087f72;
  border-radius: 12px;
  background: #f8fbf8;
  color: #1e2d2a;
  text-align: left;
}
.ff-convo > .scenario-stage {
  margin: 0;
}
.scenario-stage-eyebrow {
  grid-column: 1 / -1;
  color: #075f55;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.scenario-stage b {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}
.scenario-stage span {
  display: block;
  margin-top: 2px;
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}
.scenario-stage em {
  align-self: center;
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(31, 160, 140, 0.12);
  color: #075f55;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.scenario-stage--mark {
  border-color: rgba(223, 92, 142, 0.22);
  border-left-color: #df5c8e;
  background: #fff7fa;
}
.scenario-stage--mark .scenario-stage-eyebrow,
.scenario-stage--mark em {
  color: #9b2f62;
}
.scenario-stage--mark em {
  background: rgba(223, 92, 142, 0.12);
}
.scenario-stage--complaint {
  border-left-color: #27323a;
  background: #f7f9fa;
}
.scenario-stage--complaint .scenario-stage-eyebrow,
.scenario-stage--complaint em {
  color: #27323a;
}
.scenario-stage--complaint em {
  background: rgba(39, 50, 58, 0.1);
}
.scenario-stage--sensitive {
  border-color: rgba(39, 50, 58, 0.2);
  border-left-color: #7d8aa0;
  background: #f8fafb;
}
.scenario-stage--sensitive .scenario-stage-eyebrow,
.scenario-stage--sensitive em {
  color: #435063;
}
.scenario-stage--sensitive em {
  background: rgba(125, 138, 160, 0.14);
}
.scenario-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 16px 0;
}
.scenario-actions-row--equal .gbtn {
  flex: 1 1 190px;
}
.scenario-safe-exit {
  border-color: rgba(39, 50, 58, 0.26);
  background: #fff;
  color: #27323a;
}
.scenario-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
.scenario-choice-grid .ff-opt {
  margin-bottom: 0;
}
#view2:has(.complaint-photo-scene) .v2-scenewrap {
  height: clamp(190px, 30svh, 260px);
  min-height: 0;
}
#view2:has(.complaint-photo-scene):has(.scenario-entry-card) .v2-scenewrap {
  height: clamp(280px, 42svh, 420px);
}
.complaint-console {
  max-width: 840px;
  max-height: calc(100svh - 116px);
  overflow: auto;
}
.complaint-console > * {
  flex: 0 0 auto;
}
.complaint-choice-panel {
  border-color: rgba(39, 50, 58, 0.2);
  background: #fbfdfc;
}
.complaint-response-card {
  display: grid;
  gap: 5px;
  border-color: rgba(39, 50, 58, 0.16);
  background: #fff;
}
.complaint-response-card:hover:not(:disabled),
.complaint-response-card:focus-visible {
  border-color: #27323a;
  box-shadow: 0 8px 20px rgba(39, 50, 58, 0.12);
}
.complaint-response-card.is-risk {
  border-color: rgba(212, 86, 78, 0.32);
}
.complaint-response-card.is-picked {
  border-color: #087f72;
  background: #eef8f5;
}
.complaint-response-card.is-picked:disabled {
  opacity: 1;
  color: var(--ink);
}
.complaint-response-card.is-picked.is-feedback-warn {
  border-color: rgba(212, 86, 78, 0.48);
  background: #fff6f4;
}
.complaint-response-card.is-picked.is-feedback-watch {
  border-color: rgba(184, 126, 45, 0.42);
  background: #fffaf0;
}
.complaint-response-card.is-dimmed {
  opacity: 0.45;
}
.complaint-response-meta {
  color: #27323a;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.complaint-response-card.is-risk .complaint-response-meta {
  color: #9a342b;
}
.complaint-choice-feedback {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  padding: 8px 10px;
  border-left: 4px solid #087f72;
  border-radius: 10px;
  background: rgba(8, 127, 114, 0.08);
}
.complaint-choice-feedback-label {
  color: #075f55;
  font-size: 11.5px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.15;
}
.complaint-choice-feedback-meta {
  color: #3f6660;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.18;
  text-transform: uppercase;
}
.complaint-choice-feedback--warn {
  border-left-color: #c64c43;
  background: rgba(212, 86, 78, 0.08);
}
.complaint-choice-feedback--warn .complaint-choice-feedback-label,
.complaint-choice-feedback--warn .complaint-choice-feedback-meta,
.complaint-choice-feedback--warn .complaint-rationale {
  color: #8f332d;
}
.complaint-choice-feedback--watch {
  border-left-color: #b87e2d;
  background: rgba(245, 184, 64, 0.12);
}
.complaint-choice-feedback--watch .complaint-choice-feedback-label,
.complaint-choice-feedback--watch .complaint-choice-feedback-meta,
.complaint-choice-feedback--watch .complaint-rationale {
  color: #765018;
}
.complaint-rationale {
  display: block;
  color: #075f55;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
}
.scenario-support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 2px solid rgba(125, 138, 160, 0.22);
  border-radius: 12px;
  background: #f8fafb;
}
.scenario-support-strip span {
  color: #435063;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scenario-support-strip .linkbtn {
  border: 0;
  background: none;
  color: #075f55;
  font-size: 12px;
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}
#view2:has(.after-call-scene) .v2-scenewrap {
  height: clamp(190px, 30svh, 260px);
  min-height: 0;
}
#view2:has(.after-call-scene):has(.scenario-entry-card) .v2-scenewrap {
  height: clamp(280px, 42svh, 420px);
}
.after-call-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #1f2627;
}
.after-call-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.after-call-scene-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 18, 20, 0.68) 0%, rgba(8, 18, 20, 0.18) 44%, rgba(8, 18, 20, 0.05) 100%),
    radial-gradient(circle at 68% 42%, rgba(255, 246, 210, 0.22), rgba(255, 246, 210, 0) 34%);
}
.after-call-scene-caption,
.after-call-scene-objective {
  position: absolute;
  left: 18px;
  max-width: min(360px, calc(100% - 36px));
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 32px rgba(6, 15, 17, 0.18);
  backdrop-filter: blur(10px);
  color: #223036;
}
.after-call-scene-caption {
  top: 18px;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 10px;
}
.after-call-scene-caption span,
.after-call-scene-objective span,
.after-call-kicker,
.news-response-meta {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #087f72;
}
.after-call-scene-caption b {
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.05;
}
.after-call-scene-caption em,
.after-call-scene-objective b {
  color: #4a5964;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}
.after-call-scene-objective {
  bottom: 18px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 8px;
}
.after-call-console {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-column: 1 / -1;
  width: min(1180px, 100%);
  max-height: calc(100svh - 116px);
  margin: 0 auto;
  overflow: auto;
}
.after-call-framework-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 5px;
}
.after-call-framework-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 min(172px, 34vw);
  min-height: 54px;
  padding: 9px 11px;
  border: 2px solid rgba(67, 80, 99, 0.2);
  border-radius: 8px;
  background: #fff;
  color: #27323a;
  text-align: left;
  cursor: pointer;
}
.after-call-framework-tab.is-active {
  border-color: #168b7d;
  background: #eef8f5;
  box-shadow: inset 0 0 0 1px rgba(22, 139, 125, 0.18), 0 8px 20px rgba(8, 127, 114, 0.12);
}
.after-call-framework-tab span {
  color: #087f72;
  font-size: 11px;
  font-weight: 950;
}
.after-call-framework-tab b {
  font-size: 12px;
  line-height: 1.25;
}
.after-call-console-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(260px, 0.92fr) minmax(380px, 1.36fr);
  gap: 12px;
  min-height: 0;
  overflow: visible;
}
.after-call-framework-card,
.after-call-dialogue-panel,
.after-call-choice-panel {
  min-height: 0;
  border: 2px solid rgba(217, 203, 187, 0.78);
  border-radius: 12px;
  background: rgba(255, 252, 246, 0.94);
  box-shadow: 0 12px 26px rgba(94, 78, 43, 0.1);
}
.after-call-framework-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 13px;
}
.after-call-framework-card h4 {
  margin: 0;
  color: #253238;
  font-size: 18px;
  line-height: 1.12;
}
.after-call-framework-card p,
.after-call-source span,
.after-call-focus span {
  margin: 0;
  color: #536270;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.42;
}
.after-call-source,
.after-call-focus,
.after-call-selected-response {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(217, 203, 187, 0.8);
}
.after-call-source b,
.after-call-focus b,
.after-call-selected-response b {
  color: #27323a;
  font-size: 12.5px;
  font-weight: 950;
}
.after-call-selected-response {
  border-color: rgba(8, 127, 114, 0.22);
  background: #f7fbfa;
}
.after-call-selected-response--empty {
  background: #f7f5ef;
  border-style: dashed;
}
.after-call-selected-response > span {
  color: #087f72;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.after-call-selected-response--warn > span {
  color: #a63b35;
}
.after-call-selected-response--watch > span {
  color: #9a641b;
}
.after-call-selected-response em,
.after-call-selected-response p {
  margin: 0;
  color: #536270;
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.36;
}
.after-call-selected-mobile {
  display: none;
}
.after-call-pillars {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.after-call-pillars li {
  padding: 7px 8px;
  border-radius: 7px;
  background: #f4f7f6;
  color: #32434a;
  font-size: 11.5px;
  font-weight: 850;
}
.after-call-objective {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #27323a;
  color: #fff;
}
.after-call-objective span {
  color: #9be0d5;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.after-call-objective b {
  font-size: 12.5px;
  line-height: 1.35;
}
.after-call-dialogue-panel {
  display: grid;
  grid-template-rows: minmax(120px, 1fr) auto;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
}
.after-call-dialogue-panel--video {
  grid-template-rows: auto minmax(84px, 0.75fr) auto;
  align-content: start;
}
.after-call-video-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(217, 203, 187, 0.82);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 248, 0.94)),
    #fff;
}
.after-call-video-frame {
  position: relative;
  width: min(100%, 210px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 2px solid rgba(36, 47, 54, 0.12);
  border-radius: 16px;
  background: #151a1f;
  box-shadow: 0 14px 34px rgba(36, 47, 54, 0.18);
}
.after-call-sarah-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #151a1f;
}
.after-call-video-status {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #243139;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.after-call-video-caption {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: center;
}
.after-call-video-caption span {
  color: #9b3b5d;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.after-call-video-caption b {
  color: #33414a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
}
.after-call-chat {
  max-height: none;
  min-height: 0;
  overflow: auto;
}
.after-call-current {
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border-left: 4px solid #df5c8e;
  border-radius: 8px;
  background: #fff;
}
.after-call-current span,
.after-call-choice-head span {
  color: #9b3b5d;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.after-call-current p {
  margin: 0;
  color: #27323a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.after-call-choice-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 12px;
  overflow: visible;
}
.after-call-choice-head {
  display: grid;
  gap: 4px;
}
.after-call-choice-head h4 {
  margin: 0;
  color: #243139;
  font-size: 16px;
  line-height: 1.25;
}
.after-call-choice-focus {
  margin: 0;
  color: #536270;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}
.after-call-safety-check {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 2px solid rgba(39, 50, 58, 0.16);
  border-left: 5px solid #27323a;
  border-radius: 9px;
  background: #f8fafb;
}
.after-call-safety-check b {
  color: #27323a;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.after-call-safety-check span {
  color: #435063;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}
.after-call-response-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-height: 0;
  overflow: visible;
  padding-right: 2px;
}
.news-response-card {
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 128px;
  padding: 11px 12px;
  border: 2px solid rgba(8, 127, 114, 0.22);
  border-radius: 9px;
  background: #fff;
  color: #27323a;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.news-response-card:hover,
.news-response-card:focus-visible {
  border-color: #087f72;
  box-shadow: 0 10px 22px rgba(8, 127, 114, 0.12);
  transform: translateY(-1px);
}
.news-response-card.is-selected {
  border-color: #087f72;
  background: #eef8f5;
  box-shadow: 0 12px 28px rgba(8, 127, 114, 0.14);
}
.news-response-card.is-risk {
  border-color: rgba(190, 71, 77, 0.25);
  background: #fff8f7;
}
.news-response-card.is-picked {
  border-color: #087f72;
  background: #eef8f5;
  box-shadow: 0 12px 28px rgba(8, 127, 114, 0.14);
}
.news-response-card.is-picked:disabled {
  opacity: 1;
  color: #27323a;
}
.news-response-card.is-picked.is-feedback-warn {
  border-color: rgba(190, 71, 77, 0.48);
  background: #fff6f4;
}
.news-response-card.is-picked.is-feedback-watch {
  border-color: rgba(184, 126, 45, 0.42);
  background: #fffaf0;
}
.news-response-card.is-dimmed {
  opacity: 0.45;
}
.after-call-choice-panel.is-video-locked .after-call-response-grid {
  opacity: 0.42;
  pointer-events: none;
}
.after-call-choice-panel.is-video-locked .after-call-choice-head::after {
  content: "Choices unlock after Sarah finishes.";
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff4e0;
  color: #704a10;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.after-call-framework-tab:disabled,
.news-response-card:disabled {
  cursor: not-allowed;
}
.news-response-card b {
  font-size: 14.2px;
  font-weight: 900;
  line-height: 1.28;
}
.news-response-card > span:not(.news-response-meta) {
  color: #5f6b74;
  font-size: 12.4px;
  font-weight: 850;
  line-height: 1.32;
}
.signrow--support-route {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.signrow__name {
  font-size: 13px;
}
.signrow__contact {
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 800;
}
.signrow__note {
  color: var(--ink3);
  font-size: 11px;
}
.news-fork-note {
  color: var(--ink3);
  margin: 12px 2px 0;
  text-align: center;
  font-size: 12px;
}
.news-fork-support {
  text-align: center;
  margin-top: 8px;
}
.news-fork-support .linkbtn {
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
}
.after-call-submit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.after-call-submit-row .gbtn {
  flex: 0 0 auto;
}
.after-call-submit-row .gbtn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.6);
  opacity: 0.55;
}
.after-call-submit-row span {
  min-width: 0;
  color: #536270;
  font-size: 11.6px;
  font-weight: 850;
  line-height: 1.3;
}
.news-rationale {
  display: block;
  color: #586776;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 720;
  line-height: 1.38;
}
.news-choice-feedback {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(8, 127, 114, 0.16);
}
.news-choice-feedback-label {
  color: #087f72;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.news-choice-feedback--warn .news-choice-feedback-label {
  color: #a63b35;
}
.news-choice-feedback--watch .news-choice-feedback-label {
  color: #9a641b;
}
.news-choice-feedback-text {
  color: #3f4d57;
  font-size: 11.4px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.34;
}
.after-call-framework-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 16px;
}
.after-call-framework-chip {
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef8f5;
  color: #075f55;
  font-size: 11px;
  font-weight: 950;
}

@media (min-width: 821px) {
  body.fp-view2-active:has(.scenario-entry-card) .global-controls {
    left: auto;
    right: 14px;
  }
  body.fp-message-rail-open.fp-view2-active:has(.scenario-entry-card) .global-controls {
    right: calc(var(--fp-message-rail-width) + 14px);
  }
  body.fp-view2-active:has(.scenario-entry-card) .global-controls .buildtag {
    display: none;
  }
  body.fp-message-rail-open #view2:has(.complaint-photo-scene):has(.scenario-entry-card) {
    right: var(--fp-message-rail-width);
  }
  body.fp-message-rail-open #view2:has(.complaint-photo-scene):has(.scenario-entry-card) .v2-scenewrap {
    height: clamp(220px, 34svh, 300px);
  }
  body.fp-message-rail-open #view2:has(.after-call-scene):has(.scenario-entry-card) {
    right: var(--fp-message-rail-width);
  }
  body.fp-message-rail-open #view2:has(.after-call-scene):has(.scenario-entry-card) .v2-scenewrap {
    height: clamp(220px, 34svh, 300px);
  }
  body.fp-message-rail-open #view2:has(.after-call-scene):has(.scenario-entry-card) .v2-panels {
    padding-bottom: 72px;
  }
  body.fp-message-rail-open #view2:has(.after-call-scene):has(#nw-ready) .scenario-entry-card > .scenario-stage--sensitive {
    display: none;
  }
  body.fp-message-rail-open #view2:has(.complaint-console) {
    right: var(--fp-message-rail-width);
  }
  body.fp-message-rail-open #view2:has(.complaint-console) .v2-scenewrap {
    display: none;
  }
  body.fp-message-rail-open #view2:has(.complaint-console) .v2-panels {
    padding-bottom: 72px;
  }
  body.fp-message-rail-open #view2:has(.complaint-console) .complaint-console {
    width: min(900px, 100%);
    max-height: calc(100svh - 98px);
  }
  body.fp-message-rail-open #view2:has(.complaint-console) .complaint-console > .scenario-stage {
    display: none;
  }
  body.fp-view2-active:has(.after-call-console) .fp-msg {
    display: none;
  }
  body.fp-message-rail-open #view2:has(.after-call-console) {
    right: 0;
  }
  body.fp-message-rail-open #view2:has(.after-call-console) .v2-scenewrap {
    display: none;
  }
  body.fp-message-rail-open #view2:has(.after-call-console) .v2-panels {
    display: grid;
    grid-template-columns: minmax(210px, 0.72fr) minmax(220px, 0.78fr) minmax(420px, 1.45fr);
    grid-template-rows: auto auto minmax(82px, 0.35fr) minmax(0, 2fr) auto;
    column-gap: clamp(12px, 1.4vw, 20px);
    row-gap: 10px;
    overflow: hidden;
    padding: 10px 0 68px;
    background: transparent;
  }
  #view2:has(.after-call-console) .after-call-console,
  #view2:has(.after-call-console) .after-call-console-grid,
  #view2:has(.after-call-console) .after-call-dialogue-panel {
    display: contents;
  }
  #view2:has(.after-call-console) .after-call-objective {
    grid-column: 3;
    grid-row: 1;
    pointer-events: auto;
  }
  #view2:has(.after-call-console) .after-call-framework-rail {
    display: grid;
    grid-column: 3;
    grid-row: 2;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    overflow: visible;
    pointer-events: auto;
  }
  #view2:has(.after-call-console) .after-call-framework-tab {
    min-width: 0;
    flex-basis: auto;
    min-height: 50px;
    padding: 8px 9px;
  }
  #view2:has(.after-call-console) .after-call-framework-tab span {
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  #view2:has(.after-call-console) .after-call-framework-tab b {
    font-size: 11.4px;
  }
  #view2:has(.after-call-console) .after-call-framework-card {
    grid-column: 1;
    grid-row: 2 / 6;
    max-height: calc(100svh - 132px);
    pointer-events: auto;
  }
  #view2:has(.after-call-console) .after-call-video-panel {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: center;
    justify-self: center;
    width: min(100%, 330px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
  }
  #view2:has(.after-call-console) .after-call-video-frame {
    width: clamp(220px, 24vw, 330px);
    max-height: calc(100svh - 180px);
    border-color: rgba(39, 50, 58, 0.18);
    border-radius: 16px;
    background: #fff;
  }
  #view2:has(.after-call-console) .after-call-sarah-video {
    background: #fff;
  }
  #view2:has(.after-call-console) .after-call-video-caption {
    width: min(100%, 330px);
  }
  #view2:has(.after-call-console) .after-call-chat {
    grid-column: 3;
    grid-row: 3;
    max-height: clamp(104px, 16vh, 184px);
    pointer-events: auto;
  }
  body.fp-message-rail-open #view2:has(.after-call-console) .after-call-choice-panel {
    grid-column: 3;
    grid-row: 4;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 8px;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    pointer-events: auto;
  }
  body.fp-message-rail-open #view2:has(.after-call-console) .after-call-response-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-height: 0;
    overflow: visible;
  }
  body.fp-message-rail-open #view2:has(.after-call-console) .news-response-card {
    gap: 4px;
    min-height: 0;
    padding: 9px 11px;
  }
}

@media (max-width: 1080px) {
  .after-call-console-grid {
    grid-template-columns: minmax(210px, 0.78fr) minmax(420px, 1.4fr);
  }
  .after-call-dialogue-panel {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    grid-template-rows: none;
  }
}

@media (max-width: 820px) {
  #view2:has(.after-call-scene) .v2-head {
    gap: 6px;
    min-height: 38px;
    padding: 5px 8px;
    flex-wrap: nowrap;
  }
  #view2:has(.after-call-console) .v2-head {
    gap: 5px;
    min-height: 34px;
    padding: 3px 8px;
    flex-wrap: nowrap;
  }
  #view2:has(.after-call-scene) .v2-head .roomdot,
  #view2:has(.after-call-scene) .v2-head > .chip,
  #view2:has(.after-call-console) .v2-head .roomdot,
  #view2:has(.after-call-console) .v2-head > .chip {
    display: none;
  }
  #view2:has(.after-call-scene) .v2-head > div,
  #view2:has(.after-call-console) .v2-head > div {
    min-width: 0;
  }
  #view2:has(.after-call-scene) #v2-title,
  #view2:has(.after-call-console) #v2-title {
    display: block;
    line-height: 1.25;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.after-call-scene) #v2-title::before {
    content: "After the Call";
    color: #27323a;
    font-size: 13px;
    font-weight: 950;
  }
  #view2:has(.after-call-console) #v2-title::before {
    content: "Mark: first contact";
    color: #27323a;
    font-size: 13px;
    font-weight: 950;
  }
  #view2:has(.after-call-scene) #v2-sub,
  #view2:has(.after-call-console) #v2-sub {
    display: none;
  }
  #view2:has(.after-call-scene) #v2-exit,
  #view2:has(.after-call-console) #v2-exit {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.after-call-console) #v2-exit {
    min-height: 32px;
    padding: 4px 7px;
  }
  #view2:has(.after-call-scene) #v2-exit::after,
  #view2:has(.after-call-console) #v2-exit::after {
    content: "Exit";
    font-size: 11px;
    font-weight: 900;
  }
  #view2:has(.after-call-console) .v2-msg-toggle {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
  }
  #view2:has(.after-call-console) .v2-msg-toggle .fp-handle-ico {
    font-size: 16px;
  }
  #view2:has(.after-call-scene) .v2-scenewrap {
    display: none;
  }
  #view2:has(.after-call-scene):has(.scenario-entry-card) .v2-scenewrap {
    display: block;
    height: clamp(158px, 24svh, 220px);
    min-height: 0;
    max-height: 220px;
  }
  #view2:has(.after-call-scene) .after-call-scene {
    min-height: 0;
  }
  #view2:has(.after-call-scene) .v2-panels {
    padding: 8px 10px 10px;
    overflow: auto;
  }
  .after-call-scene-caption {
    top: 10px;
    left: 10px;
    padding: 8px 10px;
  }
  #view2:has(.after-call-scene) .after-call-scene-caption,
  #view2:has(.after-call-scene) .after-call-scene-objective {
    display: none;
  }
  #view2:has(.after-call-scene):has(.scenario-entry-card) .ffcard > .scenario-stage--sensitive {
    display: none;
  }
  #view2:has(.after-call-scene) .scenario-entry-card--sensitive > .sc-band--lg {
    display: none;
  }
  #view2:has(.after-call-scene) .scenario-entry-card--sensitive .scenario-entry-copy {
    padding: 8px 14px 4px;
  }
  .after-call-scene-caption b {
    font-size: 18px;
  }
  .after-call-scene-objective {
    left: 10px;
    bottom: 10px;
    padding: 7px 9px;
  }
  .after-call-scene-objective b,
  .after-call-scene-caption em {
    font-size: 11px;
  }
  .after-call-console {
    max-height: calc(100svh - 170px);
    overflow: auto;
    gap: 8px;
    padding-bottom: 4px;
  }
  .after-call-console > * {
    flex: 0 0 auto;
  }
  .after-call-objective {
    display: none;
  }
  #view2:has(.after-call-scene) .after-call-console > .scenario-stage {
    display: none;
  }
  .after-call-console > .scenario-stage {
    margin: 0;
    padding: 7px 9px;
    gap: 3px 8px;
    border-radius: 9px;
  }
  .after-call-console > .scenario-stage .scenario-stage-eyebrow {
    display: none;
  }
  .after-call-console > .scenario-stage b {
    font-size: 13px;
  }
  .after-call-console > .scenario-stage span {
    font-size: 11px;
    line-height: 1.2;
  }
  .after-call-console > .scenario-stage em {
    padding: 4px 6px;
    font-size: 10px;
  }
  .after-call-framework-rail {
    margin-right: -10px;
    padding-bottom: 4px;
  }
  .after-call-framework-tab {
    flex-basis: 138px;
    min-height: 48px;
    padding: 8px 9px;
  }
  #view2:has(.after-call-scene) .after-call-framework-tab {
    align-items: center;
    justify-content: center;
    flex-basis: 96px;
    min-height: 34px;
    padding: 7px 9px;
    text-align: center;
  }
  #view2:has(.after-call-scene) .after-call-framework-tab span {
    font-size: 11.5px;
    line-height: 1;
  }
  #view2:has(.after-call-scene) .after-call-framework-tab b {
    display: none;
  }
  #view2:has(.after-call-console) .after-call-framework-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-right: 0;
    padding: 0 0 6px;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
  }
  #view2:has(.after-call-console) .after-call-framework-tab {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 8px 10px;
  }
  #view2:has(.after-call-console) .after-call-framework-tab span {
    font-size: 13.5px;
    line-height: 1.08;
    letter-spacing: 0.02em;
  }
  #view2:has(.after-call-console) .after-call-framework-tab b {
    font-size: 14px;
    line-height: 1.16;
  }
  #view2:has(.after-call-console) .v2-scenewrap {
    display: none;
  }
  #view2:has(.after-call-console) .v2-panels {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
    padding-top: 6px;
  }
  #view2:has(.after-call-console) .after-call-console {
    max-height: none;
    min-width: 0;
    overflow: visible;
    width: 100%;
  }
  #view2:has(.after-call-console) .after-call-console > *,
  #view2:has(.after-call-console) .after-call-console-grid,
  #view2:has(.after-call-console) .after-call-framework-card,
  #view2:has(.after-call-console) .after-call-dialogue-panel,
  #view2:has(.after-call-console) .after-call-choice-panel {
    min-width: 0;
    max-width: 100%;
  }
  .after-call-console-grid,
  .after-call-dialogue-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
  }
  .after-call-console-grid {
    flex: 0 0 auto;
  }
  .after-call-framework-card,
  .after-call-dialogue-panel,
  .after-call-choice-panel {
    border-radius: 10px;
    padding: 10px;
  }
  #view2:has(.after-call-console) .after-call-framework-card {
    display: none;
  }
  #view2:has(.after-call-console) .after-call-selected-mobile {
    display: block;
  }
  #view2:has(.after-call-console) .after-call-selected-mobile .after-call-selected-response {
    padding: 8px 9px;
  }
  #view2:has(.after-call-console) .after-call-selected-mobile .after-call-selected-response > span {
    font-size: 13.5px;
    line-height: 1.15;
    letter-spacing: 0.035em;
  }
  #view2:has(.after-call-console) .after-call-selected-mobile .after-call-selected-response b {
    font-size: 14px;
    line-height: 1.38;
  }
  #view2:has(.after-call-console) .after-call-selected-mobile .after-call-selected-response em,
  #view2:has(.after-call-console) .after-call-selected-mobile .after-call-selected-response p {
    font-size: 14px;
    line-height: 1.42;
  }
  #view2:has(.after-call-console) .after-call-selected-mobile .after-call-selected-response--empty {
    display: none;
  }
  #view2:has(.after-call-console) .after-call-dialogue-panel {
    order: 1;
    grid-template-rows: auto;
    gap: 0;
    padding: 8px 9px;
  }
  #view2:has(.after-call-console) .after-call-dialogue-panel--video {
    gap: 8px;
  }
  #view2:has(.after-call-console) .after-call-video-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 9px;
    padding: 8px;
  }
  #view2:has(.after-call-console) .after-call-video-frame {
    width: min(34vw, 118px);
    min-width: 92px;
    border-radius: 12px;
  }
  #view2:has(.after-call-console) .after-call-video-status {
    left: 6px;
    right: 6px;
    bottom: 6px;
    padding: 5px 6px;
    font-size: 13.5px;
    line-height: 1.12;
  }
  #view2:has(.after-call-console) .after-call-video-caption {
    text-align: left;
  }
  #view2:has(.after-call-console) .after-call-video-caption span,
  #view2:has(.after-call-console) .after-call-current span,
  #view2:has(.after-call-console) .after-call-choice-head span {
    font-size: 13.5px;
    line-height: 1.15;
    letter-spacing: 0.035em;
  }
  #view2:has(.after-call-console) .after-call-video-caption b,
  #view2:has(.after-call-console) .after-call-current p,
  #view2:has(.after-call-console) .after-call-choice-focus,
  #view2:has(.after-call-console) .news-response-card > span:not(.news-response-meta) {
    font-size: 14px;
    line-height: 1.35;
  }
  #view2:has(.after-call-console) .after-call-choice-panel {
    order: 2;
  }
  .after-call-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #view2:has(.after-call-console) .after-call-chat {
    display: none;
  }
  #view2:has(.after-call-console) .after-call-current {
    padding: 8px 9px;
    border-left-width: 3px;
  }
  .after-call-choice-panel {
    overflow: visible;
  }
  #view2:has(.after-call-console) .after-call-choice-panel {
    gap: 7px;
    padding: 9px;
  }
  #view2:has(.after-call-console) .after-call-choice-head {
    gap: 3px;
  }
  #view2:has(.after-call-console) .after-call-choice-head h4 {
    font-size: 14.5px;
    line-height: 1.2;
  }
  #view2:has(.after-call-console) .after-call-choice-focus {
    margin-top: 1px;
  }
  #view2:has(.after-call-console) .after-call-safety-check b {
    font-size: 12.5px;
    line-height: 1.18;
    letter-spacing: 0.035em;
  }
  #view2:has(.after-call-console) .after-call-safety-check span {
    font-size: 13px;
    line-height: 1.35;
  }
  .after-call-response-grid {
    grid-template-columns: 1fr;
    overflow: visible;
    gap: 7px;
  }
  .news-response-card {
    min-height: 0;
    padding: 10px 11px;
  }
  #view2:has(.after-call-console) .news-response-card {
    gap: 4px;
    padding: 8px 9px;
  }
  .news-response-card b {
    font-size: 14.5px;
    line-height: 1.32;
  }
  #view2:has(.after-call-console) .news-response-card.is-picked b {
    font-size: 14px;
    line-height: 1.38;
  }
  #view2:has(.after-call-console) .after-call-submit-row {
    gap: 8px;
  }
  #view2:has(.after-call-console) .after-call-submit-row .gbtn {
    min-height: 44px;
    padding: 9px 12px;
  }
  #view2:has(.after-call-console) .after-call-submit-row span {
    font-size: 13.5px;
    line-height: 1.3;
  }
  .news-rationale {
    font-size: 11.2px;
  }
  #view2:has(.after-call-console) .news-rationale {
    display: none;
  }
  #view2:has(.after-call-console) .news-choice-feedback {
    gap: 2px;
    padding-top: 6px;
  }
  #view2:has(.after-call-console) .news-choice-feedback-label {
    font-size: 13px;
    line-height: 1.16;
    letter-spacing: 0.02em;
  }
  #view2:has(.after-call-console) .news-choice-feedback-text {
    font-size: 13.5px;
    line-height: 1.32;
  }
}
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 13px;
  padding: 11px 13px;
  transition:
    border-color 0.1s,
    transform 0.06s;
}
.menu-item:not([disabled]):hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}
.menu-item.is-active {
  border-color: #0a7b6d;
  background: #f0faf6;
  box-shadow: inset 0 0 0 2px rgba(10, 123, 109, 0.1);
}
.menu-item.is-active .mi-phase {
  background: #0a7b6d;
}
.menu-item.is-soon {
  opacity: 0.6;
}
.menu-item .mi-phase {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--ink3);
  border-radius: 6px;
  padding: 3px 7px;
  flex: none;
  min-width: 54px;
  text-align: center;
}
.menu-item b {
  flex: 1;
  font-size: 13.5px;
  font-weight: 800;
}
.menu-item .mi-go {
  font-size: 12px;
  font-weight: 900;
  color: var(--brand-deep);
}
.menu-readbox {
  margin: 0 16px 12px;
  background: #fff;
  border: 2px dashed var(--stress);
  border-radius: 13px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink2);
}
.menu-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ffcard--menu .menu-band {
  position: sticky;
  top: 0;
  z-index: 7;
  box-shadow: 0 10px 24px rgba(36, 47, 54, 0.14);
}
.menu-band > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.menu-close-top {
  flex: none;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: none;
  font-size: 21px;
  line-height: 1;
}
.menu-close-top:hover,
.menu-close-top:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.8);
}
.ffcard--menu {
  width: min(1120px, calc(100vw - 64px));
  border-color: rgba(36, 47, 54, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 240, 0.98)),
    var(--paper);
  scrollbar-gutter: stable;
}
.ffcard--menu .menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(36, 47, 54, 0.08);
  background: rgba(255, 255, 255, 0.38);
}
.ffcard--menu .menu-item {
  display: grid;
  grid-template-columns: minmax(54px, max-content) minmax(0, 1fr) max-content;
  align-items: start;
  min-height: 72px;
  border-color: rgba(36, 47, 54, 0.14);
}
.ffcard--menu .menu-item.is-active {
  border-color: #0a7b6d;
  background: #effaf5;
  box-shadow:
    inset 0 0 0 2px rgba(10, 123, 109, 0.14),
    0 12px 26px rgba(10, 123, 109, 0.16);
}
.ffcard--menu .menu-item.is-soon {
  opacity: 1;
  filter: none;
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(36, 47, 54, 0.1);
}
.ffcard--menu .menu-item b {
  min-width: 0;
  line-height: 1.22;
}
.ffcard--menu .menu-item.is-soon b {
  color: rgba(36, 47, 54, 0.68);
}
.ffcard--menu .menu-item.is-soon .mi-phase {
  background: #aab3b7;
}
.ffcard--menu .menu-item.is-soon .chip {
  border-color: rgba(36, 47, 54, 0.12);
  color: rgba(36, 47, 54, 0.62);
}
.ffcard--menu .menu-item .mi-phase {
  align-self: start;
  justify-self: start;
  margin-top: 1px;
  white-space: nowrap;
}
.ffcard--menu .menu-item .chip,
.ffcard--menu .menu-item .mi-go {
  align-self: start;
  justify-self: end;
  margin-top: 1px;
  white-space: nowrap;
}
.learn-panel {
  margin: 0 22px 22px;
  border: 2px solid rgba(36, 47, 54, 0.12);
  border-radius: 14px;
  background: #fbfcfb;
  color: #243039;
  overflow: hidden;
}
.learn-hero {
  padding: 24px 26px 22px;
  background:
    linear-gradient(135deg, rgba(244, 250, 247, 0.98), rgba(255, 250, 240, 0.96)),
    #f8fbf8;
  border-bottom: 1px solid rgba(36, 47, 54, 0.12);
}
.learn-hero span,
.learn-section-head span {
  display: inline-flex;
  width: fit-content;
  color: #096b60;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.learn-hero h3 {
  margin: 8px 0 0;
  max-width: 780px;
  color: #1f2b32;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  font-weight: 950;
}
.learn-hero p {
  max-width: 760px;
  margin: 12px 0 0;
  color: #46555c;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.55;
}
.learn-jumpnav {
  position: sticky;
  top: 58px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 22px;
  border-bottom: 1px solid rgba(36, 47, 54, 0.1);
  background: rgba(251, 252, 251, 0.94);
  backdrop-filter: blur(10px);
}
.learn-jumpnav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(10, 123, 109, 0.25);
  border-radius: 999px;
  background: #fff;
  color: #164f49;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}
.learn-jumpnav a:hover,
.learn-jumpnav a:focus-visible {
  border-color: #0a7b6d;
  background: #effaf5;
  color: #0b3f39;
}
.learn-section,
.learn-lead,
.learn-stat-grid,
.learn-sources {
  scroll-margin-top: 96px;
}
.learn-lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 18px 22px 0;
}
.learn-lead p {
  margin: 0;
  padding: 14px 15px;
  border-left: 5px solid #0a7b6d;
  background: #f4faf7;
  color: #314149;
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.55;
}
.learn-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 22px 0;
}
.learn-stat {
  min-height: 128px;
  padding: 14px;
  border: 1px solid rgba(36, 47, 54, 0.14);
  border-radius: 8px;
  background: #fff;
}
.learn-stat b {
  display: block;
  color: #9a3c4a;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}
.learn-stat span {
  display: block;
  margin-top: 7px;
  color: #1f2b32;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.learn-stat p {
  margin: 7px 0 0;
  color: #53636a;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}
.learn-section {
  padding: 22px;
  border-top: 1px solid rgba(36, 47, 54, 0.1);
}
.learn-section-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.learn-section-head h4 {
  margin: 0;
  color: #1f2b32;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 950;
}
.learn-cascade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.learn-cascade-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-height: 132px;
  padding: 14px;
  border: 1px solid rgba(36, 47, 54, 0.14);
  border-radius: 8px;
  background: #fff;
}
.learn-step-index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #22313a;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}
.learn-cascade-step h5,
.learn-resource-group h5 {
  margin: 0;
  color: #1f2b32;
  font-size: 15px;
  font-weight: 950;
}
.learn-cascade-step p,
.learn-prompt p,
.learn-practice-list p {
  margin: 7px 0 0;
  color: #4f5f66;
  font-size: 12.8px;
  font-weight: 700;
  line-height: 1.45;
}
.learn-cascade-step small {
  display: block;
  margin-top: 8px;
  color: #0a6d62;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}
.learn-prompt-grid,
.learn-resource-grid,
.learn-practice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.learn-prompt,
.learn-practice-list article,
.learn-resource-group {
  padding: 14px;
  border: 1px solid rgba(36, 47, 54, 0.14);
  border-radius: 8px;
  background: #fff;
}
.learn-prompt b,
.learn-practice-list b {
  color: #1f2b32;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.learn-prompt blockquote {
  margin: 9px 0 0;
  color: #243039;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}
.learn-section--interactive {
  background: #f6f8f4;
}
.learn-sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.learn-sequence-card {
  min-height: 116px;
  padding: 13px;
  border: 2px solid rgba(36, 47, 54, 0.16);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  transition:
    border-color 0.12s,
    transform 0.08s,
    background 0.12s;
}
.learn-sequence-card:hover,
.learn-sequence-card.is-selected {
  border-color: #0a7b6d;
  background: #effaf5;
  transform: translateY(-1px);
}
.learn-sequence-card b {
  display: block;
  color: #1f2b32;
  font-size: 14px;
  font-weight: 950;
}
.learn-sequence-card span {
  display: block;
  margin-top: 7px;
  color: #52636b;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.4;
}
.learn-sequence-result {
  margin-top: 11px;
  padding: 11px 13px;
  border-left: 5px solid #c7852e;
  background: #fff8ea;
  color: #3d3528;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.learn-resource-links {
  display: grid;
  gap: 8px;
  margin-top: 11px;
}
.learn-resource-links a,
.learn-sources a {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(36, 47, 54, 0.12);
  border-radius: 8px;
  background: #f8faf9;
  color: #243039;
  text-decoration: none;
}
.learn-resource-links a:hover,
.learn-sources a:hover {
  border-color: #0a7b6d;
}
.learn-resource-links b,
.learn-sources b {
  color: #1f2b32;
  font-size: 13px;
  font-weight: 950;
}
.learn-resource-links span,
.learn-sources span {
  color: #586870;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.learn-sources {
  padding: 18px 22px 22px;
  border-top: 1px solid rgba(36, 47, 54, 0.1);
  background: #f8f6f0;
}
.learn-sources h4 {
  margin: 0 0 10px;
  color: #1f2b32;
  font-size: 15px;
  font-weight: 950;
}
.learn-sources div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}
@media (max-width: 760px) {
  #menu {
    padding: 10px;
  }
  .ffcard--menu {
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100svh - 20px);
  }
  .ffcard--menu .menu-band {
    min-height: 58px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.16;
    letter-spacing: 0.04em;
  }
  .menu-close-top {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    font-size: 24px;
  }
  .ffcard--menu .menu-list {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 14px;
  }
  .ffcard--menu .menu-item {
    grid-template-columns: minmax(54px, max-content) minmax(0, 1fr) max-content;
    min-height: 64px;
    padding: 10px 12px;
  }
  .ffcard--menu .menu-item .mi-phase,
  .ffcard--menu .menu-item .mi-go,
  .ffcard--menu .menu-item .chip {
    font-size: 13px;
    line-height: 1.12;
  }
  .ffcard--menu .menu-item b {
    font-size: 14.5px;
    line-height: 1.24;
  }
  .learn-hero {
    padding: 20px 18px;
  }
  .learn-hero span {
    font-size: 13px;
    line-height: 1.15;
    letter-spacing: 0.03em;
  }
  .learn-jumpnav {
    position: static;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 18px;
    overflow: visible;
  }
  .learn-jumpnav a {
    flex: 1 1 126px;
    justify-content: center;
    min-height: 44px;
    min-width: 0;
    padding: 9px 12px;
    font-size: 13.5px;
    text-align: center;
    white-space: normal;
  }
  .learn-stat span {
    font-size: 13px;
    line-height: 1.18;
    letter-spacing: 0.02em;
  }
  .learn-stat p {
    font-size: 13.5px;
    line-height: 1.42;
  }
  .learn-section-head span,
  .learn-cascade-step p,
  .learn-cascade-step small,
  .learn-prompt b,
  .learn-prompt p,
  .learn-practice-list b,
  .learn-practice-list p,
  .learn-sequence-card span,
  .learn-sequence-result,
  .learn-resource-links span,
  .learn-sources span {
    font-size: 14px;
    line-height: 1.42;
  }
  .learn-cascade-step h5,
  .learn-resource-group h5,
  .learn-practice-list h5 {
    font-size: 15px;
    line-height: 1.25;
  }
  .learn-step-index {
    font-size: 13px;
    line-height: 1;
  }
  .learn-stat-grid,
  .learn-cascade,
  .learn-lead {
    grid-template-columns: 1fr;
  }
  .learn-section {
    padding: 18px;
  }
}
.ffcard--scenario {
  width: min(620px, 94vw);
  border-color: #1fa08c;
  overflow: hidden;
}
.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 16px 4px;
}
.ffcard--scenario .scenario-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.scenario-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 13px;
  padding: 11px 12px;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    transform 0.08s;
}
.ffcard--scenario .scenario-row--available {
  order: -1;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  border-color: rgba(31, 160, 140, 0.42);
  background:
    linear-gradient(90deg, rgba(31, 160, 140, 0.16), rgba(255, 255, 255, 0.98) 44%),
    #fff;
  box-shadow: 0 14px 32px rgba(31, 160, 140, 0.14);
}
.ffcard--scenario .scenario-row--available .scenario-index {
  background: #157a6a;
  color: #fff;
  box-shadow: 0 8px 18px rgba(21, 122, 106, 0.22);
}
.ffcard--scenario .scenario-row--available .scenario-index--next {
  width: 44px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ffcard--scenario .scenario-row--available .scenario-status--available {
  border-color: rgba(21, 122, 106, 0.44);
  background: #e8f6f1;
  color: #075f55;
}
.scenario-row:not([disabled]):hover,
.scenario-row:not([disabled]):focus-visible {
  border-color: #1fa08c;
  box-shadow: 0 10px 26px rgba(31, 160, 140, 0.16);
  transform: translateY(-1px);
}
.scenario-row[disabled] {
  cursor: not-allowed;
}
.scenario-row--comingSoon,
.scenario-row--locked {
  opacity: 0.58;
}
.scenario-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e8f3ef;
  color: #157a6a;
  font-size: 14px;
  font-weight: 900;
}
.scenario-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.scenario-copy b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}
.scenario-copy span {
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.scenario-copy em {
  color: var(--ink2);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}
.scenario-status {
  justify-self: end;
  white-space: nowrap;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
}
.scenario-status--available {
  border-color: rgba(31, 160, 140, 0.35);
  color: #157a6a;
  background: rgba(31, 160, 140, 0.09);
}
.scenario-status--completed {
  border-color: rgba(47, 157, 99, 0.38);
  color: #2f9d63;
  background: rgba(47, 157, 99, 0.1);
}
.scenario-status--comingSoon,
.scenario-status--locked {
  background: #f4f1ea;
}
.scenario-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 14px;
}
.ffcard--scenario .scenario-actions {
  flex: 0 0 auto;
  background:
    linear-gradient(180deg, rgba(250, 246, 238, 0), var(--paper) 22%),
    var(--paper);
  border-top: 1px solid rgba(211, 199, 171, 0.58);
  z-index: 2;
}
.scenario-actions--split {
  justify-content: space-between;
  gap: 10px;
}
.scenario-countdown {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px 24px 18px;
  text-align: center;
}
.scenario-countdown p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  max-width: 440px;
}
.scenario-countdown > b {
  color: #157a6a;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.scenario-count {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 24px;
  background: #1fa08c;
  color: #fff;
  font-size: 44px;
  font-weight: 900;
  box-shadow: 0 18px 44px rgba(31, 160, 140, 0.34);
  animation: scenarioPulse 1s ease both;
}
@keyframes scenarioPulse {
  0% { transform: scale(0.94); }
  42% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@media (max-width: 560px) {
  .ffcard--scenario h3 {
    margin: 10px 16px 2px;
    font-size: 20px;
    line-height: 1.22;
  }
  .ffcard--scenario > p {
    margin: 0 16px 7px;
    font-size: 13.5px;
    line-height: 1.36;
  }
  .ffcard--scenario .scenario-list {
    gap: 7px;
    padding: 9px 12px calc(58px + env(safe-area-inset-bottom));
  }
  .scenario-row {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 12px;
  }
  .scenario-index {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 13px;
  }
  .scenario-copy {
    gap: 1px;
  }
  .scenario-copy b {
    font-size: 13.2px;
    line-height: 1.16;
  }
  .scenario-copy span {
    font-size: 10px;
    line-height: 1.18;
  }
  .scenario-copy em {
    display: block;
    overflow: visible;
    font-size: 11.4px;
    line-height: 1.25;
  }
  .scenario-status {
    grid-column: 2;
    justify-self: start;
    padding: 3px 8px;
    font-size: 10.5px;
  }
  .ffcard--scenario .scenario-row--available {
    grid-template-columns: 50px minmax(0, 1fr);
  }
  .ffcard--scenario .scenario-actions {
    padding: 10px 12px 12px;
  }
  .ffcard--scenario .scenario-actions .gbtn {
    min-height: 44px;
    padding: 8px 15px;
  }
}
@media (max-width: 820px) {
  .ffcard--scenario {
    max-height: calc(100svh - 124px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-count {
    animation: none;
  }
}

.sac-review-scene {
  position: relative;
  width: 100%;
  height: 100%;
  background: #162226;
  overflow: hidden;
}
.sac-review-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sac-review-scene-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid rgba(125, 89, 168, 0.42);
  border-radius: 12px;
  padding: 8px 11px;
  box-shadow: 0 12px 34px rgba(21, 26, 34, 0.2);
}
.sac-review-scene-chip b {
  font-size: 13px;
  font-weight: 900;
}
.sac-review-scene-chip span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sac-review-card {
  width: min(820px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 14px 38px rgba(58, 48, 28, 0.14);
}
.sac-review-card h3 {
  margin: 12px 0 8px;
  font-size: 22px;
  font-weight: 900;
}
.sac-review-card h4 {
  margin: 12px 0 8px;
  font-size: 15px;
  font-weight: 900;
}
.sac-review-card p {
  margin: 0 0 10px;
  color: var(--ink2);
  line-height: 1.55;
  font-weight: 700;
}
.sac-review-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 12px;
}
.sac-review-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sac-review-meta b {
  color: #7d59a8;
}
.sac-review-doc {
  background: #f7f8f8;
  border: 2px solid #e0e6e7;
  border-radius: 10px;
  padding: 12px 14px;
}
.sac-review-doc pre {
  margin: 0;
  white-space: pre-wrap;
  font: 800 14px/1.55 "Segoe UI", Nunito, sans-serif;
  color: #1f2933;
}
.sac-review-feedback {
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  background: #f3f0f7;
  border: 2px solid rgba(125, 89, 168, 0.28);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 800;
}
.sac-review-feedback.is-right {
  background: #edf8f4;
  border-color: rgba(31, 160, 140, 0.3);
}
.sac-review-feedback.is-wrong {
  background: #fff6ee;
  border-color: rgba(229, 119, 46, 0.3);
}
.sac-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.sac-review-card--done {
  text-align: center;
}
.sac-review-card--done .comp-star {
  font-size: 38px;
  line-height: 1;
}

@media (max-width: 720px) {
  body.fp-view2-active:has(.sac-review-card) .fp-msg.is-mobile .fp-bar {
    display: none;
  }
  #view2:has(.sac-review-card) .v2-head {
    gap: 6px;
    min-height: 38px;
    padding: 5px 8px;
    flex-wrap: nowrap;
  }
  #view2:has(.sac-review-card) .v2-head .roomdot,
  #view2:has(.sac-review-card) .v2-head > .chip {
    display: none;
  }
  #view2:has(.sac-review-card) .v2-head > div {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  #view2:has(.sac-review-card) #v2-title {
    display: block;
    line-height: 1.25;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.sac-review-card) #v2-title::before {
    content: "Whiteboard Review";
    color: #27323a;
    font-size: 13px;
    font-weight: 950;
  }
  #view2:has(.sac-review-card) #v2-sub {
    display: none;
  }
  #view2:has(.sac-review-card) #v2-exit {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.sac-review-card) #v2-exit::after {
    content: "Exit";
    font-size: 11px;
    font-weight: 900;
  }
  #view2:has(.sac-review-card) .v2-msg-toggle {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
  }
  #view2:has(.sac-review-card) .v2-msg-toggle .fp-handle-ico {
    font-size: 16px;
  }
  #view2:has(.sac-review-card) .v2-scenewrap {
    height: clamp(140px, 19svh, 160px);
    min-height: 0;
    max-height: 160px;
  }
  #view2:has(.sac-review-card) .v2-panels {
    overflow: auto;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .sac-review-scene-chip {
    left: 10px;
    right: 10px;
    bottom: 10px;
    justify-content: space-between;
  }
  .sac-choice-grid {
    grid-template-columns: 1fr;
  }
  .sac-review-card {
    width: min(100%, 340px);
    padding: 13px;
  }
}

/* ---------- reusable View 2 branching path scenario ---------- */
#view2.branch-path-active .v2-head {
  min-height: 58px;
  padding: 8px 14px;
  gap: 10px;
  flex-wrap: nowrap;
}
#view2.branch-path-active .v2-head .roomdot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 15px;
}
#view2.branch-path-active .v2-head b {
  font-size: 14px;
}
#view2.branch-path-active .v2-head > .chip {
  display: none;
}
@media (min-width: 821px) {
  #view2.branch-path-active .v2-head {
    min-height: 44px;
    padding: 6px 12px;
    gap: 8px;
    justify-content: flex-end;
  }
  #view2.branch-path-active .v2-head .roomdot,
  #view2.branch-path-active .v2-head > div,
  #view2.branch-path-active .v2-head > .chip {
    display: none;
  }
  #view2.branch-path-active #v2-exit {
    min-height: 32px;
    padding: 7px 12px;
  }
}
#view2.branch-path-active .v2-msg-toggle {
  display: none;
}
body.fp-view2-active.fp-message-rail-collapsed #view2.branch-path-active .v2-msg-toggle {
  display: inline-grid;
}
body.fp-message-rail-open #view2.branch-path-active {
  right: var(--fp-message-rail-width);
}
#view2.branch-path-active .v2-scenewrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  border-bottom: 0;
  overflow: hidden;
}
#view2.branch-path-active .v2-panels {
  display: none;
}
.bp-shell {
  --bp-readable-text: #202421;
  --bp-readable-muted: #38423d;
  --bp-readable-soft: #4d5a54;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(380px, 560px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "brief brief"
    "map decision";
  gap: 10px;
  padding: 10px;
  background: #ede5d8;
  color: var(--bp-readable-text);
  overflow: hidden;
}
body.fp-message-rail-open #view2.branch-path-active .bp-shell {
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 440px);
  padding-right: 10px;
}
body.fp-message-rail-open #view2.branch-path-active .bp-side {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
body.fp-message-rail-open #view2.branch-path-active .bp-question,
body.fp-message-rail-open #view2.branch-path-active .bp-current,
body.fp-message-rail-open #view2.branch-path-active .bp-notes {
  flex: 0 0 auto;
}
body.fp-message-rail-open #view2.branch-path-active .bp-choices {
  gap: 6px;
  padding-top: 7px;
}
body.fp-message-rail-open #view2.branch-path-active .bp-choice {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 0;
  gap: 7px;
  padding: 7px 8px;
}
body.fp-message-rail-open #view2.branch-path-active .bp-choice-key {
  min-height: 28px;
}
body.fp-message-rail-open #view2.branch-path-active .bp-choice-copy {
  gap: 2px;
}
body.fp-message-rail-open #view2.branch-path-active .bp-choice-copy b {
  font-size: 13px;
}
body.fp-message-rail-open #view2.branch-path-active .bp-choice-copy span {
  display: block;
  overflow: visible;
  font-size: 11.8px;
  line-height: 1.25;
}
body.fp-message-rail-open #view2.branch-path-active .bp-choice-copy em {
  font-size: 10px;
  line-height: 1.15;
}
.bp-brief,
.bp-map-panel,
.bp-side {
  min-width: 0;
  min-height: 0;
  border: 2px solid #c9b9a5;
  border-radius: 12px;
  background: #fff8ee;
  box-shadow: 0 18px 44px rgba(35, 31, 25, 0.12);
  overflow: hidden;
}
.bp-brief {
  grid-area: brief;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 12px;
}
.bp-stage {
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid rgba(8, 127, 114, 0.2);
  background: rgba(8, 127, 114, 0.08);
}
.bp-stage span {
  color: #075f55;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bp-stage b {
  color: var(--bp-readable-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
}
.bp-stage em {
  color: #075f55;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 900;
}
.bp-brief-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.bp-map-panel {
  grid-area: map;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}
.bp-shell--full-map .bp-map-panel {
  align-self: start;
  height: clamp(320px, 42vh, 520px);
  min-height: 320px;
}
.bp-band {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(31, 160, 140, 0.11);
  border: 1px solid rgba(31, 160, 140, 0.32);
  color: #075f55;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
}
.bp-brief h2 {
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.05;
  white-space: nowrap;
}
.bp-brief p {
  flex: 1 1 420px;
  margin: 0;
  max-width: none;
  color: var(--bp-readable-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}
.bp-brief-progress {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--bp-readable-soft);
  font-size: 12px;
  font-weight: 800;
}
.bp-tools {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}
.bp-tools .iconb {
  width: 34px;
  height: 34px;
  min-width: 34px;
}
.bp-tools .bp-modebtn {
  width: auto;
  min-width: 82px;
  padding: 0 10px;
  font-size: 11.5px;
}
.bp-tools .bp-backbtn {
  width: auto;
  min-width: 92px;
  padding: 0 10px;
  font-size: 11.5px;
}
.bp-map-wrap {
  --bp-draw-duration: 3.3s;
  --bp-fan-duration: 1.36s;
  --bp-chip-bloom-duration: 0.5s;
  position: relative;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background:
    linear-gradient(rgba(55, 45, 34, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 45, 34, 0.05) 1px, transparent 1px),
    #f8f1e7;
  background-size: 28px 28px;
}
.bp-map-wrap.is-dragging {
  cursor: grabbing;
}
.bp-map-controls {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 2px solid rgba(32, 36, 33, 0.12);
  border-radius: 12px;
  background: rgba(255, 250, 241, 0.92);
  box-shadow: 0 10px 24px rgba(32, 36, 33, 0.12);
}
.bp-map-controls .iconb {
  width: 34px;
  height: 34px;
  min-width: 34px;
}
.bp-zoom-readout {
  min-width: 48px;
  color: var(--bp-readable-text);
  font-size: 12.5px;
  font-weight: 900;
  text-align: center;
}
.bp-map {
  display: block;
  width: 100%;
  height: 100%;
}
.bp-branch-track {
  fill: none;
  stroke: #d5c8b6;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.34;
  vector-effect: non-scaling-stroke;
}
.bp-branch-track.is-future {
  opacity: 0.18;
  stroke-dasharray: 0.035 0.08;
}
.bp-branch-track.is-passed {
  opacity: 0.24;
}
.bp-branch-track.is-available-track {
  opacity: 0.3;
}
.bp-branch {
  fill: none;
  stroke: #b9ad9b;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
  vector-effect: non-scaling-stroke;
}
.bp-branch.is-future {
  opacity: 0;
}
.bp-branch.is-available {
  opacity: 0.34;
  stroke-dasharray: 0.035 0.09;
  stroke-dashoffset: 0;
  stroke-width: 5.5;
}
.bp-choice-0.is-available,
.bp-choice-0.is-selected {
  stroke: #087f72;
}
.bp-choice-1.is-available,
.bp-choice-1.is-selected {
  stroke: #b27319;
}
.bp-choice-2.is-available,
.bp-choice-2.is-selected {
  stroke: #c95440;
}
.bp-branch.is-selected {
  opacity: 1;
  stroke-width: 10;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 6px 10px rgba(8, 127, 114, 0.18));
}
.bp-branch.is-drawing {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  will-change: stroke-dashoffset, opacity, stroke-width;
  animation: bpLineGrow var(--bp-draw-duration, 3.3s) cubic-bezier(0.2, 0.8, 0.18, 1) forwards;
}
.bp-branch.is-selected.is-landing {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  will-change: stroke-width, filter;
  animation: bpLineSettle var(--bp-fan-duration, 0.94s) cubic-bezier(0.18, 0.82, 0.18, 1) forwards;
}
.bp-branch.is-available.is-arriving {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0.985;
  opacity: 0.62;
  stroke-width: 6.5;
  will-change: stroke-dashoffset, opacity, stroke-width;
  animation: bpFanGrow var(--bp-fan-duration, 0.94s) cubic-bezier(0.18, 0.82, 0.18, 1) var(--bp-branch-delay, 0.08s) both;
}
.bp-branch.is-available.is-ready-fan {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  opacity: 0.58;
  stroke-width: 7.5;
  filter: drop-shadow(0 4px 8px rgba(8, 127, 114, 0.1));
}
.bp-branch.is-rejected {
  opacity: 0.12;
  stroke-width: 6;
}
@keyframes bpLineGrow {
  0% {
    opacity: 0.88;
    stroke-dashoffset: 0.985;
    stroke-width: 7;
  }
  18% {
    opacity: 0.9;
  }
  72% {
    opacity: 1;
    stroke-width: 11;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
    stroke-width: 10;
  }
}
@keyframes bpLineSettle {
  0% {
    opacity: 1;
    stroke-width: 11;
    filter: drop-shadow(0 7px 12px rgba(8, 127, 114, 0.2));
  }
  42% {
    stroke-width: 10.5;
    filter: drop-shadow(0 8px 14px rgba(8, 127, 114, 0.18));
  }
  100% {
    opacity: 1;
    stroke-width: 10;
    filter: drop-shadow(0 6px 10px rgba(8, 127, 114, 0.18));
  }
}
@keyframes bpFanGrow {
  0% {
    opacity: 0.62;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0.985;
    stroke-width: 6.5;
  }
  22% {
    opacity: 0.72;
    stroke-dashoffset: 0.82;
    stroke-width: 7.5;
  }
  70% {
    opacity: 0.74;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    stroke-width: 9.5;
  }
  100% {
    opacity: 0.58;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    stroke-width: 7.5;
  }
}
.bp-map-dock {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: grid;
  gap: 3px;
  width: min(340px, calc(100% - 178px));
  max-height: 86px;
  padding: 9px 11px;
  border: 1px solid rgba(32, 36, 33, 0.15);
  border-left: 4px solid #087f72;
  border-radius: 10px;
  background: rgba(255, 250, 241, 0.96);
  box-shadow: 0 10px 24px rgba(32, 36, 33, 0.12);
  color: #202421;
  font-family: Nunito, system-ui, sans-serif;
  line-height: 1.18;
  pointer-events: none;
}
.bp-map-dock span {
  color: #087f72;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bp-map-dock b {
  overflow: hidden;
  color: #202421;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-map-dock em {
  display: block;
  max-height: 32px;
  overflow: hidden;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
  color: var(--bp-readable-muted);
  line-height: 1.3;
}
.bp-route-chip {
  color: var(--bp-readable-muted);
  pointer-events: none;
  filter: drop-shadow(0 5px 10px rgba(32, 36, 33, 0.12));
}
.bp-route-chip rect {
  fill: rgba(255, 250, 241, 0.94);
  stroke: currentColor;
  stroke-width: 1.6;
}
.bp-route-chip-text {
  fill: currentColor;
  font-size: 12px;
  font-weight: 950;
  text-anchor: middle;
  dominant-baseline: central;
}
.bp-route-chip.bp-choice-0 {
  color: #087f72;
}
.bp-route-chip.bp-choice-1 {
  color: #9a6418;
}
.bp-route-chip.bp-choice-2 {
  color: #b94635;
}
.bp-route-chip.is-picked rect,
.bp-route-chip.is-available rect {
  fill: #fffdf7;
  stroke-width: 2;
}
.bp-route-chip.is-picked {
  filter: drop-shadow(0 7px 12px rgba(8, 127, 114, 0.17));
}
.bp-route-chip.is-arriving {
  opacity: 0;
  animation: bpChipBloom var(--bp-chip-bloom-duration, 0.5s) cubic-bezier(0.18, 0.82, 0.18, 1) calc(var(--bp-branch-delay, 0s) + 0.82s) both;
}
@keyframes bpChipBloom {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.bp-node {
  fill: #fffaf1;
  stroke: #8f846f;
  stroke-width: 4;
}
.bp-node-halo {
  fill: rgba(201, 84, 64, 0.12);
  stroke: rgba(201, 84, 64, 0.34);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  animation: bpNodeHalo 1.8s ease-in-out infinite;
}
.bp-node-wrap.is-reached .bp-node {
  stroke: #087f72;
}
.bp-node-wrap.is-current .bp-node {
  stroke: #c95440;
  stroke-width: 6;
  animation: bpNodePulse 1.4s ease-in-out infinite;
}
.bp-node-wrap.is-arriving .bp-node {
  animation: bpNodeArrive 0.74s ease-out, bpNodePulse 1.4s ease-in-out 0.74s infinite;
}
.bp-node-wrap.is-pending-arrival .bp-node {
  stroke: rgba(201, 84, 64, 0.74);
  stroke-width: 4;
  animation: bpNodeAwaitLine var(--bp-draw-duration, 3.3s) cubic-bezier(0.2, 0.8, 0.18, 1) both;
}
.bp-node-wrap.is-future .bp-node {
  stroke-width: 3;
}
.bp-node-wrap.is-future {
  opacity: 0.45;
}
.bp-node-wrap.is-future.is-pending-arrival {
  opacity: 0.72;
}
@keyframes bpNodeHalo {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bpNodeAwaitLine {
  0%,
  58% {
    stroke-width: 3.2;
    opacity: 0.72;
    transform: scale(0.92);
  }
  100% {
    stroke-width: 4.8;
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bpNodeArrive {
  0% {
    opacity: 0.55;
    stroke-width: 4;
  }
  55% {
    opacity: 1;
    stroke-width: 9;
  }
  100% {
    opacity: 1;
    stroke-width: 6;
  }
}
@keyframes bpNodePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.bp-node-num {
  fill: var(--bp-readable-text);
  font-size: 18px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
}
.bp-first-record {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 2px solid rgba(31, 160, 140, 0.24);
  border-radius: 10px;
  background: rgba(31, 160, 140, 0.08);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 800;
}
.bp-first-record b {
  color: #157a6a;
  font-size: 12px;
  font-weight: 900;
}
.bp-map-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-top: 2px solid #ded0be;
  color: var(--bp-readable-soft);
  font-size: 12px;
  font-weight: 800;
}
.bp-progress {
  display: flex;
  gap: 5px;
  flex: none;
}
.bp-progress-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d2c5b3;
  border: 1px solid #b9ad9b;
}
.bp-progress-dot.is-done {
  background: #087f72;
  border-color: #087f72;
}
.bp-progress-dot.is-current {
  background: #c95440;
  border-color: #c95440;
  transform: scale(1.2);
}
.bp-side {
  grid-area: decision;
  display: flex;
  flex-direction: column;
  background: #fffaf2;
  overflow: auto;
}
.bp-current {
  order: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px 14px;
  align-items: start;
}
.bp-current,
.bp-notes,
.bp-question,
.bp-review-learn {
  padding: 12px;
  border-bottom: 2px solid #e0d2bf;
}
.bp-question {
  order: 1;
  min-height: 0;
  overflow: visible;
  border-bottom: 0;
}
.bp-question,
.bp-current,
.bp-notes {
  flex: 0 0 auto;
}
.bp-kicker {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--bp-readable-soft);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.bp-kicker b {
  color: #075f55;
}
.bp-current .bp-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.bp-shell:not(.bp-shell--review) .bp-current .bp-kicker {
  display: none;
}
.bp-shell:not(.bp-shell--review) .bp-current {
  gap: 6px;
  padding: 10px 12px;
}
.bp-shell:not(.bp-shell--review) .bp-current h3 {
  font-size: 17px;
  line-height: 1.1;
}
.bp-shell:not(.bp-shell--review) .bp-current p {
  font-size: 13px;
  line-height: 1.32;
}
.bp-shell:not(.bp-shell--review) .bp-vitals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 0;
}
.bp-shell:not(.bp-shell--review) .bp-vital {
  padding: 5px 6px;
}
.bp-shell:not(.bp-shell--review) .bp-vital span {
  font-size: 10.5px;
}
.bp-shell:not(.bp-shell--review) .bp-vital b {
  margin-top: 1px;
  font-size: 13px;
}
.bp-current h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.14;
}
.bp-current p,
.bp-question h4 {
  margin: 0;
  color: var(--bp-readable-muted);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.45;
}
.bp-current p {
  margin: 0;
}
.bp-vitals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px;
  margin-top: 2px;
}
.bp-vital,
.bp-note {
  border: 1px solid #cdbda9;
  border-radius: 8px;
  background: #fff6e9;
}
.bp-vital {
  padding: 7px;
}
.bp-vital span,
.bp-note b {
  display: block;
  color: var(--bp-readable-soft);
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
}
.bp-vital b {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
}
.bp-notes {
  order: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.bp-notes .bp-kicker {
  grid-column: 1 / -1;
}
.bp-note {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  padding: 7px;
}
.bp-note span {
  color: var(--bp-readable-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.38;
}
.bp-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-top: 9px;
}
.bp-choice {
  width: 100%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px;
  text-align: left;
  border: 2px solid #d3c5b2;
  border-radius: 10px;
  background: #fffaf1;
  transition: border-color 0.14s, box-shadow 0.14s, opacity 0.14s, transform 0.1s;
}
.bp-choices .bp-choice-0 {
  border-left: 6px solid #087f72;
}
.bp-choices .bp-choice-1 {
  border-left: 6px solid #b27319;
}
.bp-choices .bp-choice-2 {
  border-left: 6px solid #c95440;
}
.bp-choice:hover:not(:disabled),
.bp-choice:focus-visible {
  border-color: #087f72;
  box-shadow: 0 8px 18px rgba(8, 127, 114, 0.13);
}
.bp-choice:disabled {
  cursor: default;
}
.bp-choice.is-picked {
  border-color: #087f72;
  background: #eef8f4;
}
.bp-choice.is-dimmed {
  opacity: 0.42;
}
.bp-choice-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  background: rgba(8, 127, 114, 0.11);
  color: #064f48;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
}
.bp-choice-1 .bp-choice-key {
  background: rgba(178, 115, 25, 0.13);
  color: #7b4c0d;
}
.bp-choice-2 .bp-choice-key {
  background: rgba(201, 84, 64, 0.13);
  color: #8f3327;
}
.bp-choice-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.bp-choice-copy b {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}
.bp-choice-copy span {
  color: var(--bp-readable-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.38;
}
.bp-choice-copy em {
  color: #075f55;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}
.bp-choice-impact {
  display: inline-block;
}
.bp-choice-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 3px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(8, 127, 114, 0.1);
  color: #064f48;
  font-size: 11px;
  font-weight: 950;
  animation: bpChoiceStatus 0.85s ease-in-out infinite alternate;
}
.bp-choice-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}
@keyframes bpChoiceStatus {
  from {
    opacity: 0.68;
  }
  to {
    opacity: 1;
  }
}
.bp-shell--review .bp-side {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.bp-review-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px 12px;
  list-style: none;
}
.bp-review-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 8px;
  padding: 8px;
  border: 1px solid #d7cbb9;
  border-radius: 8px;
  background: #fbf2e6;
}
.bp-review-list li > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(8, 127, 114, 0.11);
  color: #065f56;
  font-size: 11px;
  font-weight: 900;
  grid-row: span 3;
}
.bp-review-list b,
.bp-review-list em {
  font-size: 12px;
  line-height: 1.2;
}
.bp-review-list em {
  color: #157a6a;
  font-style: normal;
  font-weight: 900;
}
.bp-review-list p {
  grid-column: 2;
  margin: 3px 0 0;
  color: var(--bp-readable-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.38;
}
.bp-review-learn {
  border-top: 2px solid #e0d2bf;
}
.bp-review-learn h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
}
.bp-review-learn ul {
  margin: 0;
  padding-left: 18px;
  color: var(--bp-readable-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.bp-review-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 2px solid #e0d2bf;
}

@media (max-width: 820px) {
  #view2.branch-path-active .v2-head {
    gap: 6px;
    min-height: 38px;
    padding: 4px 8px;
    flex-wrap: nowrap;
  }
  #view2.branch-path-active .v2-head .roomdot,
  #view2.branch-path-active .v2-head > .chip {
    display: none;
  }
  #view2.branch-path-active .v2-head > div {
    min-width: 0;
  }
  #view2.branch-path-active #v2-title {
    display: block;
    line-height: 1.25;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  #view2.branch-path-active #v2-title::before {
    content: "Night Bleed";
    color: #27323a;
    font-size: 13px;
    font-weight: 950;
  }
  #view2.branch-path-active #v2-sub {
    display: none;
  }
  #view2.branch-path-active #v2-exit {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 0;
    white-space: nowrap;
  }
  #view2.branch-path-active #v2-exit::after {
    content: "Exit";
    font-size: 11px;
    font-weight: 900;
  }
  #view2.branch-path-active .v2-msg-toggle {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
  }
  #view2.branch-path-active .v2-msg-toggle .fp-handle-ico {
    font-size: 16px;
  }
  .bp-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto max-content minmax(300px, 42vh);
    grid-template-areas:
      "brief"
      "decision"
      "map";
    align-content: start;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
    overflow: auto;
  }
  .bp-shell:has(.bp-map-dock) {
    grid-template-rows: auto minmax(200px, 30vh) max-content;
    grid-template-areas:
      "brief"
      "map"
      "decision";
  }
  .bp-shell--full-map {
    grid-template-rows: auto minmax(188px, 22vh) max-content;
    grid-template-areas:
      "brief"
      "map"
      "decision";
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock) {
    grid-template-rows: auto minmax(156px, 18vh) max-content;
    grid-template-areas:
      "brief"
      "map"
      "decision";
  }
  .bp-shell:has(.bp-map-dock) .bp-map-panel {
    min-height: 200px;
  }
  .bp-shell:has(.bp-map-dock) .bp-map-controls {
    top: auto;
    bottom: 10px;
  }
  .bp-map-controls .iconb {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .bp-shell:has(.bp-map-dock) .bp-map-dock {
    width: min(260px, calc(100% - 126px));
    max-height: 76px;
    padding: 7px 9px;
  }
  .bp-shell:has(.bp-map-dock) .bp-map-dock span {
    font-size: 13.5px;
    line-height: 1.05;
    letter-spacing: 0;
  }
  .bp-shell:has(.bp-map-dock) .bp-map-dock b {
    font-size: 14px;
    line-height: 1.18;
  }
  .bp-shell:has(.bp-map-dock) .bp-map-dock em {
    display: none;
  }
  .bp-shell:has(.bp-map-dock) .bp-question {
    padding: 8px 10px;
  }
  .bp-shell:has(.bp-map-dock) .bp-question h4 {
    display: block;
    overflow: visible;
    color: var(--bp-readable-text);
    font-size: 14.5px;
    line-height: 1.34;
  }
  .bp-shell:has(.bp-map-dock) .bp-choices {
    gap: 6px;
    padding-top: 7px;
  }
  #view2.branch-path-active .bp-choice {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 0;
    gap: 8px;
    padding: 9px 10px;
  }
  #view2.branch-path-active .bp-choice-key {
    min-height: 32px;
    padding: 0 6px;
    font-size: 13.5px;
    line-height: 1.05;
  }
  #view2.branch-path-active .bp-choice-copy {
    gap: 3px;
  }
  #view2.branch-path-active .bp-choice-copy b {
    font-size: 14.5px;
    line-height: 1.25;
  }
  #view2.branch-path-active .bp-choice-copy span {
    display: block;
    overflow: visible;
    font-size: 14px;
    line-height: 1.36;
  }
  #view2.branch-path-active .bp-choice-copy em {
    font-size: 13.5px;
    line-height: 1.16;
  }
  .bp-shell:has(.bp-map-dock) .bp-choice {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 0;
    gap: 8px;
    padding: 9px 10px;
  }
  .bp-shell:has(.bp-map-dock) .bp-choice-key {
    min-height: 32px;
    padding: 0 6px;
    font-size: 13.5px;
    line-height: 1.05;
  }
  .bp-shell:has(.bp-map-dock) .bp-choice-copy {
    gap: 3px;
  }
  .bp-shell:has(.bp-map-dock) .bp-choice-copy b {
    font-size: 14.5px;
    line-height: 1.25;
  }
  .bp-shell:has(.bp-map-dock) .bp-choice-copy span {
    display: block;
    overflow: visible;
    font-size: 14px;
    line-height: 1.36;
  }
  .bp-shell:has(.bp-map-dock) .bp-choice-copy em {
    font-size: 13.5px;
    line-height: 1.16;
  }
  body.fp-message-rail-open #view2.branch-path-active .bp-choice {
    gap: 8px;
    padding: 9px 10px;
  }
  body.fp-message-rail-open #view2.branch-path-active .bp-choice-key {
    min-height: 32px;
    padding: 0 6px;
    font-size: 13.5px;
    line-height: 1.05;
  }
  body.fp-message-rail-open #view2.branch-path-active .bp-choice-copy b {
    font-size: 14.5px;
    line-height: 1.25;
  }
  body.fp-message-rail-open #view2.branch-path-active .bp-choice-copy span {
    font-size: 14px;
    line-height: 1.36;
  }
  body.fp-message-rail-open #view2.branch-path-active .bp-choice-copy em {
    font-size: 13.5px;
    line-height: 1.16;
  }
  #view2.branch-path-active .bp-current p {
    font-size: 14px;
    line-height: 1.42;
  }
  #view2.branch-path-active .bp-kicker {
    font-size: 13.5px;
    line-height: 1.2;
  }
  #view2.branch-path-active .bp-note b {
    font-size: 13.5px;
    line-height: 1.15;
  }
  #view2.branch-path-active .bp-note span {
    font-size: 14px;
    line-height: 1.42;
  }
  .bp-brief {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-height: 58px;
    padding: 6px 8px;
    overflow: visible;
  }
  .bp-brief-copy,
  .bp-brief-progress {
    display: none;
  }
  .bp-stage {
    min-width: 0;
    padding: 6px 8px;
  }
  .bp-stage span {
    display: none;
  }
  .bp-stage b {
    font-size: 14.5px;
  }
  .bp-stage em {
    font-size: 13.5px;
  }
  .bp-tools {
    justify-content: flex-end;
  }
  .bp-tools .iconb,
  .bp-tools .bp-modebtn,
  .bp-tools .bp-backbtn {
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    font-size: 13.5px;
  }
  .bp-map-panel {
    min-height: 300px;
  }
  .bp-shell--full-map .bp-map-panel {
    align-self: stretch;
    height: auto;
    min-height: 188px;
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock) .bp-map-panel {
    min-height: 156px;
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock) .bp-question {
    padding: 7px 9px;
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock) .bp-question h4 {
    font-size: 14.5px;
    line-height: 1.3;
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock) .bp-choices {
    gap: 5px;
    padding-top: 5px;
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock) .bp-choice {
    gap: 6px;
    padding: 8px 9px;
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock) .bp-choice-copy b {
    font-size: 14.5px;
    line-height: 1.22;
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock) .bp-choice-copy span {
    font-size: 14px;
    line-height: 1.32;
  }
  .bp-shell.bp-shell--full-map:has(.bp-map-dock):has(.bp-choice.is-picked) .bp-choice.is-dimmed {
    display: none;
  }
  .bp-side {
    display: flex;
    flex-direction: column;
    align-self: start;
    height: max-content;
    min-height: 0;
    overflow: visible;
  }
  .bp-shell--review .bp-current {
    order: 1;
  }
  .bp-shell--review .bp-review-actions {
    order: 2;
    justify-content: stretch;
  }
  .bp-shell--review .bp-review-actions .gbtn {
    flex: 1 1 calc(50% - 6px);
    min-height: 44px;
    padding: 8px 10px;
    white-space: normal;
  }
  .bp-shell--review #bp-find-mark {
    flex: 1 1 100%;
  }
  .bp-shell--review .bp-review-list {
    order: 3;
  }
  .bp-shell--review .bp-review-list li {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 9px;
    padding: 9px;
  }
  .bp-shell--review .bp-review-list li > span {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .bp-shell--review .bp-review-list b,
  .bp-shell--review .bp-review-list em {
    font-size: 13.5px;
    line-height: 1.24;
  }
  .bp-shell--review .bp-review-list p {
    font-size: 14px;
    line-height: 1.4;
  }
  .bp-shell--review .bp-review-learn {
    order: 4;
  }
  .bp-question {
    order: 1;
    overflow: visible;
  }
  .bp-current {
    order: 2;
  }
  .bp-notes {
    order: 3;
  }
  .bp-question,
  .bp-current,
  .bp-notes {
    flex: 0 0 auto;
  }
  .bp-choices {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 620px) {
  .bp-shell {
    padding: 7px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .bp-map-head,
  .bp-map-foot {
    grid-template-columns: 1fr;
  }
  .bp-vitals {
    grid-template-columns: 1fr;
  }
  #view2.branch-path-active .bp-vitals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  #view2.branch-path-active .bp-vital {
    min-width: 0;
    padding: 7px 8px;
  }
  #view2.branch-path-active .bp-vital span {
    font-size: 13.5px;
    line-height: 1.1;
  }
  #view2.branch-path-active .bp-vital b {
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .bp-current {
    grid-template-columns: 1fr;
  }
  .bp-current h3,
  .bp-current p,
  .bp-vitals {
    grid-column: 1;
  }
  .bp-choice {
    grid-template-columns: 1fr;
  }
  .bp-shell:has(.bp-map-dock) .bp-choice {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .bp-note {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp-branch.is-drawing,
  .bp-branch.is-selected.is-landing,
  .bp-branch.is-available.is-arriving,
  .bp-route-chip.is-arriving,
  .bp-node-halo,
  .bp-node-wrap.is-pending-arrival .bp-node,
  .bp-node-wrap.is-arriving .bp-node,
  .bp-node-wrap.is-current .bp-node {
    animation: none;
  }
}

/* ---------- Mark conversation ---------- */
.v2-scenewrap:has(.mark-photo-scene) {
  height: clamp(240px, 42vh, 460px);
  min-height: 220px;
  background: #1f2630;
}
.mark-photo-scene {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.08), rgba(20, 28, 34, 0.18) 48%, rgba(20, 28, 34, 0.34)),
    #1f2630;
}
.mark-photo-scene img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.22));
}
.mark-photo-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 28, 34, 0) 54%, rgba(20, 28, 34, 0.42) 100%);
  pointer-events: none;
}
.mark-photo-caption {
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: auto;
  transform: none;
  z-index: 2;
  margin: 0;
  max-width: min(360px, calc(100% - 28px));
  background: rgba(255, 255, 255, 0.95);
  border-color: #5868d8;
  white-space: normal;
}
#view2:has(.mark-simli-intro) {
  display: flex;
  flex-direction: column;
  --mark-entry-head: 72px;
  background: #eef3f1;
}
#view2:has(.mark-simli-intro) .v2-head {
  flex: none;
  z-index: 4;
}
#view2:has(.mark-simli-intro) .v2-scenewrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  border-bottom: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), rgba(238, 243, 241, 0.2) 42%, rgba(203, 218, 220, 0.64) 100%),
    #dfe7e8;
}
#view2:has(.mark-simli-intro) .v2-panels {
  position: absolute;
  inset: var(--mark-entry-head) 0 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  place-content: center;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  padding: clamp(18px, 3vw, 34px);
  background: transparent;
}
#view2:has(.mark-simli-intro) .ffcard {
  width: 100%;
  margin: 0;
  box-shadow: 0 18px 44px rgba(39, 47, 52, 0.14);
}
.mark-entry-card {
  pointer-events: auto;
  text-align: center;
  justify-self: center;
  align-self: center;
  width: min(460px, 100%);
  max-width: 460px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}
.mark-entry-card h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.12;
  text-wrap: balance;
}
.mark-entry-card p {
  text-align: center;
}
body.fp-view2-active:has(.mark-simli-intro) .fp-msg {
  display: none;
}
.mark-simli-intro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
  background:
    linear-gradient(180deg, rgba(21, 41, 49, 0.08), rgba(21, 41, 49, 0.16)),
    #dce5e7;
}
.mark-door-photo {
  display: block;
  width: min(520px, 78vw);
  height: min(760px, calc(100% - 48px));
  object-fit: cover;
  object-position: center;
  filter: saturate(0.98) contrast(1.02);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(31, 48, 58, 0.28);
}
#view2:has(.mark-simli-scene) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  grid-template-rows: auto minmax(0, 1fr);
  background: #f4efe5;
}
#view2:has(.mark-simli-scene) .v2-head {
  grid-column: 1 / -1;
}
#view2:has(.mark-simli-scene) .v2-scenewrap {
  display: block;
  grid-column: 1;
  grid-row: 2;
  height: auto;
  min-height: 0;
  border-right: 2px solid var(--line);
  border-bottom: none;
  background: #161b22;
}
#view2:has(.mark-simli-scene) .v2-panels {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background: #f4efe5;
}
body.fp-view2-active:has(.mark-simli-scene) .fp-msg {
  display: none;
}
body.fp-message-rail-open #view2:has(.mark-simli-scene):has(.mark-framework-console) {
  right: 0;
}
body.fp-message-rail-open #view2:has(.mark-simli-scene):has(.mark-framework-console) .v2-scenewrap {
  display: block;
}
body.fp-message-rail-open #view2:has(.mark-simli-scene):has(.mark-framework-console) .v2-panels {
  padding-right: 14px;
  padding-bottom: 14px;
}
.mark-simli-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 18%, rgba(80, 125, 190, 0.28), transparent 34%),
    linear-gradient(180deg, #1e252f 0%, #111720 100%);
  color: #fff;
}
.mark-simli-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mark-simli-topline span {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.72;
}
.mark-simli-topline b {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  font-weight: 900;
}
.mark-simli-status {
  flex: none;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.mark-simli-status[data-status="connected"],
.mark-simli-status[data-status="speaking"] {
  border-color: rgba(82, 214, 154, 0.5);
  background: rgba(82, 214, 154, 0.14);
}
.mark-simli-status[data-status="waiting_video"] {
  border-color: rgba(245, 184, 64, 0.55);
  background: rgba(245, 184, 64, 0.14);
}
.mark-simli-status[data-status="text_ready"] {
  border-color: rgba(31, 160, 140, 0.64);
  background: rgba(31, 160, 140, 0.18);
}
.mark-simli-status[data-status="audio_blocked"] {
  border-color: rgba(245, 184, 64, 0.72);
  background: rgba(245, 184, 64, 0.2);
}
.mark-simli-status[data-status="error"] {
  border-color: rgba(245, 110, 92, 0.58);
  background: rgba(245, 110, 92, 0.16);
}
.mark-simli-stage {
  position: relative;
  min-height: 0;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background: #090d12;
}
.mark-simli-scene--heygen .mark-simli-stage {
  justify-self: center;
  width: min(100%, 330px);
  aspect-ratio: 9 / 16;
  min-height: 0;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28);
}
.mark-simli-video,
.mark-heygen-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #090d12;
}
.mark-simli-video[hidden],
.mark-heygen-video[hidden] {
  display: none !important;
}
.mark-simli-scene--heygen .mark-heygen-video {
  object-fit: cover;
  object-position: center;
}
.mark-simli-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(9, 13, 18, 0.94);
}
.mark-simli-placeholder[hidden] {
  display: none !important;
}
.mark-simli-placeholder b {
  font-size: 28px;
  font-weight: 900;
}
.mark-simli-placeholder span {
  max-width: 360px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.mark-simli-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ff-convo--simli {
  height: 100%;
  max-width: none;
  margin: 0;
}
.ff-convo--simli .ff-chat {
  max-height: none;
  min-height: 0;
}
.ff-ai-state,
.ff-empty {
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
}
.ff-ai-state {
  margin-bottom: 9px;
  background: #fbf7ee;
}
.ff-ai-state--warn {
  border-color: rgba(212, 86, 78, 0.4);
  background: #fff1ef;
  color: #8f332d;
}
.ff-ai-state--textmode {
  border-color: rgba(31, 160, 140, 0.3);
  background: #edf8f5;
  color: var(--brand-deep);
}
.ff-convo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-column: 1 / -1;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.ff-chat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 34vh;
  overflow: auto;
  padding: 4px;
}
.ff-msg {
  max-width: 82%;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 15px;
  font-weight: 600;
}
.ff-msg .who {
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 3px;
}
.ff-msg.you {
  align-self: flex-end;
  background: #d9efe9;
  color: #14463d;
  border-bottom-right-radius: 5px;
}
.ff-msg.mark {
  align-self: flex-start;
  background: #fff;
  border: 2px solid var(--line);
  border-bottom-left-radius: 5px;
}
.ff-q {
  background: #fff;
  border: 2.5px solid var(--line);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 8px 22px rgba(94, 78, 43, 0.1);
}
.ff-q h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
}
.ff-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 13px;
  padding: 11px 14px;
  margin-bottom: 9px;
  transition:
    border-color 0.1s,
    transform 0.06s;
}
.ff-opt:last-child {
  margin-bottom: 0;
}
.ff-opt:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}
.ff-opt:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}
.ff-opt:disabled:hover {
  border-color: var(--line);
  transform: none;
}
.ff-opt b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 3px;
}
.ff-opt span {
  font-size: 11.5px;
  color: var(--ink3);
  font-weight: 800;
}
.ff-convo--simli .scenario-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mark-simli-choice {
  margin-bottom: 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  border-color: rgba(31, 160, 140, 0.24);
  box-shadow: 0 9px 22px rgba(39, 50, 58, 0.08);
}
.mark-simli-choice:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 26px rgba(31, 160, 140, 0.14);
}
.mark-simli-choice .mark-simli-choice-text {
  display: block;
  color: var(--ink);
  font-size: clamp(14px, 1.16vw, 17px);
  font-weight: 900;
  line-height: 1.38;
}
.mark-framework-console {
  width: 100%;
  max-height: none;
  margin: 0;
  overflow: visible;
}
.mark-framework-console > .scenario-stage {
  display: none;
}
.mark-framework-console .after-call-objective {
  align-items: flex-start;
}
.mark-framework-grid {
  grid-template-columns: minmax(0, 1fr);
}
.mark-framework-dialogue {
  grid-template-rows: minmax(86px, auto);
  padding: 10px;
}
.mark-framework-dialogue .after-call-chat {
  max-height: 160px;
}
.mark-framework-choice-panel {
  grid-template-rows: auto minmax(0, auto) auto auto;
}
.mark-framework-choice-panel .after-call-response-grid {
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}
.mark-framework-response {
  min-height: 0;
  padding: 13px 14px;
}
.mark-framework-response b {
  font-size: 14.8px;
  line-height: 1.3;
}
.mark-framework-response > span:not(.news-response-meta) {
  font-size: 12.6px;
}
.mark-framework-console .after-call-selected-mobile {
  display: block;
}
.mark-framework-console .after-call-framework-card .after-call-selected-response {
  display: none;
}

@media (min-width: 821px) {
  #view2:has(.mark-simli-scene):has(.mark-framework-console) {
    grid-template-columns: minmax(210px, 0.72fr) minmax(220px, 0.78fr) minmax(420px, 1.45fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(12px, 1.4vw, 20px);
    row-gap: 0;
    overflow: hidden;
    padding: 0 clamp(12px, 1.4vw, 20px) clamp(12px, 1.4vw, 20px);
    background: #f4efe5;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .v2-head {
    margin-inline: calc(clamp(12px, 1.4vw, 20px) * -1);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .v2-scenewrap {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    place-items: center;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    z-index: 1;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .v2-panels {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(210px, 0.72fr) minmax(220px, 0.78fr) minmax(420px, 1.45fr);
    grid-template-rows: auto auto minmax(82px, 0.35fr) minmax(0, 2fr) auto;
    column-gap: clamp(12px, 1.4vw, 20px);
    row-gap: 10px;
    min-height: 0;
    overflow: hidden;
    padding: 10px 0 68px;
    background: transparent;
    pointer-events: none;
    z-index: 2;
  }
  body.fp-message-rail-open #view2:has(.mark-simli-scene):has(.mark-framework-console) .v2-panels {
    grid-template-columns: minmax(210px, 0.72fr) minmax(220px, 0.78fr) minmax(420px, 1.45fr);
    grid-template-rows: auto auto minmax(82px, 0.35fr) minmax(0, 2fr) auto;
    padding: 10px 0 68px;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-scene {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--ink);
    pointer-events: auto;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-topline {
    display: none;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-scene--heygen .mark-simli-stage {
    align-self: center;
    justify-self: center;
    width: clamp(220px, 24vw, 330px);
    max-height: calc(100svh - 180px);
    border-color: rgba(39, 50, 58, 0.18);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(39, 50, 58, 0.18);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-heygen-video {
    background: #fff;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-placeholder {
    border: 1px solid rgba(39, 50, 58, 0.14);
    background: rgba(255, 255, 255, 0.94);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-placeholder b {
    color: var(--ink);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-placeholder span {
    color: var(--ink2);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-controls {
    justify-content: center;
    width: min(100%, 330px);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-controls .gbtn {
    padding: 8px 12px;
    font-size: 11.5px;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-console {
    display: contents;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-console > .after-call-objective {
    grid-column: 3;
    grid-row: 1;
    pointer-events: auto;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-console > .after-call-framework-rail {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    pointer-events: auto;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-console > .ff-ai-state {
    grid-column: 3;
    grid-row: 5;
    margin: 0;
    pointer-events: auto;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-grid {
    display: contents;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .after-call-framework-card {
    grid-column: 1;
    grid-row: 2 / 6;
    max-height: calc(100svh - 132px);
    pointer-events: auto;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-dialogue {
    grid-column: 3;
    grid-row: 3;
    padding: 8px 10px;
    pointer-events: auto;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-choice-panel {
    grid-column: 3;
    grid-row: 4;
    gap: 8px;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    pointer-events: auto;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-dialogue .after-call-chat {
    max-height: clamp(104px, 16vh, 184px);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-choice-panel .after-call-response-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-response {
    gap: 4px;
    padding: 9px 11px;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-response b {
    font-size: 14.1px;
    line-height: 1.22;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-response > span:not(.news-response-meta) {
    font-size: 11.3px;
    line-height: 1.22;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-console .after-call-selected-mobile {
    display: none;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-console .after-call-framework-card .after-call-selected-response {
    display: grid;
  }
}
.ff-flip {
  margin: 6px 18px 2px;
  background: #fffaf0;
  border: 2px dashed var(--sun-deep);
  border-radius: 13px;
  padding: 11px 14px;
  text-align: left;
}
.ff-flip b {
  display: block;
  font-size: 12.5px;
  color: var(--sun-deep);
  margin-bottom: 4px;
}
.ff-flip span {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink2);
}

@media (max-width: 820px) {
  body.fp-view2-active:has(.mark-simli-intro) .fp-msg.is-mobile.is-mobile-open,
  body.fp-view2-active:has(.mark-simli-scene) .fp-msg.is-mobile.is-mobile-open {
    display: block;
  }
  #view2:has(.mark-simli-intro) {
    display: flex;
    --mark-entry-head: 52px;
  }
  #view2:has(.mark-simli-intro) .v2-head {
    gap: 6px;
    min-height: 38px;
    padding: 5px 8px;
    flex-wrap: nowrap;
  }
  #view2:has(.mark-simli-intro) .v2-head .roomdot,
  #view2:has(.mark-simli-intro) .v2-head > .chip {
    display: none;
  }
  #view2:has(.mark-simli-intro) .v2-head > div {
    min-width: 0;
  }
  #view2:has(.mark-simli-intro) #v2-title {
    display: block;
    line-height: 1.25;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.mark-simli-intro) #v2-title::before {
    content: "Mark: first contact";
    color: #27323a;
    font-size: 13px;
    font-weight: 950;
  }
  #view2:has(.mark-simli-intro) #v2-sub {
    display: none;
  }
  #view2:has(.mark-simli-intro) #v2-exit {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.mark-simli-intro) #v2-exit::after {
    content: "Exit";
    font-size: 11px;
    font-weight: 900;
  }
  #view2:has(.mark-simli-intro) .v2-msg-toggle {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
  }
  #view2:has(.mark-simli-intro) .v2-msg-toggle .fp-handle-ico {
    font-size: 16px;
  }
  #view2:has(.mark-simli-intro) .v2-scenewrap {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border: none;
  }
  #view2:has(.mark-simli-intro) .v2-panels {
    inset: var(--mark-entry-head) 0 0;
    padding: 8px 12px 12px;
    place-items: start center;
    place-content: start center;
    overflow: auto;
  }
  #view2:has(.mark-simli-intro) .ffcard {
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100svh - 72px);
    overflow: auto;
    border-radius: 14px;
  }
  #view2:has(.mark-simli-intro) .mark-entry-card > .sc-band,
  #view2:has(.mark-simli-intro) .mark-entry-card > .scenario-stage {
    display: none;
  }
  #view2:has(.mark-simli-intro) .mark-entry-card h3 {
    line-height: 1.32;
    overflow: visible;
  }
  #view2:has(.mark-simli-intro) .mark-entry-card .gbtn {
    min-height: 44px;
    padding: 9px 12px;
  }
  .mark-door-photo {
    width: min(430px, 78vw);
    height: min(68svh, calc(100% - 24px));
    object-position: center;
  }
  #view2:has(.mark-simli-scene) {
    display: flex;
  }
  #view2:has(.mark-simli-scene) .v2-head {
    gap: 6px;
    min-height: 38px;
    padding: 5px 8px;
    flex-wrap: nowrap;
  }
  #view2:has(.mark-simli-scene) .v2-head .roomdot,
  #view2:has(.mark-simli-scene) .v2-head > .chip {
    display: none;
  }
  #view2:has(.mark-simli-scene) .v2-head > div {
    min-width: 0;
  }
  #view2:has(.mark-simli-scene) #v2-title {
    display: block;
    line-height: 1.25;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.mark-simli-scene) #v2-title::before {
    content: "Mark: first contact";
    color: #27323a;
    font-size: 13px;
    font-weight: 950;
  }
  #view2:has(.mark-simli-scene) #v2-sub {
    display: none;
  }
  #view2:has(.mark-simli-scene) #v2-exit {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.mark-simli-scene) #v2-exit::after {
    content: "Exit";
    font-size: 11px;
    font-weight: 900;
  }
  #view2:has(.mark-simli-scene) .v2-msg-toggle {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
  }
  #view2:has(.mark-simli-scene) .v2-msg-toggle .fp-handle-ico {
    font-size: 16px;
  }
  #view2:has(.mark-simli-scene) .v2-scenewrap {
    height: 43svh;
    min-height: 330px;
    max-height: 430px;
    border-right: none;
    border-bottom: 2px solid var(--line);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .v2-scenewrap {
    height: 26svh;
    min-height: 220px;
    max-height: 240px;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console):has(.ff-ai-state--textmode) .v2-scenewrap {
    height: 150px;
    min-height: 150px;
    max-height: 150px;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console):has(.ff-ai-state--textmode) .mark-simli-scene {
    align-content: center;
    gap: 6px;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console):has(.ff-ai-state--textmode) .mark-simli-stage {
    display: none;
  }
  #view2:has(.mark-simli-scene):has(#mk-review) .v2-scenewrap {
    height: 150px;
    min-height: 150px;
    max-height: 150px;
  }
  #view2:has(.mark-simli-scene):has(#mk-review) .mark-simli-scene {
    align-content: center;
    gap: 6px;
  }
  #view2:has(.mark-simli-scene):has(#mk-review) .mark-simli-stage {
    display: none;
  }
  #view2:has(.mark-simli-scene) .v2-panels {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 10px calc(72px + env(safe-area-inset-bottom));
  }
  #view2:has(.mark-simli-scene) .ff-convo--simli {
    grid-template-rows: auto auto;
    max-height: none;
    overflow: auto;
  }
  #view2:has(.mark-simli-scene) .ff-convo--simli > .scenario-stage {
    display: none;
  }
  #view2:has(.mark-simli-scene) .ff-chat {
    max-height: 104px;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-dialogue {
    min-height: 116px;
    overflow: hidden;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-dialogue .after-call-chat {
    display: flex;
    max-height: 116px;
    overflow: auto;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-choice-panel {
    grid-template-rows: auto max-content auto auto auto;
    max-height: min(230px, 29svh);
    overflow: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-response {
    min-height: max-content;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-console .after-call-selected-mobile .after-call-selected-response b {
    font-size: 14px;
    line-height: 1.38;
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-framework-choice-panel .after-call-response-grid {
    grid-auto-rows: max-content;
    align-content: start;
  }
  #view2:has(.mark-simli-scene) .ff-q {
    max-height: none;
    overflow: visible;
    padding: 8px;
  }
  #view2:has(.mark-simli-scene) .ff-q--status-only {
    align-self: start;
    min-height: 0;
    padding: 10px;
  }
  #view2:has(.mark-simli-scene) .ff-ai-state {
    margin-bottom: 6px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.42;
  }
  #view2:has(.mark-simli-scene) .ff-opt {
    margin-bottom: 0;
    padding: 12px 13px;
  }
  #view2:has(.mark-simli-scene) .ff-opt b {
    font-size: 14.5px;
    line-height: 1.28;
  }
  #view2:has(.mark-simli-scene) .ff-opt span {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.38;
  }
  #view2:has(.mark-simli-scene) .mark-simli-choice .mark-simli-choice-text {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.36;
  }
  .mark-simli-scene {
    padding: 10px;
    gap: 6px;
  }
  #view2:has(.mark-simli-scene) .mark-simli-stage {
    min-height: 0;
    border-radius: 11px;
  }
  #view2:has(.mark-simli-scene) .mark-simli-scene--heygen .mark-simli-stage {
    width: min(56vw, 178px);
  }
  #view2:has(.mark-simli-scene):has(.mark-framework-console) .mark-simli-scene--heygen .mark-simli-stage {
    width: min(33vw, 132px);
  }
  #view2:has(.mark-simli-scene) .mark-simli-placeholder {
    gap: 4px;
    padding: 10px;
  }
  #view2:has(.mark-simli-scene) .mark-simli-placeholder b {
    font-size: 22px;
  }
  #view2:has(.mark-simli-scene) .mark-simli-placeholder span {
    display: none;
  }
  #view2:has(.mark-simli-scene) .mark-simli-topline {
    gap: 8px;
    align-items: flex-start;
  }
  #view2:has(.mark-simli-scene) .mark-simli-topline span {
    font-size: 13.5px;
    line-height: 1.18;
    letter-spacing: 0;
  }
  #view2:has(.mark-simli-scene) .mark-simli-topline b {
    font-size: 15px;
  }
  #view2:has(.mark-simli-scene) .mark-simli-status {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 8px;
    border-width: 1.5px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.22;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
  }
  #view2:has(.mark-simli-scene) .after-call-framework-tab span {
    font-size: 13.5px;
    line-height: 1.08;
  }
  #view2:has(.mark-simli-scene) .after-call-framework-tab b {
    font-size: 14px;
    line-height: 1.16;
  }
  #view2:has(.mark-simli-scene) .mark-simli-controls {
    display: none;
  }
  .mark-simli-controls .gbtn {
    padding: 7px 10px;
    font-size: 11px;
  }
  #view2:has(.mark-photo-scene) .v2-head {
    gap: 8px;
    padding: 8px 10px;
  }
  #view2:has(.mark-photo-scene) .v2-head .roomdot {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
  }
  #view2:has(.mark-photo-scene) .v2-head b {
    font-size: 14px;
  }
  #view2:has(.complaint-photo-scene) .v2-head {
    gap: 6px;
    min-height: 40px;
    padding: 5px 8px;
    flex-wrap: nowrap;
  }
  #view2:has(.complaint-photo-scene) .v2-head .roomdot,
  #view2:has(.complaint-photo-scene) .v2-head > .chip {
    display: none;
  }
  #view2:has(.complaint-photo-scene) .v2-head > div {
    min-width: 0;
  }
  #view2:has(.complaint-photo-scene) #v2-title {
    display: block;
    line-height: 1.25;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.complaint-photo-scene) #v2-title::before {
    content: "When the GMC is mentioned";
    color: #27323a;
    font-size: 13px;
    font-weight: 950;
  }
  #view2:has(.complaint-photo-scene) #v2-sub {
    display: none;
  }
  #view2:has(.complaint-photo-scene) #v2-exit {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.complaint-photo-scene) #v2-exit::after {
    content: "Exit";
    font-size: 11px;
    font-weight: 900;
  }
  #view2:has(.complaint-photo-scene) .v2-msg-toggle {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
  }
  #view2:has(.complaint-photo-scene) .v2-scenewrap {
    height: 14svh;
    min-height: 82px;
    max-height: 126px;
  }
  #view2:has(.complaint-photo-scene):has(.scenario-entry-card) .v2-scenewrap {
    height: 30svh;
    min-height: 190px;
    max-height: 300px;
  }
  #view2:has(.complaint-photo-scene) .v2-panels {
    min-height: 0;
    overflow: auto;
  }
  #view2:has(.complaint-photo-scene) .ffcard > .scenario-stage--complaint {
    display: none;
  }
  #view2:has(.complaint-photo-scene) .scenario-entry-card--complaint > .sc-band--lg {
    display: none;
  }
  #view2:has(.complaint-photo-scene) .scenario-entry-card--complaint .scenario-entry-copy {
    padding: 8px 14px 4px;
  }
  #view2:has(.complaint-console) .v2-head {
    min-height: 40px;
    padding: 5px 8px;
    flex-wrap: nowrap;
  }
  #view2:has(.complaint-console) .v2-head .roomdot,
  #view2:has(.complaint-console) .v2-head > .chip {
    display: none;
  }
  #view2:has(.complaint-console) #v2-sub {
    display: none;
  }
  #view2:has(.complaint-console) #v2-title {
    display: block;
    line-height: 1.25;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.complaint-console) #v2-title::before {
    content: "When the GMC is mentioned";
    color: #27323a;
    font-size: 13px;
    font-weight: 950;
  }
  #view2:has(.complaint-console) #v2-exit {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 0;
    white-space: nowrap;
  }
  #view2:has(.complaint-console) #v2-exit::after {
    content: "Exit";
    font-size: 11px;
    font-weight: 900;
  }
  #view2:has(.complaint-console) .v2-scenewrap {
    height: 15svh;
    min-height: 86px;
    max-height: 124px;
  }
  #view2:has(.mark-photo-scene) .v2-head > .chip {
    display: none;
  }
  #view2:has(.mark-photo-scene) #v2-exit {
    padding: 7px 9px;
    font-size: 11px;
  }
  #view2:has(.complaint-photo-scene) .v2-head .flex-spacer {
    display: none;
  }
  #view2:has(.complaint-photo-scene) .v2-head > div {
    flex: 1 1 auto;
    overflow: hidden;
  }
  #view2:has(.complaint-photo-scene) #v2-exit {
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    padding: 5px 8px;
    font-size: 0;
    overflow: hidden;
  }
  .v2-scenewrap:has(.mark-photo-scene) {
    height: 25svh;
    min-height: 150px;
    max-height: 220px;
  }
  .mark-photo-scene img {
    object-position: center;
  }
  .mark-photo-caption {
    left: 10px;
    top: 9px;
    bottom: auto;
    max-width: calc(100vw - 20px);
  }
  #view2:has(.mark-photo-scene) .v2-panels {
    min-height: 0;
    overflow: hidden;
    gap: 8px;
    padding: 8px 10px 10px;
  }
  #view2:has(.mark-photo-scene) .ffcard {
    width: 100%;
    max-height: calc(100svh - 250px);
    border-radius: 14px;
  }
  #view2:has(.mark-photo-scene) .scenario-entry-card {
    max-height: calc(100svh - 270px);
  }
  #view2:has(.mark-photo-scene) .ffcard h3 {
    margin: 10px 13px 4px;
    font-size: 18px;
  }
  #view2:has(.mark-photo-scene) .scenario-entry-copy h3 {
    margin: 0;
    font-size: 22px;
  }
  #view2:has(.mark-photo-scene) .ffcard > p {
    margin: 0 13px 7px;
    font-size: 14px;
    line-height: 1.45;
  }
  #view2:has(.complaint-photo-scene) .v2-panels {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .ff-convo {
    display: grid;
    grid-template-rows: minmax(78px, 0.74fr) auto;
    gap: 8px;
    max-width: none;
    height: 100%;
    max-height: calc(100svh - 260px);
    overflow: hidden;
  }
  #view2:has(.complaint-console) .ff-convo {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  #view2:has(.complaint-console) .complaint-console > .scenario-stage {
    display: none;
  }
  #view2:has(.complaint-console) .complaint-choice-panel {
    order: 2;
    max-height: none;
    overflow: visible;
  }
  #view2:has(.complaint-console) .ff-chat {
    order: 1;
    max-height: 145px;
  }
  .ff-chat {
    min-height: 0;
    max-height: none;
    gap: 6px;
    padding: 2px;
  }
  .ff-msg {
    max-width: 92%;
    padding: 7px 9px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
  }
  .ff-msg .who {
    font-size: 13.5px;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .ff-q {
    max-height: calc(100svh - 330px);
    overflow: auto;
    border-radius: 12px;
    padding: 10px;
  }
  .ff-q h4 {
    margin-bottom: 7px;
    font-size: 14.5px;
    line-height: 1.22;
  }
  .ff-opt {
    margin-bottom: 6px;
    padding: 10px 11px;
    border-radius: 10px;
  }
  .ff-opt b {
    font-size: 14.5px;
    line-height: 1.28;
    margin-bottom: 2px;
  }
  .ff-opt span {
    display: block;
    font-size: 14px;
    line-height: 1.38;
  }
  .scenario-stage {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 9px 10px;
  }
  .scenario-entry-card .sc-band--lg {
    padding: 7px 12px;
    font-size: 12px;
    line-height: 1.12;
  }
  .scenario-entry-card .scenario-stage {
    margin: 8px 12px 0;
    padding: 7px 10px;
    gap: 3px;
    border-left-width: 4px;
    border-radius: 10px;
  }
  .scenario-entry-card .scenario-stage-eyebrow {
    display: none;
  }
  .scenario-entry-card .scenario-stage b {
    font-size: 13px;
    line-height: 1.12;
  }
  .scenario-entry-card .scenario-stage span {
    margin-top: 0;
    font-size: 12.5px;
    line-height: 1.28;
  }
  .scenario-entry-card .scenario-stage em {
    justify-self: start;
    padding: 4px 7px;
    font-size: 12px;
    line-height: 1;
  }
  .scenario-entry-kicker {
    font-size: 13.5px;
    line-height: 1.18;
    letter-spacing: 0.04em;
  }
  .scenario-entry-copy {
    gap: 4px;
    padding: 10px 14px 5px;
  }
  .scenario-entry-copy h3 {
    font-size: 22px;
    line-height: 1.32;
    overflow: visible;
  }
  .scenario-entry-body {
    gap: 6px;
  }
  .scenario-entry-body p {
    font-size: 14px;
    line-height: 1.46;
  }
  .scenario-entry-boundary {
    margin: 6px 14px;
    padding: 9px 10px;
  }
  .scenario-entry-boundary b {
    font-size: 13.5px;
    line-height: 1.2;
    letter-spacing: 0.035em;
  }
  .scenario-entry-boundary span {
    font-size: 14px;
    line-height: 1.42;
  }
  .scenario-entry-card .scenario-support-strip,
  .scenario-entry-card .after-call-framework-preview {
    margin: 6px 14px 0;
  }
  .scenario-entry-card .scenario-actions-row {
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
    margin: 8px 14px 0;
    padding-top: 8px;
  }
  .scenario-entry-card .scenario-actions-row .gbtn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.15;
  }
  .scenario-stage em {
    justify-self: start;
  }
  .scenario-actions-row {
    margin: 8px 12px 0;
  }
  .scenario-support-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .scenario-support-strip span {
    font-size: 13.5px;
    line-height: 1.18;
  }
  .scenario-support-strip .linkbtn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
  }
  .after-call-framework-chip {
    padding: 6px 6px;
    font-size: 13.5px;
    line-height: 1.12;
  }
}

@media (max-width: 820px) {
  .explainer {
    width: calc(100vw - 28px);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Message Center (unified messaging) — desktop sidebar + mobile bar
   ============================================================ */
.fp-msg {
  position: fixed;
  z-index: 45;
}
.fp-iconbtn {
  min-width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 2px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 900;
  display: grid;
  place-items: center;
  padding: 0 7px;
  color: var(--ink);
  flex: none;
}
.fp-iconbtn:hover {
  border-color: var(--brand);
}
.fp-audio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  min-width: 32px;
}
.fp-audio-label {
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
}

/* ----- desktop right sidebar ----- */
.fp-side {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--fp-message-rail-width);
  background: rgba(250, 246, 238, 0.5);
  border-left: 2px solid var(--line);
  box-shadow: -14px 0 40px rgba(94, 78, 43, 0.12);
  display: flex;
  flex-direction: column;
  z-index: 46;
  transition: transform 0.24s ease;
}
.fp-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border-bottom: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
}
.fp-title {
  font-size: 13.5px;
  font-weight: 900;
}
.fp-chips {
  display: flex;
  gap: 5px;
  margin-left: auto;
}
.fp-chip {
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
}
.fp-chip.on {
  background: #ede0f4;
  color: var(--stress);
  border-color: var(--stress);
}
.fp-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fp-empty {
  color: var(--ink3);
  font-size: 12.5px;
  font-weight: 700;
  padding: 16px 4px;
  text-align: center;
}
.fp-row {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--line);
  border-radius: 13px;
  padding: 10px 11px;
  animation: fpIn 0.28s ease;
}
@keyframes fpIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fp-row--guidance {
  border-color: rgba(174, 91, 191, 0.4);
}
.fp-row--event {
  border-color: rgba(31, 160, 140, 0.35);
}
.fp-row--dialogue {
  background: #faf7f1;
}
.fp-row.is-read {
  opacity: 0.82;
}
.fp-row.is-latest {
  background: #fff;
  border-color: rgba(174, 91, 191, 0.62);
  box-shadow:
    inset 4px 0 0 var(--stress),
    0 0 0 1px rgba(174, 91, 191, 0.12),
    0 10px 24px rgba(174, 91, 191, 0.18);
  opacity: 1;
}
.fp-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 1px;
}
.fp-readmark {
  width: 19px;
  height: 13px;
  border-radius: 70% 70% 62% 62%;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 5px;
  border: 1.5px solid rgba(93, 99, 115, 0.26);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink3);
  transform: rotate(-8deg);
}
.fp-readmark::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
}
.fp-readmark--read::after {
  width: 8px;
  height: 2px;
  border-radius: 999px;
}
.fp-readmark--new {
  border-color: rgba(174, 91, 191, 0.62);
  background: #f7ebfb;
  color: var(--stress);
  box-shadow: 0 0 0 3px rgba(174, 91, 191, 0.1);
}
.fp-rowbody {
  min-width: 0;
}
.fp-rowbody b {
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 2px;
}
.fp-rowbody span {
  font-size: 13.25px;
  line-height: 1.55;
  color: var(--ink2);
  font-weight: 600;
}

/* collapse */
.fp-handle {
  position: fixed;
  top: 120px;
  right: 0;
  z-index: 46;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--stress);
  color: #fff;
  border: none;
  border-radius: 12px 0 0 12px;
  padding: 12px 8px;
  box-shadow: -6px 6px 18px rgba(94, 78, 43, 0.22);
}
.fp-handle-ico {
  font-size: 17px;
}
.fp-unread {
  background: #fff;
  color: var(--stress);
  font-size: 10px;
  font-weight: 900;
  border-radius: 999px;
  min-width: 17px;
  padding: 1px 5px;
  text-align: center;
}
.fp-msg.is-collapsed .fp-side {
  transform: translateX(100%);
  pointer-events: none;
}
.fp-msg.is-collapsed .fp-handle {
  display: flex;
}
body.fp-view2-active .fp-msg.is-collapsed .fp-handle {
  display: none;
}
.fp-header-handle {
  position: relative;
  min-width: 42px;
  height: 38px;
  border-radius: 11px;
  border: 2px solid rgba(174, 91, 191, 0.44);
  background: var(--stress);
  color: #fff;
  box-shadow: 0 8px 20px rgba(94, 78, 43, 0.16);
  place-items: center;
  padding: 0 9px;
  flex: none;
}
.fp-header-handle .fp-unread {
  position: absolute;
  top: -7px;
  right: -7px;
}

/* ----- mobile top bar + overlay (hidden on desktop) ----- */
.fp-bar,
.fp-overlay {
  display: none;
}
.fp-msg.is-mobile .fp-side,
.fp-msg.is-mobile .fp-handle {
  display: none !important;
}
.fp-msg.is-mobile.is-mobile-open {
  z-index: 100;
}
.fp-msg.is-mobile .fp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 54px;
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  box-shadow: 0 8px 22px rgba(94, 78, 43, 0.14);
  padding: 7px 10px;
  z-index: 47;
}
.fp-msg.is-mobile .fp-audio-label {
  font-size: 13px;
  line-height: 1.12;
  letter-spacing: 0.02em;
}
.fp-bar-body {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
}
.fp-msg.is-mobile .fp-bar-body {
  display: flex;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
}
.fp-bar-title {
  display: block;
  font-size: 13px;
  line-height: 1.12;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.fp-bar-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink2);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body:has(#view3:not(.hidden)) .fp-msg.is-mobile .fp-bar {
  min-height: 66px;
}
body:has(#view3:not(.hidden)) .fp-msg.is-mobile .fp-bar-text {
  -webkit-line-clamp: 3;
}
body.fp-startle-anchor-phase .fp-msg .fp-bar {
  display: none !important;
  pointer-events: none;
}
body.fp-startle-anchor-phase .fp-msg.is-mobile .fp-bar {
  display: none !important;
  pointer-events: none;
}
.fp-msg.fp-bar-flash .fp-bar {
  animation: fpBar 0.32s ease;
}
body.fp-view2-active:has(.after-call-console) .fp-msg.is-mobile .fp-bar {
  display: none;
}
body.fp-view2-active:has(.complaint-console) .fp-msg.is-mobile .fp-bar {
  display: none;
}
body.fp-view2-active:has(.scenario-entry-card) .fp-msg.is-mobile .fp-bar {
  display: none;
}
body.fp-view2-active:has(.ffcard--done) .fp-msg.is-mobile .fp-bar {
  display: none;
}
body.fp-view2-active:has(#view2.branch-path-active) .fp-msg.is-mobile .fp-bar {
  display: none;
}
body:not(.fp-view2-active):has(.ffcard--scenario[role="dialog"]) .fp-msg.is-mobile .fp-bar {
  display: none;
}
@keyframes fpBar {
  from {
    background: #f3e8fa;
  }
  to {
    background: var(--paper);
  }
}
.fp-msg.is-mobile.is-mobile-open .fp-overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 95;
}

/* keep the top journey HUD clear of the mobile message bar */
@media (max-width: 820px) {
  .objdrawer {
    right: 0;
    width: 100vw;
    max-width: none;
    border-right: 0;
    box-shadow: none;
  }
  .objdrawer .od-h {
    padding: 14px 16px;
  }
  .objdrawer .iconb {
    min-width: 44px;
    height: 44px;
    font-size: 17px;
  }
  .objdrawer .od-kicker {
    display: none;
  }
  .objrow {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    font-size: 14px;
    line-height: 1.28;
  }
  .objrow b {
    grid-column: 2;
    line-height: 1.28;
  }
  .objrow .dot {
    grid-row: 1 / span 3;
    align-self: start;
    margin-top: 5px;
  }
  .objrow span,
  .objrow .chip {
    grid-column: 2;
    justify-self: start;
    font-size: 13px;
    line-height: 1.18;
  }
  .hud--tl {
    top: 72px;
    left: 8px;
    right: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    max-width: none;
    align-items: stretch;
  }
  .hud--tl > .hudpill:first-child,
  #pts-pill {
    display: none;
  }
  .hud--tl .hudpill {
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.985);
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.14;
    box-shadow: 0 4px 12px rgba(94, 78, 43, 0.13);
  }
  .hud--tl .logo,
  #obj-pill,
  #pts-pill {
    min-width: 0;
    white-space: nowrap;
  }
  .route-objective {
    grid-column: auto;
    width: 100%;
    order: 0;
    max-width: none;
    min-height: 44px;
    padding: 8px 12px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    font-size: 13px;
  }
}

@media (max-width: 820px) {
  #view2 .ff-opt b {
    font-size: 14.5px;
    line-height: 1.28;
  }
  #view2 .ff-opt span {
    font-size: 14px;
    line-height: 1.38;
  }
  #view2 .panel--brain .braindex {
    font-size: 14px;
    line-height: 1.45;
  }
  #view2 .panel--brain .braindex b {
    font-size: 14px;
    line-height: 1.22;
  }
  #view2 .panel--brain .braindex span {
    font-size: 14px;
    line-height: 1.45;
  }
  #view2:has(.ffcard--done) .ffcard p {
    font-size: 14px;
    line-height: 1.45;
  }
  #view2:has(.ffcard--done) .feltline {
    font-size: 14px;
    line-height: 1.42;
  }
  #view2:has(.ffcard--done) .pill {
    font-size: 14px;
    line-height: 1.28;
  }
  #view2:has(.ffcard--done) .complaint-score-strip b,
  #view2:has(.ffcard--done) .complaint-score-strip span {
    font-size: 14px;
    line-height: 1.28;
  }
  #view2:has(.ffcard--done) .p-h {
    font-size: 14px;
    line-height: 1.2;
  }
  #view2:has(.ffcard--done) #nb-doneactions,
  #view2:has(.ffcard--done) #cp-doneactions {
    order: 2;
    margin: 12px 8px 10px;
    padding: 10px 8px;
    border: 2px solid rgba(211, 199, 171, 0.6);
    border-radius: 18px;
    background: rgba(250, 246, 238, 0.96);
    box-shadow: 0 10px 24px rgba(58, 48, 28, 0.12);
  }
  #view2:has(#nb-doneactions) .panel--brain {
    order: 3;
  }
  #view2:has(#cp-doneactions) .panel--brain {
    order: 3;
  }
  #view2:has(#nb-doneactions) .signbox {
    order: 4;
  }
  #view2:has(#cp-doneactions) .signbox {
    order: 4;
  }
  #view2:has(#nb-doneactions) .ff-foot {
    order: 5;
  }
  #view2:has(#cp-doneactions) .ff-foot {
    order: 5;
  }
  #view2:has(.ffcard--done) #nb-doneactions .gbtn,
  #view2:has(.ffcard--done) #cp-doneactions .gbtn {
    min-height: 44px;
    padding: 10px 14px;
  }
  #view2 .ff-foot {
    font-size: 13.5px !important;
    line-height: 1.38 !important;
  }
  #view2 .signrow--support-route .signrow__name,
  #view2 .signrow--support-route .signrow__contact,
  #view2 .signrow--support-route .signrow__note,
  #menu-box .signrow--support-route .signrow__name,
  #menu-box .signrow--support-route .signrow__contact,
  #menu-box .signrow--support-route .signrow__note,
  #view2 .news-fork-note,
  #view2 .news-fork-support .linkbtn {
    font-size: 14px;
    line-height: 1.42;
  }
  #menu-box .signbox .p-h {
    font-size: 14px;
    line-height: 1.2;
  }
  #view2 .news-fork-support .linkbtn {
    min-height: 44px;
    padding: 10px 12px;
  }
  #view2:has(.ffcard--done) .signbox .signrow b,
  #view2:has(.ffcard--done) .signbox .signrow span {
    font-size: 14px !important;
    line-height: 1.42;
  }
  #view2 .ff-msg {
    font-size: 14px;
    line-height: 1.45;
  }
  #view2 .ff-msg .who {
    font-size: 13.5px;
    line-height: 1.2;
  }
  #view2 .complaint-choice-feedback-label {
    font-size: 13.5px;
    line-height: 1.15;
  }
  #view2 .complaint-choice-feedback-meta {
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  #view2 .complaint-rationale {
    font-size: 14px;
    line-height: 1.42;
  }
  .fp-msg.is-mobile .fp-title {
    font-size: 14px;
    line-height: 1.2;
    flex: 0 1 auto;
    min-width: 0;
  }
  .fp-msg.is-mobile .fp-head {
    flex-wrap: nowrap;
    gap: 5px;
    padding: 10px 10px;
  }
  .fp-msg.is-mobile .fp-chips {
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
  }
  .fp-msg.is-mobile .fp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.18;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    white-space: nowrap;
  }
  .fp-msg.is-mobile .fp-iconbtn {
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 16px;
  }
  body.fp-view2-active #view2 .v2-msg-toggle {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    align-self: center;
  }
  body.fp-view2-active #view2 #v2-exit {
    min-width: 44px;
    min-height: 44px;
  }
  body.fp-view2-active #view2 #v2-exit::after {
    font-size: 13px;
    line-height: 1.1;
  }
  body.fp-view2-active #view2 .v2-head:has(.v2-msg-toggle) {
    min-height: 52px;
    padding-block: 4px;
    overflow: visible;
  }
  body.fp-view2-active #view2 .v2-msg-toggle .fp-handle-ico {
    font-size: 16px;
  }
  .fp-msg.is-mobile .fp-rowbody b {
    font-size: 14px;
    line-height: 1.28;
  }
  .fp-msg.is-mobile .fp-rowbody span {
    font-size: 14px;
    line-height: 1.55;
  }
  .fp-msg.is-mobile .fp-dot {
    font-size: 13px;
  }
  .ffcard--scenario .scenario-meta,
  .ffcard--scenario .scenario-status {
    font-size: 13px;
    line-height: 1.25;
  }
  .ffcard--scenario > .sc-band--lg {
    font-size: 13px;
    line-height: 1.14;
  }
  .ffcard--scenario .scenario-index--next {
    font-size: 13px;
    line-height: 1;
  }
  .ffcard--scenario .scenario-row--available .scenario-index--next {
    width: 52px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .ffcard--scenario .scenario-copy b {
    font-size: 14px;
    line-height: 1.2;
  }
  .ffcard--scenario .scenario-copy span {
    font-size: 13.5px;
    line-height: 1.28;
  }
  .ffcard--scenario .scenario-copy em {
    font-size: 14px;
    line-height: 1.38;
  }
  .ffcard--scenario .scenario-row p {
    font-size: 14px;
    line-height: 1.38;
  }
  #view2 .p-h,
  #view2 .th-nm {
    font-size: 13.5px;
    line-height: 1.3;
  }
  .global-controls .iconb {
    min-height: 44px;
    font-size: 14px;
  }
  .guided-demo-kicker {
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .guided-demo-card p {
    font-size: 15px;
    line-height: 1.48;
  }
  .guided-demo-replay {
    min-width: 44px;
    height: 44px;
  }
  .guided-demo-next,
  .guided-demo-skip {
    min-height: 44px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .hud--tl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) minmax(58px, 0.52fr);
    gap: 5px;
  }
  .hud--tl .hudpill {
    padding-inline: 7px;
    font-size: 13px;
  }
  .route-objective {
    font-size: 13px;
  }
}

/* prevent mobile tap-to-move from triggering text selection / the iOS
   "Copy · Search with Google" callout, and the grey tap highlight */
html,
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
canvas#scene,
#view2,
#view3,
#v3-scene,
#v3-overlays,
.th-svg {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* keep message lists scrollable by touch */
.fp-list,
.fp-overlay,
.objdrawer .od-b {
  touch-action: pan-y;
}