.arch-flow{--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;width:100%;height:clamp(640px,82vh,1000px);background:#eef1f8;border-radius:16px;border:1px solid #e2e6f1}.arch-flow .react-flow__attribution{background:transparent;font-size:10px}.arch-flow .react-flow__handle{width:9px;height:9px;min-width:9px;min-height:9px;background:#6d5ef6;border:none;border-radius:50%;opacity:1}.arch-title h3{font-size:27px;font-weight:700;color:#1b2030;margin:0;line-height:1.1;white-space:nowrap}.arch-title p{font-family:var(--mono);font-size:13px;color:#6b7280;margin:8px 0 0;white-space:nowrap}.arch-layer{font-family:var(--mono);font-size:14px;letter-spacing:1.5px;color:#99a0b4;text-transform:uppercase;white-space:nowrap}.arch-legend{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid #e6e9f2;border-radius:12px;padding:10px 15px;font-family:var(--mono);font-size:13px;color:#51607a}.arch-legend__item{display:flex;align-items:center;gap:7px}.arch-legend__pill{width:30px;height:15px;border-radius:999px;background:#6d5ef6}.arch-legend__dot{width:11px;height:11px;border-radius:999px;background:#1c9e63}.arch-card{box-sizing:border-box;background:#fff;border:1px solid #e6e9f2;border-radius:16px;padding:16px;box-shadow:0 1px 2px #141e500a,0 12px 28px #141e5012;position:relative}.arch-card__head{display:flex;align-items:center;gap:11px}.arch-card__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;flex:0 0 auto}.arch-card__titles{min-width:0;flex:1}.arch-card__title{font-size:18px;font-weight:600;color:#1c2230;line-height:1.2;overflow-wrap:anywhere}.arch-card__sub{font-size:13px;color:#7a8194;margin-top:2px}.arch-card__docker{align-self:flex-start;flex:0 0 auto;margin-top:2px;display:flex;align-items:center;gap:4px;font-size:12px;color:#2391e6;font-weight:600}.arch-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.arch-chip{font-family:var(--mono);font-size:12px;color:#6b7280;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}.arch-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.arch-badge{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.3px;padding:4px 9px;border-radius:6px;white-space:nowrap;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}.arch-badge--feature{background:#e3f5ea;color:#127a4a}.arch-badge--tech{background:#eceff5;color:#5a6478}.arch-badge--blue{background:#e6edfb;color:#2f63c9}.arch-badge--red{background:#fde7e7;color:#cf3b3b}.arch-preview{display:flex;gap:8px;margin-top:14px}.arch-tile{flex:1;height:60px;border:1px solid #e6e9f2;border-radius:8px;background:#f7f9fd;padding:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.arch-tile svg{width:100%;height:100%}.arch-core-logo{display:flex;align-items:center;justify-content:center;height:72px;border-radius:12px;background:#f0eefe;margin-top:6px}.arch-core-logo-img{height:30px;width:auto}.arch-pill{display:flex;flex-direction:column;align-items:center;gap:4px}.arch-pill__label{background:#6d5ef6;color:#fff;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.6px;padding:11px 20px;border-radius:999px;text-transform:uppercase;white-space:nowrap}.arch-pill__cap{font-family:var(--mono);font-size:12px;color:#7a8194;letter-spacing:.3px;text-transform:uppercase}.arch-pill__cap--kafka{color:#9aa0b4;font-size:11px}.arch-card__descbox{margin-top:12px;background:#f0eefe;border:1px solid #e6e1fb;border-radius:10px;padding:11px 13px;font-size:13px;color:#4b5063;line-height:1.4}.arch-card__note{font-family:var(--mono);font-size:11px;color:#9aa0b4;margin-top:8px;text-transform:uppercase;letter-spacing:.3px}.arch-mobile{--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace}.arch-mobile-head{margin:0 0 16px}.arch-m-title{font-size:24px;font-weight:700;color:#1b2030;margin:0;line-height:1.15}.arch-m-sub{font-family:var(--mono);font-size:12px;color:#6b7280;margin:8px 0 0;line-height:1.4}.arch-m-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:4px;padding:4px 4px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:flex-start}.arch-m-track::-webkit-scrollbar{display:none}.arch-m-slide{flex:0 0 88%;max-width:380px;scroll-snap-align:center;background:#f5f6fb;border:1px solid #e9ebf3;border-radius:20px;padding:16px;display:flex;flex-direction:column}.arch-m-slide-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}.arch-m-slide-index{font-family:var(--mono);font-size:12px;color:#a2a8bd}.arch-m-slide-name{font-size:18px;font-weight:700;color:#1b2030;line-height:1.1}.arch-m-flow,.arch-m-step{display:flex;flex-direction:column}.arch-m-layertag{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px}.arch-m-datagroup{display:flex;flex-direction:column;gap:12px}.arch-m-flow .arch-card{width:100%;box-shadow:0 1px 2px #141e500a,0 6px 16px #141e500f}.arch-vm-connector{display:flex;flex-direction:column;align-items:center;align-self:center;padding:6px 0}.arch-vm-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}.arch-vm-line{width:2.5px;height:26px;border-radius:2px}.arch-m-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-family:var(--mono);font-size:12px;color:#9aa0b4;text-transform:uppercase;letter-spacing:.5px}.arch-m-footer{display:flex;align-items:center;gap:12px;margin-top:16px;background:#fff;border:1px solid #e6e9f2;border-radius:14px;padding:16px 18px;font-size:14px;color:#4b5063;box-shadow:0 1px 2px #141e500a,0 10px 26px #141e500f}.arch-m-footer svg{flex:0 0 auto}