:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#19392f;background:#f4f0e7}
*{box-sizing:border-box}
body{margin:0}
main{max-width:850px;margin:auto;padding:24px 16px 70px}
a{color:#246d58}
header{margin:30px 0}
h1{font-size:clamp(1.7rem,5vw,2.6rem);margin:10px 0}
p{line-height:1.7}
.eyebrow{font-size:.75rem;letter-spacing:.15em;color:#6c7b73}
section{background:#fffdfa;border:1px solid #d8e3dc;border-radius:18px;padding:22px;margin:18px 0}
button{font:inherit;font-weight:650;color:#245c49;background:#e6eeea;border:1px solid #cbded3;border-radius:12px;min-height:54px;padding:12px 18px;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd763b;outline-offset:3px}
.primary{background:#28705a;color:white}
.nav,.practice-actions,.secondary-actions{display:flex;gap:10px;align-items:center}
.nav{justify-content:space-between}
.nav span{font-size:.9rem;text-align:center}
.practice-actions{flex-wrap:wrap}
.practice-actions button{flex:1 1 42%}
.secondary-actions{margin-top:10px}
.secondary-actions button{flex:1}
#text{font-size:clamp(1.4rem,4.7vw,2rem);line-height:1.6;color:#182e26;margin:12px 0 20px}
#topic,#length,footer,details{font-size:.88rem;color:#68766e}
#topic{margin:16px 0 0}
#length{margin:12px 0 0}
#play-status,#record-status{font-size:.9rem;margin:8px 0;line-height:1.4}
#play-status:empty,#record-status:empty{display:none}
#stop:disabled{display:none}
.practice-actions:has(#stop:not(:disabled)) #record{display:none}
.recording-timeline{margin-top:8px}
.recording-timeline:has(audio[hidden]){display:none}
.recording-timeline summary{cursor:pointer}
audio{width:100%;margin:10px 0}
.source-link{margin-bottom:0}
button[hidden],audio[hidden]{display:none}
footer{margin-top:24px}
@media(max-width:600px){
  main{padding:10px 12px 50px}
  .home-link{font-size:.85rem}
  header{margin:12px 0}
  header .eyebrow,header>p:last-child{display:none}
  h1{font-size:1.2rem;margin:0}
  section{padding:14px;margin:12px 0}
  button{min-height:48px;padding:9px 10px}
  .nav button{min-height:42px}
  #topic{margin:10px 0 0}
  #text{font-size:clamp(1.35rem,5vw,1.7rem);line-height:1.45;margin:8px 0 14px}
  .practice-actions button{min-height:54px}
  #play-status,#record-status{font-size:.8rem;margin:5px 0}
  #length,.source-link{font-size:.8rem}
}