/* Built by Documentation/architecture/build.mjs from src/page.css. Never edit. */
.arch-scope { --bg: #fbfaf7; --panel: #ffffff; --ink: #131822; --soft: #3c4759; --dim: #5a6576; --line: #e3dfd6; --acc: #0048ba; --zone: #cfc9bd; --node: #cfc9bd; --ours: #f6f4ee; --model: #2f8a63; --model-bg: #e9f4ee; --llm: #4a6fc0; --llm-bg: #eaf0fb; --fa: #0048ba; --fb: #1f7a4d; --code: #f1efe9; --display: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Space Mono", ui-monospace, Consolas, monospace; }
.arch-scope, .arch-scope * { box-sizing: border-box; }
.arch-scope { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.arch-scope a { color: var(--acc); }
.arch-scope .sec { padding: clamp(40px, 6vw, 76px) clamp(16px, 5vw, 64px); border-top: 1px solid var(--line); }
.arch-scope .sec:first-of-type { border-top: 0; }
.arch-scope .in { max-width: 1000px; margin: 0 auto; }
.arch-scope .kick { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin: 0 0 14px; }
.arch-scope h1, .arch-scope h2 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.arch-scope h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.06; }
.arch-scope h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.14; max-width: 24ch; }
.arch-scope .scn h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; max-width: 24ch; }
.arch-scope .lede { font-size: clamp(16.5px, 1.6vw, 18.5px); color: var(--soft); max-width: 62ch; margin: 16px 0 0; }
.arch-scope figure.dg { margin: 30px 0 8px; background: var(--panel); border: 1px solid var(--line); padding: 16px 10px 10px; }
.arch-scope figure.dg svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.arch-scope figure.dg figcaption { font-size: 14px; color: var(--dim); text-align: center; padding: 10px 6px 2px; }
.arch-scope figure.dg .dg-tall { display: none; }
@media (max-width: 899px) {
.arch-scope figure.dg .dg-wide { display: none; }
.arch-scope figure.dg .dg-tall { display: block; }
}
.arch-scope .dg-error { color: #ad463f; font-size: 14px; }
.arch-scope .dg text { font-family: var(--sans); fill: var(--ink); }
.arch-scope .dg .zone { fill: none; stroke: var(--zone); stroke-width: 1.2; stroke-dasharray: 6 4; }
.arch-scope .dg .zone.ours { fill: var(--ours); }
.arch-scope .dg .zl { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; fill: var(--acc); }
.arch-scope .dg .rl { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; fill: var(--dim); }
.arch-scope .dg .shape { fill: var(--panel); stroke: var(--node); stroke-width: 1.2; }
.arch-scope .dg .shape.line { fill: none; }
.arch-scope .dg .dot { fill: var(--zone); }
.arch-scope .dg .node.frame .shape { stroke: var(--fb); stroke-dasharray: 3 3; }
.arch-scope .dg .node.model .shape { fill: var(--model-bg); stroke: var(--model); }
.arch-scope .dg .node.llm .shape { fill: var(--llm-bg); stroke: var(--llm); }
.arch-scope .dg .nt { font-weight: 600; }
.arch-scope .dg .ns { fill: var(--dim); }
.arch-scope .dg .glyph { fill: none; stroke: var(--dim); stroke-width: 1.4; stroke-linecap: round; }
.arch-scope .dg a .shape { transition: stroke .15s; }
.arch-scope .dg a:hover .shape, .arch-scope .dg a:focus .shape { stroke: var(--acc); }
.arch-scope .dg a .nt { fill: var(--acc); }
.arch-scope .dg .edge { fill: none; stroke: var(--dim); stroke-width: 1.3; }
.arch-scope .dg .edge.a { stroke: var(--fa); }
.arch-scope .dg .edge.b { stroke: var(--fb); }
.arch-scope .dg .edge.dashed { stroke-dasharray: 4 3; }
.arch-scope .dg .mk { fill: var(--dim); }
.arch-scope .dg .mk.a { fill: var(--fa); }
.arch-scope .dg .mk.b { fill: var(--fb); }
.arch-scope .dg .badge.a { fill: var(--fa); }
.arch-scope .dg .badge.b { fill: var(--fb); }
.arch-scope .dg .bn { fill: #fff; font-size: 11px; font-weight: 700; }
.arch-scope .dg .el { font-size: 10px; fill: var(--soft); stroke: var(--panel); stroke-width: 3px; paint-order: stroke; }
.arch-scope .flow { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 26px 0 0; display: flex; align-items: center; gap: 10px; }
.arch-scope .flow::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--fa); flex: none; }
.arch-scope .flow.b::before { border-radius: 4px; background: var(--fb); }
.arch-scope .steps { list-style: none; counter-reset: s; margin: 14px 0 0; padding: 0; max-width: 780px; }
.arch-scope .steps li { counter-increment: s; position: relative; padding: 7px 0 7px 40px; color: var(--soft); }
.arch-scope .steps li b { color: var(--ink); font-weight: 600; }
.arch-scope .steps li::before { content: counter(s); position: absolute; left: 0; top: 9px; width: 24px; height: 24px; border-radius: 50%; background: var(--fa); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.arch-scope .steps.b li::before { border-radius: 5px; background: var(--fb); }
.arch-scope .note { border-left: 3px solid var(--acc); padding: 4px 0 4px 18px; margin: 24px 0 0; max-width: 780px; color: var(--soft); }
.arch-scope .note b { color: var(--ink); }
.arch-scope h3.plain { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 34px 0 0; }
.arch-scope .moves { width: 100%; max-width: 880px; border-collapse: collapse; margin: 12px 0 0; font-size: 15px; }
.arch-scope .moves th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); font-weight: 700; padding: 8px 14px 8px 0; border-bottom: 2px solid var(--ink); }
.arch-scope .moves td { vertical-align: top; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); color: var(--soft); line-height: 1.45; }
.arch-scope .moves td:first-child { color: var(--ink); font-weight: 600; }
.arch-scope .moves td:last-child { color: var(--ink); }
.arch-scope .moves.two td:first-child { font-weight: 400; color: var(--soft); width: 46%; }
@media (max-width: 719px) {
.arch-scope .moves thead { display: none; }
.arch-scope .moves, .arch-scope .moves tbody, .arch-scope .moves tr, .arch-scope .moves td { display: block; width: auto; }
.arch-scope .moves tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
.arch-scope .moves td { border: 0; padding: 2px 0 2px 104px; position: relative; }
.arch-scope .moves td::before { content: attr(data-h); position: absolute; left: 0; top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 400; }
.arch-scope .moves.two td:first-child { width: auto; }
}
.arch-scope nav.way.sec { border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(28px, 4vw, 44px); }
.arch-scope .way .in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 28px; align-items: start; }
.arch-scope .way a { text-decoration: none; font-weight: 600; line-height: 1.35; }
.arch-scope .way a:hover { text-decoration: underline; }
.arch-scope .way a span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 400; margin-bottom: 4px; }
.arch-scope .way .next { text-align: right; }
.arch-scope .way .all { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; white-space: nowrap; padding-top: 2px; }
@media (max-width: 719px) {
.arch-scope .way .in { grid-template-columns: 1fr; }
.arch-scope .way .next { text-align: left; }
.arch-scope .way span.prev, .arch-scope .way span.next { display: none; }
}
.arch-scope .groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 40px; margin: 26px 0 0; }
.arch-scope .group { border-top: 2px solid var(--ink); padding: 14px 0 16px; }
.arch-scope .group h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin: 0 0 8px; font-weight: 700; }
.arch-scope .group ol { list-style: none; margin: 0; padding: 0; }
.arch-scope .group li { padding: 3px 0 3px 30px; position: relative; color: var(--dim); line-height: 1.45; }
.arch-scope .group li::before { content: attr(data-n); position: absolute; left: 0; font-family: var(--mono); font-size: 12px; top: 5px; }
.arch-scope .group li a { font-weight: 600; text-decoration: none; }
.arch-scope .group li a:hover { text-decoration: underline; }