:root { --paper:#f7f4ec; --surface:#fffdf8; --ink:#17201d; --muted:#68716d; --line:#dcd8ce; --accent:#176c5d; --soft:#e6f0ea; --sidebar:290px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.72 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--accent); }
.reading-progress { position:fixed; inset:0 auto auto 0; z-index:100; width:0; height:3px; background:var(--accent); }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:20; width:var(--sidebar); overflow:auto; padding:28px 22px; border-right:1px solid var(--line); background:rgba(247,244,236,.97); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:11px; margin-bottom:28px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:750; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:white; background:var(--ink); font:12px Georgia,serif; }
.search-wrap { position:relative; margin-bottom:22px; }
.search-wrap input { width:100%; padding:11px 12px 11px 34px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--surface); font:12px inherit; outline:none; }
.search-wrap::before { content:"⌕"; position:absolute; left:12px; top:7px; color:var(--muted); font-size:18px; }
.search-results { display:none; position:absolute; left:0; right:0; top:45px; z-index:30; max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 15px 35px rgba(23,32,29,.12); }
.search-results.open { display:block; }
.search-results a { display:block; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:11px; }
.search-results a:hover { background:var(--soft); }
.nav-label { margin:22px 8px 8px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.chapter-nav { display:grid; gap:2px; }
.chapter-nav a { display:flex; gap:10px; padding:7px 9px; border-radius:6px; color:#505955; text-decoration:none; font-size:11px; line-height:1.35; }
.chapter-nav a::before { content:attr(data-number); min-width:20px; color:#969d99; font:10px ui-monospace,monospace; }
.chapter-nav a:hover,.chapter-nav a.active { color:var(--accent); background:var(--soft); }
.sidebar-footer { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.topbar { position:sticky; top:0; z-index:10; margin-left:var(--sidebar); height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 38px; border-bottom:1px solid var(--line); background:rgba(247,244,236,.9); backdrop-filter:blur(12px); }
.breadcrumb { color:var(--muted); font-size:11px; }
.breadcrumb strong { color:var(--ink); font-weight:600; }
.tools { display:flex; gap:7px; }
.tool-button,.mobile-menu { padding:7px 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--surface); font:11px inherit; cursor:pointer; }
.mobile-menu { display:none; }
.page { margin-left:var(--sidebar); }
.content { width:min(850px,calc(100% - 70px)); margin:0 auto; padding:90px 0 70px; }
.chapter-number { color:var(--accent); font:700 11px ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:780px; margin:20px 0 28px; font:400 clamp(48px,7vw,82px)/.98 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.lead { max-width:720px; margin:0 0 60px; color:#4e5854; font:23px/1.5 Georgia,serif; }
h2 { margin:70px 0 20px; font:400 34px/1.15 Georgia,serif; letter-spacing:-.025em; }
h3 { margin:35px 0 10px; font-size:19px; }
p { max-width:730px; }
.callout { margin:35px 0; padding:24px 26px; border-left:3px solid var(--accent); background:var(--soft); }
.callout p { margin:0; }
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:30px 0; }
.card-grid.three { grid-template-columns:repeat(3,1fr); }
.card { padding:24px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.card small { color:var(--accent); font:700 10px ui-monospace,monospace; text-transform:uppercase; }
.card h3 { margin:34px 0 10px; }
.card p { margin:0; color:var(--muted); font-size:14px; }
.status { display:inline-block; padding:5px 8px; border-radius:20px; color:var(--accent); background:var(--soft); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.status.development { color:#7b5817; background:#f4ead0; }
.status.vision { color:#694b83; background:#eee3f5; }
.architecture { max-width:680px; margin:45px auto; }
.node { padding:17px; border:1px solid var(--line); border-radius:8px; text-align:center; background:var(--surface); font-size:14px; }
.node.primary { color:white; background:var(--accent); border-color:var(--accent); }
.connector { width:1px; height:34px; margin:auto; background:var(--accent); }
.agent-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.agent-row .node { padding:14px 5px; font-size:11px; }
.flow { display:flex; gap:8px; align-items:center; margin:40px 0; overflow:auto; }
.flow span { min-width:max-content; padding:13px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:12px; }
.flow i { color:var(--accent); font-style:normal; }
.graph { position:relative; min-height:340px; margin:35px 0; border:1px solid var(--line); border-radius:12px; background:radial-gradient(circle at center,var(--soft),var(--surface)); }
.graph-node { position:absolute; display:grid; place-items:center; width:105px; height:105px; padding:8px; border:1px solid var(--accent); border-radius:50%; text-align:center; background:var(--surface); font-size:11px; }
.graph-node.center { left:calc(50% - 55px); top:115px; color:white; background:var(--accent); }
.graph-node.n1 { left:8%; top:30px; }
.graph-node.n2 { right:8%; top:30px; }
.graph-node.n3 { left:13%; bottom:25px; }
.graph-node.n4 { right:13%; bottom:25px; }
.table { width:100%; border-collapse:collapse; margin:28px 0; }
.table th,.table td { padding:13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; }
.table th { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.chapter-pagination { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:90px; padding-top:30px; border-top:1px solid var(--line); }
.chapter-pagination a { padding:18px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--surface); text-decoration:none; font-size:12px; }
.chapter-pagination a:last-child { text-align:right; }
.chapter-pagination small { display:block; margin-bottom:5px; color:var(--muted); font-size:9px; text-transform:uppercase; }
.book-meta { display:flex; flex-wrap:wrap; gap:22px; margin:30px 0 55px; color:var(--muted); font:11px ui-monospace,monospace; }
.toc { columns:2; column-gap:40px; margin:35px 0; padding:0; list-style:none; }
.toc li { break-inside:avoid; border-bottom:1px solid var(--line); }
.toc a { display:flex; justify-content:space-between; padding:12px 0; color:var(--ink); text-decoration:none; font-size:13px; }
.toc span { color:var(--muted); }
.glossary dt { margin-top:25px; font-size:18px; font-weight:700; }
.glossary dd { margin:5px 0 0; padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--muted); }
@media(max-width:900px){ .sidebar{transform:translateX(-100%);transition:transform .25s}.sidebar.open{transform:none;box-shadow:15px 0 40px rgba(0,0,0,.15)}.topbar,.page{margin-left:0}.mobile-menu{display:block}.content{width:min(760px,calc(100% - 36px));padding-top:65px}.card-grid.three{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .topbar{padding:0 16px}.tool-button span{display:none}.card-grid,.card-grid.three{grid-template-columns:1fr}.agent-row{grid-template-columns:1fr 1fr}.toc{columns:1}.chapter-pagination{grid-template-columns:1fr}.chapter-pagination a:last-child{text-align:left}.graph-node{width:82px;height:82px;font-size:9px}.graph-node.center{left:calc(50% - 41px)} }
@media print { .sidebar,.topbar,.reading-progress,.chapter-pagination{display:none!important}.page{margin:0}.content{width:100%;padding:0}.card,.node,.graph{break-inside:avoid}body{background:white;color:black}a{color:black;text-decoration:none} }