/* Quiet utility controls: same visual weight as the portfolio's small navigation. */
.doc .read-listen-toolbar{position:absolute;top:10px;right:18px;z-index:8;display:flex;align-items:center;gap:6px;width:auto;height:auto;max-width:calc(100% - 32px);pointer-events:none;color:var(--ink-4,#65758b)}
.read-listen-button,.read-listen-speed{box-sizing:border-box;pointer-events:auto;height:28px;min-height:0;border:0;border-radius:4px;background:transparent;color:inherit;font:400 11px var(--sans,sans-serif);cursor:pointer;transition:color .15s ease,background-color .15s ease}
.read-listen-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;padding:0}
.read-listen-button svg{width:15px;height:15px}
.read-listen-button>span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.read-listen-speed{width:42px;padding:0 4px;appearance:none;text-align:center;font-family:var(--mono,monospace);font-variant-numeric:tabular-nums}
.read-listen-button:hover,.read-listen-speed:hover{color:var(--teal,#127e99);background:rgba(18,126,153,.06)}
.read-listen-button[aria-pressed=true]{color:var(--teal,#127e99);background:rgba(18,126,153,.08)}
.read-listen-button:focus-visible,.read-listen-speed:focus-visible{outline:2px solid var(--teal,#127e99);outline-offset:2px}
.read-listen-button:disabled{opacity:.4;cursor:wait}
.read-listen-status{font:11px/1.4 var(--sans,sans-serif);color:var(--ink-4,#65758b);max-width:180px;text-align:right}
.doc .body.orig{padding-top:20px}
::highlight(read-sentence){background:rgba(18,126,153,.14);color:inherit}
::highlight(read-word){background:rgba(18,126,153,.35);color:inherit;text-decoration:underline;text-decoration-color:#127e99}
.read-speaking{background:rgba(18,126,153,.14);border-radius:3px}
@media(max-width:860px){.screen .doc{padding-top:44px;box-sizing:border-box}.screen .doc .body.orig{padding-top:0}.doc .read-listen-toolbar{top:4px;right:12px}.read-listen-status{max-width:150px}}
/* Small glyphs, generous invisible hit areas on touchscreens. */
@media(pointer:coarse){.read-listen-button,.read-listen-speed{height:44px;min-width:44px}.doc .read-listen-toolbar{top:0;gap:2px}}
@media(prefers-reduced-motion:reduce){.read-listen-button,.read-listen-speed{transition:none}}

/* Keep the compact controls discoverable without restoring the large pills. */
.read-listen-button{color:var(--teal,#127e99);background:rgba(18,126,153,.09)}
.read-listen-speed{color:var(--teal,#127e99);background:rgba(18,126,153,.09)}
.read-listen-button:hover,.read-listen-button[aria-pressed=true]{background:rgba(18,126,153,.17)}
.read-listen-speed:hover{background:rgba(18,126,153,.17)}