.diagram, .diagram-defs {
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --surface: #111113; --surface-2: #18181b; --ink: #f4f4f5; --dim: #a1a1aa; --line: #3f3f46; --rule: rgba(255, 255, 255, 0.10);
  --runtime: #f6821f; --runtime-t: rgba(246, 130, 31, 0.14);
  --lib: #d4d4d8; --lib-t: rgba(212, 212, 216, 0.08);
  --flow: #71717a; --flow-t: rgba(113, 113, 122, 0.14);
  --mcp: #fbbf24; --mcp-t: rgba(251, 191, 36, 0.10);
  --model: #fb923c; --model-t: rgba(251, 146, 60, 0.10);
  --q: #d4d4d8; --sec: #f97316; --sec-t: rgba(249, 115, 22, 0.12);
}

.diagram svg .t { font-size: 15px; font-weight: 600; }
.diagram svg .s { font-size: 13.5px; fill: var(--dim); }
.diagram svg .m { font-family: var(--mono); font-size: 12px; fill: var(--dim); }
.diagram svg .q { fill: var(--surface); stroke: var(--q); stroke-width: 1.6; }
.diagram svg .qt { font-size: 15.5px; font-weight: 600; }
.diagram svg .edge { stroke: var(--line); stroke-width: 1.8; fill: none; }
.diagram svg .edge-strong { stroke: var(--dim); stroke-width: 2; fill: none; }
.diagram svg .yn { font-family: var(--mono); font-size: 14px; font-weight: 500; fill: var(--ink); }
.diagram svg .node { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.diagram svg .o-rt { fill: var(--runtime-t); stroke: var(--runtime); stroke-width: 2; }
.diagram svg .o-lib { fill: var(--lib-t); stroke: var(--lib); stroke-width: 2; }
.diagram svg .o-flow { fill: var(--flow-t); stroke: var(--flow); stroke-width: 2; }
.diagram svg .o-mcp { fill: var(--mcp-t); stroke: var(--mcp); stroke-width: 2; }
.diagram svg .o-model { fill: var(--model-t); stroke: var(--model); stroke-width: 1.6; }
.diagram svg .dash { stroke-dasharray: 6 5; }
.diagram svg .chip { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.diagram svg .chip-you { fill: var(--runtime-t); stroke: var(--runtime); stroke-width: 1.4; stroke-dasharray: 4 3; }
.diagram svg .chip-rt { fill: var(--runtime-t); stroke: var(--runtime); stroke-width: 1.2; }
.diagram svg .chip-flow { fill: var(--surface); stroke: var(--flow); stroke-width: 1.3; }
.diagram svg .tag-rt { fill: var(--runtime); }
.diagram svg .tag-lib { fill: var(--lib); }
.diagram svg .tag-flow { fill: var(--flow); }
.diagram svg .tag-mcp { fill: var(--mcp); }
.diagram svg .tag-model { fill: var(--model); }
.diagram svg .lab-rt { fill: var(--runtime); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.diagram svg .lab-lib { fill: var(--lib); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.diagram svg .lab-flow { fill: var(--flow); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.diagram svg .lab-mcp { fill: var(--mcp); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.diagram svg .lab-model { fill: var(--model); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.diagram svg .o-sec { fill: var(--sec-t); stroke: var(--sec); stroke-width: 2; }
.diagram svg .chip-sec { fill: var(--sec-t); stroke: var(--sec); stroke-width: 1.3; }
.diagram svg .lab-sec { fill: var(--sec); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.diagram svg a { cursor: pointer; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram svg a { cursor: pointer; }
.diagram svg.min { min-width: 900px; }
.poster-svg { --cf: #f6821f; --cf-t: rgba(246, 130, 31, .14);
    --you: #d4d4d8; --you-t: rgba(212, 212, 216, .08);
    --id: #fb923c; --id-t: rgba(251, 146, 60, .12);
    --iso: #fbbf24; --iso-t: rgba(251, 191, 36, .10);
    --ink: #f4f4f5; --dim: #a1a1aa; --bg: #111113; }
.poster-svg svg { display:block; width:100%; height:auto; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;}
.poster-svg svg text { fill: var(--ink); }
.poster-svg .title { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; }
.poster-svg .sub { font-size: 18px; fill: var(--dim); }
.poster-svg .h { font-size: 20px; font-weight: 700; }
.poster-svg .h2 { font-size: 17px; font-weight: 700; }
.poster-svg .h3 { font-size: 14px; font-weight: 700; }
.poster-svg .s2 { font-size: 12.5px; fill: var(--dim); }
.poster-svg .cfl { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .16em; fill: var(--cf); }
.poster-svg .swgopt { stroke-dasharray: 6 4; }
.poster-svg .or { font-size: 14px; font-weight: 700; fill: var(--dim) !important; }
.poster-svg .bgmask { fill: var(--bg); }
.poster-svg .s { font-size: 14.5px; fill: var(--dim); }
.poster-svg .c { font-size: 15px; font-weight: 500; text-anchor: middle; }
.poster-svg .c2 { font-size: 13px; font-weight: 500; text-anchor: middle; }
.poster-svg .m { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12.5px; fill: var(--dim); }
.poster-svg .leg { font-size: 14px; fill: var(--ink); }
.poster-svg .src { font-size: 11.5px; fill: #8b8b95; }
.poster-svg .cfword { font-size: 20px; font-weight: 700; letter-spacing: .18em; fill: var(--cf); }
.poster-svg .box-cf { fill: var(--cf-t); stroke: var(--cf); stroke-width: 2.2; }
.poster-svg .box-you { fill: var(--you-t); stroke: var(--you); stroke-width: 2.2; }
.poster-svg .box-id { fill: var(--id-t); stroke: var(--id); stroke-width: 2.2; }
.poster-svg .box-iso { fill: var(--iso-t); stroke: var(--iso); stroke-width: 2.2; }
.poster-svg .cfbox { fill: #18181b; fill-opacity: .55; stroke: var(--cf); stroke-width: 2.2; stroke-dasharray: 10 6; }
.poster-svg .chip { fill: #18181b; stroke: var(--you); stroke-width: 1.4; }
.poster-svg .chip-iso { fill: #18181b; stroke: var(--iso); stroke-width: 1.6; }
.poster-svg .chip-opt { fill: #18181b; stroke: var(--cf); stroke-width: 1.6; stroke-dasharray: 5 3; }
.poster-svg .chip-id { fill: #18181b; stroke: var(--id); stroke-width: 1.6; }
.poster-svg .dw { fill: #18181b; stroke: var(--iso); stroke-width: 2.4; }
.poster-svg .glyph { fill: #18181b; stroke: var(--you); stroke-width: 1.8; }
.poster-svg .ar { stroke: #71717a; stroke-width: 2.2; fill: none; }
.poster-svg .ar-s { stroke: var(--iso); stroke-width: 2.2; fill: none; }
.poster-svg .ar-id { stroke: var(--id); stroke-width: 3.4; fill: none; }
.poster-svg .dash { stroke-dasharray: 7 5; }
.poster-svg .dot { fill: #71717a; }
.poster-svg .idb { fill: var(--id); }
.poster-svg .idt { font-size: 10.5px; font-weight: 700; fill: #fff !important; }
.poster-svg .idl { font-size: 13px; font-weight: 600; fill: var(--id) !important; }
.poster-svg .numb { fill: var(--ink); }
.poster-svg .numt { font-size: 15px; font-weight: 700; fill: #fff !important; }
.poster-svg .lg-cf { fill: var(--cf-t); stroke: var(--cf); stroke-width: 2; }
.poster-svg .lg-you { fill: var(--you-t); stroke: var(--you); stroke-width: 2; }
.poster-svg .lg-id { fill: var(--id-t); stroke: var(--id); stroke-width: 2; }
.poster-svg .lg-iso { fill: var(--iso-t); stroke: var(--iso); stroke-width: 2; }
.poster-svg .ribbon { fill: var(--id-t); stroke: var(--id); stroke-width: 2.4; }
.poster-svg .rt { font-size: 15.5px; font-weight: 700; fill: var(--id) !important; }
.poster-svg .rs { font-size: 13.5px; fill: var(--ink); }
.poster-svg .chev { fill: none; stroke: var(--id); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.matrix-fig { --cf: #f6821f; --cf-t: rgba(246, 130, 31, .12); --ink: #f4f4f5; --dim: #a1a1aa; --bg: #111113; --line: #3f3f46; --teal: #f6821f; }
.matrix-fig .legend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15px; }
.matrix-fig .lg { display: inline-flex; align-items: center; gap: 8px; }
.matrix-fig .lg b { font-weight: 600; }
.matrix-fig table { margin-top: 14px; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: #111113; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.matrix-fig th, .matrix-fig td { border-bottom: 1px solid #27272a; }
.matrix-fig tr:last-child th, .matrix-fig tr:last-child td { border-bottom: 0; }
.matrix-fig th.corner { width: 340px; text-align: left; padding: 10px 16px; font-size: 15px; color: var(--dim); font-weight: 500; vertical-align: bottom; border-bottom: 2px solid var(--ink); }
.matrix-fig th.grp { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 600; border-left: 1px solid var(--line); padding: 9px 4px; text-align: center; }
.matrix-fig th.col { font-size: 14.5px; font-weight: 600; text-align: center; padding: 8px 6px 11px; border-left: 1px solid #27272a; border-bottom: 2px solid var(--ink); vertical-align: bottom; line-height: 1.25; }
.matrix-fig th.coreh { width: 64px; font-size: 14px; border-left: 1px solid var(--line); border-bottom: 2px solid var(--ink); vertical-align: bottom; padding: 8px 4px 11px; }
.matrix-fig tr.rg th { background: rgba(246, 130, 31, .10); text-align: left; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; color: #fdba74; }
.matrix-fig th.rowh { text-align: left; padding: 11px 16px; border-right: 1px solid var(--line); font-weight: 400; }
.matrix-fig th.rowh b { display: block; font-size: 17px; }
.matrix-fig th.rowh span { display: block; font-size: 14px; color: var(--dim); margin-top: 2px; }
.matrix-fig td { text-align: center; padding: 7px 2px; border-left: 1px solid #27272a; }
.matrix-fig td.cnt { font-weight: 700; font-size: 16px; color: var(--dim); }
.matrix-fig td.wr { text-align: left; padding: 8px 14px; font-size: 15px; color: var(--ink); }
.matrix-fig .tag { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 8px; padding: 1px 9px; border-radius: 99px; border: 1px solid var(--cf); color: var(--cf); vertical-align: 2px; white-space: nowrap; }
.matrix-fig .cell { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; font-size: 21px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.matrix-fig .cell.sm { width: 28px; height: 28px; font-size: 16px; }
.matrix-fig .mC { background: var(--cf); color: #000; }
.matrix-fig .mI, .matrix-fig .aV { background: var(--teal); color: #000; }
.matrix-fig .mR, .matrix-fig .aP { background: var(--cf-t); color: var(--cf); border-color: var(--cf); }
.matrix-fig .mO { background: #18181b; color: #a1a1aa; border-color: #71717a; }
.matrix-fig .mN, .matrix-fig .aN { color: #71717a; font-size: 30px; font-weight: 700; }
.matrix-fig .aU { background: #18181b; color: #a1a1aa; border: 2px dashed #71717a; font-weight: 700; }
.matrix-fig .notes { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.matrix-fig .box { background: #18181b; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.matrix-fig .box h3 { font-size: 16px; margin-bottom: 6px; }
.matrix-fig .box ul { margin-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.matrix-fig .src { margin-top: 18px; font-size: 13px; color: var(--dim); }

/* site integration */
.diagram svg text { font-family: var(--font); }
.diagram.mini svg { background: var(--surface-2); border-radius: 10px; }
.matrix-fig { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); line-height: 1.4; }
.matrix-scroll { overflow-x: auto; }
.matrix-fig table { min-width: 1100px; font-size: 1rem; }
.matrix-fig th, .matrix-fig td { position: static; text-transform: none; letter-spacing: normal; white-space: normal; background: transparent; }
.matrix-fig th.corner { width: 230px; }
.matrix-fig .tag { text-transform: none; letter-spacing: normal; color: var(--cf); display: inline; margin-left: 8px; font-size: 12px; }
.matrix-fig .legend { color: var(--ink); }
.matrix-fig tr.rg th { background: rgba(246, 130, 31, .10); }
.matrix-fig th.rowh b { color: var(--ink); }
.matrix-fig td.wr { text-align: left; }
.matrix-fig th, .matrix-fig td { vertical-align: middle; }
.matrix-fig th.col, .matrix-fig th.coreh, .matrix-fig th.corner { vertical-align: bottom; }
.matrix-fig table.matrix-m2 th.col { width: 92px; font-size: 13px; overflow-wrap: normal; }
.matrix-fig table.matrix-m2 th.corner { width: 270px; }
.matrix-fig th.col { overflow-wrap: break-word; }
.matrix-fig table.matrix-m2 th.col.wr-h { width: 380px; font-size: 14.5px; }
.diagram-defs svg { position: absolute; }
.diagram svg .s-nofill { fill: none; }
.diagram svg .s-fillsec { fill: var(--sec); }
.diagram svg .s-secdash { stroke: var(--sec); stroke-dasharray: 6 5; }
.diagram svg .s-dash54 { stroke-dasharray: 5 4; }
.matrix-fig th.wr-h { text-align: left; padding-left: 14px; }
.diagram svg .t2 { font-size: 20px; font-weight: 600; }
.diagram svg .s2 { font-size: 16px; fill: var(--dim); }
.diagram svg .m2 { font-family: var(--mono); font-size: 15px; fill: var(--dim); }
.diagram svg .lab2 { fill: var(--runtime); font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }