From 831b3aeb6dc10088fde27c5888a59194e7eb821b Mon Sep 17 00:00:00 2001 From: ShenHongxuan <3012693863@qq.com> Date: Sun, 16 Aug 2026 20:20:02 +0800 Subject: [PATCH] Refine project showcase design --- README.md | 6 +- demo-site/src/App.jsx | 48 ++-- demo-site/src/styles.css | 477 ++++++++++++++++++--------------------- 3 files changed, 244 insertions(+), 287 deletions(-) diff --git a/README.md b/README.md index 8ae30f4..0d4a07a 100644 --- a/README.md +++ b/README.md @@ -218,12 +218,12 @@ InsightFlow/ └── .env.example # 无密钥配置模板 ``` -## 面试演示建议 +## 项目验证路径 -1. 用 2 分钟解释 MindAgent / DataAgent 的职责边界; +1. 查看 MindAgent / DataAgent 的职责边界; 2. 在在线站点运行“盈利下降”或“存款未消费”场景,逐步查看关键词、Schema、计划、SQL、结果和解释; 3. 把 SQL 改成 `DELETE`,证明执行前会被拒绝; 4. 展示 DataAgent 的 `verified` 与 `audit` 返回; -5. 最后说明 Compose 的网络隔离、双密钥和冒烟测试。 +5. 检查 Compose 的网络隔离、双密钥和冒烟测试。 详细契约与关键取舍见[架构设计](docs/architecture.md)。 diff --git a/demo-site/src/App.jsx b/demo-site/src/App.jsx index ba53f92..48033c8 100644 --- a/demo-site/src/App.jsx +++ b/demo-site/src/App.jsx @@ -21,13 +21,12 @@ import { const REPOSITORY = "https://github.com/hachiwar/InsightFlow"; const STAGES = ["关键词识别", "Schema 召回", "查询规划", "SQL 生成", "只读执行", "结果解释"]; const NAV_ITEMS = [ - ["overview", "项目总览", "01"], - ["architecture", "系统架构", "02"], - ["orchestration", "Agent 编排", "03"], - ["data-lab", "数据链路", "04"], - ["security", "安全治理", "05"], - ["deployment", "部署运行", "06"], - ["resume", "简历要点", "07"], + ["overview", "总览"], + ["architecture", "系统架构"], + ["orchestration", "Agent 编排"], + ["data-lab", "数据实验室"], + ["security", "安全治理"], + ["deployment", "部署运行"], ]; const ROUTE_SCENARIOS = [ { id: "general", label: "知识问答", question: "公司的退款政策和到账时间是什么?", intent: "GENERAL", target: "GeneralAgent", steps: ["读取会话记忆", "改写问题并检索知识库", "生成有依据的回答", "校验回答并写回记忆"] }, @@ -38,31 +37,30 @@ const ROUTE_SCENARIOS = [ const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration)); let didAutoRun = false; -function SectionHeading({ index, title, description }) { - return
{index}

{title}

