/* Real project imagery and a presenter-led walkthrough. */
.scenario-case{--scenario-muted:light-dark(#748aa0,#91acc5)}
.scenario-head{display:flex;gap:28px;align-items:center;justify-content:space-between;padding:20px 28px 18px;flex-shrink:0}
.scenario-head>div:first-child{min-width:0;max-width:850px}.scenario-kicker{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.5px;color:var(--demo-accent)}.scenario-kicker i{width:3px;height:3px;border-radius:50%;background:currentColor}.scenario-head h2{font-size:clamp(22px,2.25vw,31px);line-height:1.4;letter-spacing:-.6px;font-weight:500;margin:9px 0 8px}.scenario-head p{font-size:12px;line-height:1.8;color:var(--demo-copy)}
.scenario-launch{display:flex;align-items:flex-end;flex-direction:column;gap:8px;flex-shrink:0}.scenario-launch .button{font-size:12px;border-radius:5px;min-height:39px;padding:10px 15px}.scenario-launch small{color:var(--scenario-muted);font-size:10px;max-width:210px;overflow-wrap:anywhere;text-align:right}
.scenario-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-top:1px solid var(--demo-line);border-bottom:1px solid var(--demo-line);background:light-dark(#eef4fc,#13273c);flex-shrink:0}.scenario-view-tabs{display:flex;gap:25px}.scenario-view-tabs button{padding:13px 0;min-height:42px;border-bottom:2px solid transparent;font-size:12px;color:var(--demo-copy);background:none}.scenario-view-tabs button[aria-pressed=true]{color:var(--demo-accent);border-color:var(--demo-accent)}.scenario-view-tabs button>span{font-size:9px;display:inline-block;margin-left:6px;opacity:.8}.scenario-duration{font-size:10px;color:var(--scenario-muted)}
.scenario-steps{padding:14px 28px 0;display:flex;gap:6px;flex-shrink:0;overflow:auto;scrollbar-width:none}.scenario-steps button{flex:1;min-width:0;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px;color:var(--demo-copy);background:transparent;border:1px solid var(--demo-line);padding:10px 8px;border-radius:5px}.scenario-steps button>span{font-size:10px;color:var(--scenario-muted)}.scenario-steps button[aria-pressed=true]{background:light-dark(#e2edfe,#1c3e60);color:var(--demo-ink);border-color:light-dark(#8eb5e5,#5a8fbd)}.scenario-steps button[aria-pressed=true]>span{color:var(--demo-accent)}
.scenario-body{container-type:size;padding:19px 28px 24px}.scenario-stage{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:23px;align-items:start}.scenario-media{min-width:0}.system-figure{margin:0;overflow:hidden;border:1px solid var(--demo-line);border-radius:8px;background:var(--demo-panel)}.system-frame-bar{padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--demo-line);background:light-dark(#edf3fa,#1b344d);font-size:10px;color:var(--demo-copy)}.system-frame-bar>span{display:flex;align-items:center;gap:8px;min-width:0}.system-frame-bar i{display:block;flex-shrink:0;width:5px;height:5px;background:var(--demo-accent);border-radius:50%}.system-frame-bar button{display:flex;align-items:center;gap:5px;background:transparent;font-size:10px;color:var(--demo-accent);white-space:nowrap}.system-frame-bar svg{width:13px;height:13px}.system-shot{position:relative;display:block;width:100%;padding:0;background:light-dark(#e9edf2,#10253a);overflow:hidden;cursor:zoom-in}.system-shot>img{display:block;width:100%;height:clamp(160px,calc(100cqh - 140px),500px);object-fit:contain;object-position:center}.shot-zoom{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;align-items:center;padding:8px 11px;border-radius:4px;background:#132b47e6;color:#fff;font-size:10px;opacity:0;transition:opacity .2s}.shot-zoom svg{width:13px;height:13px}.system-shot:hover .shot-zoom,.system-shot:focus-visible .shot-zoom{opacity:1}.system-figure figcaption{padding:13px 15px;display:grid;gap:5px}.system-figure figcaption strong{font-size:12px;font-weight:500;line-height:1.6}.system-figure figcaption span{font-size:11px;color:var(--demo-copy);line-height:1.7}.system-figure figcaption small{font-size:9px;color:var(--scenario-muted);line-height:1.7}
.system-thumbnails{display:flex;gap:9px;margin-top:12px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}.system-thumbnails button{flex:0 0 126px;text-align:left;border:1px solid var(--demo-line);background:var(--demo-panel);border-radius:5px;overflow:hidden;padding:3px;color:var(--demo-copy)}.system-thumbnails button[aria-pressed=true]{border-color:var(--demo-accent);box-shadow:0 0 0 1px var(--demo-accent);color:var(--demo-accent)}.system-thumbnails img{width:100%;height:66px;object-fit:contain;display:block;background:#e5eaf0;border-radius:2px}.system-thumbnails span{font-size:9px;line-height:1.5;display:block;padding:6px 5px 4px}.scenario-guide{display:flex;flex-direction:column;gap:20px;padding:7px 0 0 2px;min-width:0}.guide-heading{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--demo-line);padding-bottom:17px}.guide-heading>span{font-size:28px;font-weight:300;color:var(--demo-accent);font-variant-numeric:tabular-nums;white-space:nowrap}.guide-heading small{font-size:10px;color:var(--scenario-muted)}.guide-heading strong{font-size:19px;font-weight:500;line-height:1.5}.guide-label{display:block;color:var(--demo-accent);font-size:10px;letter-spacing:.4px;margin-bottom:8px}.scenario-guide p{font-size:13px;line-height:1.85;color:var(--demo-copy)}.guide-observe{padding:15px 17px;border-left:2px solid var(--demo-accent);background:light-dark(#e9f2fd,#1a3854);border-radius:0 5px 5px 0}.guide-observe p{color:var(--demo-ink)}.guide-value p{font-size:12px}.system-no-shot{min-height:320px;border:1px dashed var(--demo-line);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center;background:linear-gradient(130deg,light-dark(#ecf5ff,#183c58),var(--demo-panel))}.system-no-shot>svg{width:30px;height:30px;color:var(--demo-accent);margin-bottom:20px}.system-no-shot h3{font-size:22px;font-weight:500;margin-bottom:12px}.system-no-shot p{font-size:13px;line-height:1.8;color:var(--demo-copy);max-width:340px}
.scenario-delivery{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}.scenario-delivery section{padding:7px 0 20px;border-bottom:1px solid var(--demo-line)}.scenario-delivery .eyebrow{display:block;color:var(--demo-accent);font-size:10px;letter-spacing:.5px;margin-bottom:14px}.scenario-delivery h3{font-size:25px;font-weight:500;line-height:1.7;max-width:550px}.scenario-delivery p{font-size:13px;line-height:1.95;color:var(--demo-copy)}.scenario-outcome>p{margin:12px 0}.scenario-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.scenario-chips span{padding:5px 9px;border-radius:4px;border:1px solid var(--demo-line);font-size:10px;color:var(--demo-accent)}.scenario-deliverables>div{display:flex;gap:15px;align-items:baseline;margin:15px 0}.scenario-deliverables b{font-size:12px;font-weight:400;color:var(--demo-accent)}.scenario-deliverables p{color:var(--demo-ink)}.scenario-prep ul{padding-left:17px;color:var(--demo-ink);font-size:13px;line-height:2}.scenario-prep>p{font-size:11px;margin-top:13px}.scenario-sources{grid-column:1/-1;font-size:12px;color:var(--demo-copy);border:1px solid var(--demo-line);border-radius:6px;background:var(--demo-panel)}.scenario-sources summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:16px;color:var(--demo-ink);list-style:none}.scenario-sources summary:after{content:'+';color:var(--demo-accent);margin-left:12px}.scenario-sources[open] summary:after{content:'−'}.scenario-sources summary>span{font-size:10px;margin-left:auto;color:var(--scenario-muted)}.scenario-sources article{padding:15px 18px;border-top:1px solid var(--demo-line)}.scenario-sources article strong{font-size:12px;font-weight:500;color:var(--demo-ink)}.scenario-sources time{font-size:10px;margin-left:14px;color:var(--scenario-muted)}.scenario-sources p{font-size:12px;margin-top:7px}
#system-image-dialog{padding:0;width:calc(100vw - 30px);height:calc(100dvh - 30px);max-width:1600px;max-height:none;overflow:hidden;background:light-dark(#f7faff,#101e30);border:1px solid light-dark(#c7d7e8,#35526d);border-radius:10px;color:light-dark(#173452,#edf5ff)}#system-image-dialog[open]{display:flex;flex-direction:column}#system-image-dialog::backdrop{background:#061221de;backdrop-filter:blur(9px)}#system-image-dialog header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;flex-shrink:0;border-bottom:1px solid light-dark(#c7d7e8,#35526d)}#system-image-dialog header span{font-size:10px;color:light-dark(#627c95,#a6bcd2)}#system-image-dialog h2{font-size:18px;font-weight:500;margin-top:5px}.image-viewer-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:auto;background:light-dark(#dfe7f1,#071422);padding:12px}.image-viewer-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}#system-image-dialog footer{padding:15px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-shrink:0}#system-image-dialog footer p{font-size:12px;line-height:1.7}#system-image-dialog footer small{font-size:10px;color:light-dark(#627c95,#a6bcd2)}#system-image-dialog footer>div:last-child{display:flex;align-items:center;gap:9px;flex-shrink:0}#system-image-dialog footer a{display:flex;align-items:center;gap:7px;font-size:11px;color:light-dark(#316fbf,#7ec2ff);margin-left:8px}#system-image-dialog footer a svg{width:14px;height:14px}.demo-stop-preview{width:100%;aspect-ratio:16/9;object-fit:contain;border:1px solid var(--demo-line);background:#e8edf3;border-radius:4px;margin:0 0 18px}.demo-stop:has(.demo-stop-preview) .demo-stop-top{margin-bottom:15px}.link-field .field-note{display:block;font-size:10px;line-height:1.8;margin-top:5px}
@media(min-width:1500px){.scenario-stage{grid-template-columns:minmax(0,1fr) 320px;gap:30px}.scenario-guide p{font-size:14px}.scenario-guide{gap:24px}}
@media(max-width:1050px){.scenario-stage{grid-template-columns:minmax(0,1fr) 255px;gap:19px}.scenario-head{padding:18px 22px;gap:20px}.scenario-head h2{font-size:25px}.scenario-toolbar,.scenario-steps{padding-inline:22px}.scenario-body{padding:18px 22px}.scenario-guide{gap:16px}.guide-heading strong{font-size:17px}.scenario-guide p{font-size:12px}.guide-value p{font-size:11px}.system-thumbnails button{flex-basis:111px}.system-thumbnails img{height:57px}.scenario-launch .button{font-size:11px;padding:9px 12px}.scenario-launch small{font-size:9px}.scenario-steps button{gap:6px;font-size:10px}}
@media(max-width:780px){.scenario-stage{grid-template-columns:1fr}.scenario-guide{display:grid;grid-template-columns:1fr 1fr;gap:17px}.guide-heading{grid-column:1/-1;padding-bottom:13px}.guide-value{grid-column:1/-1}.scenario-guide p{font-size:13px}.scenario-head{flex-wrap:wrap;gap:13px}.scenario-head>div:first-child{flex-basis:100%}.scenario-launch{flex-direction:row;align-items:center;gap:13px}.scenario-launch small{text-align:left}.scenario-head h2{font-size:24px}.scenario-steps button{flex-shrink:0;min-width:104px}.scenario-delivery{gap:20px}.scenario-delivery h3{font-size:21px}}
@media(max-width:550px){.scenario-head{padding:16px 18px 13px}.scenario-head h2{font-size:23px;margin:7px 0}.scenario-head p{font-size:11px;line-height:1.7}.scenario-kicker{font-size:9px}.scenario-launch .button{font-size:10px;min-height:32px;padding:7px 10px}.scenario-launch small{font-size:8px}.scenario-toolbar{padding-inline:18px}.scenario-view-tabs{gap:20px}.scenario-view-tabs button{font-size:11px;padding:11px 0;min-height:39px}.scenario-duration{font-size:9px}.scenario-view-tabs button>span{font-size:8px;margin-left:3px}.scenario-steps{padding:12px 18px 0;gap:5px}.scenario-steps button{padding:8px 9px;min-width:98px;font-size:10px}.scenario-body{padding:15px 18px 20px}.scenario-guide{grid-template-columns:1fr;gap:17px}.guide-heading,.guide-value{grid-column:auto}.guide-heading>span{font-size:24px}.guide-heading strong{font-size:18px}.guide-observe{padding:13px 15px}.system-frame-bar{padding:9px 10px;font-size:9px}.system-frame-bar button{font-size:9px}.system-figure figcaption{padding:11px 12px}.system-figure figcaption strong{font-size:11px}.system-figure figcaption span{font-size:10px}.system-figure figcaption small{font-size:8px}.system-thumbnails button{flex-basis:100px}.system-thumbnails img{height:50px}.system-thumbnails span{font-size:8px;padding:5px 4px}.scenario-delivery{grid-template-columns:1fr;gap:15px}.scenario-sources{grid-column:auto}.scenario-delivery h3{font-size:21px}.scenario-sources summary{font-size:11px}.scenario-delivery section{padding-bottom:17px}.scenario-sources time{display:block;margin:6px 0 0}.system-no-shot{min-height:230px;padding:22px}.system-no-shot h3{font-size:19px}.system-no-shot p{font-size:12px}#system-image-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:7px}#system-image-dialog header{padding:13px 15px}#system-image-dialog h2{font-size:15px}#system-image-dialog footer{padding:12px 15px;align-items:flex-start;flex-direction:column;gap:12px}#system-image-dialog footer p{font-size:11px}#system-image-dialog footer small{font-size:9px}#system-image-dialog footer>div:last-child{align-self:flex-end}.image-viewer-stage{padding:5px}}
@media(max-height:700px) and (min-width:781px){.scenario-head{padding-block:13px}.scenario-head h2{font-size:24px;margin:6px 0}.scenario-head p{font-size:11px}.scenario-toolbar button{padding-block:10px;min-height:38px}.scenario-steps{padding-top:12px}.scenario-body{padding-top:14px}.scenario-guide{gap:16px}.guide-heading{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.shot-zoom{transition:none}}
.image-viewer-stage{display:flex;align-items:center;justify-content:center}.image-viewer-stage img{width:100%;height:100%;object-fit:contain}
@media(max-height:820px) and (min-width:781px){
 .demo-header{padding-block:10px}.demo-dialog-title>span{margin-bottom:3px}.demo-route-tab{min-height:39px;padding-block:10px}
 .scenario-head{padding-block:13px}.scenario-head h2{font-size:24px;margin:6px 0}.scenario-head p{font-size:11px}
 .scenario-toolbar button{padding-block:9px;min-height:37px}.scenario-steps{padding-top:10px}.scenario-steps button{padding-block:8px}
 .scenario-body{padding-top:14px}
 .system-frame-bar{padding-block:8px}.system-figure figcaption{padding-block:10px}.scenario-guide{gap:14px}.guide-heading{padding-bottom:11px}
 .demo-overview{gap:20px}.demo-overview-head h2{font-size:28px;margin:9px 0 12px}.demo-overview-head p{font-size:13px}.demo-overview-head{padding-bottom:0}
 .demo-stop:has(.demo-stop-preview){padding:17px;min-height:0}.demo-stop:has(.demo-stop-preview) .demo-stop-top{margin-bottom:11px}.demo-stop-preview{height:115px;aspect-ratio:auto;margin-bottom:13px}
 .demo-stop:has(.demo-stop-preview) h3{font-size:18px;margin-bottom:8px}.demo-stop:has(.demo-stop-preview)>p{font-size:12px;margin-bottom:12px}.demo-stop:has(.demo-stop-preview) .demo-stop-bottom{padding-top:10px}
}

.scenario-alternative{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--demo-accent)}.scenario-alternative svg{width:12px;height:12px}
.scenario-video-button{border-color:light-dark(#7ca9d8,#5689bf)!important;color:var(--demo-accent)!important}.scenario-video-button svg{width:14px;height:14px;margin-right:5px}
#system-video-dialog{width:min(1080px,calc(100vw - 30px));max-width:none;max-height:calc(100dvh - 30px);padding:0;overflow:auto;border:1px solid light-dark(#bdd0e5,#42607f);border-radius:12px;background:light-dark(#f7faff,#0e2137);color:light-dark(#173452,#edf5ff)}
#system-video-dialog::backdrop{background:#061321d9;backdrop-filter:blur(8px)}
#system-video-dialog header,#system-video-dialog footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:17px 22px}
#system-video-dialog header{border-bottom:1px solid var(--demo-line)}
#system-video-dialog header small{display:block;color:var(--demo-accent);font-size:11px;margin-bottom:5px}
#system-video-dialog header h2{font-size:20px;font-weight:500}
#system-video-dialog video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 185px);background:#071525;object-fit:contain}
#system-video-dialog footer{display:block;border-top:1px solid var(--demo-line)}
#system-video-dialog footer p{font-size:13px;line-height:1.7;margin-bottom:4px}
#system-video-dialog footer small{font-size:11px;color:var(--demo-copy);line-height:1.6}
#system-video-next{float:right;margin:1px 0 8px 18px;padding:9px 13px;font-size:11px}
#system-video-next[hidden]{display:none}
@media(max-width:780px){.scenario-launch{flex-wrap:wrap}}