#demo-pairing[hidden], #demo-live-panel[hidden], #demo-show-sample[hidden] { display: none; }
#demo-start { cursor: pointer; border: 0; }
#demo-start:disabled { cursor: default; opacity: .72; }
#demo-code { display: block; font-size: clamp(30px, 7vw, 42px); letter-spacing: .2em; color: #38271d; font-variant-numeric: tabular-nums; margin: 8px 0; }
#demo-pairing { padding: 12px 0 20px; }
#demo-code-note { margin-top: 8px; }
.demo-section .demo-expectation { margin: 0 0 4px; font-size: 13px; color: #ddd8d0; }
.demo-expectation strong { color: #fff; }
.live-demo-active .scenario-tabs, .live-demo-active .voice-instruction, .live-demo-active #voice-example { display: none; }
.live-demo-active .voice-visual { display: none; }
.voice-demo #demo-live-status { font-size: 13px; color: #ddd8d0; margin: 22px 0 18px; max-width: none; }
#demo-transcript { min-height: 210px; max-height: 380px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #ffffff20; padding-top: 20px; scrollbar-width: thin; }
#demo-transcript .voice-line p { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 0; }
#demo-transcript .voice-line { grid-template-columns: 79px minmax(0, 1fr); }
#demo-result { border-top: 1px solid #ffffff20; margin-top: 20px; padding-top: 18px; }
#demo-result[hidden] { display: none; }
.demo-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #ddd8d0; font-size: 11px; }
#demo-result-badge { border: 1px solid #ffffff28; border-radius: 99px; color: #ffba95; font-size: 9px; padding: 4px 8px; white-space: nowrap; }
.demo-intake { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; margin: 14px 0; }
.demo-intake dt { color: #aaa; font-size: 10px; }
.demo-intake dd { color: #fff; font-size: 11px; margin: 0; overflow-wrap: anywhere; }
.voice-demo #demo-outcome { color: #d7c3b5; font-size: 11px; line-height: 1.6; margin: 0; max-width: none; overflow-wrap: anywhere; }
#demo-show-sample { margin-top: 16px; padding: 10px 12px; background: #ffffff0c; border: 1px solid #ffffff40; border-radius: 8px; color: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.live-demo-active #voice-pause { visibility: hidden; }
@media (max-width: 540px) { #demo-transcript .voice-line { grid-template-columns: minmax(0, 1fr); } .demo-intake { grid-template-columns: minmax(0, 1fr); gap: 2px; } .demo-intake dd { margin-bottom: 8px; } #demo-start { width: 100%; } }