.talk-back{--surface:var(--bg-elevated);--muted:var(--text-muted);--tb-border:var(--border);--tb-accent:var(--accent);--tb-accent-2:var(--accent-hover);--radius:12px;--shadow:0 8px 32px color-mix(in srgb, var(--text) 12%, transparent);font-family:var(--font-sans);color:var(--text);flex-direction:column;align-items:center;gap:1.75rem;max-width:640px;margin:0 auto;line-height:1.5;display:flex}.talk-back *{box-sizing:border-box}.talk-back button{font-family:inherit}.talk-back-intro{text-align:center}.talk-back-intro h1{letter-spacing:-.02em;color:var(--text);margin:0 0 .35rem;font-size:1.75rem;font-weight:600}.talk-back .tagline{color:var(--muted);letter-spacing:.02em;margin:0;font-size:.9rem}.talk-back .video-area{flex-wrap:wrap;justify-content:center;gap:24px;width:100%;display:flex}.talk-back .video-wrapper{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--tb-border);width:640px;max-width:100%;box-shadow:var(--shadow);background:#000;transition:opacity .25s,transform .25s;position:relative;overflow:hidden}.talk-back .video-wrapper.hidden{display:none}.talk-back video{object-fit:cover;width:100%;height:100%;display:block}.talk-back .video-label{letter-spacing:1.5px;color:#ffffff80;text-transform:uppercase;pointer-events:none;font-size:.65rem;font-weight:700;position:absolute;bottom:10px;left:14px}.talk-back .rec-badge{letter-spacing:1px;color:var(--tb-accent);opacity:0;pointer-events:none;font-size:.72rem;font-weight:700;transition:opacity .2s;position:absolute;top:12px;right:14px}.talk-back .rec-badge.active{opacity:1;animation:1.1s step-start infinite talk-back-blink}@keyframes talk-back-blink{50%{opacity:0}}.talk-back .controls{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.talk-back .btn{cursor:pointer;letter-spacing:.3px;border:none;border-radius:50px;align-items:center;gap:8px;padding:12px 28px;font-size:.95rem;font-weight:600;transition:background .15s,transform .1s,opacity .15s,border-color .15s;display:inline-flex}.talk-back .btn:active{transform:scale(.96)}.talk-back .btn:disabled{opacity:.38;cursor:not-allowed}.talk-back .btn-record{background:var(--tb-accent);color:#fff}.talk-back .btn-record:not(:disabled):hover{background:var(--tb-accent-2)}.talk-back .btn-stop-rec{background:color-mix(in srgb, var(--tb-accent) 75%, #000);color:#fff}.talk-back .btn-stop-rec:hover{background:var(--tb-accent)}.talk-back .btn-stop-play{background:var(--tb-accent-2);color:#fff}.talk-back .btn-stop-play:hover{filter:brightness(1.08)}.talk-back .btn-ptt{background:color-mix(in srgb, var(--tb-border) 35%, var(--bg));color:var(--text);border:2px solid var(--tb-border);user-select:none}.talk-back .btn-ptt:not(:disabled):hover{background:var(--surface);border-color:color-mix(in srgb, var(--tb-border) 60%, var(--text))}.talk-back .btn-ptt--active,.talk-back .btn-ptt--active:hover{color:#fff;background:var(--tb-accent)!important;border-color:var(--tb-accent)!important}.talk-back .btn-icon{font-size:1rem;line-height:1}.talk-back .hidden{display:none!important}.talk-back .status{color:var(--muted);letter-spacing:.2px;text-align:center;min-height:1.2em;margin:0;font-size:.85rem}.talk-back .hint{color:var(--muted);letter-spacing:.2px;text-align:center;opacity:.85;min-height:1em;margin:0;font-size:.75rem}.talk-back .lang-selector{align-items:center;gap:12px;display:flex}.talk-back .lang-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.78rem;font-weight:600}.talk-back .lang-group{background:var(--surface);border:1px solid var(--tb-border);border-radius:50px;gap:2px;padding:3px;display:flex}.talk-back .lang-btn{color:var(--muted);cursor:pointer;letter-spacing:.3px;background:0 0;border:none;border-radius:50px;padding:6px 16px;font-size:.82rem;font-weight:600;transition:background .15s,color .15s}.talk-back .lang-btn:hover{background:color-mix(in srgb, var(--tb-border) 40%, var(--bg));color:var(--text)}.talk-back .lang-btn--active{background:var(--tb-accent-2);color:#fff}.talk-back .transcript-panel{background:var(--surface);border:1px solid var(--tb-border);border-radius:var(--radius);width:640px;max-width:100%;overflow:hidden}.talk-back .transcript-header{border-bottom:1px solid var(--tb-border);align-items:center;gap:10px;padding:10px 16px;display:flex}.talk-back .transcript-title{letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);flex:1;font-size:.72rem;font-weight:700}.talk-back .wpm-display{letter-spacing:.08em;color:var(--muted);background:var(--bg);border:1px solid var(--tb-border);text-align:center;visibility:hidden;border-radius:50px;min-width:4.5em;padding:2px 10px;font-size:.72rem;font-weight:700;transition:color .3s,border-color .3s}.talk-back .wpm-display.active{visibility:visible;color:#2d8a5c;border-color:color-mix(in srgb, #2d8a5c 40%, var(--tb-border))}.talk-back .speech-indicator{letter-spacing:.5px;color:#2d8a5c;min-width:1em;font-size:.72rem;font-weight:600}.talk-back .speech-indicator.active:before{content:"● LIVE";animation:1.4s step-start infinite talk-back-blink}.talk-back .speech-indicator.unsupported{color:var(--muted)}.talk-back .speech-indicator.unsupported:before{content:"Unavailable — use Chrome";opacity:1;animation:none}.talk-back .transcript-body{min-height:80px;max-height:180px;padding:16px;overflow-y:auto}.talk-back .transcript-placeholder{color:var(--muted);margin:0;font-size:.88rem;font-style:italic;line-height:1.55}.talk-back .transcript-text{color:var(--text);word-break:break-word;margin:0;font-size:.95rem;line-height:1.65}.talk-back .transcript-text .final{color:var(--text)}.talk-back .transcript-text .interim{color:var(--muted);font-style:italic}@media (width<=700px){.talk-back-intro h1{font-size:1.5rem}.talk-back .video-wrapper,.talk-back .transcript-panel{width:100%}}
