/* 面试之间 · visual system "工牌 × 视频会议".
   Corporate artefacts (badge, meeting tile, record sheet) worn by childhood characters.
   The only stylesheet loaded; style.css / carousel.css are legacy and unused. */
:root {
  color-scheme: light;
  --paper: #f3eee3;
  --paper-hi: #fbf8f1;
  --card: #fffdf8;
  --ink: #17161b;
  --ink-2: #3f3c45;
  --muted: #6f6a76;
  --hair: #17161b1f;
  --live: #ff4d3d;
  --ok: #1f8f55;
  --warn: #c86f00;
  --role: #ffc934;
  --role-on: #2a1d00;
  --role-soft: #fff1c2;
  --role-hl: #ffd65c;
  --border: 2.5px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --font: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", ui-monospace, "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --ease-spring: cubic-bezier(.2, .9, .3, 1.15);
  font-family: var(--font);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px; color: var(--ink);
  background: radial-gradient(#17161b17 1px, transparent 1.3px) 0 0 / 22px 22px, var(--paper);
  overflow-x: hidden;
}
button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--ink); text-underline-offset: 3px; }
p { line-height: 1.7; }
.quiet { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.inapp-notice { margin: 10px auto 0; max-width: 560px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  background: color-mix(in srgb, #f5a623 16%, transparent); border: 1px solid color-mix(in srgb, #f5a623 45%, transparent); color: inherit; text-align: left; }
.inapp-notice[hidden] { display: none; }
.inapp-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(17, 17, 17, .72); }
.inapp-modal[hidden] { display: none; }
.inapp-locked { overflow: hidden; }
.inapp-modal-card { width: min(420px, 100%); max-height: 100%; overflow: auto; padding: 24px 20px 20px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); text-align: left; }
.inapp-modal-badge { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: #f5a623; color: #111; font-size: 12px; font-weight: 800; }
.inapp-modal-card h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }
.inapp-modal-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; }
.inapp-modal-steps { margin: 0 0 18px; padding: 12px 14px 12px 34px; border-radius: 12px; background: color-mix(in srgb, #f5a623 18%, transparent); font-size: 15px; font-weight: 700; line-height: 1.8; }
.inapp-modal-close { width: 100%; padding: 13px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--paper); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.inapp-modal-close:disabled { opacity: .45; cursor: not-allowed; }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin: 0 0 10px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 12px; transform: translateY(-160%); z-index: 20; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; }
.skip-link:focus-visible { transform: none; }

/* Buttons */
.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 22px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 800;
  box-shadow: 4px 4px 0 var(--role-hl); transition: transform .12s, box-shadow .12s, background .2s;
}
.primary:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--role-hl); }
.primary:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--role-hl); }
.primary span[aria-hidden] { font-size: 18px; }
.primary.danger { background: var(--live); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.ghost {
  min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--card); font-size: 14px; font-weight: 700;
}
.ghost:hover { background: var(--paper-hi); }
.text-button { background: none; border: 0; padding: 0; margin-top: 6px; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Header */
.site-header, main, .site-footer { max-width: 1280px; margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; }
.brand { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; text-align: left; }
.brand-mark { width: 30px; height: 38px; border: 2.5px solid var(--ink); border-radius: 7px; background: linear-gradient(var(--ink) 0 0) 50% 5px / 12px 3px no-repeat, linear-gradient(var(--role) 0 0) 0 100% / 100% 42% no-repeat, var(--card); transform: rotate(-8deg); transition: background .3s; }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.brand-name small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.header-link:hover { background: var(--role-hl); }
.header-link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
body[data-page="room"] .header-actions, body[data-page="growth"] .header-actions { visibility: hidden; }
main { padding: 12px 40px 56px; }

/* Setup ---------------------------------------------------------------- */
.setup-heading { text-align: center; }
.setup-heading .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.setup-heading .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
h1 { margin: 0; font-size: clamp(34px, 4vw, 54px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
h1 em { font-style: normal; background: linear-gradient(transparent 60%, var(--role-hl) 60%, var(--role-hl) 92%, transparent 92%); transition: background .3s; }
.intro { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }

.carousel-shell { --card-w: 280px; --card-h: calc(var(--card-w) * 43 / 29); --track-top: 44px; margin: 0 -40px; }
.role-track {
  --gutter: calc((100% - var(--card-w)) / 2);
  display: flex; align-items: flex-start; gap: 26px; padding: var(--track-top) max(0px, var(--gutter)) 26px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  touch-action: pan-x pan-y; user-select: none; cursor: grab;
}
.role-track::-webkit-scrollbar { display: none; }
.role-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.role-track:focus-visible { outline-offset: -6px; }

.role-card {
  --tilt: 4deg;
  position: relative; flex: 0 0 var(--card-w); width: var(--card-w); aspect-ratio: 29 / 43;
  display: flex; flex-direction: column; align-items: stretch; padding: 12px 14px 14px; text-align: left;
  background: var(--role); color: var(--role-on); border: var(--border); border-radius: 22px;
  scroll-snap-align: center; transform-origin: 50% -30px;
  transform: translateY(22px) scale(.82) rotate(var(--tilt));
  opacity: .6; filter: saturate(.35) brightness(.97);
  transition: transform .45s var(--ease-spring), opacity .3s, filter .3s, box-shadow .3s;
}
.role-card.is-selected ~ .role-card { --tilt: -4deg; }
.role-card::before { /* lanyard */
  content: ''; position: absolute; left: 50%; top: -46px; width: 22px; height: 52px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--ink) 0 3px, var(--role-hl) 3px 9px); border: 2px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; z-index: -1;
}
.role-card:hover:not(.is-selected) { opacity: .9; }
.role-card.is-selected { transform: none; opacity: 1; filter: none; box-shadow: 8px 10px 0 var(--ink); animation: badge-swing .9s var(--ease-spring); z-index: 1; }
@keyframes badge-swing { 0% { rotate: -5deg; } 30% { rotate: 3deg; } 55% { rotate: -1.4deg; } 80% { rotate: .5deg; } 100% { rotate: 0deg; } }
.badge-slot { display: block; width: 52px; height: 11px; margin: 0 auto 10px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); }
.badge-head { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .02em; opacity: .85; }
.badge-photo { position: relative; display: block; align-self: stretch; width: 100%; box-sizing: border-box; flex: 1 1 0; min-height: 0; margin: 8px 0 12px; border: var(--border); border-radius: 14px; overflow: hidden; background-color: var(--role-soft); }
.role-art { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.role-art img { position: absolute; left: 0; right: 0; top: 7%; width: 100%; height: 132%; object-fit: contain; object-position: 50% 0; pointer-events: none; }
.role-info { display: block; }
.role-title { display: block; font-size: 13px; font-weight: 700; opacity: .85; }
.role-name { display: block; font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; }
.role-traits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.role-traits span { font-size: 12px; font-weight: 700; line-height: 1; padding: 4px 8px; border: 1.5px solid currentColor; border-radius: 999px; }
.badge-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; min-height: 22px; }
.barcode { width: 92px; height: 18px; opacity: .75; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px, currentColor 8px 11px, transparent 11px 13px); }
.selected-mark { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .3s var(--ease-spring); }
.is-selected .selected-mark { opacity: 1; transform: none; }

