/* Actual example images with a scroll-driven, bounded technical flowchart. */
.model-explainer{padding-block:54px 58px;border-top:1px solid var(--line);background:var(--paper);position:relative}
.model-flow-pin{display:flex;flex-direction:column;gap:28px;position:relative}
.model-flow-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.model-flow-eyebrow{display:block;font-size:9px;letter-spacing:.12em;color:var(--red);margin-bottom:13px}
.model-flow-heading h2{font-size:clamp(46px,5.3vw,76px);line-height:1;letter-spacing:-.04em}
.model-flow-skip{padding:5px 0;border:0;border-bottom:1px solid var(--line);font:10px/1.7 var(--body);flex:none;white-space:nowrap}
.model-flow-skip span{display:inline-block;margin-left:7px;font-size:15px}.model-flow-skip:hover{color:var(--red);border-color:var(--red)}
.model-flow-board{position:relative;display:grid;grid-template-columns:1.05fr .88fr .95fr 1.42fr .88fr 1.05fr;column-gap:3%;align-items:center;min-height:390px;height:clamp(390px,43vw,520px);isolation:isolate}
.model-flow-connections{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.model-flow-inputs{grid-column:1;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:22px;height:100%;min-width:0;max-height:480px}
.model-flow-image{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-height:0;min-width:0;gap:9px}
.model-flow-image figcaption{font:23px/1.05 var(--serif);letter-spacing:-.02em;text-align:center;color:var(--ink);flex:none}
.model-flow-image-frame{height:calc(100% - 34px);max-width:100%;aspect-ratio:var(--flow-image-ratio);position:relative;border:0;padding:0;background:transparent;box-shadow:none;overflow:visible}
.model-flow-image img{display:block;width:100%;height:100%;object-fit:contain}
.model-flow-output{grid-column:6;height:100%;max-height:430px;justify-content:center}
.model-flow-output .model-flow-image-frame{height:auto;width:100%;max-height:calc(100% - 34px);aspect-ratio:var(--flow-image-ratio)}
.model-flow-output figcaption{color:var(--red)}
.model-flow-node{position:relative;z-index:1;padding:17px 14px 18px;border:1px solid #c9c1b4;background:var(--paper);min-width:0}
.model-flow-number{display:flex;align-items:center;gap:9px;font:12px/1 var(--body);color:var(--red);margin-bottom:14px}
.model-flow-technical{font:9px/1.4 var(--body)}
.model-flow-node h3{font:27px/1.04 var(--serif);letter-spacing:-.03em;margin:0 0 12px}
.model-flow-node>p{font:10px/1.8 var(--body);color:var(--muted)}
.model-flow-encoder{grid-column:2}.model-flow-latent{grid-column:3}.model-flow-transformer{grid-column:4;border-color:var(--red);background:var(--red-soft,#f7e9eb);padding:20px 17px}.model-flow-decoder{grid-column:5}
.model-flow-transformer .model-flow-number{color:var(--red)}.model-flow-transformer h3{font-size:30px;color:var(--red)}
.model-flow-style-pills{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:13px 0 0}
.model-flow-style-pills li{padding:5px 7px;border:1px solid color-mix(in srgb,var(--red) 35%,transparent);border-radius:999px;background:var(--paper);color:var(--red);font:9px/1.4 var(--body);white-space:nowrap}
.model-flow-footer{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;font:9px/1.7 var(--body);color:var(--muted)}
.model-flow-status{display:flex;align-items:center;gap:14px;text-align:right}.model-flow-progress{height:2px;width:90px;background:var(--line);overflow:hidden}.model-flow-progress i{display:block;background:var(--red);height:100%;width:100%;transform:scaleX(1);transform-origin:left}
.model-explainer[data-flow-mode="scroll"]{height:270svh;padding:0}
.model-explainer[data-flow-mode="scroll"] .model-flow-pin{position:sticky;top:calc(var(--navigation-height,92px) + 8px);height:calc(100svh - var(--navigation-height,92px) - 16px);padding-block:22px 18px;gap:clamp(15px,3vh,32px)}
.model-explainer[data-flow-mode="scroll"] .model-flow-board{flex:1;height:auto;min-height:0;max-height:none}
.model-explainer[data-flow-mode="scroll"] [data-flow-node]{opacity:var(--flow-opacity,0);will-change:opacity}
.model-explainer[data-flow-mode="static"] .model-flow-skip,.model-explainer[data-flow-mode="full"] .model-flow-skip{display:none}
.model-explainer[data-flow-mode="full"] .model-flow-status,.model-explainer[data-flow-mode="static"] .model-flow-status{display:none}
@media(min-width:1001px) and (max-height:760px){
 .model-flow-heading h2{font-size:49px}.model-flow-eyebrow{font-size:8px;margin-bottom:8px}.model-flow-node{padding:12px 10px}.model-flow-node h3{font-size:23px;margin-bottom:9px}.model-flow-node>p{font-size:10px}.model-flow-number{margin-bottom:10px;font-size:10px}.model-flow-transformer h3{font-size:26px}.model-flow-inputs{gap:15px}.model-flow-image figcaption{font-size:21px}
}
@media(max-width:1000px){
 .model-explainer{padding-block:44px}.model-flow-pin{gap:24px}.model-flow-heading h2{font-size:clamp(42px,6.4vw,64px)}.model-flow-heading{gap:16px}.model-flow-eyebrow{font-size:8px;margin-bottom:10px}.model-flow-skip{font-size:9px}
 .model-flow-board{max-width:700px;width:100%;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(100px,1.3fr) minmax(116px,.8fr) minmax(154px,1.08fr) minmax(116px,1.1fr);gap:30px 38px;height:650px;min-height:0;align-items:stretch}
 .model-flow-inputs{grid-column:1/3;grid-row:1;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:38px;max-height:none}
 .model-flow-image{gap:6px}.model-flow-image figcaption{font-size:24px}.model-flow-image-frame{height:calc(100% - 31px);max-width:100%}
 .model-flow-encoder{grid-column:1;grid-row:2}.model-flow-latent{grid-column:2;grid-row:2}.model-flow-transformer{grid-column:1/3;grid-row:3}.model-flow-transformer h3{font-size:28px}
 .model-flow-decoder{grid-column:1;grid-row:4;align-self:center}.model-flow-output{grid-column:2;grid-row:4;height:100%;max-height:none;justify-content:start}.model-flow-output .model-flow-image-frame{height:calc(100% - 31px);width:auto;max-width:100%}
 .model-flow-node{padding:13px 15px}.model-flow-number{font-size:10px;margin-bottom:8px}.model-flow-node h3{font-size:26px;margin-bottom:7px}.model-flow-node>p{font-size:10px;line-height:1.65}
 .model-flow-footer{font-size:8px;padding-top:12px;gap:10px}.model-flow-status{gap:8px}.model-flow-progress{width:58px}
 .model-explainer[data-flow-mode="scroll"] .model-flow-pin{gap:15px;padding-block:18px 12px}.model-explainer[data-flow-mode="scroll"] .model-flow-board{grid-template-rows:minmax(85px,1.18fr) minmax(116px,.77fr) minmax(154px,.85fr) minmax(116px,1fr);gap:22px 34px}
}
@media(max-width:640px){
 .model-flow-heading{align-items:flex-start}.model-flow-heading h2{font-size:clamp(35px,9vw,50px);max-width:270px}.model-flow-eyebrow{font-size:7px;margin-bottom:8px}.model-flow-skip{font-size:8px;line-height:1.65;white-space:normal;max-width:82px;margin-top:20px}.model-flow-skip span{font-size:12px;margin-left:4px}
 .model-flow-board{height:660px;gap:25px 28px;grid-template-rows:minmax(110px,1.2fr) minmax(160px,.9fr) minmax(152px,1fr) minmax(144px,1.05fr)}
 .model-flow-inputs{gap:28px}.model-flow-image figcaption{font-size:21px}.model-flow-image-frame{height:calc(100% - 28px)}.model-flow-output .model-flow-image-frame{height:calc(100% - 28px)}
 .model-flow-node{padding:10px 11px}.model-flow-number{font-size:9px;margin-bottom:6px}.model-flow-node h3{font-size:23px;margin-bottom:6px}.model-flow-node>p{font-size:10px;line-height:1.65}
 .model-flow-transformer h3{font-size:25px}.model-flow-transformer .model-flow-number{gap:8px}.model-flow-technical{font-size:9px}
 .model-flow-footer{font-size:7px;line-height:1.6}.model-flow-status{max-width:130px}.model-flow-progress{width:33px;flex:none}
 .model-explainer[data-flow-mode="scroll"] .model-flow-pin{padding-block:13px 9px;gap:13px}.model-explainer[data-flow-mode="scroll"] .model-flow-board{gap:18px 28px;grid-template-rows:minmax(90px,1.2fr) minmax(160px,.9fr) minmax(152px,1fr) minmax(144px,1fr)}
}
@media(max-width:384px){
 /* Wrapped copy must grow its row, so stage 04 cannot rise into the connector above it. */
 .model-flow-board{height:auto;min-height:660px;grid-template-rows:110px minmax(160px,max-content) minmax(164px,max-content) minmax(144px,max-content)}
 .model-explainer[data-flow-mode="scroll"] .model-flow-board{grid-template-rows:90px minmax(160px,max-content) minmax(164px,max-content) minmax(144px,max-content)}
}
@media(prefers-reduced-motion:reduce){
 .model-explainer{height:auto!important;padding-block:44px!important}.model-explainer .model-flow-pin{position:relative!important;top:auto!important;height:auto!important;padding-block:0!important}.model-explainer [data-flow-node]{opacity:1!important;transform:none!important;will-change:auto!important}.model-explainer .model-flow-board{height:520px!important;min-height:390px!important;flex:none!important}.model-flow-skip,.model-flow-status{display:none!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:1000px){.model-explainer .model-flow-board{height:650px!important;min-height:0!important}}
@media(prefers-reduced-motion:reduce) and (max-width:384px){.model-explainer .model-flow-board{height:auto!important;min-height:660px!important}}