.client-stage{position:fixed;inset:0;z-index:5600;display:flex;flex-direction:column;background:#0b1420;color:#edf2f6;font-family:system-ui,sans-serif;overflow:hidden}
.client-stage[hidden],.client-stage [hidden]{display:none!important}
.client-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid #344251;font-size:19px;font-weight:650;flex-shrink:0}
.client-head>div{display:flex;gap:10px;align-items:center}.client-head label{font-size:13px;font-weight:400}
.client-stage button,.client-stage select{font:600 14px system-ui;border:1px solid #526376;background:#162638;color:#f1f5f8;padding:10px 15px;border-radius:4px;cursor:pointer}
.client-stage button:hover{border-color:#efbb70}.client-stage button:disabled{opacity:.45;cursor:default}.client-stage a{color:#b9d9f1}
.client-body{display:grid;grid-template-columns:minmax(330px,1fr) minmax(0,1.6fr);flex:1;min-height:0}
.client-copy{padding:clamp(22px,2.1vw,38px);overflow-y:auto;min-width:0}
.client-section{color:#f4bd70;font-size:13px;letter-spacing:1px;font-weight:600;margin:0 0 14px}
.client-copy h1{font-size:clamp(30px,3vw,46px);line-height:1.1;letter-spacing:-1px;font-weight:650;margin:0 0 20px}
.client-message{font-size:clamp(18px,1.6vw,25px);line-height:1.5;color:#e2e8ee;margin:0 0 18px}
.client-copy ul{padding-left:23px;color:#b6c6d7;font-size:clamp(16px,1.4vw,21px);line-height:1.5}.client-copy li+li{margin-top:8px}
.client-scope{font-size:21px;color:#f4bd70;line-height:1.6}.client-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
#story-result{font-size:15px;line-height:1.5;border-left:3px solid #6e849b;padding-left:12px;margin-top:14px}#story-result:empty{display:none}#story-result.expected{border-color:#6ad4a1}#story-result.unexpected{border-color:#ff8994;color:#ffd3d8}
.client-visual{position:relative;min-width:0;min-height:0;border-left:1px solid #344251;background:#0a111a;overflow:hidden}
#story-map-slot{height:100%;width:100%;display:flex;min-height:0}
#story-map-slot #map-container{height:100%;width:100%;flex:1;min-height:0;border:0;border-radius:0}
#story-map-slot .map-expand-btn{display:none}
#story-map-slot .map-zoom-controls{top:50%;bottom:auto;left:10px;transform:translateY(-50%);flex-direction:column;max-width:76px}
#story-map-slot .map-zoom-level{display:none}
#story-map-slot #flow-layer path,#story-map-slot #flow-layer line{vector-effect:non-scaling-stroke;stroke-width:2px}
#story-map-slot #geography-layer path{vector-effect:non-scaling-stroke;stroke-width:1px}
.client-visual.has-trace{display:grid;grid-template-columns:minmax(0,1fr) 300px}
#story-trace-slot{min-width:0;min-height:0;border-left:1px solid #344251;background:#101c2a;overflow:auto;padding:14px}
#story-trace-slot .ping-trace-card{position:static;width:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;background:none;font-size:14px;overflow:visible}
#story-trace-slot .ping-trace-title,#story-trace-slot .ping-trace-title strong{font-size:14px}
#story-trace-slot .ping-note{font-size:12px;line-height:1.45}
#story-trace-slot .ping-trace-steps{max-height:clamp(160px,35vh,390px);font-size:13px;line-height:1.65}
#story-trace-slot .ping-trace-actions button{font-size:12px;padding:8px 10px}
#story-trace-slot #map-ping-policy-actions{display:none}
#story-diagram{height:100%;display:flex;flex-direction:column;padding:16px;overflow:hidden}#story-diagram svg{width:100%;height:100%;flex:1;min-height:0}#story-diagram p{font-size:14px;line-height:1.5;color:#b4c5d7;margin:10px 0 0;flex:none}
#story-budget{padding:clamp(24px,4vw,65px);height:100%;overflow:auto;display:flex;flex-direction:column;justify-content:center}
#story-budget table{border-collapse:collapse;width:100%;font-size:clamp(15px,1.5vw,24px);margin:18px 0 28px}#story-budget th,#story-budget td{padding:18px 10px;text-align:left;border-bottom:1px solid #344251;font-weight:400}#story-budget thead th{color:#f4bd70;font-weight:650}#story-budget p{color:#b8c8d7;font-size:17px;line-height:1.6}
.client-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid #344251;flex-shrink:0}.client-footer>div{display:flex;gap:12px;align-items:center}.client-footer>p{width:100%;margin:0;color:#8da5bc;font-size:12px}.client-footer a{font-size:13px}
#stage-next{background:#ecb96f;color:#172231;border-color:#ecb96f}#stage-progress{white-space:nowrap;color:#b9c9da;font-size:15px}
body.client-presenting #sm-overlay{z-index:5900}body.client-presenting #dev-overlay{z-index:6000}
#presentation-launch-status{color:#f4bd70;font-size:12px;max-width:220px}
.c5-security{line-height:1.5;min-width:0}.c5-security a{color:#b9d9f1}.c5-security select{max-width:100%;margin:10px 0;padding:9px;background:#172235;color:#edf2f6;border:1px solid #526376}.c5-security label{display:block}.c5-policy-scroll{overflow:auto;max-width:100%}.c5-policy-table{border-collapse:collapse;width:100%;font-size:13px}.c5-policy-table th,.c5-policy-table td{text-align:left;padding:10px;border-bottom:1px solid #344251;overflow-wrap:anywhere}.c5-policy-table td:first-child{min-width:155px}.c5-policy-allow{color:#6ad4a1}.c5-policy-deny{color:#ffb0b8}#c5-security-result{padding:10px 0}#c5-security-result p{overflow-wrap:anywhere}
#story-security{padding:clamp(22px,3vw,48px);height:100%;overflow:auto;display:flex;flex-direction:column;justify-content:center}#story-security table{border-collapse:collapse;width:100%;font-size:clamp(15px,1.4vw,21px)}#story-security td,#story-security th{padding:15px 9px;text-align:left;border-bottom:1px solid #344251}#story-security p{color:#b6c6d7;font-size:17px;line-height:1.5}#story-security small{display:block;font-size:13px;color:#b6c6d7;margin-top:5px}
.c5-policy-scroll>.c5-policy-table{min-width:760px}
.c5-assurance{line-height:1.5;min-width:0;overflow-wrap:anywhere}.c5-assurance h3{margin:10px 0}.c5-assurance details{margin:16px 0;padding:12px;border:1px solid #344251;border-radius:6px}.c5-assurance summary{cursor:pointer;font-weight:600}.c5-assurance a{color:#b9d9f1}.c5-qos-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}.c5-qos-inputs label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:13px;justify-content:flex-end}.c5-qos-inputs input,.c5-qos-inputs select{box-sizing:border-box;width:100%;min-width:0;padding:9px;border:1px solid #526376;background:#172235;color:#edf2f6;border-radius:4px;font:inherit}.c5-assurance .c5-policy-table{min-width:0}.c5-assurance .c5-policy-table th,.c5-assurance .c5-policy-table td{min-width:0}.c5-assurance details .c5-policy-table{min-width:520px}
.c5-config-text{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.65 ui-monospace,monospace;padding:16px;background:#101824;border:1px solid #344251;border-radius:6px;max-width:100%}
#dev-tabs{flex-wrap:wrap}
#satellite-context{position:absolute;top:48px;left:12px;width:96px;height:180px;z-index:20;background:#101c2ae8;color:#c8d9e9;border:1px solid #526376;border-radius:5px;padding:5px;cursor:pointer;display:flex;flex-direction:column;font:11px system-ui}
#satellite-context[hidden]{display:none}#satellite-context svg{width:100%;height:100%;min-height:0}
@media(max-width:850px){.client-head{padding:10px 14px;font-size:16px;flex-wrap:wrap}.client-head>div{flex-wrap:wrap}.client-body{grid-template-columns:1fr;overflow-y:auto;display:flex;flex-direction:column}.client-copy{padding:22px;overflow:visible;flex:none}.client-copy h1{font-size:30px;margin-bottom:18px}.client-visual{min-height:470px;flex:1 0 470px;border-left:0;border-top:1px solid #344251}.client-footer{padding:10px 14px;gap:10px}.client-footer>div{flex-wrap:wrap}.client-footer>p{font-size:10px}.client-stage button,.client-stage select{font-size:12px;padding:8px 10px}#story-budget{padding:20px}#story-budget table{font-size:15px}#story-budget th,#story-budget td{padding:12px 7px}}
@media(prefers-reduced-motion:reduce){.client-stage *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:1100px){.client-body{grid-template-columns:minmax(290px,.85fr) minmax(0,1.6fr)}.client-visual.has-trace{grid-template-columns:minmax(0,1fr) 245px}#story-trace-slot{padding:10px}}
@media(max-width:850px){.client-body{display:flex}.client-visual.has-trace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(390px,58vh) minmax(200px,auto);min-height:650px;flex-basis:650px}#story-trace-slot{border-left:0;border-top:1px solid #344251;max-height:280px;overflow-y:auto}#story-trace-slot .ping-trace-card{font-size:12px}#story-trace-slot .ping-trace-steps{max-height:150px;font-size:12px}}


.c5-assurance>.c5-policy-scroll:first-of-type td:nth-child(2){white-space:nowrap}
/* Guided examples: a plain-language story above the live evidence. */
.client-body{grid-template-columns:minmax(300px,.8fr) minmax(0,1.7fr)}
.client-copy{background:linear-gradient(155deg,#14293a,#0b1420 65%)}
.client-copy h1{font-size:clamp(29px,2.65vw,43px);line-height:1.13}
.client-message{font-size:clamp(17px,1.4vw,22px);line-height:1.55}
.client-copy ul{font-size:clamp(15px,1.1vw,18px);padding-left:18px}
.client-copy li{padding:8px 0}.client-actions button{font-size:12px;padding:9px 11px}
#story-replay{background:#63dfc3;color:#092b2b;border-color:#63dfc3;font-size:15px;padding:12px 18px}
.story-player{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #324a5e;padding-top:15px}.story-player label{width:100%;font-size:12px;color:#b3c8d9;display:flex;gap:8px;align-items:center}.story-player button{font-size:12px;padding:8px 10px}
.client-visual{display:flex;flex-direction:column}.client-visual.has-trace{display:flex;flex-direction:column}
#story-lab{flex:none;padding:22px 26px 18px;background:radial-gradient(ellipse at top right,#184c50aa,transparent 65%),#101e2c;border-bottom:1px solid #375364;position:relative;z-index:1}
.story-lab-heading{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#a3bbcb;letter-spacing:.5px}.story-live{color:#76e3c5}#story-phase{color:#f8cc82;text-align:right}
#story-event{font-size:clamp(21px,2vw,31px);line-height:1.2;margin:14px 0 8px;color:#f2f8ff}#story-event-copy{font-size:clamp(14px,1.2vw,18px);line-height:1.5;color:#bcd0de;margin:0 0 14px;max-width:75ch}
#story-timeline{display:flex;gap:5px;padding:0;margin:13px 0 0;list-style:none;flex-wrap:wrap}#story-timeline li{font-size:10px;padding:5px 9px;border-bottom:2px solid #3c5265;color:#a1b5c7}#story-timeline li[aria-current]{color:#80ecd0;border-color:#70e1c1;background:#70e1c111}#story-timeline .finished{border-color:#4c9c89}
.story-journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:12px 0}
.story-node{position:relative;display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0;padding:12px 10px;border:1px solid #435f73;border-radius:9px;background:#102b3c}
.story-node:not(:last-child):after{content:'›';position:absolute;right:-17px;top:31%;font-size:28px;color:#678ca3}.story-node strong{font-size:clamp(12px,1.05vw,16px);line-height:1.25;overflow-wrap:anywhere}.story-node-icon{font-size:10px;color:#7ddfc9;font-weight:800;letter-spacing:2px}.story-node-caption{font-size:10px;color:#9db6c8}.flowing .story-node{border-color:#397e71}.flowing .story-node:not(:last-child):after{color:#71edca;animation:story-flow 1.8s ease-in-out infinite}.flowing .story-node:nth-child(2):after{animation-delay:.4s}.flowing .story-node:nth-child(3):after{animation-delay:.8s}
.node-failed{background:#482732;border-color:#ef9a96!important}.node-failed .story-node-caption{color:#ffb5ac}.node-failed:after{content:'×'!important;color:#ffa49c!important;animation:none!important}
.story-proof{display:flex;gap:8px;flex-direction:column;padding:10px 14px;border-left:3px solid #64d9bb;background:#08152188}.story-proof>span{font-size:11px;color:#a9c4d5}.story-proof strong{font-size:19px;color:#effaff}.story-proof small{font-size:11px;line-height:1.4;color:#b2c6d5}.story-service-check,#story-takeaway{font-size:12px;line-height:1.5;color:#aee3d1;margin:9px 0 0}#story-takeaway:empty{display:none}
#story-map-slot{flex:1;min-height:250px;height:auto}#story-diagram{flex:1;min-height:240px;height:auto}#story-budget,#story-security{flex:1;min-height:200px;height:auto;padding:22px;justify-content:flex-start}#story-security table{font-size:15px}#story-security td,#story-security th{padding:10px 8px}
#story-trace-slot{display:none;max-height:220px;border-left:0;border-top:1px solid #344251} .show-technical #story-trace-slot:not([hidden]){display:block}#story-trace-slot .ping-trace-steps{max-height:110px}
.story-row-current{background:#6be0c31c;box-shadow:inset 3px 0 #72e1c6}
.story-qos{display:grid;gap:8px}.story-qos>div{display:grid;grid-template-columns:150px minmax(30px,1fr) 118px;gap:12px;align-items:center;font-size:12px}.story-qos strong{text-align:right;font-size:11px}.story-bar{position:relative;height:15px;border-radius:4px;background:#07141e;overflow:hidden}.story-bar i,.story-bar b{position:absolute;inset:0 auto 0 0;background:#7595ad66;transition:width .8s}.story-bar b{background:#72dfc3}.story-chart-key{font-size:11px;color:#abc0d0}
.example-paused *{animation-play-state:paused!important}.client-footer{padding:10px 24px}.client-footer>p{display:none}
@keyframes story-flow{0%,100%{opacity:.3;transform:translateX(-2px)}50%{opacity:1;transform:translateX(2px)}}
@media(max-height:800px) and (min-width:851px){#story-lab{padding:15px 21px 12px}#story-event{font-size:23px;margin:10px 0 6px}#story-event-copy{font-size:14px}.story-node{padding:8px}.story-node-caption{display:none}.story-proof{padding:8px 11px}.story-proof strong{font-size:16px}#story-map-slot{min-height:180px}.client-head{padding:9px 20px}.client-copy{padding:24px}.client-actions{gap:6px}}
@media(max-width:850px){.client-body{display:flex}.client-visual,.client-visual.has-trace{display:flex;min-height:750px;flex-basis:750px;overflow:visible}#story-lab{padding:18px}#story-map-slot{min-height:370px}#story-diagram{min-height:370px}.story-journey{gap:12px}.story-node{padding:9px 6px}.story-node strong{font-size:11px}.story-node:not(:last-child):after{right:-12px;font-size:20px}.story-node-caption{display:none}.story-qos>div{grid-template-columns:90px minmax(20px,1fr) 100px;gap:6px;font-size:10px}.client-footer{padding:9px 12px}.client-head>span{font-size:13px}.client-copy{padding:22px}.story-lab-heading{font-size:9px}.story-player button{font-size:11px}.client-visual.show-technical{min-height:980px}}
@media(prefers-reduced-motion:reduce){.flowing .story-node:after{animation:none}.story-bar i,.story-bar b{transition:none}}
.story-type-ha,.story-type-qos{flex:1!important;overflow-y:auto}.ha-nodes .story-node:after{display:none}.ha-nodes .story-node-caption{display:none}.story-type-ha .story-journey{margin:30px 0}.story-type-ha .story-node{padding:22px 12px}.story-type-qos .story-qos{margin-top:20px;gap:17px}.story-type-qos .story-bar{height:23px}
.story-more{font-size:12px;align-self:center}.story-more summary{cursor:pointer;color:#b5cbdc;padding:10px}.story-more[open]{display:flex;flex-wrap:wrap;width:100%;padding:8px;border:1px solid #344c60;border-radius:6px}.story-more button{margin:4px}#story-lab[data-tone=danger] .story-proof{border-color:#ff969c}#story-lab[data-tone=warning] .story-proof{border-color:#f6c17f}
.story-node-icon{display:flex;align-items:center;gap:9px}.story-node-icon small{font-size:9px}
@media(max-height:800px) and (min-width:851px){.story-node-icon svg{width:19px;height:19px}}
.story-qos .story-bar b{transform-origin:left;animation:story-grow 1s ease-out both}@keyframes story-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#story-map-slot #chile-map{box-sizing:border-box;padding:10px}


/* C5 recovery exercise: compact, synthetic operations, readable on mobile. */
.story-recovery-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.story-recovery-stats>div{padding:12px;background:#0a1723;border:1px solid #385366;border-radius:9px}
.story-recovery-stats span{display:block;font-size:11px;color:#b6c9d6}.story-recovery-stats strong{display:block;font-size:21px;margin-top:5px;color:#f0f7fa}
.story-recovery-label{font-size:13px;line-height:1.5;color:#c1d3df;margin:12px 0}
.story-ledger{display:grid;gap:7px}.story-ledger>div{display:grid;grid-template-columns:1fr .7fr 1.2fr;gap:8px;padding:10px 12px;border-radius:7px;font-size:13px;background:#0b1926;border-left:3px solid #6ddaba}
.story-ledger>div.reconcile{border-color:#f8c179}.story-ledger strong{font-weight:600;color:#85e0c8}.story-ledger .reconcile strong{color:#f8c179}
.story-recovery-checks{list-style:none;display:grid;gap:9px;margin:15px 0;padding:0}.story-recovery-checks li{padding:10px;background:#0b1926;border-radius:7px;font-size:14px}.story-recovery-checks span{display:inline-block;margin-right:10px;color:#85e0c8}
.story-type-ha .story-journey{margin:16px 0}.story-type-ha .story-node{padding:13px 9px}
.client-footer .story-tour{width:100%;flex-wrap:wrap;gap:8px;border-top:1px solid #263a4d;padding-top:9px}
.story-tour label{display:flex;align-items:center;gap:7px;font-size:12px;color:#bacbda}
.story-tour button,.story-tour select{padding:7px 10px;font-size:12px}
#story-tour-start{background:#183f3a;border-color:#65cbb1}
#story-tour-status{font-size:12px;color:#b7cbd9;line-height:1.4;margin-left:auto}
@media(max-width:850px){.client-footer .story-tour{gap:5px;padding-top:6px}.story-tour button,.story-tour select{padding:6px 8px;font-size:11px}#story-tour-status{width:100%;margin-left:0;font-size:10px}}
@media(max-width:850px){.story-recovery-stats{gap:5px}.story-recovery-stats>div{padding:8px}.story-recovery-stats strong{font-size:17px}.story-recovery-stats span{font-size:10px}.story-ledger>div{font-size:11px;padding:9px 7px}.story-recovery-checks li{font-size:12px}.c5-assurance #c5-recovery-scenario{max-width:100%}}

/* The closing scene remains visible for questions and live inspection. */
.story-type-close{flex:1!important;overflow-y:auto;display:flex;flex-direction:column;justify-content:center}
.story-type-close #story-journey,.story-type-close #story-timeline{display:none}
.story-conclusions{display:grid;gap:12px;margin:20px 0}
.story-conclusions>div{padding:15px 18px;border:1px solid #385366;border-left:3px solid #76e3c5;border-radius:8px;background:#0b1926}
.story-conclusions strong{font-size:17px;color:#8ce6cf}
.story-conclusions p{font-size:15px;line-height:1.5;color:#c1d3df;margin:6px 0 0}
.story-type-close #story-takeaway{font-size:18px;line-height:1.6;color:#f0f7fa}

/* Al pausar, la barra conserva visible la asignación ya calculada. */
.example-paused .story-bar b{animation:none}

/* Recording view keeps the examples automatic and the audience focused on the result. */
.client-stage.tour-playing .story-player,.client-stage.tour-playing .client-actions,.client-stage.tour-playing #story-timeline{display:none}
.client-stage.tour-playing #story-phase{font-weight:600}

.client-stage #story-timeline,.client-stage #story-step{display:none}