/* Architectural showpiece: crisp topology, component drill-downs and live data traces. */
.tech-lab-section { padding:84px 0; background:linear-gradient(180deg,#f6faff,#fff); }
.tech-lab { --phase:0; color:#15314d; }
.lab-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.lab-tabs [role=tab] { position:relative; display:flex; align-items:center; gap:16px; padding:24px; text-align:left; border:1px solid #dae5f0; border-radius:14px; background:#f8fbfe; color:#92a7bd; transition:background .3s,border-color .3s,box-shadow .3s; min-width:0; }
.lab-tabs [role=tab][aria-selected=true] { background:#fff; border-color:#90b6f2; box-shadow:0 8px 24px #2365b411,inset 0 -3px 0 #0066ff; color:#0867dc; }.lab-tabs [role=tab]:hover { border-color:#8db8e9; }
.lab-tab-icon { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; background:#ebf3fd; border:1px solid #d9e7f7; border-radius:10px; }.lab-tab-icon svg { width:25px; height:25px; }.lab-tabs [aria-selected=true] .lab-tab-icon { background:#0668ee; color:#fff; border-color:#0668ee; box-shadow:0 5px 12px #0866eb25; }
.lab-tabs small { display:block; font:12px/1.6 ui-monospace,monospace; letter-spacing:.7px; color:#7f9bb9; }.lab-tabs strong { display:block; font-size:19px; font-weight:600; margin-top:2px; }.lab-tabs em { display:block; margin-top:5px; font-style:normal; font-size:12px; color:#7b91a9; }.lab-tab-arrow { align-self:flex-start; margin-left:auto; font-size:20px; color:#96b6da; }
.lab-panel { padding-top:30px; }.lab-article { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:0 2px 25px; }.lab-article > div { min-width:0; }.lab-eyebrow { display:flex; align-items:center; gap:12px; font:12px/1.5 ui-monospace,monospace; letter-spacing:1.4px; color:#3e84d5; }.lab-eyebrow > span { border-left:1px solid #cedcea; padding-left:12px; font:12px/1.5 sans-serif; color:#8ca1b8; letter-spacing:0; }.lab-article h3 { margin-top:11px; font-size:22px; line-height:1.6; font-weight:600; color:#183b5e; }.lab-article h3 a:hover { color:#0066ff; }.lab-article p { font-size:12px; line-height:1.85; color:#7b90a6; margin-top:7px; }.lab-read { display:flex; align-items:center; gap:12px; white-space:nowrap; padding:11px 16px; border:1px solid #cedfeb; border-radius:7px; color:#0666d4; font-size:12px; background:#fff; }.lab-read:hover { border-color:#5b9eed; }.lab-read span { font-size:19px; }
.arch-workbench { background:#091a30; border:1px solid #224269; border-radius:18px; box-shadow:0 25px 55px #102f5926; overflow:hidden; color:#d9eaff; }
.arch-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:62px; padding:14px 24px; border-bottom:1px solid #90b8ef20; background:linear-gradient(90deg,#102a48,#0a1c33); }.arch-toolbar > div { display:flex; align-items:center; gap:11px; }.arch-toolbar strong { font-size:13px; letter-spacing:2px; font-weight:500; color:#e0eeff; }.arch-toolbar small { font:12px/1.4 ui-monospace,monospace; color:#6688af; letter-spacing:1.6px; }.arch-status-dot { width:5px; height:5px; background:#7bdcff; box-shadow:0 0 9px #46baffb3; border-radius:50%; }
.arch-controls button { padding:7px 11px; color:#91b2d4; border:1px solid #355576; border-radius:5px; font-size:12px; background:#0d233d; transition:color .2s,border-color .2s; }.arch-controls button:hover { color:#e9f7ff; border-color:#6099d3; }.lab-toggle::before { content:'Ⅱ'; margin-right:6px; }.lab-toggle[aria-pressed=true]::before { content:'▷'; }
.arch-main { display:grid; grid-template-columns:minmax(0,1fr) 274px; }
.arch-canvas-wrap { min-width:0; position:relative; background:radial-gradient(ellipse at 50% 48%,#12385980,transparent 65%),linear-gradient(135deg,#091e35,#07172b); }
.arch-canvas { width:100%; overflow-x:auto; scrollbar-color:#3d6693 #0d223a; scrollbar-width:thin; }
.arch-diagram { display:block; width:100%; height:auto; min-height:390px; padding:20px 8px 0; overflow:visible; }
.arch-map-label { fill:#4f7398; font:12px ui-monospace,monospace; letter-spacing:1.5px; }
.arch-zone rect { fill:#2266a407; stroke:#608ab142; stroke-width:.9; stroke-dasharray:5 5; }.arch-zone text { fill:#7597bb; font:12px ui-monospace,monospace; letter-spacing:.65px; }
.arch-node { cursor:pointer; outline:none; }.arch-node-scan { opacity:0; }.arch-node.is-active .arch-node-scan { opacity:1; filter:drop-shadow(0 0 3px #78d7ff); }.arch-node-content { animation:arch-assemble .75s cubic-bezier(.2,.7,.25,1) both; }.arch-node:nth-last-child(2n) .arch-node-content { animation-delay:.12s; }.arch-node:nth-last-child(3n) .arch-node-content { animation-delay:.2s; }@keyframes arch-assemble { from { opacity:0; transform:translateY(16px); }to { opacity:1; transform:translateY(0); } }.arch-node-face { transition:fill .4s,stroke .4s; }.arch-node-title { fill:#ddefff; font:600 14px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; pointer-events:none; }.arch-node-ref { fill:#6f94bb; font:12px ui-monospace,monospace; letter-spacing:.8px; pointer-events:none; }.arch-node-sub { fill:#688eb2; font:12px ui-monospace,monospace; letter-spacing:.6px; pointer-events:none; }.arch-node.is-active .arch-node-face { fill:#123966; stroke:#338ff1; }.arch-node.is-active .arch-node-accent { opacity:1; stroke:#64c6ff; }.arch-node.is-active .arch-node-led { fill:#7be4ff; filter:drop-shadow(0 0 3px #51baff); }.arch-node.is-active .arch-node-title { fill:#f0faff; }.arch-node[aria-pressed=true] .arch-node-face,.arch-node:hover .arch-node-face,.arch-node:focus-visible .arch-node-face { stroke:#b5edff; stroke-width:1.7; }.arch-node:hover .arch-node-title { fill:#fff; }
.arch-chip-layer { transform:translateY(calc(var(--layer)* -6px)); }
.arch-wire { fill:none; stroke:#284869; stroke-width:1.3; }.arch-wire-lit { fill:none; stroke:#62c6ff; stroke-width:2.2; opacity:0; transition:opacity .45s; }.arch-connections .is-active .arch-wire-lit { opacity:.95; filter:drop-shadow(0 0 3px #388ff299); }.arch-packet,.arch-packet-halo { opacity:0; transition:opacity .4s; }.arch-connections .is-active .arch-packet { opacity:1; }.arch-connections .is-active .arch-packet-halo { opacity:.65; }
.arch-canvas-note { display:flex; justify-content:space-between; gap:12px; padding:13px 24px 20px; color:#56789d; font-size:12px; }.arch-canvas-note span:first-child { color:#7cabd7; }.arch-mobile-hint { display:none; }
.arch-inspector { border-left:1px solid #85b6e31c; padding:26px 23px 20px; background:linear-gradient(135deg,#102945b3,#0b2039); display:flex; flex-direction:column; min-width:0; }.arch-inspector-top { display:flex; justify-content:space-between; gap:12px; font:12px/1.5 ui-monospace,monospace; letter-spacing:.75px; color:#648aad; }.arch-inspector-top small { font-size:12px; color:#5b9cdc; white-space:nowrap; }.arch-inspector-category { display:block; margin-top:31px; font-size:12px; color:#65b1f5; }.arch-inspector h4 { font-size:23px; line-height:1.35; font-weight:500; color:#e8f4ff; margin-top:9px; overflow-wrap:anywhere; }.arch-inspector-description { color:#8aa8c5; font-size:12px; line-height:1.95; margin-top:15px; min-height:86px; }.arch-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }.arch-tags span { padding:4px 7px; color:#74a7d4; background:#1c46664d; border:1px solid #2f5a774f; border-radius:4px; font-size:12px; }
.arch-component-map { height:76px; margin:22px 0 19px; border-bottom:1px solid #294661; }.arch-component-map > span { color:#4b759a; font:12px/1.5 ui-monospace,monospace; letter-spacing:1.5px; }.arch-component-map svg { display:block; width:100%; height:51px; fill:none; stroke:#326691; stroke-width:.9; }.arch-component-map svg rect { fill:#173857; stroke:#62afe4; }.arch-component-map svg circle { fill:#62afe4; }
.arch-inspector-foot { margin-top:auto; display:flex; gap:7px; align-items:flex-start; flex-wrap:wrap; }.arch-inspector-foot > i { display:block; width:4px; height:4px; border-radius:50%; background:#5592c4; margin-top:5px; }.arch-inspector-foot > span { color:#5d7f9f; font-size:12px; line-height:1.8; }.arch-follow { color:#6eb5f3; font-size:12px; margin-top:3px; padding:6px 0; }
.arch-sequence { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #749bc225; border-bottom:1px solid #749bc225; padding:0 24px; background:#0d223a; }.arch-sequence button { position:relative; display:flex; gap:10px; align-items:center; padding:19px 14px; min-width:0; color:#577b9f; text-align:left; }.arch-sequence button > span { font:12px/1 ui-monospace,monospace; }.arch-sequence strong { font-weight:500; font-size:12px; }.arch-sequence small { margin-left:auto; font-size:16px; color:#35516e; }.arch-sequence button:last-child small { visibility:hidden; }.arch-sequence button[aria-pressed=true] { color:#a7dcff; background:#17345266; }.arch-sequence button i { position:absolute; left:14px; right:14px; height:2px; bottom:0; background:#4dbaff; box-shadow:0 0 8px #4097e0; transform:scaleX(0); transform-origin:left; }.arch-sequence button[aria-pressed=true] i { transform:scaleX(var(--phase)); }.arch-sequence button:hover { color:#d0efff; }
.arch-trace { display:flex; align-items:center; gap:14px; padding:19px 26px; background:#07172a; min-height:81px; }.arch-trace-symbol { align-self:flex-start; margin-top:3px; color:#489fe9; font:16px/1 ui-monospace,monospace; }.arch-trace > div { flex:1; min-width:0; }.arch-trace-title { font-size:12px; color:#a1c8ea; }.arch-trace p { font-size:12px; line-height:1.8; color:#6384a3; margin-top:5px; }.arch-trace code { max-width:35%; color:#6db4e4; font:12px/1.7 ui-monospace,monospace; overflow-wrap:anywhere; }.arch-trace-status { margin-left:10px; padding:5px 8px; border:1px solid #294b6a; border-radius:4px; color:#4e7da6; font-size:12px; white-space:nowrap; }
.lab-footer { display:flex; justify-content:space-between; gap:16px; padding:18px 3px 0; font-size:12px; color:#8ca2b7; }.tech-lab button:focus-visible,.tech-lab a:focus-visible,.arch-canvas:focus-visible { outline:2px solid #479ded; outline-offset:3px; }
@media(max-width:1100px) { .lab-tabs [role=tab] { padding:19px 15px; gap:11px; }.lab-tabs small { font-size:12px; letter-spacing:.2px; }.lab-tab-icon { width:35px; height:35px; }.lab-tabs strong { font-size:17px; }.lab-tabs em { font-size:12px; }.lab-tab-arrow { display:none; }.arch-main { grid-template-columns:minmax(0,1fr) 235px; }.arch-inspector { padding:23px 19px; }.arch-inspector h4 { font-size:20px; }.arch-diagram { min-width:680px; min-height:410px; }.arch-canvas-note { padding-left:18px; padding-right:18px; }.arch-canvas-note span:last-child { display:none; }.arch-toolbar small { display:none; }.lab-article h3 { font-size:20px; } }
@media(max-width:767px) { .tech-lab-section { padding:60px 0; }.lab-tabs { gap:7px; }.lab-tabs [role=tab] { padding:15px 8px; justify-content:center; gap:7px; border-radius:9px; }.lab-tab-icon { width:25px; height:25px; border-radius:6px; }.lab-tab-icon svg { width:17px; height:17px; }.lab-tabs strong { font-size:12px; margin:0; }.lab-tabs small,.lab-tabs em { display:none; }.lab-panel { padding-top:23px; }.lab-article { display:block; margin-bottom:20px; }.lab-eyebrow { font-size:12px; letter-spacing:.6px; gap:8px; }.lab-eyebrow > span { padding-left:8px; font-size:12px; }.lab-article h3 { font-size:18px; margin-top:13px; }.lab-article p { font-size:12px; }.lab-read { display:inline-flex; padding:8px 0 0; border:0; background:none; margin-top:4px; font-size:12px; }.lab-read span { font-size:16px; }.arch-workbench { border-radius:12px; }.arch-toolbar { padding:13px 14px; min-height:56px; }.arch-toolbar > div { gap:7px; }.arch-toolbar strong { font-size:12px; letter-spacing:1px; }.arch-controls button { font-size:12px; padding:6px 7px; }.arch-main { grid-template-columns:1fr; }.arch-diagram { min-width:735px; min-height:410px; padding:20px 0 0; }.arch-canvas-note { padding:8px 14px 9px; font-size:12px; }.arch-mobile-hint { display:block; color:#426b91; font-size:12px; text-align:center; padding-bottom:14px; }.arch-inspector { border-left:0; border-top:1px solid #749bc225; padding:20px; display:grid; grid-template-columns:1fr auto; column-gap:15px; }.arch-inspector-top { grid-column:1/-1; }.arch-inspector-category { margin-top:20px; grid-column:1; }.arch-inspector h4 { margin-top:7px; font-size:23px; grid-column:1; }.arch-inspector-description { grid-column:1/-1; min-height:0; font-size:12px; margin-top:12px; }.arch-tags { grid-column:1/-1; margin-top:12px; }.arch-component-map { display:none; }.arch-inspector-foot { grid-column:1/-1; margin-top:16px; }.arch-inspector-foot > span br { display:none; }.arch-follow { margin-left:auto; padding:0; }.arch-sequence { padding:0 7px; }.arch-sequence button { padding:17px 5px; gap:5px; flex-direction:column; align-items:flex-start; }.arch-sequence button > span { font-size:12px; }.arch-sequence strong { font-size:12px; }.arch-sequence small { display:none; }.arch-sequence button i { left:5px; right:5px; }.arch-trace { padding:17px 14px; gap:10px; flex-wrap:wrap; }.arch-trace p { font-size:12px; }.arch-trace code { max-width:none; width:100%; order:4; padding-left:26px; font-size:12px; }.arch-trace-status { font-size:12px; margin:0; }.lab-footer { font-size:12px; flex-direction:column; gap:5px; padding-top:15px; } }
@media(prefers-reduced-motion:reduce) { .tech-lab * { transition:none!important; animation:none!important; }.arch-sequence button[aria-pressed=true] i { transform:scaleX(1); } }

.arch-node.is-active .arch-chip-layer path:first-child { stroke:#a4e3ff; filter:drop-shadow(0 0 3px #257bc466); }

.arch-workbench:fullscreen { display:flex; flex-direction:column; width:100%; height:100%; border-radius:0; border:0; overflow:auto; padding:0 max(0px,calc((100vw - 1600px)/2)); background:#081a2f; }.arch-workbench:fullscreen .arch-main { flex:1; min-height:0; grid-template-columns:minmax(0,1fr) 330px; }.arch-workbench:fullscreen .arch-canvas-wrap { display:flex; flex-direction:column; justify-content:center; }.arch-workbench:fullscreen .arch-diagram { max-height:calc(100vh - 282px); min-height:300px; }.arch-workbench:fullscreen .arch-inspector { justify-content:center; }.arch-workbench:fullscreen .arch-inspector-foot { margin-top:20px; }
@media(max-width:767px) { .arch-fullscreen { display:none; }.arch-workbench:fullscreen .arch-main { grid-template-columns:1fr; } }

/* Two navigable levels: system topology and component internals. */
.arch-navigation { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:52px; padding:10px 24px; border-bottom:1px solid #739dc522; background:#0a1e35; }
.arch-navigation > div { display:flex; align-items:center; gap:13px; min-width:0; flex-wrap:wrap; }
.arch-back { color:#92d3ff; background:#183855; border:1px solid #3c6a91; border-radius:5px; padding:5px 9px; font-size:12px; transition:background .2s; }.arch-back:hover { background:#225071; }
.arch-breadcrumb-system { color:#7798b9; font-size:12px; }.arch-breadcrumb-separator { color:#476482; }.arch-breadcrumb-current { color:#d8edff; font-size:12px; font-weight:500; outline:none; }.arch-depth { font:12px/1.5 ui-monospace,monospace; color:#527ca4; letter-spacing:1px; white-space:nowrap; }
.arch-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.arch-node-enter { fill:#92d4ff; font:15px -apple-system,sans-serif; opacity:.65; transition:opacity .2s; pointer-events:none; }.arch-node:hover .arch-node-enter,.arch-node:focus-visible .arch-node-enter { opacity:1; }
.arch-diagram { transform-origin:center; }.arch-diagram[data-revealed=true] .arch-node-content { animation:none; }
.tech-lab[data-navigating=true] .arch-canvas { overflow:hidden; }.tech-lab[data-navigating=true] .arch-node,.tech-lab[data-navigating=true] .arch-sequence { pointer-events:none; }
.arch-diagram[data-detail=true] .arch-node-title { font-size:17px; }.arch-diagram[data-detail=true] .arch-node-sub { font-size:12px; }.arch-diagram[data-detail=true] .arch-node-ref { font-size:12px; }
.arch-port-label { fill:#5f93bd; font:12px ui-monospace,monospace; letter-spacing:1.4px; }.arch-port-value { fill:#abd5f5; font:13px -apple-system,sans-serif; }.arch-route-caption { fill:#5685b0; font:12px ui-monospace,monospace; letter-spacing:1px; }
.tech-lab[data-depth=internal] .arch-inspector-top > span { color:#7fb6e4; }.tech-lab[data-depth=internal] .arch-depth { color:#67b9f0; }
@media(max-width:767px) { .arch-navigation { padding:12px 14px; gap:8px; align-items:flex-start; }.arch-navigation > div { gap:7px; }.arch-breadcrumb-system,.arch-breadcrumb-current { font-size:12px; }.arch-back { font-size:12px; padding:5px 7px; }.arch-depth { display:none; }.arch-diagram[data-detail=true] { min-width:735px; }.arch-port-value { font-size:12px; } }
/* The full explorer lives on the technical archive; homepage cards are lightweight links. */
[data-page=insights] .tech-lab-section { padding-top:42px; padding-bottom:55px; border-top:0; }
[data-page=insights] .tech-lab-section > div > .text-center { margin-bottom:36px; }
.lab-reading-notes { margin-top:45px; padding-top:32px; border-top:1px solid #e0eaf5; }
.lab-reading-notes h2 { color:#284c72; font-size:21px; font-weight:600; }
.lab-reading-notes > p { color:#8ca1b8; font-size:12px; line-height:1.8; margin-top:8px; }
.lab-notes-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; margin-top:21px; }
.lab-reading-notes .page-notes { margin-top:0; border:1px solid #dce7f4; border-radius:9px; padding:19px; background:#fff; }
.lab-reading-notes .page-notes summary { font-size:12px; line-height:1.8; color:#397bbb; }
.lab-reading-notes .page-notes p,.lab-reading-notes .page-notes li { font-size:12px; line-height:1.9; }
@media(max-width:767px) { [data-page=insights] .tech-lab-section { padding-top:30px; padding-bottom:40px; }.lab-notes-list { grid-template-columns:1fr; gap:12px; }.lab-reading-notes { margin-top:30px; padding-top:24px; }.lab-reading-notes h2 { font-size:19px; } }