@layer components{.architecture-explorer{border:1px solid var(--border-strong);background:radial-gradient(ellipse at 50% 60%, var(--accent-wash), transparent 75%), var(--surface);border-radius:13px;overflow:hidden}.architecture-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding:19px 27px;display:flex}.architecture-toolbar>span{color:var(--muted);font-size:12px}.flow-tabs{gap:5px;display:flex}.flow-tabs button{color:var(--text-meta);border:1px solid #0000;border-radius:5px;align-items:center;gap:7px;min-height:40px;padding:9px 15px;font-size:11px;display:flex}.flow-tabs button[aria-selected=true]{color:var(--amber);background:var(--accent-wash);border-color:var(--accent-line)}.flow-tabs button:hover{color:var(--text)}.flow-panel{padding:34px 27px 25px}.architecture-map{grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;display:grid}.architecture-node{border:1px solid var(--border-strong);background:var(--surface-raised);border-radius:7px;min-width:0;padding:22px 20px}.endpoint-node{border-color:var(--accent-line);background:var(--accent-wash)}.node-top{color:var(--text-meta);align-items:center;gap:9px;margin-bottom:22px;font-size:11px;display:flex}.node-top>svg:first-child{color:var(--text-soft);flex-shrink:0}.endpoint-node .node-top>svg{color:var(--amber)}.node-top>svg:last-child:not(:first-child){flex-shrink:0;margin-left:auto}.architecture-node h3{letter-spacing:-.02em;font-size:17px}.node-separator{background:var(--separator);height:1px;margin:18px 0}.architecture-node p{font-size:12px;line-height:2.1}.node-tag{border-top:1px solid var(--separator);color:var(--amber);margin-top:17px;padding-top:14px;font-size:10px}.architecture-node:not(.endpoint-node) .node-tag{color:var(--text-meta)}.architecture-edge{color:var(--text-meta);flex-direction:column;align-items:center;gap:12px;display:flex}.architecture-edge svg{width:30px;color:var(--amber)}.architecture-edge span{text-align:center;font-size:10px;line-height:1.8}.architecture-caption{text-align:center;color:var(--text-meta);margin-top:27px;font-size:10px}.pairing-architecture{grid-template-columns:repeat(3,1fr);gap:34px;display:grid}.pairing-detail{border-top:1px solid var(--line);padding-top:22px}.pairing-detail h3{margin-top:17px;margin-bottom:13px;font-size:19px}.pairing-detail p{font-size:12px}.architecture-section{border-top:1px solid var(--separator);padding-top:66px}.architecture-section .two-column p{font-size:13px}.documentation-grid{grid-template-columns:1fr 1fr;gap:0 40px;display:grid}.documentation-grid a{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding:24px 0;display:flex}.documentation-grid a h3{margin-bottom:6px;font-size:16px}.documentation-grid a p{font-size:11px}.documentation-grid a>svg{color:var(--amber);flex-shrink:0}.documentation-grid a:hover h3{color:var(--amber)}.store-buttons{flex-wrap:wrap;gap:10px;display:flex}.store-buttons:empty{display:none}.download-detail a{text-underline-offset:3px;text-decoration:underline}}@layer responsive{@media (width<=1050px){.architecture-map{grid-template-columns:1fr 47px 1fr 47px 1fr}.architecture-node{padding:19px 14px}.architecture-node h3{font-size:15px}.node-top{gap:7px;font-size:10px}.architecture-node p{font-size:11px}.node-tag{font-size:7px}.desktop-nav{gap:20px;margin-right:15px}}@media (width<=760px){.architecture-toolbar{padding:15px 20px}.architecture-toolbar>span{font-size:10px}.flow-tabs button{padding:9px 11px;font-size:10px}.flow-panel{padding:24px 20px}.architecture-map{grid-template-columns:1fr;gap:17px}.architecture-node{padding:20px}.node-top{margin-bottom:16px;font-size:11px}.node-top>svg{width:22px}.architecture-node h3{font-size:21px}.architecture-node p{font-size:12px}.node-tag{font-size:10px}.architecture-edge{flex-direction:row;justify-content:center;gap:12px}.architecture-edge svg{width:20px;transform:rotate(90deg)}.architecture-edge span{text-align:left;font-size:11px}.architecture-edge br{display:none}.architecture-caption{text-align:left;font-size:11px}.pairing-architecture{gap:25px}.pairing-detail h3{font-size:17px}.pairing-detail p{font-size:11px}.architecture-section{padding-top:48px}.documentation-grid{gap:0 25px}.documentation-grid a h3{font-size:14px}.documentation-grid a p{font-size:10px}}@media (width<=500px){.architecture-toolbar{flex-direction:column;align-items:start;gap:11px}.flow-tabs{width:100%}.flow-tabs button{flex:1;justify-content:center;min-height:44px;font-size:11px}.pairing-architecture,.documentation-grid{grid-template-columns:1fr}.pairing-detail h3{font-size:20px}.pairing-detail p{font-size:13px}.documentation-grid a h3{font-size:16px}.documentation-grid a p{font-size:11px}}}
