/* Framework palette and module order follow fig2-soft-style-revised-v5. */
.fert-framework{--fert-ink:#203249;--fert-blue:#79abc5;--fert-green:#709d83;--fert-pink:#b57aa8;--fert-red:#cf8790;--fert-line:#cdd6df;position:relative;margin-block:32px 44px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:clip;overflow-anchor:none}
.fert-framework-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-bottom:1px solid #e9edf0}
.fert-framework-header .eyebrow{margin:0;color:var(--fert-ink);letter-spacing:.065em}
.fert-view-controls{display:flex;align-items:center;gap:7px}
.fert-view-controls button{display:inline-grid;place-items:center;min-height:34px;padding:7px 12px;border:1px solid #dbe2e7;border-radius:8px;background:white;color:#526877;font:12px/1.3 var(--sans);transition:background .2s,border-color .2s}
.fert-view-controls button:hover{background:#f0f7fb;border-color:#99b8cb}
.fert-view-controls .fert-zoom{width:34px;padding:0;font-size:19px}
#fert-overview{white-space:nowrap}
.fert-view-controls button:disabled{opacity:.4}
.fert-layout{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(290px,1fr);align-items:start}
.fert-visual{position:sticky;top:24px;padding:22px 16px 16px 24px;min-width:0}
.fert-scene{position:relative;width:100%;aspect-ratio:1060/940;overflow:hidden;border-radius:12px;background:#fff;touch-action:auto}
.fert-scene.is-pannable{cursor:grab}
.fert-scene.is-dragging{cursor:grabbing}
.fert-scene svg{width:100%;height:100%;max-width:none;overflow:hidden;user-select:none;font-family:Arial,Helvetica,sans-serif}
.fert-module{cursor:pointer;outline:none;transition:opacity .35s}
.fert-scene.is-focused .fert-module:not(.is-active){opacity:0;pointer-events:none}
.fert-scene.is-focused #fert-diagram>.fert-path,.fert-scene.is-focused #fert-diagram>.fert-flow{opacity:0}
.fert-scene.is-focused{aspect-ratio:1.75}
.fert-module .module-outline{fill:none;stroke:transparent;stroke-width:2.5;transition:stroke .25s}
.fert-module:hover .module-outline,.fert-module:focus-visible .module-outline{stroke:#779aae}
.fert-module.is-active .module-outline{stroke:#79abc5}
.fert-module[data-step="2"].is-active .module-outline{stroke:#709d83}
.fert-module[data-step="3"].is-active .module-outline{stroke:#b57aa8}
.fert-module[data-step="4"].is-active .module-outline{stroke:#79abc5}
.fert-title{fill:#203249;font-size:22px;font-weight:700}
.fert-label{fill:#344454;font-size:16px}
.fert-label-small{fill:#526877;font-size:13px}
.fert-subhead{fill:#805b84;font-size:17px;font-weight:600}
.fert-path{fill:none;stroke:#718896;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#fert-arrow)}
.fert-flow{fill:none;stroke:#79abc5;stroke-width:3;stroke-dasharray:5 35;stroke-linecap:round;pointer-events:none;opacity:0}
.fert-framework.is-live .fert-flow{opacity:.85;animation:fert-flow 3s linear infinite}
.fert-framework.is-live .fert-flow.flow-green{stroke:#709d83;animation-duration:3.9s}
.fert-framework.is-live .fert-flow.flow-red{stroke:#cf8790;animation-duration:4.7s}
.fert-framework.is-live .fert-token-enter{animation:fert-token 4.8s ease-in-out infinite;animation-delay:var(--delay,0s);transform-box:fill-box;transform-origin:center}
.fert-framework.is-live .fert-encoding-token{animation:fert-encode 4.4s ease-in-out infinite;animation-delay:var(--delay,0s)}
.fert-alignment{fill:none;stroke:#b57aa8;stroke-width:1.4;opacity:.12;transition:opacity .3s,stroke-width .3s}
.fert-alignment.is-current{opacity:.85;stroke-width:2.3}
.fert-query-token{fill:#e9cdd1;stroke:transparent;stroke-width:2;transition:fill .25s,stroke .25s}
.fert-query-token.is-current{fill:#cf8790;stroke:#b46470}
.fert-candidate-token{fill:#c2d8ca;transition:fill .25s}
.fert-candidate-token.is-matched{fill:#709d83}
.fert-candidate-token.is-current{stroke:#547e64;stroke-width:2}
.fert-cost-bar{fill:#c2d8ca;transition:width .5s,fill .25s}
.fert-cost-bar.is-selected{fill:#709d83}
.fert-cost-value{fill:#526877;font-size:12px;font-variant-numeric:tabular-nums}
.fert-priority-bar{fill:#e6d2e2;transition:y .55s,height .55s,fill .25s}
.fert-priority-bar.is-retrieved{fill:#b57aa8}
.fert-sampled-token{stroke:#b57aa8;stroke-width:1.8;transition:fill .25s}
.fert-demo-note{padding:10px 8px 0;margin:0;font:11px/1.65 var(--sans);color:#74818b;max-width:640px}
.fert-steps{padding:22px 28px 28px 20px;border-left:1px solid #e9edf0;min-width:0;align-self:stretch}
.fert-steps-heading{margin:0 0 20px;font:11px/1.6 var(--mono);color:#718896;letter-spacing:.065em;text-transform:uppercase}
.fert-step{border-top:1px solid #e5ebee}
.fert-step:first-of-type{border-top:0}
.fert-step-button{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) 12px;align-items:center;gap:11px;padding:20px 0;text-align:left;background:transparent;border:0;color:#526877;font:500 17px/1.3 var(--sans)}
.fert-step-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f0f7fb;color:#507f99;font:12px/1 var(--mono);transition:background .2s,color .2s}
.fert-step-button[data-step="2"] .fert-step-number{background:#f1f6f3;color:#547e64}
.fert-step-button[data-step="3"] .fert-step-number{background:#f8f2f7;color:#805b84}
.fert-step-button[aria-expanded=true]{color:#203249;font-weight:600}
.fert-step-button[aria-expanded=true] .fert-step-number{background:#79abc5;color:white}
.fert-step-button[data-step="2"][aria-expanded=true] .fert-step-number{background:#709d83}
.fert-step-button[data-step="3"][aria-expanded=true] .fert-step-number{background:#b57aa8}
.fert-step-caret{font-size:15px;font-weight:400;transition:transform .25s}
.fert-step-button[aria-expanded=true] .fert-step-caret{transform:rotate(90deg)}
.fert-step-content{padding:0;overflow:hidden;box-sizing:border-box}
.fert-step-body{display:flow-root;padding:0 0 22px 43px}
.fert-step-content[hidden]{display:none}
.fert-step-content p{font:14px/1.8 var(--sans);color:#526877;margin-bottom:14px}
.fert-step-content strong{font-weight:600;color:#344454}
.fert-step-fact{display:block;border-left:2px solid #a9c7d8;padding:2px 0 2px 12px;margin:18px 0 3px;font:11px/1.7 var(--mono);color:#526877}
.fert-step-content[data-step="2"] .fert-step-fact{border-color:#adc9b7}
.fert-step-content[data-step="3"] .fert-step-fact{border-color:#cfb0c9}
.fert-control{margin-top:20px;padding:15px;border:1px solid #e2e8ec;border-radius:10px;background:#fafcfd}
.fert-control label{display:flex;justify-content:space-between;gap:12px;font:11px/1.6 var(--mono);color:#526877}
.fert-control output{font-variant-numeric:tabular-nums;color:#203249}
.fert-control input[type=range]{display:block;width:100%;min-height:36px;margin:6px 0 0;accent-color:#b57aa8;cursor:ew-resize}
.fert-control input:focus-visible{outline:2px solid #b57aa8;outline-offset:3px;border-radius:6px}
.fert-control p{font:11px/1.65 var(--sans);margin:8px 0 0;color:#718896}
.fert-framework>figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e9edf0;padding:17px 28px;margin:0;font-size:12px;color:#718896}
.fert-framework>figcaption span:last-child{font:10px/1.5 var(--mono);white-space:nowrap;color:#8a99a4}
.fert-focus-status{color:#805b84}
@keyframes fert-flow{to{stroke-dashoffset:-160}}
@keyframes fert-token{0%,12%{opacity:.4;transform:translateX(-4px)}30%,75%{opacity:1;transform:translateX(0)}100%{opacity:.4;transform:translateX(-4px)}}
@keyframes fert-encode{0%,15%,100%{opacity:.35}35%,70%{opacity:1}}
@media(min-width:1100px){.fert-scene{max-height:610px}.fert-scene.is-focused{max-height:440px}}
@media(max-width:1000px){.fert-layout{grid-template-columns:minmax(0,1.7fr) minmax(270px,1fr)}.fert-steps{padding-inline:16px}.fert-visual{padding:20px 12px}.fert-step-button{font-size:15px;gap:8px}.fert-step-body{padding-left:40px}.fert-step-content p{font-size:13px}}
@media(max-width:760px){.fert-framework-header{padding:18px 16px;align-items:flex-start}.fert-framework-header .eyebrow{font-size:10px;max-width:170px}.fert-view-controls{gap:5px}.fert-view-controls button{font-size:10px;padding-inline:8px}.fert-view-controls .fert-zoom{width:31px;font-size:17px}.fert-layout{grid-template-columns:minmax(0,1fr)}.fert-visual{position:relative;top:auto;padding:12px}.fert-scene{aspect-ratio:1.22;max-height:480px}.fert-scene.is-focused{aspect-ratio:1.4}.fert-steps{border-left:0;border-top:1px solid #e9edf0;padding:20px}.fert-step-button{font-size:16px;padding-block:16px}.fert-step-content p{font-size:14px}.fert-steps-heading{margin-bottom:8px}.fert-demo-note{font-size:10px}.fert-framework>figcaption{padding:16px;display:block}.fert-framework>figcaption span{display:block}.fert-framework>figcaption span:last-child{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.fert-framework *{transition:none!important}.fert-framework.is-live .fert-flow{animation:none;stroke-dasharray:none;opacity:.5}.fert-framework.is-live .fert-token-enter,.fert-framework.is-live .fert-encoding-token{animation:none;opacity:1;transform:none}}
@media print{.fert-layout{display:block}.fert-visual{position:static}.fert-scene{aspect-ratio:1060/940}.fert-steps{border:0;display:block}.fert-step-content{height:auto!important;opacity:1!important;overflow:visible}.fert-step-content[hidden]{display:block}.fert-view-controls,.fert-control{display:none}.fert-framework.is-live .fert-flow,.fert-framework.is-live .fert-token-enter,.fert-framework.is-live .fert-encoding-token{animation:none;opacity:1}.fert-framework{break-inside:avoid;border:0}.fert-framework-header{display:none}}

/* Keep the original composition steady while the adjacent explanation changes. */
.fert-layout{align-items:start;grid-template-columns:minmax(0,2.05fr) minmax(300px,1fr)}
.fert-visual{position:relative;top:auto;padding:24px 20px}
.fert-zoom-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-bottom:10px}
.fert-zoom-toolbar button{display:inline-grid;place-items:center;min-width:40px;min-height:40px;box-sizing:border-box;padding:7px 10px;border:1px solid #dbe2e7;border-radius:8px;background:#fff;color:#526877;font:18px/1 var(--sans);cursor:pointer;transition:background .2s,border-color .2s}
.fert-zoom-toolbar #fert-zoom-reset{font-size:12px}
.fert-zoom-toolbar button:hover{background:#f0f7fb;border-color:#99b8cb}
.fert-zoom-toolbar button:disabled{opacity:.4;cursor:default}
.fert-scene{aspect-ratio:1060/940;max-height:none;overflow:visible}
.fert-scene:focus{outline:none}
.fert-scene:focus-visible{outline:2px solid #507f99;outline-offset:3px}
.fert-scene.is-zoomed{cursor:grab;touch-action:pinch-zoom;overflow:hidden}
.fert-scene.is-dragging{cursor:grabbing}
.fert-scene svg{overflow:visible}
.fert-module .module-outline{stroke-width:3}
.fert-alignment{pointer-events:none}
.fert-query-token{cursor:pointer}
.fert-priority-bar:hover{stroke:#805b84;stroke-width:1.5}
.fert-hint{font:12px/1.5 var(--sans);color:#718896}
.fert-toggle{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.fert-toggle button,.fert-sample-button{min-height:38px;border:1px solid #d8e0e6;border-radius:7px;padding:8px 12px;background:#fff;color:#526877;font:12px/1.3 var(--sans);cursor:pointer}
.fert-toggle button[aria-pressed=true]{background:#805b84;border-color:#805b84;color:#fff}
.fert-toggle button:hover,.fert-sample-button:hover{border-color:#805b84}
.fert-step-button,.fert-module{cursor:pointer}
.fert-framework button:focus-visible{outline:2px solid #507f99;outline-offset:3px}
.fert-control p{font-size:12px}
.fert-mobile-nav{display:none}
@media(max-width:1000px){.fert-layout{grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr)}}
@media(max-width:760px){
 .fert-layout{display:flex;flex-direction:column}.fert-visual,.fert-steps{width:100%;box-sizing:border-box}
 .fert-framework-header{flex-direction:column;gap:6px}.fert-framework-header .eyebrow{max-width:none}
 .fert-visual{padding:14px 10px}.fert-scene{aspect-ratio:1060/940;max-height:none}
 .fert-mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;border-bottom:1px solid #e9edf0}
 .fert-mobile-nav .fert-step-button{display:flex;flex-direction:column;text-align:center;font-size:11px;line-height:1.35;padding:12px 4px;gap:7px}
 .fert-mobile-nav .fert-step-caret{display:none}.fert-mobile-nav .fert-step-button[aria-expanded=true]{background:#f0f7fb}
 .fert-steps{padding:20px}.fert-steps-heading{display:none}.fert-step{border:0}.fert-step-body{padding:0}.fert-demo-note{padding:10px 0 0}
}
@media print{.fert-zoom-toolbar{display:none}}

/* Animate the original connectors, matching the overview and system figures. */
.fert-framework .fert-flow{display:none}
@media screen and (prefers-reduced-motion:no-preference){
 .fert-framework.is-live .fert-stream.is-streaming{stroke-dasharray:5 10;animation:fert-stream 2.6s linear 2}
}
@keyframes fert-stream{to{stroke-dashoffset:-60}}