/* Static architecture only. Accepted analytics and all earlier scenes are frozen. */
#architecture { padding:128px 0 64px; background:var(--canvas); color:var(--ink); }
#architecture .ar-heading-row { display:grid; grid-template-columns:minmax(0,1fr) 344px; gap:56px; align-items:end; margin-bottom:40px; }
#architecture .ar-label { font-size:11px; line-height:1.4; letter-spacing:.06em; margin-bottom:24px; }
#architecture h2 { font-size:52px; line-height:1.04; letter-spacing:-1.6px; font-weight:400; }
#architecture h3 { margin:0; }
#architecture .ar-support { font-size:18px; line-height:1.5; color:var(--muted); }
#architecture .ar-support p+p { margin-top:20px; }
#architecture .ar-scene { position:relative; height:500px; margin:0; isolation:isolate; }
#architecture .ar-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
#architecture .ar-paths>path { fill:none; stroke:var(--construction); stroke-width:1; vector-effect:non-scaling-stroke; }
#architecture .ar-paths .ar-active-path { stroke:var(--accent); }
#architecture .ar-paths .ar-external-path { stroke-dasharray:4 5; }
#architecture .ar-node-label { font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:.055em; }
#architecture .ar-cameras { position:absolute; top:26px; left:0; width:21%; height:360px; z-index:2; }
#architecture .ar-camera-sheet { position:absolute; width:82.54%; padding:6px 6px 0; margin:0; border:1px solid var(--hairline); border-radius:6px; background:var(--paper); }
#architecture .ar-camera-one { top:40px; left:0; }
#architecture .ar-camera-two { top:186px; left:9.52%; }
#architecture .ar-camera-sheet img { display:block; width:100%; height:88px; object-fit:cover; }
#architecture .ar-camera-sheet figcaption { height:28px; display:flex; align-items:center; justify-content:space-between; font-size:12px; }
#architecture .ar-camera-sheet figcaption span { font-size:10px; color:var(--muted); }
#architecture .ar-discovery { position:absolute; top:328px; left:9.52%; font-size:12px; color:var(--muted); }
#architecture .ar-stream-label { position:absolute; left:24.6%; top:126px; color:var(--accent); font-size:11px; letter-spacing:.05em; }
#architecture .ar-core-sheet { position:absolute; left:31.333%; top:40px; width:34.667%; height:300px; background:var(--paper); border:1px solid var(--hairline); border-radius:12px; }
#architecture .ar-core { position:absolute; left:30%; top:24px; width:34.667%; height:300px; padding:24px 28px; background:var(--product-dark); color:var(--paper); border-radius:12px; z-index:2; display:flex; flex-direction:column; }
#architecture .ar-core-brand { display:flex; align-items:center; gap:10px; font-size:20px; line-height:27px; letter-spacing:.055em; }
#architecture .ar-core h3 { margin-top:16px; font-size:32px; line-height:1.15; font-weight:400; letter-spacing:-.6px; }
#architecture .ar-core-functions { margin-top:16px; font-size:14px; line-height:1.7; }
#architecture .ar-core-functions span { padding:0 6px; opacity:.45; }
#architecture .ar-health { display:flex; justify-content:space-between; align-items:end; margin-top:auto; padding-top:18px; border-top:1px solid rgb(255 255 255 / 15%); }
#architecture .ar-health>p { font-size:11px; line-height:1.5; opacity:.64; text-align:right; }
/* Exact native uptime fragment: app.js tabHealth + spektr-ui.css .v-metric.
   Existing fixture 536400s; not a live measurement or an uptime guarantee. */
#architecture .ar-native-status { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
#architecture .ar-native-status .v-metric { display:flex; flex-direction:column; gap:2px; min-width:0; }
#architecture .ar-native-status .v-metric__label { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:rgba(238,241,248,.42); }
#architecture .ar-native-status .v-metric__value { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; font-weight:600; font-size:26px; color:#F2F3F7; }
#architecture .ar-local-label { position:absolute; top:129px; left:66.667%; font-size:12px; color:var(--muted); }
#architecture .ar-storage-path-label { position:absolute; left:49.333%; top:348px; font-size:12px; color:var(--muted); }
#architecture .ar-storage-sheet { position:absolute; left:33%; top:390px; width:30.667%; height:108px; border:1px solid var(--hairline); border-radius:12px; background:var(--paper); }
#architecture .ar-storage { position:absolute; left:32%; top:380px; width:30.667%; height:108px; display:flex; align-items:center; gap:20px; padding:20px 24px; border:1px solid var(--construction); border-radius:12px; background:var(--paper); z-index:2; }
#architecture .ar-storage svg { fill:none; stroke:var(--construction); stroke-width:1; flex:none; }
#architecture .ar-storage h3 { font-size:26px; line-height:1.2; font-weight:400; letter-spacing:-.5px; }
#architecture .ar-storage p { font-size:16px; line-height:1.5; margin-top:6px; color:var(--ink); }
#architecture .ar-access { position:absolute; left:79.333%; top:40px; width:20.667%; height:246px; padding:24px 0 0 24px; border-left:1px solid var(--hairline); }
#architecture .ar-access h3 { font-size:28px; font-weight:400; line-height:1.2; letter-spacing:-.5px; margin-top:16px; }
#architecture .ar-access-devices { font-size:15px; line-height:1.5; margin-top:12px; }
#architecture .ar-pwa { display:flex; gap:12px; align-items:start; padding-top:20px; margin-top:20px; border-top:1px solid var(--hairline); }
#architecture .ar-pwa>span { font-size:11px; color:var(--accent); padding-top:2px; }
#architecture .ar-pwa p { font-size:12px; line-height:1.5; color:var(--muted); }
#architecture .ar-remote-label { position:absolute; left:90.8%; top:330px; font-size:12px; color:var(--muted); }
#architecture .ar-cloud { position:absolute; left:76%; top:388px; width:24%; padding-top:16px; border-top:1px solid var(--construction); }
#architecture .ar-cloud h3 { font-size:14px; line-height:1.4; font-weight:400; margin-bottom:12px; }
#architecture .ar-cloud p { font-size:12px; line-height:1.6; }
#architecture .ar-cloud p span { color:var(--muted); }
#architecture .ar-footnote { display:flex; justify-content:space-between; align-items:start; gap:40px; margin-top:28px; font-size:12px; line-height:1.5; color:var(--muted); }
#architecture .ar-footnote>p { max-width:710px; }
#architecture .ar-footnote>span { font-size:10px; }
@media (min-width:1200px) and (max-width:1350px) {
  #architecture .ar-heading-row { grid-template-columns:minmax(0,1fr) 330px; gap:40px; }
  #architecture h2 { font-size:48px; }
}