:root { --caption-size: 22px; }
body { overflow-wrap: anywhere; }
main { max-width: 920px; padding: 28px 24px 48px; }
.reader-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 24px; }
.reader-event { color: var(--muted); font-size: 12px; letter-spacing: .04em; margin: 0 0 8px; }
.reader-heading h1 { font-size: 26px; margin-bottom: 4px; }
.reader-session { margin: 0; color: var(--muted); }
.reader-heading a { color: var(--accent); white-space: nowrap; padding: 10px 0; }
.row { flex-wrap: wrap; }
.row select { width: auto; min-width: 140px; min-height: 44px; }
.reader-size { display: flex; gap: 4px; }
.row button { min-height: 44px; margin: 0; padding: 8px 14px; background: transparent; color: var(--fg); border: 1px solid var(--line); }
#follow[aria-pressed=true] { color: var(--ok); }
.reader-empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.cap { padding: 20px 0; }
.cap .t { font-size: var(--caption-size); line-height: 1.55; }
.cap .src { margin-top: 8px; line-height: 1.5; }
.audience-embedded .reader-heading { display: none; }
.audience-embedded main { padding-top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { main { padding: 20px 16px 32px; } .reader-heading h1 { font-size: 22px; } #follow { font-size: 13px; padding: 8px 10px; } .cap { padding: 16px 0; } }
html.audience-embedded { --bg: #fbfaf7; --fg: #1d1d1b; --muted: #6b6a66; --line: #e3e0d8; --accent: #28583d; --ok: #2f6b3a; --warn: #a2461b; color-scheme: light; }
.row { position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--bg); }

/* Audience reading flow; operator correction rows retain their existing layout. */
.audience-reader #captions { max-width: 72ch; font-size: var(--caption-size); line-height: 1.75; }
.audience-reader .caption-paragraph { margin: 0 0 1em; white-space: pre-wrap; }
.audience-reader .cap { display: inline; padding: 0; border: 0; }
.audience-reader .cap .t { display: inline; font-size: inherit; line-height: inherit; }
.audience-reader .cap .flag { display: inline; margin-inline: .4em; font-size: 12px; color: var(--muted); }
.audience-reader .cap.partial { display: block; margin-top: .75em; }
.audience-reader #source-section { margin-top: 32px; color: var(--muted); max-width: 72ch; }
.audience-reader .source-heading { font-size: 13px; font-weight: 500; margin: 0 0 8px; }
.audience-reader #source-flow { font-size: 16px; line-height: 1.75; white-space: pre-wrap; }