:root {
  --ink: #17211f;
  --ink-soft: #33413d;
  --muted: #5f6d68;
  --paper: rgba(248, 250, 247, 0.72);
  --paper-strong: #f8faf7;
  --white: #ffffff;
  --line: rgba(67, 82, 77, 0.18);
  --line-strong: rgba(47, 66, 60, 0.34);
  --teal: #16766d;
  --teal-dark: #0c514a;
  --teal-soft: #dff2ed;
  --amber: #a86010;
  --amber-soft: #fff0d7;
  --red: #9d3d3d;
  --red-soft: #f9e5e2;
  --blue: #356c8c;
  --shadow: 0 22px 70px rgba(4, 14, 11, 0.28);
  --panel-radius: 8px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #111b18;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #f1b84b;
  outline-offset: 3px;
}

svg {
  display: block;
}

.app-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.topbar {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 68px;
  padding: 10px 20px;
  color: var(--white);
  pointer-events: none;
}

.topbar::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(8, 17, 14, 0.32);
  box-shadow: 0 14px 32px rgba(6, 14, 12, 0.12);
  content: "";
}

.topbar > * {
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 4px;
  background: rgba(18, 101, 92, 0.82);
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 15px;
}

.brand small {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.chapter-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  align-items: center;
  min-height: 46px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 6px;
  color: var(--white);
  background: rgba(14, 28, 24, 0.68);
  backdrop-filter: blur(16px);
  cursor: pointer;
}

.chapter-switch > span {
  padding-right: 9px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 11px;
}

.chapter-switch strong {
  overflow: hidden;
  padding: 0 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-switch svg {
  width: 16px;
  height: 16px;
}

.icon-button {
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.topbar-actions .icon-button {
  justify-self: end;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(14, 28, 24, 0.56);
  backdrop-filter: blur(12px);
  text-decoration: none;
}

.scene-panel {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  color: var(--white);
  background: #1e2a27;
}

.scene-panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--scene-position-desktop, center center);
  transform: scale(var(--scene-scale-desktop, 1));
  transform-origin: var(--scene-origin-desktop, center center);
  transition: opacity 220ms ease;
}

.scene-scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 13, 0.22);
  box-shadow: inset 0 -250px 210px rgba(4, 12, 10, 0.62), inset 0 110px 120px rgba(4, 12, 10, 0.18);
}

.scene-copy {
  position: absolute;
  z-index: 2;
  bottom: 34px;
  left: 30px;
  width: min(34vw, 410px);
  text-shadow: 0 2px 18px rgba(2, 8, 6, 0.55);
}

.scene-kicker {
  display: flex;
  gap: 7px;
  margin: 0 0 12px;
}

.scene-kicker span {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(6, 14, 12, 0.18);
  font-size: 10px;
}

.scene-copy h1 {
  margin: 0;
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
}

.scene-description {
  margin: 15px 0 18px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  line-height: 1.7;
}

.scene-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.scene-rule small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
}

.scene-rule strong {
  color: #e1f5f0;
  font-size: 12px;
}

.photo-credit {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 7px;
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
}

.practice-panel {
  position: absolute;
  z-index: 10;
  top: 76px;
  right: 22px;
  bottom: 20px;
  display: grid;
  width: min(740px, 58vw);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 20px 24px 14px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--panel-radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  backdrop-filter: blur(30px) saturate(0.82);
}

.topline-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tension-badge {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(157, 61, 61, 0.3);
  border-radius: 999px;
  color: var(--red);
  background: rgba(249, 229, 226, 0.72);
  padding: 0 9px;
  font-size: 10px;
  white-space: nowrap;
}

.tension-badge svg {
  width: 14px;
  height: 14px;
}

.practice-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.round-progress > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.progress-track {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(69, 85, 79, 0.14);
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--teal);
  transition: width 220ms ease;
}

.level-badge {
  min-width: 58px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  text-align: center;
}

.state-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.state-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.state-item > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.state-item > span svg {
  width: 13px;
  height: 13px;
}

.state-dots {
  display: grid;
  grid-template-columns: repeat(3, 11px);
  gap: 3px;
}

.state-dots i {
  width: 11px;
  height: 5px;
  border-radius: 1px;
  background: rgba(70, 87, 81, 0.17);
}

.state-dots i.is-filled {
  background: var(--teal);
}

.task-stage {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 22px 2px 24px;
  scrollbar-color: rgba(62, 84, 77, 0.34) transparent;
  scrollbar-width: thin;
}

.dialogue-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 14px;
}

.dialogue-feed {
  padding-right: 8px;
}

.dialogue-cast {
  min-width: 0;
  position: sticky;
  top: 0;
  z-index: 3;
  align-self: start;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 0 4px 12px;
  border-left: 1px solid var(--line);
  background: rgba(248, 250, 247, .74);
  backdrop-filter: blur(12px);
}
.dialogue-cast-kicker { margin: 0 0 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.dialogue-cast-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.46); }
.dialogue-cast-card.is-guide { border-color: rgba(75, 111, 173, .34); background: rgba(233, 241, 255, .64); }
.dialogue-cast-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: var(--teal-dark); background: var(--teal-soft); font-size: 11px; font-weight: 800; }
.dialogue-cast-card.is-character .dialogue-cast-avatar { color: #754412; background: var(--amber-soft); }
.dialogue-cast-card.is-guide .dialogue-cast-avatar { color: #345b9b; background: #dce8ff; }
.dialogue-cast-avatar svg { width: 15px; height: 15px; }
.dialogue-cast-card strong, .dialogue-cast-card small { display: block; }
.dialogue-cast-card strong { font-size: 10px; }
.dialogue-cast-card small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.dialogue-cast-note { display: flex; gap: 5px; align-items: flex-start; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.dialogue-cast-note svg { width: 12px; height: 12px; flex: 0 0 auto; color: #456ba8; }

.dialogue-rail {
  min-width: 0;
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px 0 4px 12px;
  border-left: 1px solid var(--line);
}

.dialogue-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 800;
}

.dialogue-rail-head strong {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dialogue-route {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dialogue-route li {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 47px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.42);
  padding: 6px;
}

.dialogue-route li.is-current {
  border-color: rgba(168, 96, 16, 0.54);
  color: #684817;
  background: rgba(255, 240, 215, 0.76);
}

.dialogue-route li.is-complete {
  border-color: rgba(22, 118, 109, 0.38);
  color: var(--teal-dark);
  background: rgba(223, 242, 237, 0.76);
}

.dialogue-route li > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.dialogue-route li > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dialogue-route strong,
.dialogue-route small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialogue-route strong { font-size: 11px; }
.dialogue-route small { font-size: 9px; }

.dialogue-impact {
  display: grid;
  gap: 6px;
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.dialogue-impact > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}

.dialogue-impact strong {
  color: var(--red);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.impact-track {
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(157, 61, 61, 0.14);
}

.impact-track i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: var(--red);
  transform-origin: left center;
  transition: width 240ms ease;
}

.dialogue-impact p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.chat-intro {
  display: grid;
  gap: 8px;
  margin-bottom: 15px;
}

.chat-intro .task-title { font-size: clamp(21px, 2vw, 28px); }

.chat-turn {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0 0 12px;
  animation: chat-turn-in 180ms ease-out both;
}

.chat-turn.is-user {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.chat-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22, 118, 109, 0.34);
  border-radius: 50%;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 11px;
  font-weight: 800;
}

.chat-turn.is-user .chat-avatar {
  border-color: rgba(53, 108, 140, 0.34);
  color: var(--blue);
  background: #e4edf4;
}

.chat-bubble {
  min-width: 0;
  max-width: 92%;
  padding: 11px 13px;
  border: 1px solid rgba(68, 87, 81, 0.16);
  border-radius: 5px 12px 12px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 20px rgba(9, 28, 23, 0.08);
}

.chat-turn.is-user .chat-bubble {
  justify-self: end;
  border-color: rgba(53, 108, 140, 0.2);
  border-radius: 12px 5px 12px 12px;
  background: rgba(230, 240, 249, 0.86);
}

.chat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.chat-label button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--teal-dark);
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.chat-label button svg { width: 14px; height: 14px; }

.chat-english {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1.35;
}

.chat-translation,
.chat-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.chat-note {
  border-left: 2px solid var(--amber);
  color: #684817;
  background: rgba(255, 240, 215, 0.54);
  padding: 6px 8px;
}

.chat-action-card,
.chat-feedback-card,
.chat-score-card {
  margin: 0 0 12px 38px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.62);
}

.chat-action-card > header,
.chat-feedback-card > header,
.chat-score-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.chat-action-card > header span,
.chat-feedback-card > header span,
.chat-score-card > header span {
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.chat-action-card > header small,
.chat-feedback-card > header small,
.chat-score-card > header small {
  color: var(--muted);
  font-size: 9px;
}

.chat-action-card .choice-list {
  margin-top: 0;
}

.chat-action-card .choice-button {
  min-height: 56px;
  background: rgba(255, 255, 255, 0.7);
}

.chat-feedback-card {
  border-color: rgba(22, 118, 109, 0.3);
  background: rgba(223, 242, 237, 0.76);
}

.chat-feedback-card.is-caution {
  border-color: rgba(168, 96, 16, 0.34);
  background: rgba(255, 240, 215, 0.78);
}

.chat-feedback-card p,
.chat-score-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

.chat-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.chat-score-grid span {
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--muted);
  font-size: 9px;
}

.chat-score-grid strong { color: var(--teal-dark); font-size: 14px; }

.chat-repair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}

