/* Inline playback and optional two-line captions on the existing Sonya card. */
.practice-example-controls{display:flex;align-items:stretch;gap:8px;min-width:0;margin-top:18px}
.practice-page .practice-example-hero{display:flex;flex:1;align-items:center;gap:12px;width:100%;min-width:0;min-height:60px;margin:0;padding:12px 14px;border:1px solid rgba(98,198,222,.42);border-radius:12px;background:rgba(98,198,222,.09);color:var(--text,#edebe6);font:500 14px/1.35 var(--font,system-ui,sans-serif);text-align:left;cursor:pointer;touch-action:manipulation;transition:background .18s ease,border-color .18s ease}
.practice-page .practice-example-hero:hover,.practice-page .practice-example-hero.is-playing{border-color:var(--accent,#62c6de);background:rgba(98,198,222,.17)}
.practice-example-hero>svg{flex:none;width:32px;height:32px;color:var(--accent,#62c6de)}
.practice-example-hero>span{min-width:0}
.practice-example-hero strong{display:block;font:inherit}
.practice-example-hero small{display:block;margin-top:3px;color:var(--text-2,#b0b7bd);font-size:11px;font-weight:400;line-height:1.4}
.practice-page .practice-example-hero:focus-visible,.practice-example-replay:focus-visible{outline:2px solid var(--accent,#62c6de);outline-offset:4px}
.practice-example-replay{display:grid;place-items:center;flex:none;align-self:center;width:44px;min-height:44px;padding:5px;border:1px solid rgba(98,198,222,.3);border-radius:10px;background:rgba(98,198,222,.065);color:var(--accent,#62c6de);font:24px/1 var(--font,system-ui,sans-serif);cursor:pointer;touch-action:manipulation}
.practice-example-replay:hover{border-color:var(--accent,#62c6de);background:rgba(98,198,222,.17)}
.practice-example-inline{min-width:0;margin:10px 2px 0}
.practice-example-inline[hidden],.practice-example-replay[hidden],.practice-example-caption[hidden],.practice-example-status[hidden]{display:none!important}
.practice-example-timing{display:flex;align-items:center;gap:10px;min-width:0}
.practice-example-progress{display:block;flex:1;width:100%;min-width:0;height:3px;margin:0;overflow:hidden;border:0;border-radius:3px;background:var(--line,#2a373e);color:var(--accent,#62c6de);accent-color:var(--accent,#62c6de);appearance:none;-webkit-appearance:none}
.practice-example-progress::-webkit-progress-bar{border-radius:3px;background:var(--line,#2a373e)}
.practice-example-progress::-webkit-progress-value{border-radius:3px;background:var(--accent,#62c6de)}
.practice-example-progress::-moz-progress-bar{border-radius:3px;background:var(--accent,#62c6de)}
.practice-example-time{flex:none;color:var(--text-2,#b0b7bd);font-size:11px;font-variant-numeric:tabular-nums;line-height:1.5;white-space:nowrap}
.practice-example-inline .practice-example-caption{display:-webkit-box;max-height:3.1em;margin:8px 0 0;overflow:hidden;color:var(--text,#edebe6);font-size:12px;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.practice-example-inline .practice-example-status{margin:5px 0 0;color:var(--text-2,#b0b7bd);font-size:11px;line-height:1.5;overflow-wrap:anywhere}
[data-example-audio]{display:none!important}
@media(max-width:700px){.practice-page .assistant-portrait :is(.practice-example-controls,.practice-example-inline){grid-column:1/-1}.practice-example-controls{margin-top:15px}}
@media(prefers-reduced-motion:reduce){.practice-page .practice-example-hero{transition:none}}