{description ?

{description}

: null}
; +function SectionHeading({ title, description }) { + return

{title}

{description ?

{description}

: null}
; } function Sidebar({ activeSection }) { return ; } function Overview() { return
-
Enterprise Agent System2026
-

企业知识与
数据问答 Agent

InsightFlow 将对话编排与数据推理连接为一条可运行链路:MindAgent 理解上下文并选择专业 Agent,DataAgent 将业务问题转换为经过治理、执行和校验的 SQL。

在线体验查看源码 ↗
-
01
MindAgent

会话记忆、企业知识 RAG、意图识别与 Agent 编排。

02
DataAgent

Schema 检索、查询规划、SQL 生成、治理执行与结果解释。

03
Runtime

Caddy、Redis、Docker Compose、健康检查与冒烟测试。

-
-
一个业务入口两类推理职责全链路可追踪数据库只读边界
+

InsightFlow

让企业知识问答与数据分析共用一个可信的 Agent 入口。

进入数据实验室查看 GitHub ↗
+
用户问题→MindAgent→意图路由→DataAgent→SQL 治理→结果解释
+
项目边界与职责MindAgent · 对话编排DataAgent · 数据查询
核心职责

对话理解、上下文管理、知识检索、意图识别与路由。

Schema 召回、查询规划、SQL 生成、治理执行与解释。

输入

自然语言问题、历史对话、系统指令与工具状态。

结构化意图、业务约束、用户权限与数据库元数据。

输出

统一、可追踪的 Agent 响应与后续动作。

受治理的 SQL、结果集、校验状态与问题导向解释。

不负责

直接访问业务数据库或绕过数据安全策略。

维护会话记忆或编排跨领域 Agent。

+
浏览器内 SQLite真实执行样例查询只读 SQL执行前策略校验问题导向解释对照问题与结果Docker Compose完整服务运行
; } function Architecture() { return
- +
ENTRY用户 / 业务系统

POST /chat

GATEWAYCaddy

HTTPS · API Key

ORCHESTRATORMindAgent

Memory · RAG · Router

DATA TOOLDataAgent

Text2SQL · Audit

对话上下文

工作记忆 + 情节记忆

Redis 保存近期消息与 TTL,历史摘要按当前问题检索;回答完成后更新会话与用户画像。

知识检索

改写 + 并行召回 + Rerank

查询改写后并行调用知识工具,通过缓存、超时和熔断控制外部依赖。

结构化数据

SchemaGraph + CoT 规划

从字段级元数据构建局部 Schema,生成数据库、输入、输出与依赖明确的查询步骤。

; @@ -72,7 +70,7 @@ function Orchestration() { const [scenarioId, setScenarioId] = useState("data"); const scenario = ROUTE_SCENARIOS.find((item) => item.id === scenarioId); return
- +
{ROUTE_SCENARIOS.map((item) => )}
INPUT / POST /chat
{scenario.question}
意图
{scenario.intent}
目标
{scenario.target}
    {scenario.steps.map((step, index) =>
  1. {String(index + 1).padStart(2, "0")}

    {step}

  2. )}
; @@ -172,7 +170,7 @@ function DataLab() { } return
- +
{STAGES.map((stage, index) => { const number = index + 1; const state = number < activeStage ? "done" : number === activeStage ? "active" : ""; return
{number < activeStage ? "✓" : number}{stage}
; })}
{error ?
本次分析未完成{error}
: null}
@@ -187,20 +185,16 @@ function DataLab() { } function Security() { - return
01 / INPUT

入口与密钥隔离

公开 API 与内部服务使用不同密钥;模型 Key 只存于当前浏览器内存,不写入仓库和样例数据库。

02 / POLICY

SQL 只读策略

仅接受单条 SELECT / WITH,拦截写入、DDL、管理指令、危险函数和未授权数据表。

03 / DATABASE

数据库双重限制

SQLite 使用只读连接与 query_only,设置执行超时、最大返回行数和表白名单。

04 / EVIDENCE

校验与审计

核对执行状态、行列一致性与数值有效性,记录 SQL 指纹、耗时、策略结果和错误信息。

DELETE FROM account_balance WHERE user_id = ?;BLOCKED在数据库执行前被 SQL 治理层拒绝
; + return
输入边界

解析与单语句

拒绝多语句拼接、注释注入与不完整语法,模型输出必须先经过解析。

执行策略

只读白名单

仅接受单条 SELECT / WITH,拦截 INSERT、UPDATE、DELETE、DDL 与管理指令。

数据边界

表与函数边界

仅允许当前 Schema 中的授权对象,并拒绝文件、扩展和高风险函数。

证据留存

结果与审计

核对行列与数值一致性,记录 SQL 指纹、耗时、策略结果和错误信息。

DROP TABLE accounts;已拒绝在数据库执行前被 SQL 治理层拦截
; } function Deployment() { - return
  1. 01
    准备配置

    复制 .env.example,设置域名、入口密钥、内部密钥与模型配置。

  2. 02
    启动服务

    Compose 构建 MindAgent、DataAgent、Redis 与 Caddy,内部服务不直接暴露端口。

  3. 03
    验证链路

    检查健康状态,再用带鉴权的 /chat 请求验证 MindAgent → DataAgent 调用。

{`cp .env.example .env
+  return 
  1. 01
    准备配置

    复制 .env.example,设置域名、入口密钥、内部密钥与模型配置。

  2. 02
    启动服务

    Compose 构建 MindAgent、DataAgent、Redis 与 Caddy,内部服务不直接暴露端口。

  3. 03
    验证链路

    检查健康状态,再用带鉴权的 /chat 请求验证 MindAgent → DataAgent 调用。

{`cp .env.example .env
 docker compose up -d --build
 docker compose ps
 ./deploy/smoke-test.sh`}
阅读国内服务器上线指南 ↗
; } -function Resume() { - return
PROJECT SUMMARY

InsightFlow
企业知识与数据问答 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
跳到主要内容
InsightFlow · 公开样例数据仅用于工程演示,不连接真实企业或银行数据库。
; + 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; } }