.chat-repair > div {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.56);
}

.chat-repair small,
.chat-repair strong { display: block; }
.chat-repair small { color: var(--muted); font-size: 9px; }
.chat-repair strong { margin-top: 2px; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-repair > i { color: var(--teal-dark); text-align: center; }

.chat-speak-card {
  margin: 0 0 12px 38px;
  padding: 12px;
  border: 1px solid rgba(53, 108, 140, 0.23);
  border-radius: 6px;
  background: rgba(230, 240, 249, 0.8);
}

.chat-speak-card .target-line { font-size: clamp(18px, 1.7vw, 24px); }

.chat-speak-card .speak-controls { margin-top: 10px; }

.chat-roleplay-card {
  margin: 0 0 12px 38px;
  padding: 12px;
  border: 1px solid rgba(22, 118, 109, 0.3);
  border-radius: 6px;
  background: rgba(223, 242, 237, 0.72);
}

.chat-roleplay-card .roleplay-transcript {
  max-height: 270px;
  margin-top: 0;
}

.chat-roleplay-card .roleplay-guide { margin-top: 10px; }

.live-dialogue-wrap {
  width: min(100%, 980px);
}

.live-dialogue-brief {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 16px 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(22, 118, 109, 0.26);
  border-radius: 6px;
  background: rgba(223, 242, 237, 0.72);
}

.live-dialogue-brief-icon,
.live-dialogue-status-icon {
  display: grid;
  place-items: center;
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.live-dialogue-brief-icon {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

.live-dialogue-brief-icon svg { width: 21px; height: 21px; }

.live-dialogue-brief strong,
.live-dialogue-brief p { display: block; }
.live-dialogue-brief strong { font-size: 12px; }
.live-dialogue-brief p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.live-dialogue-character-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.live-dialogue-character-line small,
.live-dialogue-character-line strong { display: block; }
.live-dialogue-character-line small { color: var(--muted); font-size: 9px; }
.live-dialogue-character-line strong { margin-top: 2px; color: var(--teal-dark); font-size: 11px; }

.live-dialogue-transcript {
  display: grid;
  max-height: 270px;
  gap: 10px;
  overflow-y: auto;
  margin: 0 0 12px;
  padding: 10px 4px 14px;
  border-bottom: 1px solid var(--line);
  scrollbar-color: rgba(62, 84, 77, 0.34) transparent;
  scrollbar-width: thin;
}

.live-dialogue-turn {
  display: grid;
  max-width: 86%;
  gap: 3px;
}

.live-dialogue-turn.is-user { justify-self: end; }
.live-dialogue-turn small { color: var(--muted); font-size: 9px; font-weight: 750; }
.live-dialogue-turn.is-user small { text-align: right; }
.live-dialogue-turn p {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 5px 12px 12px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.45;
}

.live-dialogue-turn.is-user p {
  border-color: rgba(53, 108, 140, 0.25);
  border-radius: 12px 5px 12px 12px;
  background: rgba(230, 240, 249, 0.88);
}

.live-dialogue-turn.is-live p { color: var(--muted); }

.live-dialogue-task {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(168, 96, 16, 0.3);
  border-radius: 6px;
  background: rgba(255, 240, 215, 0.74);
}

.live-dialogue-task.is-passed {
  border-color: rgba(22, 118, 109, 0.32);
  background: rgba(223, 242, 237, 0.76);
}

.live-dialogue-task.is-guide-message { border-color: rgba(69, 107, 168, .34); background: rgba(231, 240, 255, .78); }
.live-dialogue-task.is-guide-message > header > span { color: #345b9b; }

.live-dialogue-task > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.live-dialogue-task > header > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 850;
}

.live-dialogue-task.is-passed > header > span { color: var(--teal-dark); }
.live-dialogue-task > header small { color: var(--muted); font-size: 9px; }
.live-dialogue-task > header .concept-icon { width: 23px; height: 23px; }
.live-dialogue-task > header .concept-icon svg { width: 15px; height: 15px; }

.live-dialogue-prompt {
  margin: 10px 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.live-dialogue-options {
  display: grid;
  gap: 6px;
}

.live-dialogue-option {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid rgba(67, 82, 77, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.58);
}

.live-dialogue-option > strong {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--teal-dark);
  font-size: 11px;
}

.live-dialogue-option b,
.live-dialogue-option em,
.live-dialogue-option q,
.live-dialogue-option small { display: block; }
.live-dialogue-option b { color: var(--ink); font-size: 11px; line-height: 1.35; }
.live-dialogue-option em { margin-top: 1px; color: var(--teal-dark); font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.35; }
.live-dialogue-option q { margin-top: 2px; color: var(--ink-soft); font-size: 10px; font-style: italic; line-height: 1.4; }
.live-dialogue-option q::before,
.live-dialogue-option q::after { content: none; }
.live-dialogue-option small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }

.live-dialogue-formula {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(168, 96, 16, 0.2);
}

.live-dialogue-formula > svg { width: 18px; height: 18px; color: var(--amber); }
.live-dialogue-formula small,
.live-dialogue-formula strong { display: block; }
.live-dialogue-formula small { color: var(--muted); font-size: 9px; }
.live-dialogue-formula strong { margin-top: 2px; color: var(--ink-soft); font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.35; }

.live-dialogue-hint,
.live-dialogue-rescue {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 9px;
  padding: 8px 9px;
  color: #70440e;
  background: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  line-height: 1.45;
}

.live-dialogue-hint svg { width: 14px; height: 14px; flex: 0 0 auto; }
.live-dialogue-rescue { display: block; border-left: 3px solid var(--teal); color: var(--teal-dark); }
.live-dialogue-rescue small,
.live-dialogue-rescue strong { display: block; }
.live-dialogue-rescue small { color: var(--muted); font-size: 9px; }
.live-dialogue-rescue strong { margin-top: 3px; font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.4; }

.live-dialogue-control-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.live-dialogue-status {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.live-dialogue-status-icon { width: 33px; height: 33px; border-radius: 50%; }
.live-dialogue-status-icon svg { width: 16px; height: 16px; }
.live-dialogue-status strong,
.live-dialogue-status small { display: block; }
.live-dialogue-status strong { font-size: 11px; }
.live-dialogue-status small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }

.live-dialogue-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(60px, 0.5fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.live-dialogue-control-row .record-button { min-height: 46px; }
.live-dialogue-control-row .soe-level { margin: 0; }
.live-dialogue-text-form { margin-top: 10px; }
.live-dialogue-text-form label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 750; }
.live-dialogue-text-form > div { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 7px; }
.live-dialogue-text-form input { width: 100%; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); background: rgba(255, 255, 255, 0.8); font: inherit; }
.live-dialogue-text-form input:focus { border-color: var(--teal); outline: 2px solid rgba(22, 118, 109, 0.18); }
.live-dialogue-text-form .primary-button { width: 46px; min-width: 46px; padding: 0; }
.live-dialogue-error { margin: 8px 0 0; color: var(--red); font-size: 10px; line-height: 1.4; }

@keyframes chat-turn-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.task-wrap {
  width: min(100%, 690px);
  margin: 0 auto;
}

.task-eyebrow {
  margin: 0 0 7px;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.task-title {
  margin: 0;
  color: #101916;
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1.28;
  letter-spacing: 0;
}

.task-subtitle {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.frame-primer {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  margin-top: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.frame-primer-compact {
  margin-top: 14px;
  padding: 10px 0;
}

.frame-window {
  position: relative;
  display: grid;
  width: 60px;
  height: 48px;
  place-items: center;
  color: var(--teal-dark);
}

.frame-window::before,
.frame-window::after {
  position: absolute;
  width: 19px;
  height: 19px;
  border-color: var(--amber);
  content: "";
}

.frame-window::before {
  top: 0;
  left: 0;
  border-top: 2px solid;
  border-left: 2px solid;
}

.frame-window::after {
  right: 0;
  bottom: 0;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.frame-window svg {
  width: 24px;
  height: 24px;
}

.frame-primer span:last-child small,
.frame-primer span:last-child strong {
  display: block;
}

.frame-primer span:last-child small {
  color: var(--amber);
  font-size: 10px;
  font-weight: 800;
}

.frame-primer span:last-child strong {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.npc-block {
  margin-top: 16px;
  padding: 17px 0 17px 18px;
  border-left: 4px solid var(--teal);
}

.speaker-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.speaker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.npc-line,
.target-line {
  margin: 0;
  color: #101815;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: 0;
}

.npc-translation,
.target-translation {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.direction-note {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-left: 2px solid var(--amber);
  color: #684817;
  background: rgba(255, 239, 211, 0.76);
  font-size: 11px;
  line-height: 1.5;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.primary-button,
.secondary-button,
.text-button,
.model-button,
.record-button {
  min-height: 44px;
  border-radius: 4px;
  cursor: pointer;
}

.primary-button,
.secondary-button,
.model-button,
.record-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
}

.primary-button svg,
.secondary-button svg,
.model-button svg,
.record-button svg {
  width: 17px;
  height: 17px;
}

.primary-button {
  border: 1px solid var(--teal);
  color: var(--white);
  background: var(--teal);
  font-weight: 720;
}

.primary-button:hover {
  background: var(--teal-dark);
}

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

.secondary-button:hover,
.model-button:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.audio-button {
  display: inline-grid;
  width: 46px;
  min-width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--white);
  background: var(--teal);
  cursor: pointer;
}

.audio-button svg {
  width: 19px;
  height: 19px;
}

.audio-button.is-speaking {
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.concept-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: var(--teal-dark);
  background: rgba(255, 255, 255, 0.62);
}

.concept-icon svg {
  width: 22px;
  height: 22px;
}

.frame-loss { color: #a94b3b; background: #f8e7e1; }
.frame-blame { color: #9a5c16; background: #f9ecd8; }
.frame-threat { color: #92374a; background: #f7e4e8; }
.frame-helplessness { color: #5a6964; background: #e7ece9; }
.frame-identity { color: #355f86; background: #e3edf5; }
.frame-rejection { color: #91445f; background: #f6e5eb; }
.move-acknowledge { color: #1f7562; background: #dff2ec; }
.move-priority { color: #a56110; background: #f9ecd5; }
.move-specify { color: #2f6c85; background: #e1eff4; }
.move-redefine { color: #6b5886; background: #eee8f5; }
.move-time { color: #496986; background: #e4edf4; }
.move-next { color: #2f7652; background: #e1f1e7; }
.move-boundary { color: #785b35; background: #f1e8da; }

.shift-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 18px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.38);
}

.shift-node {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.58);
}

.shift-node small,
.shift-node strong {
  display: block;
}

.shift-node small {
  color: var(--muted);
  font-size: 9px;
}

.shift-node strong {
  overflow-wrap: anywhere;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
}

.shift-move {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: 38px auto;
  align-items: center;
  justify-items: center;
  color: var(--muted);
}

.shift-move .concept-icon {
  width: 38px;
  height: 38px;
}

.shift-move > svg {
  width: 30px;
  color: var(--line-strong);
}

.shift-move > small {
  grid-column: 1 / -1;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.shift-diagram.is-resolved .shift-move > svg,
.shift-diagram.is-resolved .shift-node.is-destination {
  color: var(--teal-dark);
  border-color: rgba(22, 118, 109, 0.44);
}

.choice-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.choice-button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 11px;
  width: 100%;
  min-height: 64px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  cursor: pointer;
}

.choice-button:hover {
  border-color: rgba(22, 118, 109, 0.66);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(18, 53, 46, 0.08);
}

.choice-button.is-correct {
  border-color: var(--teal);
  background: rgba(234, 248, 244, 0.9);
}

.choice-button.is-wrong {
  border-color: #ba7228;
  background: rgba(255, 247, 234, 0.92);
}

.choice-symbol {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
}

.choice-symbol .concept-icon {
  width: 46px;
  height: 46px;
}

.choice-symbol em {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink-soft);
  background: var(--paper-strong);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.choice-copy {
  min-width: 0;
}

.choice-copy strong,
.choice-copy small {
  display: block;
}

.choice-copy strong {
  font-size: 14px;
  line-height: 1.4;
}

.choice-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.response-choice {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  padding: 12px;
}

.response-choice .choice-index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.response-choice .choice-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 600;
}

.rating-pill {
  align-self: start;
  padding: 4px 6px;
  border-radius: 3px;
  color: var(--muted);
  background: rgba(232, 237, 234, 0.9);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}

.frame-trail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.frame-trail > span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 7px;
  min-width: 0;
}

.frame-trail .concept-icon {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.frame-trail .concept-icon svg {
  width: 17px;
  height: 17px;
}

.frame-trail small,
.frame-trail strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-trail small {
  color: var(--muted);
  font-size: 8px;
}

.frame-trail strong {
  font-size: 10px;
}

.frame-trail > svg {
  width: 15px;
  height: 15px;
  color: var(--line-strong);
}

.feedback-box {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--teal);
  color: var(--ink-soft);
  background: rgba(223, 242, 237, 0.84);
  font-size: 12px;
  line-height: 1.55;
}

.feedback-box.caution {
  border-left-color: var(--amber);
  background: rgba(255, 240, 215, 0.9);
}

.feedback-box.risk {
  border-left-color: var(--red);
  background: rgba(249, 229, 226, 0.92);
}

.feedback-box strong {
  display: block;
  margin-bottom: 2px;
}

.speak-target {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
}

.speak-controls {
  display: grid;
  grid-template-columns: auto minmax(210px, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-top: 17px;
}

.model-button {
  white-space: nowrap;
}

.soe-control {
  min-width: 0;
}

.record-button {
  width: 100%;
  border: 1px solid var(--red);
  color: var(--red);
  background: rgba(255, 255, 255, 0.74);
  font-weight: 720;
}

.record-button.is-listening {
  color: var(--white);
  background: var(--red);
}

.record-button.is-passed {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.soe-level {
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(75, 88, 83, 0.14);
}

.soe-level span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
}

.icon-spin {
  animation: icon-spin 900ms linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

.soe-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 0 0;
  border-top: 1px solid var(--line);
}

.soe-status-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.soe-status.is-error .soe-status-icon {
  color: var(--red);
  background: var(--red-soft);
}

.soe-status-icon svg {
  width: 18px;
  height: 18px;
}

.soe-status strong,
.soe-status small {
  display: block;
}

.soe-status strong {
  font-size: 12px;
}

.soe-status small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.soe-result {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.soe-result-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.soe-score {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  align-content: center;
  border: 3px solid var(--amber);
  border-radius: 50%;
  color: var(--amber);
}

.soe-result.is-passed .soe-score {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.soe-score strong,
.soe-score small {
  display: block;
  line-height: 1;
  text-align: center;
}

.soe-score strong {
  font-size: 25px;
}

.soe-score small {
  margin-top: 4px;
  font-size: 9px;
}

.soe-result-head > span:last-child strong,
.soe-result-head > span:last-child small {
  display: block;
}

.soe-result-head > span:last-child strong {
  font-size: 14px;
}

.soe-result-head > span:last-child small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.soe-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.soe-metric {
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.56);
  text-align: center;
}

.soe-metric small,
.soe-metric strong {
  display: block;
}

.soe-metric small {
  color: var(--muted);
  font-size: 9px;
}

.soe-metric strong {
  margin-top: 2px;
  font-size: 15px;
}

.score-high { color: #176c52; }
.score-ok { color: #2d6c88; }
.score-warn { color: #9a5b12; }
.score-low { color: #963e3e; }
.score-unknown { color: var(--muted); }

.soe-word-section {
  margin-top: 12px;
}

.soe-word-section > small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.soe-words {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.soe-word {
  display: inline-grid;
  min-width: 44px;
  grid-template-columns: auto auto;
  gap: 5px;
  align-items: baseline;
  padding: 5px 7px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
}

.soe-word strong {
  font-size: 11px;
}

.soe-word small {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.soe-word.is-weak {
  background: rgba(255, 240, 215, 0.74);
}

.phrase-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.phrase-note strong {
  color: var(--teal-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
}

.phrase-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.roleplay-wrap {
  width: min(100%, 700px);
}

.roleplay-character {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.roleplay-character-icon,
.roleplay-status-icon {
  display: grid;
  place-items: center;
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.roleplay-character-icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(22, 118, 109, 0.34);
  border-radius: 5px;
}

.roleplay-character-icon svg {
  width: 23px;
  height: 23px;
}

.roleplay-character small,
.roleplay-character strong,
.roleplay-character em {
  display: block;
}

.roleplay-character small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.roleplay-character strong {
  margin-top: 2px;
  font-size: 16px;
}

.roleplay-character em {
  margin-top: 3px;
  color: var(--amber);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.roleplay-goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.roleplay-goal {
  display: grid;
  min-width: 0;
  min-height: 70px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(250, 252, 249, 0.9);
}

.roleplay-goal-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
}

.roleplay-goal-icon svg {
  width: 17px;
  height: 17px;
}

.roleplay-goal small,
.roleplay-goal strong {
  display: block;
}

.roleplay-goal small {
  color: var(--muted);
  font-size: 9px;
}

.roleplay-goal strong {
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.35;
}

.roleplay-goal.is-active {
  background: var(--amber-soft);
}

.roleplay-goal.is-active .roleplay-goal-icon {
  border-color: rgba(168, 96, 16, 0.5);
  color: var(--amber);
  background: rgba(255, 255, 255, 0.72);
}

.roleplay-goal.is-complete {
  background: var(--teal-soft);
}

.roleplay-goal.is-complete .roleplay-goal-icon {
  border-color: var(--teal);
  color: var(--white);
  background: var(--teal);
}

.roleplay-brief {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin-top: 16px;
  padding: 12px 0 12px 13px;
  border-left: 3px solid var(--amber);
}

.roleplay-brief > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--amber);
}

.roleplay-brief svg {
  width: 19px;
  height: 19px;
}

.roleplay-brief p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.roleplay-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roleplay-live-badge {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(22, 118, 109, 0.38);
  border-radius: 4px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 10px;
  font-weight: 800;
}

.roleplay-live-badge.is-fallback {
  border-color: rgba(168, 96, 16, 0.4);
  color: var(--amber);
  background: var(--amber-soft);
}

.roleplay-live-badge svg {
  width: 14px;
  height: 14px;
}

.roleplay-reset {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.roleplay-reset svg {
  width: 17px;
  height: 17px;
}

.roleplay-transcript {
  display: grid;
  max-height: 245px;
  gap: 10px;
  margin-top: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scrollbar-color: rgba(62, 84, 77, 0.34) transparent;
  scrollbar-width: thin;
}

.roleplay-turn {
  display: grid;
  max-width: 84%;
  gap: 3px;
}

.roleplay-turn small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.roleplay-turn p {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.45;
}

.roleplay-turn.is-user {
  justify-self: end;
}

.roleplay-turn.is-user small {
  text-align: right;
}

.roleplay-turn.is-user p {
  border-color: rgba(22, 118, 109, 0.35);
  background: var(--teal-soft);
}

.roleplay-turn.is-live p {
  color: var(--muted);
}

.roleplay-control-panel {
  margin-top: 13px;
}

.roleplay-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.roleplay-status-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.roleplay-status-icon svg {
  width: 16px;
  height: 16px;
}

.roleplay-status strong,
.roleplay-status small {
  display: block;
}

.roleplay-status strong {
  font-size: 11px;
}

.roleplay-status small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.roleplay-guide,
.roleplay-rescue {
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--amber);
  background: rgba(255, 240, 215, 0.68);
}

.roleplay-guide {
  padding: 11px 12px;
}

.roleplay-guide-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
}

.roleplay-guide-head > svg {
  width: 20px;
  height: 20px;
  color: var(--amber);
}

.roleplay-guide-head small,
.roleplay-guide-head strong,
.roleplay-rescue small,
.roleplay-rescue strong {
  display: block;
}

.roleplay-guide-head small,
.roleplay-rescue small {
  color: var(--amber);
  font-size: 9px;
  font-weight: 750;
}

.roleplay-guide-head strong,
.roleplay-rescue strong {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.45;
}

.roleplay-evidence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.roleplay-evidence-item {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(168, 96, 16, 0.42);
  border-radius: 4px;
  color: #70440e;
  background: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 750;
}

.roleplay-evidence-item svg {
  width: 14px;
  height: 14px;
}

.roleplay-evidence-item.is-complete {
  border-color: rgba(22, 118, 109, 0.42);
  color: var(--teal-dark);
  background: rgba(223, 242, 237, 0.86);
}

.roleplay-guide-actions {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
}

.roleplay-guide-actions > small {
  color: var(--muted);
  font-size: 9px;
}

.roleplay-hint-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.roleplay-hint-toggle svg {
  width: 15px;
  height: 15px;
}

.roleplay-guide .roleplay-rescue {
  margin-top: 3px;
  padding: 9px 0 2px;
  border-top: 1px solid rgba(168, 96, 16, 0.24);
  border-left: 0;
  background: transparent;
}

.roleplay-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  margin-top: 11px;
}

.roleplay-mic-control {
  min-width: 0;
}

.roleplay-keyboard-toggle {
  white-space: nowrap;
}

.roleplay-text-form {
  margin-top: 11px;
}

.roleplay-text-form label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.roleplay-text-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 7px;
}

.roleplay-text-form input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
}

.roleplay-text-form input:focus {
  border-color: var(--teal);
  outline: 2px solid rgba(22, 118, 109, 0.18);
}

.roleplay-text-form .primary-button {
  width: 46px;
  min-width: 46px;
  padding: 0;
}

.roleplay-reconnect {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}

.roleplay-reconnect svg {
  width: 15px;
  height: 15px;
}

.roleplay-passed .roleplay-transcript {
  max-height: 205px;
}

.chapter-complete {
  padding-top: 3px;
}

.complete-mark {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 15px;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.complete-mark svg {
  width: 25px;
  height: 25px;
}

.complete-summary {
  margin: 15px 0 0;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.65;
}

.pattern-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.pattern-list span {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.58);
  font-size: 9px;
}

.practice-footer {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.practice-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.text-button {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--teal-dark);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

dialog {
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(247, 250, 247, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

dialog::backdrop {
  background: rgba(7, 15, 13, 0.66);
  backdrop-filter: blur(5px);
}

.chapter-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
}

.info-dialog {
  width: min(560px, calc(100vw - 32px));
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.dialog-head small {
  color: var(--teal);
  font-size: 9px;
  font-weight: 800;
}

.dialog-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
}

.chapter-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow-y: auto;
  background: var(--line);
}

.chapter-option {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  min-height: 126px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
  cursor: pointer;
}

.chapter-option:hover,
.chapter-option.is-active {
  background: #edf7f4;
}

.chapter-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chapter-option-copy {
  min-width: 0;
  padding: 15px 13px;
}

.chapter-option-copy small,
.chapter-option-copy strong,
.chapter-option-copy span {
  display: block;
}

.chapter-option-copy small {
  color: var(--teal);
  font-size: 9px;
  font-weight: 800;
}

.chapter-option-copy strong {
  margin-top: 5px;
  font-size: 14px;
}

.chapter-option-copy span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.info-body {
  padding: 22px;
}

.info-objective {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.rule-strip {
  margin-top: 16px;
  padding: 13px;
  border-left: 4px solid var(--teal);
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 12px;
  font-weight: 750;
}

.safety-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.safety-note strong {
  color: var(--red);
  font-size: 11px;
}

.safety-note p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 1040px) {
  .scene-copy {
    width: 31vw;
  }

  .scene-description {
    display: none;
  }

  .practice-panel {
    width: 68vw;
  }

  .dialogue-workspace { grid-template-columns: minmax(0, 1fr) 142px; }
}

@media (max-width: 860px) {
  .scene-panel > img {
    object-position: var(--scene-position-mobile, center center);
    transform: scale(var(--scene-scale-mobile, 1));
    transform-origin: var(--scene-origin-mobile, center center);
  }

  .scene-copy {
    top: 76px;
    right: 18px;
    bottom: auto;
    left: auto;
    width: min(48vw, 250px);
    text-align: right;
  }

  .scene-kicker {
    justify-content: flex-end;
  }

  .scene-copy h1 {
    font-size: 27px;
  }

  .scene-rule,
  .photo-credit {
    display: none;
  }

  .practice-panel {
    top: clamp(188px, 38vh, 330px);
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    background: rgba(248, 250, 247, 0.77);
    backdrop-filter: blur(26px) saturate(0.82);
  }

  .dialogue-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .dialogue-rail {
    order: -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 110px;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .dialogue-route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dialogue-route li {
    min-height: 39px;
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 4px 5px;
  }

  .dialogue-route li > i {
    width: 19px;
    height: 19px;
  }

  .dialogue-impact {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .dialogue-impact p { display: none; }
}

@media (max-width: 720px) {
  .topbar {
    grid-template-columns: 44px minmax(0, 1fr) 96px;
    min-height: 60px;
    padding: 8px 10px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand > span:last-child {
    display: none;
  }

  .chapter-switch {
    max-width: calc(100vw - 158px);
    justify-self: center;
  }

  .topbar-actions {
    gap: 4px;
  }

  .chapter-switch > span {
    display: none;
  }

  .chapter-switch strong {
    border: 0;
  }

  .scene-copy {
    top: 66px;
    right: 14px;
    left: auto;
    width: min(54vw, 220px);
  }

  .scene-kicker {
    margin-bottom: 7px;
  }

  .scene-copy h1 {
    font-size: 24px;
  }

  .practice-panel {
    top: clamp(220px, 37vh, 310px);
    right: 7px;
    bottom: 7px;
    left: 7px;
    padding: 15px 13px 9px;
    border-radius: 7px;
    background: rgba(248, 250, 247, 0.77);
    backdrop-filter: blur(24px) saturate(0.82);
  }

  .topline-badges { gap: 5px; }

  .tension-badge {
    min-height: 29px;
    padding: 0 7px;
  }

  .dialogue-rail {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .dialogue-rail-head {
    display: none;
  }

  .dialogue-route li {
    display: flex;
    justify-content: center;
    min-height: 34px;
  }

  .dialogue-route li > span { display: none; }

  .dialogue-impact {
    display: none;
  }

  .state-board {
    gap: 7px;
    margin-top: 11px;
    padding-bottom: 11px;
  }

  .state-item {
    display: block;
  }

  .state-item > span {
    font-size: 9px;
  }

  .state-dots {
    grid-template-columns: repeat(3, 9px);
    margin-top: 5px;
  }

  .state-dots i {
    width: 9px;
  }

  .task-stage {
    padding: 17px 0 18px;
  }

  .dialogue-feed { padding-right: 0; }

  .chat-intro { margin-bottom: 11px; }

  .chat-turn {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
  }

  .chat-turn.is-user {
    grid-template-columns: minmax(0, 1fr) 26px;
  }

  .chat-avatar {
    width: 26px;
    height: 26px;
    font-size: 9px;
  }

  .chat-bubble {
    max-width: 96%;
    padding: 9px 10px;
  }

  .chat-english { font-size: 18px; }

  .chat-action-card,
  .chat-feedback-card,
  .chat-score-card,
  .chat-speak-card,
  .chat-roleplay-card {
    margin-left: 32px;
    padding: 9px;
  }

  .live-dialogue-wrap { width: min(100%, 700px); }
  .live-dialogue-control-row { grid-template-columns: minmax(0, 1fr) auto; }
  .live-dialogue-control-row .soe-level { grid-column: 1 / -1; grid-row: 2; }
  .live-dialogue-option b { font-size: 10px; }
  .live-dialogue-option small { font-size: 8px; }
  .live-dialogue-turn { max-width: 94%; }

  .chat-action-card .choice-button {
    min-height: 54px;
  }

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

  .chat-repair {
    grid-template-columns: 1fr;
  }

  .chat-repair > i { transform: rotate(90deg); }

  .task-title {
    font-size: 22px;
  }

  .task-subtitle {
    font-size: 12px;
  }

  .frame-primer {
    grid-template-columns: 54px minmax(0, 1fr);
    margin-top: 13px;
  }

  .frame-window {
    width: 52px;
  }

  .npc-block {
    margin-top: 13px;
    padding: 14px 0 14px 14px;
  }

  .npc-line,
  .target-line {
    font-size: 23px;
  }

  .shift-diagram {
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    gap: 5px;
    padding: 8px;
  }

  .shift-node {
    display: grid;
    justify-items: center;
    padding: 7px 4px;
    text-align: center;
  }

  .shift-node .concept-icon {
    width: 36px;
    height: 36px;
  }

  .shift-move {
    grid-template-columns: 1fr;
    grid-template-rows: 34px 18px auto;
  }

  .shift-move > svg {
    width: 18px;
  }

  .choice-list {
    gap: 8px;
    margin-top: 13px;
  }

  .choice-button {
    min-height: 62px;
  }

  .response-choice {
    grid-template-columns: 31px minmax(0, 1fr);
  }

  .response-choice .rating-pill {
    display: none;
  }

  .frame-trail {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
    gap: 2px;
  }

  .frame-trail > span {
    display: block;
    text-align: center;
  }

  .frame-trail .concept-icon {
    display: grid;
    margin: 0 auto 3px;
  }

  .frame-trail small,
  .frame-trail strong {
    display: block;
    max-width: 100%;
  }

  .speak-target {
    padding: 15px 13px;
  }

  .speak-controls {
    grid-template-columns: 1fr;
  }

  .soe-metrics {
    grid-template-columns: repeat(4, 1fr);
  }

  .roleplay-goal {
    min-height: 84px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    padding: 8px 4px;
    text-align: center;
  }

  .roleplay-goal strong {
    font-size: 10px;
  }

  .roleplay-transcript {
    max-height: 220px;
  }

  .roleplay-turn {
    max-width: 92%;
  }

  .roleplay-controls {
    grid-template-columns: 1fr;
  }

  .roleplay-keyboard-toggle {
    width: 100%;
  }

  .practice-footer p {
    max-width: 66%;
  }

  .chapter-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) and (max-height: 690px) {
  .scene-copy {
    top: 61px;
  }

  .scene-kicker {
    display: none;
  }

  .scene-copy h1 {
    font-size: 21px;
  }

  .practice-panel {
    top: clamp(265px, 45vh, 305px);
  }

  .practice-footer p {
    display: none;
  }

  .practice-footer {
    justify-content: flex-end;
  }

  .roleplay-intro > .task-subtitle {
    display: none;
  }

  .roleplay-intro .roleplay-character {
    margin-top: 10px;
    padding: 8px 0;
  }

  .roleplay-intro .roleplay-goals {
    margin-top: 10px;
  }

  .roleplay-intro .roleplay-goal {
    min-height: 70px;
  }

  .roleplay-intro .roleplay-brief {
    margin-top: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media (max-height: 500px) and (min-width: 600px) {
  .scene-copy {
    display: none;
  }

  .practice-panel {
    top: 66px;
    right: 10px;
    bottom: 10px;
    left: auto;
    width: min(780px, 72vw);
    padding: 10px 18px 7px;
    background: rgba(248, 250, 247, 0.77);
  }

  .dialogue-workspace {
    grid-template-columns: minmax(0, 1fr) 138px;
  }

  .dialogue-rail {
    order: initial;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    padding: 8px 0 4px 10px;
    border-left: 1px solid var(--line);
    border-bottom: 0;
  }

  .dialogue-rail-head { display: flex; }

  .dialogue-route { grid-template-columns: 1fr; }

  .dialogue-route li {
    display: grid;
    min-height: 38px;
  }

  .dialogue-route li > span { display: grid; }

  .dialogue-impact { display: grid; }

  .state-board {
    display: none;
  }

  .task-stage {
    padding: 10px 0 12px;
  }

  .practice-footer {
    min-height: 34px;
  }

  .roleplay-intro {
    display: grid;
    grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    column-gap: 20px;
  }

  .roleplay-intro > .task-eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .roleplay-intro > .task-title {
    grid-column: 1;
    grid-row: 2;
  }

  .roleplay-intro > .roleplay-character {
    grid-column: 1;
    grid-row: 3 / 5;
  }

  .roleplay-intro > .roleplay-goals {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 0;
  }

  .roleplay-intro > .roleplay-brief {
    grid-column: 2;
    grid-row: 3;
  }

  .roleplay-intro > .button-row {
    grid-column: 2;
    grid-row: 4;
    margin-top: 8px;
  }

  .roleplay-wrap:not(.roleplay-intro):not(.roleplay-passed) {
    display: grid;
    height: 100%;
    grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    column-gap: 20px;
  }

  .roleplay-wrap:not(.roleplay-intro):not(.roleplay-passed) > .roleplay-live-head {
    grid-column: 1;
    grid-row: 1;
  }

  .roleplay-wrap:not(.roleplay-intro):not(.roleplay-passed) > .roleplay-goals {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .roleplay-wrap:not(.roleplay-intro):not(.roleplay-passed) > .roleplay-transcript {
    height: 100%;
    max-height: none;
    grid-column: 1;
    grid-row: 2;
    margin-top: 8px;
  }

  .roleplay-wrap:not(.roleplay-intro):not(.roleplay-passed) > .roleplay-control-panel {
    min-height: 0;
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    margin-top: 8px;
  }

  .roleplay-wrap:not(.roleplay-intro):not(.roleplay-passed) .roleplay-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .roleplay-wrap:not(.roleplay-intro):not(.roleplay-passed) .roleplay-keyboard-toggle {
    width: auto;
  }
}

@media (min-width: 1100px) {
  .practice-panel { right: 3vw; width: min(980px, 72vw); }
  .scene-panel > img { opacity: .42; }
  .scene-scrim { background: rgba(7, 16, 13, .46); }
  .scene-copy { left: 24px; width: min(21vw, 270px); opacity: .66; }
  .scene-copy h1 { font-size: clamp(25px, 2.5vw, 38px); }
  .scene-description { font-size: 12px; }
  .task-stage { padding-top: 16px; }
  .live-dialogue-transcript { max-height: 320px; }
  .live-dialogue-turn p { font-size: 18px; line-height: 1.5; }
  .live-dialogue-task { padding: 16px; }
  .live-dialogue-task.is-guide-message { margin-right: 4%; margin-left: 4%; border-radius: 8px; }
}

@media (max-width: 760px) {
  .dialogue-cast { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .dialogue-cast-kicker, .dialogue-cast-note { grid-column: 1 / -1; }
  .dialogue-cast-card { grid-template-columns: 25px minmax(0, 1fr); padding: 6px; }
  .dialogue-cast-avatar { width: 24px; height: 24px; }
}

body.is-minimal-dialogue { background: #e9ece8; }
body.is-minimal-dialogue .topbar,
body.is-minimal-dialogue .scene-panel,
body.is-minimal-dialogue .practice-topline,
body.is-minimal-dialogue .state-board,
body.is-minimal-dialogue .dialogue-rail,
body.is-minimal-dialogue .practice-footer { display: none; }
body.is-minimal-dialogue .practice-panel { inset: 0; width: 100vw; grid-template-rows: minmax(0, 1fr); padding: 0; border: 0; border-radius: 0; background: #e9ece8; box-shadow: none; backdrop-filter: none; }
body.is-minimal-dialogue .dialogue-workspace { display: block; height: 100%; }
body.is-minimal-dialogue .task-stage { height: 100%; overflow: hidden; padding: 0; }
body.is-minimal-dialogue .live-dialogue-wrap { width: 100%; }

.minimal-dialogue-stage { position: relative; display: grid; width: 100%; height: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; background: #f5f6f3; }
.minimal-pane { min-width: 0; display: grid; align-content: start; justify-items: center; overflow: auto; padding: clamp(24px, 4vh, 48px) clamp(24px, 4vw, 64px) 132px; transition: filter 180ms ease, opacity 180ms ease; }
.minimal-pane.is-muted { opacity: .52; filter: grayscale(.45); pointer-events: none; }
.minimal-pane.is-supporting { opacity: .82; }
.minimal-pane.is-active { opacity: 1; }
.minimal-pane > header { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 3vh, 32px); }
.minimal-pane > header span { color: #151d1a; font-size: clamp(24px, 3vw, 46px); font-weight: 500; }
.minimal-pane > header strong { color: #65716c; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.scene-channel { border-right: 1px solid rgba(26, 38, 34, .14); background: #f7f7f3; }
.guide-channel { background: #e9eef8; }
.emotion-avatar { position: relative; width: clamp(110px, 12vw, 176px); aspect-ratio: 1; overflow: visible; border-radius: 50%; box-shadow: 0 14px 40px rgba(12, 25, 21, .16); }
.emotion-avatar img { width: 100%; height: 100%; border: 5px solid rgba(255,255,255,.8); border-radius: inherit; object-fit: cover; object-position: center 26%; }
.emotion-face { position: absolute; right: -8px; bottom: 2px; display: block; width: 42px; height: 42px; border: 3px solid #fff; border-radius: 50%; background: #e5b257; box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.emotion-face::before { position: absolute; top: 12px; left: 10px; width: 4px; height: 5px; border-radius: 50%; background: #27302d; box-shadow: 14px 0 #27302d; content: ""; }
.emotion-face i { position: absolute; left: 12px; bottom: 9px; width: 15px; height: 7px; border-bottom: 2px solid #27302d; border-radius: 0 0 12px 12px; }
.mood-tense .emotion-face { background: #e59b82; }
.mood-tense .emotion-face i { bottom: 6px; border-top: 2px solid #27302d; border-bottom: 0; border-radius: 12px 12px 0 0; }
.mood-calm .emotion-face { background: #9ed8b8; }
.mood-calm .emotion-face i { height: 9px; }
.mood-firm .emotion-face { background: #df8f79; }
.mood-firm .emotion-face i { bottom: 6px; border-top: 2px solid #27302d; border-bottom: 0; border-radius: 12px 12px 0 0; }
.mood-guarded .emotion-face { background: #e6aa72; }
.mood-guarded .emotion-face i { bottom: 8px; height: 1px; border-radius: 0; }
.mood-listening .emotion-face { background: #e5c775; }
.mood-listening .emotion-face i { left: 14px; width: 7px; height: 7px; border: 2px solid #27302d; border-radius: 50%; }
.mood-softened .emotion-face { background: #afd6b4; }
.mood-reassured .emotion-face { background: #88ceb0; }
.mood-softened .emotion-face i,
.mood-reassured .emotion-face i { height: 9px; }
.mood-firm img { filter: saturate(.82) contrast(1.04); }
.mood-guarded img { filter: saturate(.88); }
.mood-listening img { filter: saturate(.96); }
.mood-softened img,
.mood-reassured img { filter: saturate(1.04) brightness(1.03); }
.scene-person { display: grid; grid-template-columns: 72px minmax(0, 1fr); width: min(100%, 680px); align-items: center; gap: 16px; margin-bottom: 18px; }
.scene-person .emotion-avatar { width: 72px; }
.scene-person .emotion-face { right: -5px; width: 28px; height: 28px; border-width: 2px; }
.scene-person .emotion-face::before { top: 8px; left: 7px; width: 3px; height: 4px; box-shadow: 9px 0 #27302d; }
.scene-person .emotion-face i { left: 8px; bottom: 6px; width: 10px; height: 5px; }
.scene-person-state { display: grid; gap: 3px; }
.scene-person-state strong { color: #65716c; font-size: 12px; text-transform: uppercase; }
.scene-person-state small { color: #315f56; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.scene-relationship { display: flex; grid-column: 2; flex-wrap: wrap; gap: 7px; }
.scene-relationship span { display: inline-flex; align-items: baseline; gap: 4px; color: #69736f; font-size: 9px; font-weight: 750; }
.scene-relationship b { color: #244f47; font-size: 12px; }
.scene-conversation { display: grid; width: min(100%, 680px); gap: 18px; padding: 0 4px 18px; }
.scene-turn { display: grid; max-width: 88%; gap: 5px; }
.scene-turn.is-user { justify-self: end; }
.scene-turn small { color: #69736f; font-size: 10px; font-weight: 800; }
.scene-turn.is-user small { text-align: right; }
.scene-turn p { margin: 0; padding: 18px 20px; border: 1px solid rgba(28,42,37,.14); border-radius: 4px 14px 14px 14px; color: #17201d; background: rgba(255,255,255,.76); font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 1.8vw, 30px); line-height: 1.4; }
.scene-turn.is-user p { border-color: rgba(49,95,86,.2); border-radius: 14px 4px 14px 14px; color: #244f47; background: rgba(222,239,233,.86); }
.scene-turn.is-live p { color: #65716c; }
.scene-turn-score { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.scene-turn-score span { padding: 3px 7px; border: 1px solid rgba(49,95,86,.18); border-radius: 999px; color: #315f56; background: rgba(255,255,255,.62); font-size: 9px; font-weight: 800; }
.thinking-map { display: grid; width: min(100%, 680px); gap: 12px; }
.thinking-map-label { display: inline-flex; align-items: center; gap: 8px; color: #345b9b; font-size: 10px; font-weight: 850; }
.thinking-map-label svg { width: 18px; height: 18px; }
.inner-dialogue-map { gap: 14px; }
.inner-conversation { display: grid; width: min(100%, 680px); gap: 12px; padding: 2px 0 14px; }
.inner-turn { display: grid; max-width: 92%; gap: 5px; }
.inner-turn.is-user { justify-self: end; }
.inner-turn small { color: #55647b; font-size: 9px; font-weight: 850; letter-spacing: .04em; }
.inner-turn.is-user small { text-align: right; color: #315f56; }
.inner-turn p { margin: 0; padding: 13px 15px; border: 1px solid rgba(38,59,88,.16); border-radius: 14px 14px 14px 4px; color: #233b61; background: rgba(255,255,255,.72); font-family: Georgia,"Times New Roman",serif; font-size: clamp(16px,1.25vw,21px); line-height: 1.45; }
.inner-turn.is-user p { border-color: rgba(49,95,86,.22); border-radius: 14px 4px 14px 14px; color: #244f47; background: rgba(222,239,233,.84); }
.inner-turn.is-current p { border-color: rgba(38,86,155,.42); background: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(30,57,94,.07); }
.inner-choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.inner-choice { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid rgba(38,59,88,.2); border-radius: 5px; color: #233b61; background: rgba(246,249,253,.9); }
.inner-choice b { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(38,86,155,.3); border-radius: 50%; color: #294d82; font: 800 11px/1 system-ui,sans-serif; }
.inner-choice strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 750 clamp(10px, .8vw, 13px)/1.2 system-ui,sans-serif; }
.inner-choice-list > small { grid-column: 1 / -1; padding-top: 2px; color: #315f56; font: 800 10px/1.3 system-ui,sans-serif; }
.inner-free-response { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: #315f56; font: 800 10px/1.35 system-ui,sans-serif; }
.inner-free-response svg { width: 15px; height: 15px; }
.inner-evaluation, .inner-feedback { display: flex; align-items: center; gap: 8px; width: min(100%, 680px); padding: 9px 12px; border-left: 2px solid #78a899; color: #315f56; background: rgba(229,242,237,.62); font-size: 11px; line-height: 1.45; }
.inner-evaluation svg { width: 16px; height: 16px; animation: open-spin .9s linear infinite; }
.inner-feedback.is-score { color: #294d82; border-left-color: #8da7d4; background: rgba(232,238,249,.72); }
.thinking-step { position: relative; display: grid; gap: 10px; padding: 14px 16px 16px; border: 1px solid rgba(38,59,88,.15); border-radius: 6px; background: rgba(255,255,255,.42); transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease; }
.thinking-step.is-current { border-color: rgba(38,86,155,.52); background: rgba(255,255,255,.86); box-shadow: 0 12px 32px rgba(30,57,94,.08); }
.thinking-step.is-complete { opacity: .62; background: rgba(224,240,235,.52); }
.thinking-step.is-upcoming { opacity: .46; }
.thinking-step > header { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 10px; }
.thinking-step .live-dialogue-prompt { margin: 0; text-align: left; }
.thinking-number { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(38,59,88,.25); border-radius: 50%; color: #294d82; font-size: 12px; font-weight: 850; }
.thinking-number svg { width: 15px; height: 15px; }
.thinking-pointer { position: absolute; top: 12px; right: calc(100% + 10px); display: none; align-items: center; gap: 2px; color: #286d58; }
.thinking-pointer svg { width: 28px; height: 28px; stroke-width: 3; }
.thinking-pointer span { font-size: 9px; font-weight: 900; }
.thinking-step.is-current .thinking-pointer { display: flex; }
.thinking-connector { display: grid; height: 18px; place-items: center; color: rgba(41,77,130,.52); }
.thinking-connector svg { width: 18px; height: 18px; }
.thinking-speak-cue { display: none; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(38,59,88,.18); color: #244f47; }
.thinking-speak-cue svg { width: 22px; height: 22px; }
.thinking-speak-cue span, .thinking-speak-cue small, .thinking-speak-cue strong { display: block; }
.thinking-speak-cue small { margin-bottom: 3px; font-size: 9px; font-weight: 850; }
.thinking-speak-cue strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.4; }
.thinking-map.is-ready-to-speak .thinking-speak-cue { display: grid; }
.thinking-map.is-ready-to-speak .thinking-step.is-complete { padding-block: 10px; }
.thinking-map.is-ready-to-speak .thinking-step.is-complete .live-dialogue-options,
.thinking-map.is-ready-to-speak .thinking-step.is-complete .live-dialogue-formula { display: none; }
.open-response-coach { position: relative; display: none; gap: 10px; padding: 16px; border: 1px solid rgba(38,86,155,.42); border-radius: 6px; background: rgba(255,255,255,.84); box-shadow: 0 12px 32px rgba(30,57,94,.08); }
.thinking-map.is-ready-to-speak .open-response-coach { display: grid; }
.open-response-coach > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.open-response-coach > header span { display: inline-flex; align-items: center; gap: 7px; color: #315f56; font-size: 10px; font-weight: 900; }
.open-response-coach > header span svg { width: 17px; height: 17px; }
.open-response-coach > header strong { color: #69736f; font-size: 9px; }
.open-response-coach > p { margin: 0; color: #172230; font-size: clamp(17px,1.4vw,23px); font-weight: 700; line-height: 1.4; }
.open-response-pointer { position: absolute; top: 12px; right: calc(100% + 10px); display: flex; align-items: center; color: #286d58; }
.open-response-pointer svg { width: 28px; height: 28px; stroke-width: 3; }
.open-response-pointer span { font-size: 9px; font-weight: 900; }
.open-empty-hint { padding: 10px 12px; border-left: 2px solid rgba(49,95,86,.28); color: #55647b; font-size: 12px; line-height: 1.45; }
.open-hint-list { display: flex; flex-wrap: wrap; gap: 7px; }
.open-hint-list span { padding: 7px 10px; border: 1px solid rgba(49,95,86,.18); border-radius: 999px; color: #244f47; background: rgba(229,242,237,.72); font-size: 12px; font-weight: 700; }
.open-hint-button { display: inline-flex; min-height: 44px; width: fit-content; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(38,59,88,.24); border-radius: 5px; color: #294d82; background: rgba(255,255,255,.72); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; }
.open-hint-button:hover { border-color: rgba(38,86,155,.48); background: #fff; }
.open-hint-button:focus-visible { outline: 3px solid rgba(38,86,155,.28); outline-offset: 2px; }
.open-hint-button svg { width: 16px; height: 16px; }
.open-hint-cost { display: inline-flex; align-items: center; gap: 6px; color: #69736f; font-size: 10px; }
.open-hint-cost svg { width: 14px; height: 14px; }
.open-evaluation-pending { display: flex; align-items: center; gap: 8px; color: #294d82; font-size: 12px; font-weight: 800; }
.open-evaluation-pending svg { width: 18px; height: 18px; animation: open-spin .9s linear infinite; }
.open-evaluation { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid rgba(38,59,88,.16); }
.open-score-head { display: flex; align-items: center; gap: 9px; }
.open-score-head > strong { color: #244f47; font-size: 28px; line-height: 1; }
.open-score-head > span { display: grid; color: #172230; font-size: 11px; font-weight: 850; }
.open-score-head small { color: #315f56; font-size: 9px; }
.open-score-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.open-score-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid rgba(38,59,88,.15); border-radius: 4px; color: #69736f; font-size: 9px; }
.open-score-chip.is-strong { color: #245c4d; background: rgba(222,239,233,.72); }
.open-score-chip b { font-weight: 800; }
.open-score-chip i { font-style: normal; }
.open-evaluation > p { margin: 0; color: #364841; font-size: 11px; line-height: 1.45; }
.open-evaluation q { display: grid; gap: 3px; padding: 8px 10px; border-left: 2px solid #78a899; color: #244f47; background: rgba(229,242,237,.52); font-family: Georgia,"Times New Roman",serif; font-size: 13px; line-height: 1.45; }
.open-evaluation q::before,
.open-evaluation q::after { content: none; }
.open-evaluation q small { color: #69736f; font-family: Inter,system-ui,sans-serif; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.open-complete-score { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 14px 16px; border: 1px solid rgba(49,95,86,.2); border-radius: 6px; background: rgba(222,239,233,.72); }
.open-complete-score > strong { color: #244f47; font-size: 34px; line-height: 1; }
.open-complete-score > span { display: grid; color: #17201d; font-size: 12px; font-weight: 850; }
.open-complete-score small { color: #65716c; font-size: 10px; }
@keyframes open-spin { to { transform: rotate(360deg); } }
.guide-channel .thinking-step .live-dialogue-prompt { margin: 0; color: #172230; font-size: clamp(17px, 1.4vw, 23px); font-weight: 650; text-align: left; }
.guide-channel .live-dialogue-options { gap: 7px; }
.guide-channel .live-dialogue-option { min-height: 0; grid-template-columns: 30px minmax(0,1fr); align-items: center; padding: 8px 10px; border: 1px solid rgba(38, 59, 88, .16); border-radius: 5px; background: rgba(255,255,255,.62); }
.guide-channel .live-dialogue-option > strong { width: 28px; height: 28px; border-color: rgba(38,59,88,.32); color: #294d82; font-size: 12px; }
.guide-channel .live-dialogue-option b { color: #172230; font-size: clamp(14px, 1.05vw, 18px); }
.guide-channel .live-dialogue-option q { margin-top: 2px; color: #55647b; font-size: clamp(11px, .8vw, 14px); }
.guide-channel .live-dialogue-formula { margin-top: 0; padding-top: 8px; border-color: rgba(38,59,88,.18); }
.guide-channel .live-dialogue-formula strong { color: #233b61; font-size: clamp(13px, 1vw, 17px); }
.minimal-voice-control { position: absolute; z-index: 10; bottom: 24px; left: 50%; display: grid; width: 150px; justify-items: center; transform: translateX(-50%); }
.channel-switcher { position: relative; display: grid; place-items: center; width: 150px; height: 78px; }
.channel-arrow { position: absolute; top: 50%; display: grid; width: 54px; height: 34px; place-items: center; color: #45e477; transform: translateY(-50%); transition: left 220ms ease, right 220ms ease, color 180ms ease; }
.channel-arrow svg { width: 48px; height: 34px; stroke-width: 3; fill: rgba(69,228,119,.12); }
.channel-scene .channel-arrow { left: -4px; }
.channel-inner .channel-arrow { right: -4px; }
.channel-target { margin-top: 4px; color: #315f56; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .12em; }
.is-channel-switching .channel-switcher { animation: channel-orbit 650ms cubic-bezier(.2,.8,.25,1); }
.is-channel-switching .channel-arrow { animation: channel-arrow-pulse 650ms ease-out; }
.minimal-mic { display: grid; width: 74px; height: 74px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #1b2925; box-shadow: 0 10px 28px rgba(8,20,16,.24); cursor: pointer; }
.minimal-mic:disabled { opacity: .48; cursor: default; }
.minimal-mic.is-listening { background: #a44646; animation: minimal-pulse 1.4s infinite; }
.minimal-mic svg { width: 26px; height: 26px; }
.minimal-voice-control > strong { margin-top: 7px; color: #1f2926; font-size: 12px; }
.minimal-voice-control > small { margin-top: 2px; color: #69736f; font-size: 9px; letter-spacing: .1em; }
.minimal-level { width: 108px; height: 3px; margin-top: 6px; overflow: hidden; background: rgba(28,42,37,.14); }
.minimal-level span { display: block; width: 100%; height: 100%; background: #a44646; transform-origin: left; }
.minimal-voice-control .live-dialogue-error { position: absolute; top: 104px; width: 280px; text-align: center; }
@keyframes minimal-pulse { 50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(164,70,70,.12); } }
@keyframes channel-orbit { 0% { transform: rotate(0deg) scale(1); } 35% { transform: rotate(16deg) scale(1.08); } 70% { transform: rotate(-10deg) scale(1.04); } 100% { transform: rotate(0deg) scale(1); } }
@keyframes channel-arrow-pulse { 0% { opacity: .25; transform: translateY(-50%) scale(.72); } 45% { opacity: 1; transform: translateY(-50%) scale(1.16); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }

@media (max-width: 760px) {
  .minimal-dialogue-stage { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .minimal-pane { padding: 20px 22px 92px; }
  .minimal-pane > header { margin-bottom: 12px; }
  .minimal-pane > header span { font-size: 22px; }
  .scene-channel { border-right: 0; border-bottom: 1px solid rgba(26,38,34,.14); }
  .scene-person { grid-template-columns: 54px minmax(0, 1fr); margin-bottom: 10px; }
  .scene-person .emotion-avatar { width: 54px; }
  .emotion-face { width: 32px; height: 32px; }
  .emotion-face::before { top: 8px; left: 7px; box-shadow: 11px 0 #27302d; }
  .emotion-face i { left: 9px; bottom: 6px; width: 12px; }
  .scene-conversation { gap: 10px; }
  .scene-turn p { padding: 10px 12px; font-size: 17px; }
  .thinking-map { gap: 7px; }
  .inner-conversation { gap: 8px; }
  .inner-turn { max-width: 96%; }
  .inner-turn p { padding: 10px 12px; font-size: 16px; }
  .inner-choice-list { gap: 4px; }
  .inner-choice { gap: 4px; padding: 5px; }
  .inner-choice b { flex-basis: 20px; width: 20px; height: 20px; }
  .inner-choice strong { font-size: 10px; }
  .thinking-step { gap: 7px; padding: 9px 10px; }
  .thinking-step > header { grid-template-columns: 25px minmax(0,1fr); gap: 7px; }
  .thinking-number { width: 24px; height: 24px; }
  .thinking-pointer { top: 8px; right: 8px; }
  .thinking-pointer svg { width: 20px; height: 20px; }
  .thinking-pointer span { display: none; }
  .guide-channel .thinking-step .live-dialogue-prompt { margin-bottom: 0; padding-right: 26px; font-size: 17px; }
  .guide-channel .live-dialogue-option { padding: 7px 9px; }
  .guide-channel .live-dialogue-option b { font-size: 14px; }
  .guide-channel .live-dialogue-option q { font-size: 11px; }
  .guide-channel .live-dialogue-formula { display: none; }
  .open-response-coach { padding: 10px; }
  .open-response-pointer { top: 8px; right: 8px; }
  .open-response-pointer svg { width: 20px; height: 20px; }
  .open-response-pointer span { display: none; }
  .open-response-coach > p { padding-right: 22px; font-size: 16px; }
  .open-hint-list span { padding: 5px 8px; font-size: 11px; }
  .minimal-mic { width: 60px; height: 60px; }
  .minimal-voice-control { width: 120px; }
  .channel-switcher { width: 120px; height: 64px; }
  .channel-arrow { width: 42px; height: 28px; }
  .channel-arrow svg { width: 38px; height: 28px; }
  .minimal-voice-control { bottom: 10px; }
}

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