.architecture-map{padding:24px!important;background:#fff;border:1px solid #e1e7de;border-radius:16px}
.architecture-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.architecture-header h2{font-size:20px;line-height:1.4;font-weight:600;color:#192b25;margin:0}
.architecture-header p{font-size:12px;line-height:1.8;color:#64756c;margin:8px 0 0}
.architecture-total{font-size:11px;color:#52678e;white-space:nowrap;margin-top:5px}
.architecture-map .m-layer{display:grid;grid-template-columns:174px minmax(0,1fr);gap:20px;margin:0;padding:18px 16px;background:#fafbf9;border:1px solid #e6ebe5!important;border-radius:10px;transition:background .2s,border-color .2s;animation:none!important}
.architecture-map .m-layer:nth-of-type(4){background:#f6f9ff;border-color:#d7e2f5!important}
.architecture-map .m-head{display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;margin:0;flex-direction:row;text-align:left}
.layer-index{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border:1px solid #d5e0f1;border-radius:8px;background:#fff;color:#41628e;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.layer-copy h3{font-size:15px;line-height:1.4;font-weight:600;color:#243e68;margin:0}
.layer-copy p{font-size:11px;color:#64756c;line-height:1.6;margin:5px 0 0}
.layer-count{display:block;margin-top:8px;font-size:10px;color:#64756c;font-variant-numeric:tabular-nums}
.architecture-map .m-pills{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:7px;margin:0;min-width:0}
.architecture-map .m-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;max-width:100%;padding:8px 10px;font-size:12px;line-height:1.4;border-radius:7px;white-space:normal;overflow-wrap:anywhere;background:#fff!important;color:#3c5067!important;border:1px solid #dfe5ed;box-shadow:none!important;cursor:pointer}
.architecture-map .m-pill[data-key=true]{background:#eaf0ff!important;border-color:#c3d3f3;color:#2348b8!important;font-weight:600}
.architecture-map .m-pill:hover,.architecture-map .m-pill:focus-visible,.architecture-map .m-pill.on{background:#e3ecff!important;border-color:#7498e7!important;color:#2348b8!important;transition-delay:0s!important;transform:translateY(-2px)}
.architecture-map .m-pill:active{transform:scale(.97)}
.architecture-map .m-pill:focus-visible{outline:2px solid #2348b8;outline-offset:3px}
.architecture-map .m-layer:focus-within,.architecture-map .m-layer:has(.m-pill.on){background:#f2f7ff;border-color:#b7cdef!important}
.architecture-map .m-link{display:flex;align-items:center;height:22px;padding:0 0 0 26px;text-align:left;color:#a3b6d4}
.architecture-foot{border-top:1px solid #e6ebe5;padding-top:14px;margin:20px 0 0;font-size:11px;line-height:1.8;color:#64756c}
@media(max-width:767px){.architecture-map{padding:22px 16px!important}.architecture-header{gap:12px;margin-bottom:20px}.architecture-header h2{font-size:19px}.architecture-total{font-size:10px}.architecture-map .m-layer{grid-template-columns:1fr;gap:14px;padding:16px 12px}.layer-count{display:inline-block;margin:0 0 0 8px}.layer-copy p{display:inline;margin:0;font-size:11px}.layer-copy h3{margin-bottom:5px}.architecture-map .m-pill{min-height:44px;padding:10px 12px}.architecture-map .m-link{padding-left:22px;height:20px}}
@media(prefers-reduced-motion:reduce){.architecture-map .m-pill:hover,.architecture-map .m-pill:focus-visible,.architecture-map .m-pill:active{transform:none!important}.architecture-map .m-layer{transition:none}}