/* The operational mission control is scoped so it can sit alongside the V3 portfolio. */
.cloud-ops-section{--ink:#1e1b4b;--muted:#49566d;--teal:#0f766e;--bright:#14b8a6;--line:#cfd8e3;--phase:#0f766e;color:var(--ink)}
.cloud-ops-heading{padding:0 0 28px}.cloud-ops-heading .eyebrow{margin-bottom:15px}.cloud-ops-heading h2{margin:0 0 12px}.cloud-ops-heading p:last-child{max-width:75ch;color:var(--muted);font-size:16px;line-height:1.8;margin:0}
.cloud-ops-section .cloud-demo{width:min(100%,1320px);margin:0 auto;background:linear-gradient(135deg,#fff,#edf4f5);border-color:#a4c9c2;box-shadow:0 4px 0 #cfd8e3,0 28px 80px #16454c12}
.cloud-ops-section .story-navigation{scrollbar-width:thin}
.cloud-ops-section .story-navigation button{font-size:11px}
.cloud-ops-section .node-state{color:var(--teal)}
.cloud-ops-section .demo-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cloud-ops-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;list-style:none;margin:0;padding:0;color:var(--muted);font-size:13px;line-height:1.7}
.cloud-ops-legend li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cloud-ops-section .story .demo-hint{margin:0;min-height:0;max-width:none;color:var(--muted);font-size:13px;line-height:1.7}
html[data-theme=cosmos] .cloud-ops-section{--ink:#e3eef6;--muted:#9cb1c5;--teal:#60d4c8;--bright:#48dccc;--line:#284357;--phase:#60d4c8;color:var(--ink)}
html[data-theme=cosmos] .cloud-ops-section .cloud-demo{background:radial-gradient(ellipse at 52% 27%,#16465633,transparent 50%),linear-gradient(130deg,#0f2134ef,#0a1726f5);border-color:#295064;box-shadow:0 4px 0 #102b3a,0 32px 90px #0005,inset 0 1px 0 #73cfdb0a}
html[data-theme=cosmos] .cloud-ops-section .demo-header,html[data-theme=cosmos] .cloud-ops-section .story{background:#0d1c2dcc;border-color:#263e52}
html[data-theme=cosmos] .cloud-ops-section .operations-flow,html[data-theme=cosmos] .cloud-ops-section .core-strip{background:#122538aa;border-color:#28404d99;color:#8eafc0}
html[data-theme=cosmos] .cloud-ops-section .core-strip:hover,html[data-theme=cosmos] .cloud-ops-section .cloud-demo[data-phase=operate] .core-strip{background:#18414a77}
html[data-theme=cosmos] .cloud-ops-section .foundation{border-color:#243f53;color:#8ea3b9}
html[data-theme=cosmos] .cloud-ops-section .foundation p{color:#a9bdcc}
html[data-theme=cosmos] .cloud-ops-section .stage{background-image:radial-gradient(#5b8da655 .65px,transparent .65px)}
html[data-theme=cosmos] .cloud-ops-section .stage::before{background:radial-gradient(ellipse,#14b8a614,transparent 64%)}
html[data-theme=cosmos] .cloud-ops-section .depth-plane{border-color:#488d9e55;background:linear-gradient(140deg,#16405120,#142c4b35);box-shadow:0 10px 30px #0002}
html[data-theme=cosmos] .cloud-ops-section .depth-plane span{color:#6f9eae}
html[data-theme=cosmos] .cloud-ops-section .node{background:linear-gradient(140deg,#17344bd9,#13253be8);border-color:#335570;box-shadow:0 3px 0 #0b1a2ae6,0 12px 26px #0002,inset 0 1px 0 #9bddf010}
html[data-theme=cosmos] .cloud-ops-section .node.is-highlighted{border-color:var(--phase);background:linear-gradient(140deg,#1a444bdd,#15333de8);box-shadow:0 3px 0 #103238,0 0 0 4px #14b8a609,0 0 25px #14b8a612}
html[data-theme=cosmos] .cloud-ops-section .cluster{background:linear-gradient(140deg,#15374b88,#1e2c4b77);border-color:#375b73}
html[data-theme=cosmos] .cloud-ops-section .replica{color:#dceaf4;background:linear-gradient(130deg,#1e4359ee,#152e42ee);border-color:#477982;box-shadow:0 3px 0 #0d2635,inset 0 1px 0 #72dcc715}
html[data-theme=cosmos] .cloud-ops-section .replica-symbol{color:#69d6c9}
html[data-theme=cosmos] .cloud-ops-section .replica small{color:#a9bdcc}
html[data-theme=cosmos] .cloud-ops-section .replica.is-idle{border-color:#2c4b63;opacity:.32}
html[data-theme=cosmos] .cloud-ops-section .replica.is-failed{background:linear-gradient(140deg,#442f2a,#2c2631);border-color:#c0835b}
html[data-theme=cosmos] .cloud-ops-section .replica.is-failed small{color:#f2ad7b}
html[data-theme=cosmos] .cloud-ops-section .server-front{background:repeating-linear-gradient(0deg,#255362 0 3px,#42777e 3px 4px);border-color:#70cbbf}
html[data-theme=cosmos] .cloud-ops-section .server-side{background:#193e4f;border-color:#477d85}
html[data-theme=cosmos] .cloud-ops-section .server-top{background:#327d85;border-color:#70cbbf}
html[data-theme=cosmos] .cloud-ops-section .node::after,html[data-theme=cosmos] .cloud-ops-section .replica::after{background:#12303f;border-color:#355d6c}
html[data-theme=cosmos] .cloud-ops-section .node::before,html[data-theme=cosmos] .cloud-ops-section .replica::before{background:#1a3d4a;border-color:#355d6c}
html[data-theme=cosmos] .cloud-ops-section .request-paths path{stroke:#5494a3}
html[data-theme=cosmos] .cloud-ops-section .story-category{border-color:#355469}
html[data-theme=cosmos] .cloud-ops-section .story-progress{background:#213b50}
html[data-theme=cosmos] .cloud-ops-section .story-navigation button{color:#a9bdcc}
html[data-theme=cosmos] .cloud-ops-section .story-navigation button:hover{background:#17303e;color:#cceee9}
html[data-theme=cosmos] .cloud-ops-section .story-navigation button[aria-current=step]{background:#19434066;color:var(--phase)}
@media print{.cloud-ops-section{display:none}}
.cloud-ops-section *{box-sizing:border-box}
.cloud-ops-section button,.cloud-ops-section a{-webkit-tap-highlight-color:transparent}
.cloud-ops-section button{font:inherit}
.cloud-ops-section button:focus-visible,.cloud-ops-section a:focus-visible{outline:2px solid var(--teal);outline-offset:5px}
.cloud-ops-section button{touch-action:manipulation}
.cloud-ops-section a{color:inherit;text-decoration:none}
.cloud-ops-section button[hidden]{display:none!important}
.cloud-ops-section .page-header,.cloud-ops-section main{width:min(1180px,calc(100% - 80px));margin-inline:auto}
.cloud-ops-section .page-header{display:flex;align-items:center;height:92px;gap:28px;border-bottom:1px solid var(--line)}
.cloud-ops-section .brand{font:800 32px/1 Manrope,sans-serif;letter-spacing:-1.5px}
.cloud-ops-section .brand span{color:var(--bright)}
.cloud-ops-section .lab-label{font:10px var(--mono);letter-spacing:1.5px;color:var(--muted)}
.cloud-ops-section .original-link{margin-left:auto;color:var(--muted);font-size:12px}
.cloud-ops-section .original-link span{margin-left:7px;color:var(--teal)}
.cloud-ops-section .intro{padding:48px 0 30px;max-width:800px}
.cloud-ops-section .eyebrow{display:flex;align-items:center;gap:9px;font:10px var(--mono);letter-spacing:1.5px;color:var(--muted);margin:0 0 16px}
.cloud-ops-section .eyebrow span{width:5px;height:5px;border-radius:50%;background:var(--bright)}
.cloud-ops-section h1{font:650 clamp(30px,4vw,45px)/1.23 Manrope,sans-serif;letter-spacing:-1.6px;margin:0 0 15px}
.cloud-ops-section h1 span{color:var(--teal)}
.cloud-ops-section .intro>p:last-child{color:var(--muted);font-size:15px;margin:0;max-width:620px}
.cloud-ops-section .cloud-demo{overflow:hidden;border:1px solid #b9d5d1;border-radius:18px;background:linear-gradient(140deg,#fff,#f3faf8);box-shadow:0 4px 0 #dce6e6,0 24px 65px #23465b0a}
.cloud-ops-section .cloud-demo[data-phase=scale],.cloud-ops-section .cloud-demo[data-phase=release]{--phase:#0f766e}
.cloud-ops-section .cloud-demo[data-phase=cache]{--phase:#087d7b}
.cloud-ops-section .cloud-demo[data-phase=queue]{--phase:#a34a17}
.cloud-ops-section .cloud-demo[data-phase=resilience]{--phase:#a34a17}
.cloud-ops-section .cloud-demo[data-phase=observe]{--phase:#494091}
.cloud-ops-section .demo-header{display:flex;align-items:center;gap:15px;min-height:64px;padding:8px 24px;border-bottom:1px solid #dce4ed99;background:#ffffffa0}
.cloud-ops-section .scenario-label{display:flex;align-items:center;gap:8px;color:#788698;font:9px var(--mono);letter-spacing:1.1px}
.cloud-ops-section .status-dot{width:4px;height:4px;border-radius:50%;background:var(--bright)}
.cloud-ops-section .load-summary{display:flex;align-items:center;gap:9px;margin-left:auto;font-size:11px;color:var(--muted)}
.cloud-ops-section .load-indicator{height:15px;display:flex;align-items:flex-end;gap:3px}
.cloud-ops-section .load-indicator i{display:block;width:3px;background:#c4e5df;border-radius:1px}
.cloud-ops-section .load-indicator i:nth-child(1){height:4px}
.cloud-ops-section .load-indicator i:nth-child(2){height:7px}
.cloud-ops-section .load-indicator i:nth-child(3){height:11px}
.cloud-ops-section .load-indicator i:nth-child(4){height:15px}
.cloud-ops-section .cloud-demo[data-high-load=true] .load-indicator i{background:var(--phase)}
.cloud-ops-section .pause-button{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.cloud-ops-section .pause-button:hover{background:#e8f5f2;color:var(--teal)}
.cloud-ops-section .pause-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cloud-ops-section .play-icon,.cloud-ops-section .pause-button[aria-pressed=true] .pause-icon{display:none}
.cloud-ops-section .pause-button[aria-pressed=true] .play-icon{display:block}
.cloud-ops-section .stage{height:560px;position:relative;margin:0 18px;background-image:radial-gradient(#7d9aab32 .6px,transparent .6px);background-size:18px 18px;isolation:isolate}
.cloud-ops-section .stage::before{content:'';position:absolute;inset:6% 21% 20% 28%;border-radius:50%;background:radial-gradient(ellipse,#14b8a60c,transparent 70%);z-index:-1}
.cloud-ops-section .connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.cloud-ops-section .request-paths path{fill:none;stroke:#a5c4ce;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s,opacity .4s}
.cloud-ops-section .request-paths path.is-idle{stroke-dasharray:3 6;opacity:.32}
.cloud-ops-section .request-paths path.is-failed{stroke:#df9b73;stroke-dasharray:3 6;opacity:.45}
.cloud-ops-section .telemetry-paths path{fill:none;stroke:#aca2ce;stroke-width:1;stroke-dasharray:2 6;opacity:.45}
.cloud-ops-section .packets circle{stroke:#fff;stroke-width:.7;filter:drop-shadow(0 0 3px #14b8a644)}
.cloud-ops-section .node{position:absolute;z-index:1;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;text-align:left;min-width:0;padding:16px 17px;border:1px solid #d5dee9;border-radius:12px;background:linear-gradient(145deg,#fff,#f0f4fa);color:var(--ink);box-shadow:0 3px 0 #d8e0e9,0 8px 18px #34465b06;transition:border-color .4s,box-shadow .4s,background .4s}
.cloud-ops-section .node strong{display:block;font:650 12px/1.3 Manrope,sans-serif}
.cloud-ops-section .node>span{font-size:10px;line-height:1.5;color:var(--muted);margin-top:5px}
.cloud-ops-section .node-icon{position:absolute;right:13px;top:13px;width:23px;height:23px;fill:none;stroke:#8191a8;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.cloud-ops-section .node strong{padding-right:15px}
.cloud-ops-section .node .node-icon+strong{margin-top:18px}
.cloud-ops-section button.node{cursor:pointer}
.cloud-ops-section button.node:hover{border-color:#68b4a8;box-shadow:0 3px 0 #a8d2ca,0 8px 20px #14b8a611}
.cloud-ops-section .node.is-highlighted{border-color:var(--phase);background:linear-gradient(145deg,#fff,#e6f6f1);box-shadow:0 3px 0 #b2d9d1,0 0 0 4px #14b8a609}
.cloud-ops-section .node.is-highlighted .node-icon{stroke:var(--phase)}
.cloud-ops-section .clients{left:2%;top:34%;width:14%;height:20%}
.cloud-ops-section .balancer{left:21%;top:34%;width:16%;height:20%}
.cloud-ops-section .cache{left:80%;top:16%;width:18%;height:21%}
.cloud-ops-section .database{left:80%;top:47%;width:18%;height:20%}
.cloud-ops-section .queue{left:44%;top:79%;width:21%;height:18%}
.cloud-ops-section .processors{left:80%;top:79%;width:18%;height:18%}
.cloud-ops-section .observability{left:21%;top:79%;width:18%;height:18%}
.cloud-ops-section .cluster{position:absolute;z-index:1;left:43%;top:7%;width:25%;height:66%;padding:15px;background:linear-gradient(160deg,#edf6f7b0,#edf0f8a0);border:1px solid #d7e5e8;border-radius:16px;transition:border-color .4s,box-shadow .4s}
.cloud-ops-section .cluster.is-highlighted{border-color:#71bdb3;box-shadow:0 0 0 5px #14b8a607}
.cloud-ops-section .cluster-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;font:8px var(--mono);letter-spacing:.6px;color:#72869c}
.cloud-ops-section .cluster-heading>span:last-child{font:10px 'DM Sans',sans-serif;letter-spacing:0;color:var(--teal);white-space:nowrap}
.cloud-ops-section .scaling-label{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:10px 0 12px;font-size:11px;color:var(--teal);cursor:pointer;text-align:left}
.cloud-ops-section .scaling-label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cloud-ops-section .scaling-dot{margin-left:auto;width:4px;height:4px;border-radius:50%;background:var(--bright)}
.cloud-ops-section .replicas{height:calc(100% - 78px);display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:10px}
.cloud-ops-section .replica{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 10px;text-align:left;color:var(--ink);background:#ffffffdc;border:1px solid #b7d6d0;border-radius:8px;box-shadow:0 2px 0 #d5e5e3;cursor:pointer;transition:opacity .45s,border-color .45s,background .45s,transform .45s}
.cloud-ops-section .replica-symbol{font-size:22px;line-height:1;color:#298b80}
.cloud-ops-section .replica-content>span:nth-child(2){font-size:11px;line-height:1.2;white-space:nowrap}
.cloud-ops-section .replica small{display:block;color:#7b8c9e;font-size:8px;margin-top:5px}
.cloud-ops-section .replica i{margin-left:auto;width:5px;height:5px;flex-shrink:0;background:var(--bright);border-radius:50%;box-shadow:0 0 0 3px #14b8a609}
.cloud-ops-section .replica.is-idle{opacity:.38;border-color:#d2dce9;box-shadow:none}
.cloud-ops-section .replica.is-idle i{background:#a3b3c5;box-shadow:none}
.cloud-ops-section .replica.is-failed{opacity:.72;border-color:#de9d7c;background:#fff5ec;box-shadow:0 2px 0 #e9d4c7}
.cloud-ops-section .replica.is-failed i{background:#ea7028;box-shadow:0 0 0 3px #f9731611}
.cloud-ops-section .replica.is-failed small{color:#a34a17}
.cloud-ops-section .cluster-footer{display:flex;align-items:center;gap:5px;font-size:8px;color:#7e8da0;margin-top:12px}
.cloud-ops-section .healthy-dot{width:3px;height:3px;border-radius:50%;background:var(--bright)}
.cloud-ops-section .client-dots,.cloud-ops-section .cache-blocks,.cloud-ops-section .message-slots,.cloud-ops-section .worker-dots{display:flex;gap:4px;margin-top:10px;height:5px}
.cloud-ops-section .client-dots i,.cloud-ops-section .worker-dots i{width:4px;height:4px;border-radius:50%;background:#71bdb3}
.cloud-ops-section .client-dots i:nth-child(n+3){opacity:.3}
.cloud-ops-section .cloud-demo[data-high-load=true] .client-dots i{opacity:1}
.cloud-ops-section .cache-blocks i,.cloud-ops-section .message-slots i{width:7px;height:5px;border-radius:1px;background:#b9dcd5;transition:background .3s,opacity .3s}
.cloud-ops-section .cache.is-highlighted .cache-blocks i{background:#14b8a6}
.cloud-ops-section .message-slots i{background:#dce4ed}
.cloud-ops-section .message-slots i.is-filled{background:#e68e57}
.cloud-ops-section .worker-dots i{background:#c4dcd6}
.cloud-ops-section .processors.is-highlighted .worker-dots i{background:#a34a17;animation:worker-pulse .9s ease-in-out infinite}
.cloud-ops-section .worker-dots i:nth-child(2){animation-delay:.3s}
.cloud-ops-section .worker-dots i:nth-child(3){animation-delay:.6s}
.cloud-ops-section .sparkline{height:16px;width:100%;margin-top:5px;fill:none;stroke:#a096c4;stroke-width:1.3}
.cloud-ops-section .observability.is-highlighted .sparkline{stroke:var(--phase)}
@keyframes worker-pulse{50%{opacity:.3}}
.cloud-ops-section .story{padding:24px 30px 19px;border-top:1px solid var(--line);background:#ffffffb0}
.cloud-ops-section .story-heading{display:flex;align-items:center;gap:13px}
.cloud-ops-section #step-number{font:10px var(--mono);color:#96a3b6;white-space:nowrap}
.cloud-ops-section .story h2{font:650 20px/1.4 Manrope,sans-serif;letter-spacing:-.5px;margin:0}
.cloud-ops-section .story-category{margin-left:auto;font:10px var(--mono);color:var(--phase);padding:4px 9px;border:1px solid #d9e6e6;border-radius:20px;white-space:nowrap}
.cloud-ops-section .story p{color:var(--muted);font-size:13px;margin:10px 0 17px;min-height:22px;max-width:820px}
.cloud-ops-section .story-progress{height:2px;background:#e1e9ef;border-radius:2px;overflow:hidden}
.cloud-ops-section .story-progress span{display:block;width:100%;height:100%;background:var(--phase);transform:scaleX(0);transform-origin:left}
.cloud-ops-section .story-navigation{display:flex;gap:8px;justify-content:space-between;margin-top:13px}
.cloud-ops-section .story-navigation button{padding:8px 7px;min-height:36px;border:0;border-radius:5px;background:none;color:#7a899c;font:11px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}
.cloud-ops-section .story-navigation button:hover{color:var(--ink);background:#eff5f5}
.cloud-ops-section .story-navigation button[aria-current=step]{color:var(--phase);background:#14b8a609}
.cloud-ops-section .page-footer{display:flex;align-items:center;justify-content:space-between;color:#8a98a9;font-size:10px;padding:18px 4px 32px;gap:12px}
.cloud-ops-section .page-footer p{display:flex;align-items:center;gap:7px;margin:0}
.cloud-ops-section .legend-dot{flex:0 0 5px;width:5px;height:5px;border-radius:50%;margin:0}
.cloud-ops-section .request-dot{background:#14b8a6}
.cloud-ops-section .data-dot{background:#7166ab}
.cloud-ops-section .message-dot{background:#ed8a47}
.cloud-ops-section .static-note{font-size:13px;color:var(--muted)}
.cloud-ops-section .cloud-demo[data-paused=true] *{animation-play-state:paused!important}
@media(max-width:1050px){.cloud-ops-section .page-header,.cloud-ops-section main{width:calc(100% - 48px)}
.cloud-ops-section .stage{height:550px;margin-inline:10px}
.cloud-ops-section .cluster{width:27%;left:42%;padding:13px}
.cloud-ops-section .cluster-heading{font-size:7px;letter-spacing:0}
.cloud-ops-section .node{padding:13px}
.cloud-ops-section .node strong{font-size:11px}
.cloud-ops-section .node>span{font-size:9px}
.cloud-ops-section .node-icon{width:20px;height:20px;right:10px}
.cloud-ops-section .story-category{font-size:9px}
.cloud-ops-section .story-navigation{gap:4px}
.cloud-ops-section .story-navigation button{font-size:10px;padding-inline:4px}}
@media(max-width:760px){.cloud-ops-section .page-header,.cloud-ops-section main{width:calc(100% - 32px)}
.cloud-ops-section .page-header{height:72px;gap:15px}
.cloud-ops-section .brand{font-size:28px}
.cloud-ops-section .lab-label{font-size:8px;letter-spacing:1px}
.cloud-ops-section .original-link{font-size:10px}
.cloud-ops-section .intro{padding:34px 0 24px}
.cloud-ops-section .intro h1{font-size:32px;letter-spacing:-1.1px}
.cloud-ops-section .intro>p:last-child{font-size:13px}
.cloud-ops-section .eyebrow{font-size:9px}
.cloud-ops-section .cloud-demo{border-radius:14px}
.cloud-ops-section .demo-header{padding:8px 14px;gap:8px;min-height:58px}
.cloud-ops-section .scenario-label{font-size:7px;letter-spacing:.5px;gap:5px}
.cloud-ops-section .load-summary{font-size:9px;gap:6px}
.cloud-ops-section .pause-button{width:30px;height:30px}
.cloud-ops-section .load-indicator{gap:2px}
.cloud-ops-section .stage{height:auto;margin:0 15px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'clients balancer' 'cluster cluster' 'cache database' 'queue processors' 'observability observability';column-gap:28px;row-gap:32px;padding:26px 0 22px}
.cloud-ops-section .node,.cloud-ops-section .cluster{position:relative;inset:auto;width:auto;height:auto}
.cloud-ops-section .clients{grid-area:clients}
.cloud-ops-section .balancer{grid-area:balancer}
.cloud-ops-section .cluster{grid-area:cluster;padding:15px}
.cloud-ops-section .cache{grid-area:cache}
.cloud-ops-section .database{grid-area:database}
.cloud-ops-section .queue{grid-area:queue}
.cloud-ops-section .processors{grid-area:processors}
.cloud-ops-section .observability{grid-area:observability}
.cloud-ops-section .node{min-height:98px;padding:15px}
.cloud-ops-section .node strong{font-size:11px}
.cloud-ops-section .node>span{font-size:9px}
.cloud-ops-section .node-icon{width:22px;height:22px;right:13px;top:13px}
.cloud-ops-section .cluster-heading{font-size:8px;letter-spacing:.4px}
.cloud-ops-section .replicas{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,60px);gap:12px}
.cloud-ops-section .replica{padding:8px}
.cloud-ops-section .replica-content>span:nth-child(2){font-size:10px}
.cloud-ops-section .replica-symbol{font-size:19px}
.cloud-ops-section .replica i{width:4px;height:4px}
.cloud-ops-section .cluster-footer{font-size:9px;margin-top:13px}
.cloud-ops-section .observability{min-height:78px}
.cloud-ops-section .observability .node-icon+strong{margin-top:0}
.cloud-ops-section .sparkline{position:absolute;right:18px;bottom:16px;width:90px;height:18px}
.cloud-ops-section .observability>span{padding-right:95px}
.cloud-ops-section .story{padding:19px 16px 15px}
.cloud-ops-section .story-heading{gap:9px;flex-wrap:wrap}
.cloud-ops-section .story h2{font-size:17px}
.cloud-ops-section .story-category{font-size:8px;margin-left:0;padding:3px 7px}
.cloud-ops-section .story p{font-size:12px;min-height:58px;line-height:1.7;margin-bottom:14px}
.cloud-ops-section .story-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.cloud-ops-section .story-navigation button{font-size:10px;padding-inline:2px;min-height:36px}
.cloud-ops-section .story-navigation button:nth-child(6){grid-column:2 / 4}
.cloud-ops-section .page-footer{align-items:flex-start;font-size:9px;flex-direction:column;padding:17px 3px 28px;gap:8px}}
@media(prefers-reduced-motion:reduce){.cloud-ops-section *,.cloud-ops-section *::before,.cloud-ops-section *::after{animation:none!important;transition:none!important}
.cloud-ops-section .pause-button{display:none}
.cloud-ops-section .story-progress span{transform:scaleX(1)!important}}
.cloud-ops-section .core-strip{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 27px;border:0;border-bottom:1px solid #dce4ed99;background:#edf7f560;color:#627088;text-align:left;cursor:pointer;font:11px 'DM Sans',sans-serif;transition:background .4s}
.cloud-ops-section .core-strip svg{width:24px;height:24px;fill:none;stroke:var(--teal);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cloud-ops-section .core-strip strong{font:9px var(--mono);letter-spacing:1px;color:var(--teal)}
.cloud-ops-section .core-security{margin-left:auto;font-size:10px;color:#72849a}
.cloud-ops-section .cloud-demo[data-phase=core] .core-strip,.cloud-ops-section .core-strip:hover{background:#e2f4ef}
.cloud-ops-section .foundation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 30px;padding:16px 0;color:#8a98a9;font:9px var(--mono);border-top:1px solid var(--line)}
.cloud-ops-section .foundation>span:first-child{font-size:8px;letter-spacing:1px}
.cloud-ops-section .foundation p{margin:0;color:#657890;font:11px 'DM Sans',sans-serif}
.cloud-ops-section .cloud-demo[data-phase=core] .foundation{color:var(--teal)}
@media(max-width:760px){.cloud-ops-section .core-strip{flex-wrap:wrap;padding:12px 16px;gap:7px 10px;font-size:10px}
.cloud-ops-section .core-strip svg{width:20px;height:20px}
.cloud-ops-section .core-strip strong{font-size:8px}
.cloud-ops-section .core-security{margin-left:30px;width:100%;font-size:9px}
.cloud-ops-section .foundation{flex-wrap:wrap;gap:7px;margin:0 16px;padding:14px 0}
.cloud-ops-section .foundation>span:last-child{width:100%;font-size:8px}
.cloud-ops-section .foundation p{font-size:10px}
.cloud-ops-section .story-navigation button:nth-child(6){grid-column:auto}}
.cloud-ops-section .view-switch{display:flex;gap:7px;margin-top:21px}
.cloud-ops-section .view-switch button{min-height:40px;padding:9px 15px;border:1px solid #d1dde5;border-radius:7px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}
.cloud-ops-section .view-switch button[aria-pressed=true]{border-color:#80bdb4;background:#e6f3ef;color:var(--teal)}
.cloud-ops-section .operations-flow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 27px;background:#f7f8fbbb;border-bottom:1px solid var(--line)}
.cloud-ops-section .operations-flow button{padding:7px 9px;text-align:left;background:transparent;border:1px solid transparent;border-radius:7px;color:var(--ink);cursor:pointer}
.cloud-ops-section .operations-flow button span{display:block;font:8px var(--mono);letter-spacing:1px;color:#8a96a8}
.cloud-ops-section .operations-flow button strong{display:block;font:600 11px Manrope,sans-serif;margin-top:6px}
.cloud-ops-section .operations-flow i{font-style:normal;font-size:12px;color:#94b6b1}
.cloud-ops-section .operations-flow button.is-active{border-color:#b4d8d1;background:#e8f4ef}
.cloud-ops-section .cloud-demo[data-view=cloud] .operations-flow{display:none}
.cloud-ops-section .cloud-demo[data-view=operations] .core-strip{background:#edf5f5;border-bottom-color:#dce4ed99}
@media(max-width:760px){.cloud-ops-section .view-switch{margin-top:17px}
.cloud-ops-section .view-switch button{font-size:10px;padding-inline:11px}
.cloud-ops-section .operations-flow{padding:12px 13px;gap:2px;flex-wrap:wrap}
.cloud-ops-section .operations-flow button{padding:6px 3px}
.cloud-ops-section .operations-flow button span{font-size:6px;letter-spacing:.3px}
.cloud-ops-section .operations-flow button strong{font-size:8px}
.cloud-ops-section .operations-flow i{font-size:9px}}
.cloud-ops-section .stage{perspective:1100px;perspective-origin:50% 45%}
.cloud-ops-section .stage-scene{--depth-blend:1;--pitch:15deg;--yaw:-12deg;position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--pitch)) rotateY(var(--yaw));transform-origin:50% 48%;pointer-events:none}
.cloud-ops-section .stage-scene .node,.cloud-ops-section .stage-scene .cluster{pointer-events:auto;transform:translateZ(calc(var(--layer-depth,35px)*var(--depth-blend)))}
.cloud-ops-section .stage-scene .clients{--layer-depth:38px}
.cloud-ops-section .stage-scene .balancer{--layer-depth:45px}
.cloud-ops-section .stage-scene .cluster{--layer-depth:85px;transform-style:preserve-3d}
.cloud-ops-section .stage-scene .cache{--layer-depth:62px}
.cloud-ops-section .stage-scene .database{--layer-depth:12px}
.cloud-ops-section .stage-scene .queue{--layer-depth:27px}
.cloud-ops-section .stage-scene .processors{--layer-depth:18px}
.cloud-ops-section .stage-scene .observability{--layer-depth:55px}
.cloud-ops-section .replica{position:relative;transform:translateZ(calc(7px*var(--depth-blend)))}
.cloud-ops-section .port-probe{position:absolute;width:0;height:0;pointer-events:none}
.cloud-ops-section .port-left{left:0;top:50%}
.cloud-ops-section .port-right{right:0;top:50%}
.cloud-ops-section .port-top{top:0;left:50%}
.cloud-ops-section .port-bottom{bottom:0;left:50%}
.cloud-ops-section .depth-plane{position:absolute;inset:4% 0 1%;border:1px solid #b1c9d155;border-radius:18px;background:linear-gradient(130deg,#e9f4f416,#cfdee522);pointer-events:none;opacity:calc(var(--depth-blend)*.65);transform-style:preserve-3d}
.cloud-ops-section .depth-plane span{position:absolute;left:13px;bottom:8px;font:7px var(--mono);letter-spacing:1px;color:#97aeb9}
.cloud-ops-section .plane-foundation{transform:translateZ(calc(-85px*var(--depth-blend)));box-shadow:0 18px 30px #4055740a}
.cloud-ops-section .plane-network{transform:translateZ(calc(-46px*var(--depth-blend)))}
.cloud-ops-section .plane-services{transform:translateZ(calc(-9px*var(--depth-blend)))}
.cloud-ops-section .connections{z-index:2}
.cloud-ops-section .stage-scene{z-index:1}
@media(max-width:760px){.cloud-ops-section .stage{display:block;padding:0;perspective:1300px;perspective-origin:50% 30%}
.cloud-ops-section .stage-scene{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'clients balancer' 'cluster cluster' 'cache database' 'queue processors' 'observability observability';column-gap:28px;row-gap:32px;padding:26px 0 22px;transform-origin:50% 30%}
.cloud-ops-section .depth-plane{inset:1% -1% 2%;border-radius:12px}
.cloud-ops-section .depth-plane span{font-size:6px;letter-spacing:.5px;bottom:4px}
.cloud-ops-section .stage-scene .cluster{--layer-depth:40px}
.cloud-ops-section .stage-scene .cache{--layer-depth:30px}
.cloud-ops-section .stage-scene .observability{--layer-depth:28px}
.cloud-ops-section .stage-scene .clients,.cloud-ops-section .stage-scene .balancer{--layer-depth:20px}
.cloud-ops-section .stage-scene .database,.cloud-ops-section .stage-scene .processors{--layer-depth:8px}
.cloud-ops-section .stage-scene .queue{--layer-depth:15px}}
.cloud-ops-section .intro{position:relative;max-width:none}
.cloud-ops-section .intro>p,.cloud-ops-section .intro h1,.cloud-ops-section .intro>div:not(.mission-art){position:relative;z-index:1}
.cloud-ops-section .intro>p:last-of-type{max-width:740px}
.cloud-ops-section .theme-switch{display:inline-flex;gap:4px;position:absolute!important;right:0;bottom:31px}
.cloud-ops-section .theme-switch button{font:10px 'DM Sans',sans-serif;min-height:32px;padding:6px 10px;color:var(--muted);border:1px solid var(--line);border-radius:5px;background:transparent;cursor:pointer}
.cloud-ops-section .theme-switch button[aria-pressed=true]{color:var(--teal);border-color:#418f86;background:#14b8a60a}
.cloud-ops-section .mission-art{position:absolute;right:-15px;top:8px;width:270px;height:240px;pointer-events:none;opacity:.65;display:none}
.cloud-ops-section .mission-art svg{width:100%;height:100%;fill:none;stroke:#7ce6df;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.cloud-ops-section .mission-orbits{stroke:#70bbcf;opacity:.35;stroke-dasharray:3 5}
.cloud-ops-section .ship-hull{fill:url(#hull-light);stroke:#8bd9e3;stroke-width:1.3}
.cloud-ops-section .ship-window{fill:#14b8a625;stroke:#7ce6df}
.cloud-ops-section .ship-plume{stroke:#14b8a6;filter:drop-shadow(0 0 5px #14b8a6)}
.cloud-ops-section .mission-points{fill:#bcfef7;stroke:none;opacity:.6}
.cloud-ops-section .mission-grid{stroke:#5f8bad;opacity:.2}
.cloud-ops-section .mission-art>span{display:block;text-align:center;color:#6790a3;font:7px var(--mono);letter-spacing:1px;margin-top:-20px}
@media(max-width:1050px){.cloud-ops-section .mission-art{width:230px;right:-20px;opacity:.5}}
@media(max-width:760px){.cloud-ops-section .mission-art{width:170px;height:170px;right:-10px;top:12px;opacity:.22}
.cloud-ops-section .intro h1{max-width:320px}
.cloud-ops-section .theme-switch{position:relative!important;right:auto;bottom:auto;margin-top:10px}
.cloud-ops-section .theme-switch button{font-size:9px;min-height:28px;padding:4px 8px}
.cloud-ops-section .mission-art>span{display:none}}
/* A single composition: spatial layers and raised objects with readable, flat labels. */
.cloud-ops-section .stage-scene{transform:scale(var(--scene-scale,1));transform-style:preserve-3d}
.cloud-ops-section .stage-scene .node,.cloud-ops-section .stage-scene .replica{--node-lift:0;--card-pitch:0deg;--card-yaw:0deg;transform-style:preserve-3d;backdrop-filter:none;transform:translateZ(calc(var(--layer-depth,30px)*var(--node-lift))) rotateX(var(--card-pitch)) rotateY(var(--card-yaw))}
.cloud-ops-section .stage-scene .cluster{--node-lift:0;transform:translateZ(calc(34px*var(--node-lift)));transform-style:preserve-3d;backdrop-filter:none}
.cloud-ops-section .stage-scene .replica{--layer-depth:14px}
.cloud-ops-section .node-content{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.cloud-ops-section .replica-content{width:100%;display:flex;align-items:center;gap:9px;min-width:0}
.cloud-ops-section .node-content,.cloud-ops-section .replica-content{transform:rotateY(calc(-1*var(--card-yaw))) rotateX(calc(-1*var(--card-pitch))) translateZ(calc(var(--label-clearance,32px)*var(--node-lift)));transform-origin:50% 50%;transform-style:preserve-3d;pointer-events:none}
.cloud-ops-section .replica-content{--label-clearance:22px}
.cloud-ops-section .node-content>.node-icon{right:0;top:0}
.cloud-ops-section .node-content>span{font-size:10px;line-height:1.5;color:var(--muted);margin-top:5px}
.cloud-ops-section .node-content strong{font-size:12px}
.cloud-ops-section .depth-plane{transform:rotateX(33deg) rotateY(-8deg) translateZ(calc(var(--plane-depth)*var(--depth-blend)));transform-origin:50% 50%}
.cloud-ops-section .plane-foundation{--plane-depth:-85px}
.cloud-ops-section .plane-network{--plane-depth:-42px}
.cloud-ops-section .plane-services{--plane-depth:-3px}
.cloud-ops-section .stage-scene .node[data-depth=volume],.cloud-ops-section .stage-scene .replica[data-depth=volume]{box-shadow:0 4px 0 #12313b,0 14px 24px #07121e24}
@media(max-width:1050px){.cloud-ops-section .node-content strong{font-size:11px}
.cloud-ops-section .node-content>span{font-size:9px}}
@media(max-width:760px){.cloud-ops-section .node-content strong{font-size:11px}
.cloud-ops-section .node-content>span{font-size:9px}
.cloud-ops-section .depth-plane{transform:rotateX(14deg) rotateY(-3deg) translateZ(calc(var(--plane-depth)*var(--depth-blend)))}
.cloud-ops-section .replica-content{gap:7px}}
@media(prefers-reduced-motion:reduce){.cloud-ops-section .depth-plane{transform:none}
.cloud-ops-section .node-content,.cloud-ops-section .replica-content{transform:none}
.cloud-ops-section .stage-scene .node,.cloud-ops-section .stage-scene .replica,.cloud-ops-section .stage-scene .cluster{--node-lift:0!important;--card-pitch:0deg!important;--card-yaw:0deg!important;transform:translateZ(0)!important}
.cloud-ops-section .packets{display:none!important}
.cloud-ops-section .cache-blocks i,.cloud-ops-section .message-slots i{transform:none;box-shadow:none}}
/* Two existing instances on the left; horizontal scaling adds capacity on the right. */
.cloud-ops-section .cluster{left:40%;top:20%;width:31%;height:53%;display:flex;flex-direction:column}
.cloud-ops-section .replicas{height:auto;flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(64px,1fr));gap:14px 12px}
.cloud-ops-section .replica[data-instance="0"]{grid-column:1;grid-row:1}
.cloud-ops-section .replica[data-instance="1"]{grid-column:1;grid-row:2}
.cloud-ops-section .replica[data-instance="2"]{grid-column:2;grid-row:1}
.cloud-ops-section .replica[data-instance="3"]{grid-column:2;grid-row:2}
.cloud-ops-section .replica{padding:8px 7px;transition:opacity .45s,border-color .45s,background .45s}
.cloud-ops-section .replica-content{position:relative;gap:6px}
.cloud-ops-section .replica-content>span:nth-child(2){font-size:10px;white-space:normal;min-width:0}
.cloud-ops-section .replica small{font-size:8.5px;line-height:1.3}
.cloud-ops-section .replica-content>i{position:absolute;right:0;top:0;width:3px;height:3px}
.cloud-ops-section .cluster-heading{font-size:7px;letter-spacing:.3px}
.cloud-ops-section .cluster-footer{min-height:16px;line-height:1.5;margin-top:11px}
.cloud-ops-section .scaling-explanation{color:var(--teal);font:9px/1.6 var(--mono);margin-top:9px;min-height:26px}
.cloud-ops-section .scaling-explanation[hidden]{display:none}
.cloud-ops-section .scaling-label{font-size:10px;padding:9px 0 12px}
.cloud-ops-section .cloud-demo[data-scaling=vertical] .scaling-label{color:#eda167}
.cloud-ops-section .cloud-demo[data-scaling=horizontal] .replica:not(.is-idle){border-color:var(--teal)}
.cloud-ops-section .replica-symbol{display:flex;align-items:flex-end;justify-content:center;flex-shrink:0;width:26px;height:40px;perspective:140px;overflow:visible}
.cloud-ops-section .server-unit{position:relative;display:block;width:22px;height:calc(17px + 15px * var(--capacity-boost,0));transform-style:preserve-3d;transform:rotateX(calc(20deg * var(--node-lift))) rotateY(calc(-28deg * var(--node-lift)));transition:height .65s ease}
.cloud-ops-section .server-unit>span{position:absolute;display:block;border:1px solid #359d90;backface-visibility:visible}
.cloud-ops-section .server-front{inset:0;border-radius:2px;background:repeating-linear-gradient(0deg,#cde8e4 0 3px,#91c6bc 3px 4px)}
.cloud-ops-section .server-side{left:100%;top:0;width:9px;height:100%;background:#398f87;transform-origin:left;transform:rotateY(90deg)}
.cloud-ops-section .server-top{left:0;bottom:100%;width:100%;height:9px;background:#a5dcd3;transform-origin:bottom;transform:rotateX(90deg)}
.cloud-ops-section .server-front::after{content:'';position:absolute;right:3px;top:3px;width:2px;height:2px;border-radius:50%;background:#14b8a6;box-shadow:0 5px #14b8a6}
.cloud-ops-section .replica.is-updating{border-color:#b29bdb!important}
.cloud-ops-section .replica.is-updating .server-front{border-color:#b29bdb;background:repeating-linear-gradient(0deg,#534d7b 0 3px,#9d8eba 3px 4px)}
.cloud-ops-section .replica.is-updating small{color:#b4a7ed}
.cloud-ops-section .replica.is-failed .server-front{border-color:#d6976d;opacity:.6}
.cloud-ops-section .request-paths path.is-draining{opacity:.22;stroke-dasharray:3 6}
/* The surfaces acquire real side faces while labels remain in the 2D plane. */
.cloud-ops-section .node::after,.cloud-ops-section .replica::after{content:'';position:absolute;left:100%;top:6px;width:7px;height:calc(100% - 12px);transform-origin:left;transform:rotateY(90deg);background:#bad9d6;border:1px solid #8ebcb9;opacity:var(--node-lift);pointer-events:none}
.cloud-ops-section .node::before,.cloud-ops-section .replica::before{content:'';position:absolute;left:6px;top:100%;width:calc(100% - 12px);height:7px;transform-origin:top;transform:rotateX(-90deg);background:#d1e4e2;border:1px solid #8ebcb9;opacity:var(--node-lift);pointer-events:none}
.cloud-ops-section .cache-blocks,.cloud-ops-section .message-slots{height:10px;transform-style:preserve-3d}
.cloud-ops-section .cache-blocks i,.cloud-ops-section .message-slots i{position:relative;height:7px;transform:translateZ(calc(9px * var(--node-lift)));box-shadow:2px 2px 0 #5c9d9c66}
.cloud-ops-section .message-slots i{opacity:.24}
.cloud-ops-section .message-slots i.is-filled{opacity:1;box-shadow:3px 3px 0 #945a34}
.cloud-ops-section .node-state{display:block;margin-top:7px;color:var(--teal);font:8px/1.5 var(--mono);min-height:12px}
.cloud-ops-section .cache[data-activity=hit]{border-color:var(--teal);box-shadow:0 0 22px #14b8a622}
.cloud-ops-section .database[data-activity=read]{border-color:#a99edb}
.cloud-ops-section .observability[data-alarm=true] .node-state{color:#eda167}
.cloud-ops-section .observability[data-alarm=true] .sparkline{stroke:#eda167}
.cloud-ops-section .observability[data-alarm=true] .node-icon{stroke:#eda167}
.cloud-ops-section .packets circle[data-direction=response]{opacity:.68}
.cloud-ops-section .cloud-demo[data-phase=operate] .core-strip{background:#14b8a612}
.cloud-ops-section .cloud-demo[data-phase=coordinate] .operations-flow button.is-active{border-color:#b4a7ed}
.cloud-ops-section .operations-flow{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);align-items:center;justify-content:stretch;gap:5px}
.cloud-ops-section .operations-flow button{width:100%;min-width:0;padding-inline:10px}
.cloud-ops-section .operations-flow button strong{line-height:1.4}
.cloud-ops-section .operations-flow i{display:grid;place-items:center;width:24px}
.cloud-ops-section .story-navigation{position:relative;display:flex;justify-content:flex-start;gap:7px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#355469 transparent;padding-bottom:5px;scroll-padding-inline:16px}
.cloud-ops-section .story-navigation button{flex:0 0 auto;font-size:10px;min-height:38px;padding-inline:10px}
.cloud-ops-section .story-heading{min-height:33px}
.cloud-ops-section .story p{min-height:44px}
.cloud-ops-section .cloud-demo[data-paused=true] *{transition:none!important}
@media(max-width:1050px){.cloud-ops-section .cluster{left:39%;width:33%;padding:12px}
.cloud-ops-section .replica-symbol{width:22px}
.cloud-ops-section .server-unit{width:19px}
.cloud-ops-section .replica-content{gap:5px}
.cloud-ops-section .replica-content>span:nth-child(2){font-size:9px}
.cloud-ops-section .cluster-heading{font-size:6px;letter-spacing:0}
.cloud-ops-section .node-state{font-size:7px}}
@media(max-width:760px){.cloud-ops-section .cluster{inset:auto;width:auto;height:auto;padding:14px}
.cloud-ops-section .replicas{flex:none;grid-template-rows:repeat(2,72px);gap:14px 12px}
.cloud-ops-section .cluster-heading{font-size:7px;letter-spacing:.3px}
.cloud-ops-section .replica-content>span:nth-child(2){font-size:10px}
.cloud-ops-section .replica small{font-size:8px}
.cloud-ops-section .replica-symbol{width:26px}
.cloud-ops-section .server-unit{width:22px}
.cloud-ops-section .scaling-explanation{font-size:8px;min-height:0}
.cloud-ops-section .cluster-footer{font-size:8px}
.cloud-ops-section .cache,.cloud-ops-section .observability{min-height:120px}
.cloud-ops-section .node-state{font-size:7px}
.cloud-ops-section .story-navigation{display:flex;gap:5px}
.cloud-ops-section .story-navigation button{padding-inline:9px;font-size:10px}
.cloud-ops-section .story p{min-height:82px}
.cloud-ops-section .story-heading{min-height:56px}
.cloud-ops-section .node-content>.sparkline{width:70px;right:0;bottom:0;opacity:.55}
.cloud-ops-section .observability .node-content>span{padding-right:35px}
.cloud-ops-section .operations-flow{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);gap:2px;padding:11px 10px}
.cloud-ops-section .operations-flow button{padding:6px 4px}
.cloud-ops-section .operations-flow button span{font-size:6px;letter-spacing:.25px;line-height:1.5}
.cloud-ops-section .operations-flow button strong{font-size:8px;line-height:1.25}
.cloud-ops-section .operations-flow i{width:14px;font-size:9px}}
/* Keep the section heading and diagram aligned, with readable labels at every depth. */
.cloud-ops-section{padding-bottom:48px;scroll-margin-top:100px}
.cloud-ops-section>.container{width:min(1320px,calc(100% - 96px))}
.cloud-ops-heading{max-width:960px;padding-bottom:34px}
.cloud-ops-section .cloud-ops-heading .eyebrow{font-size:10px;line-height:1.6}
.cloud-ops-section .cloud-ops-heading h2{max-width:24ch;line-height:1.16}
.cloud-ops-section .cloud-ops-heading p:last-child{max-width:70ch}
.cloud-ops-section .node-content strong{font-size:14px;line-height:1.4}
.cloud-ops-section .node-content>span{font-size:12px;line-height:1.5}
.cloud-ops-section .replica-content>span:nth-child(2){font-size:12px;line-height:1.4}
.cloud-ops-section .replica small{font-size:10px;line-height:1.4}
.cloud-ops-section .cluster-heading{font-size:9px}
.cloud-ops-section .node-state{font-size:10px;line-height:1.5}
.cloud-ops-section .replica.is-idle{opacity:.58}
html[data-theme=cosmos] .cloud-ops-section{--muted:#b2c5d4}
html[data-theme=cosmos] .cloud-ops-section .cloud-demo{--phase:#60d4c8}
html[data-theme=cosmos] .cloud-ops-section .cloud-demo[data-phase=queue],html[data-theme=cosmos] .cloud-ops-section .cloud-demo[data-phase=recover]{--phase:#f2bb88}
html[data-theme=cosmos] .cloud-ops-section .cloud-demo[data-phase=observe],html[data-theme=cosmos] .cloud-ops-section .cloud-demo[data-phase=investigate],html[data-theme=cosmos] .cloud-ops-section .cloud-demo[data-phase=coordinate]{--phase:#c1b4ff}
html[data-theme=cosmos] .cloud-ops-section .cluster-heading{color:#a9bdcc}
html[data-theme=cosmos] .cloud-ops-section .replica.is-idle{opacity:.58}
@media(max-width:1050px){.cloud-ops-section>.container{width:calc(100% - 48px)}.cloud-ops-section .node-content strong{font-size:12px}.cloud-ops-section .node-content>span{font-size:10px}.cloud-ops-section .replica-content>span:nth-child(2){font-size:11px}.cloud-ops-section .replica small{font-size:9px}.cloud-ops-section .cluster-heading{font-size:8px}}
@media(max-width:760px){.cloud-ops-section{padding-bottom:24px}.cloud-ops-section>.container{width:calc(100% - 32px)}.cloud-ops-heading{padding-bottom:26px}.cloud-ops-section .cloud-ops-heading h2{font-size:30px;max-width:25ch}.cloud-ops-section .cloud-ops-heading p:last-child{font-size:15px}.cloud-ops-section .node-content strong{font-size:12px}.cloud-ops-section .node-content>span{font-size:10px}.cloud-ops-section .node-state{font-size:9px}.cloud-ops-section .cluster-heading{font-size:8px}.cloud-ops-section .replica small{font-size:9px}.cloud-ops-legend{gap:8px 16px;font-size:12px}.cloud-ops-section .story .demo-hint{flex-basis:100%;font-size:12px}}

/* Component states share semantic colors; each theme supplies its own palette. */
.cloud-ops-section{--traffic-request:#0f766e;--traffic-data:#6651a8;--traffic-message:#ab501c;--traffic-telemetry:#7860a8;--state-alert:#a34a17;--state-change:#684ca4;--state-surface:#edf6f4;--idle-surface:#eaf0f3;--state-border:#92bdb5;--state-muted:#55748a;--block-muted:#a8becb;--face-side:#bad9d6;--face-bottom:#d1e4e2;--face-border:#8ebcb9}
html[data-theme=cosmos] .cloud-ops-section{--traffic-request:#68e4d3;--traffic-data:#c0b0ff;--traffic-message:#f5b178;--traffic-telemetry:#b2a0e9;--state-alert:#f5b178;--state-change:#c0b0ff;--state-surface:#15383f;--idle-surface:#14293b;--state-border:#416e7d;--state-muted:#9cb5c8;--block-muted:#416476;--face-side:#12303f;--face-bottom:#1a3d4a;--face-border:#355d6c}
.cloud-ops-section .request-dot{background:var(--traffic-request)}
.cloud-ops-section .data-dot{background:var(--traffic-data)}
.cloud-ops-section .message-dot{background:var(--traffic-message)}
html[data-theme] .cloud-ops-section .packets circle{stroke:var(--surface);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--traffic-request) 35%,transparent))}
html[data-theme] .cloud-ops-section .operations-flow button.is-active{background:var(--state-surface);border-color:var(--phase)}
html[data-theme] .cloud-ops-section .operations-flow button span,html[data-theme] .cloud-ops-section #step-number{color:var(--state-muted)}
html[data-theme] .cloud-ops-section .node::after,html[data-theme] .cloud-ops-section .replica::after{background:var(--face-side);border-color:var(--face-border)}
html[data-theme] .cloud-ops-section .node::before,html[data-theme] .cloud-ops-section .replica::before{background:var(--face-bottom);border-color:var(--face-border)}
html[data-theme] .cloud-ops-section .replica.is-idle{opacity:1;background:var(--idle-surface);border-color:var(--line);box-shadow:none;color:var(--state-muted)}
html[data-theme] .cloud-ops-section .replica.is-idle .replica-symbol{opacity:.4}
html[data-theme] .cloud-ops-section .replica.is-idle small{color:var(--state-muted)}
html[data-theme] .cloud-ops-section .replica.is-updating{border-color:var(--state-change)!important}
html[data-theme] .cloud-ops-section .replica.is-updating small{color:var(--state-change)}
html[data-theme] .cloud-ops-section .replica.is-updating .server-front{background:var(--state-surface);border-color:var(--state-change)}
html[data-theme] .cloud-ops-section .cloud-demo[data-scaling=vertical] .scaling-label{color:var(--state-alert)}
html[data-theme] .cloud-ops-section .cache-blocks i,html[data-theme] .cloud-ops-section .message-slots i{background:var(--block-muted)}
html[data-theme] .cloud-ops-section .cache.is-highlighted .cache-blocks i{background:var(--traffic-request)}
html[data-theme] .cloud-ops-section .message-slots i.is-filled,html[data-theme] .cloud-ops-section .processors.is-highlighted .worker-dots i{background:var(--traffic-message)}
html[data-theme] .cloud-ops-section .observability[data-alarm=true] .node-state{color:var(--state-alert)}
html[data-theme] .cloud-ops-section .observability[data-alarm=true] .sparkline,html[data-theme] .cloud-ops-section .observability[data-alarm=true] .node-icon{stroke:var(--state-alert)}
html[data-theme] .cloud-ops-section .database[data-activity=read]{border-color:var(--traffic-data)}
html[data-theme] .cloud-ops-section .pause-button:hover{background:var(--state-surface);color:var(--teal)}

/* Flat-facing text stays crisp while the panel shells rise and rotate. */
.cloud-ops-section .node-content,.cloud-ops-section .replica-content{--label-clearance:0px;text-shadow:none;filter:none;opacity:1}
html[data-theme] .cloud-ops-section .replica.is-failed{opacity:1}
html[data-theme=cosmos] .cloud-ops-section .node{background:linear-gradient(140deg,#173249,#112438);border-color:#496981}
html[data-theme=cosmos] .cloud-ops-section .node.is-highlighted{background:linear-gradient(140deg,#17434b,#12333d)}
html[data-theme=cosmos] .cloud-ops-section .cluster{background:linear-gradient(140deg,#143448,#192b43);border-color:#4b6b83}
html[data-theme=cosmos] .cloud-ops-section .replica{background:linear-gradient(130deg,#1b4055,#152f43);border-color:#638e98}
html[data-theme=cosmos] .cloud-ops-section .node-content strong,html[data-theme=cosmos] .cloud-ops-section .instance-name{color:#f2f7fc;font-weight:600}
html[data-theme=cosmos] .cloud-ops-section .replica small,html[data-theme=cosmos] .cloud-ops-section .node-content>span{color:#c1d1de}
html[data-theme=cosmos] .cloud-ops-section .node-icon{stroke:#93b3c7}
.cloud-ops-section .story-navigation button{font-size:11px}
.cloud-ops-section .operations-flow button span{font-size:9px}
@media(min-width:1051px){.cloud-ops-section .replica-content>span:nth-child(2){font-size:14px}.cloud-ops-section .replica small{font-size:11px}.cloud-ops-section .cluster-heading{font-size:10px}}

/* Decorative planes have their own stacking context behind every readable card. */
.cloud-ops-section .stage{--depth-blend:.85}
.cloud-ops-section .stage-planes{position:absolute;inset:0;z-index:0;perspective:1100px;perspective-origin:50% 45%;transform-style:preserve-3d;pointer-events:none}
.cloud-ops-section .stage-scene{z-index:1}
.cloud-ops-section .node-content{--label-clearance:24px}
.cloud-ops-section .replica-content{--label-clearance:18px}
@media(max-width:760px){.cloud-ops-section .stage-planes{perspective:1300px;perspective-origin:50% 30%}}

/* Only decorative shells transform; text and hit targets retain native sharpness. */
.cloud-ops-section .stage-scene{transform:none;transform-style:flat}
.cloud-ops-section .stage-scene :is(.node,.replica,.cluster){transform:none!important;transform-style:flat;perspective:1100px}
.cloud-ops-section :is(.node,.replica)::before,.cloud-ops-section :is(.node,.replica)::after{content:none}
.cloud-ops-section .card-shell{position:absolute;inset:-1px;z-index:0;margin:0;background:inherit;border:inherit;border-radius:inherit;box-shadow:inherit;pointer-events:none;transform-style:preserve-3d;transform:translateZ(calc(var(--layer-depth,30px)*var(--node-lift))) rotateX(var(--card-pitch)) rotateY(var(--card-yaw))}
.cloud-ops-section .cluster>.card-shell{--layer-depth:34px}
.cloud-ops-section .card-shell::before,.cloud-ops-section .card-shell::after{content:'';position:absolute;border:1px solid var(--face-border);opacity:var(--node-lift);pointer-events:none}
.cloud-ops-section .card-shell::before{left:6px;top:100%;width:calc(100% - 12px);height:7px;transform-origin:top;transform:rotateX(-90deg);background:var(--face-bottom)}
.cloud-ops-section .card-shell::after{left:100%;top:6px;width:7px;height:calc(100% - 12px);transform-origin:left;transform:rotateY(90deg);background:var(--face-side)}
.cloud-ops-section :is(.node,.replica,.cluster)>:not(.card-shell):not(.port-probe){position:relative;z-index:1}
.cloud-ops-section .node-content,.cloud-ops-section .replica-content{transform:none;transform-style:flat}
.cloud-ops-section .instance-name{font-weight:600}
.cloud-ops-section .stage-planes{overflow:hidden;contain:paint}
.cloud-ops-section .cloud-demo{contain:paint}