/* Learning sessions played from YouTube (robotics, world models): the sharp deck slide on the stage,
   the speaker's camera beside the transcript, and the recording itself on the stage while a clip plays.
   One YouTube iframe does all of it: video-session.js crops it to the camera tile or to the slide area
   and moves it between the two. The dark band carries its own tokens (dark in both themes). */
.stamp { margin: 12px 0 0; }
.lede { margin: 16px 0 0; max-width: 64ch; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.lede a { color: var(--orange-tx); }

.band { --muted: #9aa0aa; --faint: #8b919c; --text: #c4c8d0; --ink: #f3f4f6; --orange-dk: #fb923c;
  background: var(--band); color: #e5e7eb; margin: 0 calc(50% - 50vw) 40px; padding: 40px calc(50vw - 50%) 36px; }
.band .two { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 12px; align-items: stretch; }
.band .stage { grid-column: 2 / span 7; min-width: 0; }
.band .txc { grid-column: 9 / span 4; min-width: 0; padding-left: 28px; border-left: 1px solid var(--band-line); display: flex; flex-direction: column; min-height: 0; }

/* Stage */
.stage-img { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.stage-img > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.stage-img.vid > img { opacity: 0; }
.stage-img .counter { position: absolute; z-index: 3; right: 10px; bottom: 10px; padding: 4px 8px; background: #f4f4f5; color: #111318; font-size: 12px; font-variant-numeric: tabular-nums; }
.live { position: absolute; z-index: 3; left: 10px; top: 10px; display: none; align-items: center; gap: 8px; padding: 5px 9px; background: rgba(11,13,17,.82); color: #f4f4f5; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.live::before { content: ''; width: 7px; height: 7px; background: var(--orange); border-radius: 50%; animation: vs-blink 1.2s steps(2, start) infinite; }
.stage-img.vid .live { display: inline-flex; }
@keyframes vs-blink { to { visibility: hidden; } }
.nav { position: absolute; z-index: 3; top: 50%; width: 40px; height: 48px; margin-top: -24px; display: flex; align-items: center; justify-content: center; background: rgba(17,19,24,0.7); color: #f4f4f5; opacity: 0; transition: opacity .15s; }
.stage-img:hover .nav, .nav:focus-visible { opacity: 1; }
.nav:hover { color: var(--orange); }
.nav.prev { left: 0; } .nav.next { right: 0; }
.pip { display: none; position: absolute; z-index: 1; right: 8px; bottom: 8px; width: 32%; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.pip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide-title { margin: 14px 0 0; min-height: 2.6em; font-size: 13.5px; line-height: 1.3; text-transform: uppercase; color: var(--faint); }
.slide-title .sn { color: var(--orange); font-weight: 700; margin-right: 10px; }
.slide-title .sk { color: var(--muted); text-transform: none; font-family: var(--sans); }

/* The cropped YouTube player: absolutely placed over the camera box or the stage */
.yt { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; overflow: hidden; background: #000; opacity: 0; pointer-events: none;
  transition: left .5s cubic-bezier(.2,.7,.2,1), top .5s cubic-bezier(.2,.7,.2,1), width .5s cubic-bezier(.2,.7,.2,1), height .5s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.yt.on { opacity: 1; }
.yt iframe, .yt > div { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.yt.tap { pointer-events: auto; cursor: pointer; outline: 2px solid var(--orange); outline-offset: -2px; }
.yt.tap iframe { pointer-events: auto; }
.yt.instant, .yt.instant iframe { transition: none; }

/* Player */
.player { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.play { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--orange); color: #fff; }
.play:hover { background: var(--orange-dk); }
.play .ic-pause { display: none; }
.player.playing .play .ic-play { display: none; }
.player.playing .play .ic-pause { display: block; }
.track { position: relative; flex: 1 1 auto; height: 44px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.bar { position: relative; width: 100%; height: 3px; background: var(--band-line); }
.fill { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--orange); }
.tick { position: absolute; top: -4px; width: 1px; height: 11px; background: #3a3f4a; }
.tick.on { background: var(--orange); width: 2px; }
.cgap { position: absolute; z-index: 1; top: 0; width: 4px; height: 3px; margin-left: -2px; background: var(--band); }
.knob { position: absolute; z-index: 2; top: -5px; left: 0; width: 13px; height: 13px; margin-left: -6px; background: var(--band); border: 2px solid var(--orange); }
.time { flex: none; font-size: 13px; color: #e5e7eb; white-space: nowrap; font-variant-numeric: tabular-nums; }
.time span { color: var(--muted); }
.speed { flex: none; padding: 6px 10px; font-size: 12.5px; border: 1px solid var(--band-line); color: var(--faint); min-width: 44px; text-align: center; }
.speed:hover { color: var(--orange); border-color: var(--orange); }
.band .note { margin: 12px 0 0; padding: 0; border: 0; background: none; font-family: var(--sans); font-size: 14px; color: var(--muted); display: none; }
.band .note a { color: var(--orange); }

/* Chapters: a segmented progress bar you can click */
.chaps { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; margin-top: 16px; }
.chap { position: relative; padding: 10px 6px 4px 0; text-align: left; font-size: 11.5px; line-height: 1.35; text-transform: uppercase; color: var(--faint); border-top: 2px solid var(--band-line); }
.chap b { display: block; margin-bottom: 3px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.chap i { position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--orange); }
.chap:hover, .chap.on { color: #f4f4f5; }
.chap.on b { color: var(--orange); }

/* Slide strip: one scrolling row */
.strip { display: flex; gap: 6px; margin-top: 14px; padding-bottom: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--band-line) transparent; }
.thumb { position: relative; flex: none; width: 88px; aspect-ratio: 16 / 9; overflow: hidden; opacity: 0.5; background: #000; transition: opacity .15s; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: 0.9; }
.thumb.on { opacity: 1; outline: 2px solid var(--orange); outline-offset: -2px; }
.thumb.skip { opacity: .28; }
.thumb.skip:hover, .thumb.skip.on { opacity: .9; }
.thumb .cn { position: absolute; left: 0; top: 0; padding: 1px 5px; font-size: 10px; font-weight: 700; background: var(--orange); color: #111318; }
.hint { margin: 10px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Camera + transcript column */
.cam { position: relative; flex: none; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 20px; background: #000; overflow: hidden; }
.cam > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cam .hit { position: absolute; inset: 0; z-index: 1; }
.cam .away { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; gap: 8px; background: rgba(11,13,17,.74); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #e5e7eb; pointer-events: none; }
.two.vid .cam .away { display: flex; }
.cam .who { position: absolute; z-index: 3; right: 8px; top: 8px; padding: 3px 7px; background: rgba(11,13,17,.82); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #e5e7eb; pointer-events: none; }
.cam .who::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: #4b5563; }
.two.playing .cam .who::before { background: var(--orange); animation: vs-blink 1.2s steps(2, start) infinite; }
.txh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; font-size: 13.5px; text-transform: uppercase; color: #e5e7eb; }
.txh .sub-l { color: var(--muted); text-transform: none; }
.txh button { font-size: 12.5px; text-transform: uppercase; color: var(--orange); }
.tx-wrap { position: relative; flex: 1 1 auto; min-height: 200px; }
.tx { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 6px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--band-line) transparent; }
.tx-wrap .fade { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(17,19,24,0), var(--band)); }
.tx .line { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 10px; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: #b4b9c2; text-align: left; text-wrap: pretty; cursor: pointer; }
.tx .line .t { font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.tx .line:hover { color: #f4f4f5; }
.tx .line.on { color: #ffffff; } .tx .line.on .t { color: var(--orange); }
.tx .line.past { color: #7d8490; }
.tx .line .q { display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--orange); }
.tx .line.aside > span:last-child { font-style: italic; }
.tx .line.aside .q { font-style: normal; }

/* Below the band */
.verdicts .cell .tag { display: inline-block; margin-bottom: 16px; padding: 3px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--orange); color: var(--on-orange); }
.verdicts .cell .tag.trend { background: none; color: var(--orange-tx); box-shadow: inset 0 0 0 1px var(--orange); }
.verdicts .cell .h3 { padding-right: 0; }
.verdicts .cell p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); }
.verdicts .cell .jump { margin-top: 16px; font-size: 12.5px; text-transform: uppercase; color: var(--orange-tx); }
.verdicts .cell .jump:hover { color: var(--orange-dk); }
.dl { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.nx { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; align-items: center; }
.nx img { grid-column: span 1; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); }
.nx .nt { grid-column: span 6; }
.nx .nt a { display: block; font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.nx .cta { grid-column: span 3; justify-self: end; }

@media (max-width: 1100px) {
  .band .stage { grid-column: 1 / span 8; }
  .band .txc { grid-column: 9 / span 4; padding-left: 20px; }
  .verdicts.cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .h1 { font-size: 22px !important; }
  .band { padding: 24px var(--pad-x) 28px; }
  .band .two { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .band .stage, .band .txc { grid-column: auto; }
  .band .txc { border-left: 0; border-top: 1px solid var(--band-line); padding-left: 0; padding-top: 24px; }
  .cam { display: none; }
  .pip { display: block; }
  .stage-img .counter { right: auto; left: 8px; bottom: 8px; }
  .tx { position: static; max-height: 420px; }
  .tx-wrap.open .tx { max-height: none; overflow: visible; }
  .tx-wrap.open .fade { display: none; }
  .nav { opacity: 1; }
  .speed, .hint { display: none; }
  .chaps { overflow-x: auto; grid-auto-columns: minmax(104px, 1fr); }
  .thumb { width: 72px; }
  .verdicts.cells { grid-template-columns: 1fr; }
  .nx { grid-template-columns: 1fr; }
  .nx img { max-width: 120px; }
  .nx .nt, .nx .cta { grid-column: auto; justify-self: start; }
}
@media (min-width: 801px) { #tx-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .yt, .yt iframe, .stage-img > img { transition: none; }
  .live::before, .two.playing .cam .who::before { animation: none; }
}