.arch{--bg:#121212;--panel:#161616;--surface:#1b1b1b;--ink:#ededed;--ink-2:#9a9a9a;--ink-3:#6f6f6f;--hair:#2a2a2a;--line:#474747;--node-ext:#4c4c4c;--node-sys:#5f5f5f;--node-dest:#e6e6e6;--acc-ext:#4c4c4c;--acc-sys:gray;--acc-dest:#ededed;--bright:#f6f6f6;--arch-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}.arch-legend{flex-wrap:wrap;gap:10px 22px;margin:26px 0 16px;display:flex}.arch-legend .li{color:var(--ink-2);align-items:center;gap:9px;font-size:12.5px;display:inline-flex}.arch-legend .sw{border-radius:4px;flex:none;width:15px;height:15px}.arch-legend .sw.ext{border:2px dashed var(--node-ext);background:0 0}.arch-legend .sw.sys{border:2px solid var(--node-sys);background:var(--surface)}.arch-legend .sw.dest{border:2px solid var(--node-dest);background:var(--node-dest)}.arch-stage{border:1px solid var(--hair);background:var(--panel);border-radius:14px;overflow:hidden}.arch-wide{width:min(100vw - 2rem,70rem);position:relative;left:50%;transform:translate(-50%)}.arch-scroll{overflow-x:auto}.arch svg.diagram{width:100%;min-width:960px;height:auto;display:block}.arch .frame{fill:none;stroke:var(--hair);stroke-width:1.5px}.arch .frame-label{font:600 11px var(--arch-font);letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-3)}.arch .annot-k{font:600 10.5px var(--arch-font);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-2)}.arch .annot{font:400 11px var(--arch-font);fill:var(--ink-2)}.arch .link{fill:none;stroke:var(--line);stroke-width:2px;transition:stroke .15s,opacity .15s}.arch .link.dash{stroke-dasharray:5 5}.arch .link-label{font:400 10.5px var(--arch-font);fill:var(--ink-2)}.arch .node{cursor:pointer}.arch .node rect.box{fill:var(--surface);stroke-width:1.6px;transition:stroke .15s,stroke-width .15s}.arch .node .n-title{font:640 14px var(--arch-font);fill:var(--ink)}.arch .node .n-sub{font:400 11px var(--arch-font);fill:var(--ink-2)}.arch .node .badge{font:600 9px var(--arch-font);letter-spacing:.1em;fill:var(--ink-2)}.arch .node.ext rect.box{stroke:var(--node-ext);stroke-dasharray:5 3}.arch .node.sys rect.box{stroke:var(--node-sys)}.arch .node.dest rect.box{stroke:var(--node-dest)}.arch .node.dest .n-title{fill:var(--bright)}.arch .node .accent{stroke-width:4px;stroke-linecap:round}.arch .node.ext .accent{stroke:var(--acc-ext)}.arch .node.sys .accent{stroke:var(--acc-sys)}.arch .node.dest .accent{stroke:var(--acc-dest)}.arch .node:focus{outline:none}.arch .node:hover rect.box,.arch .node:focus rect.box{stroke:var(--bright);stroke-width:2.4px;stroke-dasharray:0}.arch .node:focus-visible rect.box{stroke-dasharray:3 3}.arch svg.focusing .node:not(.is-active){opacity:.4}.arch svg.focusing .link:not(.is-active){opacity:.16}.arch svg.focusing .link.is-active{stroke:var(--ink);stroke-width:2.4px}.arch-detail{border:1px solid var(--hair);background:var(--panel);border-radius:12px;grid-template-columns:auto 1fr;align-items:start;gap:4px 16px;min-height:88px;margin-top:16px;padding:18px 20px;display:grid}.arch-detail .tag{font:600 10px var(--arch-font);letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--hair);color:var(--ink-2);white-space:nowrap;border-radius:999px;grid-row:span 3;align-self:center;padding:6px 11px}.arch-detail .tag.ext{color:var(--ink-2);border-color:var(--node-ext)}.arch-detail .tag.sys{color:#cfcfcf;border-color:var(--node-sys)}.arch-detail .tag.dest{color:var(--bright);border-color:var(--node-dest)}.arch-detail .d-title{margin:0;font-size:16px;font-weight:650}.arch-detail .d-role{color:var(--ink-2);margin:2px 0 0;font-size:14px}.arch-detail .d-tech{color:var(--ink-3);letter-spacing:.01em;margin:6px 0 0;font-size:12px}.arch-detail.hint{grid-template-columns:1fr}.arch-detail.hint .d-role{color:var(--ink-3)}.arch-notes{margin-top:34px}.arch-notes-h{letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px;font-size:11px;font-weight:600}.arch-notes-sub{color:var(--ink-2);margin:0 0 18px;font-size:13.5px}.arch .note-grid{background:var(--hair);border:1px solid var(--hair);border-radius:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;display:grid;overflow:hidden}.arch .note{background:var(--bg);padding:17px 19px}.arch .note .k{letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;font-size:10.5px;font-weight:600;display:block}.arch .note p{color:var(--ink-2);margin:0;font-size:13.5px;line-height:1.5}