/* The fixed 35° scene uses one uniform scale, including text and the selector. */
.lx-map-stage{background:none;isolation:isolate}.lx-map-stage::before{display:none}
.lx-iso-scene{position:absolute;width:var(--scene-width);height:var(--scene-height);transform-origin:0 0;isolation:isolate}
.lx-iso-scene>svg{position:absolute;inset:0;width:var(--scene-width)!important;height:var(--scene-height)!important;overflow:visible;pointer-events:none}
.lx-main .lx-ground{z-index:0;fill:none;stroke:none}
.lx-grid{stroke:var(--lx-grid);stroke-width:.9;opacity:.38}
.lx-area{--area-ink:var(--lx-cyan)}
.lx-area-compute{--area-ink:#b3a5e5}.lx-area-storage{--area-ink:#b5c995}
[data-theme=light] .lx-area-compute{--area-ink:#675095}[data-theme=light] .lx-area-storage{--area-ink:#537333}
.lx-area-top{fill:color-mix(in srgb,var(--area-ink) 6%,var(--lx-map));stroke:color-mix(in srgb,var(--area-ink) 50%,var(--lx-map));stroke-width:1.5}
.lx-area-side{fill:color-mix(in srgb,var(--area-ink) 16%,var(--lx-map));stroke:color-mix(in srgb,var(--area-ink) 35%,var(--lx-map));stroke-width:1}
.lx-area-title{fill:var(--area-ink);stroke:none;font-family:inherit;font-size:32px;font-weight:600;letter-spacing:.01em}
.lx-iso-scene .lx-paths{z-index:1;stroke:var(--lx-cyan);stroke-width:2.4;opacity:.75}
.lx-iso-scene .lx-paths path{vector-effect:none;stroke-linecap:round;stroke-linejoin:round}
.lx-iso-scene .lx-components{z-index:2;pointer-events:none;isolation:isolate}
.lx-iso-scene .lx-node{left:var(--node-x);top:var(--node-y);width:var(--node-size);height:var(--node-size);transform:translate(calc(-1 * var(--contact-x)),calc(-1 * var(--contact-y)));display:block;border:0;background:none;pointer-events:none;isolation:auto}
.lx-hardware-art{display:block;width:100%;height:100%}
.lx-iso-scene .lx-node img{width:100%;height:100%;object-fit:contain;pointer-events:none;transform:none!important;filter:drop-shadow(0 3px 2px #00000038);transition:filter .2s}
.lx-iso-scene .lx-node .lx-hit-target{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lx-iso-scene .lx-hit-target path{fill:transparent;stroke:none;pointer-events:fill}
.lx-iso-scene .lx-node:hover img{filter:drop-shadow(0 3px 2px #00000038) brightness(1.08)}
.lx-iso-scene .lx-node[aria-pressed=true]::after{display:none}
.lx-iso-scene .lx-node>strong{position:absolute;left:var(--label-x);top:var(--label-y);width:max-content;max-width:none;margin:0;padding:6px 11px;border:0;border-radius:0;font-size:25px;font-weight:500;line-height:1.1;transform-origin:50% 50%;transform:translate(-50%,-50%) var(--plane-matrix);background:var(--lx-map);color:var(--text);white-space:nowrap;pointer-events:auto}
.lx-iso-scene .lx-node[aria-pressed=true]>strong{background:var(--action);color:white}
.lx-iso-scene .lx-node:hover>strong{color:var(--accent)}.lx-iso-scene .lx-node[aria-pressed=true]:hover>strong{color:white}
.lx-iso-scene .lx-node:focus-visible{outline:0}.lx-iso-scene .lx-node:focus-visible>strong{outline:3px solid var(--accent);outline-offset:5px}
.lx-iso-scene .lx-node-pin{display:none}
.lx-iso-scene .lx-node-state{top:10%;right:15%;width:10px;height:10px;z-index:4}
.lx-iso-scene .lx-monitor{z-index:3;transform:translate(-50%,-50%) var(--plane-matrix);transform-origin:50% 50%;border:1px solid var(--lx-grid)!important;border-radius:0;font-size:23px;width:220px;height:68px;box-sizing:border-box;padding:5px 10px!important;min-height:0;line-height:1.2;background:var(--lx-map)!important}
.lx-iso-scene .lx-monitor small{font-size:21px}.lx-iso-scene .lx-monitor svg{width:24px;height:24px}
.lx-iso-scene .lx-selection-overlay{z-index:4;fill:none;stroke:var(--accent);stroke-width:2.2}
.lx-selector-top{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke-width:2.6;stroke-linejoin:round}
.lx-selector-front{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke-linejoin:round}
.lx-selector-side{fill:color-mix(in srgb,var(--accent) 9%,transparent);stroke-linejoin:round}
.lx-selector-back{stroke-width:1.4;stroke-dasharray:5 6;opacity:.5}
.lx-map-viewport{flex:none;aspect-ratio:var(--scene-aspect,2040/1280);min-height:520px;width:100%}
.lx-inspector{align-self:start;min-height:520px}
@media(min-width:1600px){.lx-map-viewport{min-height:680px}}
@media(min-width:761px) and (max-width:1000px){.lx-map-viewport{min-height:540px}}
@media(max-width:760px){.lx-iso-scene{display:none}.lx-map-viewport{height:180px;min-height:0;aspect-ratio:auto}.lx-map-stage{background:var(--lx-map)}.lx-inspector{min-height:0;align-self:stretch}}
@media(prefers-reduced-motion:reduce){.lx-iso-scene .lx-node img{transition:none}}

/* The overview fits the available desktop viewport; zoom remains local to the canvas. */
@media(min-width:1001px) and (min-height:700px){
 body.lab-explorer{height:100svh;display:flex;flex-direction:column}
 .lab-explorer .lx-main{position:relative;flex:1;min-height:0;gap:10px;padding-top:10px;padding-bottom:8px}
 .lx-main>.lx-intro,.lx-main>.lx-totals,.lx-main>.lx-resource-rail,.lx-main>.lx-provenance{flex:none}
 .lx-main>.lx-workspace{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(310px,27%)}
 .lx-explorer,.lx-map{min-height:0}
 .lx-map{overflow:hidden}.lx-map-viewport{flex:1;min-height:0;aspect-ratio:auto;width:100%}
 .lx-inspector{align-self:stretch;min-height:0;max-height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) var(--surface)}
 .lx-toolbar,.lx-map-caption,.lx-workload-strip{flex:none}
 .lx-main>.lx-history{position:absolute;left:var(--site-gutter);right:var(--site-gutter);bottom:112px;z-index:6;box-shadow:0 12px 32px #00000030;max-height:240px;overflow:auto}
 .lx-main .lx-resource-rail{min-height:64px}
 .lx-main .lx-intro h1{font-size:clamp(32px,2.6vw,48px)}
 .lx-main .lx-totals{padding-block:0}
}
@media(min-width:1001px) and (min-height:700px) and (max-height:850px){
 .lx-main .lx-intro>div>p{margin-top:4px;font-size:12px}
 .lx-main>.lx-resource-rail{min-height:56px;padding-block:5px}
 .lx-main .lx-inspector{padding:12px;gap:8px}
 .lx-main #component-description,.lx-main .lx-decision p{font-size:12px;line-height:1.45}
 .lx-main .lx-decision{margin-top:8px;padding-top:8px}
 .lx-main .lx-component-model{margin-top:6px}
 .lx-main .lx-health{font-size:11px;padding-top:8px}.lx-main .lx-health small{font-size:10px}
}

/* Live context moves beside the map, freeing both former metric bands. */
.lx-sidebar{display:contents}
@media(min-width:1001px) and (min-height:700px){
 .lx-main>.lx-workspace{grid-template-columns:minmax(0,1fr) minmax(350px,29%)}
 .lx-sidebar{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
 .lx-sidebar>.lx-totals{flex:none;grid-template-columns:1fr 1fr;gap:12px 16px;padding:4px 0}
 .lx-sidebar .lx-totals>div{padding:0;border:0}
 .lx-sidebar .lx-totals dt svg{left:0;width:25px;height:25px}
 .lx-sidebar .lx-totals dt>span,.lx-sidebar .lx-totals dd{margin-left:36px}
 .lx-sidebar .lx-totals dd{font-size:23px}.lx-sidebar .lx-totals dt{font-size:11px}
 .lx-sidebar>.lx-inspector{flex:1;min-height:0;max-height:none}
 .lx-sidebar>.lx-resource-rail{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px;min-height:0}
 .lx-sidebar .lx-resource-heading h2{font-size:13px}.lx-sidebar .lx-resource-heading>span{font-size:10px}
 .lx-sidebar .lx-latency-summary{padding:0 0 0 12px!important;min-width:0;font-size:10px;gap:8px}
 .lx-sidebar .lx-latency-summary strong{font-size:19px;margin:0}.lx-sidebar .lx-latency-summary small{font-size:10px}
 .lx-sidebar .lx-node-resources{grid-column:1/-1;gap:12px}.lx-sidebar .lx-node-resource{font-size:10px}.lx-sidebar .lx-node-resource strong{font-size:13px}
 .lx-sidebar .lx-provenance{display:block;flex:none;font-size:10px;line-height:1.4}.lx-sidebar .lx-provenance>span{display:block;margin-top:2px}
 .lx-main .lx-intro h1{font-size:clamp(30px,2.1vw,42px)}
 .lx-main .lx-intro>div>p{font-size:12px;margin-top:5px}
 .lx-main>.lx-history{bottom:16px;left:auto;width:min(740px,calc(100% - 128px));max-height:240px}
}
@media(min-width:1001px) and (min-height:700px) and (max-height:850px){
 .lx-sidebar{gap:7px}.lx-sidebar>.lx-totals{gap:6px 12px;padding:0}
 .lx-sidebar .lx-totals dd{font-size:20px}.lx-sidebar .lx-totals dt{font-size:10px}
 .lx-sidebar>.lx-resource-rail{padding:7px 10px;gap:5px}.lx-sidebar .lx-resource-heading h2{font-size:12px}.lx-sidebar .lx-node-resource{min-height:38px}
 .lx-sidebar .lx-provenance{font-size:9px}
}
@media(max-width:1000px),(max-height:699px){
 .lx-main>.lx-workspace{display:flex;flex-direction:column}
 .lx-sidebar>.lx-totals{order:0}.lx-workspace>.lx-explorer{order:1}.lx-sidebar>.lx-inspector{order:2}.lx-sidebar>.lx-resource-rail{order:3}.lx-sidebar>.lx-provenance{order:4}
}

.lx-main .lx-intro .lx-architecture-disclosure{font-size:14px;line-height:1.5;color:var(--text)}
.lx-architecture-disclosure strong{font-weight:600;color:var(--lx-cyan)}
.lx-architecture-disclosure>span{font-size:12px;color:var(--muted);margin-left:10px}
@media(max-width:760px){.lx-architecture-disclosure>span{display:block;margin-left:0;margin-top:3px}.lx-main .lx-intro .lx-architecture-disclosure{font-size:14px}}

/* Provider tiles use the very same ground plane as the local hardware. */
.lx-area-azure{--area-ink:#70bcf2}.lx-area-aws{--area-ink:#eebd76}.lx-area-gcp{--area-ink:#9fc4aa}
[data-theme=light] .lx-area-azure{--area-ink:#146eab}[data-theme=light] .lx-area-aws{--area-ink:#926020}[data-theme=light] .lx-area-gcp{--area-ink:#35734a}
.lx-iso-scene .lx-cloud{position:absolute;display:flex;align-items:center;justify-content:center;gap:18px;width:var(--cloud-width);height:var(--cloud-depth);transform:translate(-50%,-50%) var(--plane-matrix);transform-origin:center;pointer-events:auto;z-index:2;padding:12px;border:0;background:transparent;color:var(--text);text-align:left}
.lx-cloud strong{display:block;font-size:32px;line-height:1.2;font-weight:600}.lx-cloud small{display:block;font-size:21px;margin-top:7px;color:var(--muted)}
.lx-cloud-mark{display:grid;place-items:center;width:82px;height:82px;background:#fff;border-radius:8px;flex:none}.lx-cloud-mark img{width:64px;height:64px;object-fit:contain}
.lx-cloud[aria-pressed=true] strong{color:var(--accent)}.lx-cloud:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.lx-iso-scene .lx-paths .lx-cloud-route{stroke-dasharray:8 7;stroke-width:3}
.lx-mobile-art img.is-cloud{background:#fff;border-radius:12px;width:110px;height:110px;padding:18px;justify-self:center;filter:none}

/* Resource readings have aligned rows, rather than five squeezed columns. */
.lx-sidebar>.lx-resource-rail{display:grid;grid-template-columns:1fr;gap:10px;padding:16px;align-items:stretch;flex:none;min-height:0}
.lx-sidebar .lx-resource-heading h2{font-size:16px;margin-bottom:3px}.lx-sidebar .lx-resource-heading>span{font-size:11px;max-width:none}
.lx-sidebar .lx-latency-summary{border-left:0!important;border-bottom:1px solid var(--subtle)!important;padding:2px 0 10px!important;gap:10px;min-width:0;font-size:11px}
.lx-sidebar .lx-latency-summary>span{display:grid;grid-template-columns:1fr auto;align-items:center;flex:1}.lx-sidebar .lx-latency-summary strong{grid-column:2;grid-row:1/3;font-size:24px;line-height:1.2;margin:0}.lx-sidebar .lx-latency-summary small{display:block;grid-column:1;font-size:10px}
.lx-resource-columns,.lx-sidebar .lx-node-resource{display:grid;grid-template-columns:minmax(74px,1.2fr) repeat(3,minmax(48px,1fr));gap:10px;align-items:center;text-align:right}
.lx-resource-columns{font-size:10px;color:var(--muted);line-height:1.2}.lx-resource-columns>span:first-child,.lx-sidebar .lx-node-resource>span:first-child{text-align:left}
.lx-sidebar .lx-node-resources{display:grid;grid-template-columns:1fr;gap:4px;grid-column:auto;width:100%}
.lx-sidebar .lx-node-resource{min-height:30px;font-size:12px;width:100%;padding:2px 0!important}.lx-sidebar .lx-node-resource:nth-child(4){border-top:1px solid var(--subtle);padding-top:7px!important;margin-top:3px}
.lx-sidebar .lx-node-resource strong{font-size:13px;display:block;margin:0;color:var(--text);font-variant-numeric:tabular-nums;font-weight:500}.lx-sidebar .lx-resource-cpu strong{color:var(--lx-cyan)}
.lx-sidebar .lx-resource-cpu .lx-meter{height:3px;margin-top:4px}
@media(min-width:1001px) and (min-height:700px) and (max-height:850px){
 .lx-sidebar>.lx-resource-rail{padding:10px 12px;gap:5px}.lx-sidebar .lx-resource-heading h2{font-size:14px}.lx-sidebar .lx-resource-heading>span{font-size:10px}.lx-sidebar .lx-latency-summary{padding-bottom:6px!important}.lx-sidebar .lx-latency-summary strong{font-size:21px}
 .lx-sidebar .lx-node-resource{min-height:24px;font-size:11px}.lx-sidebar .lx-node-resource strong{font-size:11px}.lx-resource-columns{font-size:9px}.lx-sidebar .lx-node-resources{gap:1px}
 .lx-sidebar .lx-node-resource:nth-child(4){padding-top:4px!important;margin-top:1px}
}
@media(max-width:1000px),(max-height:699px){.lx-sidebar>.lx-resource-rail{margin-top:14px}}
@media(max-width:760px){.lx-sidebar .lx-node-resource{min-height:44px}.lx-sidebar>.lx-resource-rail{border-radius:12px}.lx-sidebar .lx-resource-heading h2{font-size:17px}.lx-resource-columns,.lx-sidebar .lx-node-resource{gap:7px}.lx-sidebar .lx-node-resource strong{font-size:12px}.lx-sidebar .lx-node-resource:nth-child(4){padding-top:8px!important}}
@media(min-width:1001px) and (min-height:700px) and (max-height:850px){
 .lx-sidebar>.lx-resource-rail{gap:4px;padding:9px 12px}
 .lx-sidebar .lx-resource-heading>span{display:none}
 .lx-sidebar .lx-latency-summary{min-height:34px;line-height:1.3;padding:0 0 5px!important}
 .lx-sidebar .lx-latency-summary small{font-size:9px}
 .lx-sidebar .lx-node-resource{min-height:22px;line-height:1.2}
 .lx-sidebar .lx-node-resource:nth-child(4){padding-top:4px!important;margin-top:0}
 .lx-sidebar .lx-resource-cpu .lx-meter{margin-top:2px}
}
/* Both workload platforms share one interactive upper layer. */
.has-workloads .lx-components,.has-workloads .lx-monitor,.has-workloads .lx-selection-overlay{visibility:hidden;pointer-events:none}.has-workloads .lx-paths{opacity:.18}.has-workloads .lx-area:not(.lx-area-arm):not(.lx-area-compute){opacity:.2}.has-workloads .lx-workload-strip{display:none}.has-workloads .lx-mobile-selector,.has-workloads .lx-mobile-art{display:none!important}
.has-workloads .lx-area-arm .lx-area-title,.has-workloads .lx-area-compute .lx-area-title{visibility:hidden}
.lw-platform-title{position:absolute;transform:translate(-50%,-50%) var(--plane-matrix);font-size:26px;line-height:1.1;font-weight:600;color:var(--lx-cyan);white-space:nowrap;pointer-events:none}
.lw-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
/* Labels remain on the ground plane; every depth-sorted solid paints above them. */
.lw-object{position:absolute;padding:0!important;border:0;background:none!important;overflow:visible;pointer-events:none;isolation:auto;z-index:auto}
.lw-object>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke:#263a45;stroke-width:1.5;fill:none;pointer-events:none}
.lw-object>svg *{pointer-events:none}
.lw-object>svg .lw-hit-target{fill:transparent;stroke:none;pointer-events:fill}
.lw-box-top{fill:#99c6d1}.lw-box-side{fill:#477f91}.lw-box-front{fill:#306477}
.lw-rib{stroke:#8bbac7;stroke-width:2.5}.lw-frame{stroke:#205064;stroke-width:4}
.lw-door-seam{stroke:#173a47;stroke-width:2}.lw-door-bar{stroke:#cee4e9;stroke-width:2.5}
.lw-compute .lw-box-top{fill:#c2c5e1}.lw-compute .lw-box-side{fill:#6d739e}.lw-compute .lw-box-front{fill:#4e547e}
.lw-vm-slot{stroke:#a6b5dc;stroke-width:3}
.lw-top-logo{filter:drop-shadow(1px 0 0 #edf6ffdb) drop-shadow(-1px 0 0 #edf6ffdb) drop-shadow(0 -1px 0 #edf6ffdb) drop-shadow(0 1px 0 #edf6ffdb) drop-shadow(0 2px 1px #10212d88)}
.lw-object.is-selected .lw-box-front{fill:var(--action)}.lw-object.is-selected .lw-box-top{stroke:var(--accent);stroke-width:4}
.lw-object>span{position:absolute;z-index:2;font-size:22px;line-height:1.2;white-space:nowrap;padding:4px 6px;transform:translate(-50%,-50%) var(--plane-matrix);background:var(--lx-map);color:var(--text);pointer-events:auto}
.lw-object:focus-visible{outline:0}.lw-object:focus-visible>span{outline:3px solid var(--accent);outline-offset:3px}
.lw-object:hover>span,.lw-object.is-selected>span{color:var(--accent)}

.lw-mobile-workloads{display:none}.has-workloads .lx-node-resource{cursor:default}
@media(max-width:760px){.has-workloads .lx-map-viewport{display:none}.lw-mobile-workloads{display:grid;gap:24px;padding:16px}.lw-mobile-workloads section>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lw-mobile-workloads h3{font-size:14px;margin:0 0 10px}.lw-mobile-workloads button{display:flex;gap:8px;align-items:center;text-align:left;min-height:72px;padding:8px;border:1px solid var(--subtle);border-radius:8px;font-size:12px}.lw-mobile-workloads small{display:block;font-size:10px;line-height:1.4;margin-top:3px;color:var(--muted)}.lw-mobile-workloads img{background:none;padding:4px;filter:drop-shadow(0 1px 1px #00000050);border-radius:5px;object-fit:contain;flex:none}.lw-mobile-workloads button[aria-pressed=true]{border-color:var(--accent)}.has-workloads #component-metrics{display:block}}