/* Heroic examples shared by the landing page and the product pages. */
.heroic-showcase,.project-overview{--example-ink:#182a3c;--example-muted:#506576;--example-line:#567c9b2e;color:var(--example-ink);font-family:var(--sans,var(--body,sans-serif))}
.heroic-showcase{margin-top:48px}.heroic-showcase figure,.project-overview figure{margin:0}.heroic-showcase img,.project-overview img{display:block;width:100%;height:auto}
.heroic-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:18px;align-items:stretch}
.heroic-card{min-width:0;border:1px solid var(--example-line);border-radius:20px;overflow:hidden;background:#f5f8fb;display:flex;flex-direction:column;scroll-margin-top:100px}
.heroic-card header{padding:28px 28px 24px}.heroic-step{display:block;font:10px/1.5 var(--mono,monospace);letter-spacing:.18em;color:#53778f}
.heroic-showcase h3,.project-steps h3{font-size:clamp(23px,2.5vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.12;margin:12px 0}
.heroic-card header p,.heroic-finale p,.project-steps p{font-size:15px;line-height:1.7;margin:0;color:var(--example-muted);max-width:64ch}
.heroic-compare{margin-top:auto}.heroic-compare-view{position:relative;overflow:hidden;aspect-ratio:1280/714;background:#d1dbe2;cursor:ew-resize;touch-action:pan-y;user-select:none}
.heroic-compare-view img{pointer-events:none}
.heroic-compare-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroic-compare-view .heroic-before{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.heroic-image-label{position:absolute;top:14px;background:#13273bd9;border:1px solid #ffffff50;border-radius:20px;padding:5px 10px;font:10px var(--mono,monospace);color:white}
.before-label{left:14px}.after-label{right:14px}.heroic-divider{position:absolute;left:var(--reveal);top:0;bottom:0;border-left:1px solid white;display:flex;align-items:center;color:transparent;pointer-events:none}
.heroic-divider:after{content:'↔';position:absolute;left:-17px;width:34px;height:34px;display:grid;place-items:center;color:#263e54;background:#fff;border-radius:50%;box-shadow:0 2px 12px #0004}
.heroic-compare-control{display:flex;align-items:center;gap:16px;padding:15px 24px;font-size:11px;color:#405970}.heroic-compare-control span{flex:0 1 150px}.heroic-compare-control input{min-width:0;flex:1;accent-color:#4f7191;cursor:ew-resize}
.heroic-caption{font-size:11px!important;line-height:1.6!important;color:#5b6f81!important;margin:0!important;padding:14px 24px 20px}
.heroic-character{display:grid;grid-template-columns:1fr 1fr;align-items:start;background:#e3eaf2;gap:1px;margin-top:auto}
.heroic-source{position:relative;background:#fff}.heroic-source img{aspect-ratio:1;object-fit:cover}.heroic-source figcaption{font:10px var(--mono,monospace);padding:12px 8px;text-align:center;background:#f4f7fa;color:#4b6378}
.heroic-turn{min-width:0;background:#e8eef4;align-self:stretch}.heroic-turn-view{position:relative;aspect-ratio:1;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#f9fbfd,#cbd8e4);touch-action:pan-y;cursor:ew-resize;user-select:none}
.heroic-turn-view>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.heroic-turn-view canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}.heroic-turn.has-frame canvas{opacity:1}.heroic-turn.has-frame .heroic-turn-view>img{visibility:hidden}
.heroic-turn-badge{position:absolute;top:12px;right:12px;font:10px var(--mono,monospace);color:#4b6378;pointer-events:none}
.heroic-turn-controls{display:flex;gap:10px;align-items:center;padding:4px 10px}.heroic-turn-controls button{border:0;border-radius:50%;width:34px;min-height:34px;background:transparent;color:#25445e;cursor:pointer;font-size:20px;flex-shrink:0}.heroic-turn-controls button:hover{background:#cbd9e5}.heroic-turn-controls input{min-width:0;width:100%;accent-color:#4f7191;cursor:ew-resize}
.heroic-turn-hint{margin:0!important;padding:1px 8px 8px;text-align:center;font-size:10px;line-height:1.4;color:#51687c}.heroic-turn-status{margin:0!important;padding:0 8px;font-size:11px;color:#8a3b30;line-height:1.6}.heroic-turn-status:empty{display:none}
.heroic-turn-loading{position:absolute;bottom:12px;left:14px;right:14px;background:#f4f8fcf0;border:1px solid #a1b6c7;padding:8px 10px;border-radius:8px;font-size:10px;color:#3d556d}.heroic-turn-loading[hidden]{display:none}.heroic-turn-loading progress{display:block;width:100%;height:3px;margin-top:5px;accent-color:#4f7191}
.heroic-finale{margin-top:18px!important;border-radius:20px;overflow:hidden;background:#f5f8fb;border:1px solid var(--example-line)}
.heroic-finale>img{max-height:590px;object-fit:cover;object-position:center 48%}.heroic-finale figcaption{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:26px 32px}.heroic-finale h3{font-size:26px;margin-bottom:0}.heroic-finale p{font-size:14px}
.heroic-proof{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:24px;font:10px/1.5 var(--mono,monospace);text-transform:uppercase;letter-spacing:.06em;color:#506e88}.heroic-proof span:before{content:'↳';margin-right:10px;color:#607e9c}
#mtower .twin .local-resource-note{font-size:clamp(.75rem,.95vw,.9rem);line-height:1.6;margin-top:15px;padding-top:12px;border-top:1px solid #7a96b454}
.section-anchor{position:absolute;top:0;scroll-margin-top:80px}
.project-overview{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,70px);align-items:center;margin-top:48px}
.project-canvas{border:1px solid #95b4c84a;border-radius:20px;overflow:hidden;background:#ecf2f7;box-shadow:0 24px 65px #091a2b20;min-width:0}
.project-bar{display:flex;gap:12px;justify-content:space-between;padding:16px 22px;background:#152b3c;color:#c6d9e6;font:9px/1.5 var(--mono,monospace);letter-spacing:.05em}
.project-storyboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:20px 22px 0}.project-storyboard img{aspect-ratio:1.7;object-fit:cover;border-radius:5px}.project-storyboard figcaption{font:9px/1.5 var(--mono,monospace);padding-top:8px;color:#506576}
.project-canvas svg{display:block;width:100%;max-height:400px;padding:10px 22px;background-image:radial-gradient(#7e99b42e .7px,transparent .7px);background-size:14px 14px}
.project-canvas>figcaption{padding:16px 22px;font-size:12px;line-height:1.6;color:#506576;border-top:1px solid #9ab0c033;background:#f6f9fb}
.project-steps h3{font-size:clamp(28px,3vw,42px);margin:18px 0}.project-steps ol{list-style:none;counter-reset:step;margin:28px 0;padding:0}.project-steps li{display:grid;grid-template-columns:26px 1fr;column-gap:12px;counter-increment:step;border-top:1px solid #8096a540;padding:16px 0}.project-steps li:before{content:'0' counter(step);grid-row:1/3;font:10px/1.6 var(--mono,monospace);color:#7b9fb8}.project-steps b{font-size:17px;font-weight:500}.project-steps li span{font-size:13px;line-height:1.6;margin-top:5px;color:var(--example-muted)}.project-engines{font:10px/2 var(--mono,monospace);color:var(--example-muted)}.project-engines span{border:1px solid #8da6b466;padding:2px 6px;border-radius:20px;margin-left:6px}
#mshots .project-steps{--example-ink:#ecf3f7;--example-muted:#bdcdd9;color:var(--example-ink)}#mshots .project-steps .heroic-step{color:#9ed8e7}
.dv-disclaimer{padding:0 24px 22px;font-size:11px;line-height:1.6;color:#526170;background:#f7fafbd1;margin:0}
body[data-product="video"]{--disp:'Inter Tight',sans-serif}body[data-product="video"] .dv h3{margin:22px 0 0}body[data-product="video"] .dv figure{margin:0}body[data-product="video"] .dv-rail p{margin-bottom:0}body[data-product="video"] .dv-img{display:block}
.heroic-showcase input:focus-visible,.heroic-showcase button:focus-visible{outline:3px solid #578cb8;outline-offset:3px}
@media(max-width:960px){.heroic-grid{grid-template-columns:1fr}.heroic-compare-view{max-height:410px;aspect-ratio:1280/714}.heroic-card header p{max-width:70ch}.heroic-character{max-height:none}.heroic-finale figcaption{gap:24px}.project-overview{grid-template-columns:1fr}.project-steps{max-width:700px}.heroic-character .heroic-turn-view,.heroic-source img{max-height:450px}.heroic-source img{object-fit:contain}.heroic-turn-view{aspect-ratio:1}.project-bar{flex-wrap:wrap}.heroic-finale>img{max-height:none}}
@media(max-width:600px){.heroic-showcase,.project-overview{margin-top:30px}.heroic-card header{padding:24px 20px 20px}.heroic-showcase h3{font-size:25px}.heroic-card header p{font-size:14px}.heroic-caption{padding:12px 18px 18px}.heroic-finale figcaption{grid-template-columns:1fr;gap:14px;padding:22px 20px}.heroic-finale>img{aspect-ratio:1.25;object-fit:cover}.heroic-character{grid-template-columns:.8fr 1.2fr}.heroic-source{align-self:center}.heroic-source figcaption{font-size:9px}.heroic-turn-controls{gap:2px;padding-inline:4px}.heroic-turn-controls button{width:28px}.heroic-turn-hint{font-size:9px}.heroic-compare-control{padding:14px 16px}.project-storyboard{padding:14px 14px 0;gap:6px}.project-storyboard figcaption{font-size:8px}.project-canvas svg{padding:8px}.project-canvas>figcaption{padding:14px;font-size:11px}.project-steps h3{font-size:32px}}
.dv{margin-top:clamp(50px,7vw,88px);color:#17202a;overflow:hidden;border:1px solid rgba(48,62,80,.14);border-radius:clamp(18px,2.2vw,28px);background:radial-gradient(circle at 8% 10%,rgba(158,216,231,.48),transparent 34%),radial-gradient(circle at 94% 88%,rgba(190,178,219,.44),transparent 38%),linear-gradient(145deg,#f8fafb,#dfe7ed 58%,#e7e1ee);box-shadow:0 34px 90px rgba(4,12,25,.18)}
.dv-showcase{display:grid;grid-template-columns:minmax(260px,.34fr) minmax(0,1fr)}
.dv-rail{padding:clamp(26px,4vw,50px);display:flex;flex-direction:column;min-width:0}
.dv-kicker{font-family:var(--mono);font-size:8px;font-weight:500;line-height:1;letter-spacing:.25em;text-transform:uppercase;color:#667786}
.dv-rail h3{margin-top:22px;font-family:var(--disp);font-size:clamp(1.8rem,3.2vw,3.15rem);font-weight:500;line-height:1;letter-spacing:-.035em;color:#17202a}
.dv-rail p{margin-top:18px;font-size:.92rem;line-height:1.65;color:#526170}
.dv-tabs{margin-top:auto;padding-top:34px;display:grid;gap:8px}
.dv-tab{min-height:52px;appearance:none;border:0;border-top:1px solid rgba(48,62,80,.13);border-radius:12px;padding:14px 15px;background:transparent;color:#526170;display:grid;grid-template-columns:28px 1fr;align-items:center;text-align:left;cursor:pointer;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.dv-tab span{font-family:var(--mono);font-size:8px;line-height:1;letter-spacing:.18em;opacity:.65}
.dv-tab strong{font-size:.92rem;font-weight:500}
.dv-tab:hover{transform:translateX(3px)}
.dv-tab[aria-pressed="true"]{background:#142535;color:#f4f8fa;box-shadow:0 12px 28px rgba(20,37,53,.18)}
.dv-stage{position:relative;aspect-ratio:1/1;overflow:hidden;background:#cad5dd}
.dv-layers,.dv-img{position:absolute;inset:0;width:100%;height:100%}
.dv-img{object-fit:cover;opacity:0;transform:scale(1.012);transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.dv-img.is-active{opacity:1;transform:scale(1)}
.dv-prompt{position:absolute;left:clamp(16px,3vw,34px);right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,30px);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:15px 18px;border:1px solid rgba(255,255,255,.22);border-radius:14px;color:#f5f8fa;background:rgba(8,16,26,.80);backdrop-filter:blur(16px);box-shadow:0 18px 44px rgba(0,0,0,.24)}
.dv-prompt span{font-family:var(--mono);font-size:8px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:#9ed8e7}
.dv-prompt strong{font-size:.85rem;line-height:1.5;font-weight:500;min-width:0}
.dv-graph{display:grid;grid-template-columns:minmax(0,1.25fr) 44px minmax(150px,.72fr) 44px minmax(150px,.72fr);align-items:stretch;padding:clamp(18px,3vw,30px);background:rgba(247,250,251,.82);border-top:1px solid rgba(48,62,80,.12)}
.dv-inputs{display:grid;grid-template-columns:.7fr 1.3fr;gap:9px;min-width:0}
.dv-node{min-height:82px;padding:15px;border:1px solid rgba(48,62,80,.13);border-radius:12px;background:#fff;display:flex;flex-direction:column;justify-content:center;min-width:0}
.dv-node span{font-family:var(--mono);font-size:7.5px;line-height:1;letter-spacing:.19em;text-transform:uppercase;color:#71808d;margin-bottom:9px}
.dv-node strong{font-size:.86rem;line-height:1.3;font-weight:550;overflow-wrap:anywhere}
.dv-node small{font-family:var(--mono);font-size:8px;line-height:1.3;color:rgba(255,255,255,.62);margin-top:7px}
.dv-direction{background:#dce9ee}.dv-engine{background:#142535;color:#f4f8fa;border-color:#142535}.dv-engine span{color:#9ed8e7}.dv-output{background:#727b9e;color:#fff;border-color:#727b9e}.dv-output span{color:#dceaf0}
.dv-wire{position:relative;min-height:30px}.dv-wire:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#6f8fa2}.dv-wire:after{content:"›";position:absolute;right:4px;top:50%;transform:translateY(-57%);font-size:21px;color:#587e96}


@media(max-width:960px){.dv-showcase{grid-template-columns:1fr}.dv-tabs{grid-template-columns:repeat(3,1fr);margin-top:24px;padding-top:0}} @media(max-width:680px){.dv-tabs{display:flex;overflow-x:auto}.dv-tab{min-width:145px}.dv-graph{grid-template-columns:1fr}.dv-inputs{grid-template-columns:1fr}.dv-wire{height:26px}.dv-wire:before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}.dv-wire:after{content:"↓";right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%)}.dv-prompt{grid-template-columns:1fr;gap:5px}} @media(prefers-reduced-motion:reduce){.dv-img,.dv-tab{transition:none!important;transform:none!important}}

/* Preserve both supplied shoe images in their full, matching 16:9 frame. */
.heroic-compare--shoes .heroic-compare-view{aspect-ratio:16/9;max-height:none}
.heroic-compare--shoes .heroic-compare-view img{object-fit:contain}

/* Lead with scene dependencies, statuses and handoff before the AI examples. */
.pipe-classic-overview{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,58px);align-items:center;margin-top:42px;color:#182a3c;font-family:var(--sans,var(--body,sans-serif))}
.pipe-reference-map{margin:0;padding:25px 28px;border:1px solid #8ba5bf55;border-radius:18px;background:linear-gradient(135deg,#e8f0f9,#f9fbfd 70%);box-shadow:0 16px 45px #4b6c8b0a}
.pipe-map-top{display:flex;justify-content:space-between;gap:14px;font:9px/1.6 var(--mono,monospace);letter-spacing:.08em;color:#58748c;margin-bottom:22px}
.pipe-map-flow{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center}
.pipe-map-sources,.pipe-map-shots{display:grid;gap:12px;min-width:0}
.pipe-map-asset{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #b3c5d75e;border-radius:10px;padding:10px;min-width:0}
.pipe-map-asset img{display:block;flex-shrink:0;width:58px;height:64px;object-fit:cover;border-radius:5px}
.pipe-map-asset strong{display:block;font-size:13px;font-weight:550;line-height:1.4}
.pipe-map-asset>div{min-width:0}.pipe-map-asset strong{overflow-wrap:anywhere}
.pipe-map-asset small{display:block;font:9px/1.8 var(--mono,monospace);color:#687e91}
.pipe-published{display:block;color:#397667;font:9px/1.5 var(--mono,monospace);margin-top:5px}
.pipe-map-link{display:grid;place-items:center;color:#6f97b9;font:24px/1.2 var(--mono,monospace)}
.pipe-map-shots>div{display:flex;gap:8px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #b3c5d75e;border-radius:8px;padding:12px;min-width:0}
.pipe-map-shots strong{font:11px/1.4 var(--mono,monospace)}
.pipe-map-shots small{display:block;color:#73859b;font-size:8px;margin-top:4px}
.pipe-status{padding:4px 6px;border-radius:5px;font:8px/1.4 var(--mono,monospace);white-space:nowrap}
.pipe-status.work{color:#476995;background:#eaf0fb}.pipe-status.review{color:#956734;background:#faf0e1}.pipe-status.done{color:#377766;background:#e7f4ee}
.pipe-map-shots>p{font:9px/1.6 var(--mono,monospace);color:#647d91;margin:0}
.pipe-reference-map figcaption{font-size:11px;line-height:1.65;color:#61768a;border-top:1px solid #b0c4d54d;margin-top:22px;padding-top:16px}
.pipe-classic-benefits{display:grid;gap:21px}.pipe-classic-benefits article{padding-left:20px;border-left:1px solid #9bb5cf78}
.pipe-classic-benefits h3{font-size:19px;font-weight:500;letter-spacing:-.025em;line-height:1.3;margin:0 0 6px}
.pipe-classic-benefits p{font-size:14px;line-height:1.65;color:#526d83;margin:0;max-width:46ch}
.pipe-ai-intro{margin-top:72px;padding-top:32px;border-top:1px solid #8ba5bf55}
.pipe-ai-intro h3{font-size:clamp(25px,3vw,38px);font-weight:450;letter-spacing:-.035em;line-height:1.15;margin:12px 0;color:#182a3c}
.pipe-ai-intro p{font-size:16px;line-height:1.7;color:#526d83;max-width:74ch;margin:0}.pipe-ai-intro+.heroic-showcase{margin-top:28px}
.pipe-detail-features{row-gap:42px}.pipe-compatibility{font-size:12px;line-height:1.8;color:#61768a;margin-top:24px;max-width:100ch}
body[data-product=pipe3d] .section-title span{display:block}
#pipeline,#heroic{scroll-margin-top:100px}
@media(max-width:1050px){.pipe-classic-overview{grid-template-columns:1fr;gap:28px}.pipe-classic-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.pipe-classic-benefits article{padding-left:14px}.pipe-map-flow{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}}
@media(max-width:600px){.pipe-classic-overview{margin-top:30px}.pipe-reference-map{padding:18px 14px}.pipe-map-top{font-size:8px;gap:8px}.pipe-map-flow{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)}.pipe-map-asset{padding:8px;gap:8px}.pipe-map-asset img{width:35px;height:49px}.pipe-map-asset strong{font-size:10px}.pipe-map-asset small{font-size:8px}.pipe-map-shots>div{padding:9px;display:block}.pipe-map-shots strong{font-size:10px}.pipe-status{display:inline-block;margin-top:6px}.pipe-map-shots>p{font-size:8px}.pipe-classic-benefits{grid-template-columns:1fr;gap:18px}.pipe-ai-intro{margin-top:46px}.pipe-ai-intro p{font-size:15px}}
@media(max-width:360px){.pipe-map-asset{flex-direction:column;align-items:flex-start}.pipe-map-asset img{width:100%;height:54px;object-position:center 35%}}

/* Media comparisons belong in the compositing viewer; Pipe 3D shows its HDRI. */
.heroic-environment-image{display:block;width:100%;height:auto;aspect-ratio:1280/714;object-fit:contain}
/* Share the header row so all previews start together, regardless of text wrapping. */
@media(min-width:961px){
  .heroic-grid{grid-template-rows:auto auto}
  .heroic-card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .heroic-character{margin-top:0}
  .heroic-showcase .heroic-environment-image{height:calc(100% - 42px);min-height:0;object-fit:cover;align-self:start}
}
.heroic-finale .heroic-finale-heading{display:block;padding:26px 32px}
.heroic-compare-range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.heroic-compare-view:focus-within{outline:3px solid #9ed8e7;outline-offset:-3px}
.heroic-compare-view .heroic-image-label{pointer-events:none}
.heroic-compare--shoes .heroic-compare-view img{filter:none}
body[data-product=compositing] .heroic-compare{margin:0}
@media(max-width:600px){.heroic-finale .heroic-finale-heading{padding:20px}.heroic-compare--shoes .heroic-image-label{top:10px;font-size:9px;padding:4px 8px}}


/* Version history and publication are separate production decisions. */
.pipe-versioning{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,72px);margin-top:64px;padding:clamp(24px,4vw,52px);border:1px solid #b2c5d7;border-radius:22px;background:linear-gradient(125deg,#f7fafded,#e7eff8);color:#182a3c;font-family:var(--sans,var(--body,sans-serif))}
.pipe-versioning h3{font-size:clamp(27px,3vw,42px);font-weight:450;line-height:1.12;letter-spacing:-.035em;margin:14px 0 20px}
.pipe-versioning-copy>p{font-size:15px;line-height:1.7;color:#526d83;margin:0}
.pipe-versioning ul{list-style:none;margin:26px 0;padding:0;display:grid;gap:20px}
.pipe-versioning li strong{display:block;font-weight:550;font-size:14px;line-height:1.5}
.pipe-versioning ul li{padding-left:15px;border-left:2px solid #93adc8}
.pipe-versioning ul span{display:block;font-size:13px;line-height:1.65;color:#526d83;margin-top:4px}
.pipe-versioning-copy .pipe-versioning-storage{font-size:12px;line-height:1.65;padding-top:20px;border-top:1px solid #c8d7e5}
.pipe-versioning-demo{margin:0;min-width:0;border:1px solid #385674;border-radius:16px;padding:clamp(18px,2.4vw,30px);background:#17283c;color:#edf4fc;box-shadow:0 18px 42px #182a3c18}
.pipe-versioning-demo figcaption{font:10px/1.7 var(--mono,monospace);color:#adc3de;margin-bottom:20px}
.pipe-versioning-asset{display:flex;align-items:center;gap:14px;padding-bottom:22px}
.pipe-versioning-asset img{width:54px;height:58px;object-fit:cover;border-radius:8px}
.pipe-versioning-asset strong{font-size:17px;font-weight:500;display:block}.pipe-versioning-asset span{display:block;font-size:11px;color:#adc3de;margin-top:5px}
.pipe-versioning-demo ol{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pipe-versioning-demo li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 13px;align-items:start;padding:15px 13px;border:1px solid #38516e;border-radius:9px;background:#20334b}
.pipe-versioning-demo li b{font:11px/1.8 var(--mono,monospace);color:#afc9e9}.pipe-versioning-demo li strong{font-size:12px}.pipe-versioning-demo li div>span{display:block;font-size:10px;line-height:1.6;margin-top:4px;color:#b8cadd}
.pipe-versioning-demo .is-published{border-color:#74ad9f;background:#253f49}
.pipe-versioning-tag{grid-column:2;justify-self:start;padding:3px 7px;border-radius:4px;background:#314c6a;color:#dce9fb;font:9px/1.5 var(--mono,monospace)}
.is-published .pipe-versioning-tag{background:#386659;color:#d8f3e9}
.pipe-versioning-handoff{display:flex;gap:14px;margin-top:18px;padding:16px 0 0;border-top:1px solid #38516e}.pipe-versioning-handoff>span{color:#98bce6;font-size:24px}.pipe-versioning-handoff strong{font-size:13px;font-weight:500;display:block}.pipe-versioning-handoff div>span{display:block;font-size:11px;line-height:1.7;color:#b8cadd;margin-top:5px}
@media(max-width:900px){.pipe-versioning{grid-template-columns:1fr}.pipe-versioning-demo{width:100%;box-sizing:border-box}}
@media(max-width:480px){.pipe-versioning{padding:20px 16px;margin-top:40px;border-radius:14px}.pipe-versioning-copy>p{font-size:14px}.pipe-versioning-demo{padding:18px 14px}}
