:root{font-family:"DM Sans","Noto Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;color:#f4fbff;background:#05080a;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{min-height:44px;border:1px solid #34404b;border-radius:10px;background:#101820;color:#edf5f8;padding:10px 15px;font-weight:700;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,scale .18s ease}button:hover{background:#18242d;border-color:#b88d43}button:active{scale:.96}button:disabled{opacity:.4;cursor:not-allowed;scale:1}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:14px max(20px,calc((100vw - 1120px)/2));border-bottom:1px solid #1c2730;background:#080d11}.brand{display:inline-flex;align-items:center;gap:9px;color:#e7bb69;font-weight:900;letter-spacing:.12em;text-decoration:none}.brand img{display:block;object-fit:contain}.back-link{color:#bed0d9;text-decoration:none;font-weight:650}.back-link:hover{color:#f2d390}main{max-width:1120px;margin:0 auto;padding:32px 20px 70px}.page-heading{margin-bottom:22px}.eyebrow{color:#d2aa5c;font-size:.72rem;font-weight:850;letter-spacing:.14em;margin:0 0 8px}.page-heading h1{font-size:clamp(1.55rem,3vw,2.5rem);line-height:1.15;margin:0;text-wrap:balance}.page-heading>p:last-child{color:#a2b7c1;margin:10px 0 0;text-wrap:pretty}#status{color:#abc0cb;min-height:1.5em;margin:0 0 15px}.player-card{padding:8px;border-radius:20px;background:#0e151b;box-shadow:0 0 0 1px #24333e,0 20px 50px #0007}video{display:block;width:100%;aspect-ratio:16/9;max-height:70vh;border-radius:13px;background:#000}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:18px 0 12px}.controls .primary,#downloadChapter{border-color:#d2aa5c;background:#d2aa5c;color:#101820}.controls .primary:hover,#downloadChapter:hover{background:#f2d390}.controls span{margin-left:auto;color:#d7e3e8;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.9rem}#timeline{display:block;width:100%;min-height:44px;accent-color:#d2aa5c;cursor:pointer}.question-heading{margin:21px 0 12px}.question-heading h2{margin:0;font-size:1.2rem;line-height:1.4;text-wrap:balance}.question-list{display:grid;gap:9px}.question-list button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;font-weight:600;min-height:54px}.question-list button.active{background:#21303a;border-color:#d2aa5c;box-shadow:0 0 0 1px #d2aa5c55}.question-list small{display:inline-flex;align-items:center;flex:0 0 auto;color:#f2d390;font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}@media(max-width:700px){main{padding:24px 12px 48px}.topbar{padding:12px 14px}.controls button{flex:1 1 145px}.controls span{order:5;flex:1 1 100%;margin:2px 0 0;text-align:center}.question-list button{align-items:flex-start;flex-direction:column;gap:4px}.player-card{padding:5px;border-radius:15px}video{border-radius:10px}}

#downloadChapter{margin-left:auto}
@media(max-width:700px){.controls button{min-height:48px;touch-action:manipulation}.controls #downloadChapter{margin-left:0;flex-basis:100%}}

/* The explanations list has a fixed height and scrolls. Each button has a
   min-height, so auto grid rows could shrink to that minimum and let long
   question text spill over the next button; size rows to their content. */
body.video-page .question-list { grid-auto-rows: max-content; align-content: start; }
body.video-page .question-list button { height: auto; }

/* Laptop and desktop (precise pointer): the whole page fits one screen with no
   page scroll. The video scales to the space left by the heading and controls,
   and the explanations list scrolls inside its own panel. Tablets and phones
   keep the normal scrolling layout above. The body.video-page prefix outranks
   video-theme.css, which loads after this file. */
@media (min-width: 1024px) and (min-height: 560px) and (hover: hover) and (pointer: fine) {
  html, body.video-page { height: 100%; overflow: hidden; }
  body.video-page { display: flex; flex-direction: column; }
  body.video-page .topbar { flex: none; min-height: 0; padding: calc(10px + var(--video-safe-top, 0px)) clamp(20px, 2.4vw, 40px) 10px; }
  body.video-page main { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 14px clamp(20px, 2.4vw, 40px) 16px; display: flex; flex-direction: column; }
  body.video-page .page-heading { flex: none; display: flex; align-items: baseline; gap: 14px; min-width: 0; max-width: none; margin: 0 0 12px; }
  body.video-page .page-heading .eyebrow { flex: none; margin: 0; }
  body.video-page .page-heading h1 { min-width: 0; font-size: clamp(1.2rem, 1.55vw, 1.6rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.video-page .page-heading > p:last-child { display: none; }
  body.video-page #status { flex: none; margin: 0 0 10px; min-height: 0; }
  body.video-page .chapter-layout { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 400px); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 20px; }
  body.video-page .chapter-main { display: flex; flex-direction: column; min-height: 0; }
  body.video-page .player-card { flex: 1; min-height: 0; padding: 0; background: none; box-shadow: none; container-type: size; display: grid; place-items: center; }
  body.video-page .player-card .sirius-video-player { width: min(100cqw, calc(100cqh * 16 / 9)); box-shadow: 0 0 0 1px #4a3b24, 0 18px 40px #0004; }
  body.video-page .controls { flex: none; margin: 12px 0 0; }
  body.video-page .question-heading { flex: none; margin: 10px 0 0; padding-top: 10px; }
  body.video-page .question-heading .eyebrow { display: none; }
  body.video-page .question-heading h2 { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.video-page .chapter-outline { height: 100%; max-height: none; }
}