/* Per-role photo backdrops (also used by the interview stage). */
[data-role="dragon"] .badge-photo, .stage[data-role="dragon"] .stage-backdrop { background-image: radial-gradient(circle, #e8a8003d 2px, transparent 2.6px); background-size: 14px 14px; }
[data-role="dave"] .badge-photo, .stage[data-role="dave"] .stage-backdrop { background-image: linear-gradient(#4b7be526 1px, transparent 1px), linear-gradient(90deg, #4b7be526 1px, transparent 1px); background-size: 16px 16px; }
[data-role="wolf"] .badge-photo, .stage[data-role="wolf"] .stage-backdrop { background-image: repeating-linear-gradient(135deg, #e2412f1f 0 10px, transparent 10px 20px); }
[data-role="screen"] .badge-photo, .stage[data-role="screen"] .stage-backdrop { background: repeating-linear-gradient(0deg, #ffffff07 0 2px, transparent 2px 4px), #0c0d11; }
[data-role="probe"] .badge-photo, .stage[data-role="probe"] .stage-backdrop { background-image: repeating-radial-gradient(circle at 50% 42%, #7b61ff26 0 2px, transparent 2px 18px); }
[data-role="screen"] .role-title, [data-role="screen"] .role-traits { color: #6ee7a0; }
[data-role="screen"] .selected-mark { background: #6ee7a0; color: var(--ink); }

.camera-off { gap: 14px; }
.cam-initial { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #2c3140; color: #d6dbe6; font-size: 34px; font-weight: 800; transition: box-shadow .3s; }
.cam-label { font-family: var(--mono); font-size: 12px; color: #8b93a5; letter-spacing: .06em; }
.typing-dots { display: flex; gap: 5px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: #6ee7a0; animation: typing 1.1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 70%, 100% { opacity: .25; transform: none; } 35% { opacity: 1; transform: translateY(-3px); } }
.emblem-art { gap: 10px; }
.emblem-art .emblem { width: 62%; max-width: 220px; height: auto; color: var(--role, #7b61ff); filter: drop-shadow(4px 5px 0 #17161b22); }
.unknown .emblem { color: #6a4ff0; }
.unknown .cam-label { color: #5a4bb0; font-weight: 700; }
.exec-placeholder .emblem { color: #547568; }
.exec-placeholder .cam-label { color: #345044; font-weight: 700; }

/* Arrows flank the selected badge; the caption stays for screen readers and small screens. */
.carousel-shell { position: relative; }
.carousel-navigation {
  position: absolute; left: 50%; top: calc(var(--track-top) + var(--card-h) / 2); z-index: 2;
  width: calc(var(--card-w) + 128px); transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.circle-button { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--card); font-size: 19px; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s, opacity .2s; }
.circle-button:hover:not(:disabled) { background: var(--role-hl); }
.circle-button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.circle-button:disabled { opacity: 0; }
.carousel-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
#role-count { font-family: var(--mono); }
.role-dots { display: flex; justify-content: center; align-items: center; gap: 2px; }
.swipe-hint { display: none; margin: 0 0 0 8px; font-size: 12px; color: var(--muted); }
.role-dots button { width: 30px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.role-dots button::after { content: ''; width: 8px; height: 8px; border-radius: 8px; background: #17161b40; transition: width .25s var(--ease-spring), background .2s; }
.role-dots button[aria-pressed="true"]::after { width: 22px; background: var(--ink); }

.setup-deck { display: grid; grid-template-columns: 1.05fr 1.2fr .95fr; gap: 16px; max-width: 1120px; margin: 18px auto 0; }
.deck-block { background: var(--card); border: var(--border); border-radius: 18px; padding: 16px 20px 18px; }
.deck-label { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
#role-promise { margin: 8px 0 0; font-size: 17px; font-weight: 800; line-height: 1.5; }
.difficulty-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.difficulty { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 48px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-hi); transition: background .15s, color .15s; }
.difficulty strong { font-size: 16px; font-weight: 800; }
.difficulty[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.intensity { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.intensity i { width: 4px; height: 6px; border-radius: 1px; background: #17161b30; }
.intensity i:nth-child(2) { height: 10px; }
.intensity i:nth-child(3) { height: 14px; }
.intensity i.on { background: currentColor; }
.difficulty[aria-pressed="true"] .intensity i.on { background: var(--role-hl); }
.difficulty[aria-pressed="true"] .intensity i:not(.on) { background: #ffffff30; }
.level-summary { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.deck-launch { display: flex; flex-direction: column; justify-content: center; gap: 10px; background: none; border: 0; padding: 0; }
.start-button { width: 100%; min-height: 76px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 22px; border-radius: 16px; box-shadow: 6px 6px 0 var(--role-hl); }
.start-button:hover:not(:disabled) { box-shadow: 8px 8px 0 var(--role-hl); transform: translate(-2px, -2px); }
.start-main { font-size: 22px; font-weight: 800; }
.start-main::after { content: ' →'; }
.deck-launch .quiet { text-align: center; }
/* Laptop screens (≤920px tall): keep the start button above the fold. */
@media (min-width: 761px) and (max-height: 920px) {
  .site-header { padding-top: 10px; padding-bottom: 10px; }
  main { padding-top: 4px; }
  body .mode-navigation { margin-bottom: 14px; }
  h1 { font-size: clamp(32px, 3.4vw, 46px); }
  .carousel-shell { --card-w: 232px; --track-top: 36px; }
  .role-track { padding-bottom: 14px; }
  .setup-deck { margin-top: 8px; }
}

/* Interview room ---------------------------------------------------------- */
.meeting-bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 10px 12px 10px 18px; margin-bottom: 20px; border-radius: 18px; background: var(--ink); color: var(--paper);
}
.meeting-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.live-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 #ff4d3d88; animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px #ff4d3d00; } 100% { box-shadow: 0 0 0 0 #ff4d3d00; } }
.room-title { font-size: 17px; font-weight: 800; letter-spacing: 0; line-height: 1.3; white-space: nowrap; }
.meeting-id > div { min-width: 0; }
.room-meta { display: block; font-family: var(--mono); font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meeting-progress { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.progress-track { display: flex; gap: 8px; }
.progress-group { display: flex; gap: 4px; padding: 5px 7px; border: 1.5px solid #ffffff26; border-radius: 999px; transition: border-color .3s; }
.progress-group.is-current { border-color: var(--role-hl); }
.progress-group i { width: 18px; height: 6px; border-radius: 3px; background: #ffffff2e; transition: background .3s; }
.progress-group i.done { background: var(--paper); }
.progress-group i.now { background: var(--role-hl); animation: now 1.4s ease-in-out infinite; }
@keyframes now { 50% { opacity: .45; } }
.progress-text { font-family: var(--mono); font-size: 12px; opacity: .75; white-space: nowrap; }
.meeting-actions { display: flex; align-items: center; gap: 12px; }
.timer { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
#room[data-role="wolf"] .timer { color: var(--role-hl); font-weight: 800; }
.end-button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--live); color: #fff; font-size: 14px; font-weight: 800; }
.end-button:hover:not(:disabled) { background: #e63a2b; }

.room-grid { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.stage-column { position: sticky; top: 16px; }
.stage {
  position: relative; width: 100%; height: min(600px, calc(100vh - 190px)); min-height: 380px;
  border: var(--border); border-radius: 22px; overflow: hidden; background: var(--role-soft); box-shadow: var(--shadow);
  transition: box-shadow .3s, border-color .3s;
}
.stage-backdrop { position: absolute; inset: 0; }
.stage-backdrop::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(transparent, #17161b14); }
.avatar { position: absolute; inset: 0; animation: arrive .5s var(--ease-spring) both; }
.avatar .role-art img { top: auto; bottom: -2%; height: 88%; object-position: 50% 100%; transition: filter .4s; }
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } }
.clip-slot { position: absolute; inset: 0; pointer-events: none; }
.clip-slot:empty { display: none; }
.stage-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; z-index: 2; }
.state-chip, .sound-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 800; }
.state-chip i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.sound-toggle { font-family: var(--mono); font-size: 12px; }
.sound-toggle[aria-pressed="true"] { background: var(--ink); color: #6ee7a0; }
.stage-caption { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; }
.name-tag { display: inline-block; padding: 5px 10px; border-radius: 10px 10px 0 0; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; }
.caption-line { margin: 0; padding: 12px 14px; min-height: 52px; border: var(--border); border-radius: 0 14px 14px 14px; background: var(--card); font-size: 16px; font-weight: 800; line-height: 1.5; }
.caption-line.is-new { animation: caption .35s var(--ease-spring); }
@keyframes caption { from { opacity: 0; transform: translateY(6px) scale(.98); } }
/* Text carrier: dynamic content for roles without a dynamic voice (annotation / card / chat). */
.text-carrier { position: absolute; top: 58px; left: 14px; right: 112px; z-index: 3; max-height: 45%; overflow: auto; padding: 10px 12px; border: var(--border); border-radius: 14px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); animation: caption .35s var(--ease-spring); }
.text-carrier[hidden] { display: none; }
.text-carrier-title { display: inline-block; margin-bottom: 4px; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.text-carrier-body { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.55; }
.text-carrier[data-carrier="annotation"] { border-color: #c8261b; transform: rotate(-.6deg); }
.text-carrier[data-carrier="annotation"] .text-carrier-body { color: #b0201a; }
.text-carrier[data-carrier="card"] { border-radius: 10px; background: var(--paper-hi); }
.text-carrier[data-carrier="chat"] { border-radius: 4px 14px 14px 14px; background: #1f2128; color: #e8ebf2; border-color: #3a3d47; }
.text-carrier[data-carrier="chat"] .text-carrier-title { color: #9aa3b5; }
@media (max-width: 640px) { .text-carrier { right: 14px; top: 104px; } }
.self-tile { position: absolute; top: 58px; right: 14px; z-index: 2; width: 86px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 12px; background: #26282f; color: #d6dbe6; }
.self-tile b { font-size: 18px; line-height: 1.2; }
.self-tile small { font-size: 11px; opacity: .75; }
.mode-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* Stage states: static art + light transitions. Real clips mount in #clip-slot. */
.stage[data-state="processing"] .state-chip i { background: var(--role); animation: now .8s ease-in-out infinite; }
.stage[data-state="processing"] .avatar .role-art img { filter: saturate(.85) brightness(.97); }
.stage[data-state="responding"] { box-shadow: 6px 6px 0 var(--role); }
.stage[data-state="responding"] .state-chip i { background: var(--live); }
.stage[data-state="responding"][data-kind="followup"] .state-chip { background: var(--role); color: var(--role-on); }
.stage[data-state="ended"] .avatar .role-art img { filter: grayscale(.7); }
.stage[data-state="ended"] .state-chip i { background: #9a95a0; }
.stage[data-role="screen"] { background: #0c0d11; }
.stage[data-role="screen"] .stage-backdrop::after { display: none; }
.stage[data-role="screen"] .cam-initial { width: 132px; height: 132px; font-size: 52px; margin-bottom: 40px; }
.stage[data-role="screen"][data-state="responding"] .cam-initial { box-shadow: 0 0 0 5px #0c0d11, 0 0 0 9px #6ee7a0; }
.stage[data-role="screen"] .role-art { padding-bottom: 60px; }
.stage .emblem-art .emblem { width: min(46%, 240px); }
.stage[data-role="probe"] .role-art { padding-bottom: 80px; }

.question-sheet { background: var(--card); border: var(--border); border-radius: 22px; padding: 24px 28px; box-shadow: var(--shadow); }
.question-sheet.is-entering { animation: sheet-in .42s var(--ease-spring); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topic-label { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.kind-chip { flex: none; font-size: 13px; font-weight: 800; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-hi); }
.kind-chip[data-kind="followup"] { background: var(--role); color: var(--role-on); }
.background-panel { margin: 14px 0 0; padding: 12px 16px 14px; border-radius: 14px; background: var(--paper); }
.block-label { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.background-panel p { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.background-panel.is-collapsed p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread { list-style: none; margin: 16px 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--role); display: grid; gap: 12px; }
.thread-label { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.thread-question { margin: 2px 0 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.thread-you { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.thread-answer { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; padding: 8px 12px; text-align: left; font-size: 14px; line-height: 1.6; border: 1.5px solid var(--hair); border-radius: 10px; background: var(--paper-hi); white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-answer[aria-expanded="true"] { display: block; }
#question { margin: 18px 0 0; font-size: clamp(21px, 1.9vw, 26px); font-weight: 800; line-height: 1.5; letter-spacing: -.005em; overflow-wrap: anywhere; }
#question:focus { outline: none; }
.answer-hint { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--role-soft); font-size: 14px; line-height: 1.6; }
.source-details { margin-top: 14px; font-size: 12px; color: var(--muted); }
.source-details summary { cursor: pointer; width: fit-content; }
.source-copy { margin-top: 6px; line-height: 1.7; }
.source-copy a { margin-left: 8px; }

.answer-form { margin: 22px 0 0; }
.answer-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.answer-heading label { font-size: 15px; font-weight: 800; }
#answer-count { white-space: nowrap; }
.answer-context { display: none; }
textarea {
  display: block; width: 100%; min-height: 190px; max-height: 60vh; resize: vertical;
  padding: 16px 18px; border: var(--border); border-radius: 16px; background: var(--card);
  font-size: 16px; line-height: 1.8; transition: box-shadow .15s;
}
textarea::placeholder { color: #9d98a4; }
textarea:focus { outline: none; box-shadow: 5px 5px 0 var(--role-hl); }
textarea:disabled { color: var(--muted); background: var(--paper-hi); }
.answer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }

.transcript-panel { margin-top: 26px; border-top: 2px solid var(--ink); }
.transcript-panel > summary { cursor: pointer; padding: 14px 0; font-size: 15px; font-weight: 800; width: fit-content; }
#transcript-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; }
.empty-copy { margin: 4px 0 12px; font-size: 14px; color: var(--muted); }
.transcript-turn { padding: 14px 0; border-top: 1.5px solid var(--hair); }
.turn-label { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.transcript-turn h3 { margin: 4px 0 6px; font-size: 15px; font-weight: 800; line-height: 1.6; }
.transcript-turn p { margin: 0; font-size: 14px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Result: a printed feedback report ------------------------------------- */
.record-sheet {
  position: relative; max-width: 900px; margin: 8px auto 0; padding: 34px 44px 26px;
  background: var(--card); border: var(--border); border-top: 14px solid var(--role); border-radius: 10px; box-shadow: 8px 8px 0 var(--ink);
}
.record-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.record-title h1 { font-size: clamp(34px, 4vw, 46px); }
.record-date { margin: 6px 0 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.mini-badge { width: 136px; padding: 8px 8px 10px; background: var(--role); color: var(--role-on); border: var(--border); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(4deg); }
.mini-photo { position: relative; display: block; height: 118px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--role-soft); }
.mini-photo .cam-initial { width: 56px; height: 56px; font-size: 22px; }
.mini-photo .cam-label, .mini-photo .typing-dots { display: none; }
.mini-photo .emblem-art .emblem { width: 70%; }
#result[data-role="screen"] .mini-photo { background: #0c0d11; }
.mini-badge strong { display: block; margin-top: 6px; font-size: 18px; font-weight: 800; }
.mini-badge span:last-child { font-size: 12px; font-weight: 700; opacity: .85; }
.record-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 24px 0 20px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.record-field { padding: 12px 14px 12px 0; }
.record-field + .record-field { padding-left: 14px; border-left: 1.5px solid var(--hair); }
.record-field dt { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.record-field dd { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
/* Character sign-off sits at the end so it never reads as the verdict. */
.record-quote { margin: 30px 0 0; padding: 14px 18px; border: 1.5px dashed #17161b40; border-radius: 14px; background: var(--paper-hi); }
.record-quote cite { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 999px; background: var(--paper); font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--muted); }
.record-quote p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink-2); }
.record-notice { margin: 0; padding: 12px 16px; border: 1.5px dashed #17161b40; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
#result[data-evaluation="on"] .record-notice { padding: 0; border: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* Coach verdict: the point of the page. */
.feedback-report { margin-top: 14px; padding: 22px 26px 24px; border: var(--border); border-radius: 18px; background: var(--card); box-shadow: 6px 6px 0 var(--role-hl); }
#result:not([data-evaluation="on"]) .feedback-report { display: none; }
.feedback-report-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.feedback-kicker { padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--role); color: var(--role-on); font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.feedback-caveat { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.feedback-summary { margin-top: 16px; }
.feedback-summary h3 { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.feedback-summary p { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.75; color: var(--ink); overflow-wrap: anywhere; }
.feedback-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.feedback-pair:not(:has(> :not([hidden]))) { display: none; }
.feedback-strengths, .feedback-improvements { min-width: 0; padding: 14px 16px 16px; border: 2px solid var(--ink); border-radius: 14px; }
.feedback-strengths { background: var(--paper-hi); }
.feedback-improvements { background: var(--role-soft); }
.feedback-strengths h3, .feedback-improvements h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.feedback-strengths h3::before, .feedback-improvements h3::before { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; font-weight: 900; }
.feedback-strengths h3::before { content: "✓"; background: var(--ok); color: #fff; }
.feedback-improvements h3::before { content: "↗"; background: var(--ink); color: var(--paper); }
.feedback-strengths ul, .feedback-improvements ul { list-style: none; margin: 0; padding: 0; counter-reset: tip; }
.feedback-strengths li, .feedback-improvements li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; counter-increment: tip; }
.feedback-strengths li + li, .feedback-improvements li + li { border-top: 1.5px solid var(--hair); }
.feedback-strengths li::before, .feedback-improvements li::before { content: counter(tip, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.records-heading { margin: 34px 0 0; font-size: 20px; font-weight: 800; }
.records-heading::after { content: "你说了什么，以及可以学什么"; display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
#result[data-evaluation="off"] .records-heading::after { content: "按话题回看本场问答"; }
.record-group { margin-top: 26px; padding-top: 22px; border-top: 2px dashed #17161b33; }
.record-group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.record-group-no { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.record-group-title h2 { margin: 2px 0 0; font-size: 22px; font-weight: 800; }
.stamp { flex: none; padding: 5px 12px; border: 4px double currentColor; border-radius: 8px; font-size: 15px; font-weight: 900; letter-spacing: .12em; transform: rotate(-6deg); }
.stamp.complete { color: var(--ok); }
.stamp.partial { color: var(--warn); }
.stamp.unanswered { color: #8a8590; border-style: dashed; border-width: 2.5px; }
.record-group .background-panel { margin-top: 14px; }
.qa-list { list-style: none; margin: 10px 0 0; padding: 0; }
.qa-item { display: grid; grid-template-columns: 76px 1fr; column-gap: 16px; padding: 14px 0; border-bottom: 1.5px solid var(--hair); }
.qa-label { grid-row: span 2; padding-top: 3px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.qa-item > * { min-width: 0; }
.qa-question { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.6; overflow-wrap: anywhere; }
.qa-answer { margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--role); font-size: 15px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
#result[data-role="screen"] .qa-answer { border-left-color: #6ee7a0; }
#result[data-evaluation="on"] .qa-answer::before { content: "你的回答"; display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); white-space: normal; }
.qa-comment, .qa-improve { grid-column: 2; background: var(--role-soft); border: 2px solid var(--ink); }
.qa-comment { position: relative; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.qa-comment::before { content: "点评"; display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 800; line-height: 22px; vertical-align: 1px; }
.qa-improve { list-style: none; margin: 12px 0 0; padding: 10px 14px 12px; border-radius: 12px; }
.qa-comment:has(+ .qa-improve) { border-bottom: 0; border-radius: 12px 12px 0 0; }
.qa-comment + .qa-improve { margin-top: 0; padding-top: 8px; border-top: 1.5px dashed #17161b40; border-radius: 0 0 12px 12px; }
.qa-improve li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.qa-improve li + li { margin-top: 4px; }
.qa-improve li::before { content: "→"; position: absolute; left: 0; font-weight: 800; color: var(--ink); }
.qa-empty { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.is-missing .qa-question { color: var(--muted); font-weight: 700; }
.record-group .source-copy { font-size: 12px; color: var(--muted); margin-top: 10px; }
.reflection { margin-top: 28px; padding: 16px 22px; border-radius: 14px; background: var(--paper); }
.reflection h3 { margin: 0; font-size: 15px; font-weight: 800; }
.reflection ul { margin: 8px 0 0; padding-left: 20px; }
.reflection li { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.record-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 12px; border-top: 2px solid var(--ink); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.result-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 30px auto 0; }

/* Shared chrome */
.error-panel { position: sticky; bottom: 16px; z-index: 5; max-width: 720px; margin: 22px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: var(--card); border: var(--border); border-left: 8px solid var(--live); border-radius: 14px; box-shadow: var(--shadow); }
.error-panel p { margin: 0; font-size: 14px; font-weight: 700; }
.site-footer { display: flex; justify-content: space-between; gap: 12px; padding: 22px 40px 28px; border-top: 1.5px solid var(--hair); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.confirm-dialog { max-width: min(440px, calc(100% - 32px)); padding: 26px; color: var(--ink); background: var(--card); border: var(--border); border-radius: 20px; box-shadow: 8px 8px 0 var(--ink); }
.confirm-dialog::backdrop { background: #17161b80; }
.confirm-dialog h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.confirm-dialog p { margin: 0; font-size: 14px; color: var(--ink-2); }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Responsive ------------------------------------------------------------ */
@media (min-width: 1500px) { .carousel-shell { --card-w: 300px; } }

@media (max-width: 1023px) {
  .site-header, main, .site-footer { padding-left: 24px; padding-right: 24px; }
  .carousel-shell { margin-left: -24px; margin-right: -24px; }
  .setup-deck { grid-template-columns: 1fr 1fr; }
  .deck-launch { grid-column: 1 / -1; }
  .meeting-bar { grid-template-columns: 1fr auto; row-gap: 10px; }
  .meeting-progress { grid-column: 1 / -1; order: 3; justify-content: space-between; }
  .room-grid { grid-template-columns: 1fr; gap: 18px; }
  .stage-column { position: static; }
  .stage { height: 250px; min-height: 0; }
  .avatar { left: 52%; }
  .avatar .role-art img { top: 10%; bottom: auto; height: 170%; object-position: 50% 0; }
  .stage-caption { right: auto; width: min(54%, 380px); }
  .self-tile { display: none; }
  .stage[data-role="screen"] .cam-initial { width: 96px; height: 96px; font-size: 38px; margin-bottom: 0; }
  .stage[data-role="screen"] .role-art, .stage[data-role="probe"] .role-art { padding-bottom: 0; }
  /* Keyboard open on phones/tablets: shrink the stage, keep the question in view. */
  #room.is-typing .stage { height: 96px; box-shadow: 4px 4px 0 var(--ink); }
  #room.is-typing .avatar { left: 72%; }
  #room.is-typing .stage-top, #room.is-typing .name-tag { display: none; }
  #room.is-typing .stage-caption { top: 12px; bottom: 12px; width: 68%; }
  #room.is-typing .caption-line { height: 100%; min-height: 0; display: flex; align-items: center; font-size: 14px; border-radius: 14px; overflow: hidden; }
  #room.is-typing .answer-context { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
  #room.is-typing .answer-heading { align-items: flex-start; }
}

@media (min-width: 1024px) {
  .background-panel.is-collapsed p { display: block; overflow: visible; }
  #background-toggle { display: none; }
}

@media (max-width: 680px) {
  .site-header { padding: 12px 16px; }
  .brand-name { font-size: 17px; }
  .brand-name small { font-size: 10px; }
  .brand-mark { width: 24px; height: 31px; }
  .header-link { min-height: 36px; padding: 0 12px; font-size: 13px; }
  main { padding: 6px 16px 32px; }
  h1 { font-size: 32px; }
  .intro { font-size: 13px; margin-top: 8px; }
  .carousel-shell { margin-left: -16px; margin-right: -16px; }
  .carousel-shell { --card-w: min(68vw, 272px); --track-top: 40px; }
  .role-track { gap: 12px; padding-bottom: 20px; }
  .carousel-navigation { display: none; }
  .swipe-hint { display: block; }
  .role-name { font-size: 28px; }
  .role-traits span { font-size: 11px; }
  .carousel-navigation { gap: 14px; }
  .setup-deck { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .deck-block { padding: 14px 16px; }
  #role-promise { font-size: 15px; }
  .difficulty { padding: 0 10px; min-height: 46px; }
  .difficulty strong { font-size: 15px; }
  .deck-launch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 2px solid var(--ink); }
  body[data-page="setup"] { padding-bottom: 84px; }
  .start-button { min-height: 58px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 18px; box-shadow: 4px 4px 0 var(--role-hl); }
  .start-main { font-size: 19px; }
  .deck-launch .quiet { display: none; }
  body[data-page="setup"] .site-footer { padding-bottom: 20px; }

  .meeting-bar { padding: 8px 8px 10px 14px; border-radius: 14px; gap: 10px; margin-bottom: 14px; }
  .room-title { font-size: 15px; }
  .timer { font-size: 13px; }
  .end-button { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .progress-group i { width: 12px; }
  .progress-track { gap: 5px; }
  .progress-group { padding: 4px 5px; gap: 3px; }
  body[data-page="room"] .site-header { display: none; }
  body[data-page="room"] main { padding-top: 12px; }
  .stage { height: 156px; border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
  .room-grid { gap: 14px; }
  .stage-caption { width: 60%; left: 10px; bottom: 10px; }
  .stage-top { top: 10px; left: 10px; right: 10px; }
  .caption-line { font-size: 14px; padding: 9px 11px; min-height: 0; }
  .stage[data-role="screen"] .avatar { left: 58%; top: 40px; }
  .stage[data-role="screen"] .cam-initial { width: 60px; height: 60px; font-size: 24px; }
  .stage[data-role="screen"] .camera-off { gap: 8px; }
  .stage[data-role="screen"] .cam-label { font-size: 11px; }
  .stage[data-role="probe"] .avatar { left: 58%; }
  .state-chip, .sound-toggle { min-height: 28px; font-size: 12px; padding: 0 10px; }
  .question-sheet { padding: 18px 16px; border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
  .topic-label { font-size: 12px; }
  #question { font-size: 19px; margin-top: 14px; }
  .background-panel { padding: 10px 12px 12px; }
  .background-panel p { font-size: 14px; }
  textarea { min-height: 160px; padding: 14px; }
  #answer-shortcut { display: none; }
  .answer-actions .primary { width: 100%; }

  .record-sheet { padding: 22px 18px 20px; border-top-width: 10px; box-shadow: 5px 5px 0 var(--ink); }
  .record-head { gap: 12px; }
  .record-title h1 { font-size: 30px; }
  .record-date { font-size: 12px; }
  .mini-badge { width: 96px; padding: 6px 6px 8px; }
  .mini-photo { height: 80px; }
  .mini-badge strong { font-size: 15px; }
  .mini-badge span:last-child { font-size: 12px; }
  .record-fields { grid-template-columns: 1fr 1fr; }
  .record-field, .record-field + .record-field { padding: 10px 0; border-left: 0; border-bottom: 1.5px solid var(--hair); }
  .record-field:nth-child(even) { padding-left: 12px; border-left: 1.5px solid var(--hair); }
  .record-quote p { font-size: 15px; }
  .feedback-report { padding: 16px 14px 18px; border-radius: 14px; box-shadow: 4px 4px 0 var(--role-hl); }
  .feedback-summary p { font-size: 16px; }
  .feedback-pair { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .feedback-strengths, .feedback-improvements { padding: 12px 12px 14px; }
  .feedback-strengths li, .feedback-improvements li { font-size: 14px; padding-left: 26px; }
  .records-heading { margin-top: 28px; font-size: 18px; }
  .record-group-title h2 { font-size: 19px; }
  .stamp { font-size: 13px; padding: 4px 8px; }
  .qa-item { grid-template-columns: 1fr; }
  .qa-label { grid-row: auto; padding: 0 0 2px; }
  .qa-question { font-size: 15px; }
  .qa-comment, .qa-improve { grid-column: auto; }
  .qa-comment { padding: 10px 12px; font-size: 14px; }
  .qa-improve { padding-left: 12px; padding-right: 12px; }
  .site-footer { flex-direction: column; padding: 18px 16px 24px; }
}

@media (max-width: 360px) {
  h1 { font-size: 28px; }
  .carousel-shell { --card-w: 72vw; }
  .role-name { font-size: 24px; }
  .badge-head { font-size: 10px; }
  .difficulty { padding: 0 8px; }
  .difficulty strong { font-size: 14px; }
  .meeting-progress .progress-text { display: none; }
  .stage { height: 144px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Browser speech controls wrap within the meeting sheet. */
.voice-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.voice-auto { display: block; line-height: 1.6; }
.voice-interim { color: #685d50; border-left: 3px solid #c9b591; padding-left: 10px; overflow-wrap: anywhere; }

/* Two participant meeting. Supporting text stays in an optional drawer. */
.realtime-option { display:block; margin-top:12px; font-size:14px; }
.realtime-option small { display:block; margin-left:22px; color:var(--muted); }
body[data-page="room"] { background: #ecece9; }
body[data-page="room"] .site-header, body[data-page="room"] .site-footer { display: none; }
#room { padding-top: 20px; }
#room .meeting-bar { grid-template-columns: minmax(0,1fr) auto; border-radius: 18px; margin-bottom: 20px; }
#room .room-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: stretch; }
#room .self-camera, #room .stage { position: relative; width: 100%; aspect-ratio: 4/3; height: auto; min-height: 0; overflow: hidden; border: 0; border-radius: 20px; background: #202126; box-shadow: none; }
#room .stage-column { min-width: 0; position: static; }
#room .stage { background: #27282e; }
#room .stage-backdrop { opacity: .12; }
#room .avatar { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; animation: none; display: grid; place-items: center; }
#room .avatar .role-art { width: 100%; height: 100%; display: grid; place-items: center; }
#room .avatar img { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; transform-origin: 50% 90%; }
#room:not([data-meeting="live"]) .avatar { inset: 50% auto auto 50%; width: min(42%, 200px); height: auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; transform: translate(-50%,-50%); background: var(--role-soft); }
#room:not([data-meeting="live"]) .avatar img { object-fit: cover; object-position: 50% 20%; }
#room:not([data-meeting="live"]) .avatar .cam-label { display: none; }
#room:not([data-meeting="live"]) .avatar .emblem-art .emblem { width: 66%; }
#room .meeting-actions .ghost { min-height: 40px; border-color: #ffffff59; border-radius: 999px; background: transparent; color: var(--paper); }
#room .meeting-actions .ghost:hover { background: #ffffff1a; }
#room .self-avatar { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 132px; height: 132px; border-radius: 50%; background: #414958; display: grid; place-items: center; }
#room .self-avatar svg { width: 75%; fill: #c5d1e0; }
#self-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
#self-tile[data-camera="on"] #self-video { display: block; }
#self-tile[data-camera="on"] .self-avatar { display: none; }
#self-tile[data-listening="true"] { outline: 3px solid #58c4a1; outline-offset: -3px; }
#room .participant-name, #room .name-tag { position: absolute; bottom: 15px; left: 16px; color: #f7f7f8; background: #17181cbf; padding: 7px 12px; border-radius: 8px; font-size: 14px; }
#room .stage-caption { inset: 0; pointer-events: none; }
#room .caption-line, #room .stage-top, #room .question-meta, #room .answer-hint, #room .mode-note { display: none; }
#room.is-typing .stage { height: auto; box-shadow: none; }
#room.is-typing .avatar { left: 0; }
#room.is-typing .caption-line { display: none; }
#room.is-typing .stage-caption { inset: 0; width: auto; }
#room.is-typing .name-tag { display: inline-block; }
#room .meeting-dock { grid-column: 1 / -1; text-align: center; }
#room .meeting-caption { margin: 0 auto 12px; max-width: 920px; min-height: 30px; max-height: 90px; overflow: auto; font-size: 17px; line-height: 1.6; color: #33363d; }
#room .connection-actions, #room .meeting-toolbar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
#room .meeting-toolbar button { min-height: 46px; padding: 10px 20px; border: 1px solid #d6d7da; border-radius: 12px; box-shadow: none; }
#room .meeting-toolbar button[aria-pressed="true"] { background: #dcf4e9; border-color: #5bb394; }
#room .meeting-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
#room .work-column { grid-column: 1 / -1; min-width: 0; }
#meeting-text { max-width: 920px; margin: 0 auto; }
#meeting-text > summary { text-align: center; font-size: 14px; color: #61656e; cursor: pointer; padding: 8px; }
#meeting-text .question-sheet { margin-top: 14px; padding: 20px; border: 1px solid #ddd; box-shadow: none; border-radius: 14px; }
#meeting-text #question { font-size: 20px; }
#meeting-text .answer-form { padding: 20px; }
#room[data-meeting="live"] .avatar img { animation: meeting-breathe 4s ease-in-out infinite; }
#room[data-meeting="live"] #stage[data-speaking="true"] .avatar img { animation: meeting-speaking .58s ease-in-out infinite alternate; }
@keyframes meeting-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.012); } }
@keyframes meeting-speaking { from { transform: translateY(0) rotate(-.5deg); } to { transform: translateY(-7px) rotate(.5deg); } }
@media (max-width: 620px) {
  #room { padding-top: 8px; }
  #room .room-grid { gap: 10px; }
  #room .self-camera, #room .stage { aspect-ratio: 3/4; border-radius: 12px; }
  #room:not([data-meeting="live"]) .avatar, #room .self-avatar { width: 76px; height: 76px; }
  #room .meeting-id .room-meta { display: none; }
  #room .meeting-bar { padding: 12px; gap: 8px; }
  #room .room-title { font-size: 15px; }
  #room .meeting-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #room .meeting-toolbar button { min-height: 40px; padding: 6px 10px; font-size: 13px; }
  #room .participant-name, #room .name-tag { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #room .meeting-caption { font-size: 15px; max-height: 76px; }
}
@media (prefers-reduced-motion: reduce) { #room[data-meeting="live"] .avatar img { animation: none !important; } }

/* Original portrait mouth animation; source image remains the safe fallback. */
#room .avatar .role-art[data-wolf-animated="true"] > img { visibility: hidden; animation: none; }
#room .avatar .wolf-live-avatar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Persona behavior layer (PRD 9): dock note, intervention round, stage cue, 戏份回顾. Hidden unless used. */
.realtime-option[hidden] { display: none; }
.behavior-note { position: static; margin: 0 0 10px; max-height: none; }
.behavior-note .line-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--ink-2); border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--ink-2); }
.round-form { margin: 0 0 12px; padding: 12px; border: var(--border); border-radius: 14px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.round-form[hidden], .stage-cue[hidden], .persona-review[hidden] { display: none; }
.round-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.round-line { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 800; line-height: 1.5; }
.round-clarify { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.round-form textarea { width: 100%; box-sizing: border-box; }
.stage-cue { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4; margin: 0; padding: 6px 12px; border-radius: 999px; background: #1f2128; color: #e8ebf2; font-size: 13px; font-weight: 700; }
.persona-review { margin-top: 18px; }
.persona-review-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.persona-review-item { padding: 10px 12px; border: var(--border); border-radius: 12px; background: var(--card); }
.persona-review-item p { margin: 4px 0 0; line-height: 1.55; }
.persona-review-line { font-weight: 700; }
.persona-review-trend { margin-top: 10px; font-weight: 700; }
/* Seven-face UI is inserted only when its feature is enabled. */
.journey-lanyard { position:relative; margin:1rem 0; padding:1rem 1rem 1rem 2.5rem; border:2px solid var(--ink, #25221f); background:#f8f3e9; }
.journey-lanyard::before { content:""; position:absolute; top:0; bottom:0; left:.65rem; width:.6rem; background:var(--lanyard-color); }

/* Persona redesign: quiet neutral strategy badge, existing paper language. */
.exec-placeholder{background:radial-gradient(circle at 50% 45%,#ffffff99,transparent 62%),repeating-linear-gradient(90deg,#54756814 0 1px,transparent 1px 18px);}
[data-carrier="agenda"]{border-left:5px solid #547568;background:#eef3ee;}
.role-review{margin-block:1.5rem;padding:1rem;border:1px solid #302f2b;}

.journey-mail{padding:1rem;border:1px solid var(--border);border-radius:14px;background:var(--card);margin:1rem 0}.journey-mail p{white-space:pre-wrap;overflow-wrap:anywhere}.journey-mail h3{overflow-wrap:anywhere}

.chart,.report-v2{max-width:100%;min-width:0;margin:1.3rem 0;padding:1rem;border:1px solid var(--line,#ddd);border-radius:14px;background:var(--paper,#fffdf9)}
.chart svg{display:block;max-width:100%;height:auto}.chart table{width:100%;font-size:.85rem;table-layout:fixed;overflow-wrap:anywhere}.report-v2 article{margin:1.2rem 0;padding:.8rem 0;border-bottom:1px solid var(--line,#ddd)}.report-v2 blockquote{margin:.7rem 0;padding-left:1rem;border-left:3px solid var(--sage,#527858)}.report-v2 p,.report-v2 dd{overflow-wrap:anywhere;line-height:1.7}.report-v2 dd{margin:0 0 .7rem}.report-v2 dt{font-weight:700}@media(max-width:430px){.chart,.report-v2{padding:.65rem}.chart table{font-size:.72rem}.record-sheet{min-width:0}}

/* Practice / Rainbow seven-round mode switch and the rainbow-bridge level map. */
.mode-navigation { display:flex; width:fit-content; max-width:100%; gap:4px; margin:4px auto 26px; padding:4px; border:var(--border); border-radius:999px; background:var(--card); box-shadow:3px 3px 0 var(--ink); }
.mode-tab { min-height:44px; padding:8px 26px; border:0; border-radius:999px; background-color:transparent; color:var(--ink-2); font-weight:800; font-size:15px; transition:background-color .15s,color .15s; }
.mode-tab:hover { background-color:var(--paper); }
.mode-tab[aria-pressed="true"] { background-color:var(--ink); color:var(--paper-hi); }
.mode-tab.rainbow-tab { background-image:linear-gradient(90deg,#ef5b4c,#f39237,#f2c230,#4cae6f,#3a9fd6,#5c6fdc,#9b67d1); background-size:44% 3px; background-position:50% calc(100% - 8px); background-repeat:no-repeat; }
body[data-page="journey-setup"], body[data-page="journey"] { background:radial-gradient(#17161b12 1px,transparent 1.3px) 0 0/22px 22px,linear-gradient(#e4effa,var(--paper) 640px); }

.rainbow-setup { position:relative; min-width:0; padding:30px 32px 36px; overflow:hidden; border:var(--border); border-radius:28px; background:linear-gradient(#edf5fc,var(--card) 440px); box-shadow:var(--shadow); }
.rainbow-map { position:relative; min-width:0; }
.rainbow-stage { position:relative; width:100%; max-width:860px; margin:0 auto; aspect-ratio:1000/560; }
.rainbow-sky, .rainbow-sky svg { position:absolute; inset:0; width:100%; height:100%; }
.rainbow-sky path { fill:none; stroke-width:18; }
.rainbow-sky .rb-base { opacity:.2; }
.rainbow-sky .rb-lit { transition:stroke-dasharray .9s ease; }
.rainbow-sky .rb-horizon { stroke:var(--ink); stroke-width:2; stroke-dasharray:1 9; stroke-linecap:round; opacity:.4; }
.rainbow-node { position:absolute; z-index:1; left:var(--x); top:var(--y); transform:translate(-50%,-50%); }
.rainbow-node b { display:grid; place-items:center; width:46px; height:46px; border:2.5px solid var(--ink); border-radius:50%; background:var(--card); color:var(--ink); font:800 16px var(--mono); box-shadow:3px 3px 0 var(--ink); }
.rainbow-node small { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:3px 10px; border:1.5px solid var(--hair); border-radius:999px; background:#fffdf8eb; color:var(--ink-2); font-size:12px; font-weight:700; white-space:nowrap; }
.rainbow-node[data-state="locked"] b { border-color:#17161b47; color:var(--muted); box-shadow:none; }
.rainbow-node[data-state="locked"] small { color:var(--muted); }
.rainbow-node[data-state="current"] b { width:56px; height:56px; background:var(--c); color:#fff; font-size:20px; text-shadow:0 1px 0 #0003; animation:rainbow-halo 2.2s ease-out infinite; }
.rainbow-node[data-state="current"] small { border-color:var(--ink); background:var(--ink); color:var(--paper-hi); }
.rainbow-node[data-flag]::before { content:attr(data-flag); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:3px 10px; border:2px solid var(--ink); border-radius:999px; background:var(--role); font-size:12px; font-weight:800; white-space:nowrap; }
.rainbow-node[data-state="completed"] b { background:var(--c); color:#fff; font:800 18px var(--font); }
.rainbow-node[data-state="ended"] b { background:#dcd8cf; color:var(--ink-2); box-shadow:none; }
@keyframes rainbow-halo { 0% { box-shadow:3px 3px 0 var(--ink),0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent); } 75%,100% { box-shadow:3px 3px 0 var(--ink),0 0 0 16px color-mix(in srgb,var(--c) 0%,transparent); } }
.rainbow-foot { position:absolute; top:89.3%; transform:translate(-50%,-50%); padding:5px 12px; border:2px solid var(--ink); border-radius:8px; background:var(--card); font:800 11px var(--mono); letter-spacing:.14em; box-shadow:2px 2px 0 var(--ink); }
.rainbow-foot.start { left:13.6%; } .rainbow-foot.finish { left:86.4%; background:var(--role); }
.rainbow-title { position:absolute; left:50%; bottom:13%; width:44%; transform:translateX(-50%); display:grid; justify-items:center; gap:8px; text-align:center; }
.rainbow-eyebrow { color:var(--muted); font:700 11px var(--mono); letter-spacing:.24em; }
.rainbow-title h1 { margin:0; font-size:clamp(26px,5vw,50px); line-height:1.08; letter-spacing:.06em; }
.rainbow-tagline { color:var(--ink-2); font-size:14px; font-weight:700; }
.rainbow-now { margin:14px auto 0; text-align:center; font-size:14px; font-weight:800; }
.rainbow-now:empty { display:none; }
.rainbow-legend { position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; list-style:none; }
.rainbow-intro { max-width:600px; margin:8px auto 0; color:var(--ink-2); font-size:15px; line-height:1.75; text-align:center; text-wrap:balance; }
.rainbow-options { display:grid; gap:14px; max-width:600px; margin:24px auto 0; padding:18px 20px; border:2px solid var(--ink); border-radius:16px; background:var(--paper-hi); }
.rainbow-field-name { display:block; margin-bottom:8px; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.04em; }
.rainbow-seg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.rainbow-seg button { display:grid; gap:2px; min-height:58px; padding:8px 12px; border:2px solid var(--ink); border-radius:12px; background:var(--card); text-align:left; transition:transform .12s; }
.rainbow-seg button strong { font-size:15px; }
.rainbow-seg button small { color:var(--muted); font-size:12px; font-weight:600; }
.rainbow-seg button:hover { background:var(--paper); }
.rainbow-seg button[aria-pressed="true"] { background:var(--ink); color:var(--paper-hi); box-shadow:3px 3px 0 var(--rb3,#f2c230); }
.rainbow-seg button[aria-pressed="true"] small { color:#ffffffb0; }
.rainbow-toggle { display:flex; align-items:flex-start; gap:12px; padding:10px 0 0; border-top:1.5px dashed #17161b30; cursor:pointer; }
.rainbow-toggle span { display:grid; gap:2px; }
.rainbow-toggle strong { font-size:14px; }
.rainbow-toggle small { color:var(--muted); font-size:12.5px; line-height:1.5; }
.rainbow-toggle input { appearance:none; flex:none; position:relative; width:42px; height:24px; margin:0; border:2px solid var(--ink); border-radius:999px; background:var(--card); cursor:pointer; transition:background .15s; }
.rainbow-toggle input::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--ink); transition:transform .15s; }
.rainbow-toggle input:checked { background:#4cae6f; }
.rainbow-toggle input:checked::after { transform:translateX(18px); background:#fff; box-shadow:0 0 0 2px var(--ink); }
.rainbow-toggle input:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.primary.rainbow-launch { display:flex; min-height:56px; margin:24px auto 0; padding:0 36px; font-size:17px; }
.rainbow-map.compact { margin:4px 0 18px; }
.rainbow-map.compact .rainbow-stage { max-width:520px; }
.rainbow-map.compact .rainbow-node b { width:34px; height:34px; font-size:13px; box-shadow:2px 2px 0 var(--ink); }
.rainbow-map.compact .rainbow-node[data-state="current"] b { width:42px; height:42px; font-size:16px; }
.rainbow-map.compact .rainbow-node small, .rainbow-map.compact .rainbow-node[data-flag]::before { display:none; }
.rainbow-map.compact .rainbow-foot { padding:3px 7px; font-size:9px; }

@media(max-width:640px) {
  .mode-navigation { width:100%; margin-bottom:18px; } .mode-tab { flex:1; min-width:0; padding:8px 10px; font-size:14px; }
  .rainbow-setup { padding:20px 16px 28px; border-radius:22px; box-shadow:5px 5px 0 var(--ink); }
  .rainbow-node b { width:28px; height:28px; border-width:2px; font-size:12px; box-shadow:2px 2px 0 var(--ink); }
  .rainbow-node[data-state="current"] b { width:34px; height:34px; font-size:15px; }
  .rainbow-node small, .rainbow-node[data-flag]::before, .rainbow-eyebrow { display:none; }
  .rainbow-foot { padding:2px 5px; border-width:1.5px; font-size:8px; letter-spacing:.08em; }
  .rainbow-title { bottom:12%; width:54%; gap:4px; } .rainbow-tagline { font-size:11px; }
  .rainbow-map:not(.compact) .rainbow-legend { position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; display:grid; gap:8px; margin:18px 0 0; }
  .rainbow-map:not(.compact) .rainbow-now { display:none; }
  .rainbow-step { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px 12px; border:1.5px solid var(--hair); border-radius:12px; background:var(--card); }
  .step-no { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb,var(--c) 22%,#fff); font:800 12px var(--mono); }
  .rainbow-step strong { font-size:14px; } .rainbow-step em { color:var(--muted); font-size:12px; font-style:normal; font-weight:700; }
  .rainbow-step[data-state="current"] { border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
  .rainbow-step[data-state="current"] .step-no, .rainbow-step[data-state="completed"] .step-no { background:var(--c); color:#fff; }
  .rainbow-step[data-state="current"] em { color:var(--ink); }
  .rainbow-intro { font-size:14px; } .rainbow-options { padding:16px 14px; } .rainbow-seg button { padding:8px; } .rainbow-seg button small { font-size:11px; } .primary.rainbow-launch { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .rainbow-node[data-state="current"] b { animation:none; } .rainbow-sky .rb-lit, .mode-tab { transition:none; } }

/* Rainbow seven-round flow: invitation letters, waiting room, closing and the bronze reveal.
   (These styles previously lived in the unused legacy style.css and never loaded.) */
#journey > h1 { margin-bottom: 4px; font-size: clamp(24px, 3vw, 32px); }
#journey > p[role="status"] { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 14px; }
#journey > p[role="status"]:empty { display: none; }
#journey details > summary { cursor: pointer; font-weight: 800; font-size: 14px; }
.journey-notice { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.journey-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 6px; }
.journey-actions > button { min-height: 50px; padding: 0 26px; font-size: 15px; }
.journey-actions > .primary { padding: 0 34px; font-size: 16px; }
.journey-card { max-width: 620px; margin: 24px auto 0; padding: 26px 28px 20px; text-align: center; border: var(--border); border-radius: 20px; background: var(--card); box-shadow: 5px 5px 0 var(--ink); }
.journey-card h2 { margin: 10px 0 6px; font-size: 24px; }
.journey-card p { margin: 0; color: var(--ink-2); line-height: 1.7; }
.journey-tag { display: inline-block; padding: 3px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--role-hl, #ffd84a); font-size: 12px; font-weight: 800; }
.journey-closing + details { max-width: 620px; margin: 16px auto 0; }
.journey-progress { margin-top: 28px; padding-top: 12px; border-top: 2px solid var(--ink); }

.hr-letter { position: relative; max-width: 640px; margin: 24px auto 0; padding: 26px 32px 20px; text-align: left; color: #3d3328; background: linear-gradient(#fffdf6, #fbf5e8); border: var(--border); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); overflow: hidden; animation: letter-open .45s var(--ease-spring) both; }
.hr-letter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(135deg, #ef5b4c 0 14px, #fffdf6 14px 22px, #3a9fd6 22px 36px, #fffdf6 36px 44px); }
.hr-letter-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 14px; border-bottom: 1.5px dashed #17161b33; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.hr-letter-header span:last-child { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: var(--role-hl, #ffd84a); color: var(--ink); font-weight: 800; transform: rotate(-8deg); }
.hr-letter-meta { margin: 12px 0 0; white-space: pre-line; font-size: 12px; line-height: 1.8; color: var(--muted); }
.hr-letter h3 { margin: 12px 0 16px; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.5; color: var(--ink); }
.hr-letter-body p { margin: 0 0 8px; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.hr-letter-body p:first-child { font-weight: 700; }
.hr-letter-signature { margin: 18px 0 14px; text-align: right; white-space: pre-line; font-size: 14px; line-height: 1.8; }
.hr-letter-notice { margin: 0; padding-top: 10px; border-top: 1.5px dashed #17161b33; white-space: pre-line; font-size: 11.5px; line-height: 1.7; color: var(--muted); }
@keyframes letter-open { from { opacity: 0; transform: translateY(12px) rotate(-.6deg); } }

.bronze-result { max-width: 720px; margin: 20px auto 0; padding: 24px; text-align: center; border: var(--border); border-radius: 22px; background: linear-gradient(145deg, #2b251c, #121110); color: #f5e6c6; box-shadow: 6px 6px 0 var(--ink); }
.bronze-result > p:first-child { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: #d9c393; }
.bronze-result h2 { margin: 8px 0 14px; font-size: clamp(34px, 6vw, 60px); letter-spacing: .14em; color: #ffe59e; outline: none; }
.bronze-result[data-outcome="stop"] h2 { color: #ffc2b0; }
.bronze-result img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; border-radius: 12px; background: #000; }
.bronze-result .bronze-motion { animation: bronze-nod 1.5s ease-in-out 2; }
.bronze-result .bronze-still { display: none; }
.bronze-result > p { color: #d9c393; font-size: 12.5px; }
.bronze-result .bronze-action { display: block; min-height: 54px; margin: 20px auto 6px; padding: 0 44px; border: 2px solid var(--ink); border-radius: 14px; background: #f3d388; color: #221b0e; font-size: 19px; font-weight: 800; box-shadow: 4px 4px 0 #000; }
.bronze-result .bronze-action:hover { background: #ffe3a1; }
.bronze-result details { margin-top: 18px; padding: 12px 16px; text-align: left; border-radius: 14px; background: var(--card); color: var(--ink); }
.bronze-result details .ghost { margin: 8px 8px 0 0; }
.bronze-result details a { display: inline-block; margin-top: 10px; color: var(--muted); font-size: 12px; }
.bronze-result[data-phase="letter"] h2 { margin: 4px 0 10px; font-size: 30px; }
.bronze-result[data-phase="letter"] img { max-width: 300px; margin: 0 auto; animation: none; }
@keyframes bronze-nod { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-3px); } 65% { transform: translateX(3px); } }

@media (max-width: 600px) {
  .journey-card { padding: 20px 16px 16px; }
  .journey-actions > button { flex: 1 1 100%; }
  .hr-letter { padding: 22px 18px 16px; }
  .hr-letter-body p { font-size: 14px; }
  .bronze-result { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-letter { animation: none; }
  .bronze-result .bronze-motion { display: none; animation: none; }
  .bronze-result .bronze-still { display: block; }
}

/* Share card preview dialog. */
.share-button { min-height: 46px; padding: 0 22px; border-radius: 999px; }
.share-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px; border: var(--border); border-radius: 20px; background: var(--card); box-shadow: 6px 6px 0 var(--ink); overflow: auto; }
.share-dialog::backdrop { background: #17161b8c; }
.share-dialog img { display: block; width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--ink); }
.share-dialog p { margin: 10px 2px; font-size: 12.5px; line-height: 1.6; }
.share-actions { display: flex; gap: 10px; }
.share-actions > * { flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Growth archive ------------------------------------------------------------ */
.growth-sheet { border-top-color: var(--ink); }
.growth-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.growth-head h1 { margin: 0; font-size: clamp(32px, 4vw, 44px); }
.growth-lead { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.growth-status:empty { display: none; }
.growth-status { margin-top: 12px; }
#growth h2 { margin: 30px 0 12px; font-size: 20px; }
.growth-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
.growth-stat { margin: 0; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper-hi); }
.growth-stat dt { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.growth-stat dd { margin: 6px 0 0; font-size: 26px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.growth-stat .quiet { margin-top: 4px; }
.growth-empty { margin-top: 22px; padding: 22px 24px; border: 2px dashed #17161b55; border-radius: 16px; background: var(--paper-hi); }
.growth-empty h2 { margin: 0 0 6px !important; }
.growth-empty p { margin: 0 0 14px; color: var(--ink-2); }
.growth-empty .primary { margin-top: 4px; }
.growth-wait p { margin: 0; }
.growth-next { margin-top: 26px; padding: 20px 22px; border: var(--border); border-radius: 16px; background: var(--role-soft, #fff1c2); box-shadow: 5px 5px 0 var(--ink); }
.growth-next h2 { margin: 0 0 6px !important; }
.growth-next p { margin: 0 0 14px; }
.growth-pick { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.growth-select { appearance: none; min-height: 40px; padding: 0 36px 0 14px; border: 2px solid var(--ink); border-radius: 12px; font: inherit; font-weight: 700; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317161b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ink); }
#growth .chart { margin: 14px 0; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); }
#growth .chart h3 { margin: 0 0 8px; font-size: 16px; }
#growth .chart p { font-size: 13px; color: var(--ink-2); }
.growth-record { margin: 0 0 10px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); overflow: hidden; }
.growth-record > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; font-weight: 800; font-size: 15px; }
.growth-record > summary::-webkit-details-marker { display: none; }
.growth-record > summary::after { content: '展开'; flex: none; padding: 3px 10px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 700; }
.growth-record[open] > summary { border-bottom: 1.5px solid var(--hair); background: var(--paper-hi); }
.growth-record[open] > summary::after { content: '收起'; }
.growth-record > :not(summary) { margin-left: 18px; margin-right: 18px; }
.growth-record h4 { margin: 18px 18px 6px; font-size: 15px; line-height: 1.6; }
.growth-record h4 + p { margin-top: 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.growth-record > .danger-link { display: block; margin: 8px 18px 16px; }
.growth-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-top: 18px; border-top: 1.5px solid var(--hair); }
.growth-tools .danger-link { margin: 0 0 0 auto; }
.danger-link { color: #c22f22; }
.growth-privacy { margin-top: 10px; }
@media (max-width: 760px) {
  .growth-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-stat dd { font-size: 22px; }
  .growth-head .primary { width: 100%; }
  .growth-record > summary { font-size: 14px; padding: 12px 14px; }
  .growth-record > :not(summary), .growth-record h4 { margin-left: 14px; margin-right: 14px; }
}

/* In-page confirmation (replaces window.confirm). */
.consent-dialog { width: min(440px, calc(100vw - 32px)); padding: 24px 24px 20px; border: var(--border); border-top: 10px solid var(--role); border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.consent-dialog.is-danger { border-top-color: var(--live); }
.consent-dialog::backdrop { background: #17161b8c; }
.consent-dialog h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.4; }
.consent-dialog p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.consent-dialog ul { margin: 0 0 6px; padding-left: 20px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.consent-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 420px) { .consent-actions > * { flex: 1 1 0; } }
.growth-record-note { margin-top: 14px !important; }

/* 账号：进入方式、登录/注册/找回、找回码。 */
.account-dialog { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; }
.account-dialog :is(.ghost, .primary) { display: flex; width: 100%; justify-content: center; margin-top: 10px; }
.account-dialog .text-button { display: block; margin: 6px auto 0; }
.account-form :is(.ghost, .primary) { margin-top: 0; }
.account-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.account-options { display: grid; gap: 12px; margin-top: 14px; }
.account-option { display: grid; gap: 4px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.account-option strong { font-size: 17px; }
.account-option span { font-size: 13px; color: var(--ink-2); }
.account-option.is-primary { background: var(--role-hl); }
.account-tabs { display: flex; gap: 8px; margin: 0 40px 14px 0; }
.account-tab { flex: 1; min-height: 40px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 800; cursor: pointer; }
.account-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.account-reason { padding: 8px 12px; border-radius: 10px; background: var(--role-hl); color: var(--ink) !important; }
.account-form { display: grid; gap: 12px; }
.account-form .primary { width: 100%; justify-content: center; }
.account-field { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.account-field input { min-height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 16px; }
.account-hint { font-weight: 700; font-size: 12px; color: var(--ink-2); }
.account-hint[data-state="ok"] { color: #1f7a3a; }
.account-hint[data-state="bad"] { color: #c22f22; }
.account-id { font: 700 13px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.account-error { min-height: 0; margin: 0 !important; color: #c22f22 !important; font-weight: 700; }
.account-error:empty { display: none; }
.account-code { padding: 14px; border: 2px dashed var(--ink); border-radius: 12px; background: var(--paper); font: 800 22px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; text-align: center; color: var(--ink) !important; user-select: all; }
.account-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 700; }
.account-check input { width: 20px; height: 20px; }
#header-actions .header-link { white-space: nowrap; }
.account-chip span + span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .account-chip span + span { max-width: 4.5em; } }


/* One-screen desktop (≥1024px wide): the practice and rainbow pages fit the window without
   page scrolling. The mode switch joins the header row, the footer leaves app pages, and the
   badge size follows the window height. */
@media (min-width: 1024px) {
  body { position: relative; }
  body .mode-navigation { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 5; }
  body .mode-navigation .mode-tab { min-height: 40px; padding: 6px 22px; }
  .site-header { padding-top: 12px; padding-bottom: 12px; }
  body[data-page="setup"] .site-footer, body[data-page="journey-setup"] .site-footer { display: none; }
  body[data-page="setup"] main, body[data-page="journey-setup"] main { padding-top: 0; padding-bottom: 12px; }
  body[data-page="setup"] .setup-heading .eyebrow { display: none; }
  body[data-page="setup"] h1 { font-size: clamp(30px, calc(2vw + 2.2vh), 50px); }
  body[data-page="setup"] .intro { margin-top: 2px; }
  body[data-page="setup"] .carousel-shell { --card-w: clamp(120px, calc((100dvh - 420px) * 29 / 43), 300px); --track-top: 40px; }
  body[data-page="setup"] .role-track { padding-bottom: 14px; }
  body[data-page="setup"] .setup-deck { margin-top: 6px; }
  body[data-page="setup"] .deck-block { padding: 12px 18px 14px; }
  body[data-page="setup"] #role-promise { margin-top: 4px; font-size: 16px; }
  body[data-page="setup"] .start-button { min-height: 68px; }
  body[data-page="setup"] .deck-launch { gap: 6px; }
  body[data-page="setup"] .deck-launch .quiet { margin: 0; font-size: 12px; }
}
@media (min-width: 1024px) and (max-height: 720px) {
  body[data-page="setup"] .carousel-shell { --track-top: 34px; }
  body[data-page="setup"] .role-name { font-size: 24px; }
  body[data-page="setup"] .role-traits { margin-top: 4px; }
  body[data-page="setup"] .badge-foot { margin-top: 6px; }
  body[data-page="setup"] .start-button { min-height: 58px; }
}
@media (min-width: 1024px) {
  body[data-page="journey-setup"] .rainbow-setup { min-height: calc(100dvh - 92px); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr); grid-template-rows: auto auto auto; column-gap: 32px; align-content: center; align-items: center; padding: 22px 28px; }
  body[data-page="journey-setup"] .rainbow-map { grid-column: 1; grid-row: 1 / span 3; }
  body[data-page="journey-setup"] .rainbow-stage { max-width: min(100%, calc((100dvh - 150px) * 1000 / 560)); }
  body[data-page="journey-setup"] .rainbow-intro { grid-column: 2; margin: 0; text-align: left; font-size: 14px; line-height: 1.65; }
  body[data-page="journey-setup"] .rainbow-options { grid-column: 2; width: 100%; max-width: none; margin: 14px 0 0; padding: 14px 16px; gap: 10px; box-sizing: border-box; }
  body[data-page="journey-setup"] .primary.rainbow-launch { grid-column: 2; width: 100%; margin: 16px 0 0; justify-content: center; }
}
@media (min-width: 1024px) and (max-height: 720px) {
  body[data-page="journey-setup"] .rainbow-seg button { min-height: 0; padding: 6px 10px; }
  body[data-page="journey-setup"] .rainbow-seg button small { display: none; }
  body[data-page="journey-setup"] .rainbow-toggle small { display: none; }
}
/* Room on desktop: the whole meeting fits the window. Voice mode = two video tiles over the dock;
   text mode = interviewer (with your tile picture-in-picture) left, question and answer right. */
@media (min-width: 1024px) {
  body[data-page="room"] main { padding-top: 0; padding-bottom: 0; }
  body[data-page="room"] #room:not([hidden]) { height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; padding: 14px 0 12px; }
  #room .meeting-bar { flex: none; margin-bottom: 14px; }
  #room .room-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 14px 20px; }
  #room .self-camera, #room .stage-column { min-height: 0; }
  #room .stage-column { height: 100%; }
  #room .self-camera, #room .stage { aspect-ratio: auto; height: 100%; }
  #room.is-typing .stage { height: 100%; }
  #room .meeting-caption { margin-bottom: 8px; max-height: 64px; }
  #room .connection-actions, #room .meeting-toolbar { margin-bottom: 6px; }
  #room .work-column:has(> #meeting-text[hidden]) { display: none; }
  #room:has(#meeting-text:not([hidden])) .room-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "stage work" "dock work"; }
  #room:has(#meeting-text:not([hidden])) .stage-column { grid-area: stage; }
  #room:has(#meeting-text:not([hidden])) .self-camera { grid-area: stage; z-index: 2; justify-self: end; align-self: end; width: 28%; height: auto; aspect-ratio: 4 / 3; margin: 0 12px 12px 0; border: 2px solid #ffffff40; border-radius: 12px; }
  #room:has(#meeting-text:not([hidden])) .self-avatar { width: 56px; height: 56px; }
  #room:has(#meeting-text:not([hidden])) .participant-name { left: 8px; bottom: 8px; padding: 3px 8px; font-size: 12px; }
  #room:has(#meeting-text:not([hidden])) .meeting-dock { grid-area: dock; }
  #room:has(#meeting-text:not([hidden])) .work-column { grid-area: work; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  #room #meeting-text { max-width: none; }
  #room #meeting-text > summary { padding: 0 0 6px; }
  #room #meeting-text .question-sheet { margin-top: 0; padding: 16px 18px; }
  #room #meeting-text .answer-form { padding: 16px 18px; }
}
.deck-launch .quiet:empty { display: none; }
@media (min-width: 1024px) and (max-height: 720px) {
  body[data-page="setup"] .badge-head { display: none; }
  body[data-page="setup"] .badge-slot { margin-bottom: 6px; }
  body[data-page="setup"] .badge-photo { margin: 2px 0 8px; }
  body[data-page="setup"] .role-traits { flex-wrap: nowrap; overflow: hidden; }
  body[data-page="setup"] .role-traits span { flex: none; white-space: nowrap; font-size: 11px; padding: 3px 6px; }
  body[data-page="setup"] .role-title { font-size: 12px; }
}

/* Home deck: the promise and the start button share one fixed-height row, so neither moves between roles. */
.start-button { align-items: center; justify-content: center; }
.start-main { font-size: 24px; letter-spacing: .04em; }
/* One status line under the button: a returning-practice prompt wins over the generic status. */
#data-status:has(~ .quiet:not(:empty)) { display: none; }
@media (min-width: 681px) {
  .setup-deck { grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); align-items: stretch; }
  .deck-launch, body[data-page="setup"] .deck-launch { grid-column: auto; position: relative; justify-content: stretch; padding: 0; }
  .deck-promise { box-sizing: border-box; height: 100px; }
  #role-promise { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .start-button, body[data-page="setup"] .start-button { height: 100%; min-height: 0; }
  .deck-launch .quiet { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; font-size: 12px; }
}
@media (min-width: 1024px) and (max-height: 720px) {
  .deck-promise { height: 90px; }
  body[data-page="setup"] #role-promise { font-size: 15px; }
}

/* Start settings dialog ------------------------------------------------------ */
.start-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--ink); background: var(--card); border: var(--border); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.start-dialog[open] { display: flex; animation: sd-in .24s var(--ease-spring); }
@keyframes sd-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.start-dialog::backdrop { background: #17161b8c; backdrop-filter: blur(2px); }
.start-dialog form { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.sd-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 12px; }
.sd-badge { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--role); color: var(--role-on); font-size: 22px; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-4deg); }
.sd-titles { flex: 1; min-width: 0; }
.sd-role { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.start-dialog h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; }
.sd-close { flex: none; align-self: flex-start; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--muted); font-size: 24px; line-height: 1; justify-content: center; }
.sd-close:hover { background: var(--paper); color: var(--ink); }
.sd-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 22px 6px; }
.sd-row { padding: 14px 0 12px; border-top: 1.5px dashed #17161b26; }
.sd-row:first-child { border-top: 0; padding-top: 4px; }
.sd-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 800; }
.sd-row-head output { padding: 3px 12px; border-radius: 999px; background: var(--role-hl); font-size: 13px; font-weight: 800; white-space: nowrap; }
.sd-row.is-off .sd-row-head output { background: var(--paper); color: var(--muted); }
.sd-range { --fill: 50%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sd-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--ink) var(--fill), #17161b1f var(--fill)); }
.sd-range::-moz-range-track { height: 8px; border-radius: 999px; background: #17161b1f; }
.sd-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--ink); }
.sd-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border: 3px solid var(--ink); border-radius: 50%; background: var(--card); box-shadow: 0 0 0 4px var(--role-hl); transition: transform .12s; }
.sd-range::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--ink); border-radius: 50%; background: var(--card); box-shadow: 0 0 0 4px var(--role-hl); }
.sd-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.sd-range:focus-visible { outline: none; }
.sd-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--role-hl), 0 0 0 7px var(--ink); }
.sd-range:disabled { cursor: not-allowed; }
.sd-range:disabled::-webkit-slider-runnable-track { background: #17161b14; }
.sd-range:disabled::-webkit-slider-thumb { border-color: #17161b40; box-shadow: none; }
.sd-ticks { display: flex; justify-content: space-between; margin: 2px -8px 0; }
.sd-ticks button { min-width: 0; min-height: 0; padding: 4px 8px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.2; }
.sd-ticks button:hover { color: var(--ink); background: var(--paper); transform: none; box-shadow: none; }
.sd-ticks button[aria-pressed="true"] { color: var(--ink); font-weight: 800; }
.sd-row.is-off .sd-ticks button { color: #17161b40; pointer-events: none; }
.sd-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); cursor: pointer; }
.sd-switch[hidden] { display: none; }
.sd-switch > span { display: grid; gap: 2px; }
.sd-switch strong { font-size: 14px; }
.sd-switch small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sd-switch input { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); cursor: pointer; transition: background .15s; }
.sd-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .18s var(--ease-spring); }
.sd-switch input:checked { background: var(--ink); }
.sd-switch input:checked::after { transform: translateX(18px); background: var(--role-hl); }
.sd-switch input:focus-visible { outline: 3px solid var(--role); outline-offset: 2px; }
.sd-switch input:disabled { opacity: .4; cursor: not-allowed; }
.sd-extra { margin: 4px 0 10px; }
.sd-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: var(--paper); }
.sd-seg label { position: relative; cursor: pointer; }
.sd-seg input { position: absolute; opacity: 0; pointer-events: none; }
.sd-seg span { display: grid; gap: 1px; padding: 8px 12px; border: 2px solid transparent; border-radius: 10px; transition: background .15s; }
.sd-seg strong { font-size: 15px; }
.sd-seg small { font-size: 12px; color: var(--muted); }
.sd-seg label:hover span { background: #ffffff99; }
.sd-seg input:checked + span { border-color: var(--ink); background: var(--card); box-shadow: 2px 2px 0 var(--ink); }
.sd-seg input:focus-visible + span { outline: 3px solid var(--role); outline-offset: 2px; }
.sd-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 22px 16px; border-top: 2px solid var(--ink); background: var(--paper); }
.sd-summary { display: grid; gap: 2px; margin: 0; min-width: 0; }
.sd-summary strong { font-size: 20px; font-weight: 800; }
.sd-summary span { font-size: 12.5px; color: var(--ink-2); }
.sd-actions { display: flex; align-items: center; gap: 14px; }
.sd-save { min-height: 0; padding: 6px 2px; border: 0; background: none; box-shadow: none; color: var(--ink-2); font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-color: #17161b40; text-underline-offset: 4px; }
.sd-save:hover { color: var(--ink); text-decoration-color: currentColor; transform: none; box-shadow: none; }
.primary.sd-go { min-height: 50px; padding: 0 22px; font-size: 16px; white-space: nowrap; }
.sd-status { grid-column: 1 / -1; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-align: right; }
.sd-status:empty { display: none; }
@media (max-height: 860px) and (min-width: 681px) {
  .sd-head { padding: 14px 20px 8px; }
  .sd-badge { width: 40px; height: 40px; font-size: 19px; }
  .start-dialog h2 { font-size: 21px; }
  .sd-row { padding: 8px 0 6px; }
  .sd-row-head { margin-bottom: 2px; }
  .sd-ticks { margin-top: 0; }
  .sd-switch { margin-top: 6px; padding: 7px 10px; }
  .sd-switch small, .sd-seg small { display: none; }
  .sd-seg span { padding: 6px 12px; }
  .sd-foot { padding: 10px 20px 12px; }
}
@media (max-width: 680px) {
  .start-dialog { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-width: 2.5px 0 0; border-radius: 22px 22px 0 0; box-shadow: none; }
  .sd-head { padding: 18px 16px 10px; }
  .sd-body { padding: 0 16px 6px; }
  .sd-foot { grid-template-columns: 1fr; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .sd-actions { flex-direction: row-reverse; justify-content: space-between; }
  .primary.sd-go { flex: 1; justify-content: center; }
  .sd-status { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .start-dialog[open] { animation: none; } }

/* 面试官体系2.0 mascots: 神烦狗 / 玉帝(天庭) / 自定义. SVG fills the portrait window; motion is CSS only. */
.mascot-art { padding: 0 !important; background: none; }
.mascot-art .mascot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mascot :is(.mascot-bob, .mascot-blink, .mascot-mouth-talk, .doge-head, .doge-brows, .doge-lids, .doge-marks text, .doge-rings, .emp-halo, .emp-bead, .emp-head, .emp-beard) { transform-box: fill-box; }
.mascot .mascot-bob { transform-origin: 50% 100%; animation: mascot-bob 3.2s ease-in-out infinite; }
.mascot .mascot-blink { transform-origin: 50% 50%; animation: mascot-blink 4.6s infinite; }
.mascot .mascot-mouth-talk { opacity: 0; transform-origin: 50% 0; }
#stage[data-speaking="true"] .mascot .mascot-mouth-rest { opacity: 0; }
#stage[data-speaking="true"] .mascot .mascot-mouth-talk { opacity: 1; animation: mascot-talk .22s ease-in-out infinite alternate; }
#stage[data-speaking="true"] .mascot .mascot-bob { animation-duration: 1.1s; }
@keyframes mascot-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mascot-blink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes mascot-talk { from { transform: scaleY(.35); } to { transform: scaleY(1.05); } }
/* 神烦狗: side-eye, head tilt, brow lift (also on demand via .brow-lift) and floating question marks. */
.mascot-doge .doge-head { transform-origin: 50% 85%; animation: doge-tilt 7s ease-in-out infinite; }
.mascot-doge .doge-pupils { animation: doge-side-eye 6s ease-in-out infinite; }
.mascot-doge .doge-brows { animation: doge-brow 6s ease-in-out infinite; }
.mascot-doge .doge-lids { transform-origin: 50% 0; animation: doge-lid 6s ease-in-out infinite; }
.mascot-doge.brow-lift .doge-brows { animation: doge-brow-once .9s ease-out 1; }
.mascot-doge.brow-lift .doge-lids { animation: doge-lid-once .9s ease-out 1; }
.mascot-doge.brow-lift .doge-hm { animation: doge-hm-once .9s ease-out 1; }
.mascot-doge .doge-q1 { animation: doge-float 3.6s ease-in-out infinite; }
.mascot-doge .doge-q2 { animation: doge-float 4.2s ease-in-out .8s infinite; }
.mascot-doge .doge-hm { opacity: .0; animation: doge-hm 6s ease-in-out infinite; }
.mascot-doge .doge-rings { transform-origin: 50% 50%; animation: doge-rings 5s ease-in-out infinite; }
@keyframes doge-tilt { 0%,40%,100% { transform: rotate(0); } 50%,70% { transform: rotate(-5deg); } }
@keyframes doge-side-eye { 0%,30% { transform: translateX(-4px); } 40%,75% { transform: translateX(2px); } 85%,100% { transform: translateX(-4px); } }
@keyframes doge-brow { 0%,44%,76%,100% { transform: translateY(0); } 50%,70% { transform: translateY(-5px); } }
@keyframes doge-lid { 0%,44%,76%,100% { transform: scaleY(1); } 50%,70% { transform: scaleY(.55); } }
@keyframes doge-brow-once { 0% { transform: translateY(0); } 30%,70% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes doge-lid-once { 0% { transform: scaleY(1); } 30%,70% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }
@keyframes doge-hm { 0%,46%,80%,100% { opacity: 0; transform: translateY(4px); } 52%,72% { opacity: 1; transform: translateY(0); } }
@keyframes doge-hm-once { 0% { opacity: 0; transform: scale(.6); } 30%,70% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; } }
@keyframes doge-float { 0%,100% { transform: translateY(0) rotate(-6deg); opacity: .55; } 50% { transform: translateY(-6px) rotate(8deg); opacity: 1; } }
@keyframes doge-rings { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
/* 玉帝: rotating golden rays, pulsing halo, drifting clouds, swaying 冕旒 beads, twinkling stars. */
.mascot-emperor .emp-rays { transform-box: view-box; transform-origin: 120px 84px; animation: emp-rays 40s linear infinite; }
.mascot-emperor .emp-halo { transform-origin: 50% 50%; animation: emp-halo 4s ease-in-out infinite; }
.mascot-emperor .emp-cloud.c1 { animation: emp-drift 9s ease-in-out infinite; }
.mascot-emperor .emp-cloud.c2 { animation: emp-drift 11s ease-in-out -3s infinite reverse; }
.mascot-emperor .emp-cloud.c3 { animation: emp-drift 13s ease-in-out -5s infinite; }
.mascot-emperor .emp-cloud.c4 { animation: emp-drift 10s ease-in-out -2s infinite reverse; }
.mascot-emperor .emp-cloud { transform-box: view-box; }
.mascot-emperor .emp-bead { transform-origin: 50% 0; animation: emp-sway 2.6s ease-in-out infinite alternate; }
.mascot-emperor .emp-bead.b1 { animation-delay: -.4s; } .mascot-emperor .emp-bead.b2 { animation-delay: -.9s; }
.mascot-emperor .emp-head { transform-origin: 50% 90%; animation: emp-nod 6s ease-in-out infinite; }
.mascot-emperor .emp-beard { transform-origin: 50% 0; animation: emp-sway 3.4s ease-in-out infinite alternate; }
.mascot-emperor .emp-stars circle { animation: emp-twinkle 2.4s ease-in-out infinite; }
.mascot-emperor .emp-stars circle:nth-child(2n) { animation-delay: -1.2s; }
#stage[data-speaking="true"] .mascot-emperor .emp-bead { animation-duration: .7s; }
@keyframes emp-rays { to { transform: rotate(360deg); } }
@keyframes emp-halo { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes emp-drift { 0%,100% { translate: 0 0; } 50% { translate: 10px -2px; } }
@keyframes emp-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes emp-nod { 0%,70%,100% { transform: rotate(0); } 78% { transform: rotate(2deg) translateY(1px); } 86% { transform: rotate(-1deg); } }
@keyframes emp-twinkle { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
/* 自定义: knobs slide like settings being tuned. */
.mascot-custom .custom-sliders circle { animation: custom-knob 5s ease-in-out infinite alternate; }
.mascot-custom .custom-sliders .k2 { animation-delay: -1.6s; } .mascot-custom .custom-sliders .k3 { animation-delay: -3.1s; }
@keyframes custom-knob { from { translate: 0 0; } to { translate: 18px 0; } }
.stage[data-role="probe"] .mascot-art, .stage[data-role="exec"] .mascot-art { padding-bottom: 0; }
#room:not([data-meeting="live"]) .avatar .mascot-art .mascot { inset: 0; }
@media (prefers-reduced-motion: reduce) { .mascot *, .mascot { animation: none !important; } }
/* 面试官体系2.0 start dialog: built-in level card for preset roles; type chips and level ticks for 自定义. */
.sd-row[hidden] { display: none; }
#sd-realtime-row { padding-top: 6px; }
#sd-realtime-row .sd-switch { margin-top: 0; }
.sd-preset-desc { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.sd-preset-note { margin: 0; color: var(--muted); font-size: 13px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-chips button { min-height: 36px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); box-shadow: none; font-size: 14px; font-weight: 700; color: var(--ink); }
.sd-chips button[aria-pressed="true"] { background: var(--ink); color: var(--role-hl); }
.sd-chips button:hover { transform: none; box-shadow: none; }
.sd-level-ticks { margin: 0; gap: 6px; }
.sd-level-ticks button { flex: 1; padding: 8px 4px; border: 2px solid #17161b26; }
.sd-level-ticks button[aria-pressed="true"] { border-color: var(--ink); background: var(--role-hl); }
/* 神秘人 voice picker: chips plus a sample button. */
.sd-voice-sample { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sd-voice-sample button { min-height: 32px; padding: 4px 14px; border: 2px solid #17161b26; border-radius: 999px; background: none; box-shadow: none; font-size: 13px; font-weight: 700; color: var(--ink); }
.sd-voice-sample button:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.sd-voice-sample span { color: var(--muted); font-size: 13px; }
/* 彩虹七面 2.0: each gate names the badge title, then 花名 · 难度. */
.rainbow-node small i { display: block; font-style: normal; font-size: 11px; font-weight: 600; opacity: .75; text-align: center; }
.rainbow-node small:has(i) { border-radius: 12px; text-align: center; }
.rainbow-step .step-who { grid-column: 2; color: var(--muted); font-size: 12px; }
/* 彩虹七面 heading mirrors the practice title (PRD 面试官体系2.0 界面文案). */
.rainbow-heading { grid-column: 1 / -1; margin: 0 0 6px; }
.rainbow-heading h1 { font-size: clamp(30px, calc(2vw + 2.2vh), 50px); }
.rainbow-node small i { display: none; }
.rainbow-node[data-state="current"] small i, .rainbow-node:hover small i { display: block; }
@media (min-width: 1024px) {
  body[data-page="journey-setup"] .rainbow-setup:has(.rainbow-heading) { grid-template-rows: auto auto auto auto; }
  body[data-page="journey-setup"] .rainbow-setup:has(.rainbow-heading) .rainbow-map { grid-row: 2 / span 3; }
  body[data-page="journey-setup"] .rainbow-setup:has(.rainbow-heading) .rainbow-stage { max-width: min(100%, calc((100dvh - 230px) * 1000 / 560)); }
}

/* Living portraits (web/modules/living-portrait.js): a still picture + CSS overlays placed in % of a
   frame that keeps the artwork's aspect ratio. 玉帝 keeps the 天庭 painting as his own background. */
.role-art.living-art { overflow: hidden; display: block; padding: 0; }
.living-frame { position: absolute; left: 50%; top: 0; width: 100%; aspect-ratio: var(--living-ratio); translate: -50% 0; transform-origin: 50% 60%; }
.role-art.living-art .living-frame > img { position: absolute; inset: 0; top: 0; width: 100%; height: 100%; object-fit: fill; animation: none; transform: none; }
.living-part { position: absolute; inset: 0; pointer-events: none; }
.living-copy { background: var(--living-src) 0 0 / 100% 100% no-repeat; }
/* Card window: show crown to hands. */
.heaven-art .living-frame { width: 130%; top: -52%; }
/* Rotating light from the sun disc behind the head, and a breathing halo. */
.heaven-art .lv-rays { overflow: hidden; mix-blend-mode: screen;
  -webkit-mask: radial-gradient(circle at 51% 26%, #0000 0 8%, #000 13%), linear-gradient(#000 0 24%, #0000 40%); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 51% 26%, #0000 0 8%, #000 13%) intersect, linear-gradient(#000 0 24%, #0000 40%); }
.heaven-art .lv-rays::before { content: ""; position: absolute; left: 51%; top: 26%; width: 190%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #fff6d000 0deg 9deg, #fff3c266 12deg, #fff6d000 15deg 24deg); animation: lv-spin 70s linear infinite; }
.heaven-art .lv-halo { background: radial-gradient(circle at 51% 26%, #0000 0 10.5%, #fff1b866 12%, #ffd56a26 17%, #0000 24%); mix-blend-mode: screen; animation: lv-halo 4.8s ease-in-out infinite; }
.heaven-art .lv-beads-l { transform-origin: 41% 24.8%; animation: lv-sway 3.6s ease-in-out infinite; }
.heaven-art .lv-beads-r { transform-origin: 60% 24.8%; animation: lv-sway 3.6s ease-in-out -1.8s infinite; }
.heaven-art .lv-jaw { transform-origin: 50% 38%; }
.heaven-art .lv-lid { inset: auto; height: 1.15%; border-radius: 50%; background: rgb(233 201 176); border-bottom: 1px solid #3a2418; transform-origin: 50% 0; transform: scaleY(0); animation: lv-blink 5.2s ease-in-out infinite; }
.heaven-art .lv-lid-l { left: 46.5%; top: 34.35%; width: 2.8%; }
.heaven-art .lv-lid-r { left: 51.7%; top: 34.3%; width: 2.9%; }
.heaven-art .lv-cloud { inset: auto; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, #fffdf6 0, #fffaf0cc 38%, #fff8ec00 70%); filter: blur(2px); opacity: .85; }
.heaven-art .lv-cloud-1 { left: -30%; top: 76%; width: 46%; height: 7%; animation: lv-drift 26s linear infinite; }
.heaven-art .lv-cloud-2 { left: -30%; top: 15%; width: 38%; height: 5%; animation: lv-drift 34s linear -12s infinite; opacity: .6; }
.heaven-art .lv-cloud-3 { left: -30%; top: 56%; width: 30%; height: 4.5%; animation: lv-drift 22s linear -7s infinite; opacity: .55; }
.heaven-art .lv-spark { inset: auto; width: 1.2%; aspect-ratio: 1; border-radius: 50%; background: #fff3b8; box-shadow: 0 0 6px 2px #ffd85a; opacity: 0; animation: lv-rise 6s ease-in infinite; }
.heaven-art .lv-spark-1 { left: 30%; top: 40%; }
.heaven-art .lv-spark-2 { left: 70%; top: 34%; animation-delay: -1.2s; }
.heaven-art .lv-spark-3 { left: 22%; top: 58%; animation-delay: -2.6s; }
.heaven-art .lv-spark-4 { left: 78%; top: 52%; animation-delay: -3.7s; }
.heaven-art .lv-spark-5 { left: 62%; top: 22%; animation-delay: -4.8s; }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@keyframes lv-halo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes lv-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes lv-blink { 0%, 92%, 100% { transform: scaleY(0); } 94.5%, 96% { transform: scaleY(1); } }
@keyframes lv-drift { from { translate: 0 0; } to { translate: 290% 0; } }
@keyframes lv-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-900%) scale(1); } }
@keyframes lv-jaw { from { transform: translateY(0); } to { transform: translateY(.32%); } }
@keyframes lv-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.5%) scale(1.012); } }
@keyframes lv-speak { from { transform: translateY(0) rotate(-.4deg); } to { transform: translateY(-.8%) rotate(.4deg); } }
.heaven-art .living-frame { animation: lv-breathe 5s ease-in-out infinite; }
/* Interview room: whole painting in the 4:3 window, blurred heaven fills the sides. */
/* Video-call crop: crown to hands, sized from the window width so any window shape works. */
#room .avatar .role-art.living-art { display: block; container-type: size; }
#room .avatar .living-frame { width: 150cqw; height: auto; top: -43cqw; }
#room .avatar .living-frame > img { animation: none !important; transform: none !important; object-fit: fill; }
#room:not([data-meeting="live"]) .avatar .living-frame { width: 190cqw; top: -56cqw; }
#stage[data-speaking="true"] .heaven-art .lv-jaw { animation: lv-jaw .17s ease-in-out infinite alternate; }
#stage[data-speaking="true"] .heaven-art .lv-beads-l, #stage[data-speaking="true"] .heaven-art .lv-beads-r { animation-duration: 1.1s; }
#stage[data-speaking="true"] .heaven-art .living-frame { animation: lv-speak .9s ease-in-out infinite alternate; }
.stage[data-state="ended"] .avatar .living-frame { filter: grayscale(.7); }
@media (prefers-reduced-motion: reduce) { .living-art .living-frame, .living-art .living-part, .living-art .living-part::before { animation: none !important; } .heaven-art .lv-spark, .heaven-art .lv-cloud { display: none; } }
/* 神烦狗 (web/assets/probe.png = left panel of the user's shiba illustration with its captions painted out,
   713×1117): sways and breathes, blinks; speaking moves the jaw. Each follow-up (.brow-lift) cuts to the right
   panel (probe-react.png, smug side-eye on a cushion) punched in on his face, then back. No text overlays.
   The frame is placed by its face (44% down), so any window shows ears to chin. */
.doge-art { container-type: inline-size; background: rgb(232 222 200); }
.doge-art .living-frame { top: 50%; translate: -50% -44%; transform-origin: 50% 90%; animation: doge-sway 6s ease-in-out infinite; }
#stage[data-speaking="true"] .doge-art .living-frame { animation: lv-speak .9s ease-in-out infinite alternate; }
#stage[data-speaking="true"] .doge-art .lv-jaw { animation: doge-jaw .17s ease-in-out infinite alternate; }
.doge-art .lv-jaw { transform-origin: 50% 62%; }
.doge-art .lv-lid { inset: auto; border-radius: 50%; background: radial-gradient(120% 90% at 50% 20%, rgb(238 196 128), rgb(220 166 96) 78%); box-shadow: 0 0 .25cqw .2cqw rgb(228 182 112 / .85); border-bottom: .45cqw solid rgb(70 42 22);
  transform-origin: 50% 0; transform: scaleY(0); animation: lv-blink 5s ease-in-out infinite; }
.doge-art .lv-lid-l { left: 31.4%; top: 42.4%; width: 10%; height: 5.2%; rotate: -4deg; }
.doge-art .lv-lid-r { left: 55.2%; top: 47%; width: 13.5%; height: 5.4%; rotate: 8deg; }
.doge-art .lv-react { overflow: hidden; container-type: size; opacity: 0; visibility: hidden; background: rgb(214 205 186); }
.doge-art .lv-react::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(112cqw, 82cqh); aspect-ratio: 713 / 1117; translate: -52.3% -44.4%;
  background: url("/assets/probe-react.png") 0 0 / 100% 100% no-repeat; }
.doge-art.brow-lift .lv-react { visibility: visible; animation: doge-react 1.8s ease-out 1 both; }
.doge-art.brow-lift .lv-react::before { animation: doge-punch 1.8s ease-out 1 both; }
#room .avatar .doge-art .living-frame, #room:not([data-meeting="live"]) .avatar .doge-art .living-frame { width: max(100cqw, 76cqh); top: 50cqh; }
@keyframes doge-sway { 0%, 100% { transform: rotate(-1deg) scale(1); } 50% { transform: rotate(1deg) scale(1.012); } }
@keyframes doge-jaw { from { transform: translateY(0); } to { transform: translateY(.5%); } }
@keyframes doge-react { 0% { opacity: 0; } 5%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes doge-punch { 0% { scale: 1.3; } 10% { scale: 1; } 100% { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .doge-art .lv-react { display: none; } }

/* Scene portraits (奶龙, 戴夫, 红太狼; web/modules/portrait-scenes.js): the untouched cut-out stands in a
   drawn backdrop. On cards the figure breathes, sways and blinks; in the live room the canvas animator
   (wolf-avatar.js) takes over the figure and leaves its canvas transparent over the scene. */
.role-art.scene-art { overflow: hidden; display: block; padding: 0; }
.role-scene { position: absolute; inset: 0; pointer-events: none; }
.role-scene svg { display: block; width: 100%; height: 100%; }
.scene-figure { position: absolute; left: 50%; top: 7%; height: 132%; aspect-ratio: 1024 / 1536; translate: -50% 0; transform-origin: 50% 62%; pointer-events: none; }
.scene-art .scene-figure > img { position: absolute; inset: 0; top: 0; bottom: auto; width: 100%; height: 100%; object-fit: fill; animation: none; transform: none; }
.scene-lid { position: absolute; border-radius: 50%; transform-origin: 50% 0; transform: scaleY(0); animation: lv-blink 5.4s ease-in-out infinite; }
.nailong-scene .scene-lid { background: radial-gradient(120% 90% at 50% 15%, rgb(255 224 96), rgb(246 196 46) 80%); border-bottom: 2px solid rgb(150 84 12); }
.dave-scene .scene-lid { background: radial-gradient(120% 90% at 50% 15%, rgb(240 206 172), rgb(222 182 146) 80%); border-bottom: 2px solid #1a0f08; animation-duration: 4.4s; }
.wolf-scene .scene-lid { background: linear-gradient(rgb(106 84 110), rgb(98 92 104) 70%); border-bottom: 3px solid #0c0a0c; animation-duration: 6.2s; }
.nailong-scene .scene-figure { animation: sc-nailong 4.8s ease-in-out infinite; }
.dave-scene .scene-figure { transform-origin: 50% 90%; animation: sc-dave 4.2s ease-in-out infinite; }
.wolf-scene .scene-figure { transform-origin: 50% 90%; animation: sc-wolf 7s ease-in-out infinite; }
#stage[data-speaking="true"] .scene-figure { animation: lv-speak .9s ease-in-out infinite alternate; }
/* Moving props. CSS lengths inside the SVG are viewBox units. */
.role-scene .sc-cloud { animation: sc-drift 44s linear infinite; }
.role-scene .sc-cloud-2 { animation-duration: 60s; animation-delay: -26s; }
.role-scene .sc-cloud-3 { animation-duration: 52s; animation-delay: -38s; }
.role-scene .sc-cloud-pane { animation: sc-drift-pane 26s linear infinite; }
.role-scene .sc-flower, .role-scene .sc-leaves { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-nod 3.8s ease-in-out infinite alternate; }
.role-scene .sc-leaves { animation-duration: 4.6s; }
.role-scene .sc-sun { animation: sc-sunfall 12s ease-in infinite; }
.role-scene .sc-sun-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: lv-spin 7s linear infinite; }
.role-scene .sc-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-flame .7s ease-in-out infinite alternate; }
.role-scene .sc-warm { animation: sc-warm 1.4s ease-in-out infinite alternate; }
.role-scene .sc-pan { transform-box: fill-box; transform-origin: 50% 0; animation: sc-swing 3.4s ease-in-out infinite alternate; }
.role-scene .sc-drape-l, .role-scene .sc-drape-r { transform-box: fill-box; transform-origin: 50% 0; animation: sc-drape 7s ease-in-out infinite alternate; }
.role-scene .sc-drape-r { animation-delay: -3.5s; }
.role-scene .sc-notes { transform-box: fill-box; transform-origin: 50% 0; animation: sc-flutter 5s ease-in-out infinite alternate; }
.role-scene .sc-ink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sc-ink-1 9s ease-out infinite; }
.role-scene .sc-ink-2 { animation-name: sc-ink-2; }
.role-scene .sc-ink-3 { animation-name: sc-ink-3; }
@keyframes sc-drift { from { transform: translateX(-90px); } to { transform: translateX(490px); } }
@keyframes sc-drift-pane { from { transform: translateX(10px); } to { transform: translateX(150px); } }
@keyframes sc-nod { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes sc-sunfall { 0% { transform: translateY(-40px); opacity: 0; } 6% { opacity: 1; } 60%, 84% { transform: translateY(212px); opacity: 1; } 72% { transform: translateY(212px) scale(1.15); } 94%, 100% { transform: translateY(212px); opacity: 0; } }
@keyframes sc-flame { 0% { transform: scale(1, 1) skewX(0deg); } 40% { transform: scale(.9, 1.12) skewX(-4deg); } 100% { transform: scale(1.06, .94) skewX(3deg); } }
@keyframes sc-warm { from { opacity: .7; } to { opacity: 1; } }
@keyframes sc-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes sc-drape { from { transform: skewX(-1deg); } to { transform: skewX(1deg); } }
@keyframes sc-flutter { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes sc-ink-1 { 0% { stroke-dashoffset: 1; opacity: 1; } 12%, 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sc-ink-2 { 0%, 26% { stroke-dashoffset: 1; opacity: 1; } 34%, 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sc-ink-3 { 0%, 44% { stroke-dashoffset: 1; opacity: 1; } 50%, 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sc-nailong { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-.8%) scale(1.012, .995); }
  76% { transform: translateY(0) rotate(0); } 79% { transform: translateY(-.6%) rotate(-1.2deg); } 82% { transform: translateY(0) rotate(1.2deg); } 85% { transform: translateY(-.6%) rotate(-1deg); } 88% { transform: translateY(0) rotate(0); } }
@keyframes sc-dave { 0%, 100% { transform: rotate(-1.4deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(-.6%); } }
@keyframes sc-wolf { 0%, 62%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(0) scale(1.008); } 68%, 80% { transform: rotate(-1.6deg) scale(1.004); } }
/* Interview room: a softly focused scene like a video-call background; the figure matches the canvas crop
   (head to belt) so nothing jumps when the canvas takes over. */
#room .avatar .role-art.scene-art { display: block; }
#room .avatar .role-scene { filter: blur(1.4px); }
#room .avatar .scene-figure { top: 2%; height: 150%; }
#room .avatar .scene-art .scene-figure > img { inset: 0; top: 0; width: 100%; height: 100%; object-fit: fill; object-position: 50% 0; }
#room .avatar .role-art[data-wolf-animated="true"] > .scene-figure { visibility: hidden; animation: none; }
.stage[data-state="ended"] .avatar .role-scene { filter: grayscale(.7) blur(1.4px); }
@media (prefers-reduced-motion: reduce) {
  .scene-figure, .scene-lid, .role-scene * { animation: none !important; }
  .role-scene .sc-sun { display: none; }
  .role-scene .sc-ink { stroke-dashoffset: 0; }
}

/* 神秘人 (custom; living-portrait.js rig 'hood'): the hooded figure at the desk. Square photo covers the
   window; monitors flicker, a pale sweep runs down the code wall, a cursor blinks. Speaking = busier screens. */
.hood-art .living-frame { top: 50%; width: 100%; translate: -50% -50%; animation: lv-breathe 6s ease-in-out infinite; }
#room .avatar .role-art.hood-art .living-frame { top: 50%; width: max(100cqw, 100cqh); translate: -50% -50%; }
.hood-art .lv-sweep { inset: 0 0 52% 0; overflow: hidden; mix-blend-mode: screen; }
.hood-art .lv-sweep::before { content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 16%; background: linear-gradient(#0000, rgb(120 200 150 / .16), #0000); animation: hood-sweep 7s linear infinite; }
.hood-art .lv-glow { inset: auto; mix-blend-mode: screen; border-radius: 8%; animation: hood-flicker 3.4s steps(1, end) infinite; }
.hood-art .lv-glow-l { left: 3%; top: 50%; width: 25%; height: 27%; background: radial-gradient(closest-side, rgb(150 190 210 / .22), #0000); }
.hood-art .lv-glow-r { left: 72%; top: 55%; width: 24%; height: 22%; background: radial-gradient(closest-side, rgb(150 200 180 / .2), #0000); animation-delay: -1.3s; animation-duration: 4.1s; }
.hood-art .lv-cursor { inset: auto; left: 22.5%; top: 52.6%; width: .9%; height: 1.4%; background: rgb(170 235 190 / .85); box-shadow: 0 0 4px rgb(120 230 160 / .8); animation: hood-cursor 1.1s steps(1, end) infinite; }
#stage[data-speaking="true"] .hood-art .lv-glow { animation-duration: .9s; }
#stage[data-speaking="true"] .hood-art .living-frame { animation: lv-speak 1.2s ease-in-out infinite alternate; }
.stage[data-state="ended"] .avatar .hood-art .living-part { animation: none; opacity: 0; }
@keyframes hood-sweep { to { transform: translateY(760%); } }
@keyframes hood-flicker { 0%, 100% { opacity: .7; } 18% { opacity: 1; } 21% { opacity: .45; } 24% { opacity: .95; } 60% { opacity: .8; } 63% { opacity: 1; } }
@keyframes hood-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hood-art .lv-sweep, .hood-art .lv-cursor { display: none; } }

/* Start dialog: custom per-type counts and the follow-up min/max range. */
.sd-steppers { display: grid; gap: 8px; }
.sd-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; }
.sd-stepper div { display: flex; align-items: center; gap: 8px; }
.sd-stepper button { min-width: 32px; min-height: 32px; padding: 0; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); box-shadow: none; font-weight: 800; color: var(--ink); }
.sd-stepper button:hover { transform: none; box-shadow: none; }
.sd-stepper button:disabled { opacity: .35; }
.sd-stepper output { min-width: 3em; text-align: center; }
.sd-minmax { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.sd-minmax > span { flex: none; width: 2.5em; }
.sd-minmax .sd-ticks { flex: 1; }

/* 面试方向切换：AI产品经理 / 金融（外资通用题库） */
.track-switch { display: inline-flex; gap: 4px; margin: 14px auto 0; padding: 4px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.track-switch[hidden] { display: none; }
.track-option { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.track-option strong { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.track-option small { font-size: 11px; font-weight: 600; color: var(--muted); }
.track-option[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.track-option[aria-checked="true"] small { color: inherit; opacity: .8; }
.track-option:focus-visible { outline: 3px solid #3ddc84; outline-offset: 2px; }
@media (max-width: 480px) { .track-option { padding: 7px 14px; } }

/* 候场画面 (web/modules/seat-wait.js): every room is taken; you on the left, the interviewer on the way on the right. */
.seat-wait {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: center; gap: 18px; overflow: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: #141418; color: #fff;
}
.seat-wait-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(960px, 100%); margin: 0 auto; }
.seat-wait-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; background: #202126; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.seat-wait-avatar { width: 34%; aspect-ratio: 1; border-radius: 50%; background: #34353d; display: grid; place-items: center; }
.seat-wait-avatar svg { width: 70%; fill: #8d8f99; }
.seat-wait-name { position: absolute; left: 12px; bottom: 10px; padding: 3px 10px; border-radius: 8px; background: #00000080; font-size: 13px; }
.seat-wait-other { border: 2px dashed #ffffff30; background: #1b1c21; }
.seat-wait-coming { margin: 0; padding: 0 14px; text-align: center; font-size: 16px; font-weight: 700; }
.seat-wait-road { position: relative; width: 60%; height: 56px; border-bottom: 2px dashed #ffffff40; overflow: hidden; }
.seat-wait-walker { position: absolute; bottom: 3px; left: 0; width: 22px; height: 34px; border-radius: 11px 11px 5px 5px; background: #ffc934; animation: seat-walk 3.6s linear infinite; }
.seat-wait-walker::before { content: ""; position: absolute; top: -15px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffc934; }
.seat-wait-road i { position: absolute; bottom: 8px; right: 0; width: 6px; height: 6px; border-radius: 50%; background: #ffffffb0; animation: seat-dot 1.2s ease-in-out infinite; }
.seat-wait-road i:nth-of-type(1) { right: 26px; }
.seat-wait-road i:nth-of-type(2) { right: 14px; animation-delay: .2s; }
.seat-wait-road i:nth-of-type(3) { right: 2px; animation-delay: .4s; }
@keyframes seat-walk {
  0% { left: -10%; transform: translateY(0) rotate(-5deg); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: translateY(-4px) rotate(5deg); }
  25%, 50%, 75% { transform: translateY(0) rotate(-5deg); }
  100% { left: 70%; transform: translateY(0) rotate(-5deg); }
}
@keyframes seat-dot { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .seat-wait-walker, .seat-wait-road i { animation: none; } }
.seat-wait-info { width: min(520px, 100%); margin: 0 auto; text-align: center; display: grid; gap: 4px; justify-items: center; }
.seat-wait-info p { margin: 0; }
.seat-wait-crowd { font-size: 18px; font-weight: 800; }
.seat-wait-eta { font-size: 15px; color: #ffc934; font-weight: 700; }
.seat-wait-meta { color: #ffffffa0; font-family: var(--mono); font-size: 13px; }
.seat-wait-dialog { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; background: #000000a0; }
.seat-wait-card { width: min(360px, 100%); padding: 20px 18px 16px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.seat-wait-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; font-weight: 600; }
.seat-wait-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.seat-wait-actions button { padding: 9px 16px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-hi); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.seat-wait-actions button.primary { background: var(--ink); color: var(--paper); font-weight: 800; }
.seat-wait-cancel { margin-top: 10px; padding: 9px 18px; border: 2px solid #ffffff60; border-radius: 10px; background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
@media (max-width: 640px) {
  .seat-wait-grid { grid-template-columns: 1fr; width: min(360px, 100%); }
  .seat-wait-tile { aspect-ratio: 16 / 9; }
  .seat-wait-avatar { width: 22%; }
}
/* 人多变慢 (web/modules/load-guard.js): the start dialog note and the in-room wait / remedy / downgrade note. */
.realtime-load { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff1d6; border: 1.5px solid var(--ink); color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.latency-note { text-align: left; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #fff1d6; color: var(--ink); border: 2px solid var(--ink); font-size: 14px; line-height: 1.5; }
.latency-note p { margin: 0; }
.latency-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.latency-actions button { padding: 7px 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-hi); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.latency-actions button.primary { background: var(--ink); color: var(--paper); }

/* Desktop start dialog fits one screen (2026-10-10): language and answer mode share a row; only 神秘人 (custom) may scroll. */
@media (min-width: 681px) {
  .start-dialog { width: min(580px, calc(100% - 32px)); }
  .sd-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 20px; align-content: start; }
  .sd-body > * { grid-column: 1 / -1; }
  .sd-body > #sd-language-row:not([hidden]), .sd-body > #sd-language-row:not([hidden]) ~ #sd-answer-row { grid-column: auto; }
  .sd-body > #sd-language-row:not([hidden]) ~ #sd-answer-row { border-top: 1.5px dashed #17161b26; }
  .sd-preset .sd-preset-note, #sd-fuamount-row .sd-preset-note { margin-top: 2px; font-size: 12px; }
  .sd-preset-desc { margin-bottom: 0; }
  .realtime-load { margin-top: 4px; padding: 5px 10px; font-size: 12px; line-height: 1.4; }
}
@media (min-width: 681px) and (max-height: 860px) {
  .sd-preset .sd-preset-note { display: none; }
  .sd-head { padding: 12px 20px 6px; }
  .sd-foot { padding: 8px 20px 10px; }
  .primary.sd-go { min-height: 44px; }
  .sd-summary strong { font-size: 18px; }
}
@media (min-width: 681px) and (max-height: 640px) {
  .start-dialog { max-height: calc(100dvh - 12px); }
  #sd-fuamount-row .sd-preset-note { display: none; }
  .sd-row { padding: 6px 0 4px; }
  .sd-chips button, .sd-level-ticks button { min-height: 32px; }
}