@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root { color-scheme: light; font-family: "DM Sans", system-ui, sans-serif; color: #172d29; background: #f5f6ef; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.brand { padding: 1.2rem max(5vw, 1rem); display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid #d2dace; }
.brand strong { font-size: 1.15rem; letter-spacing: -.03em; }
.brand span { font-size: .75rem; color: white; background: #285c50; padding: .18rem .52rem; border-radius: 3px; }
main { width: min(90vw, 1240px); margin: 2rem auto 3rem; }
h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 0 0 1.35rem; letter-spacing: -.045em; }
h2, h3, p { margin: 0; }
h2 { font-size: 1.1rem; } h3 { font-size: 1rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.player, .transcript, #resources { background: #fff; border: 1px solid #d3dcd1; border-radius: 12px; overflow: hidden; }
#video { aspect-ratio: 16 / 9; background: #162420; }
video, iframe { width: 100%; height: 100%; display: block; border: 0; }
#player-error { padding: .8rem 1rem; color: #8c302b; }
#captions { padding: 1rem 1.15rem; min-height: 6.6rem; font-size: 1rem; }
#source { font-weight: 700; }
#translation { color: #495e55; margin-top: .45rem; }
.transcript header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid #dbe4d9; }
#languages { color: #495e55; font-size: .82rem; }
.sentence-controls { display: flex; flex-wrap: wrap; gap: .35rem .55rem; padding: .45rem 1rem; border-bottom: 1px solid #e3e9e0; }
.sentence-controls button { min-height: 2.5rem; border: 0; background: transparent; color: #285c50; padding: .35rem .4rem; font: inherit; font-size: .85rem; cursor: pointer; }
.sentence-controls button:disabled { opacity: .48; cursor: default; }
.sentence-controls button:not(:disabled):hover { background: #f2f6ef; border-radius: 4px; }
#lines { padding: 0; margin: 0; list-style: none; max-height: clamp(20rem, 55vh, 38rem); overflow: auto; }
#lines li + li { border-top: 1px solid #e3e9e0; }
.line { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .55rem; width: 100%; padding: .9rem 1rem; text-align: start; border: 0; border-inline-start: 3px solid transparent; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.line:disabled { cursor: default; }
.line:not(:disabled):hover { background: #f2f6ef; }
.line[aria-current="true"] { background: #e4f1e8; border-inline-start-color: #285c50; }
.time { color: #3c665a; font-size: .83rem; font-variant-numeric: tabular-nums; }
.line strong, .translated { display: block; white-space: pre-line; overflow-wrap: anywhere; }
.translated { padding-top: .35rem; color: #495e55; }
#resources { margin-top: 1.25rem; padding: 1rem 1.15rem; }
#books { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; list-style: none; padding: 0; }
a { color: #285c50; text-underline-offset: .2em; }
audio { margin-top: .5rem; width: min(100%, 36rem); }
:focus-visible { outline: 2px solid #285c50; outline-offset: -2px; }
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  main { width: min(94vw, 680px); margin-top: 1.3rem; }
  #lines { max-height: 48vh; }
}