/* Custom Software chapter. Scoped to .cs-frame and .architecture-story[data-chapter="4"][data-cs-mode].
   The base (CSS) state of every element is the SETTLED, fully visible state. JS animations only play "from hidden to settled",
   so a failed script, reduced motion or Save-Data can never leave content invisible. --cs-s = screen px per master px. */
.cs-frame.recovery-frame{inset:0!important;left:0;right:0;top:0;bottom:0;overflow:hidden;pointer-events:none;background:#04070b;--cs-s:.6}
.cs-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.cs-plate{position:absolute;display:block;overflow:hidden;background:#04070b;
 -webkit-mask-image:linear-gradient(90deg,transparent var(--cs-w0,0%),#000 var(--cs-w1,0%),#000 var(--cs-w2,100%),transparent var(--cs-w3,100%)),linear-gradient(90deg,transparent 0,#000 var(--cs-fx,0%),#000 calc(100% - var(--cs-fx,0%)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--cs-fy,0%),#000 calc(100% - var(--cs-fy,0%)),transparent 100%);
 mask-image:linear-gradient(90deg,transparent var(--cs-w0,0%),#000 var(--cs-w1,0%),#000 var(--cs-w2,100%),transparent var(--cs-w3,100%)),linear-gradient(90deg,transparent 0,#000 var(--cs-fx,0%),#000 calc(100% - var(--cs-fx,0%)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--cs-fy,0%),#000 calc(100% - var(--cs-fy,0%)),transparent 100%);
 -webkit-mask-composite:source-in;mask-composite:intersect}
.architecture-story .world .cs-plate img{display:block;position:absolute;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:fill;opacity:1!important;transition:none;mask-image:none;-webkit-mask-image:none}
.cs-loading .cs-art{opacity:0}
/* overlays live in MASTER pixels (1672x941) and are scaled as one group */
.cs-art{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;pointer-events:none}
.cs-art i{position:absolute;display:block;pointer-events:none}
/* non-destructive veil over the baked Slovak copy column: the HTML copy replaces it (see implementation notes) */
.cs-mask{position:absolute;left:0;top:100px;max-width:360px;width:300px;height:712px;overflow:hidden;background:rgba(2,6,10,.5);
 -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%),linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent 100%);
 mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%),linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent 100%);
 -webkit-mask-composite:source-in;mask-composite:intersect}
