.quick-listen { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; border-top:2px solid var(--accent); border-bottom:1px solid var(--line); padding:24px 0; margin:16px 0; scroll-margin-top:16px; }
.quick-listen h2 { font-size:22px; margin-top:8px; }
.quick-listen p { max-width:560px; }
.guide-listen-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.guide-listen-example { grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px; }
.guide-listen-dock { position:fixed; bottom:max(12px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(580px,calc(100% - 24px)); display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); background:var(--raised); z-index:100; }
.guide-listen-dock strong,.guide-listen-dock span { display:block; text-align:left; }
#guideListenManage { flex:1; min-width:0; border:0; padding:4px; }
.guide-listen-dock strong { font-size:12px; color:var(--live); }
.guide-listen-dock span { font-size:11.5px; color:var(--dim); margin-top:4px; }
.guide-listen-dock[hidden] { display:none; }
body.has-listen-dock { padding-bottom:92px; }
.quick-listen[data-active="true"] .eyebrow { color:var(--live); }
#guideListenNav { border-color:var(--accent); }
@media(max-width:950px) { .quick-listen { grid-template-columns:1fr; gap:8px; } }
@media(max-width:700px) { .quick-listen { padding:16px 0; margin-top:8px; } .top nav { gap:10px; flex-wrap:wrap; } .guide-listen-actions button { flex:1 1 auto; } .guide-listen-dock { gap:8px; } }