body { margin:0; background:#fff; color:#20232a; font-family:Arial,sans-serif; }
#us-voice-screen { min-height:570px; padding-bottom:0; }
#us-voice-screen .us-voice-start { background:#1d4ed8; border-color:#1d4ed8; box-shadow:none; }
#us-voice-screen .us-voice-start:hover:not(:disabled) { background:#1e40af; border-color:#1e40af; transform:none; }
#us-voice-screen .us-voice-start:disabled { background:#4b6594; border-color:#4b6594; opacity:1; cursor:default; transform:none; }
#us-voice-screen .us-voice-start:active { transform:translateY(0); }
/* Keep the original soft flag texture and edges; only gently enrich its colors. */
#us-voice-screen .us-orb { filter:blur(.6px) saturate(1.48); box-shadow:none; }
#us-voice-screen .us-orb-light { opacity:.45; }
#us-voice-screen .us-orb-texture { scale:calc(1 + var(--voice-level,0) * .09); rotate:calc(var(--voice-level,0) * 9deg); }
/* Motion follows actual voice events, not a timer that pretends someone is speaking. */
#us-voice-screen[data-voice-state="bot"] .us-orb-clouds { animation:us-local-bot-cloud 5.8s ease-in-out infinite alternate; }
#us-voice-screen[data-voice-state="bot"] .us-orb-ribbon { animation-duration:5s; }
#us-voice-screen[data-voice-state="user"] .us-orb-texture { scale:calc(1 + var(--voice-level,0) * .11); rotate:calc(var(--voice-level,0) * -11deg); }
#us-voice-screen[data-voice-state="user"] .us-orb-clouds { animation:us-local-user-cloud 3.8s ease-in-out infinite alternate; }
#us-voice-screen[data-voice-state="user"] .us-orb-ribbon { animation-duration:3s; animation-direction:alternate-reverse; }
#us-voice-screen[data-voice-state="thinking"] .us-orb-clouds { animation-duration:12s; }
@keyframes us-local-bot-cloud { from { transform:rotate(-13deg) scale(1.04) translate(-2%,0); } to { transform:rotate(34deg) scale(1.15) translate(3%,-2%); } }
@keyframes us-local-user-cloud { from { transform:rotate(-18deg) scale(1.04) translate(-2%,1%); } to { transform:rotate(-48deg) scale(1.12) translate(2%,-1%); } }
#us-voice-screen .us-voice-next { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:300px; max-width:100%; min-height:58px; margin:10px 0 0; padding:16px 12px; border:1px solid #1d4ed8; border-radius:32px; background:#1d4ed8; color:#fff; font:500 17px/1.3 Roboto,Arial,sans-serif; }
#us-voice-screen .us-voice-next span { margin-left:0; }
#us-voice-screen .us-voice-next:disabled { opacity:1; }
#us-voice-screen .us-voice-start[hidden],#us-voice-screen .us-voice-next[hidden],#us-voice-screen .us-lesson-result[hidden] { display:none !important; }
#us-voice-screen .us-lesson-result { box-sizing:border-box; width:100%; max-width:760px; margin:0 auto 14px; padding:0 20px; text-align:center; }
#us-voice-screen .us-lesson-result h2 { margin:0 0 12px; font-size:27px; line-height:1.25; font-weight:600; color:#20232a; }
#us-voice-screen .us-lesson-result p { margin:0; font-size:16px; line-height:1.55; color:#626975; text-wrap:balance; }
#us-voice-screen[data-lesson-state="completed"] .us-voice-intro { visibility:hidden; }
#notice { margin:0 auto 16px; min-height:20px; max-width:480px; padding:0 20px; text-align:center; font-size:13px; line-height:1.6; color:#686f7b; }
#us-voice-screen .us-voice-timer-caption { margin-left:0; color:#90949c; }
#us-voice-screen[data-lesson-state="active"] .us-orb-stage { width:160px; margin:8px 0; }
#us-voice-screen .us-turn-panel { --turn-color:#718a79; position:relative; display:flex; flex-direction:column; box-sizing:border-box; width:min(100%,460px); margin:0 auto 20px; padding:20px 24px 28px; min-height:240px; border:1px solid #e7e9e6; border-radius:18px; background:#fafbf9; text-align:left; overflow:hidden; }
#us-voice-screen .us-turn-panel[hidden],#us-voice-screen #answer-clock[hidden],#us-voice-screen #answer-progress[hidden],#us-voice-screen #mic-indicator[hidden] { display:none; }
#us-voice-screen .us-turn-panel[data-tone="red"] { --turn-color:#bd625e; }
#us-voice-screen .us-turn-panel[data-tone="yellow"] { --turn-color:#b69958; }
#us-voice-screen .us-turn-panel[data-tone="neutral"] { --turn-color:#59616d; }
#us-voice-screen .us-turn-question { margin:0 0 8px; color:#626975; font-size:14px; }
#us-voice-screen .us-turn-status { margin-top:auto; padding-top:20px; }
#us-voice-screen .us-turn-cue-row { display:flex; align-items:center; gap:12px; min-height:30px; }
#us-voice-screen .us-turn-cue { margin:0; color:var(--turn-color); font-size:clamp(22px,5vw,28px); font-weight:600; line-height:1.2; }
#us-voice-screen .us-answer-time { display:flex; align-items:baseline; gap:10px; margin:0 0 8px; color:var(--turn-color); font-size:clamp(72px,16vw,96px); line-height:1; font-variant-numeric:tabular-nums; font-weight:600; }
#us-voice-screen .us-answer-unit { font-size:15px; font-weight:400; }
#us-voice-screen .us-answer-progress { position:absolute; left:0; right:0; bottom:0; height:8px; overflow:hidden; background:#e7e9e6; }
#us-voice-screen #answer-fill { display:block; height:100%; background:var(--turn-color); width:100%; margin-right:auto; }
#us-voice-screen .us-turn-detail { margin:0; color:#626975; font-size:14px; line-height:1.5; }
#us-voice-screen .us-mic-indicator { flex:none; color:var(--turn-color); }
/* A slow opacity pulse, never a rapid strobe. Respect the OS reduced-motion setting. */
#us-voice-screen .us-turn-panel[data-blink="true"] #answer-fill { animation:us-answer-pulse 1.4s ease-in-out infinite; }
@keyframes us-answer-pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }
#test-controls { text-align:center; padding:0 15px 20px; }
#test-controls p { font-size:11px; color:#9197a0; }
#test-controls button,.local-settings button { border:1px solid #d9dde4; background:#fff; color:#59616d; padding:9px 13px; border-radius:18px; cursor:pointer; margin:3px; }
button:disabled { opacity:.5; cursor:default; }
.local-settings { max-width:490px; margin:20px auto 40px; padding:0 20px; color:#777f8b; font-size:12px; line-height:1.65; }
.local-settings summary { text-align:center; cursor:pointer; }
.local-settings[hidden] { display:none; }
.trainer-footer { max-width:650px; margin:18px auto 0; padding:20px 24px 30px; text-align:center; color:#6f7682; font-size:11px; line-height:1.8; }
.trainer-footer nav { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px 8px; }
.trainer-footer a { color:#69717d; text-decoration:none; }
.trainer-footer a:hover { color:#244487; text-decoration:underline; }
.trainer-footer a:focus-visible { outline:2px solid #718fd1; outline-offset:4px; }
.trainer-footer p { margin:12px 0 0; }
.local-settings label { display:block; margin:15px 0; }
.local-settings input[type=password],.local-settings select { display:block; border:1px solid #d9dde4; padding:10px; border-radius:8px; margin-top:5px; width:100%; box-sizing:border-box; }
.consent { display:flex !important; gap:8px; align-items:flex-start; }
@media(max-width:600px) { #us-voice-screen { min-height:560px; } #us-voice-screen .us-voice-next { min-height:56px; font-size:16px; } }
@media(prefers-reduced-motion:reduce) {
  #us-voice-screen .us-turn-panel #answer-fill { animation:none !important; }
  #us-voice-screen .us-orb,#us-voice-screen .us-orb-halo,#us-voice-screen .us-orb-clouds,#us-voice-screen .us-orb-ribbon { animation:none !important; }
  #us-voice-screen .us-orb-texture { scale:1 !important; rotate:none !important; }
  #us-voice-screen .us-voice-start { transition:none; }
}