:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f7f4ed; color: #1c1c1a; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.listener-shell { width: min(100%, 42rem); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.eyebrow { margin: 0 0 .5rem; color: #716d65; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.05; }
h2 { margin-top: 2.5rem; font-size: 1.15rem; }
.muted, .status { color: #625f59; }
.caption-card { margin-top: 2rem; padding: 1.4rem; border-radius: 1.25rem; background: #fffdf8; box-shadow: 0 1px 5px #00000016; }
.target-caption { margin: 0; font-size: clamp(1.8rem, 6.5vw, 3rem); font-weight: 650; line-height: 1.2; }
.source-caption { margin: 1rem 0 0; color: #625f59; font-size: 1rem; line-height: 1.45; }
.controls { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; align-items: center; }
button, select { min-height: 2.75rem; border: 1px solid #b8b3aa; border-radius: .7rem; background: #fffdf8; color: inherit; font: inherit; padding: .5rem .75rem; }
button { font-weight: 650; cursor: pointer; }
label { display: grid; gap: .25rem; color: #625f59; font-size: .82rem; }
.history { display: grid; gap: .75rem; padding: 0; list-style: none; }
.history li { padding: .9rem 1rem; border-left: .25rem solid #d7d0c3; background: #ffffff80; line-height: 1.35; }
.history small { display: block; margin-top: .3rem; color: #625f59; }
.listener-shell[data-text-size="large"] .target-caption { font-size: clamp(2.25rem, 8vw, 3.75rem); }
.listener-shell[data-text-size="xlarge"] .target-caption { font-size: clamp(2.7rem, 9vw, 4.5rem); }
@media (prefers-color-scheme: dark) { :root { background: #1c1b19; color: #f5f1e8; } .caption-card, button, select { background: #282622; color: inherit; } .muted, .status, label, .source-caption, .history small, .eyebrow { color: #c4beb3; } .history li { background: #ffffff0d; border-color: #625f59; } }