/* Interactive image surfaces and the existing process theatre. */
.stories-media{min-width:0;perspective:1100px;position:relative}
.stories-item--operations .stories-media{grid-column:2;grid-row:1}
.stories-media .stories-visual{transform:perspective(1100px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));transition:transform .18s ease-out,box-shadow .3s;border-color:#527584;box-shadow:0 12px 0 -4px #142d3a,0 15px 0 -5px #6499a5,0 36px 65px #0009;isolation:isolate}
.stories-media .stories-visual::before{content:'';position:absolute;inset:0;z-index:1;border:1px solid #b1f5ff28;pointer-events:none;box-shadow:inset 0 0 75px #0002}
.stories-scan{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;align-items:center;color:#d5faff;font:500 9px var(--display);letter-spacing:.16em;text-shadow:0 2px 8px #000}
.stories-scan i{width:8px;height:8px;background:#b6f9ff;border-radius:50%;box-shadow:0 0 18px #a5f8ff}
.stories-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:29px}
.stories-controls button{position:relative;min-height:48px;border:1px solid #416475;background:#0d1d28;color:#9fbbc8;font:500 12px var(--display);padding:10px 7px;box-shadow:0 4px 0 #061019;transition:transform .2s,background .2s,color .2s}
.stories-controls button[aria-pressed=true]{color:#0c2834;background:#a5f8ff;border-color:#c3fbff;transform:translateY(-4px);box-shadow:0 7px 0 #225063,0 0 28px #72dfed20}
.stories-controls button:hover{border-color:#b0f4ff}
.stories-readout{position:relative;margin-top:23px;min-height:94px;padding-left:17px;border-left:2px solid #56889b}
.stories-readout strong{display:block;font:500 18px var(--display);color:#b8edf3}
.stories-readout p{font-size:12px;color:#9db5c0;margin-top:8px;max-width:530px}
.stories-media[data-active-step="1"] .stories-visual{border-color:#8af3ff;box-shadow:0 12px 0 -4px #234d5c,0 15px 0 -5px #a5f8ff,0 36px 65px #0009}
.stories-media[data-active-step="2"] .stories-visual{border-color:#e7ca87;box-shadow:0 12px 0 -4px #383426,0 15px 0 -5px #bda87d,0 36px 65px #0009}
.stories-details{margin-top:22px;border-top:1px solid #294650;border-bottom:1px solid #294650;padding:14px 0;color:#9bd9e4}
.stories-details summary{cursor:pointer;font:500 13px var(--display);min-height:26px;padding:4px 0}
.stories-details ul{margin:13px 0 5px}
.flow-stage{perspective:1100px;padding-bottom:25px}
.flow-space{transform-style:preserve-3d;transition:transform .35s;transform:rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg))}
.flow-card{backface-visibility:hidden;transition:transform .6s,opacity .4s,filter .4s,border-color .4s}
.flow-stage[data-focus="1"] .card-one,.flow-stage[data-focus="2"] .card-two,.flow-stage[data-focus="3"] .card-three{transform:translateZ(65px) rotateY(-4deg) rotateX(0deg) scale(1.08);z-index:5;border-color:#d4fdff;box-shadow:0 0 24px #9ae8ff33,14px 24px 35px #0008}
.flow-stage[data-focus="1"] .card-two,.flow-stage[data-focus="1"] .card-three,.flow-stage[data-focus="2"] .card-one,.flow-stage[data-focus="2"] .card-three,.flow-stage[data-focus="3"] .card-one,.flow-stage[data-focus="3"] .card-two{opacity:.3;filter:saturate(.3)}
.flow-step-controls{position:relative;z-index:8;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:12px}
.flow-step-controls button{min-height:44px;padding:9px 4px;background:#142935;border:1px solid #34586b;color:#a9c8d5;font:500 11px var(--display)}
.flow-step-controls button[aria-pressed=true]{background:#a5f8ff;color:#102b39;border-color:#b8f9ff}
.flow-step-note{min-height:35px;margin-top:15px;color:#b1d5e3;font:400 12px/1.5 var(--body)}
.interaction-hint{font:500 10px var(--display);letter-spacing:.08em;color:#8db1c3;margin-top:16px}
@media(max-width:760px){.stories-item--operations .stories-media{grid-column:auto;grid-row:auto}.stories-readout{min-height:90px}.stories-readout strong{font-size:17px}}
@media(max-width:650px){.flow-stage[data-focus="1"] .card-one,.flow-stage[data-focus="2"] .card-two,.flow-stage[data-focus="3"] .card-three{transform:translateZ(20px) rotateY(0) rotateX(0) scale(1.025)}.stories-controls button{font-size:11px}.stories-scan{left:12px;right:12px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.stories-media .stories-visual,.flow-space{transform:none!important}.stories-controls button,.flow-card,.stories-media .stories-visual{transition:none!important}}
body.motion-paused .stories-media .stories-visual,body.motion-paused .flow-space{transform:none!important}
body.motion-paused .flow-card,body.motion-paused .stories-controls button{transition:none!important}