@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@1,6..72,500&display=swap');
:root{--ink:#17211c;--muted:#657168;--paper:#f3f1e9;--card:#fffdf7;--line:#cfd4c9;--green:#155b42;--lime:#c9f05b;--orange:#e86f3d;--blue:#3975c6;--violet:#7856b8;--shadow:0 16px 45px rgba(34,45,38,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:Manrope,sans-serif}.masthead{height:72px;padding:0 max(24px,calc((100vw - 1360px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(243,241,233,.94);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.brand-block{display:flex;align-items:center;gap:12px}.brand-mark{width:38px;height:38px;background:var(--green);color:white;display:grid;place-items:center;border-radius:10px;font:500 13px DM Mono}.brand-block div{display:flex;flex-direction:column}.brand-block small{color:var(--muted);font:10px DM Mono;letter-spacing:.08em;margin-top:2px}.build-stamp{font:10px DM Mono;letter-spacing:.06em}.pulse{display:inline-block;width:7px;height:7px;background:#54ad53;border-radius:50%;margin-right:7px;box-shadow:0 0 0 5px rgba(84,173,83,.12)}main{max-width:1360px;margin:auto;padding:0 24px}.hero{min-height:430px;display:grid;grid-template-columns:1.4fr .8fr;gap:80px;align-items:center;border-bottom:1px solid var(--line);background-image:radial-gradient(#c7c9bf 1px,transparent 1px);background-size:18px 18px}.kicker,.section-title span,.lane-id{font:500 11px DM Mono;letter-spacing:.14em;color:var(--green)}h1{font-size:clamp(48px,6vw,86px);line-height:.94;letter-spacing:-.055em;margin:16px 0 24px;max-width:900px}h1 em{font-family:Newsreader,serif;font-weight:500;color:var(--green)}.lede{max-width:700px;color:var(--muted);font-size:17px;line-height:1.7}.hero-card{background:var(--ink);color:#fff;padding:32px;border-radius:4px 28px 4px 4px;box-shadow:var(--shadow);transform:rotate(1deg)}.hero-card span{font:10px DM Mono;color:var(--lime);text-transform:uppercase}.hero-card strong{display:block;font-size:20px;margin:22px 0;padding:18px 0;border-block:1px solid #435048}.hero-card p{font-size:13px;line-height:1.6;color:#bac4bc}.controls{display:flex;justify-content:space-between;align-items:center;gap:20px;position:sticky;top:72px;z-index:15;background:var(--paper);padding:18px 0;border-bottom:1px solid var(--line)}.tabs{display:flex;gap:8px}.tab,.tool{border:1px solid var(--line);background:transparent;padding:12px 18px;font:600 12px Manrope;color:var(--muted);cursor:pointer;border-radius:4px}.tab span{font:10px DM Mono;margin-right:8px}.tab.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 6px 20px rgba(21,91,66,.18)}.view-tools{display:flex;gap:6px}.tool{padding:9px 12px;font-size:10px}.tool.active{background:#e1e5db;color:var(--ink)}.legend-strip{display:flex;gap:22px;flex-wrap:wrap;padding:20px 0 36px;font:10px DM Mono;color:var(--muted)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.dot.local{background:var(--green)}.dot.firebase{background:var(--blue)}.dot.ai{background:var(--orange)}.dot.parallel{background:var(--violet)}.diamond{display:inline-block;width:8px;height:8px;background:var(--lime);transform:rotate(45deg);margin-right:8px}.fallback-line{display:inline-block;width:18px;border-top:2px dashed var(--orange);vertical-align:middle;margin-right:6px}.pipeline{animation:enter .35s ease}.pipeline-head{display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:40px;align-items:end;padding:34px 0}.pipeline-head h2,.section-title h2{font-size:38px;letter-spacing:-.04em;margin:6px 0}.pipeline-head>p{color:var(--muted);line-height:1.65}.example{padding:18px;border-left:3px solid var(--orange);background:#ebe9df;display:flex;flex-direction:column;gap:7px}.example small{font:9px DM Mono;color:var(--orange)}.example b{font-size:13px}.answer-callout{background:#fff4c9;border:1px solid #e8d37e;padding:24px;margin:8px 0 38px;display:grid;grid-template-columns:.8fr 1.7fr;gap:30px;align-items:center}.answer-callout p{margin:0;color:#665b39;line-height:1.6;font-size:13px}.flow{max-width:940px;margin:0 auto 90px;position:relative}.flow:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid #bdc5ba;z-index:-1}.node{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green);padding:24px 26px;box-shadow:var(--shadow);position:relative}.node.firebase{border-left-color:var(--blue)}.node.ai{border-left-color:var(--orange)}.node.parallel{border-left-color:var(--violet);width:80%;margin-left:auto;background:#faf7ff}.node header{display:flex;gap:18px;align-items:flex-start}.node header>span{font:500 13px DM Mono;background:#e5eadf;padding:9px;border-radius:3px}.node small{font:500 9px DM Mono;letter-spacing:.12em;color:var(--muted)}.node h3{font-size:20px;margin:4px 0 0;letter-spacing:-.025em}.node>p{font-size:13px;line-height:1.7;color:#536057}.node code,.schema-grid code,footer code{font:11px DM Mono;background:#eeece4;padding:2px 5px}dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}dl div{background:#f0eee6;padding:10px}dt{font:9px DM Mono;text-transform:uppercase;color:var(--muted)}dd{margin:4px 0 0;font-size:11px}.connector{height:46px;position:relative}.connector:after{content:"↓";position:absolute;left:calc(50% - 14px);bottom:7px;width:28px;height:28px;display:grid;place-items:center;background:var(--paper);color:var(--green);font:16px DM Mono}.connector.ai-path:after{color:var(--orange)}.branch-label{text-align:right;padding:11px 8px;color:var(--violet);font:9px DM Mono;text-transform:uppercase}.decision{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}.decision b{grid-column:1/-1;background:var(--lime);padding:10px 14px;font-size:11px}.decision span{background:#f4f2ea;padding:9px 14px;font:9px DM Mono}.calc{display:flex;justify-content:space-between;gap:20px;background:var(--ink);color:white;padding:16px;margin-top:18px}.calc span{font:9px DM Mono;color:var(--lime)}.calc strong{font-size:12px}.example-row{display:flex;gap:16px;margin-top:14px;align-items:center;font-size:11px}.fork{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:center;height:68px;align-items:end}.fork span{font:9px DM Mono;color:var(--muted)}.parallel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.parallel-grid .node{height:100%}.merge{height:60px}details{border-top:1px dashed var(--line);margin-top:18px;padding-top:12px}summary{font:600 10px DM Mono;color:var(--orange);cursor:pointer;list-style:none}summary:before{content:"+";margin-right:8px}details[open] summary:before{content:"−"}details p{font-size:11px!important;line-height:1.65!important;color:#59635c!important;margin:10px 0 0}.architecture,.outputs,.review{padding:90px 0;border-top:1px solid var(--line)}.section-title{margin-bottom:38px}.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.arch-grid article{background:var(--card);border:1px solid var(--line)}.arch-top{padding:20px;color:white;display:flex;justify-content:space-between;align-items:center}.arch-top span{font:9px DM Mono}.local-bg{background:var(--green)}.firebase-bg{background:var(--blue)}.ai-bg{background:var(--orange)}.arch-grid ul,.review-grid ul{padding:14px 38px 8px;margin:0}.arch-grid li,.review-grid li{font-size:12px;line-height:1.6;margin:8px 0}.arch-grid article>p{margin:12px 24px 24px;padding-top:15px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.schema-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.schema-grid>div{display:flex;flex-wrap:wrap;gap:7px;background:var(--card);border:1px solid var(--line);padding:22px}.schema-grid b{width:100%;margin-bottom:8px}.score-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px}.score-row div{background:var(--card);padding:20px;display:flex;justify-content:space-between}.score-row span{font-size:11px;color:var(--muted)}.score-row b{font:500 18px DM Mono;color:var(--green)}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.review-grid article{padding:28px;border:1px solid var(--line);background:var(--card)}.review-grid h3,.fixes h3{font-size:20px;margin-top:0}.pros{border-top:5px solid var(--green)!important}.cons{border-top:5px solid var(--orange)!important}.fixes{margin-top:20px;padding:30px;background:var(--ink);color:white}.fixes ol{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;padding-left:24px}.fixes li{font-size:12px;line-height:1.65;color:#cbd3cc;padding-left:8px}.fixes b{color:var(--lime)}footer{border-top:1px solid var(--line);padding:32px 0 50px;display:flex;justify-content:space-between;color:var(--muted);font:10px DM Mono}.critical-only .node:not(.critical),.critical-only .branch-label{display:none}.critical-only .connector:has(+ .node:not(.critical)){display:none}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}/* Example bar */
.example-bar{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);overflow-x:auto}.example-bar-label{font:600 11px DM Mono;color:var(--muted);white-space:nowrap;letter-spacing:.06em}.example-chips{display:flex;gap:8px;flex-wrap:nowrap}.example-chip{border:1px solid var(--line);background:var(--card);padding:10px 16px;font:600 12px Manrope;color:var(--muted);cursor:pointer;border-radius:20px;white-space:nowrap;transition:all .18s ease}.example-chip:hover{border-color:var(--green);color:var(--green)}.example-chip.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 4px 14px rgba(21,91,66,.2)}

