.architecture-page{--arch-blue:#2f69c1;--arch-ink:#17212b;--arch-muted:#53616f;--arch-line:#dfe7ef;--arch-soft:#f3f7fc;background:#fff;color:var(--arch-ink)}
.architecture-page .container{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.arch-skip{position:fixed;top:0;left:20px;z-index:2000;transform:translateY(-120%);padding:12px 18px;background:#fff;color:#17212b;border:2px solid var(--arch-blue);border-radius:8px}
.arch-skip:focus{transform:translateY(12px)}
.arch-hero{position:relative;padding:72px 0 30px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#e7effb 0,rgba(243,247,252,.6) 40%,#fff 72%)}
.arch-hero .eyebrow{margin-bottom:20px}
.arch-hero h1{max-width:1000px;margin:0 auto 24px;font-size:clamp(44px,6.4vw,79px);line-height:1.04;font-weight:730;letter-spacing:-.055em}
.arch-hero h1 span{display:block;color:var(--arch-blue)}
.arch-hero .arch-lead{max-width:790px;margin:0 auto 24px;font-size:clamp(18px,2vw,22px);line-height:1.55}
.arch-statement strong{font-weight:700}
.arch-statement strong span{color:var(--arch-blue)}
.arch-unique{display:inline-block;margin:0 0 20px;padding:7px 15px;background:#e9f1fd;color:#24579c;border:1px solid #d4e2f7;border-radius:999px;font-size:13px;font-weight:650}
.arch-hero .actions{justify-content:center;margin:28px 0 38px}
.arch-simulator{margin:0 auto 20px;padding:24px;background:rgba(255,255,255,.96);border:1px solid var(--arch-line);border-radius:24px;box-shadow:0 18px 65px rgba(35,63,103,.09);text-align:left}
.arch-sim-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.arch-sim-top h2{font-size:17px;letter-spacing:-.02em;margin:0;line-height:1.3}
.arch-sim-note{font-size:12px;color:var(--arch-muted)}
.arch-controls{display:flex;flex-wrap:wrap;gap:8px;padding:7px;background:#f2f5f9;border-radius:14px}
.arch-controls button{flex:1;min-width:150px;display:flex;justify-content:center;align-items:center;gap:9px;padding:11px 12px;border:1px solid transparent;background:transparent;border-radius:9px;color:#425365;font:inherit;font-size:14px;font-weight:600;line-height:1.35;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.arch-controls button[aria-pressed=true]{background:#fff;color:#24579c;border-color:#d7e3f3;box-shadow:0 2px 6px #17375b0d}
.arch-controls button:hover{background:#fff}
.architecture-page :focus-visible{outline:3px solid var(--arch-blue);outline-offset:4px}
.architecture-page kbd{display:inline-block;padding:3px 7px;white-space:nowrap;background:#f8fafc;border:1px solid #ced8e2;border-bottom-width:2px;border-radius:5px;color:#24374b;font:600 13px/1.3 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.arch-diagram{position:relative;max-width:100%;margin:10px auto 0;overflow:hidden}
.arch-diagram svg{width:100%;height:auto;display:block;max-height:410px;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.arch-diagram svg.arch-mobile-diagram{display:none}
.arch-diagram .node-surface{fill:#fff;stroke:#d9e3ef;stroke-width:1.5}
.arch-diagram .node-core{fill:#edf4ff;stroke:#9dbcea}
.arch-diagram .node-title{font-size:21px;font-weight:700;fill:#17212b;text-anchor:middle}
.arch-diagram .node-sub{font-size:13px;fill:#53616f;text-anchor:middle}
.arch-diagram .route-bg{fill:none;stroke:#dce6f3;stroke-width:4}
.arch-diagram .route-live{fill:none;stroke:#2f69c1;stroke-width:3;stroke-dasharray:5 13;animation:arch-flow 1.8s linear infinite}
.arch-diagram .control-route{fill:none;stroke:#859ab3;stroke-width:2;stroke-dasharray:5 5}
.arch-diagram .edge-label{font-size:12px;fill:#53616f;text-anchor:middle}
.arch-diagram .badge-surface{fill:#eaf4ef}
.arch-diagram .badge-label{fill:#206242;font-size:12px;font-weight:600;text-anchor:middle}
.arch-diagram .gui-node{transition:opacity .35s,transform .35s;transform-origin:660px 70px}
.arch-diagram .gui-off{display:none}
.arch-diagram .gui-update{display:none}
.arch-diagram .update-mark{fill:#2f69c1}
.arch-simulator[data-state=closed] .gui-node,.arch-simulator[data-state=stopped] .gui-node{opacity:.14}
.arch-simulator[data-state=closed] .control-route,.arch-simulator[data-state=stopped] .control-route{opacity:.15}
.arch-simulator[data-state=closed] .gui-off,.arch-simulator[data-state=stopped] .gui-off{display:block}
.arch-simulator[data-state=updating] .gui-node{opacity:.4}
.arch-simulator[data-state=updating] .gui-update{display:block}
.arch-simulator[data-state=updating] .control-route{opacity:.2}
.arch-simulator[data-state=closed] .gui-node .node-sub,.arch-simulator[data-state=stopped] .gui-node .node-sub,.arch-simulator[data-state=updating] .gui-node .node-sub{visibility:hidden}
.architecture-page .sh-links a[aria-current=page],.architecture-page .sh-mm a[aria-current=page]{color:#2f69c1;font-weight:650}
.arch-simulator[data-state=stopping] .route-live{animation-duration:3s;opacity:.55}
.arch-simulator[data-state=stopped] .route-live{display:none}
.arch-simulator[data-state=stopped] .node-core{fill:#f5f6f8;stroke:#d9e0e7}
.arch-simulator[data-state=stopped] .badge-surface{fill:#eef1f5}
.arch-simulator[data-state=stopped] .badge-label{fill:#53616f}
.arch-simulator[data-paused=true] .route-live{animation-play-state:paused}
.arch-status-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-top:1px solid #e7edf5;padding-top:16px;min-height:86px}
.arch-state-title{display:block;font-size:16px;font-weight:650;margin-bottom:4px}
.arch-state-text{font-size:14px;line-height:1.6;margin:0;max-width:740px}
.arch-motion{flex:none;background:none;border:1px solid #d8e1eb;border-radius:8px;padding:8px 10px;color:#53616f;font:inherit;font-size:12px;cursor:pointer}
.arch-section{padding:82px 0}
.arch-section.soft{background:var(--arch-soft)}
.arch-section .section-intro{max-width:800px;margin:0 auto 34px;text-align:center}
.arch-section h2{font-size:clamp(31px,4vw,48px);margin-bottom:18px;line-height:1.13;letter-spacing:-.04em}
.arch-section .section-intro>p:last-child{margin:0;font-size:18px;line-height:1.65}
.arch-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.arch-role{border-top:3px solid #b9cfed;padding:23px 4px 4px}
.arch-role .role-label{font:650 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:var(--arch-blue)}
.arch-role h3{font-size:24px;letter-spacing:-.03em;margin:13px 0 12px}
.arch-role p{font-size:16px;line-height:1.7;margin:0}
.arch-figure{margin:36px 0 0;border:1px solid var(--arch-line);border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 9px 30px rgba(30,60,95,.035)}
.arch-figure a{display:block}
.arch-figure img{display:block;width:100%;height:auto}
.arch-figure figcaption{padding:16px 23px;border-top:1px solid #e7edf5;color:var(--arch-muted);font-size:14px;line-height:1.65}
.arch-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:30px 0}
.arch-shortcut{padding:30px;border:1px solid #dce6f2;border-radius:20px;background:#fff}
.arch-shortcut kbd{font-size:25px;padding:8px 13px;border-radius:8px;margin-bottom:20px}
.arch-shortcut h3{font-size:23px;margin:0 0 12px}
.arch-shortcut p{margin:0;line-height:1.7;font-size:16px}
.arch-update{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.arch-update h2{margin:0}
.arch-update p{font-size:18px;line-height:1.7;margin:0 0 18px}
.arch-callout{padding:24px 28px;border-left:3px solid var(--arch-blue);background:#f0f5fc;border-radius:0 12px 12px 0;margin-top:26px}
.arch-callout p{margin:0;font-size:16px}
.arch-security-link{display:inline-flex;align-items:center;gap:9px;margin-top:24px;color:var(--arch-blue);text-decoration:none;font-weight:650}
.arch-security-link:hover{text-decoration:underline}
.arch-final{text-align:center;padding:78px 0 92px;border-top:1px solid var(--arch-line);background:linear-gradient(180deg,#fff,#f3f7fc)}
.arch-final h2{font-size:clamp(32px,4.4vw,53px);max-width:850px;margin:0 auto 20px}
.arch-final p{max-width:720px;font-size:18px;margin:0 auto 26px}
.arch-final .actions{justify-content:center}
.arch-home-teaser{padding:72px 0;background:linear-gradient(110deg,#edf4ff,#f9fbfe)}
.arch-home-teaser .container{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}
.arch-home-teaser h2{font-size:clamp(30px,3.5vw,44px);margin:0 0 16px}
.arch-home-teaser p{margin:0 0 22px;font-size:17px;line-height:1.65}
.arch-home-teaser img{display:block;width:100%;border:1px solid #d9e5f3;border-radius:16px;box-shadow:0 15px 35px #17375b0a}
.arch-home-teaser .eyebrow{font-size:12px;margin-bottom:13px}
@keyframes arch-flow{to{stroke-dashoffset:-36}}
@media(max-width:800px){.arch-hero{padding-top:48px}.arch-roles{grid-template-columns:1fr;gap:28px}.arch-section{padding:58px 0}.arch-update{grid-template-columns:1fr;gap:20px}.arch-shortcuts{gap:16px}.arch-shortcut{padding:23px}.arch-home-teaser .container{grid-template-columns:1fr;gap:25px}.arch-home-teaser img{max-width:680px;margin:auto}}
@media(max-width:560px){.architecture-page .container{width:calc(100% - 30px)}.arch-hero h1{font-size:42px}.arch-hero .arch-lead{font-size:17px}.arch-simulator{padding:15px;border-radius:18px}.arch-sim-note{display:none}.arch-controls{gap:5px;padding:5px}.arch-controls button{min-width:calc(50% - 5px);padding:10px 7px;font-size:12px;gap:5px}.arch-controls kbd{font-size:12px;padding:2px 4px}.arch-diagram{margin:10px -8px}.arch-diagram svg.arch-desktop-diagram{display:none}.arch-diagram svg.arch-mobile-diagram{display:block;max-height:none}.arch-status-row{display:block;min-height:146px}.arch-motion{margin-top:14px}.arch-shortcuts{grid-template-columns:1fr}.arch-figure{margin-top:24px;border-radius:12px}.arch-figure figcaption{padding:14px 16px;font-size:13px}.arch-section .section-intro>p:last-child{font-size:16px}.arch-update p{font-size:16px}.arch-section h2{font-size:32px}.arch-home-teaser{padding:50px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.arch-diagram .route-live{animation:none;stroke-dasharray:none}.arch-diagram .gui-node,.arch-controls button{transition:none}}