/* fit.css: one-screen lesson layout. The recording and its steps sit side by side
   and fill the window, so you can read the steps while the clip plays. */
html,body{overflow-x:hidden}
.fit-page{width:auto!important;min-height:0!important}
.fit-stage{height:100vh;display:flex;flex-direction:column;box-sizing:border-box;padding:0 32px 14px}
.fit-stage>.fit-top{margin:0!important;padding:10px 0 8px!important;font-size:11px!important}
.fit-hero{margin:0!important;padding:10px 0 12px!important;gap:18px!important;align-items:center!important}
.fit-hero>div[aria-hidden]{font-size:clamp(44px,7vh,72px)!important;line-height:.85!important}
.fit-hero>div:last-child{gap:6px!important;padding:0!important}
.fit-hero h1{font-size:clamp(24px,4.2vh,38px)!important;line-height:1!important}
.fit-hero p{font-size:14px!important;margin:0!important;max-width:none!important}
.fit-body{flex:1 1 auto;min-height:0;display:flex;gap:28px}
.fit-clip{flex:1 1 auto;min-width:0;min-height:0;display:flex}
.fit-clip figure{flex:1 1 auto;min-width:0;min-height:0;margin:0!important;display:flex!important;flex-direction:column;gap:8px!important;width:auto!important}
.fit-clip button{flex:1 1 auto;min-height:0;width:100%!important;height:auto!important;outline:0!important;background:transparent!important;padding:0!important;border:0!important}
.fit-clip button img,.fit-clip figure>img{width:100%!important;height:100%!important;min-height:0;object-fit:contain;object-position:left top}
.fit-clip figure>img{flex:1 1 auto}
.fit-clip figcaption,.fit-clip figure>p{flex:none}
.fit-steps{flex:0 0 clamp(300px,27vw,440px);min-height:0;overflow-y:auto;padding-right:4px}
.fit-steps{overflow-x:hidden}
.fit-steps>*{width:auto!important;margin:0!important}
.fit-steps *{max-width:100%;box-sizing:border-box}
.fit-steps img{height:auto!important}
.fit-steps span[style*="font-size: 18px"]{font-size:16px!important;line-height:1.45!important}
.fit-steps div[style*="padding: 14px 0"]{padding:10px 0!important}
.fit-steps{display:flex;flex-direction:column;gap:18px}
.fit-cap{flex-direction:column!important;gap:6px!important;margin:0!important}
.fit-cap p{flex-direction:column;gap:4px!important}
.fit-stage>.fit-foot{margin:12px 0 0!important;padding:8px 0 0!important;flex:none}
.fit-foot span[style*="font-size: 32px"]{font-size:22px!important}
/* clip takes exactly the height available and its natural width; steps get the rest */
.fit-clip{flex:0 1 auto!important}
.fit-clip figure{width:auto!important}
.fit-clip button{height:100%!important;width:auto!important;aspect-ratio:1568/726;max-width:100%}
.fit-steps{flex:1 1 260px!important;min-width:260px}
.fit-steps>*{flex:none!important}
.fit-extra,.fit-extra *{max-width:100%!important;min-width:0!important;box-sizing:border-box}
.fit-extra{flex:none;padding-left:0!important;padding-right:0!important}
.fit-extra [style*="display: flex"]{flex-wrap:wrap}
.fit-extra [style*="height:"]:has(>img){height:auto!important;width:100%!important}
.fit-extra img{position:static!important;width:100%!important;height:auto!important}
.fit-extra [style*="position: absolute"]:not(img){display:none}
.fit-more{flex:none;margin-top:6px;padding-top:10px;border-top:1.5px solid #15191E;font:500 11px/1.3 'IBM Plex Mono',ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#55595F}
.fit-clip button img{object-position:left top}
.fit-rest{padding:0 32px}
.fit-rest>*{margin-left:0!important;margin-right:0!important}
.fit-rest img,.fit-rest [style*="width: 1312px"]{max-width:100%}
@media (max-width:900px){
  .fit-stage{height:auto}
  .fit-body{flex-direction:column}
  .fit-steps{flex:none}
}