/* Compact photo-based simulator. Loaded after the shared site styles. */
:root{--path-a:#63c7ff;--path-b:#f7c66b;--path-backup:#c4a2ff;--nav-height:148px}
html{scroll-padding-top:0;scrollbar-gutter:stable}
.simulation-visible .floating-wa{visibility:hidden;opacity:0;pointer-events:none}
.brand img{height:144px}.nav-wrap{min-height:164px}
.site-header.scrolled .brand img{height:128px}.site-header.scrolled .nav-wrap{min-height:148px}
section[id],#simulasi{scroll-margin-top:calc(var(--nav-height) + 16px)}
.arch-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.diagram-card{height:min(640px,calc(100svh - var(--nav-height) - 32px));padding:20px 24px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;background:radial-gradient(ellipse at 45% 30%,#164454 0%,#0d2c38 70%);border-radius:22px;overflow:hidden}
.diagram-controls{padding:0;gap:12px;flex-wrap:nowrap;justify-content:space-between}
.segmented button{padding:11px 18px;font-size:16px;min-height:44px}
.simulation-actions{display:flex;align-items:center;gap:10px}
.failover-button,.sim-focus-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 15px;border:1px solid #a9c2c866;border-radius:9px;color:#fff;background:#0b253080;font-size:16px;font-weight:600;white-space:nowrap}
.sim-focus-button:hover,.failover-button:hover{border-color:var(--mint);background:#10333f}
.diagram-guide{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;color:var(--muted-on-dark);min-height:24px}
.diagram-guide p{margin:0;font-size:14px}.route-legend{display:flex;align-items:center;gap:22px;white-space:nowrap;font-size:14px;color:var(--text-on-dark)}
.route-legend span{display:flex;align-items:center;gap:8px}.route-legend span:before{content:'';display:block;width:27px;height:3px;background:var(--path-a)}
.route-legend .legend-b:before{background:var(--path-b)}.route-legend .legend-backup:before{background:var(--path-backup);height:3px;box-shadow:0 0 7px #c4a2ff99}
.diagram-stage{min-height:0;margin:0;width:100%;max-width:none;display:flex;align-items:center;justify-content:center}
.diagram-stage #arch-diagram{display:block;width:100%;height:100%;overflow:visible}
.device-card{fill:#10333f;stroke:#507d88;stroke-width:1.8;transition:fill .2s,stroke .2s}
.tier-group{cursor:pointer}.tier-group:hover .device-card,.tier-group:focus .device-card{stroke:#fff;stroke-width:2.5}
.tier-group.selected .device-card{stroke:var(--mint);stroke-width:2.5;fill:#143d48}
.device-title{fill:#fff;font:600 24px var(--font-body)}
.device-model{fill:#d6e4e7;font:400 20px var(--font-body)}
.device-label{fill:#d6e4e7;font:500 22px var(--font-body)}
.column-label{fill:#a9c2c8;font:400 22px var(--font-caps);letter-spacing:.08em}
.device-caps{fill:#d6e4e7;font:400 18px var(--font-caps)}
.fabric-label{font:500 20px var(--font-body)}.fabric-a{fill:var(--path-a)}.fabric-b{fill:var(--path-b)}
.risk-label{fill:var(--path-b);font:400 20px var(--font-caps)}
.photo-links .route{fill:none;stroke-width:2.5;opacity:.38}.photo-links .data-flow{fill:none;stroke-width:3.5;stroke-dasharray:7 26;animation:data-travel 3s linear infinite}
.photo-links .route-a{stroke:var(--path-a)}.photo-links .route-b{stroke:var(--path-b)}.photo-links .data-flow.route-b{stroke-dasharray:11 25;animation-direction:reverse;animation-duration:3.6s}
.backup-line{fill:none;stroke:var(--path-backup);stroke-width:3;opacity:.65}.backup-flow{fill:none;stroke:#e2d2ff;stroke-width:4;stroke-linecap:round;stroke-dasharray:5 12;filter:drop-shadow(0 0 4px var(--path-backup));animation:backup-travel 1.2s linear infinite}
@keyframes backup-travel{to{stroke-dashoffset:-34}}.offsite-box{fill:#0b2530;stroke:#507d88;stroke-width:1.5}
.legacy-photo-path{fill:none;stroke:var(--path-b);stroke-width:2;opacity:.7}
.device-photo{pointer-events:none}.vm{fill:var(--mint)}.vm-rescue{opacity:0;transform:none;animation:none}
.failed .rescue-1,.failed .rescue-3{opacity:1;animation:vm-restart 1.2s ease both}
.failed .host-2 .device-card{fill:#521c2b;stroke:#e1091d}.failed .host-2 .device-photo{opacity:.35}
.failed .host-vms-2{opacity:0}.host-down-label{display:none;fill:#fff;font:400 18px var(--font-caps)}.failed .host-down-label{display:block}
.failed .host-link-2{opacity:.15;animation:none}.failed .rescue-2{opacity:0;animation:none}
@keyframes vm-restart{0%,45%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}
.arch-status{margin:0;padding:11px 14px;min-height:46px;align-items:center;font-size:14px;line-height:1.5}.arch-status .icon{flex-shrink:0;margin:0}
.diagram-footnote{margin:0;max-width:100%;font-size:14px;line-height:1.6;color:var(--muted-on-dark)}.diagram-footnote a{text-decoration:underline;text-underline-offset:3px}
.tier-sidebar{padding:28px;position:static}.tier-body{display:grid;grid-template-columns:1fr 1.35fr .8fr;gap:0 32px}
.tier-body h3{grid-column:1;grid-row:1;font-size:27px;margin-bottom:18px}.tier-body>p{grid-column:1;grid-row:2}
.tier-body>.check-list{grid-column:2;grid-row:1/span 3}.tier-body>.tier-why{grid-column:3;grid-row:1/span 3;border:0;padding:0;margin:0}
.tier-body p,.tier-body li{font-size:17px}.tier-pager{margin-top:18px;padding-top:18px;justify-content:flex-end;gap:24px}
dialog.sim-focus-dialog{inset:12px;margin:0;width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:none;max-height:none;border:1px solid #a9c2c866;padding:0;background:var(--dark);color:#fff;overflow:hidden}
.sim-focus-dialog .diagram-card{width:100%;height:100%;border:0;border-radius:0;grid-template-rows:auto auto minmax(0,1fr) auto}
@media(min-width:768px) and (max-height:740px){.diagram-card{padding:14px 20px;gap:7px}.diagram-guide{min-height:20px}.arch-status{padding:8px 12px;min-height:40px}}
@media(min-width:768px) and (max-width:1050px){.diagram-controls{gap:10px}.simulation-actions{gap:7px}.sim-focus-button,.failover-button{font-size:14px;padding:9px}.segmented button{font-size:14px;padding:10px}.tier-body{grid-template-columns:1fr 1fr}.tier-body>.tier-why{grid-column:1/-1;grid-row:4;margin-top:16px}.diagram-card{padding:16px}}
@media(max-width:767px){
 :root{--nav-height:108px}.brand img{height:96px}.nav-wrap{min-height:116px}.site-header.scrolled .brand img{height:88px}.site-header.scrolled .nav-wrap{min-height:108px}
 .arch-workspace{gap:18px}.diagram-card{height:auto;padding:16px;gap:12px;border-radius:16px;display:flex;flex-direction:column}
 .diagram-controls{display:flex;flex-wrap:wrap;gap:10px}.segmented{width:100%}.segmented button{font-size:14px;padding:10px 12px}.simulation-actions{display:flex;width:100%;justify-content:space-between}
 .sim-focus-button,.failover-button{font-size:14px;padding:9px 10px}.diagram-guide{display:block}.diagram-guide p{margin-bottom:8px}.route-legend{gap:17px;font-size:14px}.route-legend span:before{width:18px}
 .diagram-stage{display:block;flex:1;min-height:0}.diagram-stage #arch-diagram{display:none}.arch-mobile{display:block}
 .mobile-tier{padding:10px;margin-bottom:12px;border-radius:10px}.mobile-tier>.caps{font-size:12px;margin-bottom:5px;letter-spacing:.05em}.mobile-tier:not(:last-child):after{height:13px;bottom:-14px;background:linear-gradient(90deg,var(--path-a) 0 45%,transparent 45% 55%,var(--path-b) 55%);width:8px}
 .mobile-node{padding:0;border:0;background:none;font-size:14px;gap:3px;line-height:1.3}.mobile-node img{width:100%;height:45px;object-fit:contain}.mobile-tier[data-tier=storage] .mobile-node,.mobile-tier[data-tier=backup] .mobile-node{flex-direction:row;gap:12px}.mobile-tier[data-tier=storage] img,.mobile-tier[data-tier=backup] img{width:45%;height:45px}
 .mobile-tier:last-child{margin-bottom:0}.failed .mobile-host-2{background:#521c2b}.failed .mobile-host-2 img{opacity:.35}.failed .mobile-host-2:after{font-size:12px;font-family:var(--font-caps)}
 .legacy-mobile-grid{grid-template-columns:1fr}.legacy-mobile-grid>div{padding:10px;flex-direction:row;justify-content:space-between}.legacy-mobile-grid img{width:100px;height:50px;object-fit:contain}.legacy-switch{margin-top:15px;padding:15px}
 .arch-status{padding:10px;font-size:14px;min-height:44px}.diagram-footnote{font-size:14px}.tier-sidebar{padding:0}.tier-body{display:block;padding:0 20px 22px}.tier-body h3{font-size:24px}.tier-body p,.tier-body li{font-size:17px}.tier-body>.tier-why{padding-top:18px}.tier-pager{display:none}
 dialog.sim-focus-dialog{inset:4px;width:calc(100vw - 8px);height:calc(100dvh - 8px)}.sim-focus-dialog .diagram-card{padding:12px;gap:8px;display:flex}.sim-focus-dialog .diagram-guide p{display:none}.sim-focus-dialog .arch-mobile,.sim-focus-dialog .arch-mobile>.arch-after{height:100%}.sim-focus-dialog .arch-mobile>.arch-after{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:8px}.sim-focus-dialog .mobile-tier{margin:0;padding:7px}.sim-focus-dialog .mobile-node img{height:clamp(30px,6svh,64px)}.sim-focus-dialog .mobile-tier:after{display:none}.sim-focus-dialog .arch-status{font-size:14px;flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){.backup-flow,.photo-links .data-flow,.failed .vm-rescue{animation:none!important}.failed .rescue-1,.failed .rescue-3{opacity:1;transform:none}}
.sim-focus-dialog .diagram-stage[data-mode=before] .arch-after{display:none}
@media(max-width:767px){
 .diagram-guide p{display:none}.simulation-actions .icon{display:none}
 .mobile-tier{padding:8px}.mobile-node img{height:38px}
 .mobile-tier[data-tier=storage] img,.mobile-tier[data-tier=backup] img{height:38px}
}

@media(max-width:767px){.mobile-tier[data-tier=storage]:after{background:var(--path-backup);box-shadow:0 0 8px #c4a2ff99}}

/* On the stacked mobile diagram, keep the two SAN fabrics visible and moving. */
@media(max-width:767px){
 .arch-workspace .arch-mobile .arch-after>.mobile-tier:not(:last-child){margin-bottom:42px}
 .arch-workspace .arch-mobile .arch-after>.mobile-tier:not(:last-child)::before,
 .arch-workspace .arch-mobile .arch-after>.mobile-tier:not(:last-child)::after{
   content:'';position:absolute;left:50%;top:100%;width:26px;height:40px;
   transform:translateX(-50%);pointer-events:none;border:0;box-shadow:none
 }
 .arch-workspace .arch-mobile .arch-after>.mobile-tier:not(:last-child)::before{
   background:linear-gradient(var(--path-a),var(--path-a)) 5px 0/3px 100% no-repeat,
     linear-gradient(var(--path-b),var(--path-b)) 18px 0/3px 100% no-repeat;
   opacity:.5
 }
 .arch-workspace .arch-mobile .arch-after>.mobile-tier:not(:last-child)::after{
   background:repeating-linear-gradient(to bottom,var(--path-a) 0 8px,transparent 8px 28px) 5px -28px/3px 28px repeat-y,
     repeating-linear-gradient(to bottom,var(--path-b) 0 8px,transparent 8px 28px) 18px 28px/3px 28px repeat-y;
   filter:drop-shadow(0 0 4px currentColor);animation:mobile-san-flow 1.6s linear infinite
 }
 .arch-workspace .arch-mobile .arch-after>.mobile-tier[data-tier=storage]::before{
   background:linear-gradient(var(--path-backup),var(--path-backup)) center/3px 100% no-repeat
 }
 .arch-workspace .arch-mobile .arch-after>.mobile-tier[data-tier=storage]::after{
   background:repeating-linear-gradient(to bottom,var(--path-backup) 0 8px,transparent 8px 28px) center -28px/4px 28px repeat-y;
   filter:drop-shadow(0 0 5px var(--path-backup));animation:mobile-backup-flow 1.4s linear infinite
 }
}
@keyframes mobile-san-flow{to{background-position:5px 0,18px 0}}
@keyframes mobile-backup-flow{to{background-position:center 0}}
@media(prefers-reduced-motion:reduce){
 .arch-workspace .arch-mobile .arch-after>.mobile-tier::after{animation:none!important;background-position:5px 0,18px 0}
 .arch-workspace .arch-mobile .arch-after>.mobile-tier[data-tier=storage]::after{background-position:center 0}
}