会话记忆、企业知识 RAG、意图识别与 Agent 编排。
{description}
: null}{description}
: null}InsightFlow 将对话编排与数据推理连接为一条可运行链路:MindAgent 理解上下文并选择专业 Agent,DataAgent 将业务问题转换为经过治理、执行和校验的 SQL。
会话记忆、企业知识 RAG、意图识别与 Agent 编排。
Schema 检索、查询规划、SQL 生成、治理执行与结果解释。
Caddy、Redis、Docker Compose、健康检查与冒烟测试。
让企业知识问答与数据分析共用一个可信的 Agent 入口。
对话理解、上下文管理、知识检索、意图识别与路由。
Schema 召回、查询规划、SQL 生成、治理执行与解释。
自然语言问题、历史对话、系统指令与工具状态。
结构化意图、业务约束、用户权限与数据库元数据。
统一、可追踪的 Agent 响应与后续动作。
受治理的 SQL、结果集、校验状态与问题导向解释。
直接访问业务数据库或绕过数据安全策略。
维护会话记忆或编排跨领域 Agent。
POST /chat
HTTPS · API Key
Memory · RAG · Router
Text2SQL · Audit
Redis 保存近期消息与 TTL,历史摘要按当前问题检索;回答完成后更新会话与用户画像。
查询改写后并行调用知识工具,通过缓存、超时和熔断控制外部依赖。
从字段级元数据构建局部 Schema,生成数据库、输入、输出与依赖明确的查询步骤。
{scenario.question}
{step}
公开 API 与内部服务使用不同密钥;模型 Key 只存于当前浏览器内存,不写入仓库和样例数据库。
仅接受单条 SELECT / WITH,拦截写入、DDL、管理指令、危险函数和未授权数据表。
SQLite 使用只读连接与 query_only,设置执行超时、最大返回行数和表白名单。
核对执行状态、行列一致性与数值有效性,记录 SQL 指纹、耗时、策略结果和错误信息。
DELETE FROM account_balance WHERE user_id = ?;BLOCKED在数据库执行前被 SQL 治理层拒绝拒绝多语句拼接、注释注入与不完整语法,模型输出必须先经过解析。
仅接受单条 SELECT / WITH,拦截 INSERT、UPDATE、DELETE、DDL 与管理指令。
仅允许当前 Schema 中的授权对象,并拒绝文件、扩展和高风险函数。
核对行列与数值一致性,记录 SQL 指纹、耗时、策略结果和错误信息。
DROP TABLE accounts;已拒绝在数据库执行前被 SQL 治理层拦截复制 .env.example,设置域名、入口密钥、内部密钥与模型配置。
Compose 构建 MindAgent、DataAgent、Redis 与 Caddy,内部服务不直接暴露端口。
检查健康状态,再用带鉴权的 /chat 请求验证 MindAgent → DataAgent 调用。
{`cp .env.example .env
+ return - 01准备配置
复制 .env.example,设置域名、入口密钥、内部密钥与模型配置。
- 02启动服务
Compose 构建 MindAgent、DataAgent、Redis 与 Caddy,内部服务不直接暴露端口。
- 03验证链路
检查健康状态,再用带鉴权的 /chat 请求验证 MindAgent → DataAgent 调用。
{`cp .env.example .env
docker compose up -d --build
docker compose ps
./deploy/smoke-test.sh`}
阅读国内服务器上线指南 ↗ ;
}
-function Resume() {
- return PROJECT SUMMARYInsightFlow
企业知识与数据问答 Agent
Java 21 · Spring Boot · Spring AI · Python · SQLite · Redis · React · Docker
- 设计 MindAgent / DataAgent 分层架构,以统一对话入口编排知识问答、技术支持、账单账户与数据查询。
- 实现字段级 Schema 混合检索、SchemaGraph、CoT 查询规划、局部 Schema SQL 生成及有限自动纠错。
- 在执行层实现只读语句校验、表白名单、危险函数拦截、结果一致性校验与查询审计。
- 使用 Docker Compose、Caddy、Redis、健康检查和冒烟测试交付完整服务,并以 GitHub Pages 提供可运行范例。
建议演示顺序架构 2 分钟 → 数据链路 4 分钟 → 安全与部署 2 分钟打开仓库 ↗ ;
-}
-
export default function App() {
const [activeSection, setActiveSection] = useState("overview");
useEffect(() => {
@@ -209,5 +203,5 @@ export default function App() {
sections.forEach((section) => observer.observe(section));
return () => observer.disconnect();
}, []);
- return ;
+ return ;
}
diff --git a/demo-site/src/styles.css b/demo-site/src/styles.css
index 0579778..5598327 100644
--- a/demo-site/src/styles.css
+++ b/demo-site/src/styles.css
@@ -1,302 +1,265 @@
:root {
- color-scheme: light;
- font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
- color: #152033;
- background: #f5f6f8;
- font-synthesis: none;
- --ink: #152033;
- --muted: #677084;
- --blue: #1958d8;
- --blue-dark: #0f3f9f;
- --line: #dce0e7;
- --soft: #f6f8fb;
+ --bg: #f7f7f3; --surface: #fff; --ink: #202421; --muted: #677069;
+ --line: #d7dcd6; --soft: #eef2ed; --green: #246b55; --green-dark: #174f3e;
+ --green-soft: #eaf2ee; --rust: #a24b35;
--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
+ color: var(--ink); background: var(--bg); font-synthesis: none;
}
-
* { box-sizing: border-box; }
-html { scroll-behavior: smooth; }
-body { margin: 0; min-width: 320px; min-height: 100vh; background: #f5f6f8; }
-button, input, select, textarea { font: inherit; }
-button, a, summary { -webkit-tap-highlight-color: transparent; }
+html { overflow-x: clip; scroll-behavior: smooth; }
+body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--bg); }
+button, textarea, input, select { font: inherit; }
+button, summary, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
-button:disabled { cursor: not-allowed; opacity: .5; }
+button:disabled { cursor: not-allowed; opacity: .48; }
a { color: inherit; }
-code, pre { font-family: var(--mono); }
-.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: white; border: 1px solid var(--ink); }
-.skip-link:focus { top: 12px; }
+::selection { color: var(--ink); background: #cfe2d8; }
+:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
-.app-shell { min-height: 100vh; }
-.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 232px; padding: 28px 22px 24px; display: flex; flex-direction: column; color: white; background: #101a2d; }
-.brand { display: flex; gap: 12px; align-items: center; color: white; text-decoration: none; }
-.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #63708a; font: 500 12px/1 var(--mono); letter-spacing: .06em; }
-.brand > span:last-child { display: grid; gap: 1px; }
-.brand strong { font-size: 17px; letter-spacing: -.02em; }
-.brand small { color: #8c98ae; font: 400 9px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
-.sidebar nav { margin: 70px -22px 0; display: grid; }
-.sidebar nav a { min-height: 47px; padding: 0 22px; display: flex; align-items: center; gap: 15px; border-left: 2px solid transparent; color: #9ba6ba; text-decoration: none; font-size: 13px; transition: color .18s, background .18s, border-color .18s; }
-.sidebar nav a:hover { color: white; background: #15223a; }
-.sidebar nav a.active { color: white; border-left-color: #4b82ff; background: #162642; }
-.sidebar nav span { color: #63708a; font: 400 9px/1 var(--mono); }
-.sidebar nav a.active span { color: #77a0ff; }
-.sidebar-meta { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; border-top: 1px solid #2a3549; }
-.sidebar-meta span { color: #66728a; font: 400 8px/1.5 var(--mono); text-transform: uppercase; }
-.sidebar-meta a { width: fit-content; color: #c4cada; font-size: 11px; text-decoration: none; }
+.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; color: white; background: var(--green); transform: translateY(-160%); }
+.skip-link:focus { transform: translateY(0); }
+.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 208px; padding: 26px 14px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(250,250,247,.97); box-shadow: 6px 0 18px rgba(32,36,33,.025); }
+.brand { height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 10px; text-decoration: none; }
+.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 4px; font: 700 9px/1 var(--mono); }
+.brand strong { font-size: 18px; letter-spacing: -.025em; }
+.sidebar nav { margin: 44px -14px 0; display: grid; gap: 2px; }
+.sidebar nav a { min-height: 44px; padding: 0 24px; display: flex; align-items: center; border-left: 3px solid transparent; color: #48514b; text-decoration: none; font-size: 13px; }
+.sidebar nav a:hover { color: var(--ink); background: #f0f3ef; }
+.sidebar nav a.active { color: var(--green-dark); border-left-color: var(--green); background: var(--green-soft); font-weight: 650; }
+.sidebar-meta { margin-top: auto; padding: 18px 10px 0; display: grid; gap: 10px; border-top: 1px solid var(--line); }
+.sidebar-meta a { width: fit-content; color: var(--green-dark); font-size: 12px; text-decoration: none; }
+.sidebar-meta a:hover { text-decoration: underline; text-underline-offset: 4px; }
+.sidebar-meta span { color: #8a918c; font: 9px/1.5 var(--mono); }
-main { margin-left: 232px; background: white; }
-.page-section { min-height: 620px; padding: 76px clamp(32px, 5vw, 84px); border-bottom: 1px solid var(--line); scroll-margin-top: 0; }
-.section-heading { margin-bottom: 42px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; }
-.section-heading > span { padding-top: 10px; color: var(--blue); font: 500 10px/1 var(--mono); }
-.section-heading h2 { margin: 0; color: var(--ink); font-size: clamp(28px, 3vw, 44px); font-weight: 600; line-height: 1.12; letter-spacing: -.04em; }
-.section-heading p { max-width: 720px; margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
-.eyebrow, .column-title { display: flex; align-items: center; justify-content: space-between; }
-.eyebrow { padding-bottom: 18px; border-bottom: 1px solid var(--ink); color: #657087; font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
+main { margin-left: 208px; }
+.page-section { max-width: 1320px; min-height: 580px; margin: 0 auto; padding: 68px clamp(28px,4vw,64px); border-bottom: 1px solid var(--line); scroll-margin-top: 0; }
+.section-heading { max-width: 780px; margin-bottom: 34px; }
+.section-heading h2 { margin: 0; font-size: clamp(27px,3vw,39px); line-height: 1.12; letter-spacing: -.035em; }
+.section-heading p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
-.overview { min-height: 100vh; padding-top: 42px; display: flex; flex-direction: column; background: #fbfbfc; }
-.overview-grid { flex: 1; display: grid; grid-template-columns: minmax(420px, 1.3fr) minmax(340px, .8fr); align-items: center; gap: clamp(55px, 8vw, 130px); padding: 66px 0; }
-.overview h1 { margin: 0; max-width: 760px; color: var(--ink); font-size: clamp(58px, 6.8vw, 104px); font-weight: 600; line-height: .99; letter-spacing: -.065em; }
-.overview-grid > div:first-child > p { max-width: 670px; margin: 32px 0 0; color: #566074; font-size: 15px; line-height: 1.9; }
-.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; }
-.primary-button { min-width: 128px; height: 44px; display: grid; place-items: center; color: white; background: var(--blue); text-decoration: none; font-size: 13px; font-weight: 600; }
-.primary-button:hover { background: var(--blue-dark); }
-.text-link { color: var(--ink); font-size: 12px; text-underline-offset: 4px; }
-.system-index { border-top: 1px solid var(--ink); }
-.system-index article { min-height: 124px; padding: 21px 0; display: grid; grid-template-columns: 46px 1fr; gap: 16px; border-bottom: 1px solid var(--line); }
-.system-index article > span { color: var(--blue); font: 500 9px/1.4 var(--mono); }
-.system-index strong { color: var(--ink); font-size: 16px; }
-.system-index p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
-.principle-strip { min-height: 54px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: white; }
-.principle-strip span { display: grid; place-items: center; border-right: 1px solid var(--line); color: #525d70; font-size: 10px; }
-.principle-strip span:last-child { border-right: 0; }
+.overview { min-height: 100vh; padding-top: 54px; }
+.overview-intro { max-width: 850px; padding-bottom: 38px; }
+.overview h1 { margin: 0; font-size: clamp(40px,4vw,52px); line-height: 1; letter-spacing: -.045em; }
+.overview-intro > p { margin: 16px 0 0; color: #4c554f; font-size: clamp(17px,1.8vw,22px); line-height: 1.55; letter-spacing: -.02em; }
+.hero-actions { margin-top: 26px; display: flex; align-items: center; gap: 22px; }
+.primary-button { min-height: 40px; padding: 0 17px; display: inline-flex; align-items: center; color: white; border-radius: 3px; background: var(--green); text-decoration: none; font-size: 13px; font-weight: 650; }
+.primary-button:hover { background: var(--green-dark); }
+.text-link { color: var(--green-dark); font-size: 13px; text-underline-offset: 4px; }
+.overview-trace { min-height: 108px; padding: 22px 0; display: grid; grid-template-columns: repeat(5,minmax(90px,1fr) auto) minmax(90px,1fr); align-items: center; border-top: 1px solid #7b837d; border-bottom: 1px solid var(--line); }
+.overview-trace span { min-height: 48px; padding: 0 10px; display: grid; place-items: center; border: 1px solid #bfc6c0; background: var(--surface); text-align: center; font-size: 12px; font-weight: 650; }
+.overview-trace b { padding: 0 8px; color: #7e8881; font: 14px/1 var(--mono); }
+.boundary-table { margin-top: 34px; border-top: 1px solid #7b837d; background: var(--surface); }
+.boundary-table > div { min-height: 47px; display: grid; grid-template-columns: 130px 1fr 1fr; border-bottom: 1px solid var(--line); }
+.boundary-table > div > * { margin: 0; padding: 14px 18px; border-right: 1px solid var(--line); font-size: 12px; line-height: 1.55; }
+.boundary-table > div > *:last-child { border-right: 0; }
+.boundary-table span { color: #707872; font: 10px/1.5 var(--mono); }
+.boundary-head { background: var(--soft); }
+.boundary-head strong { font-size: 12px; }
+.evidence-strip { margin-top: 18px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); background: var(--surface); }
+.evidence-strip span { min-height: 68px; padding: 14px 16px; display: grid; align-content: center; gap: 4px; border-right: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.5; }
+.evidence-strip span:last-child { border-right: 0; }
+.evidence-strip b { color: var(--ink); font-size: 12px; }
-.architecture-flow { display: grid; grid-template-columns: 1.2fr auto .8fr auto 1.2fr auto 1fr; align-items: stretch; }
-.architecture-flow article { min-height: 150px; padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--soft); }
-.architecture-flow article.flow-primary { color: white; border-color: #142a56; background: #142a56; }
-.architecture-flow article > span { color: #7b8496; font: 500 8px/1 var(--mono); }
-.architecture-flow .flow-primary > span { color: #88aafa; }
-.architecture-flow strong { margin-top: auto; font-size: 16px; }
-.architecture-flow p { margin: 8px 0 0; color: #6b7486; font: 400 9px/1.4 var(--mono); }
-.architecture-flow .flow-primary p { color: #adbedf; }
-.architecture-flow > b { align-self: center; padding: 0 11px; color: #8b94a4; font: 400 14px/1 var(--mono); }
-.architecture-details { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
-.architecture-details article { min-height: 190px; padding: 25px 28px 20px 0; border-right: 1px solid var(--line); }
-.architecture-details article + article { padding-left: 28px; }
+.architecture-flow { display: grid; grid-template-columns: 1.2fr auto .9fr auto 1.2fr auto 1fr; align-items: stretch; }
+.architecture-flow article { min-height: 136px; padding: 19px; display: flex; flex-direction: column; border: 1px solid #bfc6c0; background: var(--surface); }
+.architecture-flow article.flow-primary { color: white; border-color: var(--green); background: var(--green); }
+.architecture-flow article > span { color: #848c86; font: 8px/1 var(--mono); }
+.architecture-flow .flow-primary > span { color: #cfe3d9; }
+.architecture-flow strong { margin-top: auto; font-size: 15px; }
+.architecture-flow p { margin: 7px 0 0; color: var(--muted); font: 9px/1.4 var(--mono); }
+.architecture-flow .flow-primary p { color: #dcebe4; }
+.architecture-flow > b { align-self: center; padding: 0 9px; color: #808981; font: 13px/1 var(--mono); }
+.architecture-details { margin-top: 26px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #7b837d; }
+.architecture-details article { min-height: 165px; padding: 22px 25px 18px 0; border-right: 1px solid var(--line); }
+.architecture-details article + article { padding-left: 25px; }
.architecture-details article:last-child { border-right: 0; }
-.architecture-details span, .security-grid span, .resume-grid > div > span { color: var(--blue); font: 500 8px/1 var(--mono); letter-spacing: .08em; }
-.architecture-details h3, .security-grid h3 { margin: 18px 0 10px; color: var(--ink); font-size: 15px; }
-.architecture-details p, .security-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
+.architecture-details span, .security-grid span { color: var(--green); font: 9px/1 var(--mono); }
+.architecture-details h3, .security-grid h3 { margin: 16px 0 9px; font-size: 15px; }
+.architecture-details p, .security-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
-.scenario-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-bottom: 0; }
-.scenario-tabs button { min-height: 48px; border: 0; border-right: 1px solid var(--line); color: #667084; background: #fafbfc; font-size: 11px; }
-.scenario-tabs button:last-child { border-right: 0; }
-.scenario-tabs button.active { color: white; background: var(--blue); }
-.route-board { display: grid; grid-template-columns: .95fr 1.05fr; border: 1px solid var(--line); }
-.route-input { min-height: 340px; padding: 38px; display: flex; flex-direction: column; background: #f7f9fc; border-right: 1px solid var(--line); }
-.route-input > span { color: var(--blue); font: 500 9px/1 var(--mono); }
-.route-input blockquote { margin: 46px 0 36px; color: var(--ink); font-size: 25px; line-height: 1.55; font-weight: 500; letter-spacing: -.025em; }
+.scenario-tabs { display: flex; border-bottom: 1px solid var(--line); }
+.scenario-tabs button { min-height: 43px; padding: 0 22px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 12px; }
+.scenario-tabs button:hover { color: var(--ink); }
+.scenario-tabs button.active { color: var(--green-dark); border-bottom-color: var(--green); font-weight: 650; }
+.route-board { display: grid; grid-template-columns: .92fr 1.08fr; border-bottom: 1px solid var(--line); background: var(--surface); }
+.route-input { min-height: 310px; padding: 32px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
+.route-input > span { color: var(--green); font: 9px/1 var(--mono); }
+.route-input blockquote { margin: 40px 0 32px; font-size: 23px; line-height: 1.5; font-weight: 520; letter-spacing: -.025em; }
.route-input dl { margin: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
-.route-input dl div { padding-top: 18px; }
-.route-input dt { color: #8a93a3; font-size: 9px; }
-.route-input dd { margin: 6px 0 0; font: 500 11px/1 var(--mono); }
+.route-input dl div { padding-top: 15px; }
+.route-input dt { color: #88908a; font-size: 10px; }
+.route-input dd { margin: 5px 0 0; font: 600 10px/1 var(--mono); }
.route-board ol { margin: 0; padding: 0; list-style: none; }
-.route-board li { min-height: 85px; padding: 0 28px; display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
+.route-board li { min-height: 77px; padding: 0 25px; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.route-board li:last-child { border-bottom: 0; }
-.route-board li span { color: var(--blue); font: 500 10px/1 var(--mono); }
-.route-board li p { margin: 0; color: #3d475a; font-size: 13px; }
+.route-board li span { color: var(--green); font: 10px/1 var(--mono); }
+.route-board li p { margin: 0; color: #465049; font-size: 13px; }
-.data-lab { padding-left: clamp(24px, 3.6vw, 60px); padding-right: clamp(24px, 3.6vw, 60px); background: #fbfbfc; }
-.stage-line { margin-bottom: 26px; display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); background: white; }
-.stage-line div { min-height: 64px; padding: 12px; display: flex; align-items: center; gap: 9px; border-right: 1px solid var(--line); color: #9aa2b0; }
-.stage-line div:last-child { border-right: 0; }
-.stage-line span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #cbd0d8; border-radius: 50%; font: 500 9px/1 var(--mono); }
-.stage-line small { font-size: 9px; white-space: nowrap; }
-.stage-line .active { color: var(--blue); background: #f3f6fd; }
-.stage-line .active span { color: white; border-color: var(--blue); background: var(--blue); }
-.stage-line .done { color: #277b58; }
-.stage-line .done span { color: white; border-color: #277b58; background: #277b58; }
-.error-banner { margin-bottom: 18px; padding: 13px 15px; display: flex; gap: 14px; border: 1px solid #d66d50; color: #852e1c; background: #fff7f3; font-size: 11px; }
-.lab-grid { display: grid; grid-template-columns: minmax(230px, .78fr) minmax(420px, 1.35fr) minmax(310px, 1fr); border: 1px solid var(--line); background: white; }
+.data-lab { max-width: 1560px; padding-left: clamp(18px,2.8vw,42px); padding-right: clamp(18px,2.8vw,42px); }
+.stage-line { margin-bottom: 20px; display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid #9ba39d; border-bottom: 1px solid var(--line); }
+.stage-line div { min-height: 54px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; color: #949b96; }
+.stage-line span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #bec5bf; border-radius: 50%; font: 9px/1 var(--mono); }
+.stage-line small { font-size: 10px; white-space: nowrap; }
+.stage-line .active, .stage-line .done { color: var(--green-dark); }
+.stage-line .active span, .stage-line .done span { color: white; border-color: var(--green); background: var(--green); }
+.error-banner { margin-bottom: 16px; padding: 12px 14px; display: flex; gap: 12px; border-left: 3px solid var(--rust); color: #7f3828; background: #fbefeb; font-size: 11px; }
+.lab-grid { display: grid; grid-template-columns: minmax(235px,.72fr) minmax(410px,1.25fr) minmax(330px,1fr); border: 1px solid #bec5bf; background: var(--surface); }
.question-column, .trace-column, .data-column { min-width: 0; }
-.question-column { padding: 22px; background: #f6f7f9; border-right: 1px solid var(--line); }
-.column-title { min-height: 26px; color: #70798b; font: 500 8px/1 var(--mono); letter-spacing: .08em; }
-.column-title small { color: #8a93a3; font: 400 8px/1 var(--mono); letter-spacing: 0; }
-.column-title button { height: 25px; margin-left: 6px; padding: 0 8px; border: 1px solid #cdd2da; color: #4c5668; background: white; font-size: 8px; }
-.question-column > label { display: block; margin: 19px 0 8px; color: var(--ink); font-size: 11px; font-weight: 600; }
-#question { width: 100%; min-height: 138px; padding: 12px; resize: vertical; border: 1px solid #cfd4dc; border-radius: 0; outline: 0; color: var(--ink); background: white; font-size: 11px; line-height: 1.75; }
-#question:focus, input:focus, select:focus, .sql-panel textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #dfe9ff; outline: 0; }
-.question-list { margin-top: 15px; display: grid; }
-.question-list button { min-height: 62px; padding: 11px 4px; display: grid; grid-template-columns: 24px 1fr; gap: 6px; text-align: left; border: 0; border-top: 1px solid var(--line); color: #566074; background: transparent; font-size: 10px; line-height: 1.55; }
-.question-list button:hover { color: var(--blue); }
-.question-list span { color: #98a0ae; font: 400 8px/1.5 var(--mono); }
-.run-button { width: 100%; min-height: 42px; margin-top: 17px; border: 0; color: white; background: var(--blue); font-size: 11px; font-weight: 600; }
-.run-button:hover:not(:disabled) { background: var(--blue-dark); }
-.model-settings { margin: 19px -22px -22px; padding: 0 22px 22px; border-top: 1px solid var(--line); }
-.model-settings summary { margin: 0 -22px; padding: 17px 22px; display: flex; justify-content: space-between; list-style: none; color: #2d374a; cursor: pointer; font-size: 10px; font-weight: 600; }
+.question-column { padding: 18px; border-right: 1px solid var(--line); background: #fafbf9; }
+.column-title { min-height: 25px; display: flex; align-items: center; justify-content: space-between; color: #626a64; font: 8px/1 var(--mono); letter-spacing: .05em; }
+.column-title small { color: #8a918c; font: 8px/1 var(--mono); letter-spacing: 0; }
+.column-title button { height: 25px; margin-left: 6px; padding: 0 8px; border: 1px solid #c8cec9; border-radius: 2px; color: #4d554f; background: white; font-size: 8px; }
+.question-column > label { display: block; margin: 15px 0 7px; font-size: 11px; font-weight: 650; }
+#question { width: 100%; min-height: 126px; padding: 11px; resize: vertical; border: 1px solid #aeb7b0; border-radius: 2px; color: var(--ink); background: white; font-size: 11px; line-height: 1.65; }
+#question:focus, input:focus, select:focus, .sql-panel textarea:focus { border-color: var(--green); outline: 2px solid #dceae3; outline-offset: 0; }
+.question-list { margin-top: 12px; display: grid; }
+.question-list button { min-height: 58px; padding: 10px 3px; display: grid; grid-template-columns: 22px 1fr; gap: 5px; text-align: left; border: 0; border-top: 1px solid var(--line); color: #59615b; background: transparent; font-size: 10px; line-height: 1.5; }
+.question-list button:hover { color: var(--green-dark); background: var(--green-soft); }
+.question-list span { color: #939a95; font: 8px/1.5 var(--mono); }
+.run-button { width: 100%; min-height: 39px; margin-top: 14px; border: 0; border-radius: 3px; color: white; background: var(--green); font-size: 11px; font-weight: 650; }
+.run-button:hover:not(:disabled) { background: var(--green-dark); }
+.model-settings { margin: 16px -18px -18px; padding: 0 18px 18px; border-top: 1px solid var(--line); }
+.model-settings summary { margin: 0 -18px; padding: 15px 18px; display: flex; justify-content: space-between; list-style: none; color: #303632; cursor: pointer; font-size: 10px; font-weight: 650; }
.model-settings summary::-webkit-details-marker { display: none; }
-.model-settings summary span { color: #8a93a3; font-size: 8px; font-weight: 400; }
-.model-settings label { margin-top: 12px; display: grid; gap: 6px; color: #596275; font-size: 9px; }
+.model-settings summary span { color: #8a918c; font-size: 8px; font-weight: 400; }
+.model-settings label { margin-top: 11px; display: grid; gap: 5px; color: #59615b; font-size: 9px; }
.model-settings .check-row { display: flex; align-items: center; gap: 7px; }
-.model-settings input:not([type="checkbox"]), .model-settings select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #cfd4dc; border-radius: 0; color: var(--ink); background: white; font-size: 9px; }
-.model-settings input[type="checkbox"] { accent-color: var(--blue); }
-.model-settings > p { margin: 14px 0 0; padding: 10px; color: #735225; border-left: 2px solid #bf862f; background: #fff9ed; font-size: 8px; line-height: 1.7; }
+.model-settings input:not([type="checkbox"]), .model-settings select { width: 100%; height: 33px; padding: 0 8px; border: 1px solid #c3cac4; border-radius: 2px; color: var(--ink); background: white; font-size: 9px; }
+.model-settings input[type="checkbox"] { accent-color: var(--green); }
+.model-settings > p { margin: 12px 0 0; padding: 9px; color: #725c30; border-left: 2px solid #a47b2f; background: #fff9ed; font-size: 8px; line-height: 1.65; }
.trace-column { border-right: 1px solid var(--line); }
.trace-summary { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
-.trace-summary article { min-height: 94px; padding: 20px; }
+.trace-summary article { min-height: 86px; padding: 17px; }
.trace-summary article:first-child { border-right: 1px solid var(--line); }
-.trace-summary article > span { color: #7d8696; font: 500 8px/1 var(--mono); }
-.token-list { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 5px; }
-.token-list code { padding: 4px 6px; color: #244d9b; border: 1px solid #c6d4ee; background: #f5f8ff; font-size: 8px; }
-.token-list small { color: #9aa2af; font-size: 9px; }
-.plan-panel { min-height: 205px; padding: 20px; border-bottom: 1px solid var(--line); }
-.plan-panel h3 { margin: 17px 0 0; color: var(--ink); font-size: 14px; }
-.plan-panel > p { margin: 15px 0 0; color: #949ba8; font-size: 10px; }
-.plan-panel ol { margin: 16px 0 0; padding-left: 23px; color: #566074; font-size: 10px; line-height: 1.65; }
-.plan-panel li + li { margin-top: 6px; }
-.plan-panel li::marker { color: var(--blue); font-family: var(--mono); }
-.sql-panel { min-height: 365px; display: flex; flex-direction: column; }
-.sql-panel .column-title { padding: 14px 20px; border-bottom: 1px solid var(--line); }
-.sql-panel textarea { flex: 1; width: 100%; min-height: 265px; padding: 18px 20px; resize: vertical; border: 0; border-radius: 0; outline: 0; color: #183c75; background: #fafcff; font: 400 10px/1.7 var(--mono); }
-.safety-note { margin: 0; padding: 10px 20px; color: #497360; border-top: 1px solid #cfe2d9; background: #f3faf6; font-size: 8px; }
-.safety-note b { margin-right: 9px; color: #21714e; font-family: var(--mono); }
-.data-column { display: grid; grid-template-rows: minmax(390px, 1fr) minmax(300px, auto); }
-.data-column > section { min-height: 0; padding: 20px; }
+.trace-summary article > span { color: #6f7771; font: 8px/1 var(--mono); }
+.token-list { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 5px; }
+.token-list code { padding: 4px 6px; color: var(--green-dark); border: 1px solid #c5d8ce; border-radius: 2px; background: #f2f7f4; font-size: 8px; }
+.token-list small { color: #989f9a; font-size: 9px; }
+.plan-panel { min-height: 190px; padding: 17px; border-bottom: 1px solid var(--line); }
+.plan-panel h3 { margin: 14px 0 0; font-size: 14px; }
+.plan-panel > p { margin: 13px 0 0; color: #949b96; font-size: 10px; }
+.plan-panel ol { margin: 13px 0 0; padding-left: 21px; color: #505952; font-size: 10px; line-height: 1.65; }
+.plan-panel li + li { margin-top: 5px; }
+.plan-panel li::marker { color: var(--green); font-family: var(--mono); }
+.sql-panel { min-height: 340px; display: flex; flex-direction: column; }
+.sql-panel .column-title { padding: 12px 17px; border-bottom: 1px solid var(--line); }
+.sql-panel textarea { flex: 1; width: 100%; min-height: 250px; padding: 16px 17px; resize: vertical; border: 0; border-radius: 0; color: #224c3d; background: #fbfcfb; font: 10px/1.7 var(--mono); }
+.safety-note { margin: 0; padding: 9px 17px; color: #3f6c58; border-top: 1px solid #cfe0d7; background: #f2f8f5; font-size: 8px; }
+.safety-note b { margin-right: 8px; color: var(--green-dark); font-family: var(--mono); }
+.data-column { display: grid; grid-template-rows: minmax(365px,1fr) minmax(285px,auto); }
+.data-column > section { min-height: 0; padding: 17px; }
.data-column > section:first-child { border-bottom: 1px solid var(--line); }
-.schema-list { max-height: 410px; margin-top: 12px; overflow: auto; }
+.schema-list { max-height: 385px; margin-top: 10px; overflow: auto; }
.schema-table { border-top: 1px solid var(--line); }
-.schema-table summary { min-height: 36px; display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
+.schema-table summary { min-height: 34px; display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.schema-table summary::-webkit-details-marker { display: none; }
-.schema-table summary code { color: #3a4659; font-size: 9px; font-weight: 500; }
-.schema-table.selected summary code { color: var(--blue); }
-.schema-table summary small { color: #9199a7; font-size: 8px; }
-.schema-table > div { padding: 5px 0 10px 10px; border-left: 1px solid #b9caed; }
-.schema-table p { margin: 0; padding: 4px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px; }
-.schema-table p code { color: #475266; font-size: 8px; }
-.schema-table p > span { color: #9aa2af; font: 400 7px/1.4 var(--mono); }
-.schema-table p small { grid-column: 1 / -1; color: #8d95a3; font-size: 7px; }
-.relations { padding-top: 10px; border-top: 1px solid var(--line); }
-.relations summary { color: #596376; cursor: pointer; font-size: 8px; }
-.relations > code { display: block; margin-top: 7px; color: #758095; font-size: 7px; }
-.table-wrap { max-width: 100%; margin-top: 13px; overflow: auto; border: 1px solid var(--line); }
+.schema-table summary code { color: #39413b; font-size: 9px; font-weight: 600; }
+.schema-table.selected summary code { color: var(--green); }
+.schema-table summary small { color: #919893; font-size: 8px; }
+.schema-table > div { padding: 4px 0 9px 9px; border-left: 1px solid #bdd2c7; }
+.schema-table p { margin: 0; padding: 4px 0; display: grid; grid-template-columns: 1fr auto; gap: 5px; }
+.schema-table p code { color: #475049; font-size: 8px; }
+.schema-table p > span { color: #969d98; font: 7px/1.4 var(--mono); }
+.schema-table p small { grid-column: 1 / -1; color: #8d948f; font-size: 7px; }
+.relations { padding-top: 9px; border-top: 1px solid var(--line); }
+.relations summary { color: #59615b; cursor: pointer; font-size: 8px; }
+.relations > code { display: block; margin-top: 6px; color: #758079; font-size: 7px; }
+.table-wrap { max-width: 100%; margin-top: 11px; overflow: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 8px; }
-th, td { padding: 8px 7px; border-right: 1px solid #e8eaf0; border-bottom: 1px solid #e8eaf0; text-align: left; }
-th { color: #526075; background: #f5f6f8; font-weight: 600; }
+th, td { padding: 7px 6px; border-right: 1px solid #e7eae7; border-bottom: 1px solid #e7eae7; text-align: left; }
+th { color: #526057; background: #f2f4f1; font-weight: 650; }
td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
-td.negative { color: #a43d28; text-align: right; background: #fff6f3; font-variant-numeric: tabular-nums; }
-.empty-state { min-height: 110px; margin-top: 13px; display: grid; place-items: center; padding: 15px; color: #969eab; border: 1px dashed #cbd0d8; text-align: center; font-size: 9px; }
-.explanation { margin-top: 13px; padding: 13px; border-left: 2px solid var(--blue); background: #f4f7fd; }
-.explanation span { color: var(--blue); font: 500 8px/1 var(--mono); }
-.explanation p { margin: 7px 0 0; color: #4f5b70; font-size: 9px; line-height: 1.7; }
-.agent-rationale { margin-top: 24px; display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
-.agent-rationale > * { min-height: 72px; padding: 15px; display: grid; align-content: center; border-right: 1px solid var(--line); font-size: 9px; line-height: 1.5; }
+td.negative { color: var(--rust); text-align: right; background: #fff5f1; font-variant-numeric: tabular-nums; }
+.empty-state { min-height: 105px; margin-top: 11px; display: grid; place-items: center; padding: 14px; color: #939b95; border: 1px dashed #c4cbc5; text-align: center; font-size: 9px; }
+.explanation { margin-top: 11px; padding: 12px; border-left: 3px solid var(--green); background: #f0f6f3; }
+.explanation span { color: var(--green); font: 8px/1 var(--mono); }
+.explanation p { margin: 7px 0 0; color: #46524b; font-size: 9px; line-height: 1.7; }
+.agent-rationale { margin-top: 18px; display: grid; grid-template-columns: 1.1fr repeat(4,1fr); border-top: 1px solid #7b837d; border-bottom: 1px solid var(--line); background: var(--surface); }
+.agent-rationale > * { min-height: 66px; padding: 13px; display: grid; align-content: center; border-right: 1px solid var(--line); font-size: 9px; line-height: 1.5; }
.agent-rationale > *:last-child { border-right: 0; }
-.agent-rationale strong { color: var(--ink); font-size: 11px; }
-.agent-rationale span { color: #626d80; }
+.agent-rationale strong { font-size: 11px; }
+.agent-rationale span { color: #5e675f; }
-.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
-.security-grid article { min-height: 225px; padding: 27px 24px; border-right: 1px solid var(--line); }
+.security-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #7b837d; border-bottom: 1px solid var(--line); background: var(--surface); }
+.security-grid article { min-height: 190px; padding: 23px 21px; border-right: 1px solid var(--line); }
.security-grid article:last-child { border-right: 0; }
-.blocked-example { min-height: 64px; margin-top: 28px; padding: 0 20px; display: grid; grid-template-columns: 1fr auto auto; gap: 22px; align-items: center; color: #6f7888; border: 1px solid #e1c6bf; background: #fff8f6; font-size: 9px; }
-.blocked-example code { color: #8f3c2c; font-size: 10px; }
-.blocked-example strong { padding: 5px 7px; color: #a53e2a; border: 1px solid #d99a8d; font: 500 8px/1 var(--mono); }
-
-.deploy-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 70px; align-items: center; }
-.deploy-layout ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
-.deploy-layout li { min-height: 92px; padding: 18px 0; display: grid; grid-template-columns: 48px 1fr; gap: 15px; border-bottom: 1px solid var(--line); }
-.deploy-layout li > span { color: var(--blue); font: 500 9px/1.5 var(--mono); }
-.deploy-layout strong { color: var(--ink); font-size: 13px; }
-.deploy-layout p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
-.deploy-layout pre { margin: 0; padding: 32px; overflow: auto; color: #dce6fb; background: #111c31; font-size: 11px; line-height: 2; }
-.document-link { margin-top: 34px; min-height: 54px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); border: 1px solid var(--line); text-decoration: none; font-size: 11px; }
-.document-link:hover { color: var(--blue); border-color: #9fb7e9; }
-
-.resume { min-height: 720px; background: #f7f8fa; }
-.resume-grid { display: grid; grid-template-columns: .85fr 1.15fr; border-top: 1px solid var(--ink); }
-.resume-grid > div { padding: 35px 50px 35px 0; border-right: 1px solid var(--line); }
-.resume-grid h3 { margin: 24px 0 0; color: var(--ink); font-size: 29px; line-height: 1.35; letter-spacing: -.035em; }
-.resume-grid > div p { max-width: 320px; margin: 22px 0 0; color: var(--muted); font: 400 9px/1.8 var(--mono); }
-.resume-grid ul { margin: 0; padding: 14px 0 14px 46px; list-style: none; }
-.resume-grid li { min-height: 78px; padding: 17px 0 17px 30px; position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); color: #4f5a6d; font-size: 11px; line-height: 1.75; }
-.resume-grid li:last-child { border-bottom: 0; }
-.resume-grid li::before { content: "—"; position: absolute; left: 0; color: var(--blue); }
-.resume-footer { min-height: 62px; padding: 0 18px; display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center; border: 1px solid var(--line); background: white; }
-.resume-footer span { color: #858e9e; font-size: 9px; }
-.resume-footer strong { color: #4b5669; font-size: 10px; }
-.resume-footer a { color: var(--blue); font-size: 10px; }
-footer { padding: 24px clamp(32px, 5vw, 84px); color: #818a99; background: #101a2d; font-size: 9px; text-align: right; }
+.blocked-example { min-height: 58px; margin-top: 18px; padding: 0 18px; display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; color: #6d756f; border-left: 3px solid var(--rust); background: #fbefeb; font-size: 10px; }
+.blocked-example code { color: #813d2e; font-size: 10px; }
+.blocked-example strong { padding: 5px 8px; color: white; border-radius: 2px; background: var(--rust); font: 600 8px/1 var(--mono); }
+.deploy-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: stretch; }
+.deploy-layout ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid #7b837d; }
+.deploy-layout li { min-height: 86px; padding: 16px 0; display: grid; grid-template-columns: 44px 1fr; gap: 12px; border-bottom: 1px solid var(--line); }
+.deploy-layout li > span { color: var(--green); font: 9px/1.5 var(--mono); }
+.deploy-layout strong { font-size: 13px; }
+.deploy-layout p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
+.deploy-layout pre { margin: 0; padding: 28px; overflow: auto; color: #dce9e2; border-radius: 3px; background: #17201b; font-size: 11px; line-height: 2; }
+.document-link { margin-top: 28px; min-height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: var(--green-dark); border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-size: 11px; }
+.document-link:hover { border-color: #8fb5a2; }
+footer { max-width: 1320px; margin: 0 auto; padding: 24px clamp(28px,4vw,64px); color: #7d857f; font-size: 9px; text-align: right; }
@media (max-width: 1180px) {
- .overview-grid { grid-template-columns: 1fr; gap: 50px; }
- .overview h1 { font-size: clamp(58px, 8.4vw, 92px); }
- .system-index { display: grid; grid-template-columns: repeat(3, 1fr); }
- .system-index article { grid-template-columns: 34px 1fr; padding-right: 18px; border-right: 1px solid var(--line); }
- .lab-grid { grid-template-columns: 270px 1fr; }
- .data-column { grid-column: 1 / -1; grid-template-columns: .9fr 1.1fr; grid-template-rows: 430px; border-top: 1px solid var(--line); }
+ .overview-trace { grid-template-columns: repeat(3,1fr); gap: 0; }
+ .overview-trace b { display: none; }
+ .overview-trace span { min-height: 56px; }
+ .lab-grid { grid-template-columns: 260px 1fr; }
+ .data-column { grid-column: 1 / -1; grid-template-columns: .9fr 1.1fr; grid-template-rows: 405px; border-top: 1px solid var(--line); }
.data-column > section:first-child { border-right: 1px solid var(--line); border-bottom: 0; }
.security-grid { grid-template-columns: 1fr 1fr; }
.security-grid article:nth-child(2) { border-right: 0; }
.security-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
-
@media (max-width: 820px) {
- .sidebar { inset: 0 0 auto 0; width: auto; height: 64px; padding: 0 16px; flex-direction: row; align-items: center; border-bottom: 1px solid #2d394f; }
- .brand-mark { width: 34px; height: 34px; }
- .brand small, .sidebar-meta { display: none; }
- .sidebar nav { flex: 1; margin: 0 0 0 28px; display: flex; overflow-x: auto; }
- .sidebar nav a { min-width: max-content; min-height: 64px; padding: 0 12px; border-left: 0; border-bottom: 2px solid transparent; gap: 7px; font-size: 10px; }
- .sidebar nav a.active { border-left-color: transparent; border-bottom-color: #4b82ff; }
- main { margin: 64px 0 0; }
- .page-section { min-height: 0; padding: 58px 24px; scroll-margin-top: 64px; }
- .overview { min-height: calc(100vh - 64px); padding-top: 28px; }
- .overview-grid { padding: 50px 0; }
- .system-index { display: block; }
- .system-index article { border-right: 0; }
- .architecture-flow { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
+ .sidebar { inset: 0 0 auto 0; width: auto; height: 62px; padding: 0 15px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
+ .brand { padding: 0; } .brand-mark { width: 25px; height: 25px; } .brand strong { font-size: 16px; }
+ .sidebar nav { margin: 0 0 0 auto; display: flex; overflow-x: auto; }
+ .sidebar nav a { min-height: 62px; padding: 0 12px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; font-size: 11px; }
+ .sidebar nav a.active { border-bottom-color: var(--green); }
+ .sidebar-meta { display: none; }
+ main { margin-left: 0; padding-top: 62px; }
+ .page-section { min-height: 0; padding: 52px 22px; scroll-margin-top: 62px; }
+ .overview { min-height: calc(100vh - 62px); }
+ .overview-trace { grid-template-columns: 1fr 1fr; }
+ .boundary-table { width: 100%; overflow: hidden; }
+ .boundary-table > div { grid-template-columns: 92px 1fr 1fr; }
+ .boundary-table > div > * { padding: 12px 10px; font-size: 10px; }
+ .evidence-strip { grid-template-columns: 1fr 1fr; }
+ .evidence-strip span:nth-child(2) { border-right: 0; }
+ .evidence-strip span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
+ .architecture-flow { grid-template-columns: 1fr; gap: 8px; }
.architecture-flow > b { display: none; }
- .architecture-details { grid-template-columns: 1fr; }
- .architecture-details article, .architecture-details article + article { min-height: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
- .route-board { grid-template-columns: 1fr; }
- .route-input { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }
- .stage-line { overflow-x: auto; grid-template-columns: repeat(6, 125px); }
- .lab-grid { display: block; }
+ .architecture-details, .route-board, .deploy-layout { grid-template-columns: 1fr; }
+ .architecture-details article, .architecture-details article + article { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
+ .scenario-tabs { overflow-x: auto; }
+ .scenario-tabs button { flex: 0 0 auto; padding: 0 16px; }
+ .route-input { min-height: 270px; border-right: 0; border-bottom: 1px solid var(--line); }
+ .lab-grid { grid-template-columns: 1fr; }
.question-column, .trace-column { border-right: 0; border-bottom: 1px solid var(--line); }
- .data-column { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 430px; }
+ .data-column { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto; border-top: 0; }
+ .data-column > section:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
+ .schema-list { max-height: 350px; }
.agent-rationale { grid-template-columns: 1fr 1fr; }
.agent-rationale > * { border-bottom: 1px solid var(--line); }
- .deploy-layout { grid-template-columns: 1fr; gap: 35px; }
- .resume-grid { grid-template-columns: 1fr; }
- .resume-grid > div { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
- .resume-grid ul { padding-left: 0; }
-}
-
-@media (max-width: 560px) {
- .sidebar .brand > span:last-child { display: none; }
- .sidebar nav { margin-left: 12px; }
- .sidebar nav a { padding: 0 10px; font-size: 0; }
- .sidebar nav a span { font-size: 9px; }
- .overview h1 { font-size: 48px; }
- .overview-grid > div:first-child > p { font-size: 13px; }
- .principle-strip { grid-template-columns: 1fr 1fr; }
- .principle-strip span { min-height: 48px; border-bottom: 1px solid var(--line); }
- .section-heading { grid-template-columns: 30px 1fr; gap: 9px; }
- .section-heading h2 { font-size: 29px; }
- .architecture-flow { grid-template-columns: 1fr; }
- .architecture-flow article { min-height: 125px; }
- .scenario-tabs { grid-template-columns: 1fr 1fr; }
- .scenario-tabs button:nth-child(2) { border-right: 0; }
- .scenario-tabs button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
- .route-input { padding: 25px; }
- .route-input blockquote { font-size: 20px; }
- .trace-summary, .data-column, .security-grid { display: block; }
- .trace-summary article:first-child, .data-column > section:first-child, .security-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
- .data-column > section { min-height: 420px; }
- .agent-rationale { display: block; }
- .agent-rationale > * { min-height: 58px; border-right: 0; }
- .blocked-example { padding: 14px; grid-template-columns: 1fr auto; }
+ .agent-rationale strong { grid-column: 1 / -1; }
+ .blocked-example { grid-template-columns: 1fr auto; padding: 13px; }
.blocked-example span { grid-column: 1 / -1; }
- .resume-footer { padding: 15px; grid-template-columns: 1fr; gap: 6px; }
- footer { text-align: left; }
+ footer { padding: 20px 22px; text-align: left; }
}
-
-@media (prefers-reduced-motion: reduce) {
- html { scroll-behavior: auto; }
- *, *::before, *::after { transition: none !important; }
+@media (max-width: 560px) {
+ .sidebar nav a { padding: 0 10px; }
+ .sidebar nav a:nth-child(2), .sidebar nav a:nth-child(3), .sidebar nav a:nth-child(6) { display: none; }
+ .overview-intro { padding-bottom: 30px; }
+ .overview h1 { font-size: 43px; }
+ .overview-intro > p { font-size: 17px; }
+ .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
+ .overview-trace { grid-template-columns: 1fr; }
+ .evidence-strip, .architecture-details, .security-grid, .agent-rationale { grid-template-columns: 1fr; }
+ .evidence-strip span, .security-grid article, .agent-rationale > * { border-right: 0; border-bottom: 1px solid var(--line); }
+ .stage-line { grid-template-columns: repeat(3,1fr); }
+ .stage-line small { font-size: 9px; }
+ .trace-summary { grid-template-columns: 1fr; }
+ .trace-summary article:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
+ .deploy-layout { gap: 28px; }
+ .deploy-layout pre { padding: 20px; font-size: 9px; }
}
+@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }