/* V2 product-style layout. Playback, reading pace and V1 stay unchanged. */
.animation-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"visual intro" "visual controls";column-gap:44px;row-gap:0;align-items:start;padding:0;background:transparent;border-radius:0;overflow:visible}
.animation-visual{grid-area:visual;min-width:0;margin:0;background:#fff;border-radius:28px;padding:14px 14px 20px;position:sticky;top:calc(var(--prototype-chrome-height,54px) + 90px)}
/* Crop only the empty side margins: all 944 checked frames fit inside 10–90% X.
   The full source height stays visible, including the upright spring flip. */
.animation-viewport{aspect-ratio:32/25;overflow:hidden;border-radius:16px;position:relative;background:#fff}
.animation-viewport video{position:relative;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.animation-card:is([data-state="playing"],[data-state="paused"],[data-state="held"]) .animation-viewport video{width:125%;left:-12.5%}
.animation-viewport #explode-video{position:absolute;top:0}
.animation-viewport video[hidden]{display:none}
/* Loading/error/no-JS keep native video controls fully inside the viewport. */
.adjust-intro{grid-area:intro;min-width:0;max-width:none;margin:0 0 8px;text-align:left}
.adjust-intro .marker-line{font-size:18px;line-height:1.5;margin-top:0}
.adjust-intro h1{font-size:clamp(38px,3.6vw,52px);line-height:1.06;margin:14px 0}
.adjust-intro .lede{font-size:18px;line-height:1.6;margin:0}
.adjust-controls{grid-area:controls;min-width:0}
.adjust-controls .feel-controls{margin:0}
.adjust-controls .feel-description{text-align:left;min-height:4.8em;margin:18px 0 4px}
.animation-visual .animation-step{align-items:flex-start;margin-top:-12px;margin-bottom:6px;position:relative}
.animation-visual .playback-controls{justify-content:center;flex-wrap:wrap;gap:10px 18px}
.playback-controls :is(#skip-layer,#explode-toggle){font-size:14px;font-weight:600;text-decoration:none;border:1px solid #b9d4e8;border-radius:10px;padding:8px 12px;background:#eef7fc}
.playback-controls :is(#skip-layer,#explode-toggle):disabled{background:transparent;border-color:#d9d8ce;font-weight:400}
.playback-controls :is(#skip-layer,#explode-toggle):focus-visible{outline:3px solid var(--blue-dark);outline-offset:3px}
.adjust-controls .media-status{text-align:left}
.animation-step{display:flex;justify-content:center;align-items:center;min-height:4.5em;margin:4px auto 14px;text-align:center;font-size:20px;font-weight:500;line-height:1.5;color:var(--blue-dark)}
.step-label{max-width:600px}
.exploded-layer-labels{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.animation-card:is([data-state="playing"],[data-state="paused"],[data-state="held"]) .exploded-layer-labels{width:125%;left:-12.5%}
.exploded-layer-labels[hidden]{display:none}
.exploded-layer-labels text{fill:#1e1e1e;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;font-family:Inter,system-ui,sans-serif}
.layer-label-title{font-size:16px;font-weight:600}
.layer-label-copy{font-size:13px;font-weight:400}
.exploded-layer-labels path{fill:none;stroke:#0857a6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.animation-card[data-mode="exploded"] .animation-step{min-height:0;font-size:12px;margin:10px auto 16px}
.feel-controls{max-width:780px;grid-template-columns:repeat(3,minmax(0,1fr))}
.feel-controls button{display:flex;flex-direction:column;gap:7px;align-items:stretch;justify-content:flex-start;padding:16px 12px}
.feel-title{display:block;font-size:16px;line-height:1.3;font-weight:600}
.feel-action{display:block;font-size:14px;line-height:1.45;font-weight:400;color:#56524e}
.feel-controls button[aria-pressed="true"] .feel-action{color:var(--blue-dark)}
@media(max-width:820px){
 .animation-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "visual" "controls";gap:0}
 .adjust-intro{text-align:center;margin-bottom:24px}
 .adjust-intro h1{font-size:clamp(37px,8.5vw,50px)}
 .adjust-intro .lede{font-size:16px}
 .animation-visual{position:static;border-radius:22px 22px 0 0;padding:8px 12px 14px}
 .adjust-controls{background:#fff;border-radius:0 0 22px 22px;padding:0 12px 18px}
 .adjust-controls .feel-description{text-align:center}
 .adjust-controls .media-status{text-align:center}
 .animation-card video{aspect-ratio:8/5}
 .animation-step{font-size:18px;min-height:6em;margin:2px auto 10px}
 .feel-controls button{padding:12px 5px;gap:5px}
 .feel-title{font-size:14px;min-height:2.6em}
 .feel-action{font-size:13px;line-height:1.4}
}