body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f8f6fa;
  color: #25182f;
  margin: 0;
  padding: 24px;
}
.page { max-width: 1200px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 2px; text-align: center; }
.subtitle { text-align: center; color: #786e80; font-size: 13px; margin: 0 0 20px; }

.layout {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.left-col {
  flex: 1 1 380px;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 30px #34114712;
}

.right-col {
  flex: 2 1 560px;
  min-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 30px #34114712;
  display: flex;
  flex-direction: column;
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 768 / 906;
  background: #18131c;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}
/* V7.2 layer stack. All layers are ALWAYS mounted; only opacity of the
   speaking canvas is ever animated (never display:none), so there is no
   code path that can blank the stage: the backdrop is permanently opaque
   underneath, and the keyed idle layer is permanently visible above it.
   Both avatar canvases are TRANSPARENT (WebGL keying), so the shared
   backdrop shows through in idle AND speaking states. */
#backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  /* Never faded: no transition property on purpose. */
}
.stage video, .stage canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
  transition: opacity 60ms linear;
}
#idleLayer { z-index: 1; }
#speaking { z-index: 2; }
/* The idle <video> is a hidden DECODE SOURCE only (it must keep playing --
   never display:none, which could throttle playback). */
.stage video.decode-source {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: none;
}
.stage canvas.hidden { opacity: 0; pointer-events: none; }
.stage canvas.visible { opacity: 1; }

.buttons { display: flex; gap: 10px; margin-bottom: 16px; }
button {
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  flex: 1;
}
button.start { background: #1a5c86; color: #fff; }
button.stop { background: #b63540; color: #fff; }
button:disabled { opacity: .45; cursor: default; }

.status-block { margin-bottom: 16px; }
.status-label { font-size: 13px; color: #786e80; }
#status { font-weight: 800; font-size: 20px; }
#substatus { font-size: 12px; color: #786e80; min-height: 14px; }
#avatarEngineStatus { font-weight: 800; font-size: 15px; }
#avatarEngineStatus.warming { color: #a67c00; }
#avatarEngineStatus.ready { color: #1a7a3a; }
#avatarEngineStatus.cold { color: #b63540; }

.panel-label, .log-label { font-size: 12px; color: #786e80; margin-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

#timings { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
#timings td { padding: 4px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
#timings td:first-child { color: #786e80; width: 62%; }
#timings tr.metric td { font-weight: 800; color: #1a5c86; }
#timings tr.metric td:first-child { color: #1a5c86; }
#timings tr.section td { font-weight: 900; color: #fff; background: #34114a; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; padding: 6px; }

.log-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.log-actions { display: flex; gap: 8px; }
.small-btn {
  flex: none;
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 8px;
  background: #eee6f2;
  color: #34114a;
  font-weight: 700;
}
.small-btn:hover { background: #ded0e6; }

#log {
  background: #17131c;
  color: #c9c3d0;
  border-radius: 10px;
  padding: 12px;
  min-height: 600px;
  height: 780px;
  max-height: 780px;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  flex: 1;
}

#log .err { color: #ff8a8a; font-weight: 700; }

@media (max-width: 900px) {
  .right-col { min-width: 0; }
  #log { height: 600px; }
}