/* Scoped listening room: existing page, navigation and portal styles stay intact. */
.audio-listening { --listen-cyan:#68e4ef; --listen-violet:#c5a0ff; --listen-muted:#94a5ba; scroll-margin-top:140px; }
.listening-player { overflow:hidden; border:1px solid #30475d; border-radius:24px; background:linear-gradient(132deg,rgba(26,46,65,.8),rgba(10,18,31,.98) 46%,rgba(28,23,45,.7)); box-shadow:0 24px 80px #0005,0 0 70px #35d8e809,inset 0 1px #a1dcff12; }
.listening-player-top { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 32px; border-bottom:1px solid #7aa5c51e; background:#030a133d; }
.listening-room-label,.listening-quality { font-size:10px; font-weight:650; letter-spacing:2px; }
.listening-room-label { display:flex; align-items:center; gap:12px; color:#cfdee9; }
.listening-room-label i { width:6px; height:6px; border-radius:50%; background:var(--listen-cyan); box-shadow:0 0 15px #6be4ef90; }
.listening-quality { color:#a5c9d5; font-size:9px; letter-spacing:1.5px; }
.listening-quality b { font-weight:400; color:#536c83; padding:0 12px; }
.listening-main { padding:34px 38px 20px; }
.listening-track { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.listening-track .tiny-label { font-size:10px; letter-spacing:2px; color:#92a9bd; margin:0 0 9px; }
.listening-track .tiny-label span { padding:0 10px; color:#576e83; }
.listening-track h3 { font-size:clamp(30px,3.4vw,46px); font-weight:500; letter-spacing:-1.7px; line-height:1.12; margin:0; }
.listening-title-dot { color:var(--listen-cyan); }
.listening-format { display:flex; gap:16px; color:#8d9fb4; font-size:10px; letter-spacing:1px; padding-bottom:4px; white-space:nowrap; }
.listening-format span { white-space:nowrap; }
.listening-wave { height:155px; margin:25px 0 0; position:relative; border-block:1px solid #83b8e00c; background:linear-gradient(transparent 49.7%,#7bc5e019 50%,transparent 50.3%); border-radius:6px; }
.listening-wave-base,.listening-wave-progress { position:absolute; inset:0; pointer-events:none; }
.listening-wave svg { display:block; width:100%; height:100%; fill:#8eb4cc; }
.listening-wave-base { opacity:.35; }
.listening-wave-progress { clip-path:inset(0 calc(100% - var(--progress)) 0 0); filter:drop-shadow(0 0 5px #64dcf448); }
.listening-wave-progress svg { fill:var(--listen-cyan); }
.listening-playhead { position:absolute; left:clamp(0px,var(--progress),calc(100% - 1px)); top:12px; bottom:12px; width:1px; background:#a1edf7; box-shadow:0 0 8px #6be3ed60; pointer-events:none; opacity:.8; }
.listening-wave input { position:absolute; inset:0; width:100%; height:100%; margin:0; cursor:ew-resize; opacity:0; }
.listening-wave:focus-within { outline:2px solid var(--listen-cyan); outline-offset:5px; }
.listening-timeline { display:flex; justify-content:space-between; align-items:center; margin-top:9px; font-size:11px; font-variant-numeric:tabular-nums; color:#d9e7ed; }
.listening-duration { color:#71869e; }
.listening-timeline>span:last-child { font-size:8px; letter-spacing:1.7px; color:#768da5; }
.listening-transport { display:grid; grid-template-columns:122px minmax(0,1fr) 104px; align-items:stretch; gap:22px; margin-top:29px; }
.listening-transport button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .18s,border-color .18s,color .18s; }
.listening-play { display:flex; align-items:center; justify-content:center; gap:12px; background:linear-gradient(120deg,#85eaf0,#59cddd); border:1px solid #a3f5f6; color:#04212e; border-radius:12px; font-size:13px!important; font-weight:750!important; min-height:66px; box-shadow:0 5px 22px #25d5e313; }
.listening-play:hover { background:#a2f4f5; }
.listening-play-icon { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:10px solid currentColor; }
.audio-listening [data-audio-demo][data-state="playing"] .listening-play-icon,.audio-listening [data-audio-demo][data-state="loading"] .listening-play-icon { width:10px; height:14px; border:0; border-inline:3px solid currentColor; }
.listening-ab { display:grid; grid-template-columns:1fr 1fr; padding:4px; gap:5px; border:1px solid #536f8b55; border-radius:13px; background:#040b1666; }
.listening-ab button { border:1px solid transparent; background:transparent; color:#9badc2; border-radius:9px; display:flex; justify-content:center; align-items:center; gap:17px; min-height:56px; padding:8px 14px; text-align:left; font-size:13px; font-weight:650; }
.listening-ab small { display:block; margin-top:4px; color:#7c94ad; font-weight:450; font-size:10px; letter-spacing:.1px; }
.listening-side { font-size:19px; font-weight:400; line-height:1; color:#628098; }
.listening-ab button[aria-pressed="true"] { background:linear-gradient(115deg,#17374a,#152a3d); color:#e2f9ff; border-color:#49778d; box-shadow:inset 0 1px #a8eaff12; }
.listening-ab button[data-audio-mode="active"][aria-pressed="true"] { background:linear-gradient(115deg,#153b4c,#272946); border-color:#6aa8b4; }
.listening-ab button[aria-pressed="true"] .listening-side { color:var(--listen-cyan); }
.listening-ab button[aria-pressed="true"] small { color:#adc9d7; }
.listening-ab button:hover { border-color:#6191ab85; color:#edfaff; }
.listening-delta { display:flex; justify-content:center; align-items:center; gap:10px; border:1px solid #34495e; color:#b1bdcc; background:#08121e88; border-radius:12px; font-size:12px!important; }
.listening-delta>span { font-size:19px; color:#c0a876; }
.listening-delta[aria-pressed="true"] { border-color:#aa8e55; color:#ffe0a2; background:#3a3025; }
.listening-delta:hover { border-color:#8d7c5d; }
.listening-under-controls { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:23px; min-height:30px; }
.listening-current { display:flex; align-items:center; gap:9px; color:#9bbacd; font-size:9px; font-weight:600; letter-spacing:1.4px; }
.listening-current i { display:block; width:4px; height:4px; background:var(--listen-cyan); border-radius:50%; }
.listening-volume { display:flex; align-items:center; gap:11px; color:#8aa5bd; font-size:10px; font-variant-numeric:tabular-nums; }
.listening-volume input { accent-color:#7acdd8; width:82px; height:26px; cursor:pointer; }
.listening-volume [data-audio-volume-value] { width:30px; text-align:right; }
.listening-status { font-size:11px; line-height:1.65; color:#8ca1b6; margin:12px 0 0; min-height:2em; }
.audio-listening [data-audio-demo][data-state="error"] .listening-status { color:#f0bfac; }
.listening-settings { padding:24px 38px 21px; background:linear-gradient(120deg,#060c16b5,#1314249c); border-top:1px solid #516b8d36; }
.listening-settings-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.listening-settings-heading .tiny-label { font-size:9px; letter-spacing:1.7px; color:#a1adc4; }
.listening-settings-heading p { margin:0; font-size:10px; color:#7d8da5; }
.listening-settings-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:22px 0 23px; gap:30px; }
.listening-setting { --setting:#64e3e7; }
.listening-setting.silk { --setting:#c3a0ed; }.listening-setting.air { --setting:#79c5fa; }.listening-setting.tame { --setting:#eac57d; }
.listening-setting dt { color:var(--setting); text-transform:uppercase; font-size:10px; letter-spacing:2px; font-weight:550; }
.listening-setting dd { margin:8px 0 12px; font-size:27px; font-weight:450; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:#e2e8f1; }
.listening-setting dd span { margin-left:4px; font-size:12px; color:#778aa2; }
.listening-setting-meter { display:block; height:2px; background:#849cc720; }
.listening-setting-meter i { display:block; height:100%; background:var(--setting); opacity:.65; }
.listening-settings-foot { display:flex; align-items:center; flex-wrap:wrap; gap:22px; font-size:9px; letter-spacing:1px; color:#778da4; }
.listening-settings-foot strong { color:#b5c7d7; font-size:10px; font-weight:500; letter-spacing:0; margin-left:7px; }
.listening-settings-foot>span:last-child { margin-left:auto; letter-spacing:0; color:#657b93; font-size:9px; }
.listening-notes { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:28px; }
.listening-notes p { color:#94a5ba; line-height:1.8; font-size:12px; margin:0; }
.listening-notes .tiny-label { display:block; font-size:9px; color:#c5d3e1; letter-spacing:1.5px; margin-bottom:7px; }
.listening-method { margin-top:26px; border-top:1px solid #657e9c33; border-bottom:1px solid #657e9c33; }
.listening-method summary { display:flex; justify-content:space-between; align-items:center; padding:16px 0; cursor:pointer; color:#9badc1; font-size:11px; list-style:none; }
.listening-method summary::-webkit-details-marker { display:none; }
.listening-method summary>span { font-size:20px; font-weight:300; color:#6b8aa7; }
.listening-method[open] summary>span { transform:rotate(45deg); }
.listening-method>div { max-width:850px; padding-bottom:16px; }
.listening-method p { font-size:12px; line-height:1.9; color:#99a8ba; }
.audio-listening button:focus-visible,.listening-method summary:focus-visible,.listening-volume input:focus-visible { outline:2px solid #8cebf5; outline-offset:4px; }
.audio-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.audio-example-panel[hidden] { display:none!important; }
.listening-examples { max-width:1000px; margin:0 auto 18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.listening-examples button { min-height:82px; min-width:0; padding:17px 20px; display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer; color:#bccadd; background:#0b1522; border:1px solid #344b6255; border-radius:12px; font:inherit; }
.listening-examples button:hover { border-color:#6f9bb799; background:#132336; }
.listening-examples button[aria-pressed="true"] { background:linear-gradient(115deg,#173243,#24253f); border-color:#70a4b4; box-shadow:inset 0 1px #b4e5ff10; }
.listening-example-index { color:#607d98; font-size:10px; font-variant-numeric:tabular-nums; }
.listening-examples strong { display:block; font-size:14px; font-weight:600; color:#cfdeeb; line-height:1.5; }
.listening-examples small { display:block; margin-top:4px; color:#8ba4bc; font-size:9px; text-transform:uppercase; letter-spacing:1.5px; }
.listening-examples button[aria-pressed="true"] strong { color:#edfbff; }
.listening-example-indicator { margin-left:auto; width:5px; height:5px; flex:none; border:1px solid #66869d; border-radius:50%; }
.listening-examples button[aria-pressed="true"] .listening-example-indicator { border-color:#77e7ef; background:#77e7ef; box-shadow:0 0 9px #67dce759; }
@media(max-width:760px) { .listening-examples { gap:8px; margin-bottom:13px; }.listening-examples button { padding:12px 10px; min-height:82px; gap:0; align-items:start; }.listening-example-index,.listening-example-indicator { display:none; }.listening-examples strong { font-size:12px; min-height:36px; line-height:1.5; }.listening-examples small { font-size:8px; letter-spacing:1px; }.listening-track { display:block; }.listening-format { flex-direction:row; margin-top:12px; gap:12px; text-align:left; } }
@media(min-width:1200px) { .audio-listening .listening-player { max-width:1000px; margin-inline:auto; } .listening-notes,.listening-method { max-width:1000px; margin-inline:auto; } }
@media(max-width:760px) { .audio-listening { scroll-margin-top:92px; }.listening-player { border-radius:19px; }.listening-player-top { padding:18px 22px; }.listening-quality { font-size:8px; letter-spacing:1px; }.listening-quality b { padding:0 5px; }.listening-room-label { font-size:8px; letter-spacing:1.4px; gap:7px; }.listening-main { padding:27px 22px 17px; }.listening-track { align-items:start; }.listening-track h3 { font-size:34px; }.listening-format { font-size:8px; flex-direction:column; gap:3px; text-align:right; line-height:1.8; }.listening-wave { height:130px; margin-top:20px; }.listening-timeline>span:last-child { font-size:7px; letter-spacing:1px; }.listening-transport { grid-template-columns:1fr 1fr; gap:12px; margin-top:23px; }.listening-ab { grid-column:1/-1; grid-row:1; }.listening-ab button { min-height:59px; padding:8px 10px; gap:14px; }.listening-play { min-height:48px; border-radius:10px; }.listening-delta { border-radius:10px; min-height:48px; }.listening-under-controls { margin-top:16px; }.listening-current { font-size:8px; letter-spacing:.8px; }.listening-volume { gap:7px; }.listening-volume input { width:62px; }.listening-status { min-height:3.3em; margin-top:9px; font-size:10px; }.listening-settings { padding:21px 22px; }.listening-settings-heading { align-items:start; gap:10px; }.listening-settings-heading p { max-width:115px; text-align:right; font-size:9px; line-height:1.6; }.listening-settings-heading .tiny-label { font-size:8px; letter-spacing:1.2px; }.listening-settings-grid { gap:15px; margin:21px 0; }.listening-setting dt { font-size:8px; letter-spacing:1px; }.listening-setting dd { font-size:24px; }.listening-setting dd span { font-size:9px; margin-left:2px; }.listening-settings-foot { gap:13px; font-size:8px; }.listening-settings-foot>span:last-child { flex-basis:100%; margin-left:0; }.listening-notes { grid-template-columns:1fr; gap:22px; margin-top:26px; }.listening-notes p { font-size:11px; }.listening-method p { font-size:11px; } }
@media(max-width:370px) { .listening-track { display:block; }.listening-format { flex-direction:row; margin-top:13px; gap:12px; text-align:left; } .listening-player-top,.listening-main,.listening-settings { padding-inline:16px; }.listening-quality { font-size:7px; }.listening-room-label { font-size:7px; }.listening-side { font-size:17px; }.listening-ab button { gap:10px; font-size:12px; }.listening-setting dd { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { .audio-listening *, .audio-listening *::before, .audio-listening *::after { transition:none!important; scroll-behavior:auto!important; } }

@media(max-width:760px) { .audio-listening .listening-format { flex-direction:row; gap:12px; text-align:left; } }