:root { --bg:#f3f1eb; --surface:#fffefa; --surface-soft:#ebe9e2; --ink:#182238; --muted:#687185; --line:#d7d9de; --accent:#2857d8; --accent-2:#d54444; --accent-soft:rgba(40,87,216,.11); --dark:#14203a; --display: Georgia, "Times New Roman", "Songti SC", serif; }
.brand, .nav-links, .button, .proof-item, .card-kicker, .workflow-step, footer { font-family: var(--body); }
.hero h1 { font-weight: 540; letter-spacing: -.065em; }
.doc-window { box-shadow: 0 28px 85px rgba(23,36,70,.2); transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.doc-toolbar { display:flex; min-height:44px; padding:0 16px; border-bottom:1px solid var(--line); background:#f7f8fb; align-items:center; gap:16px; color:#4f586d; font:11px/1 var(--body); }
.doc-toolbar span { width:1px; height:19px; background:var(--line); }
.doc-toolbar small { margin-left:auto; color:var(--accent); }
.doc-toolbar button { padding:6px 11px; border:0; border-radius:5px; background:var(--accent); color:white; font-size:9px; }
.document-space { position:relative; min-height:510px; padding:28px 122px 34px 34px; background:#e6e8ed; }
.paper { min-height:448px; padding:48px 46px; background:white; box-shadow:0 5px 22px #2432501a; color:#222b3e; }
.paper-label { color:#8b92a0; font:7px/1 var(--mono); letter-spacing:.15em; }
.paper h2 { max-width:380px; margin:22px 0; font:500 28px/1.15 var(--display); letter-spacing:-.035em; }
.paper h3 { margin-top:25px; font:600 14px/1.2 var(--display); }
.paper p, .paper li { font-size:10px; line-height:1.75; }
.paper del { color:#c64a4a; text-decoration-thickness:2px; }
.paper ins { background:#dfe8ff; color:#214da8; text-decoration:none; }
.comment-balloon { position:absolute; top:118px; right:18px; width:150px; padding:13px; border:1px solid #bfc9e0; border-left:3px solid var(--accent); border-radius:5px; background:#fff; box-shadow:0 12px 26px #28395a1f; }
.comment-balloon small, .agent-card small { color:var(--accent); font:7px/1 var(--mono); }
.comment-balloon p { margin:8px 0; font-size:9px; line-height:1.45; }
.comment-balloon button { padding:0; border:0; background:transparent; color:var(--accent); font-size:8px; font-weight:700; }
.agent-card { position:absolute; right:19px; bottom:35px; display:flex; width:170px; padding:14px; border-radius:7px; background:#172342; color:white; box-shadow:0 15px 32px #17234244; flex-direction:column; gap:7px; }
.agent-card b { font-size:11px; }.agent-card span { color:#aab6d3; font-size:8px; }
.context-visual { padding:17px; background:#182238; color:white; }.context-visual span { color:#8997b8; font:8px/1 var(--mono); }.context-visual p { margin:13px 0; padding:10px; border-left:2px solid #5f83ef; background:#ffffff0d; font:12px/1.5 var(--display); }.context-visual b { color:#9eb6ff; font:8px/1 var(--mono); }
.modes-visual { display:flex; padding:19px; align-items:center; justify-content:center; gap:7px; }.modes-visual span { padding:8px 10px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font:8px/1 var(--mono); }.modes-visual .active { border-color:var(--accent); background:#e4ebff; color:var(--accent); }
.review-visual { display:flex; padding:18px; align-items:center; gap:8px; }.review-visual i { display:grid; width:30px; height:30px; border-radius:50%; background:#e4ebff; color:var(--accent); place-items:center; }.review-visual span { margin-right:auto; font-size:10px; }.review-visual b { padding:6px; border:1px solid var(--line); border-radius:4px; font:7px/1 var(--mono); }
.version-visual { display:flex; padding:18px; align-items:center; gap:8px; }.version-visual span { padding:9px 12px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font:8px/1 var(--mono); }.version-visual .current { border-color:#9eb4ea; background:#e4ebff; color:var(--accent); }
@media(max-width:620px){.document-space{padding:18px 55px 24px 18px}.paper{padding:32px 24px}.comment-balloon{right:8px;width:110px}.agent-card{right:8px;width:130px}.paper h2{font-size:22px}}