/* Listen player. Shared by every guide; uses each page's own color tokens. */
.listen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;max-width:100%}
.listen-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.listen-more[hidden]{display:none}
.listen button{display:inline-flex;align-items:center;gap:6px;font:700 15px var(--body);line-height:1;border-radius:50px;border:2px solid var(--accent);background:var(--bg);color:var(--accent);padding:9px 16px;cursor:pointer;white-space:nowrap}
.listen button:hover{background:var(--accent);color:var(--on-accent)}
.listen .listen-main{padding:10px 20px 10px 16px}
.listen[data-state="playing"] .listen-main,.listen[data-state="paused"] .listen-main{background:var(--accent);color:var(--on-accent)}
.listen-speed{display:inline-flex;gap:4px;padding:3px;border-radius:50px;background:var(--surface)}
.listen .listen-speed button{border-color:transparent;background:transparent;color:var(--ink);padding:7px 10px;font-size:14px}
.listen .listen-speed button:hover{background:var(--bg);color:var(--accent)}
.listen .listen-speed button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.listen-keep{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--body);cursor:pointer;padding:6px 4px;white-space:nowrap}
.listen-keep input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:50px;background:var(--line);position:relative;margin:0;cursor:pointer;flex:none;transition:background .15s}
.listen-keep input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--bg);transition:transform .15s}
.listen-keep input:checked{background:var(--accent)}
.listen-keep input:checked::after{transform:translateX(16px)}
.listen-keep input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.listen-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the step being read */
.is-reading{background:var(--accent-soft);box-shadow:0 0 0 6px var(--accent-soft);border-radius:4px}
.note.is-reading{box-shadow:0 0 0 3px var(--accent);background:var(--accent-soft)}

/* closing blue band */
#rhythm .listen{justify-content:center}
#rhythm .listen-more{justify-content:center}
#rhythm .listen button{border-color:var(--bg)}
#rhythm .listen button:hover,#rhythm .listen[data-state="playing"] .listen-main,#rhythm .listen[data-state="paused"] .listen-main{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#rhythm .listen-speed{background:rgba(255,255,255,.22)}
#rhythm .listen .listen-speed button{color:var(--on-accent);border-color:transparent}
#rhythm .listen .listen-speed button:hover{background:var(--bg);color:var(--accent)}
#rhythm .listen .listen-speed button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
#rhythm .listen-keep{color:var(--on-accent)}
#rhythm .listen-keep input{background:rgba(255,255,255,.35)}
#rhythm .listen-keep input:checked{background:var(--ink)}
#rhythm h2.is-reading,#rhythm .lede.is-reading{background:rgba(255,255,255,.2);box-shadow:0 0 0 6px rgba(255,255,255,.2)}
#rhythm .rhythm > div.is-reading{background:var(--bg);box-shadow:0 0 0 4px var(--ink)}

@media (prefers-reduced-motion: reduce){ .listen-keep input,.listen-keep input::after{transition:none} }