/* The voice sample is a prerecorded file, with the same theme as the explainers. */
.listening-page .listen-card { margin-top: 32px; background: linear-gradient(140deg, var(--surface), color-mix(in srgb, var(--signal) 3.5%, var(--surface))); box-shadow: 0 20px 55px #00000014; }
.listen-card h2 { font-size: clamp(23px, 3vw, 28px); line-height: 1.3; margin: 0 0 8px; }
.listen-card .hint { margin: 0 0 22px; font-size: 14px; }
.listen-status { color: var(--muted); font-size: 13px!important; margin-bottom: 0; }
.listen-status:empty { display: none; }
.listen-card details { margin-top: 18px; color: var(--muted); line-height: 1.7; }
.listen-card summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; }
.listen-card summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; border-radius: 4px; }
.listen-passage { white-space: pre-line; color: var(--ink); font-size: 16px; line-height: 1.8; }
[data-palette-texture=red] .listen-card, [data-palette-texture=orange] .listen-card { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--accent) 11%, transparent) 6px 7px); background-clip: padding-box; border-color: color-mix(in srgb, var(--accent) 40%, var(--bg)); }