/* Transparent composition, with the website's own dark surface showing through. */
.teacher-art-observer[data-teacher-film]{aspect-ratio:16/9}
.teacher-art[data-teacher-film] video,.teacher-art[data-teacher-film] img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* Keep alpha video on its own compositing layer through clipping, resizing and replay. */
.teacher-art[data-teacher-film] video{opacity:0;transform:translateZ(0);backface-visibility:hidden}
.teacher-art[data-teacher-film][data-started=true] video{opacity:1}
.teacher-art[data-teacher-film][data-started=true] img{opacity:0}
[data-teacher-film-card]:focus-visible{outline:2px solid #a9a5c9;outline-offset:5px}

/* Match course-making geometry while retaining teacher colors and lighting. */
#teacher-followup{padding-inline:32px}
#teacher-followup .teacher-inner{max-width:1320px}
#teacher-followup .teacher-three-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
#teacher-followup .teacher-three-grid .teacher-hero{border-radius:0}
#teacher-followup .teacher-three-grid .teacher-hero::after{display:none}
#teacher-followup .teacher-three-grid .teacher-art{aspect-ratio:3/2}
#teacher-followup .teacher-caption{padding:28px 28px 32px}
#teacher-followup .teacher-phrase{display:block}
@media(max-width:1023px){
 #teacher-followup .teacher-three-grid{grid-template-columns:minmax(0,1fr)}
 #teacher-followup .teacher-cell+.teacher-cell{border-left:0;border-top:1px solid var(--teacher-line)}
}
@media(min-width:768px) and (max-width:1023px){
 #teacher-followup .teacher-cell{display:grid;grid-template-columns:1fr 1fr;align-items:center}
}
@media(max-width:767px){
 #teacher-followup{padding-inline:24px}
 #teacher-followup .teacher-three-grid{gap:28px;border:0;border-radius:0;overflow:visible}
 #teacher-followup .teacher-three-grid .teacher-cell{border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;background:var(--teacher-bg)}
 #teacher-followup .teacher-caption{padding:22px 24px 26px}
}
@media(max-width:359px){#teacher-followup .teacher-caption{padding-inline:20px}}

/* T2 shares the first card's soft white light; the floating window stays transparent outside. */
#teacher-followup .teacher-art-agent[data-teacher-film]{background:linear-gradient(180deg,transparent 75%,var(--teacher-bg)),url('assets/linear-collaboration-background.png') center/cover no-repeat}

/* T3 carries the exact website background in the exported template video. */
#teacher-followup .teacher-art-next[data-teacher-film]{background:var(--teacher-bg)}
#teacher-followup .teacher-art-next[data-teacher-film] video,
#teacher-followup .teacher-art-next[data-teacher-film] img{object-position:center top}