/* Paired teaching previews: one readable frame system, separate learning formats. */
.format-teasers { margin-top:40px; padding-top:40px; border-top:1px solid var(--merak-warm-border); }
.format-teasers__heading { text-align:center; }
.format-teasers__heading h3 { margin:0; font:500 clamp(30px,3vw,38px)/1.16 Newsreader,Georgia,serif; letter-spacing:-.4px; }
.format-teasers__heading p { max-width:660px; margin:12px auto 0; color:var(--merak-text-secondary); font-size:17px; line-height:1.6; }
.format-teasers__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin-top:30px; align-items:start; }
.format-teaser { display:grid; grid-template-rows:subgrid; grid-row:span 4; min-width:0; overflow:hidden; background:var(--merak-card-surface); border:1px solid var(--merak-warm-border); border-radius:22px; }
.format-teaser__top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 26px; }
.format-teaser__name { margin:0; font:500 27px/1.15 Newsreader,Georgia,serif; color:var(--merak-text-primary); }
.format-teaser__status { flex:none; padding:6px 11px; border:1px solid var(--merak-action-primary); border-radius:999px; color:var(--merak-action-primary); font-size:13px; font-weight:800; line-height:1.3; letter-spacing:.035em; text-transform:uppercase; }
.format-preview { min-width:0; margin:0 14px; padding:24px; border-radius:16px; background:var(--merak-deep-ink); color:var(--merak-cream); overflow-wrap:break-word; }
.preview-session { height:760px; display:flex; flex-direction:column; gap:0; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.format-preview__label { max-width:240px; color:var(--merak-ink-accent); font-size:13px; font-weight:700; line-height:1.45; letter-spacing:.04em; text-transform:uppercase; }
.preview-toggle[hidden], .teaching-message[hidden], .teaching-scene[hidden], .preview-typing[hidden] { display:none; }
.preview-toggle:focus-visible,.preview-window:focus-visible,.preview-transcript summary:focus-visible { outline:2px solid var(--merak-proof-gold); outline-offset:4px; }
.preview-question { margin:19px 0 0; color:var(--merak-cream); font:500 clamp(25px,2.4vw,31px)/1.17 Newsreader,Georgia,serif; letter-spacing:-.25px; }
.preview-context { min-height:72px; margin:16px 0 18px; padding:10px 0 12px; border-block:1px solid color-mix(in srgb,var(--merak-cream) 16%,transparent); font-size:16px; line-height:1.45; }
.preview-context span { display:block; margin-bottom:5px; color:var(--merak-ink-accent); font-size:13px; font-weight:700; }
.preview-window { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--merak-cream) 25%,transparent) transparent; }
.conversation-window { padding:2px 8px 8px 1px; }
.teaching-conversation { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.teaching-message { max-width:94%; padding:14px 15px; border:1px solid color-mix(in srgb,var(--merak-cream) 20%,transparent); border-radius:14px 14px 14px 3px; background:color-mix(in srgb,var(--merak-cream) 4%,transparent); }
.teaching-message--learner { justify-self:end; max-width:83%; border-color:color-mix(in srgb,var(--merak-proof-gold) 22%,transparent); border-radius:14px 14px 3px 14px; background:color-mix(in srgb,var(--merak-proof-gold) 8%,transparent); }
.teaching-message__speaker { display:block; margin-bottom:6px; color:var(--merak-ink-accent); font-size:13px; font-weight:800; }
.teaching-message--learner .teaching-message__speaker { color:var(--merak-proof-gold); }
.teaching-message p { margin:0; color:var(--merak-cream); font-size:17px; line-height:1.5; }
.preview-typing { justify-self:start; padding:12px 16px; border:1px solid color-mix(in srgb,var(--merak-cream) 20%,transparent); border-radius:14px 14px 14px 3px; background:color-mix(in srgb,var(--merak-cream) 4%,transparent); }
.preview-typing .teaching-message__speaker { margin-bottom:8px; }
.preview-typing__dots { display:flex; align-items:center; gap:5px; height:12px; padding-inline:1px; }
.preview-typing__dots span { width:6px; height:6px; border-radius:50%; background:var(--merak-cream); opacity:.45; }
.preview-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:7px 12px; min-height:36px; margin-top:14px; padding-top:12px; border-top:1px solid color-mix(in srgb,var(--merak-cream) 16%,transparent); }
.preview-progress,.preview-kind { margin:0; color:color-mix(in srgb,var(--merak-cream) 72%,transparent); font-size:13px; line-height:1.4; }
.teaching-scene { padding:5px 0 16px; }
.teaching-scene + .teaching-scene { border-top:1px solid color-mix(in srgb,var(--merak-cream) 18%,transparent); padding-top:20px; }
.preview-session.is-enhanced .teaching-scene { border-top:0; padding-top:4px; }
.teaching-scene__number { margin:0 0 6px; color:var(--merak-proof-gold); font-size:13px; font-weight:800; letter-spacing:.05em; }
.teaching-scene h6 { margin:0; color:var(--merak-cream); font:500 26px/1.2 Newsreader,Georgia,serif; }
.scene-comparison { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; color:var(--merak-cream); font-size:15px; text-align:center; line-height:1.4; }
.teaching-scene__caption { margin:8px 0 0; color:var(--merak-cream); font-size:16px; line-height:1.45; }
.teaching-diagram { display:block; width:100%; max-height:200px; margin:5px 0; overflow:hidden; }
.teaching-diagram text { fill:var(--merak-cream); font:16px "Hanken Grotesk",sans-serif; }
.diagram-planet { fill:color-mix(in srgb,var(--merak-cream) 6%,transparent); stroke:color-mix(in srgb,var(--merak-cream) 60%,transparent); stroke-width:1.5; }
.diagram-latitude { fill:none; stroke:color-mix(in srgb,var(--merak-cream) 20%,transparent); stroke-width:1; }
.diagram-station { fill:var(--merak-proof-gold); stroke:var(--merak-proof-gold); stroke-width:2; }
.diagram-force { fill:none; stroke:var(--merak-proof-gold); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.diagram-motion,.diagram-ground { fill:none; stroke:var(--merak-cream); stroke-width:2; stroke-linecap:round; }
.diagram-cabin { fill:none; stroke:color-mix(in srgb,var(--merak-cream) 50%,transparent); stroke-width:2; }
.diagram-person { fill:none; stroke:var(--merak-cream); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.diagram-person circle { fill:color-mix(in srgb,var(--merak-cream) 8%,transparent); }
.diagram-ball { fill:var(--merak-proof-gold); }
.diagram-orbit { fill:none; stroke:color-mix(in srgb,var(--merak-cream) 24%,transparent); stroke-width:1.5; stroke-dasharray:3 7; }
.diagram-moon { fill:color-mix(in srgb,var(--merak-cream) 12%,transparent); stroke:color-mix(in srgb,var(--merak-cream) 65%,transparent); stroke-width:1.5; }
.diagram-divider { stroke:color-mix(in srgb,var(--merak-cream) 20%,transparent); stroke-width:1; }
.format-teaser__copy { padding:25px 26px 28px; }
.format-teaser__copy h5 { margin:0; font:500 27px/1.2 Newsreader,Georgia,serif; color:var(--merak-text-primary); }
.format-teaser__copy p { margin:12px 0 0; color:var(--merak-text-secondary); font-size:16px; line-height:1.6; }
.preview-transcript { margin-top:18px; color:var(--merak-text-body); font-size:16px; line-height:1.6; }
.preview-transcript summary { min-height:44px; padding-block:10px; color:var(--merak-action-primary); cursor:pointer; font-weight:700; text-underline-offset:4px; }
.preview-transcript[open] summary { margin-bottom:10px; }
.preview-transcript p { color:var(--merak-text-body); }
.format-teasers__foot { margin:22px auto 0; max-width:760px; text-align:center; color:var(--merak-text-secondary); font-size:15px; line-height:1.6; }
.format-teasers__link { display:inline-block; margin-top:8px; color:var(--merak-action-primary); font-weight:700; text-underline-offset:4px; }
.preview-sources { display:inline-block; margin-top:8px; }
.preview-sources a { color:var(--merak-text-body); text-underline-offset:3px; }
@media (prefers-reduced-motion:no-preference) {
 .teaching-message.is-arriving { animation:message-arrive .35s ease-out both; }
 .preview-typing__dots span { animation:typing-dot 1.05s ease-in-out infinite; animation-play-state:paused; }
 .preview-typing__dots span:nth-child(2) { animation-delay:.14s; }
 .preview-typing__dots span:nth-child(3) { animation-delay:.28s; }
 .preview-session.is-playing .preview-typing__dots span { animation-play-state:running; }
 .preview-session.is-enhanced .orbiting-station { transform-origin:220px 145px; animation:station-orbit 12s linear infinite; animation-play-state:paused; }
 .preview-session.is-enhanced .falling-cabin { animation:shared-fall 3.4s ease-in-out infinite alternate; animation-play-state:paused; }
 .preview-session.is-playing .orbiting-station, .preview-session.is-playing .falling-cabin { animation-play-state:running; }
 @keyframes message-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
 @keyframes typing-dot { 0%,70%,100% { opacity:.45; transform:translateY(0); } 35% { opacity:1; transform:translateY(-3px); } }
 @keyframes station-orbit { to { transform:rotate(360deg); } }
 @keyframes shared-fall { from { transform:translateY(-9px); } to { transform:translateY(9px); } }
}
@media (max-width:900px) {
 .format-teasers__grid { grid-template-columns:1fr; gap:20px; }
 .format-teaser { grid-template-rows:auto auto auto auto; grid-row:auto; }
 .format-teaser__top { padding:20px; }
 .format-preview { margin:0 10px; padding:22px 18px; }
 .preview-session { height:760px; }
 .format-teaser__copy { padding:23px 20px 25px; }
 .format-teaser__copy h5 { font-size:25px; }
 .teaching-diagram { max-height:200px; }
}
@media (max-width:380px) {
 .format-teaser__top { align-items:flex-start; flex-direction:column; }
 .preview-session { height:800px; }
 .format-preview__label { font-size:12px; }
  .teaching-message p { font-size:16px; }
 .teaching-scene h6 { font-size:24px; }
 .teaching-diagram text { font-size:17px; }
}
@supports not (grid-template-rows:subgrid) { .format-teaser { display:flex; flex-direction:column; } }

/* One transport below every visual; shared avatar button styling. */
.teaching-playback { padding:0 22px; margin:18px 0 0; align-self:start; }
.teaching-playback[hidden] { display:none; }
.teaching-playback .preview-progress { margin:0; min-height:22px; color:var(--merak-text-secondary); font-size:14px; line-height:1.5; text-align:center; }
.teaching-playback .preview-toggle:focus-visible { outline:3px solid var(--merak-proof-gold); outline-offset:3px; }
.preview-toolbar { justify-content:flex-start; }