:root { --color-primary:#3a7afe; --color-text:#000; --color-text-muted:#737373; --color-bg:#fff; --color-border:#f0f1f2; --font-heading:'Space Grotesk',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --diagram-wash:#eff4ff; --diagram-warm:#fff4e4; --diagram-line:#c9d4e6; --diagram-ink:#34435b; --diagram-green:#17634e; --diagram-green-bg:#edf7f2; }
* { box-sizing:border-box; }
body { margin:0; color:var(--color-text); background:var(--color-bg); font:14px/1.6 var(--font-body); }
main { padding:26px; border:1px solid var(--color-border); border-radius:16px; }
h1,h2,p { margin:0; }
h1 { font:700 25px/1.25 var(--font-heading); letter-spacing:-.02em; }
h2 { font:700 19px/1.3 var(--font-heading); }
.kicker { font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--diagram-ink); margin-bottom:7px; }
.request { margin-top:22px; border:1px solid var(--diagram-line); border-radius:10px; overflow:hidden; }
.input { padding:14px 18px; }
.input + .input { border-top:1px solid var(--diagram-line); background:var(--diagram-wash); }
.input strong { display:block; font-size:11px; margin-bottom:5px; }
.input p { font-size:13px; }
.fork { display:block; width:100%; height:44px; }
.fork path { fill:none; stroke:var(--diagram-line); stroke-width:2; vector-effect:non-scaling-stroke; }
.packet { fill:var(--color-primary); opacity:0; }
.paths { display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:0; }
.path { padding:17px; min-width:0; overflow-wrap:anywhere; hyphens:auto; border:1px solid var(--diagram-line); border-radius:12px; display:grid; grid-template-rows:subgrid; grid-row:span 7; row-gap:0; }
.decision { background:var(--diagram-wash); }
.read { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--diagram-ink); margin:15px 0; }
.read::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--color-primary); flex:none; }
.compute { min-height:90px; padding:12px; border:1px solid var(--diagram-line); border-radius:7px; background:var(--color-bg); }
.loop { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:11px; }
.loop span { padding:5px 7px; background:var(--diagram-warm); border-radius:4px; }
.loop b { font-weight:400; color:var(--diagram-ink); }
.repeat { display:flex; gap:6px; align-items:center; margin-top:9px; color:var(--diagram-ink); font-size:11px; }
.repeat svg { width:20px; height:20px; flex:none; }
.repeat path { fill:none; stroke:currentColor; stroke-width:1.5; }
.compute-label { font-size:11px; color:var(--diagram-ink); margin-bottom:7px; }
.options { display:flex; gap:5px; flex-wrap:wrap; }
.options span { padding:5px 7px; border:1px solid var(--diagram-line); border-radius:4px; font-size:11px; }
.output-label { margin:15px 0 7px; font-size:11px; font-weight:600; }
.answer { border:1px solid var(--diagram-line); background:var(--color-bg); border-radius:7px; padding:12px; min-height:113px; }
.tokens { display:flex; gap:3px; flex-wrap:wrap; align-content:flex-start; }
.token { display:inline-block; padding:1px 3px; border-radius:3px; background:var(--diagram-warm); font:12px/1.8 ui-monospace,monospace; }
.row { display:grid; grid-template-columns:61px 1fr 29px; gap:6px; align-items:center; font-size:11px; margin:7px 0; }
.track { height:7px; background:var(--color-border); border-radius:4px; overflow:hidden; }
.bar { height:100%; background:var(--color-primary); border-radius:4px; transform-origin:left; }
.bar.billing { width:92%; } .bar.technical { width:5%; } .bar.review { width:3%; }
.stage { margin-top:12px; font-size:11px; display:flex; gap:7px; align-items:flex-start; color:var(--diagram-ink); }
.stage::before { content:''; width:6px; height:6px; margin-top:6px; border-radius:50%; background:var(--diagram-green); flex:none; }
.stage span { display:none; }
.stage .complete { display:inline; }
.metrics { display:block; font-size:11px; font-weight:400; color:var(--diagram-ink); margin-top:3px; font-variant-numeric:tabular-nums; }
.handoff { margin-top:26px; padding-top:24px; border-top:1px solid var(--diagram-line); }
.handoff h2 { margin-bottom:16px; }
.workflow { max-width:560px; margin:auto; }
.node { padding:11px 14px; border:1px solid var(--diagram-line); border-radius:8px; font-size:12px; background:var(--diagram-wash); text-align:center; width:70%; margin:auto; }
.branches { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.branch { border:1px solid var(--diagram-line); border-radius:8px; padding:14px; min-width:0; }
.branch small { display:block; font-size:10px; color:var(--diagram-ink); margin-bottom:6px; }
.branch strong { display:block; font-size:12px; margin-bottom:5px; }
.branch p { font-size:11px; }
.branch.route { background:var(--diagram-green-bg); }
.branch.review { background:var(--diagram-warm); }
.connector { display:block; width:100%; height:34px; }
.connector path { fill:none; stroke:var(--diagram-line); stroke-width:2; vector-effect:non-scaling-stroke; }
.run .packet { animation:request-arrival .65s both; }
.run .read { animation:read-input .7s both; }
.run .token { animation:token-arrival .12s both; animation-delay:var(--at); }
.run .repeat svg { animation:decode-loop .6s .7s 6; }
.run .options span { animation:option-score .5s .7s both; }
.run .bar { animation:score-arrival .5s .7s both; }
.run .generation .stage { animation:generation-state 4.6s both; }
.run .decision .stage { animation:decision-state 1.3s both; }
.run .path .stage .working { display:inline; }
.run .path .stage .complete { display:none; }
.run .path.finished .stage .working { display:none; }
.run .path.finished .stage .complete { display:inline; }
@keyframes request-arrival { 0% { opacity:0; transform:translateY(-14px); } 30%,70% { opacity:1; } 100% { opacity:0; transform:translateY(18px); } }
@keyframes read-input { 0%,30% { opacity:.4; } 100% { opacity:1; } }
@keyframes token-arrival { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes decode-loop { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@keyframes option-score { from { border-color:var(--diagram-line); } to { border-color:var(--color-primary); } }
@keyframes score-arrival { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes generation-state { 0%,99% { color:var(--diagram-ink); } 100% { color:var(--diagram-green); } }
@keyframes decision-state { 0%,99% { color:var(--diagram-ink); } 100% { color:var(--diagram-green); } }
@media (max-width:768px) { main { padding:20px 12px; } h1 { font-size:23px; } .path { padding:12px 9px; } h2 { font-size:16px; } .kicker { font-size:9px; letter-spacing:.04em; } .input { padding:12px; } .paths { column-gap:8px; } .compute { padding:9px; min-height:126px; } .answer { padding:8px; min-height:126px; } .read { font-size:10px; min-height:32px; } .loop { gap:3px; font-size:10px; } .repeat { font-size:10px; } .token { font-size:10px; padding:1px 2px; } .options { gap:4px; } .options span { font-size:10px; padding:3px 5px; } .row { grid-template-columns:1fr 27px; gap:4px; font-size:10px; margin:4px 0 8px; } .row .track { grid-row:2; grid-column:1 / -1; } .row .value { grid-column:2; grid-row:1; } .branches { gap:10px; } .branch { padding:11px; } .node { width:85%; } .stage { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { .run * { animation:none !important; } .run .path .stage .working { display:none; } .run .path .stage .complete { display:inline; } }
@media print { .run * { animation:none !important; } .run .path .stage .working { display:none; } .run .path .stage .complete { display:inline; } }