.cs-mask:before{content:'';position:absolute;inset:-40px;background-image:var(--cs-img);background-size:420px 800px;background-repeat:no-repeat;background-position:40px 0;filter:blur(18px) brightness(.4)}
.cs-mask:after{content:'';position:absolute;inset:0;background:rgba(2,6,10,.55)}
.cs-frame[data-mode="tall"] .cs-mask{display:none}
.cs-lights{position:absolute;left:0;top:0;width:1672px;height:941px;mix-blend-mode:screen}
.cs-mod{opacity:0;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,150,64,.5),rgba(255,110,30,.2) 48%,transparent 72%)}
.cs-band{opacity:0;border-radius:50%;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,186,110,.55),rgba(255,120,40,.18) 55%,transparent 75%)}
.cs-surge{opacity:0;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,232,180,.9),rgba(255,140,50,.35) 46%,transparent 72%)}
.cs-cube{opacity:0;background:radial-gradient(circle,rgba(255,170,80,.6),rgba(255,120,30,.2) 45%,transparent 68%)}
.cs-shield{opacity:0;border-radius:14px;border:2px solid rgba(255,214,170,.8);box-shadow:0 0 26px rgba(255,140,50,.55),inset 0 0 28px rgba(255,140,50,.28)}
.cs-ripple{opacity:0;border-radius:50%;border:3px solid rgba(255,170,90,.75);box-shadow:0 0 22px rgba(255,130,40,.5),inset 0 0 22px rgba(255,130,40,.3);transform-origin:50% 50%}
.cs-kpi,.cs-tile{opacity:0;border-radius:9px;border:1.5px solid rgba(255,190,130,.85);box-shadow:0 0 14px rgba(255,130,40,.5),inset 0 0 14px rgba(255,130,40,.22)}
.cs-fx{overflow:hidden;border-radius:4px}
.cs-fx-bar{left:0;top:0;width:34px;height:100%;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,226,180,.4),transparent)}
.cs-fx-spark .cs-fx-bar{width:16px;background:linear-gradient(90deg,transparent,rgba(190,255,220,.75),transparent)}
.cs-row{opacity:0;border-radius:4px;background:linear-gradient(90deg,rgba(255,150,70,.0),rgba(255,150,70,.32) 20%,rgba(255,150,70,.22) 80%,rgba(255,150,70,0))}
.cs-routes{position:absolute;left:0;top:0;width:1672px;height:941px;overflow:visible}
.cs-routes path{fill:none;stroke-linecap:round}
.cs-r-glow{stroke:#ff8a2a;stroke-opacity:.15;stroke-width:7}
.cs-r-halo{stroke:#ff8a2a;stroke-opacity:.6;stroke-width:9;stroke-dasharray:.07 1.5;stroke-dashoffset:.18}
.cs-r-pulse{stroke:#fff3de;stroke-width:3;stroke-dasharray:.045 1.5;stroke-dashoffset:.18}
/* text patches (normal blending) */
.cs-patches{position:absolute;left:0;top:0;width:1672px;height:941px;overflow:visible}
.cs-patch-t{fill:#f4f7fa;font-family:inherit;letter-spacing:.01em}
.cs-t-title{letter-spacing:.02em}
.cs-t-label{fill:#e9eef3}
.cs-veil{position:absolute;inset:0;background:#030508;opacity:0;pointer-events:none}
.cs-replay{display:none;flex:none;width:44px;height:44px;min-height:44px;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,166,98,.5);border-radius:6px;background:rgba(8,10,14,.8);color:#f3e4d4;font:inherit;font-size:20px;line-height:1;cursor:pointer;pointer-events:auto}
.cs-replay:hover{border-color:#ffb27a;color:#fff}
.cs-replay:focus-visible{outline:2px solid #ffb276;outline-offset:3px}
.cs-actions{display:contents}
/* ---- copy block (shared story copy; list and note are inside it) ---- */
.cs-feat,.cs-note{display:none}
.architecture-story[data-chapter="4"][data-cs-mode] .world{inset:0!important;top:0!important;height:100%!important;min-height:0;background:#04070b}
.architecture-story[data-chapter="4"][data-cs-mode] .story-copy{position:absolute;padding:0;max-width:none;pointer-events:none}
.architecture-story[data-chapter="4"][data-cs-mode] :is(#story-kicker,#story-line,#chapter-extra){display:none}
.architecture-story[data-chapter="4"][data-cs-mode] .story-copy h1{text-transform:uppercase;font-weight:700;letter-spacing:.005em;text-wrap:balance;margin:0 0 max(10px,calc(16px*var(--cs-s,.6)));max-width:none;text-shadow:0 2px 22px rgba(0,0,0,.8)}
.architecture-story[data-chapter="4"][data-cs-mode] .story-description{color:#e6dfd7;max-width:none;margin:0;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.architecture-story[data-chapter="4"][data-cs-mode] .cs-feat{display:grid;list-style:none;margin:0;padding:0;pointer-events:none}
.architecture-story[data-chapter="4"][data-cs-mode] .cs-note{display:block;margin:0;color:#b9aea3;line-height:1.4;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.architecture-story[data-chapter="4"][data-cs-mode] .story-copy .button{pointer-events:auto;min-height:44px;background:#ff8c42;color:#1a0f08;border:0;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;font-weight:700;letter-spacing:.02em;white-space:nowrap;flex:0 1 auto;min-width:0}
.architecture-story[data-chapter="4"][data-cs-mode] .story-copy .button:after{content:'→';font-size:1.15em;line-height:1}
.architecture-story[data-chapter="4"][data-cs-mode] :is(button,a):focus-visible{outline:2px solid #ffb276;outline-offset:3px}
.architecture-story[data-chapter="4"][data-cs-mode] .story-navigation{background:linear-gradient(transparent,#030a10c0);padding-top:14px}
.architecture-story[data-chapter="4"][data-cs-mode] .cs-actions{display:flex;align-items:center;gap:10px;pointer-events:none}
.architecture-story[data-chapter="4"][data-cs-mode] .cs-replay{display:inline-flex}
.architecture-story[data-cs-static="1"][data-chapter="4"] .cs-replay,.architecture-story:not([data-cs-ready="1"]) .cs-replay{display:none}
.cs-feat-i{position:relative;display:flex;align-items:center;color:#f1e7dc;text-transform:uppercase;line-height:1.2}
.cs-feat-ico{flex:none;display:grid;place-items:center;border:1px solid rgba(255,150,70,.55);color:#ff9a4d;background:rgba(8,12,18,.62);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cs-feat-t{min-width:0;overflow-wrap:anywhere}
.cs-hot{left:-10px;right:-8px;top:-3px;bottom:-3px;border-radius:7px;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,138,50,.2),rgba(255,138,50,.04));box-shadow:inset 3px 0 0 #ff8a2a,0 0 18px rgba(255,122,26,.22);position:absolute}
/* levels chosen by layout(): 3 all, 2 without the note, 1 without the list, 0 title and link only */
.architecture-story[data-cs-detail="2"] .cs-note,.architecture-story[data-cs-detail="1"] .cs-note,.architecture-story[data-cs-detail="0"] .cs-note{display:none!important}
.architecture-story[data-cs-detail="1"] .cs-feat,.architecture-story[data-cs-detail="0"] .cs-feat{display:none!important}
.architecture-story[data-chapter="4"][data-cs-mode] .story-description{display:block!important}
.architecture-story[data-chapter="4"][data-cs-detail="0"] .story-description{display:none!important}
/* wide: copy column sits where the baked column was; sizes follow the plate scale */
.architecture-story[data-chapter="4"][data-cs-mode="wide"] .story-copy h1{font-size:max(26px,calc(46px*var(--cs-s,.6)));line-height:1.06}
.architecture-story[data-chapter="4"][data-cs-mode="wide"] .story-description{font-size:max(13px,calc(17px*var(--cs-s,.6)));line-height:1.45}
.architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-feat{gap:max(6px,calc(11px*var(--cs-s,.6)));margin:max(12px,calc(30px*var(--cs-s,.6))) 0 max(12px,calc(28px*var(--cs-s,.6)))}
.architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-feat-i{gap:max(10px,calc(18px*var(--cs-s,.6)));min-height:max(32px,calc(46px*var(--cs-s,.6)));font-size:max(10.5px,calc(12.6px*var(--cs-s,.6)))}
.architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-feat-ico{width:max(32px,calc(46px*var(--cs-s,.6)));height:max(32px,calc(46px*var(--cs-s,.6)));border-radius:max(6px,calc(8px*var(--cs-s,.6)))}
.architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-feat-ico svg{width:56%;height:56%}
.architecture-story[data-chapter="4"][data-cs-mode="wide"] .story-copy .button{font-size:max(13px,calc(14.5px*var(--cs-s,.6)));padding:0 max(16px,calc(20px*var(--cs-s,.6)));border-radius:6px}
.architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-note{font-size:max(10.5px,calc(11.5px*var(--cs-s,.6)));margin-top:max(10px,calc(16px*var(--cs-s,.6)))}
/* tall: phones and portrait tablets, copy under the scene */
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .story-copy{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:auto;width:auto}
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .story-copy h1{font-size:clamp(22px,6.6vw,40px);line-height:1.08;margin-bottom:8px}
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .story-description{font-size:clamp(13px,3.4vw,18px);line-height:1.42;max-width:38em}
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .cs-feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:10px 0 10px}
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .cs-feat-i{gap:9px;min-height:34px;font-size:11px;letter-spacing:.01em}
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .cs-feat-ico{width:32px;height:32px;border-radius:7px}
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .cs-hot{left:-4px;right:-4px}
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .story-copy .button{margin-top:4px;font-size:13px;padding:0 20px;border-radius:6px}
.architecture-story[data-chapter="4"][data-cs-mode="tall"] .cs-note{font-size:10.5px;margin-top:8px}
@media(min-width:600px){.architecture-story[data-chapter="4"][data-cs-mode="tall"] .cs-feat{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px}.architecture-story[data-chapter="4"][data-cs-mode="tall"] .cs-feat-i{font-size:12.5px}.architecture-story[data-chapter="4"][data-cs-mode="tall"] .cs-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.cs-frame *{animation:none!important;transition:none!important}}
@media(max-height:780px){
 .architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-feat{gap:3px;margin:10px 0 10px}
 .architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-feat-i{min-height:30px}
 .architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-feat-ico{width:30px;height:30px}
 .architecture-story[data-chapter="4"][data-cs-mode="wide"] .story-copy h1{margin-bottom:8px}
 .architecture-story[data-chapter="4"][data-cs-mode="wide"] .cs-note{margin-top:8px}
}

/* CTA arrow: a drawn arrow with its own box (the old text glyph overflowed the shrunken button and landed dark-on-dark on its edge); replay icon is an SVG centred in a button that matches the CTA height */
.architecture-story[data-chapter="4"][data-cs-mode] .story-copy .button{flex:0 0 auto;max-width:calc(100% - 54px);padding-inline:18px;gap:12px;line-height:1.15;white-space:normal;text-align:left;box-sizing:border-box}
.architecture-story[data-chapter="4"][data-cs-mode] .story-copy .button:after{content:'';flex:none;width:18px;height:14px;font-size:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1 7h15M10.5 1.5 16 7l-5.500 5.500' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1 7h15M10.5 1.5 16 7l-5.500 5.500' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.architecture-story[data-chapter="4"][data-cs-mode] .cs-actions{align-items:center}
.architecture-story[data-chapter="4"][data-cs-mode] .story-copy .button{height:44px;min-height:44px;align-self:center;margin-top:0!important;margin-bottom:0!important}
.cs-replay{align-self:center;height:44px;min-height:44px}
.cs-replay svg{display:block;flex:none}