/* Mode toggle */
.mode-toggle{border:1px solid var(--line);background:transparent;padding:9px 14px;font:700 11px Manrope;color:var(--muted);cursor:pointer;border-radius:4px;transition:all .15s ease}.mode-toggle.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Plain decision strip */
.plain-decision{margin:14px 0 12px;padding:12px 16px;border-radius:8px;background:linear-gradient(135deg,#e8f5ee,#f0f7e8);border:1px solid rgba(21,91,66,.12);font:600 13px Manrope;color:var(--green);line-height:1.5}

/* Trace cards */
.trace-card{margin:10px 0 14px;padding:14px 18px;border-radius:10px;background:#fffbe6;border:1px solid #e8d37e;box-shadow:0 4px 12px rgba(232,211,126,.15)}.trace-label{font:700 10px DM Mono;color:var(--orange);text-transform:uppercase;letter-spacing:.08em}.trace-decision{margin:6px 0 8px;font:500 13px Manrope;color:var(--ink);line-height:1.55}.trace-values{display:inline-block;margin-top:4px;font:11px DM Mono;background:#f5f0d8;padding:4px 8px;border-radius:4px;color:#665b39}

/* Dimming */
.node.dimmed{opacity:.3;pointer-events:none;transition:opacity .3s ease}.node.traced{opacity:1;border-left-width:6px;transition:opacity .3s ease}

/* Fork highlighting */
.fork span.fork-active{color:var(--green);font-weight:700;background:rgba(21,91,66,.08);padding:6px 14px;border-radius:4px}.fork span.fork-dim{opacity:.3}

/* Simple mode — hide technical details */
.simple-mode .node>p,.simple-mode .node dl,.simple-mode .node details,.simple-mode .node .decision,.simple-mode .node .calc,.simple-mode .node .example-row,.simple-mode .node code,.simple-mode .answer-callout,.simple-mode .legend-strip,.simple-mode .architecture,.simple-mode .outputs,.simple-mode .review{display:none}.simple-mode .node{padding:18px 22px}.simple-mode .node h3{font-size:16px}.simple-mode .pipeline-head>p,.simple-mode .pipeline-head .example{display:none}

@media(max-width:850px){main{padding:0 14px}.masthead{padding:0 14px}.build-stamp{display:none}.hero{grid-template-columns:1fr;gap:30px;padding:70px 0}.hero-card{transform:none}.controls{top:72px;display:block;overflow:auto}.tabs{min-width:620px}.view-tools{display:none}.pipeline-head{grid-template-columns:1fr;gap:10px}.answer-callout{grid-template-columns:1fr}.flow:before{left:20px}.node,.node.parallel{width:calc(100% - 18px);margin-left:18px;padding:20px}.connector:after{left:7px}.parallel-grid,.arch-grid,.schema-grid,.review-grid,.fixes ol{grid-template-columns:1fr}.fork{grid-template-columns:1fr;height:45px}.fork span:last-child{display:none}.score-row{grid-template-columns:1fr 1fr}.score-row div:last-child{grid-column:1/-1}footer{display:block}h1{font-size:48px}.legend-strip{gap:12px}.example-bar{flex-direction:column;align-items:flex-start;gap:10px}.example-chips{overflow-x:auto;padding-bottom:6px}}