.demo-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin:0 0 24px;color:#c6d8e0;font-size:14px}.demo-toolbar label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.demo-toolbar button{min-height:44px;padding:10px 17px;border:1px solid #72909f;background:transparent;color:#f2f1e9;border-radius:4px}.demo-toolbar>span{margin-left:auto;font-size:12px;color:#b5cbd5}.demo-guide{background:#e9eeeb;color:#16394b;padding:26px;margin-bottom:18px;border-radius:10px}.demo-step-buttons{display:flex;gap:8px;flex-wrap:wrap}.demo-step-buttons button{display:flex;align-items:center;gap:10px;border:1px solid #718893;color:#173d50;background:transparent;min-height:48px;padding:9px 14px;border-radius:4px;font-size:14px}.demo-step-buttons button span{font-variant-numeric:tabular-nums;font-weight:600}.demo-step-buttons button[aria-pressed=true]{background:#173d50;color:#fff;border-color:#173d50}.demo-story{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;padding-top:24px}.demo-story h2,.demo-guide>h2,.demo-takeaway h2{font:500 34px/1.12 var(--font-display);margin:0 0 14px}.demo-story [data-demo-counter]{font-size:13px;margin:0 0 10px;color:#426372}.demo-story p{max-width:68ch;font-size:16px;line-height:1.7}.demo-next{display:flex;gap:12px;flex-wrap:wrap}.demo-next button{min-height:46px;background:#173d50;border:1px solid #173d50;color:#fff;padding:11px 15px;border-radius:4px}.demo-next button:disabled{opacity:.45;cursor:default}.demo-scenarios{display:flex;flex-wrap:wrap;gap:10px}.demo-scenarios button{text-align:left;flex:1 1 170px;border:1px solid #899fa8;background:#f8f8f2;color:#173d50;border-radius:5px;padding:15px;min-height:94px;line-height:1.5}.demo-scenarios button strong{display:block;font-size:15px}.demo-scenarios button span{display:block;font-size:13px;margin-top:5px}.demo-scenarios button[aria-pressed=true]{background:#173d50;color:#fff;border-color:#173d50}.demo-outcome{font-size:17px;line-height:1.65;margin:22px 0 0;max-width:80ch;min-height:3.3em}.demo-legend{display:flex;flex-wrap:wrap;gap:12px 22px;padding:8px 24px 24px;font-size:12px;color:#264d5e}.demo-legend span{display:flex;gap:8px;align-items:center}.demo-legend i{display:inline-block;width:22px;height:4px}.demo-line{background:#9c642b}.demo-neutral{background:#28677f}.demo-pe{background:#216d5c}.demo-takeaway{padding:34px 0;border-bottom:1px solid #365266}.demo-takeaway p{color:#bed0da;font-size:17px;line-height:1.8;max-width:78ch}.demo-takeaway a{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:#ecc679}.demo-normal-current{fill:none;stroke:#28677f;stroke-width:4;stroke-dasharray:8 18;opacity:0}.ex-fault-lab[data-state=normal] .demo-normal-current{opacity:.8;animation:demo-load-flow 1.6s linear infinite}.ex-fault-lab[data-state=return] .fault-flow{animation-duration:1.25s}.ex-page[data-demo=client] [data-technical-panel]{display:none!important}.ex-page[data-demo=client] .ex-workbench{grid-template-columns:1fr}.ex-page[data-demo=client] .ex-fault-stage{grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr)}.ex-page[data-demo=client] .ex-fault-results{display:flex;flex-direction:column;justify-content:center}.demo-presenting .ex-header,.demo-presenting .ex-footer,.demo-presenting .ex-reading,.demo-presenting .demo-takeaway{display:none}.demo-presenting .ex-main{max-width:1600px;padding-top:18px}.demo-presenting .ex-intro{margin-bottom:18px}.demo-presenting .ex-intro h1{font-size:40px}.demo-presenting .ex-intro>p{font-size:14px}.demo-presenting .demo-guide{padding:20px}.demo-presenting .ex-canvas .ex-scene{max-height:58vh}.demo-presenting .ex-timeline{padding-top:10px;padding-bottom:14px}@keyframes demo-load-flow{to{stroke-dashoffset:-104}}
@media(max-width:800px){.demo-story{grid-template-columns:1fr;gap:18px}.demo-toolbar>span{width:100%;margin:0}.ex-page[data-demo=client] .ex-fault-stage{grid-template-columns:1fr}.demo-outcome{min-height:0}.demo-guide{padding:20px}.demo-story h2,.demo-guide>h2{font-size:30px}.demo-step-buttons button{flex:1 1 130px}.demo-step-buttons{gap:7px}.demo-next button{flex:1}.demo-presenting .ex-intro{display:block}.demo-presenting .ex-intro>p{margin-top:12px}.demo-presenting .ex-canvas .ex-scene{max-height:none}}@media(max-width:520px){.demo-toolbar{gap:8px 16px}.demo-toolbar button{font-size:13px}.demo-guide{padding:18px 16px}.demo-scenarios button{flex-basis:135px;min-height:110px}.demo-story p{font-size:15px}.demo-legend{padding:6px 16px 20px}.demo-step-buttons button{font-size:13px;padding:9px 10px}.demo-takeaway h2{font-size:30px}.demo-takeaway p{font-size:15px}.ex-page .ex-hotspots button{width:44px;height:44px;min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.demo-normal-current,.ex-fault-lab[data-state=return] .fault-flow{animation:none!important}}
/* Keep the diagram and its client explanation in the same field of view. */
.ex-page .ex-intro h1{font-size:clamp(38px,3.8vw,52px)}.ex-page .ex-intro{margin-bottom:24px}.ex-page .ex-intro>p{font-size:16px}.ex-workbench>.demo-step-buttons{grid-column:1/-1;padding:16px 20px;border-bottom:1px solid #bdcacb;background:#e9eeeb}.ex-page[data-demo=client] .ex-workbench{grid-template-columns:minmax(0,1.7fr) minmax(300px,.9fr)}.ex-page[data-demo=client] .ex-workbench>.demo-guide{grid-column:2;grid-row:2;margin:0;border-radius:0;border-left:1px solid #bdcacb;display:flex;align-items:center;padding:28px}.ex-page[data-demo=client] .ex-canvas{grid-column:1;grid-row:2}.ex-page[data-demo=client] .demo-story{display:block;padding:0}.ex-page[data-demo=client] .demo-story h2{font-size:32px}.ex-page[data-demo=client] .demo-story p{font-size:15px}.ex-page[data-demo=client] .demo-next{margin-top:24px}.ex-page[data-demo=client] .ex-hotspots{display:none}.ex-page[data-demo=client] .ex-workbench .ex-scene{max-height:470px}.ex-page[data-demo=technical] .ex-workbench>.demo-guide,.ex-page[data-demo=technical] .ex-workbench>.demo-step-buttons{display:none}.demo-presenting .ex-workbench .ex-scene{max-height:56vh!important}
@media(max-width:850px){.ex-page[data-demo=client] .ex-workbench{grid-template-columns:1fr}.ex-page[data-demo=client] .ex-workbench>.demo-guide{grid-column:1;grid-row:3;border-left:0;border-top:1px solid #bdcacb;padding:22px}.ex-page[data-demo=client] .ex-canvas{grid-column:1;grid-row:2}.ex-workbench>.demo-step-buttons{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:12px}.ex-workbench>.demo-step-buttons button{flex:0 0 auto;min-height:46px}.ex-page[data-demo=client] .ex-workbench .ex-scene{max-height:none}.demo-presenting .ex-workbench .ex-scene{max-height:none!important}.ex-page .ex-intro h1{font-size:40px}}
.demo-mobile-picker{display:none}@media(max-width:650px){.demo-mobile-picker{display:block;font-size:13px;font-weight:500;margin:12px 0;color:#254f61}.demo-mobile-picker select{display:block;width:100%;min-height:48px;margin-top:8px;border:1px solid #728b97;border-radius:4px;background:#fffef8;color:#16394b;padding:10px;font:inherit}.demo-scenarios{display:none}.demo-presenting .ex-intro>p{display:none}.demo-presenting .ex-intro h1{font-size:32px}.demo-presenting .ex-main{padding-top:16px}}