.listen-intro { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 65px var(--gutter) 90px; color: #173451; }
.listen-copy h2 { font: 400 clamp(28px,3vw,42px)/1.2 var(--sc-font-display); margin: 0 0 12px; }
.listen-copy p { font-size: 16px; margin: 0; }
.audio-player { display: flex; align-items: center; gap: 25px; width: min(420px,100%); flex-shrink: 0; }
.audio-toggle { position: relative; width: 66px; height: 66px; flex-shrink: 0; border: 1px solid #417795; border-radius: 50%; background: #ffffff30; color: #173451; cursor: pointer; }
.audio-toggle::before { content: ''; position: absolute; inset: -9px; border: 1px solid #18b5d260; border-radius: 50%; }
.audio-toggle svg { width: 27px; height: 27px; fill: currentColor; }
.stop-shape { display: none; }
.audio-player.is-playing .stop-shape { display: block; }
.audio-player.is-playing .play-shape { display: none; }
.audio-player.is-playing .audio-toggle::before { animation: audio-breathe 3s ease-in-out infinite; }
.audio-toggle:focus-visible { outline: 2px solid #173451; outline-offset: 12px; }
.audio-progress { display: grid; flex: 1; gap: 8px; font-size: 14px; }
.audio-progress input { width: 100%; accent-color: #237e99; cursor: pointer; }
.audio-time { font-size: 12px; font-variant-numeric: tabular-nums; }
@keyframes audio-breathe { 50% { transform: scale(1.2); box-shadow: 0 0 22px #18b5d260; opacity: .6; } }

.practice-page .listen-intro { display: block; padding: 30px 0 0; margin-top: 24px; border-top: 1px solid #17345130; }
.practice-page .listen-copy p { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.6; margin: 0 0 28px; }
.practice-page .audio-player { max-width: 420px; margin-left: 10px; width: calc(100% - 10px); }
.practice-page .practice-cover { height: auto; min-height: 100svh; padding-bottom: 90px; }
@media(prefers-reduced-motion:reduce) { .audio-player.is-playing .audio-toggle::before { animation: none; } }
/* Circular playback progress, independent of the breathing halo. */
.audio-toggle { width: 80px; height: 80px; border: 0; }
.audio-toggle svg.audio-ring { position: absolute; inset: -5px; width: 90px; height: 90px; fill: none; transform: rotate(-90deg); pointer-events: none; }
.audio-ring circle { fill: none; stroke-width: 2; }
.ring-track { stroke: #41779540; }
.ring-progress { stroke: #1689a7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--audio-progress, 0)); transition: stroke-dashoffset .25s linear; }
.audio-toggle::after { content: ''; position: absolute; inset: -15px; border-radius: 50%; border: 1px solid #18b5d240; opacity: 0; pointer-events: none; }
.audio-player.is-playing .audio-toggle::after { opacity: 1; animation: audio-breathe 3s 1.5s ease-in-out infinite; }
.audio-player.is-playing .audio-symbol { filter: drop-shadow(0 0 6px #18b5d2aa); }
.audio-state-label { font-size: 13px; color: #286481; }
@media(prefers-reduced-motion:reduce) { .audio-player.is-playing .audio-toggle::after { animation: none; } .ring-progress { transition: none; } }