:root { color-scheme: light; font-family: Georgia, serif; color: #29251f; background: #eee8dc; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(920px, 100%); min-height: 100vh; margin: auto; padding: 3rem clamp(1rem, 4vw, 3rem); background: #fffdf8; box-shadow: 0 0 50px #6f624228; }
header { max-width: 700px; }
h1 { margin: .15rem 0 .6rem; font-size: clamp(2.6rem, 8vw, 5.2rem); font-weight: 500; line-height: .95; color: #56382b; }
.eyebrow, .hint { font-family: system-ui, sans-serif; color: #73685b; }
.eyebrow { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
nav { display: flex; gap: .5rem; margin: 2rem 0 1rem; }
nav button { border: 1px solid #b7a891; border-radius: 99px; padding: .55rem 1rem; background: transparent; cursor: pointer; }
nav button[aria-pressed="true"] { color: white; border-color: #694637; background: #694637; }
.player { position: sticky; z-index: 2; top: 0; padding: 1rem; border-radius: .7rem; color: white; background: #29251f; box-shadow: 0 8px 22px #29251f33; }
.player div { display: flex; justify-content: space-between; margin-bottom: .55rem; font-family: system-ui, sans-serif; font-size: .85rem; }
.player label { font: .78rem system-ui, sans-serif; }
.options { align-items: center; gap: 1rem; margin-top: .6rem; }
.options label:last-child { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.options input[type="range"] { width: 8rem; }
audio { display: block; width: 100%; height: 40px; }
.hint { margin: 1rem 0 2rem; font-size: .85rem; }
#transcript { font-size: clamp(1.08rem, 2vw, 1.28rem); line-height: 1.9; }
#transcript p { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .8rem; margin: 0 0 1.4rem; }
.speaker { margin-right: .25rem; color: #694637; font: 700 .75em system-ui, sans-serif; }
button.word, button.stamp { appearance: none; border: 0; padding: 0; font: inherit; color: inherit; background: transparent; cursor: pointer; }
button.word:hover, button.word:focus-visible { color: #994c2d; background: #f3dfcf; outline: none; }
button.word.active { color: #fff; background: #a75231; border-radius: .15em; }
button.word.unsure { text-decoration: underline dotted #b27052; text-underline-offset: .2em; }
button.stamp { margin-top: .35rem; color: #9b654d; font: 600 .72rem/1.4 system-ui, sans-serif; text-align: left; }
@media (max-width: 560px) { main { padding-top: 1.5rem; } .options { align-items: flex-start; flex-direction: column; } .options label:last-child { margin-left: 0; } #transcript { line-height: 1.75; } #transcript p { grid-template-columns: 3.2rem minmax(0, 1fr); gap: .5rem; } }