.listening-speaking-demo-layer { position: fixed; z-index: 28; left: 1rem; bottom: 1rem; width: min(30rem, calc(100vw - 2rem)); pointer-events: none; }
.listening-speaking-demo { pointer-events: auto; display: grid; gap: .65rem; padding: 1rem; border: 1px solid var(--line, #cbd5e1); border-radius: 1rem; background: var(--surface, #fff); box-shadow: 0 .75rem 2rem rgb(15 23 42 / .16); }
.listening-speaking-demo__warning, .listening-speaking-demo__fallback, .listening-speaking-demo__help { margin: 0; color: #475569; font-size: .83rem; }
.listening-speaking-demo__prompt-label { display: grid; gap: .25rem; font-size: .78rem; font-weight: 700; }
.listening-speaking-demo textarea { width: 100%; min-height: 3.4rem; padding: .5rem; resize: vertical; font: inherit; border: 1px solid var(--line, #cbd5e1); border-radius: .55rem; }
.listening-speaking-demo__phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: 0; margin: 0; list-style: none; counter-reset: phase; }
.listening-speaking-demo__phases li { padding: .45rem .35rem; border: 1px solid var(--line, #cbd5e1); border-radius: .5rem; color: #475569; font-size: .76rem; text-align: center; }
.listening-speaking-demo__phases li.is-active { color: #1d4ed8; border-color: #1d4ed8; background: #eff6ff; font-weight: 700; }
.listening-speaking-demo__phases li.is-done { color: #166534; border-color: #86efac; background: #f0fdf4; }
.listening-speaking-demo__phase, .listening-speaking-demo__state { margin: 0; color: #1e3a8a; font-size: .88rem; }
.listening-speaking-demo__clock { font-variant-numeric: tabular-nums; font-size: 2.7rem; font-weight: 800; letter-spacing: .06em; text-align: center; color: #0f172a; }
.listening-speaking-demo__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.listening-speaking-demo button { min-height: 2.25rem; padding: .45rem .75rem; border: 1px solid var(--line, #cbd5e1); border-radius: .6rem; background: transparent; cursor: pointer; }
.listening-speaking-demo button.is-primary { color: #fff; background: #1d4ed8; border-color: #1d4ed8; }
.listening-speaking-demo button:disabled { opacity: .5; cursor: not-allowed; }
.listening-speaking-demo__error { margin: 0; color: #b91c1c; }
@media (max-width: 430px) { .listening-speaking-demo-layer { left: .5rem; bottom: .5rem; width: calc(100vw - 1rem); } .listening-speaking-demo__phases { grid-template-columns: 1fr; } }
@media (forced-colors: active) { .listening-speaking-demo { border: 2px solid CanvasText; box-shadow: none; } .listening-speaking-demo button.is-primary { background: Highlight; color: HighlightText; } .listening-speaking-demo__phases li.is-active { border: 2px solid Highlight; } }
@media print { .listening-speaking-demo-layer, .listening-speaking-demo-launcher { display: none !important; } }